/* ══ LOS TABLEROS, INTERACTIVOS (static/js/tableros-lista.js) ═══════════════════
   La lista que se abre al tocar un número (una sección, no un cuadro), el globo de los
   gráficos y las tarjetas que se abren. CSS propio y no clases de Tailwind: el tw.css está
   precompilado y una clase que no estaba al compilarlo no existe.

   Dos temas, como el resto de la app: el claro (tarjetas blancas) y el vidrio oscuro
   (`html.theme-glass`). `html.dark` va al lado por si vuelve a usarse. */
:root{
  --dl-caja:#fff; --dl-th:#fff; --dl-secc:#f7f3fd;
  --dl-borde:rgba(33,21,49,.10); --dl-borde2:rgba(33,21,49,.16);
  --dl-txt:#211531; --dl-sub:#4f4262; --dl-mut:#6b5b7d;
  --dl-acc:#6d28d9; --dl-acc-s:rgba(119,45,237,.07); --dl-acc-s2:rgba(119,45,237,.13);
  --dl-neg:#be123c; --dl-pos:#15803d;
  --dl-tip:#fff; --dl-tip-borde:rgba(33,21,49,.12);
  --dl-sombra:0 1px 2px rgba(20,16,32,.06), 0 1px 3px rgba(20,16,32,.05);
}
html.theme-glass, html.dark{
  --dl-caja:rgba(255,255,255,.048); --dl-th:#0f0e13; --dl-secc:#17131f;
  --dl-borde:rgba(255,255,255,.12); --dl-borde2:rgba(255,255,255,.17);
  --dl-txt:#efe7fb; --dl-sub:#c9bbdc; --dl-mut:#b9a8cf;
  --dl-acc:#c4b5fd; --dl-acc-s:rgba(167,139,250,.10); --dl-acc-s2:rgba(167,139,250,.18);
  --dl-neg:#fb7185; --dl-pos:#86efac;
  --dl-tip:#1b1724; --dl-tip-borde:rgba(255,255,255,.14);
  --dl-sombra:0 1px 3px rgba(0,0,0,.38);
}

/* ── La lista: una sección de la app ── */
#view-detalle.dl-entra{animation:dl-entra .18s ease-out}
@keyframes dl-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#view-detalle.dl-entra{animation:none}}

.dl-cab{margin:0 0 14px}
.dl-migas{display:flex;flex-wrap:wrap;gap:2px;align-items:center;font-size:12.5px;color:var(--dl-mut);margin:0 0 8px}
.dl-migas button{background:none;border:0;cursor:pointer;font:inherit;color:var(--dl-sub);border-radius:6px;padding:2px 5px}
.dl-migas button:hover{color:var(--dl-acc);background:var(--dl-acc-s)}
.dl-migas .yo{color:var(--dl-txt);font-weight:600;padding:2px 5px}
.dl-fila{display:flex;align-items:center;gap:12px}
.dl-fila h2{margin:0;font-size:1.35rem;font-weight:700;line-height:1.2;color:var(--dl-txt);flex:1;min-width:0;outline:none}
/* El botón de volver de Configuración y Mi perfil: cuadrado, con borde, la flecha adentro. */
.dl-atras{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;flex:0 0 auto;cursor:pointer;
  border:1px solid var(--dl-borde2);background:var(--dl-caja);color:var(--dl-sub);transition:background .12s,color .12s}
.dl-atras svg{width:20px;height:20px}
.dl-atras:hover{background:var(--dl-acc-s);color:var(--dl-txt)}
.dl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.dl-chips span{font-size:11.5px;color:var(--dl-sub);border:1px solid var(--dl-borde2);border-radius:999px;padding:3px 9px}

.dl-res{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 16px;margin:0 0 12px}
.dl-grande{margin:0;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:1.9rem;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--dl-txt)}
.dl-suf{font-size:1rem;font-weight:600;letter-spacing:0;color:var(--dl-sub)}
.dl-cnt,.dl-ext{margin:0;font-size:13px;padding-bottom:4px;color:var(--dl-sub)}
.dl-ext{color:var(--dl-mut)}
.dl-formula{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--dl-acc-s);font-size:13px;color:var(--dl-sub);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dl-formula b{color:var(--dl-txt)}
.dl-formula button{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:600;color:var(--dl-acc);border-bottom:1px dashed currentColor}

/* La caja de la lista. Sin overflow: así los títulos de las columnas se quedan pegados
   arriba al bajar por la página (un ancestro con overflow los suelta). */
