/* ==========================================================================
   Secciones Portfolio y Mercado: navegación, estructura de página y piezas comunes
   (cabecera, pestañas, KPIs, paneles, avisos, filtros, tablas, etiquetas y estados)
   ========================================================================== */

/* ---------- Navegación entre secciones: pestañas en la barra, con el acento del juego ---------- */
.sections { display: flex; align-self: stretch; gap: 2px; flex: none; margin: 0 4px; }
.sections a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--muted);
  font-weight: 560;
  font-size: var(--fs-md);
  text-decoration: none;
  transition: color var(--dur-1);
}
.sections a .i { width: 17px; height: 17px; }
.sections a:hover { color: var(--text); }
.sections a.active { color: var(--text); }
.sections a.active .i { color: var(--accent-2); }
.sections a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); transform: scaleX(0); transition: transform var(--dur-2) var(--ease); }
.sections a.active::after { transform: none; }
.sections a:focus-visible { outline-offset: -4px; border-radius: var(--r-sm); }
body:not([data-section="album"]) .album-only { display: none !important; }
/* Lo del álbum que también va en su página «Mis binders» (el botón que lleva a ella) */
body:not([data-section="album"]):not([data-section="binders"]) .album-zone { display: none !important; }
body:not([data-section="album"]) .layout { display: none; }
.section-tools { display: none; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
body:not([data-section="album"]) .section-tools { display: flex; }
.section-tools .sep { width: 1px; height: 22px; background: var(--line-2); }

a.btn { text-decoration: none; }

/* ---------- Contenedor de página ---------- */
.page-host { min-height: 0; overflow: auto; scroll-behavior: smooth; position: relative; z-index: 1; }
.section-root { min-height: 100%; }
.page { width: min(1340px, 100%); margin: 0 auto; padding: 34px 32px 80px; display: grid; gap: 24px; align-content: start; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; padding-bottom: 6px; }
/* Sobretítulo: «Mercado · Sobres», en mayúsculas compactas con una marca del acento */
.ph-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.ph-kicker::before { content: ""; width: 7px; height: 9px; border-radius: 1.5px; background: var(--accent); } /* una funda llena */
.page-head h1 { margin: 10px 0 0; font-family: var(--display); font-size: 40px; font-weight: 450; letter-spacing: -.02em; line-height: 1.08; }
.page-head p { margin: 10px 0 0; color: var(--text-2); font-size: var(--fs-lg); max-width: 68ch; line-height: 1.55; }
.ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: 560; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent-2); }
.crumbs .i { width: 13px; height: 13px; color: var(--faint); }

/* Las pestañas van alineadas con el contenido de la página (ancho máximo 1340, márgenes de 32 menos los 14 de cada pestaña) */
.page-tabs { position: sticky; top: 0; z-index: 6; display: flex; gap: 2px; margin: 0; padding: 0 max(18px, calc((100% - 1340px) / 2 + 18px)); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow-x: auto; scrollbar-width: none; }
.page-tabs::-webkit-scrollbar { display: none; }
.page-tabs a { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; color: var(--muted); font-weight: 560; font-size: var(--fs-md); text-decoration: none; white-space: nowrap; transition: color var(--dur-1); }
.page-tabs a .i { width: 16px; height: 16px; }
.page-tabs a:hover { color: var(--text); }
.page-tabs a.active { color: var(--text); }
.page-tabs a.active .i { color: var(--accent-2); }
.page-tabs a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.page-tabs a:focus-visible { outline-offset: -6px; border-radius: var(--r-sm); }
.page-tabs .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-2); font-size: var(--fs-2xs); font-weight: 650; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; }
.page-tabs .count.hot { background: var(--accent); color: var(--accent-ink); }

