/* El atributo hidden siempre oculta, aunque una clase defina display:grid/flex
   (los estilos de autor le ganan al [hidden] del navegador si no forzamos esto). */
[hidden] {
  display: none !important;
}

:root {
  color-scheme: light;
  --mt-green: #1f3d2e;
  --mt-green-hover: #2a4d3a;
  --mt-cream: #f4f1ea;
  --mt-cream-light: #fbf9f2;
  --mt-gold: #c9a961;
  --mt-ink: #2a3528;
  --mt-text-2: #6b6452;
  --mt-text-3: #8a8470;
  --mt-gold-dark: #8a7a4f;
  --mt-beige: #b8b09a;
  --mt-line: #d4cbb3;
  --mt-line-table: #e8dfc8;
  --mt-border: #b8ae95;
  --mt-up: #2a6b3d;
  --mt-down: #8b2e2e;
  --mt-cream-text: #e8e2d1;
  --mt-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mt-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mt-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  --bg: var(--mt-cream);
  --surface: var(--mt-cream-light);
  --surface-alt: rgba(201, 169, 97, 0.1);
  --border: var(--mt-line);
  --text: var(--mt-ink);
  --muted: var(--mt-text-3);
  --blue: var(--mt-green);
  --blue-ink: var(--mt-green-hover);
  --green: var(--mt-green);
  --amber: var(--mt-gold-dark);
  --red: var(--mt-down);
  --shadow: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mt-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 38px;
  border: 1px solid var(--mt-green);
  border-radius: 6px;
  background: var(--mt-green);
  color: var(--mt-cream-text);
  padding: 0 14px;
  cursor: pointer;
  letter-spacing: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

button:hover {
  background: var(--blue-ink);
}

button:disabled {
  cursor: not-allowed;
  border-color: var(--mt-line);
  background: rgba(184, 176, 154, 0.25);
  color: var(--mt-text-3);
}

input,
select {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-bottom: 1px solid var(--mt-border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 0 2px;
}

input:focus,
select:focus {
  border-bottom-color: var(--mt-gold);
  outline: none;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

th,
td {
  border-bottom: 1px solid var(--border);
  padding: 11px 12px;
  text-align: right;
  white-space: nowrap;
}

th:first-child,
td:first-child,
th:nth-child(2),
td:nth-child(2) {
  text-align: left;
}

th {
  background: transparent;
  color: var(--mt-text-3);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

td {
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3 {
  font-family: var(--mt-serif);
  font-weight: 600;
}

.mt-nav {
  display: grid;
  grid-template-columns: minmax(230px, auto) minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 22px;
  min-height: 58px;
  padding: 0 22px;
  background: var(--mt-green);
  color: var(--mt-cream-text);
}

.mt-nav__brand,
.mt-nav__menus,
.mt-nav__actions {
  display: flex;
  align-items: center;
}

.mt-nav__brand {
  gap: 10px;
  color: var(--mt-gold);
}

.mt-nav__wordmark {
  color: var(--mt-cream-text);
  font-family: var(--mt-serif);
  font-size: 1.15rem;
  font-weight: 600;
}

.mt-nav__menus {
  gap: 4px;
  min-width: 0;
}

.mt-nav__actions {
  gap: 10px;
  justify-content: flex-end;
}

.mt-nav__actions .ghost-button {
  border-color: var(--mt-gold);
  color: var(--mt-gold);
}

.mt-nav__actions .ghost-button:hover {
  background: rgba(201, 169, 97, 0.12);
  color: var(--mt-cream-text);
}

.mt-nav__menu-group {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.mt-nav__menu-button {
  height: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mt-cream-text);
  font-size: 0.83rem;
  font-weight: 600;
  padding: 0 14px;
}

.mt-nav__menu-button::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 1px solid var(--mt-gold);
  border-bottom: 1px solid var(--mt-gold);
  transform: rotate(45deg) translateY(-2px);
}

.mt-nav__menu-group:hover .mt-nav__menu-button,
.mt-nav__menu-group:focus-within .mt-nav__menu-button,
.mt-nav__menu-button.is-active {
  background: var(--mt-green-hover);
}

.mt-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  display: none;
  min-width: 188px;
  padding: 8px;
  border: 1px solid var(--mt-gold);
  border-top: 0;
  background: var(--mt-cream-light);
}

.mt-nav__menu-group:hover .mt-nav__dropdown,
.mt-nav__menu-group:focus-within .mt-nav__dropdown {
  display: grid;
  gap: 4px;
}

.mt-nav__dropdown button {
  justify-content: flex-start;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--mt-ink);
  padding: 0 10px;
  text-align: left;
}

.mt-nav__dropdown button:hover,
.mt-nav__dropdown button.is-active {
  background: rgba(201, 169, 97, 0.12);
  color: var(--mt-ink);
}

.mt-nav__dropdown-title {
  margin-top: 5px;
  padding: 6px 10px 2px;
  color: var(--mt-gold-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.mt-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 8px 22px;
  border-bottom: 1px solid var(--mt-gold);
  background: var(--mt-cream);
}

.mt-breadcrumb {
  color: var(--mt-text-2);
  font-family: var(--mt-serif);
  font-size: 0.9rem;
  font-style: italic;
  white-space: nowrap;
}

.mt-subnav__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.mt-subnav__tabs button {
  min-height: 29px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--mt-text-2);
  padding: 0 10px;
  font-size: 0.78rem;
}

.mt-subnav__tabs button:hover,
.mt-subnav__tabs button.is-active {
  border-color: var(--mt-gold);
  background: rgba(201, 169, 97, 0.12);
  color: var(--mt-ink);
}

.mt-sub {
  color: var(--mt-text-3);
  font-family: var(--mt-serif);
  font-size: 0.88rem;
  font-style: italic;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.04);
}

.topbar h1,
.toolbar-band h2,
.panel h2,
.data-section h3 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.workspace {
  display: grid;
  grid-template-columns: max-content minmax(280px, 340px) minmax(0, 1fr);
  gap: 18px;
  padding: 18px 22px 24px;
}

/* Menu lateral por segmento: General / Curvas */
.segment-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: start;
  min-width: 118px;
  padding: 6px;
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  background: var(--mt-cream-light);
}

.segment-nav__item {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--mt-text-2);
  padding: 0 14px;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.segment-nav__item:hover {
  background: rgba(201, 169, 97, 0.12);
}

.segment-nav__item.is-active {
  border-color: var(--mt-gold);
  background: var(--mt-green);
  color: var(--mt-cream-text);
}

.control-panel,
.main-panel {
  min-width: 0;
}

.control-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}

.main-panel {
  display: grid;
  gap: 14px;
}

.panel,
.data-section,
.toolbar-band {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.panel-title,
.section-heading,
.toolbar-band,
.status-strip,
.button-row,
.series-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.panel h2 {
  font-size: 1rem;
}

.toolbar-band {
  padding: 16px;
}

.toolbar-band h2 {
  font-size: 1.25rem;
}

.data-section {
  overflow: hidden;
}

.section-heading {
  min-height: 54px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.section-heading h3 {
  font-size: 1rem;
}

.inline-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.stack {
  display: grid;
  gap: 8px;
}

.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.field-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--text);
  font-weight: 600;
}

.field-grid input {
  width: 16px;
  min-height: 16px;
}

.chip-list,
.result-list,
.message-area {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.result-list {
  max-height: 210px;
  overflow: auto;
}

.result-button,
.chip,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 30px;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 0.82rem;
  font-weight: 700;
}

.result-button {
  width: 100%;
  justify-content: flex-start;
  border-color: var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.result-button:hover {
  border-color: var(--mt-gold);
  background: rgba(201, 169, 97, 0.12);
}

.result-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip {
  border: 1px solid var(--mt-border);
  background: rgba(201, 169, 97, 0.12);
  color: var(--mt-ink);
}

.chip button {
  min-width: 22px;
  min-height: 22px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
}

.status-pill {
  border: 1px solid var(--border);
  background: rgba(251, 249, 242, 0.1);
  color: var(--muted);
}

.status-pill.is-ready {
  border-color: rgba(201, 169, 97, 0.7);
  background: rgba(201, 169, 97, 0.12);
  color: var(--mt-cream-text);
}

.status-pill.is-error {
  border-color: rgba(139, 46, 46, 0.5);
  background: rgba(139, 46, 46, 0.12);
  color: #f4d5d5;
}

.status-pill.is-waiting {
  border-color: rgba(201, 169, 97, 0.45);
  background: rgba(201, 169, 97, 0.1);
  color: var(--mt-gold);
}

.control-panel .status-pill,
.main-panel .status-pill {
  color: var(--mt-text-2);
}

.toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.credit-meter {
  display: grid;
  gap: 7px;
  min-width: 280px;
  padding: 10px 12px;
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  background: rgba(251, 249, 242, 0.72);
}

.credit-meter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.credit-meter__title {
  color: var(--mt-gold-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.credit-meter__refresh {
  min-height: 24px;
  border-color: var(--mt-border);
  border-radius: 999px;
  background: transparent;
  color: var(--mt-text-2);
  padding: 0 9px;
  font-size: 0.72rem;
  font-weight: 700;
}

.credit-meter__refresh:hover {
  border-color: var(--mt-gold);
  background: rgba(201, 169, 97, 0.12);
  color: var(--mt-ink);
}

.credit-summary {
  display: grid;
  gap: 8px;
  width: 100%;
}

#costHint {
  margin: 0;
}

.credit-summary.is-loading {
  opacity: 0.58;
}

.credit-summary__empty {
  color: var(--mt-text-3);
  font-size: 0.82rem;
  font-style: italic;
}

.credit-line {
  display: grid;
  gap: 4px;
}

.credit-line__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--mt-text-2);
  font-size: 0.78rem;
}

.credit-line__top strong {
  color: var(--mt-ink);
  font-family: var(--mt-mono);
  font-size: 0.78rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.credit-bar {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border: 1px solid var(--mt-line);
  border-radius: 999px;
  background: var(--mt-cream);
}

.credit-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mt-green), var(--mt-gold));
}

.credit-line__foot {
  color: var(--mt-text-3);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.message-area {
  min-height: 0;
}

.message {
  width: 100%;
  border-left: 4px solid var(--amber);
  border-radius: 6px;
  background: rgba(201, 169, 97, 0.13);
  color: var(--mt-gold-dark);
  padding: 10px 12px;
  font-weight: 650;
}

.message.error {
  border-left-color: var(--red);
  background: rgba(139, 46, 46, 0.09);
  color: var(--mt-down);
}

.message.success {
  border-left-color: var(--green);
  background: rgba(42, 107, 61, 0.08);
  color: var(--mt-up);
}

.ghost-button {
  border-color: var(--border);
  background: transparent;
  color: var(--mt-green);
}

.ghost-button:hover {
  border-color: var(--mt-gold);
  background: rgba(201, 169, 97, 0.12);
}

.primary-button {
  border-color: var(--mt-green);
  background: var(--mt-green);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.primary-button:hover {
  background: #165d44;
}

.full-width {
  width: 100%;
}

.table-wrap {
  width: 100%;
  overflow: auto;
}

.chart-section {
  display: grid;
}

.series-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.series-controls select,
.series-controls input {
  width: auto;
  min-width: 142px;
}

#seriesCanvas {
  width: 100%;
  height: auto;
  aspect-ratio: 11 / 3.6;
  background: var(--mt-cream-light);
}

.muted {
  color: var(--muted);
  font-size: 0.86rem;
}

.market-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  border: 1px solid var(--mt-gold);
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.12);
  color: var(--mt-ink);
  padding: 0 10px;
  font-family: var(--mt-serif);
  font-size: 0.85rem;
  font-style: italic;
}

/* --- Vista Mercado / Curvas --- */
.view-switch {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--mt-line);
  border-radius: 999px;
  background: var(--mt-cream-light);
  width: fit-content;
}

.view-switch__btn {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--mt-text-2);
  padding: 0 18px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.view-switch__btn:hover {
  background: rgba(201, 169, 97, 0.12);
}

.view-switch__btn.is-active {
  border-color: var(--mt-gold);
  background: rgba(201, 169, 97, 0.16);
  color: var(--mt-ink);
}

.mt-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--mt-border);
  border-radius: 999px;
  background: transparent;
  color: var(--mt-text-2);
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 600;
}

.mt-chip:hover {
  border-color: var(--mt-gold);
}

.mt-chip.active {
  border-color: var(--mt-gold);
  background: rgba(201, 169, 97, 0.14);
  color: var(--mt-ink);
}

.mt-chip.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
  border-style: dashed;
}

.mt-chip.is-disabled:hover {
  border-color: var(--mt-border);
  background: transparent;
}

.curve-body {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.curve-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.curve-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.curve-field__label {
  color: var(--mt-gold-dark);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-row.is-loading {
  pointer-events: none;
  opacity: 0.55;
}

.curve-field--rate {
  justify-self: start;
}

.curve-bonds {
  display: grid;
  gap: 7px;
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--mt-line-table);
}

.mt-chip.is-off {
  opacity: 0.45;
  text-decoration: line-through;
}

.curve-actionbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.curve-labels-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mt-text-2);
  font-size: 0.8rem;
  font-weight: 600;
}