.dl-caja{background:var(--dl-caja);border:1px solid var(--dl-borde);border-radius:16px;box-shadow:var(--dl-sombra);padding:12px 6px 6px}
.dl-vacio{padding:40px 16px;text-align:center;color:var(--dl-mut)}
.dl-vacio .dl-boton{margin-top:10px}
.dl-tools{display:flex;gap:8px;align-items:center;padding:0 8px 10px}
.dl-buscar{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:1px solid var(--dl-borde2);border-radius:11px;padding:0 10px;color:var(--dl-mut)}
.dl-buscar:focus-within{border-color:var(--accent-strong,#8b5cf6);box-shadow:0 0 0 3px rgba(139,92,246,.14)}
.dl-buscar input{flex:1;min-width:0;border:0 !important;outline:0;box-shadow:none !important;background:transparent !important;padding:8px 0;font:inherit;font-size:13px;color:var(--dl-txt)}
.dl-boton{font:inherit;font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:11px;border:1px solid var(--dl-borde2);background:transparent;color:var(--dl-txt);cursor:pointer;white-space:nowrap}
.dl-boton:hover{background:var(--dl-acc-s)}
.dl-tabla thead th{position:sticky;top:var(--dl-top,0px);z-index:2;background:var(--dl-th);padding-top:.5rem}
.dl-tabla thead th button{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;
  display:inline-flex;gap:4px;align-items:center}
.dl-tabla thead th button:hover{color:var(--dl-txt)}
.dl-fl{opacity:0;font-size:9px}
.dl-ord .dl-fl{opacity:1;color:var(--dl-acc)}
.dl-tabla td.dl-mon{font-weight:600;color:var(--dl-txt)}
.dl-tabla td.dl-tenue{color:var(--dl-mut)}
.dl-tabla td.dl-neg,.dl-neg{color:var(--dl-neg) !important}
.dl-pos{color:var(--dl-pos)}
.dl-tabla tr.dl-abre{cursor:pointer}
.dl-tabla tr.dl-abre:hover > td,.dl-tabla tr.dl-abre:focus-visible > td{background:var(--dl-acc-s)}
.dl-tabla tr.dl-abre:focus-visible{outline:none}
/* La cabecera de cada sección, pegada debajo de los títulos de las columnas. Con el id
   delante a propósito: listas.css le da 26 px arriba y abajo a toda celda con colspan (la de
   «no hay nada»), vuelve inline-flex lo que va adentro de una celda y achica sus botones, y
   las tres reglas llevan !important. */
#view-detalle .dl-tabla tr.dl-secc > td{position:sticky;top:calc(var(--dl-top,0px) + var(--dl-th-alto,30px));z-index:1;
  background:var(--dl-secc);padding:8px 12px !important;cursor:pointer;border-top:1px solid var(--dl-borde)}
.dl-tabla tr.dl-secc.oculta > td{opacity:.65}
.dl-tabla tr.dl-secc:focus-visible{outline:2px solid var(--accent-strong,#8b5cf6);outline-offset:-2px}
#view-detalle .dl-secc-in{display:flex;align-items:center;gap:10px;width:100%}
.dl-k{width:14px;height:3px;border-radius:2px;flex:0 0 auto}
.dl-nom{font-weight:600;color:var(--dl-txt);white-space:nowrap}
.dl-meta{color:var(--dl-sub);font-size:12px}
.dl-tot{margin-left:auto;font-weight:700;color:var(--dl-txt);white-space:nowrap}
.dl-chev{transition:transform .15s;color:var(--dl-mut);flex:0 0 auto}
tr.dl-secc.cerrada .dl-chev{transform:rotate(-90deg)}
#view-detalle .dl-solo{background:none;border:0;cursor:pointer;font:inherit;font-size:11.5px !important;font-weight:600;color:var(--dl-acc);
  padding:2px 6px !important;border-radius:6px;white-space:nowrap}
.dl-solo:hover{background:var(--dl-acc-s2)}
.dl-tabla td.dl-sin{padding:28px 12px;text-align:center;color:var(--dl-mut)}
.dl-pag{padding:10px 12px 4px}
.dl-mas{display:flex;justify-content:center;padding:12px}
.dl-nota{font-size:12px;color:var(--dl-mut);padding:6px 12px 8px;margin:0}
.dl-atras:focus-visible,.dl-migas button:focus-visible,.dl-boton:focus-visible,.dl-solo:focus-visible,
.dl-tabla thead th button:focus-visible,.dl-formula button:focus-visible{outline:2px solid var(--accent-strong,#8b5cf6);outline-offset:2px}

/* ── El globo de los gráficos (uno solo para todos) ── */
#gtip{position:fixed;z-index:80;pointer-events:none;min-width:150px;max-width:280px;background:var(--dl-tip);color:var(--dl-txt);
  border:1px solid var(--dl-tip-borde);border-radius:12px;box-shadow:0 12px 32px -10px rgba(20,16,32,.35);
  padding:9px 11px 8px;font-size:12.5px;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
#gtip.vis{opacity:1;transform:none}
#gtip.toca{pointer-events:auto}
#gtip .t{font-size:11.5px;color:var(--dl-sub);margin-bottom:5px}
#gtip .r{display:flex;align-items:center;gap:8px;line-height:1.5}
#gtip .r .k{width:12px;height:2.5px;border-radius:2px;flex:0 0 auto}
#gtip .r .v{font-weight:700;font-variant-numeric:tabular-nums}
#gtip .r .n{color:var(--dl-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gtip .d{font-size:11.5px;color:var(--dl-sub);margin-top:3px}
#gtip .pie{margin-top:6px;padding-top:6px;border-top:1px solid var(--dl-borde);font-size:11px;font-weight:600;color:var(--dl-acc)}
#gtip .tip-btn{display:block;width:100%;margin-top:7px;text-align:center;background:var(--accent-vivid,#772ded);color:#fff;border:0;
  border-radius:9px;padding:8px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}

/* ── Las tarjetas que se abren: toda la tarjeta es el botón ──
   En columna y arriba: un <button> centra su contenido de alto, y en una fila de tarjetas
   que se estiran a la más alta el número quedaba más abajo que en la tarjeta de al lado. */
.kpi-abre{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;width:100%;text-align:left;
  font:inherit;color:inherit;cursor:pointer;position:relative;transition:border-color .15s,transform .15s}
.kpi-abre:hover{border-color:rgba(139,92,246,.45) !important;transform:translateY(-1px)}
.kpi-abre:focus-visible{outline:2px solid var(--accent-strong,#8b5cf6);outline-offset:2px}
.kpi-ir{position:absolute;right:14px;top:10px;font-size:11px;font-weight:600;color:var(--dl-acc);opacity:0;transition:opacity .15s}
/* En la tarjeta de dinero arriba a la derecha va el % de cambio y la chispa: abajo no tapa nada. */
.kpi-ir.abajo{top:auto;bottom:8px}
.kpi-abre:hover .kpi-ir,.kpi-abre:focus-visible .kpi-ir{opacity:1}
@media (hover:none){.kpi-ir{display:none}}

/* ── Los renglones de las listas cortas de un tablero («Cómo compran», «Reposición
   urgente»…): cada uno abre su lista o su ficha. El fondo al pasar el cursor se sale un poco
   a los lados, para que el texto no quede pegado al borde del resaltado. ── */
.tab-fila-abre{width:calc(100% + 16px);margin:0 -8px;padding-left:8px !important;padding-right:8px !important;
  background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:10px;transition:background .12s}
.tab-fila-abre:hover,.tab-fila-abre:focus-visible{background:var(--dl-acc-s);outline:none}
.tab-fila-abre:focus-visible{box-shadow:0 0 0 2px var(--accent-strong,#8b5cf6) inset}
/* Las filas de las tablas de un tablero que abren su lista o su ficha. */
tr.tab-tr-abre{cursor:pointer}
tr.tab-tr-abre:hover > td,tr.tab-tr-abre:focus-visible > td{background:var(--dl-acc-s)}
tr.tab-tr-abre:focus-visible{outline:none}

/* ── Los anillos: cada cuenta y el total se abren ── */
.ring-abre{cursor:pointer;transition:opacity .15s}
.ring-abre:focus-visible{outline:none;opacity:.8}
.ring-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:calc(100% + 12px);margin:0 -6px;padding:3px 6px;
  border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ring-btn:hover,.ring-btn:focus-visible{background:var(--dl-acc-s);outline:none}

/* ── En el teléfono las filas son tarjetas (tablas-movil.js, modelo B): la cabecera de
   cada sección queda como un rótulo y no como una tarjeta más. ── */
@media (max-width:820px){
  .dl-fila h2{font-size:1.15rem}
  .dl-grande{font-size:1.5rem}
  /* La caja de afuera se va, como en las demás listas de la app en el teléfono: la hoja de
     filas ya es la superficie, y una caja dentro de otra se lee como un panel con rayas. */
  #view-detalle .dl-caja{background:transparent;border:0;box-shadow:none;border-radius:0;padding:0}
  #view-detalle .dl-tools{padding:0 0 10px}
  .dl-tabla tbody.dl-tsec{gap:0 !important}
  #view-detalle .dl-tabla tr.dl-secc{background:transparent !important;border:0 !important;box-shadow:none !important;padding:12px 2px 4px !important}
  #view-detalle .dl-tabla tr.dl-secc > td{position:static;background:transparent;border:0 !important;padding:0 !important}
  /* El nombre y el subtotal arriba; lo que cuenta y «Solo esta», en el renglón de abajo. */
  #view-detalle .dl-secc-in{flex-wrap:wrap;row-gap:2px}
  #view-detalle .dl-secc-in::after{content:"";flex-basis:100%;order:2}
  #view-detalle .dl-tot{order:1}
  #view-detalle .dl-meta{order:3;margin-left:38px}
  #view-detalle .dl-solo{order:4}
  /* La fecha y el método no se parten en dos renglones: se cortan con «…». */
  #view-detalle tbody[data-modelo] > tr > td[data-rol^="sub"]{white-space:nowrap !important}
  .dl-tabla td.dl-sin{padding:20px 8px !important}
  #view-detalle .dl-pag,#view-detalle .dl-nota{padding-left:2px;padding-right:2px}
}