/* ---------- Indicadores (KPIs) ----------
   Una tira de libro de cuentas: las cifras en una sola caja, separadas por filetes. La primera o la
   marcada (.accent) lleva el acento arriba. */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--hairline-top);
  overflow: hidden;
}
.kpi {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding: 18px 20px 17px;
  border: 0;
  border-radius: 0;
  background: transparent;
  /* Filetes entre cifras (los del borde quedan fuera de la caja y no se ven) */
  box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line);
  overflow: hidden;
  transition: background var(--dur-2);
}
button.kpi:hover, a.kpi:hover, .kpi[data-go]:hover { background: var(--surface-2); }
.kpi.accent { background: linear-gradient(180deg, var(--accent-glow), transparent 70%); }
.kpi.accent::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); }
button.kpi { text-align: left; color: inherit; font: inherit; cursor: pointer; }
.kpi-l { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; }
.kpi-l > .i { width: 14px; height: 14px; color: var(--faint); }
.kpi.accent .kpi-l > .i { color: var(--accent-2); }
/* En escritorio, la etiqueta en una línea para que las cifras queden alineadas (el texto entero, en la ayuda) */
/* En una línea en el escritorio; en la tableta (hasta 1199 px) la etiqueta larga se parte antes que cortarse */
@media (min-width: 1200px) { .kpi-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } }
.kpi-v { font-family: var(--display); font-size: 32px; font-weight: 450; letter-spacing: -.02em; line-height: 1.08; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums lining-nums; }
.kpi-v small { font-family: var(--font); font-size: var(--fs-sm); font-weight: 560; letter-spacing: 0; color: var(--muted); margin-left: 3px; }
.kpi-s { color: var(--text-2); font-size: var(--fs-xs); line-height: 1.45; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kpi-s b { color: var(--text); font-weight: 600; }
.kpi .kpi-ic { position: absolute; right: 14px; top: 14px; width: 28px; height: 28px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); }
.kpi .kpi-ic .i { width: 15px; height: 15px; }

/* ---------- Paneles ---------- */
.panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; padding: 22px 24px 24px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--hairline-top); }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.panel-head h2, .panel-head h3 { margin: 0; display: flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 21px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.panel-head h2 > .i, .panel-head h3 > .i { width: 18px; height: 18px; color: var(--accent-2); }
.panel-head .sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; }
.panel-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.cols-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.note { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; }
.note b { color: var(--text-2); }
/* Aviso dentro de la página: un filete del color de su tono a la izquierda */
.callout { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 18px 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface-2); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); overflow: hidden; }
.callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--warn); }
.callout > .i { width: 18px; height: 18px; color: var(--warn); margin-top: 2px; }
.callout b { color: var(--text); }
.callout .btn { height: 30px; padding: 0 11px; font-size: var(--fs-sm); margin-left: 6px; vertical-align: middle; }
.callout.good { border-color: color-mix(in srgb, var(--ok) 28%, var(--line)); background: color-mix(in srgb, var(--ok) 6%, var(--surface)); }
.callout.good::before { background: var(--ok); }
.callout.good > .i { color: var(--ok); }
.callout.bad { border-color: color-mix(in srgb, var(--bad) 28%, var(--line)); background: color-mix(in srgb, var(--bad) 6%, var(--surface)); }
.callout.bad::before { background: var(--bad); }
.callout.bad > .i { color: var(--bad); }

/* ---------- Barra de filtros ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.toolbar .grow { flex: 1; }
.toolbar .lbl { color: var(--muted); font-size: var(--fs-xs); font-weight: 560; }
.search-box { position: relative; min-width: 220px; }
.search-box .i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); }
.search-box .input { padding-left: 32px; height: 34px; }
.search-box .input:placeholder-shown { text-overflow: ellipsis; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-size: var(--fs-xs); font-weight: 560; white-space: nowrap; transition: color var(--dur-1), background var(--dur-1), border-color var(--dur-1); }
.pill:hover { color: var(--text); border-color: var(--line-3); }
.pill.on { color: var(--text); background: var(--accent-soft); border-color: var(--accent-line); }
.pill .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--k, var(--muted)); }

/* ---------- Tablas de datos ----------
   Cabecera en mayúsculas compactas sobre un pozo, filas con filete fino, cifras tabulares a la
   derecha y la fila bajo el ratón marcada con el acento a la izquierda. */