.curve-labels-toggle input {
  width: 16px;
  min-height: 16px;
}

#curveCostHint {
  margin: 0;
  margin-left: auto;
}

.curve-chart-wrap {
  position: relative;
  width: 100%;
}

/* Modo Curvas: sin panel de controles General, a lo ancho */
.workspace.curves-mode {
  grid-template-columns: max-content minmax(0, 1fr);
}

.workspace.curves-mode .control-panel {
  display: none;
}

.workspace.curves-mode #loadWatchlistBtn {
  display: none;
}

/* Controles minimalistas arriba */
.curve-controls--min {
  gap: 18px;
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--mt-line-table);
}

.curve-historic {
  align-items: center;
}

.curve-hist-date {
  width: auto;
  min-height: 28px;
  min-width: 140px;
}

/* Layout de la vista Curvas: contenido + simulador al costado.
   Scopeado a --sim: Forwards/Relativos usan .curve-body a 1 columna (si no,
   sus matrices/graficos caen en la columna angosta del simulador). */
.curve-body--sim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 16px;
  align-items: start;
}

.curve-main {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.curve-sim {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  background: var(--mt-cream-light);
  position: sticky;
  top: 14px;
}

.curve-sim__title {
  font-family: var(--mt-serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--mt-ink);
}

.curve-sim__note {
  margin: 0;
  color: var(--mt-text-3);
  font-size: 0.78rem;
}

.curve-sim__field {
  display: grid;
  gap: 4px;
  color: var(--mt-text-2);
  font-size: 0.78rem;
  font-weight: 700;
}

.curve-sim__field input {
  width: 100%;
}

.curve-sim__list {
  display: grid;
  gap: 6px;
}

.curve-sim__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid var(--mt-line);
  border-left: 3px solid var(--mt-gold);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--mt-ink);
}

.curve-sim__item button {
  min-height: 22px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--mt-down);
  padding: 0 6px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .curve-body--sim {
    grid-template-columns: 1fr;
  }

  .curve-sim {
    position: static;
  }
}

/* Curvas apiladas: una debajo de la otra */
.curve-panels {
  display: grid;
  gap: 16px;
}

.curve-panel {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  background: var(--mt-cream-light);
}

.curve-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.curve-panel__title {
  font-family: var(--mt-serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--mt-ink);
}

.curve-panel__meta {
  color: var(--mt-text-3);
  font-size: 0.76rem;
  font-style: italic;
}

.curve-panel canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 260;
  background: var(--mt-cream-light);
}

/* Relativos */
.rel-ticker {
  width: auto;
  min-width: 118px;
  min-height: 28px;
  text-transform: uppercase;
}

#relCanvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1120 / 420;
  border: 1px solid var(--mt-line);
  border-radius: 8px;
  background: var(--mt-cream-light);
}

.rel-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.rel-stats span {
  font-size: 0.82rem;
  color: var(--mt-text-3);
}

.rel-stats strong {
  color: var(--mt-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Modo Break-even: a lo ancho, sin nav de segmento ni sidebar */
.workspace.be-mode {
  grid-template-columns: 1fr;
}

.workspace.be-mode .segment-nav,
.workspace.be-mode .control-panel {
  display: none;
}

.curve-body-single {
  display: grid;
  gap: 14px;
  padding: 16px;
}

#beCanvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1120 / 440;
  background: var(--mt-cream-light);
}

#beHistCanvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1120 / 360;
  background: var(--mt-cream-light);
}

#beFwdHistCanvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1120 / 380;
  background: var(--mt-cream-light);
}

/* Break-even: topbar compartida + sub-nav lateral (Resumen / Fijo-CER / Forwards) */
.be-topbar {
  margin: 0 16px;
}

.be-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 0 16px 16px;
}

.be-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: start;
  min-width: 122px;
  padding: 6px;
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  background: var(--mt-cream-light);
  position: sticky;
  top: 12px;
}

.be-nav__item {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--mt-text-2);
  padding: 0 14px;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
}

.be-nav__item:hover {
  background: rgba(201, 169, 97, 0.12);
}

.be-nav__item.is-active {
  border-color: var(--mt-gold);
  background: var(--mt-green);
  color: var(--mt-cream-text);
}

.be-content {
  min-width: 0;
}

.be-subview {
  display: grid;
  gap: 14px;
}

/* El atributo hidden debe ganarle al display:grid de arriba (si no, se ven las
   3 subvistas apiladas y los picks aparecen fuera del Resumen). */
.be-subview[hidden] {
  display: none;
}

/* Resumen: dos columnas top / worst picks */
.be-resumen__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.be-resumen__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.be-pick-col {
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--mt-cream-light);
}

.be-pick-col__head {
  padding: 9px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--mt-cream-text);
}

.be-pick-col--top .be-pick-col__head {
  background: #2A6B3D;
}

.be-pick-col--worst .be-pick-col__head {
  background: #8B2E2E;
}

.be-pick-list {
  display: flex;
  flex-direction: column;
}

.be-pick {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 10px;
  padding: 9px 12px;
  border-top: 1px solid var(--mt-line);
  cursor: pointer;
}

.be-pick:first-child {
  border-top: none;
}

.be-pick:hover {
  background: rgba(201, 169, 97, 0.1);
}

.be-pick__rank {
  font-weight: 800;
  color: var(--mt-text-2);
  font-variant-numeric: tabular-nums;
}

.be-pick__tk {
  font-weight: 800;
  color: var(--mt-ink);
}

.be-pick__score {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.be-pick__score--buy { color: #2A6B3D; }
.be-pick__score--sell { color: #8B2E2E; }
.be-pick__score--flat { color: var(--mt-text-2); }

.be-pick__detail {
  grid-column: 1 / -1;
  font-size: 0.76rem;
  color: var(--mt-text-2);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}

/* Resumen: panel de analisis de un pick */
.be-analysis {
  border: 1px solid var(--mt-gold);
  border-radius: 10px;
  background: var(--mt-cream-light);
  overflow: hidden;
}

.be-analysis__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: var(--mt-green);
  color: var(--mt-cream-text);
}

.be-analysis__head .curve-panel__title {
  color: var(--mt-cream-text);
}

.be-analysis__body {
  padding: 12px 14px;
  display: grid;
  gap: 10px;
  font-size: 0.86rem;
  line-height: 1.45;
}

.be-analysis__verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  width: fit-content;
}

.be-analysis__verdict--buy { background: rgba(42, 107, 61, 0.16); color: #2A6B3D; }
.be-analysis__verdict--sell { background: rgba(139, 46, 46, 0.16); color: #8B2E2E; }
.be-analysis__verdict--flat { background: rgba(138, 132, 114, 0.16); color: var(--mt-text-2); }

.be-analysis__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
}

.be-analysis__sig {
  border-top: 1px solid var(--mt-line);
  padding-top: 8px;
}

.be-analysis__sig-head {
  font-weight: 800;
  color: var(--mt-ink);
}

.be-analysis__sig-head .tag-buy { color: #2A6B3D; }
.be-analysis__sig-head .tag-sell { color: #8B2E2E; }

.be-analysis__z {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.be-analysis__note {
  color: var(--mt-text-2);
  font-size: 0.8rem;
}

.be-analysis__foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--mt-line);
  padding-top: 8px;
}

@media (max-width: 900px) {
  .be-layout {
    grid-template-columns: 1fr;
  }
  .be-nav {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }
  .be-resumen__cols {
    grid-template-columns: 1fr;
  }
}

/* Forwards: matriz heatmap */
.fwd-matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  font-variant-numeric: tabular-nums;
}

.fwd-matrix th {
  padding: 5px 8px;
  border-bottom: 1px solid var(--mt-border);
  color: var(--mt-text-3);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}

.fwd-matrix th:first-child {
  text-align: left;
}

.fwd-matrix td {
  padding: 0;
  border: 1px solid var(--mt-cream-light);
  text-align: center;
}

.fwd-matrix .fwd-row-head {
  padding: 5px 10px;
  color: var(--mt-ink);
  font-weight: 700;
  text-align: left;
}

.fwd-matrix .fwd-diag {
  background: var(--mt-cream);
}

.fwd-cell {
  display: block;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  color: #1c1c18;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.fwd-cell:hover {
  outline: 2px solid var(--mt-green);
  outline-offset: -2px;
}

.fwd-hist {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--mt-gold);
  border-radius: 10px;
  background: var(--mt-cream-light);
}

#fwdHistCanvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1120 / 380;
  background: var(--mt-cream-light);
}

.fwd-signal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border: 1px solid var(--mt-line);
  border-left: 4px solid var(--mt-gold);
  border-radius: 8px;
  background: rgba(201, 169, 97, 0.08);
  font-size: 0.85rem;
  color: var(--mt-text-2);
}

.fwd-signal__legs {
  display: inline-flex;
  gap: 8px;
}

.fwd-leg {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 6px;
  padding: 2px 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fwd-leg--buy {
  border: 1px solid rgba(42, 107, 61, 0.5);
  background: rgba(42, 107, 61, 0.12);
  color: var(--mt-up);
}

.fwd-leg--sell {
  border: 1px solid rgba(139, 46, 46, 0.5);
  background: rgba(139, 46, 46, 0.1);
  color: var(--mt-down);
}

.fwd-signal__note {
  color: var(--mt-text-3);
  font-style: italic;
}

.curve-tooltip {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 2px;
  max-width: 200px;
  border: 1px solid var(--mt-gold);
  border-radius: 10px;
  background: var(--mt-cream-light);
  color: var(--mt-ink);
  padding: 8px 10px;
  font-size: 0.78rem;
  pointer-events: none;
  transform: translate(12px, -50%);
  box-shadow: 0 6px 18px rgba(31, 61, 46, 0.16);
}

.curve-tooltip strong {
  font-family: var(--mt-serif);
  font-size: 0.9rem;
}

.curve-incomplete:not(:empty) {
  border-top: 1px solid var(--mt-line-table);
  padding-top: 10px;
}

.curve-incomplete h4 {
  margin: 0 0 6px;
  color: var(--mt-down);
  font-family: var(--mt-serif);
  font-size: 0.9rem;
}

.curve-incomplete ul {
  margin: 0;
  padding-left: 18px;
  color: var(--mt-text-2);
  font-size: 0.82rem;
}

.curve-incomplete li {
  margin-bottom: 3px;
}

@media (max-width: 980px) {
  .mt-nav {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  .mt-nav__brand,
  .mt-nav__menus,
  .mt-nav__actions {
    justify-content: center;
  }

  .mt-nav__menus {
    flex-wrap: wrap;
  }

  .mt-nav__menu-button {
    min-height: 38px;
  }

  .mt-subnav {
    align-items: flex-start;
    flex-direction: column;
    padding: 10px 12px;
  }

  .mt-breadcrumb {
    white-space: normal;
  }

  .mt-subnav__tabs {
    justify-content: flex-start;
  }

  .workspace,
  .workspace.curves-mode {
    grid-template-columns: 1fr;
  }

  .segment-nav {
    flex-direction: row;
  }

  .segment-nav__item {
    flex: 1;
    text-align: center;
  }

  .control-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .topbar,
  .toolbar-band,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace {
    padding: 12px;
  }

  .control-panel,
  .two-col,
  .field-grid {
    grid-template-columns: 1fr;
  }

  .inline-control {
    grid-template-columns: 1fr;
  }

  .series-controls,
  .series-controls select,
  .series-controls input,
  .mt-nav__actions,
  .status-strip {
    width: 100%;
  }

  .status-strip {
    justify-content: stretch;
  }

  .mt-nav__actions .ghost-button,
  .mt-nav__actions .status-pill,
  .status-strip button,
  .series-controls button {
    width: 100%;
    justify-content: center;
  }

  .toolbar-actions {
    width: 100%;
    justify-content: stretch;
  }

  .credit-meter {
    width: 100%;
    min-width: 0;
  }

  .toolbar-actions #loadWatchlistBtn {
    width: 100%;
  }

  #curveCostHint {
    margin-left: 0;
  }

  .curve-actionbar .primary-button {
    width: 100%;
  }
}

/* ===========================================================================
   Panel general (dashboard)
   =========================================================================== */
.dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px 6px;
}

.dash-title {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.15rem;
  color: var(--mt-ink);
}

.dash-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

#dashMessage {
  padding: 0 16px;
}

.dash-grid {
  display: grid;
  /* paneles anchos para que TODAS las columnas entren sin cortarse ni scroll.
     Con la columna de Monto total la tabla de tasa fija llega a 9 columnas, asi
     que 520px ya no alcanzaba y se cortaba.
     min(100%, 640px) => en pantallas chicas ocupa el 100% (1 columna). */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 640px), 1fr));
  gap: 14px;
  padding: 8px 16px 20px;
  align-items: start;
}

.dash-panel {
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  background: var(--mt-cream-light);
  overflow: hidden;
  min-width: 0;
}