.dtable-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.panel .dtable-wrap { background: var(--bg-2); }
.dtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.dtable th { position: sticky; top: 0; z-index: 2; padding: 11px 14px 10px; text-align: right; font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.dtable th.l, .dtable td.l { text-align: left; }
.dtable th[data-sort] { cursor: pointer; user-select: none; }
.dtable th[data-sort]:hover, .dtable th.sorted { color: var(--text); }
.dtable th .arrow { display: inline-block; margin-left: 4px; color: var(--accent-2); }
.dtable td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--line-soft); white-space: nowrap; vertical-align: middle; }
.dtable tbody tr { transition: background var(--dur-1); }
.dtable tbody tr[data-href], .dtable tbody tr[data-act] { cursor: pointer; }
.dtable tbody tr:hover td { background: var(--surface-2); }
.dtable tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable .muted { color: var(--muted); }
.dtable .strong { font-weight: 650; color: var(--text); }
.dtable td.name { max-width: 320px; }
.dtable .group-row td { background: var(--surface-2); font-weight: 600; color: var(--text-2); text-align: left; font-size: var(--fs-2xs); font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; }
.cellstack { display: grid; gap: 2px; line-height: 1.25; }
.cellstack small { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.td-card { display: flex; align-items: center; gap: 12px; min-width: 0; text-align: left; }
.td-card img, .td-card .ph { width: 34px; aspect-ratio: 63 / 88; border-radius: var(--r-xs); object-fit: cover; background: var(--surface-3); flex: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); }
.td-card .box-img { width: 44px; aspect-ratio: 1; object-fit: contain; background: none; box-shadow: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.td-card .t { min-width: 0; display: grid; gap: 2px; }
.td-card .t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.td-card .t span { color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }

/* barra de proporción dentro de una celda */
.cellbar { display: inline-grid; grid-template-columns: 64px auto; align-items: center; gap: 8px; }
.cellbar i { display: block; height: 6px; border-radius: 0 3px 3px 0; background: var(--k, var(--viz-1)); transform-origin: left; animation: bar-grow .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
.cellbar .track { width: 64px; height: 6px; border-radius: var(--r-xs); background: var(--surface-3); overflow: hidden; }

/* ---------- Ayudas ---------- */
.info-dot { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: help; flex: none; vertical-align: middle; transition: color var(--dur-1); }
.info-dot .i { width: 14px; height: 14px; }
.info-dot:hover, .info-dot:focus-visible { color: var(--accent-2); }
.hint-pop {
  position: fixed;
  z-index: 120;
  max-width: 300px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--overlay);
  border: 1px solid var(--line-2);
  box-shadow: var(--e-2);
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
}
.hint-pop.wide { max-width: 380px; }
.hint-pop.in { animation: hint-pop .16s var(--ease) forwards; }
.hint-pop[data-side="below"].in { animation-name: hint-pop-below; }
@keyframes hint-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes hint-pop-below { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.hp-title { display: block; color: var(--text); font-size: var(--fs-xs); font-weight: 650; margin-bottom: 3px; }
.hp-text { display: block; }
.hint-pop .hp-rows { display: grid; gap: 5px; margin-top: 6px; }
.hint-pop .hp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
.hint-pop .hp-row b { color: var(--text); font-variant-numeric: tabular-nums; }
.hint-pop .hp-sep { height: 1px; background: var(--line); margin: 4px 0; }
.popover { position: fixed; z-index: 110; max-width: min(360px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; border-radius: var(--r-lg); background: var(--overlay); border: 1px solid var(--line-2); box-shadow: var(--e-2), var(--hairline-top); animation: pop-in .16s var(--ease); font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); }
.popover p { margin: 0; }
.popover .hp-title { font-family: var(--display); font-size: var(--fs-lg); font-weight: 550; margin-bottom: 6px; }
.popover.form-pop { width: 320px; display: grid; gap: 12px; }
[data-hint], [data-hint-rich] { cursor: help; }
button[data-hint], a[data-hint], tr[data-hint-rich], button[data-hint-rich], .pill[data-hint] { cursor: pointer; }

/* ---------- Insignias de fiabilidad (A mejor, D peor) ---------- */
.conf { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-xs); font-size: var(--fs-2xs); font-weight: 700; flex: none; }
.conf-A { background: var(--ok-soft); color: var(--ok-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); }
.conf-B { background: var(--info-soft); color: var(--info); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 40%, transparent); }
.conf-C { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); }
.conf-D { background: rgba(141, 139, 133, .14); color: var(--text-2); box-shadow: inset 0 0 0 1px rgba(141, 139, 133, .34); }
/* Etiquetas fijas: una forma para todas (rareza, origen, versión, estado) */
.tagx { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 7px; border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.tagx.gold { background: var(--accent-soft); color: var(--accent-2); }
.tagx.good { background: var(--ok-soft); color: var(--ok-2); }
.tagx.bad { background: var(--bad-soft); color: var(--bad-2); }
.tagx.blue { background: var(--info-soft); color: var(--info); }
.tagx .i { width: 12px; height: 12px; }

/* ---------- Panel lateral ---------- */
.dialog.drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(560px, 100vw); border-radius: var(--r-xl) 0 0 var(--r-xl); border-right: 0; }
.dialog.drawer[open] { animation: drawer-in .28s var(--ease); }
.dialog.drawer.wide { width: min(760px, 100vw); }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }

/* ---------- Estados: vacío y cargando ---------- */
.empty-state { display: grid; justify-items: center; gap: 8px; padding: 52px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r-xl); background: radial-gradient(420px 160px at 50% 0, var(--accent-glow), transparent 70%); }
.empty-state > .i { width: 34px; height: 34px; color: var(--accent-2); stroke-width: 1.4; margin-bottom: 6px; opacity: .85; }
.empty-state b { color: var(--text); font-family: var(--display); font-size: var(--fs-xl); font-weight: 500; }
.empty-state p { margin: 0; max-width: 460px; font-size: var(--fs-sm); line-height: 1.6; }
.empty-state .btn { margin-top: 10px; }
.skel { display: grid; gap: 10px; padding: 6px 0; }
.skel i { display: block; height: 12px; width: var(--w); border-radius: var(--r-xs); background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: skel-shimmer 1.3s linear infinite; }
.skel.tall i { height: 38px; }
@keyframes skel-shimmer { to { background-position: -200% 0; } }

/* ---------- Entradas animadas ---------- */
.rv { animation: rv-in .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 38ms); }
/* Una vez pintada la página, al actualizarla no se repiten las entradas (ver paint() en ui.js) */
.settled .rv { animation: none; }
@keyframes rv-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes bar-grow { from { transform: scaleX(0); } }
.fade-swap { animation: fade-swap .3s var(--ease); }
@keyframes fade-swap { from { opacity: .35; } }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