.dash-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--mt-green);
  color: var(--mt-cream-text);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.3px;
}

.dash-panel__meta {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.85;
}

.dash-panel__body {
  overflow: visible;
}

.dash-empty {
  padding: 22px 14px;
  text-align: center;
  color: var(--mt-text-2);
  font-size: 0.85rem;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.dash-table thead th {
  background: var(--mt-cream);
  color: var(--mt-text-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: right;
  padding: 6px 8px;
  border-bottom: 1px solid var(--mt-border);
  white-space: nowrap;
}

.dash-table thead th:nth-child(2) { text-align: left; }
.dash-table .dash-var { text-align: center; width: 44px; }

.dash-table td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--mt-line-table);
  text-align: right;
  white-space: nowrap;
}

.dash-table td.num { text-align: right; }
.dash-table .dash-tk { text-align: left; font-weight: 700; color: var(--mt-ink); }
.dash-table .dash-var { text-align: center; }
.dash-soon { color: var(--mt-text-3); }
.dash-table tbody tr:hover { background: rgba(201, 169, 97, 0.08); }

.dash-table--fx td:first-child { text-align: left; font-weight: 700; color: var(--mt-ink); }

/* ---------------------------------------------------------------------------
   Futuros de dolar: 18 columnas (puntas, ajuste y las tasas implicitas). Es la
   tabla mas ancha de la app, asi que va mas chica y mas apretada.
   --------------------------------------------------------------------------- */
.fut-table { font-size: 0.76rem; }
.fut-table td { padding: 3px 7px; }
.fut-table thead th { padding: 6px 7px; }
/* En las tablas del Panel la 2da columna es el ticker (izquierda); aca es el
   vencimiento, y la 1ra es el contrato. */
.fut-table thead th:nth-child(1),
.fut-table td:nth-child(1),
.fut-table thead th:nth-child(2),
.fut-table td:nth-child(2) { text-align: left; }
.fut-table .fut-last { font-weight: 700; color: var(--mt-ink); }

/* Contrato mayorista: mismo vencimiento, otro tamano de lote. */
.fut-tag {
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(201, 169, 97, 0.22);
  color: var(--mt-text-2);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* ---------------------------------------------------------------------------
   Sinteticas: misma densidad que futuros. Las dos tasas (colocadora y tomadora)
   van resaltadas porque es lo unico que la mesa mira despues de la primera vez.
   --------------------------------------------------------------------------- */
.sint-table { font-size: 0.76rem; }
.sint-table td { padding: 3px 7px; }
.sint-table thead th { padding: 6px 7px; }
.sint-table thead th:nth-child(1),
.sint-table td:nth-child(1),
.sint-table thead th:nth-child(2),
.sint-table td:nth-child(2) { text-align: left; }
.sint-table .sint-rate { font-weight: 700; color: var(--mt-ink); }

/* Bono con algo raro (sin futuro, ya fixeado, vencimientos que no coinciden):
   el detalle va en el tooltip, pero tiene que verse que hay algo que leer. */
.sint-warn {
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(139, 46, 46, 0.14);
  color: var(--mt-down);
  font-size: 0.66rem;
  font-weight: 700;
}

.rel-ticker--xs { max-width: 68px; }

/* Selector de pata (CER/TAMAR/Fija) dentro del encabezado de cada curva dual */
.curve-panel__legs {
  padding: 0 12px 8px;
}

/* FX · solapas arriba del contenido (una sola por ahora: Canje) */
.be-nav--top {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin: 0 16px 10px;
  border-right: 0;
  border-bottom: 1px solid var(--mt-line-table);
  padding: 0 0 6px;
}

/* Cajita al pie de cada curva: bono a precio y punto teorico por duration/MD */
.curve-sim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 10px 16px;
  align-items: start;
  margin: 0 12px 10px;
  border-top: 1px dashed var(--mt-line);
  padding-top: 8px;
}

.curve-sim__forms { display: grid; gap: 6px; min-width: 0; }

/* Ficha del bono ploteado, al costado de los controles */
.curve-sim__fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.curve-ficha {
  min-width: 186px;
  border: 1px solid var(--mt-line);
  border-left: 3px solid var(--mt-gold);
  border-radius: 6px;
  background: var(--mt-cream-light);
  padding: 6px 8px;
}

/* El teorico no es un bono real: se distingue tambien en la ficha */
.curve-ficha--teorica { border-left-color: #B04A3A; }

.curve-ficha__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.curve-ficha__tk {
  font-family: var(--mt-serif);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--mt-ink);
}

.curve-ficha__x {
  min-height: 18px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--mt-text-3);
  padding: 0 5px;
  font-size: 0.9rem;
  line-height: 1;
}

.curve-ficha__x:hover { background: rgba(139, 46, 46, 0.12); color: var(--mt-down); }

.curve-ficha__grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 10px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.curve-ficha__grid span:nth-child(odd) { color: var(--mt-text-2); }
.curve-ficha__grid span:nth-child(even) { text-align: right; color: var(--mt-ink); font-weight: 600; }

.curve-ficha__warn {
  margin-top: 4px;
  color: var(--mt-gold-dark);
  font-size: 0.7rem;
}

.curve-sim__row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.curve-sim__label {
  min-width: 118px;
  color: var(--mt-text-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.curve-sim input {
  width: auto;
  max-width: 118px;
  min-height: 30px;
  font-size: 0.82rem;
}

.curve-sim__nombre { max-width: 132px; }
.curve-sim__msg { font-size: 0.78rem; color: var(--mt-text-2); min-height: 1em; }
.curve-sim__msg.is-error { color: var(--mt-down); }
.curve-sim__msg.is-ok { color: var(--mt-up); }
.curve-sim__msg.is-warn { color: var(--mt-gold-dark); }

/* Hard Dollar / General: pantalla limpia, solo los tres cuadros */
.workspace.wl-mode { grid-template-columns: max-content minmax(0, 1fr); }
.workspace.wl-mode .control-panel { display: none; }

/* En Hard Dollar, General muestra SOLO la watchlist: se ocultan la tabla de
   indicadores y la serie historica, que viven en el resto de los segmentos. */
#viewMercado.solo-watchlist > .data-section:not(#wlSection):not(#spSection) { display: none; }
#viewMercado.solo-watchlist #wlSection { padding-top: 4px; }

/* Watchlist de Hard Dollar: los tres cuadros, uno al lado del otro */
.wl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 12px;
  padding: 0 16px 8px;
}

.wl-table { font-size: 0.78rem; }
.wl-table thead th { text-align: center; }
.wl-table thead th[rowspan] { text-align: left; vertical-align: bottom; }
/* El bloque del cable directo, separado del dolarizado con una linea */
.wl-table td.wl-cbl:nth-child(4),
.wl-table thead tr:first-child th:last-child { border-left: 1px solid var(--mt-line); }
.wl-table thead tr:last-child th:nth-child(3) { border-left: 1px solid var(--mt-line); }

.fxa-table { font-size: 0.8rem; }

/* Señal de bandas de canje: el veredicto de hoy, arriba de la tabla */
.fx-signal {
  margin: 10px 0 2px;
  border: 1px solid var(--mt-line);
  border-radius: 8px;
  overflow: hidden;
}

.fx-signal:empty { display: none; }

.fx-signal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(184, 176, 154, 0.18);
}

.fx-signal__head--buy { background: rgba(42, 107, 61, 0.14); }
.fx-signal__head--sell { background: rgba(139, 46, 46, 0.14); }

.fx-signal__title {
  font-family: var(--mt-serif);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--mt-ink);
}

.fx-signal__z {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--mt-ink);
}

.fx-signal__body {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  font-size: 0.86rem;
  color: var(--mt-text-2);
}

.fx-signal__nums {
  font-variant-numeric: tabular-nums;
  color: var(--mt-ink);
}

.curve-field--inline { flex-direction: column; gap: 2px; }
.fxa-table thead th:nth-child(1),
.fxa-table td:nth-child(1) { text-align: left; }

/* Cuadro de sinteticas del Panel: la tira completa de las dos puntas, separada
   por moneda. Mismos colores que el modulo (cobras verde, pagas rojo). */
.dash-sint__sep td {
  background: var(--mt-cream);
  color: var(--mt-text-2);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: left;
}

.dash-sint__coloc { color: var(--mt-up); font-weight: 600; }
.dash-sint__tom { color: var(--mt-down); font-weight: 600; }

/* Matriz de forwards de futuros: media matriz (solo largo contra corto). */
#futFwdMatrix .fwd-matrix td { font-variant-numeric: tabular-nums; }
#futFwdMatrix .fwd-diag { background: var(--mt-cream); }

/* Click en la fila (o en el punto del grafico): resalta ese bono en los dos */
.sint-table tbody tr { cursor: pointer; }
.sint-table tbody tr.sint-row--active td { background: rgba(201, 169, 97, 0.16); }

/* Contrato a punto de vencer: el futuro converge al spot y la anualizacion
   amplifica cualquier diferencia de un peso (TNA negativa sin que nada este
   roto). Se atenua para que nadie lea esa tasa como si fuera comparable. */
.fut-table tr.fut-row--short td { opacity: 0.6; }
.fut-table tr.fut-row--short .dash-tk { font-style: italic; }

.dash-panel__meta.is-error { color: var(--mt-down); opacity: 1; }

/* ---------------------------------------------------------------------------
   Franja de tipos de cambio: arriba de todo del Panel y en grande. Es el dato
   que la mesa mira todo el dia, asi que no comparte lugar con las tablas.
   --------------------------------------------------------------------------- */
.fx-strip {
  margin-bottom: 16px;
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  background: var(--mt-cream-light);
  overflow: hidden;
}

.fx-strip__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--mt-line-table);
  font-family: var(--mt-serif);
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--mt-text-2);
}

.fx-strip__title { font-weight: 700; }
.fx-strip__meta { font-size: 0.72rem; text-transform: none; letter-spacing: 0; opacity: 0.85; }
.fx-strip__meta.is-error { color: var(--mt-down); opacity: 1; }

.fx-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.fx-cell {
  padding: 14px 18px;
  border-right: 1px solid var(--mt-line-table);
}
.fx-cell:last-child { border-right: none; }

.fx-cell__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mt-text-2);
  margin-bottom: 4px;
}

/* El origen del dato del spot (IV intraday vs CL cierre de ayer) no es
   decorativo: es lo que evita operar contra el cierre de anteayer. */
.fx-cell__tag {
  padding: 1px 5px;
  border: 1px solid var(--mt-line);
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--mt-text-3);
}

.fx-cell__value {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--mt-ink);
  white-space: nowrap;
}

.fx-cell.is-empty .fx-cell__value { color: var(--mt-text-3); font-weight: 500; }

@media (max-width: 720px) {
  .fx-cell__value { font-size: 1.35rem; }
  .fx-cell { padding: 10px 12px; }
}

/* Puntas de MEP / Cable / Canje, debajo de los valores grandes. */
.fx-book {
  border-top: 1px solid var(--mt-line-table);
  padding: 4px 14px 8px;
}

.fx-book .dash-table th { font-size: 0.68rem; }
.fx-book .dash-table td { font-size: 0.86rem; padding: 6px 10px; }
.fx-book .dash-table th:first-child,
.fx-book .dash-table td:first-child { text-align: left; width: 22%; }

/* Se vende contra el bid y se compra contra el offer: el color ayuda a no
   confundir de que lado esta parado uno. */
.fx-book__bid { color: var(--mt-up); font-weight: 700; }
.fx-book__ask { color: var(--mt-down); font-weight: 700; }

/* Variacion del dia en las tablas del Panel (viene de Rofex, no de 1816). */
.dash-var--up { color: var(--mt-up); font-weight: 700; }
.dash-var--down { color: var(--mt-down); font-weight: 700; }
.dash-var--flat { color: var(--mt-text-3); }

/* --- Acciones: subas y bajas lado a lado --------------------------------- */
.dash-panel--wide { grid-column: 1 / -1; }

.eq-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 18px;
}

.eq-col__title {
  padding: 6px 10px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.eq-col__title--up { color: var(--mt-up); }
.eq-col__title--down { color: var(--mt-down); }

.eq-var { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.eq-var--up { color: var(--mt-up); }
.eq-var--down { color: var(--mt-down); }

/* ===========================================================================
   Responsive / mobile
   =========================================================================== */
@media (max-width: 720px) {
  .mt-nav {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
  }
  .mt-nav__menus { flex-wrap: wrap; gap: 6px; }
  .mt-nav__wordmark { font-size: 0.95rem; }
  .mt-nav__dropdown { position: static; box-shadow: none; }

  .mt-subnav__tabs { flex-wrap: wrap; }

  .workspace { padding: 8px; gap: 10px; }

  .dash-head { padding: 10px 10px 4px; }
  .dash-grid { grid-template-columns: 1fr; padding: 6px 10px 16px; gap: 10px; }
  .dash-panel__body { max-height: none; }
  #dashMessage { padding: 0 10px; }

  .be-layout { padding: 0 10px 12px; }
  .be-topbar { margin: 0 10px; }
  .curve-body, .curve-body-single { padding: 10px; }
  .section-heading { padding: 0 10px; }

  .curve-controls { gap: 8px; }
  .chip-row { flex-wrap: wrap; }

  /* Las tablas anchas scrollean adentro de su contenedor, sin romper el layout */
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  .dash-title { font-size: 1.02rem; }
  .dash-table { font-size: 0.74rem; }
  .dash-table td, .dash-table thead th { padding: 4px 6px; }
  .mt-chip { font-size: 0.75rem; }
}

/* El boton Panel no tiene dropdown: sin caret */
.mt-nav__menu-button[data-dashboard]::after { display: none; }

/* Las tablas del panel deben caber en su panel (el reset global pone min-width) */
.dash-table { min-width: 0; }

/* Selector MEP/Cable dentro del head del panel HD */
.dash-panel__head-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chip-row--sm {
  display: flex;
  gap: 4px;
}

.dash-panel__head .chip-row--sm .mt-chip {
  min-height: 22px;
  padding: 0 9px;
  font-size: 0.72rem;
  border: 1px solid rgba(232, 226, 209, 0.5);
  background: transparent;
  color: var(--mt-cream-text);
}

.dash-panel__head .chip-row--sm .mt-chip:hover {
  background: rgba(232, 226, 209, 0.15);
}

.dash-panel__head .chip-row--sm .mt-chip.active {
  background: var(--mt-gold);
  border-color: var(--mt-gold);
  color: #1c1c18;
}

/* Bono sin operaciones hoy: fila atenuada, pero se lista igual */
.dash-table tr.dash-row--nodata td {
  opacity: 0.45;
  font-style: italic;
}

/* ===========================================================================
   Modulo DV01 (cobertura por duration)
   =========================================================================== */
.dv01-wrap { padding: 8px 16px 24px; display: grid; gap: 12px; max-width: 980px; }
.dv01-controls { align-items: end; }
#dv01Message { padding: 0; }

.dv01-legs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dv01-leg {
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  background: var(--mt-cream-light);
  overflow: hidden;
}

.dv01-leg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  color: var(--mt-cream-text);
  font-weight: 700;
}
.dv01-leg--long .dv01-leg__head { background: #2A6B3D; }
.dv01-leg--short .dv01-leg__head { background: #8B2E2E; }
.dv01-leg__head strong { font-size: 1.05rem; }

.dv01-leg__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  padding: 10px 12px;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}
.dv01-leg__grid span:nth-child(odd) { color: var(--mt-text-2); }
.dv01-leg__grid span:nth-child(even) { text-align: right; }

.dv01-summary {
  border: 1px solid var(--mt-gold);
  border-radius: 10px;
  background: rgba(201, 169, 97, 0.08);
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}
.dv01-summary__big { font-size: 1.02rem; line-height: 1.5; }
.dv01-summary__row { font-size: 0.86rem; color: var(--mt-text-2); font-variant-numeric: tabular-nums; }
.dv01-summary__row strong { color: var(--mt-ink); }

@media (max-width: 720px) {
  .dv01-legs { grid-template-columns: 1fr; }
  .dv01-wrap { padding: 8px 10px 16px; }
}

.mt-nav__menu-button[data-dv01]::after { display: none; }

/* ===========================================================================
   Responsive / celular
   ---------------------------------------------------------------------------
   La app es un terminal denso pensado para pantalla ancha. En un telefono el
   criterio es: NO deformar los datos ni esconderlos, sino dejar que cada bloque
   scrollee adentro suyo y que lo que la mesa mira de un vistazo (los tipos de
   cambio) quede grande y arriba.
   =========================================================================== */

/* Los graficos se dibujan a resolucion fija (1100-1120px de ancho interno) y
   sin esto desbordan la pantalla. Los handlers de hover ya calculan
   scaleX = canvas.width / rect.width, asi que el escalado por CSS no los rompe. */
canvas {
  max-width: 100%;
  height: auto;
}

@media (max-width: 720px) {
  /* La subnav tiene 10 tabs: envueltas se comen media pantalla. En tactil el
     scroll horizontal es mas natural que el wrap. */
  .mt-subnav {
    padding: 6px 10px;
    gap: 6px;
  }

  .mt-subnav__tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mt-subnav__tabs::-webkit-scrollbar { display: none; }
  .mt-subnav__tabs button { flex: 0 0 auto; }
  .mt-breadcrumb { font-size: 0.8rem; }

  /* En desktop se decidio a proposito que los paneles NO scrolleen adentro
     (mt23, "cero scroll interno"). En 360px no hay alternativa: 7 columnas no
     entran. Se scrollea la tabla dentro de su panel en vez de romper la pagina. */
  .dash-panel__body.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Con scroll horizontal, la variacion y el ticker tienen que quedar fijos o
     uno pierde de vista de que bono es cada fila. Los anchos van explicitos
     para que el offset del sticky sea exacto. */
  .dash-panel__body.table-wrap .dash-table tr > *:nth-child(1),
  .dash-panel__body.table-wrap .dash-table tr > *:nth-child(2) {
    position: sticky;
    z-index: 1;
    background: var(--mt-cream-light);
  }

  .dash-panel__body.table-wrap .dash-table tr > *:nth-child(1) {
    left: 0;
    width: 58px;
    min-width: 58px;
  }

  .dash-panel__body.table-wrap .dash-table tr > *:nth-child(2) {
    left: 58px;
    width: 62px;
    min-width: 62px;
    box-shadow: 1px 0 0 var(--mt-line-table);
  }

  /* Acciones: una columna arriba de la otra, cada una con su propio scroll. */
  .eq-split { grid-template-columns: 1fr; gap: 12px 0; }
  .eq-col { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Tipos de cambio: es lo que se mira desde el celular, va en 2x2 y grande. */
  .fx-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .fx-cell { border-right: 1px solid var(--mt-line-table); }
  .fx-cell:nth-child(2n) { border-right: none; }
  .fx-cell:nth-child(-n+2) { border-bottom: 1px solid var(--mt-line-table); }
  .fx-book { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Controles del Panel: la fecha y los botones no entran en una linea. */
  .dash-controls {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 10px;
  }

  .curve-historic { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  /* Con 360-430px reales conviene priorizar el valor por sobre el label. */
  .fx-cell { padding: 9px 10px; }
  .fx-cell__value { font-size: 1.5rem; }
  .fx-cell__label { font-size: 0.66rem; letter-spacing: 0.4px; }
  .fx-strip__head { padding: 7px 10px; }

  .dash-panel__body.table-wrap .dash-table tr > *:nth-child(1) { width: 50px; min-width: 50px; }
  .dash-panel__body.table-wrap .dash-table tr > *:nth-child(2) { left: 50px; width: 56px; min-width: 56px; }

  .eq-col__title { font-size: 0.68rem; }
  .fx-book .dash-table td { font-size: 0.8rem; padding: 5px 7px; }
}

/* El Panel ya no tiene titulo ni linea de contexto (es la pantalla de inicio y
   se explica sola): quedan solo los controles, alineados a la derecha. */
.dash-head--bare {
  justify-content: flex-end;
  padding-top: 10px;
}

/* Variacion del dia debajo de cada tipo de cambio. */
.fx-cell__change {
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fx-cell__change--up { color: var(--mt-up); }
.fx-cell__change--down { color: var(--mt-down); }
.fx-cell__change--flat { color: var(--mt-text-3); }

/* ---------------------------------------------------------------------------
   Nav en pantalla angosta: grilla, no wrap.
   ---------------------------------------------------------------------------
   Con flex-wrap, los ultimos items de la fila (Break evens, DV01) quedaban
   centrados y sueltos, como "en el aire". Con una grilla de columnas iguales
   cada boton ocupa su celda y las filas quedan alineadas, sin importar cuantos
   menus haya: agregar uno nuevo solo llena la celda siguiente.
   --------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .mt-nav {
    position: relative;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
  }

  .mt-nav__menus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 6px;
    width: 100%;
  }

  .mt-nav__menu-group {
    width: 100%;
    /* El desplegable se posiciona contra la nav entera, no contra su celda:
       asi nunca se sale de la pantalla ni queda cortado, mida lo que mida. */
    position: static;
  }

  .mt-nav__menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 0 8px;
    border-radius: 6px;
    background: rgba(232, 226, 209, 0.08);
    font-size: 0.8rem;
  }

  .mt-nav__dropdown {
    /* `position` se re-declara a proposito: la media query de 720px lo pone en
       static y, al no declararlo aca, ganaba ella y el desplegable caia dentro
       de su celda de la grilla rompiendo la fila. */
    position: absolute;
    top: 100%;
    left: 12px;
    right: 12px;
    min-width: 0;
    border-top: 1px solid var(--mt-gold);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 18px rgba(31, 61, 46, 0.18);
  }

  .mt-nav__actions {
    justify-content: space-between;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .mt-nav__menus { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  .mt-nav__menu-button { font-size: 0.75rem; min-height: 38px; }
  .fx-cell__change { font-size: 0.74rem; }
}

/* Futuros en celular: la primera columna es el CONTRATO (no hay columna Var),
   asi que se fija solo esa y con mas ancho ("AGO26 M" no entra en 58px). Va
   despues de los bloques de arriba a proposito: misma especificidad, gana la
   ultima, y asi tambien pisa los anchos del bloque de 480px. */
@media (max-width: 720px) {
  .dash-panel__body.table-wrap .fut-table tr > *:nth-child(1),
  .dash-panel__body.table-wrap .sint-table tr > *:nth-child(1) {
    width: 78px;
    min-width: 78px;
    box-shadow: 1px 0 0 var(--mt-line-table);
  }

  .dash-panel__body.table-wrap .fut-table tr > *:nth-child(2),
  .dash-panel__body.table-wrap .sint-table tr > *:nth-child(2) {
    position: static;
    left: auto;
    width: auto;
    min-width: 0;
    box-shadow: none;
  }
}

/* --- Dollar Linked: cuadro en vivo con la TNA contra el spot -------------- */
.dl-wrap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.dl-wrap .table-wrap { flex: 1 1 auto; min-width: 0; }

.dl-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dl-table th,
.dl-table td { padding: 6px 10px; border-bottom: 1px solid var(--line, #d8dce3); white-space: nowrap; }
.dl-table thead th {
  background: #10203C;
  color: #fff;
  font-weight: 600;
  text-align: right;
  position: sticky;
  top: 0;
  z-index: 1;
}
.dl-table thead th:first-child { text-align: left; }
.dl-table tbody th {
  text-align: left;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.dl-table td.num { text-align: right; }
.dl-table td.is-strong { font-weight: 600; }
.dl-dias { font-weight: 400; font-size: 11px; color: var(--muted, #6b7280); }

/* El spot al costado, como en la planilla: es el numero del que cuelga todo. */
.dl-spot {
  flex: 0 0 auto;
  min-width: 132px;
  padding: 10px 14px;
  border: 1px solid var(--line, #d8dce3);
  border-radius: 8px;
  background: rgba(42, 107, 61, 0.10);
  text-align: center;
}
.dl-spot__label { display: block; font-size: 11px; letter-spacing: .08em; color: var(--muted, #6b7280); }
.dl-spot__valor { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .dl-wrap { flex-direction: column; }
  .dl-spot { width: 100%; }
}

/* Bono que ya fixeo el tipo de cambio: el precio es real, la TNA contra el
   spot ya no significa nada. Se muestra apagado en vez de esconderlo. */
.dl-table tr.is-fixeado td,
.dl-table tr.is-fixeado th { opacity: .5; font-style: italic; }

/* Tercera pareja de columnas de la watchlist: el precio en MEP valuado en
   cable (se le saca el canje). Se separa del bloque de cable directo. */
.wl-table th:nth-child(4),
.wl-table .wl-mep:first-of-type { border-left: 1px solid var(--line, #d8dce3); }

/* --- Spreads de bonos (precio clean) ------------------------------------- */
.sp-controls { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }
.sp-grid { display: flex; flex-direction: column; gap: 16px; }
.sp-table { font-variant-numeric: tabular-nums; }
.sp-table th { white-space: nowrap; }
.sp-table thead th { text-align: right; }
.sp-table thead th:first-child { text-align: left; font-weight: 600; }
.sp-table tbody th { text-align: left; font-weight: 600; }
.sp-celda { white-space: nowrap; }
.sp-sep { color: var(--muted, #6b7280); padding: 0 2px; }
/* La mitad de abajo del triangulo es el mismo par al reves: se deja vacia en
   vez de repetirla, para que se lea que cada spread esta una sola vez. */
.sp-na { background: rgba(0, 0, 0, .03); }
.sp-vacia { color: var(--muted, #6b7280); }

/* Etiqueta de la ruta que gano ese lado del spread ($ pesos, M MEP, C cable):
   sin saber de donde salio el precio, el spread no es operable. */
.sp-ruta {
  display: inline-block;
  min-width: 14px;
  padding: 0 3px;
  margin-left: 4px;
  border-radius: 3px;
  background: rgba(31, 61, 46, .12);
  color: var(--muted, #6b7280);
  font-size: 10px;
  font-weight: 600;
  vertical-align: 1px;
}
/* Las patas del par van apagadas: son el detalle, no el numero que se opera. */
.sp-pata { color: var(--muted, #6b7280); font-size: 12px; }

/* --- Spreads: mismo formato que los cuadros de precios -------------------- */
/* Cada grupo es una columna; la de globales lleva el panel de spreads pegado
   abajo, del mismo ancho que el cuadro de precios. */
.wl-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* La tabla tiene que entrar en el ancho de un cuadro de precios: 6 columnas
   (7 con la metrica), letra chica y celdas justas. Tasa y paridad no llevan
   columna fija -- se ven con el chip. */
.sp-panel .sp-table { width: 100%; font-size: 0.72rem; }
.sp-panel .sp-table th,
.sp-panel .sp-table td { padding: 2px 4px; }
.sp-panel .sp-table tbody th { padding-left: 5px; font-weight: 500; }
.sp-panel .sp-z { min-width: 30px; }

/* El historico se abre a la IZQUIERDA de los cuadros. */
.wl-wrap { display: flex; gap: 12px; align-items: flex-start; padding: 0 16px 8px; }
.wl-wrap > .wl-grid { flex: 1 1 auto; min-width: 0; padding: 0; }
.sp-hist {
  flex: 0 0 auto;
  width: 860px;
  max-width: 62vw;
  border: 1px solid var(--line, #d8dce3);
  border-radius: 8px;
  background: #FBF9F2;
  padding: 8px 10px 10px;
}
.sp-hist__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.sp-hist__head strong { font-size: 0.85rem; }
.sp-hist canvas { width: 100%; height: auto; margin-top: 6px; }
.sp-hist__datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 10px;
  margin-top: 6px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.sp-hist__datos span:nth-child(odd) { color: var(--muted, #6b7280); }
.sp-hist__datos span:nth-child(even) { text-align: right; font-weight: 600; }

/* La tabla de spreads se lee como las de precios: mismo tamano, misma densidad. */
.sp-table { font-size: 0.78rem; }

/* Los promedios son referencia, no puntas operables: mas apagados que el
   bid/offer, para que la vista caiga primero en el precio. */
.sp-prom { color: var(--mt-text-2); }

/* Metodologia propia. El precio ARMADO se destaca y el de mercado queda al
   lado apagado: en este panel el numero que se opera es el armado. */
.np-table { width: 100%; }
.np-teo { font-weight: 600; }
.np-ancla { background: rgba(46, 111, 142, 0.06); }
.np-sub {
  margin: 12px 0 4px;
  padding: 0 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mt-text-3);
}
.np-check {
  border: 1px solid var(--mt-line);
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 6px;
}
.np-check__titulo { font-size: 0.78rem; font-weight: 600; }
.np-check__detalle { font-size: 0.7rem; color: var(--mt-text-2); margin: 2px 0 4px; }
.np-check__nums {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 10px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.np-check__nums span:nth-child(odd) { color: var(--mt-text-3); }
.np-check__nums span:nth-child(even) { text-align: right; font-weight: 600; }
/* Una diferencia de mas de 1% entre lo armado y el mercado se marca: es
   la senal de que la cadena NO esta cerrando. */
.np-table .is-error, .np-check__nums .is-error { color: var(--mt-down); }
.sp-table thead th { text-align: center; }
.sp-table thead th[rowspan] { text-align: left; vertical-align: bottom; }
.sp-table tbody th { text-align: left; font-weight: 500; white-space: nowrap; }
.sp-table td { white-space: nowrap; }
.sp-sep { color: var(--muted, #6b7280); padding: 0 2px; }
.sp-na { background: rgba(0, 0, 0, .02); }
.sp-vacia { color: var(--muted, #6b7280); }
.sp-extra { color: #4A4636; }

/* Separador de grupo discreto: una linea con el nombre, no una banda oscura. */
.sp-grupo th {
  background: transparent;
  color: var(--muted, #6b7280);
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: 8px;
  border-bottom: 1px solid var(--line, #d8dce3);
}
.sp-grupo__conv { float: right; opacity: .7; font-weight: 400; }

/* Etiqueta de la ruta ($ pesos, M MEP, C cable): tenue, es un dato de apoyo. */
.sp-ruta {
  display: inline-block;
  min-width: 11px;
  margin-left: 2px;
  color: var(--muted, #6b7280);
  font-size: 9px;
  font-weight: 600;
  vertical-align: 1px;
}
.sp-pata { color: var(--muted, #6b7280); font-size: 0.7rem; }

/* Las bandas son clickeables y abren el historico. */
.sp-z { cursor: pointer; font-weight: 600; }
.sp-z:hover { outline: 1px solid rgba(31, 61, 46, .35); outline-offset: -1px; }
.sp-z.is-abierta { outline: 1.5px solid #1F3D2E; outline-offset: -1px; }

/* Chips chiquitos en la cabecera del panel, para no robar altura. */
.wl-chip {
  border: 1px solid var(--line, #d8dce3);
  background: transparent;
  color: inherit;
  border-radius: 10px;
  padding: 0 6px;
  margin-left: 3px;
  font-size: 0.68rem;
  line-height: 1.5;
  cursor: pointer;
}
.wl-chip.is-active { background: rgba(31, 61, 46, .14); border-color: rgba(31, 61, 46, .4); font-weight: 600; }

@media (max-width: 1100px) {
  .wl-wrap { flex-direction: column; }
  .sp-hist { width: 100%; max-width: none; }
}

/* Ocho columnas en el ancho de un cuadro de precios: celdas ajustadas. */
.sp-table th,
.sp-table td { padding: 3px 5px; }
.sp-table tbody th { padding-left: 6px; }

/* Estado del historico en la cabecera del panel de spreads. */
.sp-estado { font-weight: 400; opacity: .7; font-size: 0.7rem; }

/* --- Valor relativo: mismo formato que el panel de Spreads --------------- */
.rv-wrap { display: flex; gap: 12px; align-items: flex-start; padding: 0 16px 8px; }
.rv-grid {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 12px;
  align-items: start;
}
/* Son muchos pares por grupo: la tabla scrollea sola en vez de estirar la
   pantalla, y el encabezado queda fijo para no perder de vista las ventanas. */
.rv-table { font-size: 0.76rem; }
.rv-grid .dash-panel__body { max-height: 62vh; overflow-y: auto; }
.rv-grid .rv-table thead th { position: sticky; top: 0; z-index: 1; background: #F3EFE2; }

@media (max-width: 1100px) {
  .rv-wrap { flex-direction: column; }
  .rv-wrap > .sp-hist { width: 100%; max-width: none; }
}

/* Boton de accion en la cabecera del panel (cargar historicos). */
.wl-chip--accion { border-color: rgba(255, 255, 255, .45); color: #fff; }
.wl-chip--accion:hover { background: rgba(255, 255, 255, .15); }
/* Por que no hay bandas: sin esto solo quedaban los puntitos. */
.sp-aviso {
  padding: 5px 8px;
  font-size: 0.7rem;
  color: #8B2E2E;
  background: rgba(139, 46, 46, .08);
  border-bottom: 1px solid var(--line, #d8dce3);
}

/* Aviso de que la pantalla no muestra la rueda de hoy sino la ultima con
   datos: ver precios de ayer sin saberlo es peor que no ver nada. */
.fecha-aviso {
  display: block;
  margin-top: 2px;
  font-size: 0.66rem;
  color: #8A7A4F;
  font-weight: 600;
}

/* --- Forward uno vs otro: curva y tabla lado a lado ----------------------- */
.curve-con-fwd { display: flex; gap: 12px; align-items: flex-start; }
.curve-con-fwd > .curve-chart-wrap { flex: 1 1 auto; min-width: 0; }

.fwd-box {
  flex: 0 0 auto;
  width: 250px;
  border: 1px solid var(--line, #d8dce3);
  border-radius: 8px;
  overflow: hidden;
  background: #FBF9F2;
}
.fwd-box__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  background: #1F3D2E;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
}
.fwd-box__meta { font-weight: 400; opacity: .8; font-size: 0.66rem; }
.fwd-box__body { max-height: 340px; overflow-y: auto; }
.fwd-box__table { width: 100%; border-collapse: collapse; font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.fwd-box__table th,
.fwd-box__table td { padding: 3px 6px; border-bottom: 1px solid var(--line, #d8dce3); white-space: nowrap; }
.fwd-box__table thead th { background: #F3EFE2; text-align: right; position: sticky; top: 0; }
.fwd-box__table thead th:first-child { text-align: left; }
.fwd-box__table td.num { text-align: right; }
.fwd-flecha { color: var(--muted, #6b7280); }
.fwd-row { cursor: pointer; }
.fwd-row:hover { background: rgba(31, 61, 46, .06); }
/* El spike es el punto del ejercicio: que salte a la vista sin leer numeros. */
.fwd-row.is-spike .fwd-val { color: #8B2E2E; font-weight: 700; }
.fwd-row.is-spike { background: rgba(139, 46, 46, .07); }
.fwd-row.is-sel { outline: 1.5px solid #1F3D2E; outline-offset: -1.5px; }
.fwd-spike { font-size: 0.6rem; }

@media (max-width: 1100px) {
  .curve-con-fwd { flex-direction: column; }
  .fwd-box { width: 100%; }
}

/* Tramo demasiado corto: el forward se amplifica por construccion. Se muestra
   pero apagado y sin puntuar, para que no compita con los spikes de verdad. */
.fwd-row.is-corto { opacity: .5; }
.fwd-row.is-corto .fwd-val { font-weight: 400; }
.fwd-corto { color: #8A7A4F; font-weight: 700; }

/* --- Menu Forwards: las cuatro curvas juntas ------------------------------ */
.fwc-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 0 16px 8px; }
.fwc-chart-wrap { position: relative; padding: 0 16px; }
.fwc-chart-wrap canvas { width: 100%; height: auto; }

/* Cada chip lleva el color de su curva: es la unica leyenda del grafico. */
.fwc-chip { display: inline-flex; align-items: center; gap: 6px; }
.fwc-punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--fwc-color, #1F3D2E);
  display: inline-block;
}
.fwc-chip.is-off { opacity: .45; }
.fwc-chip.is-off .fwc-punto { background: transparent; border: 1.5px solid var(--fwc-color, #1F3D2E); }
.fwc-n { color: var(--muted, #6b7280); font-size: 0.68rem; }

/* Apagar bonos sueltos de una curva. */
.fwc-bonos { padding: 8px 16px 4px; display: flex; flex-direction: column; gap: 6px; }
.fwc-bonos__curva { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fwc-bonos__nombre { font-size: 0.72rem; font-weight: 700; min-width: 120px; }
.mt-chip--xs { font-size: 0.66rem; padding: 1px 6px; }
.mt-chip--xs[disabled] { opacity: .3; cursor: not-allowed; }

/* Tablas de valores, una por curva. */
.fwc-tablas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
  padding: 8px 16px 16px;
  align-items: start;
}
.fwc-tabla .dash-panel__head { color: #fff; }
.fwc-tabla .dash-panel__body { max-height: 320px; overflow-y: auto; }
.fwc-table { width: 100%; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.fwc-table th, .fwc-table td { padding: 3px 6px; white-space: nowrap; }
.fwc-table thead th { position: sticky; top: 0; background: #F3EFE2; text-align: right; }
.fwc-table thead th:first-child { text-align: left; }
.fwc-table td.num { text-align: right; }
.fwc-table tr.is-spike .fwd-val { color: #8B2E2E; font-weight: 700; }
.fwc-table tr.is-spike { background: rgba(139, 46, 46, .07); }
.fwc-table tr.is-corto { opacity: .5; }

@media (max-width: 900px) {
  .fwc-bonos__nombre { min-width: 0; }
}

/* Tooltip del grafico de forwards: el par sale al pasar el mouse, no fijo. */
#fwcTooltip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(20, 32, 26, .95);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
#fwcTooltip strong { font-size: 0.78rem; }
#fwcTooltip span { opacity: .85; }
.fwc-tt-spike { color: #FF9B9B; font-weight: 600; opacity: 1 !important; }

/* Los DATOS no se parten (22,99 MM en una linea), pero el ENCABEZADO si puede
   partirse: "Monto total (US$)" en una sola linea mide mas que el numero de
   abajo y era el que estiraba la columna. */
.dash-table td.num { white-space: nowrap; }
.dash-table thead th { white-space: normal; line-height: 1.15; }

/* Controles de banda de la solapa Brecha: solo aparecen en la vista de bandas. */
.fxbr-banda-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 6px 12px 2px;
}

/* --- Panel general · book de FX y brecha, lado a lado --------------------- */
.fx-abajo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.fx-abajo > .fx-book,
.fx-abajo > .fx-brecha { flex: 1 1 320px; min-width: 0; }

/* El encabezado de estas tablas se alineaba a la IZQUIERDA en la 2da columna
   por la regla general del panel (pensada para la columna "Bono"), y aca la
   2da columna es un dato numerico: "Bid" quedaba corrido de sus numeros. */
.fx-book .dash-table thead th,
.fx-brecha .dash-table thead th { text-align: right; }
.fx-book .dash-table thead th:first-child,
.fx-brecha .dash-table thead th:first-child { text-align: left; }
.fx-book .dash-table thead th:nth-child(2),
.fx-brecha .dash-table thead th:nth-child(2) { text-align: center; }

/* Columna de plazo: angosta y discreta, es una etiqueta y no un numero. */
.fx-plazo {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--mt-text-2, #6b7280);
  letter-spacing: .03em;
}
/* Las filas del mismo instrumento quedan juntas: solo la primera lleva nombre,
   asi que se marca el arranque de cada grupo con una linea mas visible. */
.fx-book tbody tr:nth-child(odd) td,
.fx-brecha tbody tr:nth-child(odd) td { border-bottom-color: transparent; }

.fx-brecha__meta {
  padding: 4px 8px 2px;
  font-size: 0.68rem;
  color: var(--mt-text-2, #6b7280);
  text-align: right;
}

/* --- Volumen inusual (Panel general) ------------------------------------- */
/* T+0 y T+1 lado a lado, con la misma estructura de dos columnas del cuadro de
   acciones. Tabla reducida: tres columnas y el promedio en el tooltip. */
.vol-panel .eq-col { min-width: 0; }
.vol-panel .eq-col__title { font-weight: 700; letter-spacing: .04em; }
.vol-table { width: 100%; font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.vol-table th, .vol-table td { padding: 2px 6px; white-space: nowrap; }
.vol-table thead th { text-align: right; }
.vol-table thead th:first-child { text-align: left; }
.vol-table td.num { text-align: right; }
.vol-razon { font-weight: 700; }
.vol-pct { font-weight: 400; font-size: 0.68rem; color: var(--mt-text-2, #6b7280); }
/* Cada columna scrollea sola: el panel no crece con los dias movidos. */
.vol-panel .eq-col { max-height: 260px; overflow-y: auto; }

/* --- Tasas T+0 / T+1 (Panel general) ------------------------------------- */
.t01-table { width: 100%; font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.t01-table th, .t01-table td { padding: 2px 6px; white-space: nowrap; }
.t01-table thead th { text-align: right; }
.t01-table thead th:first-child { text-align: left; }
.t01-table td.num { text-align: right; }
.t01-tasa { font-weight: 700; }
.t01-panel .eq-col { max-height: 260px; overflow-y: auto; min-width: 0; }
/* Los dias entre liquidaciones cambian con el finde y los feriados: se muestra
   siempre, porque es el denominador de todas las tasas del cuadro. */
.t01-dias { font-size: 0.68rem; color: var(--mt-text-2, #6b7280); font-weight: 600; }

/* --- Historico del spread: grafico + que mirar, lado a lado -------------- */
.sp-hist__cols { display: flex; gap: 12px; align-items: stretch; }
.sp-hist__chart { flex: 1 1 auto; min-width: 0; }
.sp-hist__lienzo { position: relative; }
.sp-hist__lienzo canvas { width: 100%; height: auto; cursor: crosshair; }

/* Cuadro de extremos: donde estan los spreads mas pegados a cada banda. */
.sp-extremos {
  flex: 0 0 auto;
  width: 230px;
  border-left: 1px solid var(--line, #d8dce3);
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-extremos__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
}
.sp-extremos__body { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.sp-ext__titulo {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted, #6b7280);
  margin-bottom: 2px;
}
.sp-ext__titulo.is-abajo { color: #2A6B3D; }
.sp-ext__titulo.is-arriba { color: #8B2E2E; }
/* Cada fila es un boton: abre ese par en el grafico de al lado. */
.sp-ext__fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  text-align: left;
}
.sp-ext__fila:hover { background: rgba(31, 61, 46, .07); }
.sp-ext__fila.is-abierta { outline: 1.5px solid #1F3D2E; }
.sp-ext__par { font-weight: 600; white-space: nowrap; }
.sp-ext__z {
  min-width: 42px;
  text-align: right;
  padding: 0 4px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

@media (max-width: 1400px) {
  .sp-hist__cols { flex-direction: column; }
  .sp-extremos { width: 100%; border-left: 0; border-top: 1px solid var(--line, #d8dce3); padding: 8px 0 0; }
}

/* --- Tasa real implicita -------------------------------------------------- */
.real-wrap { display: flex; gap: 12px; align-items: flex-start; padding: 0 16px 16px; }
.real-wrap > .table-wrap { flex: 1 1 auto; min-width: 0; }
.real-table { width: 100%; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.real-table th, .real-table td { padding: 4px 8px; white-space: nowrap; }
.real-table thead th { text-align: right; background: var(--mt-cream, #F3EFE2); }
.real-table thead th:first-child { text-align: left; }
.real-table tbody th { text-align: left; font-weight: 600; }
.real-table td.num { text-align: right; }
.real-fila { cursor: pointer; }
.real-fila:hover { background: rgba(31, 61, 46, .06); }
.real-fila.is-abierta { outline: 1.5px solid #1F3D2E; outline-offset: -1.5px; }
/* La real implicita es el numero del ejercicio; la del CER va de referencia. */
.real-implicita { font-weight: 700; color: #1F3D2E; }
.real-ref { color: var(--mt-text-2, #6b7280); }

@media (max-width: 1200px) {
  .real-wrap { flex-direction: column; }
  .real-wrap > .sp-hist { width: 100%; max-width: none; }
}

/* --- Tasa real implicita: todas las series juntas ------------------------ */
.real-todas { margin: 0 16px 16px; }
.real-todas .curve-chart-wrap { position: relative; }
.real-todas canvas { width: 100%; height: auto; cursor: crosshair; }

/* Chips de pares: cada uno con el color de su linea. Prenden y apagan. */
.real-pares { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 10px; }
/* LA TRAMPA: el `button` global define `color: var(--mt-cream-text)` porque los
   botones normales son verdes rellenos. Cualquier chip que se ponga
   `background: transparent` y NO pise el color queda CREMA SOBRE CREMA, o sea
   invisible. Le pasaba a los tickers de "Evolucion de todas" y a los chips de
   bonos de la curva DLK (las dos usan .real-chip).

   El color se codifica en el PUNTO y en el borde; el texto va siempre en tinta
   para que se lea. */
.real-chip {
  color: var(--mt-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border: 1px solid var(--mt-line, #d8dce3);
  border-radius: 12px;
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
.real-chip__punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--real-color, #1F3D2E);
  display: inline-block;
}
.real-chip.is-active { border-color: var(--real-color, #1F3D2E); font-weight: 600; color: var(--mt-ink); }
/* Apagado: se nota por el color y el punto hueco. Con `opacity: .45` el
   texto quedaba al borde de lo ilegible. */
.real-chip.is-off { color: var(--mt-text-2); opacity: .8; }
.real-chip.is-off .real-chip__punto { background: transparent; border: 1.5px solid var(--real-color); }

#realTodasTooltip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(20, 32, 26, .95);
  color: #fff;
  font-size: 0.7rem;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
#realTodasTooltip strong { margin-bottom: 2px; }

/* --- DLK: selectores de referencia/plazo y curva de TNA ------------------- */
.dl-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 0 16px 8px;
}
.dl-curva { margin: 12px 16px 16px; }
.dl-curva .curve-chart-wrap { position: relative; }
.dl-curva canvas { width: 100%; height: auto; }

/* ==========================================================================
   MACRO · M2 transaccional privado
   ========================================================================== */
.macro-subtitle {
  margin: 2px 0 0;
  font-family: var(--mt-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--mt-text-2);
}

.macro-year-input {
  width: 82px;
  padding: 4px 8px;
  border: 1px solid var(--mt-line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
}

/* El grafico tiene 24 posiciones: en pantallas chicas se scrollea en vez de
   comprimir las etiquetas hasta que dejen de leerse. */
.macro-chart-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

.macro-chart-wrap {
  min-width: 720px;
}

.macro-chart-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
}

.macro-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--mt-text-2);
}

.macro-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.macro-legend__mark {
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--mk);
  flex: none;
}

.macro-legend__mark--punteada {
  height: 0;
  border-top: 2px dashed var(--mk);
  background: none;
}

.macro-legend__mark--banda {
  height: 11px;
  border-radius: 2px;
}

.macro-legend__mark--hueco {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--mt-cream-light);
  border: 2px solid var(--mk);
}

/* ---- Tarjeta de desvio ---- */
.macro-deviation__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.macro-dev__headline {
  font-family: var(--mt-serif);
  font-size: 18px;
  line-height: 1.3;
  color: var(--mt-ink);
}

.macro-dev__headline.is-habitual { color: var(--mt-up); }
.macro-dev__headline.is-moderado { color: var(--mt-gold-dark); }
.macro-dev__headline.is-inusual  { color: var(--mt-down); }
.macro-dev__headline.is-na {
  font-size: 14px;
  font-style: italic;
  color: var(--mt-text-2);
}

.macro-dev__label {
  margin: 0;
  font-size: 13px;
  color: var(--mt-text-2);
}

.macro-dev__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 18px;
  margin: 0;
}

.macro-dev__grid dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mt-text-3);
}

.macro-dev__grid dd {
  margin: 2px 0 0;
  font-family: var(--mt-mono);
  font-size: 14px;
  color: var(--mt-ink);
}

.macro-dev__partial,
.macro-dev__warn {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--mt-gold);
  background: rgba(201, 169, 97, 0.1);
  font-size: 12px;
  color: var(--mt-text-2);
}

.macro-dev__warn { border-left-color: var(--mt-down); background: rgba(139, 46, 46, 0.07); }

/* ---- Tabla ---- */
.macro-table td.is-up { color: var(--mt-up); }
.macro-table td.is-down { color: var(--mt-down); }
.macro-table td.macro-z--moderado { color: var(--mt-gold-dark); font-weight: 600; }
.macro-table td.macro-z--inusual { color: var(--mt-down); font-weight: 700; }
.macro-table tr.macro-row--sindato { opacity: 0.45; font-style: italic; }
.macro-table tr.macro-row--parcial { background: rgba(201, 169, 97, 0.12); }

/* ---- Tooltip ---- */
.macro-tip__status {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--mt-line-table);
  font-weight: 600;
}
.macro-tip__status.is-habitual { color: var(--mt-up); }
.macro-tip__status.is-moderado { color: var(--mt-gold-dark); }
.macro-tip__status.is-inusual  { color: var(--mt-down); }
.macro-tip__status.is-warn     { color: var(--mt-gold-dark); }

/* ---- Metodologia colapsable ---- */
.macro-method {
  margin-top: 14px;
  border: 1px solid var(--mt-line);
  border-radius: 4px;
  background: var(--surface);
}

.macro-method > summary {
  padding: 10px 14px;
  cursor: pointer;
  font-family: var(--mt-serif);
  font-size: 15px;
  color: var(--mt-green);
  list-style: none;
}

.macro-method > summary::-webkit-details-marker { display: none; }

.macro-method > summary::before {
  content: "▸ ";
  color: var(--mt-gold-dark);
}

.macro-method[open] > summary::before { content: "▾ "; }

.macro-method__body {
  padding: 0 16px 16px;
  max-width: 78ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mt-text-2);
}

.macro-method__body h4 {
  margin: 16px 0 6px;
  font-family: var(--mt-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mt-green);
}

.macro-method__body p { margin: 0 0 8px; }
.macro-method__list { margin: 0 0 8px; padding-left: 18px; }
.macro-method__list li { margin-bottom: 4px; }

.macro-method__warn {
  padding: 8px 10px;
  border-left: 3px solid var(--mt-down);
  background: rgba(139, 46, 46, 0.07);
  color: var(--mt-ink);
}

.macro-method__meta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--mt-line-table);
  font-size: 12px;
  color: var(--mt-text-3);
}

@media (max-width: 720px) {
  .macro-dev__grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .macro-dev__headline { font-size: 16px; }
  .macro-method__body { padding: 0 12px 12px; }
}

/* ---- DLK · matriz de spreads de precio dirty ---- */
.dl-sp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 1100px) {
  .dl-sp-layout:has(.dl-sp-hist:not([hidden])) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

.dl-sp-table {
  font-variant-numeric: tabular-nums;
}

.dl-sp-table th[scope="row"] {
  position: sticky;
  left: 0;
  background: var(--surface);
  font-weight: 600;
}

.dl-sp__diag {
  background: repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    rgba(184, 174, 149, 0.25) 4px, rgba(184, 174, 149, 0.25) 5px);
}

.dl-sp__celda.is-clickable { cursor: pointer; }

.dl-sp__celda.is-clickable:hover {
  outline: 1px solid var(--mt-gold-dark);
  outline-offset: -1px;
}

.dl-sp__celda.is-sel {
  outline: 2px solid var(--mt-green);
  outline-offset: -2px;
}

/* El z va chiquito debajo del spread: el numero grande es el que se opera. */
.dl-sp__z {
  display: block;
  font-size: 10px;
  line-height: 1.1;
  color: var(--mt-text-3);
}

.dl-sp-hist {
  border: 1px solid var(--mt-line);
  border-radius: 4px;
  padding: 10px 12px;
  background: var(--surface);
  min-width: 0;
}

.dl-sp-hist__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.dl-sp-hist__title {
  font-family: var(--mt-serif);
  font-size: 15px;
  color: var(--mt-green);
}

.dl-sp-hist__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px 14px;
  margin-bottom: 10px;
}

.dl-sp-hist__stats dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mt-text-3);
}

.dl-sp-hist__stats dd {
  margin: 1px 0 0;
  font-family: var(--mt-mono);
  font-size: 13px;
  color: var(--mt-ink);
}

.dl-sp-hist canvas {
  width: 100%;
  height: auto;
  display: block;
}

/* Monto operable en el cuadro de tasas T+0/T+1: atenuado, porque el numero que
   se lee primero es la tasa. Sirve para descartar de un vistazo la punta que
   no se puede dar vuelta. */
.t01-monto {
  color: var(--mt-text-3);
  font-size: 11px;
  white-space: nowrap;
}

/* ---- DLK · ranking por z-spread ---- */
.dl-rank {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.dl-rank__title {
  font-family: var(--mt-serif);
  font-size: 13px;
  color: var(--mt-green);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--mt-line-table);
  margin-bottom: 6px;
}

.dl-rank__title--long { color: var(--mt-up); }
.dl-rank__title--short { color: var(--mt-down); }

.dl-rank__table { font-size: 12px; }
.dl-rank__table td.is-up { color: var(--mt-up); }
.dl-rank__table td.is-down { color: var(--mt-down); }
.dl-rank__row { cursor: pointer; }
.dl-rank__row:hover { background: rgba(201, 169, 97, 0.14); }

.dl-rank__foot {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--mt-text-3);
}

.dl-op__buy { color: var(--mt-up); font-weight: 600; }
.dl-op__sell { color: var(--mt-down); font-weight: 600; }
.dl-op__sep { color: var(--mt-text-3); margin: 0 2px; }

/* Barra de "cuanto de la banda tiene recorrido": satura en 2 sigma. */
.dl-bar {
  position: relative;
  display: block;
  height: 14px;
  min-width: 54px;
  border-radius: 2px;
  background: rgba(184, 174, 149, 0.22);
  overflow: hidden;
}

.dl-bar__fill { position: absolute; inset: 0 auto 0 0; }
.dl-bar--caro .dl-bar__fill { background: rgba(139, 46, 46, 0.45); }
.dl-bar--barato .dl-bar__fill { background: rgba(42, 107, 61, 0.45); }

.dl-bar__txt {
  position: relative;
  display: block;
  text-align: center;
  font-size: 10px;
  line-height: 14px;
  color: var(--mt-ink);
}

.dl-bar--na { background: none; color: var(--mt-text-3); font-size: 11px; }

/* ---- Curvas de otros dias superpuestas ---- */
.curve-overlay { margin: 10px 0 6px; }

.curve-overlay__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.curve-overlay__lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mt-text-3);
}

.curve-overlay__sep {
  width: 1px;
  height: 18px;
  background: var(--mt-line);
  margin: 0 4px;
}

.curve-overlay__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
}

.ov-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--mt-line);
  border-radius: 3px;
  background: var(--surface);
}

.ov-chip__punto {
  width: 16px;
  height: 0;
  border-top: 2px dashed var(--ov);
  flex: none;
}

.ov-chip__detalle { color: var(--mt-text-3); font-size: 11px; }

.ov-chip button {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--mt-text-3);
  padding: 0 2px;
  line-height: 1;
}

.ov-chip button:hover { color: var(--mt-down); }

/* ==========================================================================
   PANEL MONETARIO · densidad alta, institucional
   ========================================================================== */
.pm-head { align-items: flex-start; }
.pm-fecha { display: flex; align-items: center; gap: 6px; }

.pm-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* ---- Foto del dia: tarjeta tipo terminal ---- */
.pm-foto {
  border: 1px solid var(--mt-border);
  background: var(--mt-cream-light);
  padding: 14px 16px 12px;
}

.pm-foto__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--mt-green);
  margin-bottom: 10px;
}

.pm-foto__title {
  font-family: var(--mt-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mt-green);
}

.pm-foto__fecha {
  font-family: var(--mt-mono);
  font-size: 12px;
  color: var(--mt-text-2);
}

.pm-foto__item {
  display: flex;
  flex-direction: column;
  padding: 7px 0;
  border-bottom: 1px dotted var(--mt-line-table);
}

.pm-foto__item:last-child { border-bottom: none; }

.pm-foto__lbl {
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--mt-text-3);
}

.pm-foto__val {
  font-family: var(--mt-mono);
  font-size: 19px;
  line-height: 1.2;
  color: var(--mt-ink);
}

.pm-foto__sub, .pm-foto__stale {
  font-size: 10px;
  color: var(--mt-text-3);
}

.pm-foto__pie {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 2px solid var(--mt-green);
  font-size: 11px;
  color: var(--mt-text-2);
}

.pm-foto__pie strong { font-family: var(--mt-mono); color: var(--mt-ink); }

/* ---- Cards ---- */
.pm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px;
  align-content: start;
}

.pm-card {
  border: 1px solid var(--mt-line);
  background: var(--surface);
  padding: 9px 11px 8px;
  cursor: pointer;
  transition: border-color 0.12s;
}

.pm-card:hover, .pm-card:focus-visible {
  border-color: var(--mt-gold-dark);
  outline: none;
}

.pm-card--na { cursor: default; opacity: 0.72; }

.pm-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mt-text-3);
}

.pm-card__ver { opacity: 0; font-size: 9px; color: var(--mt-gold-dark); }
.pm-card:hover .pm-card__ver { opacity: 1; }

.pm-card__valor {
  font-family: var(--mt-mono);
  font-size: 23px;
  line-height: 1.25;
  margin: 3px 0 5px;
  color: var(--mt-ink);
}

.pm-card__stale {
  font-size: 10px;
  color: var(--mt-gold-dark);
  margin-bottom: 4px;
}

.pm-card__extra, .pm-card__comp {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 1.5px 0;
  color: var(--mt-text-2);
}

.pm-card__extra span, .pm-card__comp span { text-transform: capitalize; }
.pm-card__extra strong, .pm-card__comp strong { font-family: var(--mt-mono); font-weight: 500; }

.pm-card__pie {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--mt-line-table);
  font-size: 9.5px;
  color: var(--mt-beige);
}

.pm-card__nota { margin: 4px 0 0; font-size: 10.5px; color: var(--mt-text-3); line-height: 1.45; }

/* Direccion, NO bueno/malo: en riesgo pais subir no es bueno. */
.pm-card__valor.is-up, .pm-foto__val.is-up, .pm-card__comp strong.is-up { color: var(--mt-up); }
.pm-card__valor.is-down, .pm-foto__val.is-down, .pm-card__comp strong.is-down { color: var(--mt-down); }
.is-na { color: var(--mt-beige) !important; }

.pm-resumen { margin-top: 14px; }
.pm-resumen__txt {
  margin: 0;
  max-width: 92ch;
  font-family: var(--mt-serif);
  font-size: 14px;
  line-height: 1.65;
  color: var(--mt-ink);
}

#pmHistCanvas { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .pm-layout { grid-template-columns: minmax(0, 1fr); }
  .pm-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ==========================================================================
   Gate de sesion (invitado / admin)
   ========================================================================== */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(42, 53, 40, 0.55);
  backdrop-filter: blur(3px);
}

.auth-gate__card {
  width: min(420px, 100%);
  border: 1px solid var(--mt-border);
  background: var(--mt-cream-light);
  padding: 26px 26px 20px;
  box-shadow: 0 18px 48px rgba(42, 53, 40, 0.28);
}

.auth-gate__brand {
  font-family: var(--mt-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--mt-green);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--mt-green);
}

.auth-gate__lead {
  margin: 16px 0 14px;
  font-family: var(--mt-serif);
  font-size: 17px;
  color: var(--mt-ink);
}

.auth-gate__acciones { display: flex; flex-wrap: wrap; gap: 8px; }

.auth-gate__btn {
  flex: 1 1 auto;
  padding: 9px 14px;
  border: 1px solid var(--mt-green);
  background: var(--mt-green);
  color: var(--mt-cream-text);
  font-size: 13px;
  cursor: pointer;
}

.auth-gate__btn:hover { background: var(--mt-green-hover); }

.auth-gate__btn--alt {
  background: none;
  color: var(--mt-green);
}

.auth-gate__btn--alt:hover { background: rgba(31, 61, 46, 0.08); }
.auth-gate__btn:disabled { opacity: 0.55; cursor: default; }

.auth-gate__form { margin-top: 16px; display: grid; gap: 4px; }

.auth-gate__form label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mt-text-3);
}

.auth-gate__form input {
  padding: 8px 10px;
  border: 1px solid var(--mt-line);
  background: var(--surface);
  color: var(--text);
  margin-bottom: 6px;
}

.auth-gate__msg { margin-top: 10px; font-size: 12px; color: var(--mt-text-2); min-height: 16px; }
.auth-gate__msg .is-error { color: var(--mt-down); }

.auth-gate__pie {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--mt-line-table);
  font-size: 11px;
  line-height: 1.5;
  color: var(--mt-text-3);
}

/* Item privado: se VE pero avisa que esta bloqueado. */
.mt-nav__menu-button.is-bloqueado { opacity: 0.5; }
.mt-nav__menu-button.is-bloqueado::after {
  content: " ·  🔒";
  font-size: 9px;
}

.auth-pill.is-admin {
  border-color: var(--mt-gold);
  color: var(--mt-gold);
}

/* ---- Break-even: precios a mano ---- */
.be-px__in {
  width: 82px;
  padding: 3px 6px;
  border: 1px solid var(--mt-line);
  background: var(--surface);
  color: var(--text);
  font-family: var(--mt-mono);
  font-size: 12px;
  text-align: right;
}

.be-px__in:focus { border-color: var(--mt-gold-dark); outline: none; }
.be-last { font-family: var(--mt-mono); font-size: 12px; color: var(--mt-text-2); white-space: nowrap; }
.be-manual strong { color: var(--mt-gold-dark); }

/* La barra de arriba con 8 grupos: que envuelva en vez de solaparse. */
.mt-nav__menus { flex-wrap: wrap; }

/* Misma trampa del `button` global (color crema) en el resto de los chips que
   usan fondo claro o transparente: el texto va explicito, nunca heredado. */
.fwc-chip { color: var(--mt-ink); }
.fwc-chip.is-off { color: var(--mt-text-2); opacity: .8; }
.ov-chip { color: var(--mt-ink); }
.ov-chip strong { color: var(--mt-ink); }
.macro-legend__item { color: var(--mt-text-2); }
.dl-rank__row { color: var(--mt-ink); }

/* ===========================================================================
   HISTORICO (analisis historico de precios y tasas)
   La pantalla reusa dash-panel / chip-row / dash-table; aca solo va lo propio:
   la barra de perillas, el selector de especies y el punto de color que ata la
   fila de la tabla y el tooltip con su linea del grafico.
   =========================================================================== */
.hist-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 22px;
  padding: 12px 2px 4px;
  border-bottom: 1px solid var(--mt-line-table);
}

.hist-field--especies { flex: 1 1 320px; min-width: 280px; }

.hist-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* El input del ticker: el `.rel-ticker` base es angosto para las tablas. */
.hist-picker .rel-ticker { max-width: 160px; }

.hist-buscar-res {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 4px;
}

/* El chip de la especie y su cruz van pegados: el chip prende y apaga la
   linea, la cruz saca la especie. Son dos acciones distintas. */
.hist-chip-wrap { display: inline-flex; align-items: center; gap: 2px; }

.hist-chip-x {
  border: none;
  background: transparent;
  color: var(--mt-text-2);
  padding: 0 4px;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}
.hist-chip-x:hover { color: var(--mt-down); }

.hist-hint {
  color: var(--mt-text-2);
  padding: 8px 2px 0;
  font-size: 0.78rem;
}

.hist-zoom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 2px 0;
  font-size: 0.75rem;
}

/* El zoom se hace arrastrando sobre el grafico: el cursor lo tiene que
   anticipar, si no nadie descubre que se puede. */
#histCanvas { cursor: crosshair; }

.hist-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: -1px;
}

.hist-table td.is-up { color: var(--mt-up); }
.hist-table td.is-down { color: var(--mt-down); }
.hist-table td .muted { font-size: 0.72rem; }

/* --- SUB-SOBERANOS -------------------------------------------------------
   La tabla a la izquierda y las dos curvas + el analisis a la derecha, que es
   como lo pidio la mesa ("en un costado"). Abajo de 1200px se apilan. */
.ss-layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 12px;
  padding: 0 16px 12px;
  align-items: start;
}

.ss-lado { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.ss-table { width: 100%; font-size: 0.76rem; }
.ss-fila { cursor: pointer; }
.ss-fila:hover { background: rgba(31, 61, 46, 0.05); }
.ss-fila.is-sel { background: rgba(138, 46, 46, 0.10); }
.ss-fila.is-sel td { font-weight: 600; }

.ss-tabla .dash-panel__body { max-height: 640px; overflow-y: auto; }

@media (max-width: 1200px) {
  .ss-layout { grid-template-columns: minmax(0, 1fr); }
  .ss-tabla .dash-panel__body { max-height: none; }
}
.ss-fuera { padding: 6px 10px 2px; font-size: 0.7rem; }
.ss-fuera span { border-bottom: 1px dotted currentColor; cursor: help; }

.ss-controles {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px 8px;
}
.ss-controles__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mt-text-3);
}

/* Puntas cargadas a mano */
.ss-manual { margin: 0 16px 16px; }
.ss-manual__form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px 10px;
}
.ss-manual__form select,
.ss-manual__form input {
  border: 1px solid var(--mt-line);
  border-radius: 3px;
  padding: 4px 6px;
  font: inherit;
  font-size: 0.78rem;
  background: var(--surface);
  color: var(--mt-ink);
}
.ss-manual__form input { width: 110px; font-variant-numeric: tabular-nums; }
.ss-lado {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  color: #FBF9F2;
}
.ss-lado--bid { background: #2A6B3D; }
.ss-lado--offer { background: #8B2E2E; }
.ss-lado--match { background: #2E6F8E; }
.ss-borrar {
  border: 0;
  background: none;
  color: var(--mt-text-3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.ss-borrar:hover { color: var(--mt-down); }
/* El "ahora" es dato vivo: se distingue del de cierre. */
.ss-ahora { color: var(--mt-green); font-weight: 600; }

/* Bonos sin precio utilizable: se ven, pero apagados. */
.ss-sin td { color: var(--mt-text-3); font-style: italic; }
.cot-table { width: 100%; }
.cot-bid { color: #2A6B3D; font-weight: 600; }
.cot-offer { color: #8B2E2E; font-weight: 600; }

.cot-ancho {
  width: 58px;
  text-align: right;
  border: 1px solid transparent;
  border-bottom-color: var(--mt-line);
  background: none;
  font: inherit;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--mt-ink);
  padding: 1px 2px;
}
.cot-ancho:hover, .cot-ancho:focus { border-color: var(--mt-line); background: var(--surface); }
.cot-ancho[data-default] { color: var(--mt-text-3); }

/* Las columnas auxiliares son para mirar, no para mandar: quedan apagadas y
   separadas de las siete que se cotizan. */
.cot-aux { color: var(--mt-text-2); }
.cot-table th.cot-aux:first-of-type, .cot-table td.cot-aux:first-of-type {
  border-left: 2px solid var(--mt-line);
}
.cot-desc { white-space: nowrap; font-size: 0.76rem; }

/* Spread fijado por una punta cargada a mano: se distingue del promedio. */
.cot-anclado { color: var(--mt-green); font-weight: 600; }

/* =========================================================================
   ARBITRAJES (Soberanos / Hard Dollar / Arbitrajes)
   -------------------------------------------------------------------------
   Regla de la pantalla: que se LEA. Nada de tablas de 20 columnas apretadas.
   Lo que se opera va en la fila; el resto (todas las ventanas, el forecast por
   horizonte, el backtest) vive en el panel de detalle, que se abre con un
   click y se cierra. Mismo rail lateral que Break evens, para no inventar un
   patron de navegacion nuevo.
   ========================================================================= */

.arb-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  padding: 0 16px 8px;
}
.arb-topbar__acciones { display: flex; gap: 6px; margin-left: auto; }

.arb-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 0 16px 16px;
}
.arb-nav { min-width: 132px; }
.arb-content { min-width: 0; display: grid; gap: 14px; }
.arb-subview { display: grid; gap: 14px; min-width: 0; }
.arb-subview[hidden] { display: none; }

/* --- Tabla de pares ------------------------------------------------------ */
/* Ancho comodo: el par y las badges a la izquierda, los numeros a la derecha,
   y aire suficiente para que no haya que buscar la columna con el dedo. */
.arb-panel {
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  background: var(--mt-cream-light);
  overflow: hidden;
}
.arb-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--mt-line-table);
  background: rgba(201, 169, 97, 0.08);
}
.arb-panel__title { font-weight: 700; font-size: 0.84rem; letter-spacing: 0.3px; }
.arb-panel__meta { color: var(--mt-text-3); font-size: 0.72rem; }
.arb-panel__body { overflow-x: auto; }

.arb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.arb-table th, .arb-table td { padding: 7px 9px; white-space: nowrap; }
.arb-table thead th {
  text-align: right;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--mt-text-3);
  border-bottom: 1px solid var(--mt-line-table);
}
.arb-table thead th:first-child { text-align: left; }
.arb-table tbody td { text-align: right; border-bottom: 1px solid var(--mt-line-table); }
.arb-table tbody tr:last-child td { border-bottom: 0; }
.arb-table tbody th {
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--mt-line-table);
  padding: 7px 9px;
}
.arb-table tbody tr.arb-fila { cursor: pointer; }
.arb-table tbody tr.arb-fila:hover td, .arb-table tbody tr.arb-fila:hover th {
  background: rgba(201, 169, 97, 0.1);
}
.arb-table tbody tr.is-abierta td, .arb-table tbody tr.is-abierta th {
  background: rgba(31, 61, 46, 0.08);
}

/* El par: nombre grande, formula chica abajo. Sin la formula el signo del
   spread se lee al reves y nadie se entera. */
.arb-par__nombre { font-weight: 700; font-size: 0.84rem; }
.arb-par__formula { color: var(--mt-text-3); font-size: 0.68rem; font-family: var(--mt-mono); }

/* Bid / offer ejecutables: son los que se operan, van marcados. */
.arb-bid { color: var(--mt-up); font-weight: 600; }
.arb-ask { color: var(--mt-down); font-weight: 600; }
.arb-mid { font-weight: 600; }
.arb-ref { color: var(--mt-text-2); }
.arb-nulo { color: var(--mt-text-3); }

/* --- Badges de contrato -------------------------------------------------- */
.arb-badges { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 1px; }
.arb-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.arb-badge--2005 { background: rgba(46, 111, 142, 0.14); color: #24596f; border-color: rgba(46, 111, 142, 0.3); }
.arb-badge--2016 { background: rgba(31, 61, 46, 0.12); color: var(--mt-green); border-color: rgba(31, 61, 46, 0.26); }
.arb-badge--local { background: rgba(138, 122, 79, 0.16); color: var(--mt-gold-dark); border-color: rgba(138, 122, 79, 0.32); }
.arb-badge--mixto { background: rgba(201, 169, 97, 0.3); color: #7a5f16; border-color: var(--mt-gold); }
.arb-badge--sindato { background: rgba(138, 132, 112, 0.14); color: var(--mt-text-3); border-color: var(--mt-line); }

/* --- Senales ------------------------------------------------------------- */
/* Verde compra, rojo venta, amarillo advertencia, gris sin senal, azul info.
   La intensidad distingue "strong" de la senal normal sin cambiar el color. */
.arb-senal {
  display: inline-block;
  min-width: 96px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  border: 1px solid transparent;
}
.arb-senal--buy   { background: rgba(42, 107, 61, 0.14); color: var(--mt-up); border-color: rgba(42, 107, 61, 0.3); }
.arb-senal--sbuy  { background: var(--mt-up); color: #f2f7f3; }
.arb-senal--sell  { background: rgba(139, 46, 46, 0.14); color: var(--mt-down); border-color: rgba(139, 46, 46, 0.3); }
.arb-senal--ssell { background: var(--mt-down); color: #f9f2f2; }
.arb-senal--watch { background: rgba(201, 169, 97, 0.22); color: #7a5f16; border-color: var(--mt-gold); }
.arb-senal--warn  { background: rgba(201, 169, 97, 0.35); color: #6d5410; border-color: var(--mt-gold-dark); }
.arb-senal--info  { background: rgba(46, 111, 142, 0.12); color: #24596f; border-color: rgba(46, 111, 142, 0.28); }
.arb-senal--gris  { background: rgba(138, 132, 112, 0.12); color: var(--mt-text-3); border-color: var(--mt-line); }

/* Confianza: tres puntos, no una palabra mas en una fila ya llena. */
.arb-conf { display: inline-flex; gap: 2px; vertical-align: 1px; }
.arb-conf i { width: 5px; height: 5px; border-radius: 50%; background: var(--mt-line); display: inline-block; }
.arb-conf i.on { background: var(--mt-green); }
.arb-conf--baja i.on { background: var(--mt-text-3); }
.arb-conf--media i.on { background: var(--mt-gold-dark); }

/* --- Panel de detalle ---------------------------------------------------- */
.arb-detalle {
  border: 1px solid var(--mt-gold);
  border-radius: 10px;
  background: var(--mt-cream-light);
  padding: 10px 12px 12px;
}
.arb-detalle__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.arb-detalle__head strong { font-size: 0.9rem; }
.arb-detalle__cols { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.arb-detalle__chart { flex: 1 1 420px; min-width: 0; }
.arb-detalle__chart canvas { width: 100%; height: auto; }
.arb-detalle__stats {
  flex: 0 1 320px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-content: start;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}
.arb-detalle__stats span:nth-child(odd) { color: var(--mt-text-2); }
.arb-detalle__stats span:nth-child(even) { text-align: right; font-weight: 600; }
.arb-detalle__stats .arb-sep {
  grid-column: 1 / -1;
  margin: 6px 0 2px;
  padding-top: 5px;
  border-top: 1px solid var(--mt-line-table);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--mt-text-3);
  text-align: left;
}
.arb-detalle__fcst { margin-top: 10px; overflow-x: auto; }
.arb-detalle__fcst .arb-table { font-size: 0.74rem; }

/* Nota contractual: es una advertencia, no un dato. */
.arb-nota {
  margin-top: 8px;
  padding: 7px 10px;
  border-left: 3px solid var(--mt-gold);
  background: rgba(201, 169, 97, 0.12);
  border-radius: 0 6px 6px 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--mt-ink);
}
.arb-nota--info { border-left-color: #2e6f8e; background: rgba(46, 111, 142, 0.1); }

/* --- Resumen: tarjetas --------------------------------------------------- */
/* minmax(300px) es a proposito: entran 2 o 3 por fila en un monitor de mesa y
   ninguna queda con letra de 10px. */
.arb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.arb-card {
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  background: var(--mt-cream-light);
  padding: 10px 12px 11px;
  display: grid;
  gap: 7px;
  cursor: pointer;
}
.arb-card:hover { border-color: var(--mt-gold); }
.arb-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.arb-card__par { font-weight: 700; font-size: 0.9rem; }
.arb-card__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}
.arb-card__grid span:nth-child(odd) { color: var(--mt-text-2); }
.arb-card__grid span:nth-child(even) { text-align: right; font-weight: 600; }
.arb-card__pie { font-size: 0.7rem; color: var(--mt-text-3); line-height: 1.4; }

/* --- Rankings: cuatro paneles ------------------------------------------- */
.arb-rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 14px;
  align-items: start;
}

/* --- Cobertura ----------------------------------------------------------- */
.arb-hedge__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  padding: 11px 12px;
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  background: var(--mt-cream-light);
}
.arb-hedge__form label {
  display: grid;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--mt-text-2);
}
.arb-hedge__form input[type="text"],
.arb-hedge__form input[type="number"],
.arb-hedge__form select {
  min-height: 32px;
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: 0;
}
.arb-hedge__form input[type="number"] { width: 130px; }
.arb-hedge__check {
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  font-weight: 500;
  font-size: 0.74rem;
  color: var(--mt-ink);
}
.arb-hedge__check input { min-height: 0; }

/* La fila elegida del ranking de coberturas. */
.arb-table tbody tr.arb-elegida td, .arb-table tbody tr.arb-elegida th {
  background: rgba(42, 107, 61, 0.1);
  box-shadow: inset 2px 0 0 var(--mt-up);
}

/* Estados vacios: dicen QUE falta y como conseguirlo, no "sin datos". */
.arb-vacio {
  padding: 22px 16px;
  text-align: center;
  color: var(--mt-text-2);
  font-size: 0.82rem;
  line-height: 1.55;
  border: 1px dashed var(--mt-line);
  border-radius: 10px;
  background: rgba(251, 249, 242, 0.6);
}
.arb-vacio strong { display: block; margin-bottom: 4px; color: var(--mt-ink); }

@media (max-width: 1100px) {
  .arb-layout { grid-template-columns: 1fr; }
  .arb-nav { flex-direction: row; flex-wrap: wrap; position: static; min-width: 0; }
  .arb-rank-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .arb-topbar { gap: 10px; }
  .arb-topbar__acciones { margin-left: 0; }
  .arb-detalle__stats { flex-basis: 100%; }
  .arb-cards { grid-template-columns: 1fr; }
}