/* ---------- Formularios en panel ---------- */
.form-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.form-cols .full { grid-column: 1 / -1; }
.field .help { color: var(--muted); font-size: var(--fs-xs); font-weight: 450; }
.range-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.range-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.range-row output { min-width: 64px; text-align: right; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
/* Interruptor (una de las pocas píldoras del sistema) */
.switch { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); }
.switch input { appearance: none; width: 34px; height: 20px; margin: 0; border-radius: var(--r-pill); background: var(--surface-4); box-shadow: inset 0 0 0 1px var(--line-2); position: relative; transition: background var(--dur-2); cursor: pointer; flex: none; }
.switch input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ivory-2); transition: transform var(--dur-2) var(--ease), background var(--dur-2); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.switch input:checked { background: var(--accent); box-shadow: none; }
.switch input:checked::after { transform: translateX(14px); background: #fff; }
.switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (max-width: 1280px) {
  .sections a span { display: none; }
  .sections a { padding: 0 10px; }
}
@media (max-width: 1100px) {
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sections { order: 1; height: 40px; align-self: auto; }
  .sections a span { display: inline; }
  body:not([data-section="album"]) .section-tools { order: 3; width: 100%; margin-left: 0; justify-content: flex-end; flex-wrap: wrap; row-gap: 6px; }
  .page-host { overflow: visible; overflow-x: clip; }
  .page { padding: 22px 16px 64px; gap: 18px; }
  .page-tabs { margin: 0; padding: 0 4px; top: 0; }
  .page-head h1 { font-size: 30px; }
  .page-head p { font-size: var(--fs-md); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 14px 14px 13px; gap: 5px; }
  /* Con un número impar de cifras, la última ocupa la fila entera (no deja medio hueco) */
  .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi-v { font-size: 25px; white-space: normal; }
  /* La cifra entera en su línea; lo que la acompaña (el %) baja si no cabe, no se corta */
  .kpi-v small { display: inline-block; white-space: nowrap; }
  .kpi-l { font-size: var(--fs-2xs); letter-spacing: .06em; line-height: 1.3; }
  .kpi-l > .i { display: none; }
  .kpi-s { font-size: var(--fs-xs); }
  .section-tools .save-dot { display: none; }
  .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 16px; border-radius: var(--r-lg); gap: 14px; }
  .panel-head h2, .panel-head h3 { font-size: 19px; }
  .form-cols { grid-template-columns: minmax(0, 1fr); }
  /* En la tableta, la ficha a su ancho de lectura (como en el escritorio), no estirada a toda la pantalla;
     en el móvil va entera (mobile.css) */
  .dialog.drawer { width: min(640px, 100vw); }
}
@media (max-width: 520px) {
  .sections a { padding: 0 9px; }
  .sections a span { font-size: var(--fs-xs); }
}

/* ---------- De cuándo son los datos (barra superior) ---------- */
.live-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: var(--fs-xs); font-weight: 560; flex: none; white-space: nowrap; transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1); }
.live-chip:hover { color: var(--text); border-color: var(--line-2); background: var(--surface-2); }
/* Datos nuevos llegando: solo informa (se aplican solos en un momento tranquilo, live.js) */
.live-chip.has-new { color: var(--text-2); border-color: var(--accent-line); }
.lc-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-grid; place-items: center; }
.lc-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.lc-dot.new { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: lc-pulse 1.6s var(--ease) infinite; }
@keyframes lc-pulse { 50% { box-shadow: 0 0 0 5px var(--accent-glow); } }
.lc-dot.busy { width: 14px; height: 14px; }
.lc-dot.busy .i { width: 13px; height: 13px; animation: spin 1s linear infinite; color: var(--accent-2); }
.live-pop { display: grid; gap: 10px; width: min(326px, calc(100vw - 52px)); }
.live-pop .hp-title { display: flex; align-items: center; gap: 7px; }
.live-pop .hp-title .i { width: 16px; height: 16px; color: var(--accent-2); }
.lp-rows { display: grid; gap: 6px; }
.lp-rows div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: var(--fs-xs); }
.lp-rows span { color: var(--muted); }
.lp-rows b { margin-left: auto; color: var(--text); font-weight: 600; text-align: right; }
.live-pop .lp-new { color: var(--text-2); }
.live-pop .lp-new .i { width: 14px; height: 14px; color: var(--accent-2); vertical-align: -2px; }
@media (max-width: 1280px) { .live-chip .lc-t { display: none; } .live-chip { padding: 0 9px; } }
@media (max-width: 900px) { .live-chip { order: 2; } }

/* En la mesa, los avisos arriba: abajo tapaban la ayuda y los controles */
body[data-section="mesa"] .toasts { top: 74px; bottom: auto; }