/* =====================================================================
   LYK Cerebro — Sistema visual
   Sé Increíble. Marino, símbolo, oro. Poppins.
   ===================================================================== */

:root{
  /* Marca */
  --marino:#001982; --simbolo:#051EA7; --azul:#0B23D3; --nube:#E9EDFB; --oro:#CA9A3C;

  /* Tinta y papel */
  --tinta:#0B0F22; --tinta-2:#4A5170; --tinta-3:#818AA6; --tinta-4:#A8AFC4;
  --papel:#FFFFFF; --papel-2:#F7F8FC; --papel-3:#EEF1F9;
  --linea:#E1E6F3; --linea-2:#CFD6EA;

  /* Semáforo */
  --verde:#0E7C56; --verde-suave:#E4F5EE;
  --ambar:#9A6B10; --ambar-suave:#FDF3DF;
  --rojo:#B3261E;  --rojo-suave:#FCEBE9;
  --gris-suave:#EDEFF6;

  /* Forma */
  --r-xs:5px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-full:999px;
  --sombra-1:0 1px 2px rgba(9,17,54,.05), 0 1px 3px rgba(9,17,54,.04);
  --sombra-2:0 2px 4px rgba(9,17,54,.05), 0 8px 20px -6px rgba(9,17,54,.10);
  --sombra-3:0 12px 40px -12px rgba(9,17,54,.22);
  --rail:250px;

  /* Movimiento */
  --paso:180ms cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --marino:#050A1C; --simbolo:#2A45E8; --azul:#7189FF; --nube:#151D40; --oro:#E0B96A;
  --tinta:#F0F3FC; --tinta-2:#B3BBD6; --tinta-3:#818AA6; --tinta-4:#5E6683;
  --papel:#0C1122; --papel-2:#080C19; --papel-3:#141A30;
  --linea:#212845; --linea-2:#2E3757;
  --verde:#5BE49B; --verde-suave:#0C2B22;
  --ambar:#F5C563; --ambar-suave:#2E2312;
  --rojo:#FF8A80;  --rojo-suave:#33140F;
  --gris-suave:#181E36;
  --sombra-1:0 1px 2px rgba(0,0,0,.30);
  --sombra-2:0 2px 4px rgba(0,0,0,.28), 0 8px 20px -6px rgba(0,0,0,.42);
  --sombra-3:0 12px 40px -12px rgba(0,0,0,.62);
}}
:root[data-theme="dark"]{
  --marino:#050A1C; --simbolo:#2A45E8; --azul:#7189FF; --nube:#151D40; --oro:#E0B96A;
  --tinta:#F0F3FC; --tinta-2:#B3BBD6; --tinta-3:#818AA6; --tinta-4:#5E6683;
  --papel:#0C1122; --papel-2:#080C19; --papel-3:#141A30;
  --linea:#212845; --linea-2:#2E3757;
  --verde:#5BE49B; --verde-suave:#0C2B22;
  --ambar:#F5C563; --ambar-suave:#2E2312;
  --rojo:#FF8A80;  --rojo-suave:#33140F;
  --gris-suave:#181E36;
  --sombra-1:0 1px 2px rgba(0,0,0,.30);
  --sombra-2:0 2px 4px rgba(0,0,0,.28), 0 8px 20px -6px rgba(0,0,0,.42);
  --sombra-3:0 12px 40px -12px rgba(0,0,0,.62);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel-2); color:var(--tinta);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.021em; text-wrap:balance; line-height:1.25}
p{margin:0}
a{color:var(--azul)}
button,input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--oro); outline-offset:2px; border-radius:var(--r-xs)}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* ---------- tipografía de apoyo ---------- */
.eyebrow{font-size:.64rem; letter-spacing:.19em; text-transform:uppercase;
  font-weight:700; color:var(--tinta-3)}
.sub{color:var(--tinta-2); font-size:.9rem}
.mini{font-size:.78rem; color:var(--tinta-3)}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
/* Registro Maestro: se lee en voz alta, asi que se pinta para leerse */
.registro{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.82rem;
  font-weight:600; letter-spacing:.06em; color:var(--azul);
  background:var(--nube); padding:3px 8px; border-radius:var(--r-xs); white-space:nowrap}
.registro.grande{font-size:1.05rem; letter-spacing:.1em; padding:5px 11px;
  display:inline-block; margin:4px 0 8px}

/* =====================================================================
   ACCESO
   ===================================================================== */
.acceso{min-height:100vh; display:grid; grid-template-columns:1.15fr minmax(0,480px);
  background:var(--marino); color:#fff}
@media (max-width:900px){ .acceso{grid-template-columns:1fr} }

.acceso-lado{padding:56px 52px; display:flex; flex-direction:column;
  justify-content:space-between; position:relative; overflow:hidden}
.acceso-lado::before{content:""; position:absolute; left:-220px; bottom:-240px;
  width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle,var(--simbolo) 0%,transparent 68%); opacity:.55}
.acceso-lado::after{content:""; position:absolute; right:-140px; top:-160px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,var(--oro) 0%,transparent 70%); opacity:.10}
.acceso-lado>*{position:relative; z-index:1}
@media (max-width:900px){ .acceso-lado{padding:36px 26px 16px} .acceso-pie{display:none} }

.marca{display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit}
.marca img{height:38px; width:auto}
.marca b{display:block; font-weight:700; font-size:1.08rem; letter-spacing:.045em; line-height:1}
.marca i{display:block; font-style:normal; font-size:.57rem; letter-spacing:.24em;
  text-transform:uppercase; opacity:.62; font-weight:600; margin-top:4px}

.acceso-centro h2{font-size:clamp(1.7rem,3.6vw,2.6rem); max-width:15ch; margin-bottom:18px}
.acceso-centro p{opacity:.8; max-width:44ch; font-size:.98rem}
.acceso-pie{display:flex; gap:30px; flex-wrap:wrap; font-size:.79rem; opacity:.58}

.acceso-panel{background:var(--papel); color:var(--tinta); padding:56px 46px;
  display:flex; flex-direction:column; justify-content:center; gap:22px}
@media (max-width:900px){ .acceso-panel{padding:36px 26px 48px} }
.acceso-panel h1{font-size:1.6rem}

/* =====================================================================
   ARMAZÓN — riel lateral + lienzo
   ===================================================================== */
.armazon{display:grid; grid-template-columns:var(--rail) 1fr; min-height:100vh}
@media (max-width:960px){ .armazon{grid-template-columns:1fr} }
/* Sin esto los hijos de un grid valen min-width:auto y crecen con su contenido:
   la tabla ancha empuja el lienzo y la PÁGINA entera se desplaza de lado.
   La tabla debe desplazarse dentro de su caja, nunca el cuerpo. */
.armazon>*{min-width:0}
.lienzo, .tabla-caja, .tabla-desliz{min-width:0; max-width:100%}

.riel{background:var(--marino); color:#fff; padding:22px 16px; display:flex;
  flex-direction:column; gap:26px; position:sticky; top:0; height:100vh; overflow-y:auto}
@media (max-width:960px){
  .riel{position:static; height:auto; flex-direction:row; align-items:center;
    gap:14px; padding:12px 16px; overflow-x:auto}
  .riel .riel-pie{display:none}
}
.riel .marca img{height:30px}
.riel .marca b{font-size:.98rem; white-space:nowrap}
.riel .marca{flex:none}

.nav{display:flex; flex-direction:column; gap:2px}
@media (max-width:960px){ .nav{flex-direction:row; gap:4px; margin-left:auto} }
.nav-t{padding:0 12px 6px; font-size:.6rem; letter-spacing:.19em; text-transform:uppercase;
  font-weight:700; color:rgba(255,255,255,.38)}
@media (max-width:960px){ .nav-t{display:none} }

.nav-b{display:flex; align-items:center; gap:11px; width:100%; padding:9px 12px;
  border:0; background:none; color:rgba(255,255,255,.72); border-radius:var(--r-sm);
  font-size:.875rem; font-weight:500; cursor:pointer; text-align:left;
  transition:background var(--paso), color var(--paso); white-space:nowrap}
.nav-b:hover{background:rgba(255,255,255,.09); color:#fff}
.nav-b[aria-current="true"]{background:rgba(255,255,255,.14); color:#fff; font-weight:600}
.nav-b svg{width:17px; height:17px; flex:none; opacity:.9}
.nav-b .cuenta{margin-left:auto; background:var(--oro); color:#241a05; font-size:.66rem;
  font-weight:700; padding:1px 7px; border-radius:var(--r-full); min-width:20px; text-align:center}
.nav-b .cuenta.quieto{background:rgba(255,255,255,.18); color:#fff}

.riel-pie{margin-top:auto; border-top:1px solid rgba(255,255,255,.12); padding-top:16px}
.yo{display:flex; align-items:center; gap:11px; margin-bottom:10px}
.avatar{width:34px; height:34px; border-radius:var(--r-full); flex:none;
  background:linear-gradient(140deg,var(--simbolo),var(--azul)); color:#fff;
  display:grid; place-items:center; font-size:.8rem; font-weight:700; letter-spacing:.02em}
.yo b{display:block; font-size:.83rem; font-weight:600; line-height:1.3}
.yo span{display:block; font-size:.7rem; opacity:.6; line-height:1.3}
.salir{width:100%; padding:7px; border:1px solid rgba(255,255,255,.16); background:none;
  color:rgba(255,255,255,.75); border-radius:var(--r-sm); font-size:.78rem; cursor:pointer;
  transition:background var(--paso)}
.salir:hover{background:rgba(255,255,255,.11); color:#fff}
.salir.reportar{margin-bottom:12px; border-color:rgba(202,154,60,.5); color:var(--oro);
  display:flex; align-items:center; justify-content:center; gap:7px; font-weight:600}
.salir.reportar:hover{background:rgba(202,154,60,.16); color:var(--oro)}

.lienzo{padding:34px 38px 90px; max-width:1180px; width:100%; margin:0 auto}
@media (max-width:640px){ .lienzo{padding:24px 18px 70px} }

/* ---------- encabezado de página ---------- */
.encabezado{display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:26px}
.encabezado h1{font-size:1.72rem; margin-bottom:5px}
.encabezado .sub{max-width:68ch}
.encabezado-d{margin-left:auto; display:flex; gap:9px; align-items:center; flex-wrap:wrap}

.saludo{font-size:1.72rem; margin-bottom:5px}
.saludo em{font-style:normal; color:var(--tinta-3)}

/* =====================================================================
   PIEZAS
   ===================================================================== */
.tarjeta{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-md);
  box-shadow:var(--sombra-1)}
.tarjeta-p{padding:20px 22px}

.rejilla{display:grid; gap:14px; margin-bottom:26px}
.rejilla.c4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media (max-width:640px){
  /* Dos columnas en el teléfono: cuatro tarjetas apiladas son media pantalla
     de desplazamiento antes de llegar a lo que de verdad importa. */
  .rejilla.c4{grid-template-columns:1fr 1fr; gap:10px}
  .rejilla.c4>.dato:first-child{grid-column:1 / -1}
  .dato{padding:13px 15px}
  .dato .cifra{font-size:1.5rem}
  .encabezado{margin-bottom:20px}
  .saludo, .encabezado h1{font-size:1.42rem}
}
.rejilla.c3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.rejilla.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.dato{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-md);
  padding:17px 19px; box-shadow:var(--sombra-1);
  transition:box-shadow var(--paso), transform var(--paso)}
/* La cifra se marca por clase, no por estructura: en unas tarjetas el número
   va suelto y en otras va anidado junto al anillo. */
.dato .cifra{display:block; font-size:1.85rem; font-weight:600; letter-spacing:-.03em;
  line-height:1.15}
.dato .cifra .parte{color:var(--tinta-4); font-size:1.05rem; font-weight:500}
.dato .pie{display:block; font-size:.77rem; color:var(--tinta-3); margin-top:3px}
.dato .pie b{font-weight:600}
.dato .ficha{margin-top:11px}
.dato.pulsable{cursor:pointer}
.dato.pulsable:hover{box-shadow:var(--sombra-2); transform:translateY(-2px)}
.dato .flecha{float:right; color:var(--tinta-4)}

/* anillo de progreso */
.anillo{width:56px; height:56px; flex:none}
.anillo circle{fill:none; stroke-width:6; stroke-linecap:round}
.anillo .fondo{stroke:var(--linea)}
.anillo .frente{stroke:var(--azul); transition:stroke-dasharray 600ms cubic-bezier(.22,.61,.36,1)}
.anillo text{font-size:15px; font-weight:600; fill:var(--tinta); text-anchor:middle;
  font-family:inherit; font-variant-numeric:tabular-nums}

/* barra */
.barra{height:6px; background:var(--linea); border-radius:var(--r-full); overflow:hidden; min-width:74px}
.barra i{display:block; height:100%; background:var(--azul); border-radius:var(--r-full);
  transition:width 600ms cubic-bezier(.22,.61,.36,1)}

/* fichas de estado */
.ficha{display:inline-flex; align-items:center; gap:6px; font-size:.735rem; font-weight:600;
  padding:3px 10px; border-radius:var(--r-full); background:var(--gris-suave);
  color:var(--tinta-2); white-space:nowrap; border:1px solid transparent}
.ficha.v{background:var(--verde-suave); color:var(--verde)}
.ficha.a{background:var(--ambar-suave); color:var(--ambar)}
.ficha.r{background:var(--rojo-suave); color:var(--rojo)}
.ficha.n{background:var(--nube); color:var(--azul)}
.ficha::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;
  flex:none; opacity:.85}
.ficha.sin-punto::before{display:none}

.punto{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--linea-2)}
.punto.v{background:var(--verde)} .punto.a{background:var(--ambar)}
.punto.r{background:var(--rojo)}  .punto.n{background:var(--tinta-4)}

.prio{width:3px; height:20px; border-radius:var(--r-full); background:var(--linea-2); display:inline-block}
.prio.alta{background:var(--ambar)} .prio.urgente{background:var(--rojo)}

/* =====================================================================
   BOTONES Y CAMPOS
   ===================================================================== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border:0; border-radius:var(--r-sm); background:var(--azul); color:#fff;
  font-weight:600; font-size:.875rem; cursor:pointer; transition:filter var(--paso),
  transform var(--paso), box-shadow var(--paso); box-shadow:var(--sombra-1)}
.btn:hover{filter:brightness(1.09); box-shadow:var(--sombra-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:var(--tinta-4); cursor:not-allowed; filter:none; box-shadow:none}
.btn.ancho{width:100%}
.btn.fantasma{background:var(--papel); color:var(--tinta-2); border:1px solid var(--linea-2);
  box-shadow:none}
.btn.fantasma:hover{background:var(--papel-3); color:var(--tinta); filter:none}
.btn.oro{background:var(--oro); color:#241a05}
.btn.chico{padding:6px 13px; font-size:.79rem}
.btn svg{width:16px; height:16px}

label{display:block}
.campo{margin-bottom:15px}
.campo>span{display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; color:var(--tinta-3); margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],
select,textarea{
  width:100%; padding:9px 12px; border:1px solid var(--linea-2); border-radius:var(--r-xs);
  background:var(--papel); color:var(--tinta); font-size:.875rem;
  transition:border-color var(--paso), box-shadow var(--paso)}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){
  border-color:var(--tinta-4)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--azul);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--azul) 16%,transparent)}
input:disabled,select:disabled,textarea:disabled{background:var(--papel-3); opacity:.62;
  cursor:not-allowed}
textarea{resize:vertical; min-height:74px; line-height:1.6}
select{appearance:none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23818AA6' d='M6 8.4 1.8 4.2l.9-.9L6 6.6l3.3-3.3.9.9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:12px;
  padding-right:32px}

.buscador{position:relative; min-width:230px; flex:1; max-width:340px}
.buscador input{padding-left:34px}
.buscador svg{position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--tinta-3); pointer-events:none}

/* =====================================================================
   TABLAS
   ===================================================================== */
.tabla-caja{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-md);
  box-shadow:var(--sombra-1); overflow:hidden}
.tabla-desliz{overflow-x:auto}
table.t{width:100%; border-collapse:collapse; font-size:.87rem; min-width:620px}
table.t th{text-align:left; font-size:.655rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-3); font-weight:700; padding:12px 18px; white-space:nowrap;
  background:var(--papel-3); border-bottom:1px solid var(--linea)}
table.t td{padding:13px 18px; border-bottom:1px solid var(--linea); vertical-align:middle}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr{transition:background var(--paso)}
table.t tr.pulsable{cursor:pointer}
table.t tr.pulsable:hover{background:var(--papel-3)}
table.t td .sub2{display:block; font-size:.75rem; color:var(--tinta-3); margin-top:2px;
  font-weight:400; max-width:52ch}
table.t td.num{text-align:right; font-variant-numeric:tabular-nums}
table.t td.angosto{width:1%; white-space:nowrap}
/* Una lista desplegable dentro de una celda toma el ancho de su texto. Con el width:100% general, en una columna angosta
   se aplastaba a 24 px y no se leía el tipo, el estado ni a quién se asignó (Documentos, 2026-09-14). */
table.t td select.chip{width:auto; min-width:118px}
.t-titulo{display:flex; align-items:center; gap:12px; padding:15px 18px;
  border-bottom:1px solid var(--linea)}
.t-titulo h3{font-size:.98rem}
.t-titulo .der{margin-left:auto}

.in-tabla{max-width:104px; text-align:right; font-variant-numeric:tabular-nums}
.calc{display:flex; flex-direction:column; gap:3px; min-width:170px; max-width:260px}
.calc .sub2{display:block; white-space:normal; line-height:1.3}
.calc .btn{align-self:flex-start; margin-top:2px}
td.cap{min-width:130px}

/* guardado: destello discreto */
@keyframes destello{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--verde) 55%,transparent)}
  100%{box-shadow:0 0 0 7px transparent}
}
.guardado{animation:destello 850ms ease-out}

/* =====================================================================
   AVISOS, VACÍOS, PANEL LATERAL
   ===================================================================== */
.aviso{background:var(--nube); border-left:3px solid var(--azul); padding:13px 16px;
  border-radius:var(--r-xs); font-size:.855rem; color:var(--tinta-2)}
.aviso b{color:var(--tinta); font-weight:600}
.aviso.oro{background:var(--ambar-suave); border-left-color:var(--oro); color:var(--tinta-2)}
.aviso.mal{background:var(--rojo-suave); border-left-color:var(--rojo)}

.franja{position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--tinta); color:var(--papel); padding:11px 20px; border-radius:var(--r-full);
  font-size:.85rem; font-weight:500; box-shadow:var(--sombra-3); z-index:90;
  display:flex; align-items:center; gap:9px; animation:sube 260ms cubic-bezier(.22,.61,.36,1)}
.franja.mal{background:var(--rojo); color:#fff}
@keyframes sube{from{opacity:0; transform:translate(-50%,14px)} to{opacity:1; transform:translate(-50%,0)}}

.vacio{text-align:center; padding:56px 26px; color:var(--tinta-3)}
.vacio .icono{width:52px; height:52px; margin:0 auto 16px; border-radius:var(--r-full);
  background:var(--nube); color:var(--azul); display:grid; place-items:center}
.vacio .icono svg{width:24px; height:24px}
.vacio h3{font-size:1.02rem; color:var(--tinta); margin-bottom:6px}
.vacio p{max-width:44ch; margin:0 auto 18px; font-size:.875rem}

/* El sello de LYK VERY «Sé Increíble» (SELLO-LYK-VERY.md): va en la bitácora y en lo que sale con la firma de LYK VERY.
   Nunca se estira, se recolorea ni se pinta abajo de 32 px. Desde el 2026-11-03 va sin círculo, así que trae sus dos
   colores: el azul se ve en el tema claro y el negativo en el oscuro. */
.sello{display:inline-block; flex:none; vertical-align:middle}
.sello img{display:block; width:100%; height:100%; object-fit:contain}
.sello .oscuro{display:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sello .claro{display:none}
  :root:not([data-theme="light"]) .sello .oscuro{display:block} }
:root[data-theme="dark"] .sello .claro{display:none}
:root[data-theme="dark"] .sello .oscuro{display:block}
.sello-firma{display:flex; align-items:center; gap:14px; padding:12px 16px; border:1px solid var(--linea);
  border-radius:var(--r-md); background:var(--papel)}
.sello-firma b{display:block; font-size:.86rem; letter-spacing:.14em; color:var(--tinta)}
.sello-firma i{display:block; font-style:normal; font-weight:600; font-size:.82rem; color:var(--oro)}
.sello-firma span{display:block; margin-top:2px; font-size:.78rem; color:var(--tinta-2)}

/* NÚMEROS paso a paso, arriba de «Hoy» (numeros-pasos.js). Un renglón por paso: número, qué se hace, cuántos van, botón. */
.pasos{margin-bottom:22px}
.pasos-intro{padding:0 18px 4px}
.pasos-l{list-style:none; margin:0; padding:4px 0 6px}
.paso{display:grid; grid-template-columns:34px minmax(0,1fr) 170px auto; gap:14px; align-items:center;
  padding:12px 18px; border-top:1px solid var(--linea)}
.paso:first-child{border-top:0}
.paso-num{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.85rem;
  background:var(--nube); color:var(--azul)}
.paso.hecho .paso-num{background:var(--verde-suave); color:var(--verde)}
.paso-txt b{display:block; font-size:.92rem}
.paso-txt span{display:block; font-size:.8rem; color:var(--tinta-2); line-height:1.45}
.paso-cifra b{display:block; font-size:1.35rem; line-height:1.1}
.paso-cifra b .parte{display:inline; font-size:.85rem; color:var(--tinta-3); font-weight:500}
.paso-cifra span{display:block; font-size:.74rem; color:var(--tinta-3); line-height:1.3}
.paso.hecho .paso-cifra b{color:var(--verde)}
.paso-bot{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.pasos-pie{padding:10px 18px 14px; border-top:1px solid var(--linea)}
@media (max-width:760px){
  .paso{grid-template-columns:30px minmax(0,1fr); gap:8px 12px}
  .paso-cifra, .paso-bot{grid-column:2}
  .paso-bot{justify-content:flex-start}
}
.nav-t.nav-t-grupo{margin-top:12px; padding-top:4px}
.nav-b>span:not(.cuenta){min-width:0; overflow:hidden; text-overflow:ellipsis}
.nav-b .cuenta{flex:none}

/* El menú de NÚMEROS en cajones (numeros-escritorio.js): el título del cajón lo abre y lo cierra; cerrado dice cuántos
   pendientes guarda. En el teléfono el menú va en un renglón y se ven todos los botones. */
.nav-g{display:flex; flex-direction:column; gap:2px; margin-top:10px}
.nav-g-t{display:flex; align-items:center; gap:8px; width:100%; border:0; background:none; cursor:pointer; text-align:left;
  padding:6px 12px; border-radius:var(--r-xs); font-family:inherit; transition:color var(--paso)}
.nav-g-t:hover{color:rgba(255,255,255,.75)}
.nav-g-t svg{width:13px; height:13px; margin-left:auto; flex:none; transition:transform var(--paso)}
.nav-g.cerrado .nav-g-t svg{transform:rotate(-90deg)}
.nav-g-n{display:none; background:var(--oro); color:#241a05; font-size:.62rem; letter-spacing:0; font-weight:700;
  padding:0 6px; border-radius:var(--r-full); line-height:1.6}
.nav-g.cerrado .nav-g-n{display:inline-block}
@media (min-width:961px){ .nav-g.cerrado>.nav-b{display:none} }
/* En el celular el menú es una tira de lado a lado (Berí, 2026-10-20: «quiero entrar al cerebro para ver mi escritorio» desde
   Mi LYK). Cada cajón es una pastilla que se abre y se cierra con un toque, igual que en la computadora; cerrado, sus botones
   no salen en la tira. Sin esto salían los 35 botones en fila. */
@media (max-width:960px){
  .nav-g{flex-direction:row; align-items:center; gap:4px; margin-top:0}
  .nav-g-t{display:inline-flex; width:auto; flex:none; padding:7px 11px; border-radius:var(--r-full);
    background:rgba(255,255,255,.1); color:#fff; letter-spacing:.08em; white-space:nowrap}
  .nav-g-t svg{margin-left:4px}
  .nav-g.cerrado>.nav-b{display:none}
  .nav-g:not(.cerrado)>.nav-g-t{background:rgba(255,255,255,.2)}
}

/* =====================================================================
   EL ESCRITORIO DE NÚMEROS (numeros-escritorio.js, Berí 2026-10-14)
   Una mesa limpia: el mes arriba, los cajones a la izquierda y «Antes de salir» a la mano.
   ===================================================================== */
.escritorio{display:flex; flex-direction:column; gap:20px}
.esc-cab{display:flex; align-items:center; gap:18px}
.esc-cab .sub{margin-top:2px}
.esc-cab-sello{margin-left:auto; opacity:.95}
@media (max-width:640px){ .esc-cab-sello{display:none} }

/* El mes: cinco pasos en un renglón */
.esc-mes{padding:20px 22px 16px}
.esc-mes-cab{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.esc-mes-cab h2{font-size:1.18rem; margin-top:2px}
.esc-mes-cab .ficha{margin-left:auto}
.esc-pasos{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; counter-reset:paso}
.esc-paso{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  padding:13px 14px 12px; border:1px solid var(--linea); border-radius:var(--r-md); background:var(--papel-2);
  color:var(--tinta); font:inherit; cursor:pointer; transition:border-color var(--paso), box-shadow var(--paso), transform var(--paso)}
.esc-paso:hover{border-color:var(--linea-2); box-shadow:var(--sombra-2); transform:translateY(-1px)}
.esc-paso b{font-size:.86rem; font-weight:600}
.esc-paso-n{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:.74rem; font-weight:700;
  background:var(--nube); color:var(--azul); margin-bottom:6px}
.esc-paso-c{font-size:1.55rem; font-weight:600; letter-spacing:-.03em; line-height:1.15}
.esc-paso-c i{font-style:normal; font-size:.9rem; color:var(--tinta-4); font-weight:500}
.esc-paso-p{font-size:.72rem; color:var(--tinta-3); line-height:1.3}
.esc-paso.hecho .esc-paso-n{background:var(--verde-suave); color:var(--verde)}
.esc-paso.hecho .esc-paso-c{color:var(--verde)}
.esc-paso.sigue{background:var(--papel); border-color:var(--azul); box-shadow:0 0 0 3px color-mix(in srgb,var(--azul) 12%,transparent)}
.esc-paso.sigue .esc-paso-n{background:var(--azul); color:#fff}
.esc-sigue{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; padding:11px 14px;
  border-radius:var(--r-sm); background:var(--nube)}
.esc-sigue.bien{background:var(--verde-suave)}
.esc-sigue-e{font-size:.62rem; letter-spacing:.17em; text-transform:uppercase; font-weight:700; color:var(--azul)}
.esc-sigue.bien .esc-sigue-e{color:var(--verde)}
.esc-sigue-t{font-size:.88rem; color:var(--tinta)}
.esc-sigue .btn{margin-left:auto}
.esc-avance{display:flex; align-items:center; gap:12px; margin-top:12px}
.esc-avance .barra{flex:0 0 160px}
@media (max-width:640px){
  .esc-avance{flex-direction:column; align-items:stretch; gap:6px}
  .esc-avance .barra{flex:none}
  .esc-mes{padding:16px 14px 12px}
  .esc-pasos{grid-template-columns:1fr 1fr; gap:8px}
  .esc-sigue .btn{margin-left:0}
}
.esc-como{margin-top:10px; font-size:.84rem; color:var(--tinta-2)}
.esc-como summary{cursor:pointer; font-size:.8rem; color:var(--tinta-3); width:max-content}
.esc-como summary:hover{color:var(--tinta)}
.esc-como ol{margin:10px 0 8px; padding-left:20px; max-width:90ch}
.esc-como li{margin-bottom:4px}

/* La mesa: cajones a la izquierda, «Antes de salir» a la derecha */
.esc-mesa{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start}
@media (max-width:1100px){ .esc-mesa{grid-template-columns:1fr} }
.esc-cajones{columns:2 280px; column-gap:16px}
.esc-cajon{padding:16px 8px 8px; break-inside:avoid; margin-bottom:16px}
.esc-cajon-cab{display:flex; gap:12px; align-items:flex-start; padding:0 10px 10px}
.esc-cajon-cab h3{font-size:.96rem}
.esc-cajon-cab .mini{line-height:1.4; margin-top:1px}
.esc-cajon-i{width:34px; height:34px; flex:none; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--nube); color:var(--azul)}
.esc-cajon-i svg{width:17px; height:17px}
.esc-cajon ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--linea)}
.esc-cajon li{border-bottom:1px solid var(--linea)}
.esc-cajon li:last-child{border-bottom:0}
.esc-cajon-b{display:grid; grid-template-columns:18px minmax(0,1fr) 14px; align-items:center; gap:11px; width:100%;
  padding:9px 10px; border:0; background:none; font:inherit; color:var(--tinta); text-align:left; cursor:pointer;
  border-radius:var(--r-sm); transition:background var(--paso)}
.esc-cajon-b:hover{background:var(--papel-3)}
.esc-cajon-bi{color:var(--tinta-3); display:grid}
.esc-cajon-bi svg{width:16px; height:16px}
.esc-cajon-bt{min-width:0}
.esc-cajon-bt b{display:block; font-size:.86rem; font-weight:500; line-height:1.35}
.esc-estado{display:block; font-size:.74rem; color:var(--tinta-3); line-height:1.35}
.esc-estado.v{color:var(--verde)} .esc-estado.a{color:var(--ambar); font-weight:600} .esc-estado.r{color:var(--rojo); font-weight:600}
.esc-flecha{color:var(--tinta-4); display:grid}
.esc-tono-a{color:var(--ambar)}

/* Antes de salir */
.esc-lado{display:flex; flex-direction:column; gap:16px}
.esc-salir{padding:18px 18px 16px; border-top:3px solid var(--oro)}
.esc-salir-cab h3{font-size:1rem; margin-top:2px}
.esc-salir ul{list-style:none; margin:12px 0 0; padding:0}
.esc-rev{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 0;
  border-top:1px solid var(--linea); font-size:.84rem}
.esc-rev:first-child{border-top:0}
.esc-rev-m{width:20px; height:20px; border-radius:50%; border:1.5px solid var(--linea-2); display:grid; place-items:center;
  font-size:.7rem; font-weight:700}
.esc-rev.ok .esc-rev-m{background:var(--verde-suave); border-color:transparent; color:var(--verde)}
.esc-rev.ok .esc-rev-t{color:var(--tinta-2)}
.esc-rev.leyendo .esc-rev-t{color:var(--tinta-3)}
.esc-rev:not(.ok):not(.leyendo) .esc-rev-m{border-color:var(--oro)}
.esc-salir-pie{margin-top:10px; padding-top:10px; border-top:1px solid var(--linea); font-size:.8rem; color:var(--tinta-3)}
.esc-salir-ok{display:flex; gap:12px; align-items:center; margin-top:12px; padding:12px; border-radius:var(--r-sm);
  background:var(--verde-suave)}
.esc-salir-ok b{display:block; color:var(--verde); font-size:.92rem}
.esc-salir-ok span{display:block; font-size:.78rem; color:var(--tinta-2); line-height:1.4}

/* Seguimiento del sistema: cuatro cifras chicas */
.esc-sis{padding:14px 16px}
.esc-sis-l{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px}
.esc-sis-b{display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:8px 10px; border:0; border-radius:var(--r-sm);
  background:var(--papel-2); font:inherit; color:var(--tinta); text-align:left; cursor:pointer; transition:background var(--paso)}
.esc-sis-b:hover{background:var(--papel-3)}
.esc-sis-b b{font-size:1.05rem; font-weight:600}
.esc-sis-b b i{font-style:normal; color:var(--tinta-4); font-size:.8rem; font-weight:500}
.esc-sis-b span{font-size:.7rem; color:var(--tinta-3); line-height:1.3}

/* Lo guardado: Dirección y los avisos de otras áreas, en su cajón cerrado */
.esc-guardado{padding:0; overflow:hidden}
.esc-guardado>summary{display:flex; align-items:center; gap:10px; padding:13px 18px; cursor:pointer; list-style:none;
  font-size:.88rem; font-weight:600}
.esc-guardado>summary::-webkit-details-marker{display:none}
.esc-guardado>summary .esc-flecha{margin-left:auto; transition:transform var(--paso)}
.esc-guardado[open]>summary .esc-flecha{transform:rotate(90deg)}
.esc-guardado-c{padding:4px 18px 18px; display:flex; flex-direction:column; gap:14px}
.esc-guardado-c>*{margin-bottom:0!important}

/* El escritorio de Dirección (escritorios.js, Berí 2026-10-20): lo que espera de él y los cinco sistemas, de un vistazo */
.esc-tuyo{border-top-color:var(--azul)}
.esc-tuyo .esc-rev .btn{white-space:nowrap}
.esc-tuyo-det{display:block; padding:4px 0 12px}
.esc-tuyo-det>.tabla-caja{margin:0!important}
.esc-sistemas{padding:18px 18px 16px}
.esc-sis-rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:12px}
.esc-sis-t{display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:12px 14px; text-align:left; cursor:pointer;
  font:inherit; color:var(--tinta); background:var(--papel-2); border:1px solid var(--linea);
  border-top:3px solid var(--sis-color, var(--linea-2)); border-radius:var(--r-sm);
  transition:box-shadow var(--paso), transform var(--paso)}
.esc-sis-t:hover{box-shadow:var(--sombra-2); transform:translateY(-1px)}
.esc-sis-t-cab{display:flex; align-items:center; gap:8px}
.esc-sis-t-cab b{font-size:.9rem; font-weight:600}
.esc-sis-t .sis-letra{display:inline-grid; place-items:center; width:22px; height:22px; flex:none; border-radius:6px;
  background:var(--sis-suave); color:var(--sis-color); font-size:.72rem; font-weight:700}
.esc-sis-t-pie{margin-top:4px; color:var(--tinta-4)}
/* El escritorio de cada sistema (escritorios.js, sale el 27-oct): lo que sigue arriba y cómo va, con sus indicadores */
.escritorio>.esc-sigue{margin-top:0}
.esc-kpis{list-style:none; margin:8px 0 10px; padding:0}
.esc-kpi{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--linea)}
.esc-kpi:first-child{border-top:0}
.esc-kpi-t{min-width:0}
.esc-kpi-t b{display:block; font-size:.84rem; font-weight:500; line-height:1.35}
.esc-kpi-v{text-align:right; flex:none}
.esc-kpi-v b{display:block; font-size:1rem; font-weight:600}
/* «Así se trabaja aquí»: lo que se hace en una pantalla, en dos o tres pasos (Berí, 2026-10-01). */
.asi-se-trabaja{margin:10px 0 0; padding-left:20px; max-width:80ch; font-size:.85rem; color:var(--tinta-2)}
.asi-se-trabaja li{margin-bottom:3px}

/* La bitácora de NÚMEROS con el sello (numeros-pasos.js, db/196): por día, la hora, quién y qué se hizo. */
.bit-cab{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:8px}
.bit-cab h1{margin-bottom:4px}
.bit-cab .sub{max-width:70ch}
.bit-cab.chica{gap:12px; margin-bottom:14px}
.bit-cab.chica .sub2{display:block; font-size:.8rem; color:var(--tinta-3)}
.bit-l{list-style:none; margin:0; padding:0}
.bit-dia{padding:9px 16px; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--tinta-3); background:var(--papel-2); border-top:1px solid var(--linea)}
.bit-l .bit-dia:first-child{border-top:0}
.bit-fila{display:grid; grid-template-columns:46px 150px minmax(0,1fr); gap:12px; align-items:baseline;
  padding:8px 16px; border-top:1px solid var(--linea); font-size:.85rem}
.bit-hora{color:var(--tinta-3); font-size:.78rem}
.bit-quien{justify-self:start; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.72rem; font-weight:600; padding:2px 9px; border-radius:var(--r-full); background:var(--gris-suave); color:var(--tinta-2)}
.bit-quien.equipo{background:var(--verde-suave); color:var(--verde)}
.bit-quien.cerebro{background:var(--nube); color:var(--azul)}
.bit-quien.usuario{background:var(--ambar-suave); color:var(--ambar)}
.bit-que{color:var(--tinta); overflow-wrap:anywhere}
.bit-que .bit-u{font-weight:600; color:var(--tinta)}
.bit-que button.bit-u{color:var(--azul); text-decoration:none}
.bit-que button.bit-u:hover{text-decoration:underline}
.panel .bit-l{border:1px solid var(--linea); border-radius:var(--r-md); overflow:hidden}
@media (max-width:640px){
  .bit-fila{grid-template-columns:40px minmax(0,1fr); gap:4px 10px}
  .bit-que{grid-column:1 / -1}
}

/* panel lateral deslizante */
.telon{position:fixed; inset:0; background:rgba(6,11,31,.5); z-index:70;
  animation:aparece 180ms ease-out; backdrop-filter:blur(2px)}
@keyframes aparece{from{opacity:0} to{opacity:1}}
.panel{position:fixed; top:0; right:0; bottom:0; width:min(560px,100%); background:var(--papel);
  z-index:71; box-shadow:var(--sombra-3); display:flex; flex-direction:column;
  animation:entra 260ms cubic-bezier(.22,.61,.36,1)}
@keyframes entra{from{transform:translateX(26px); opacity:.4} to{transform:none; opacity:1}}
.panel-cab{display:flex; align-items:flex-start; gap:14px; padding:22px 26px;
  border-bottom:1px solid var(--linea)}
.panel-cab h2{font-size:1.2rem}
.panel-x{margin-left:auto; background:none; border:0; color:var(--tinta-3); cursor:pointer;
  padding:5px; border-radius:var(--r-xs); line-height:0}
.panel-x:hover{background:var(--papel-3); color:var(--tinta)}
.panel-cuerpo{padding:24px 26px; overflow-y:auto; flex:1}
.panel-pie{padding:16px 26px; border-top:1px solid var(--linea); display:flex; gap:10px;
  justify-content:flex-end; background:var(--papel-2)}
.panel.ancho{width:min(1040px,100%)}

/* Ventana emergente del código QR para volver a vincular el WhatsApp de BRISSA (db/214). Va encima de los paneles.
   El cuadro del código es blanco en los dos temas: el celular lo lee mejor así. */
.qr-telon{position:fixed; inset:0; background:rgba(6,11,31,.55); z-index:80; display:flex; align-items:center;
  justify-content:center; padding:16px; animation:aparece 180ms ease-out; backdrop-filter:blur(2px)}
.qr-ventana{position:relative; background:var(--papel); color:var(--tinta); border-radius:var(--r-lg);
  box-shadow:var(--sombra-3); width:min(720px,100%); max-height:calc(100vh - 32px); overflow:auto; padding:24px 26px}
.qr-x{position:absolute; top:14px; right:14px}
.qr-titulo{font-size:1.25rem; margin:0 36px 6px 0; color:var(--rojo)}
.qr-titulo.listo{color:var(--verde)}
.qr-cuerpo{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; margin-top:16px}
.qr-codigo{flex:none; width:300px; max-width:100%; background:#fff; color:#222; padding:8px; border-radius:var(--r-md)}
.qr-codigo svg{display:block; width:100%; height:auto}
.qr-pasos{flex:1; min-width:240px}
.qr-pasos ol{margin:8px 0 10px; padding-left:22px; line-height:1.75; font-size:1rem}
.qr-pie{display:flex; justify-content:flex-end; margin-top:16px}
.enlace{background:none; border:0; padding:0; font:inherit; color:var(--azul); cursor:pointer; text-decoration:underline}

/* Hoja del mes (db/168): el mes en palabras (cada número abre sus facturas) y un renglón por factura con su porqué */
.hoja-bloques{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; margin-bottom:16px}
.hoja-bloque{border:1px solid var(--linea); border-radius:var(--r-md); padding:12px 14px; background:var(--papel)}
.hoja-bloque h3{font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:6px}
.hoja-linea{display:flex; justify-content:space-between; align-items:baseline; gap:14px; width:100%; background:none;
  border:0; padding:6px 6px; font:inherit; font-size:.87rem; color:var(--tinta-2); text-align:left;
  border-radius:var(--r-xs); cursor:pointer}
.hoja-linea .num{font-variant-numeric:tabular-nums; white-space:nowrap}
.hoja-linea:hover:not(:disabled){background:var(--papel-3); color:var(--azul)}
.hoja-linea:disabled{cursor:default; color:var(--tinta-2)}
.hoja-linea.total{border-top:1px solid var(--linea); margin-top:4px; padding-top:9px; color:var(--tinta); font-weight:600}
.hoja-linea.menor{font-size:.8rem; color:var(--tinta-3)}
.hoja-nota{font-size:.78rem; color:var(--tinta-3); margin:6px 6px 0}
.hoja-avisos{margin:0 0 12px; padding-left:20px; font-size:.82rem; color:var(--tinta-2)}
.hoja-avisos li{margin-bottom:4px}
table.t.hoja-t td{padding:10px 12px; vertical-align:top}
table.t.hoja-t td .sub2{max-width:78ch}
table.t.hoja-t td .hoja-porque{color:var(--tinta-2)}
table.t.hoja-t td .hoja-revisar{color:var(--ambar); font-weight:600}
.hoja-editor td{background:var(--papel-2)}
.hoja-editor-campos{display:grid; grid-template-columns:2fr 1fr 2fr; gap:10px; margin-top:8px}
.hoja-editor-botones{display:flex; gap:8px; justify-content:flex-end}
@media (max-width:700px){.hoja-editor-campos{grid-template-columns:1fr}}
.hoja-todas{display:flex; gap:8px; align-items:flex-start; margin:10px 0 4px; font-size:13px; color:var(--tinta-2)}
.hoja-todas input{margin-top:3px}
.hoja-mensaje{width:100%; box-sizing:border-box; margin:10px 0; padding:12px; font:inherit; font-size:14px; line-height:1.5;
  border:1px solid var(--linea, #ddd); border-radius:8px; background:var(--papel, #fff); color:inherit; resize:vertical}

/* pestañas */
.pestanas{display:flex; gap:2px; border-bottom:1px solid var(--linea); margin-bottom:22px;
  overflow-x:auto}
.pestana{background:none; border:0; border-bottom:2px solid transparent; padding:10px 15px;
  font-size:.87rem; font-weight:600; color:var(--tinta-3); cursor:pointer; margin-bottom:-1px;
  white-space:nowrap; transition:color var(--paso), border-color var(--paso)}
.pestana:hover{color:var(--tinta)}
.pestana[aria-selected="true"]{color:var(--azul); border-bottom-color:var(--azul)}
.pestana .cuenta{margin-left:6px; font-size:.72rem; color:var(--tinta-4)}

/* línea de tiempo de estados */
.ruta{display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 4px}
.ruta-p{font-size:.72rem; padding:4px 10px; border-radius:var(--r-full);
  border:1px solid var(--linea-2); color:var(--tinta-3); background:var(--papel);
  cursor:pointer; transition:all var(--paso)}
.ruta-p:hover:not(:disabled){border-color:var(--azul); color:var(--azul)}
.ruta-p[aria-current="true"]{background:var(--azul); border-color:var(--azul); color:#fff;
  font-weight:600}
.ruta-p:disabled{opacity:.45; cursor:not-allowed}

/* Checklist de expediente */
.doc{border:1px solid var(--linea); border-left:3px solid var(--linea-2);
  border-radius:var(--r-xs); padding:10px 12px; margin-bottom:8px; background:var(--papel)}
.doc.bien{border-left-color:var(--verde)}
.doc.mal{border-left-color:var(--rojo); background:var(--rojo-suave)}
.doc-t{margin-bottom:7px; font-size:.87rem}
.doc-c{display:grid; grid-template-columns:1.1fr .9fr 1.4fr; gap:7px}
@media (max-width:520px){ .doc-c{grid-template-columns:1fr} }

/* Matriz de riesgos: impacto contra probabilidad */
table.matriz{border-collapse:separate; border-spacing:3px}
table.matriz .eje{font-size:.7rem; color:var(--tinta-3); font-weight:700; width:22px;
  text-align:center; padding:0}
table.matriz td.mz{width:38px; height:34px; text-align:center; border-radius:var(--r-xs);
  font-size:.9rem; color:var(--tinta)}
td.mz-bajo{background:var(--gris-suave)}
td.mz-medio{background:var(--ambar-suave)}
td.mz-alto{background:color-mix(in srgb,var(--rojo) 22%,transparent)}
td.mz-critico{background:color-mix(in srgb,var(--rojo) 40%,transparent)}
td.mz b{color:var(--tinta); font-weight:700}

.lista-nada{padding:34px; text-align:center; color:var(--tinta-3); font-size:.875rem}

/* Asignar y escalar a Dirección, en el panel del caso (db/47, 2026-09-11) */
.aviso-escalado{margin-bottom:18px}
.aviso-escalado .campo{margin:12px 0 10px}
.aviso-escalado textarea{min-height:60px}
.escalar{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:-4px 0 18px}
.escalar-form{flex-basis:100%; margin-top:4px; padding:14px 14px 12px; border:1px solid var(--linea);
  border-radius:var(--r-sm); background:var(--papel-2)}
.escalar-form[hidden]{display:none}
.escalar-form .campo{margin-bottom:12px}
.escalar-botones{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}

/* ---- Atención a Usuarios: el chat de BRISSA dentro de LYK Cerebro ----
   Rediseño del 2026-10-22 (Berí: «los espacios son pequeños… que sea mejor que WhatsApp», con los principios de Will Guidara
   en Hospitalidad Irracional): el chat ocupa la pantalla, cada persona tiene su cara y su ficha a la vista, y las burbujas
   se leen como una plática. */
/* Atención usa toda la pantalla (Berí, 2026-10-22: «maximiza el uso del espacio del chat»): sin el tope de 1180 px de las
   demás vistas, con márgenes cortos, y el título, la regla y el buscador en un solo renglón. */
.lienzo.lienzo-chat{max-width:none; padding:12px 18px 12px}
.chat-encabezado{align-items:center; gap:10px 14px; margin-bottom:10px; flex-wrap:nowrap}
.chat-encabezado h1{font-size:1.3rem; margin:0; white-space:nowrap}
.chat-encabezado .chat-regla{flex:1 1 auto; min-width:0; margin:0}
.chat-encabezado .encabezado-d{flex:none; margin-left:0}
.chat-encabezado .buscador{min-width:220px; max-width:300px}
@media (max-width:1100px){ .chat-encabezado{flex-wrap:wrap} .chat-encabezado .chat-regla{order:3; flex-basis:100%} .chat-encabezado .encabezado-d{margin-left:auto} }
.chat{display:grid; grid-template-columns:minmax(300px,360px) minmax(0,1fr); border:1px solid var(--linea); border-radius:var(--r-lg);
  background:var(--papel); height:calc(100vh - 82px); min-height:540px; overflow:hidden; box-shadow:var(--sombra-1)}
@media (max-width:1100px){ .chat{height:calc(100vh - 124px)} }
.chat.con-ficha{grid-template-columns:minmax(300px,340px) minmax(0,1fr) 290px}
.chat-lista{border-right:1px solid var(--linea); display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--papel)}
/* Los filtros en un solo renglón que se desliza: antes se partían en tres y se comían la lista. */
.chat-chips{display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid var(--linea); flex-wrap:wrap}
.chat-lista > .chat-chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; flex:none;
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.chat-lista > .chat-chips::-webkit-scrollbar{display:none}
.chat-lista > .chat-chips .chip{flex:none; white-space:nowrap}
.chip{border:1px solid var(--linea-2); background:var(--papel); color:var(--tinta-2); border-radius:999px;
  padding:4px 11px; font-size:.75rem; font-weight:500; cursor:pointer; font-family:inherit}
.chip[aria-current="true"]{background:var(--marino); color:#fff; border-color:var(--marino)}
.chat-items{overflow:auto; flex:1 1 auto; min-height:0}
.chat-item{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1px 10px; padding:10px 14px 10px 12px;
  cursor:pointer; position:relative; border-left:3px solid transparent; transition:background var(--paso)}
.chat-item + .chat-item::before{content:""; position:absolute; top:0; left:62px; right:0; border-top:1px solid var(--linea)}
.chat-item > .avatar{grid-row:1 / span 3; align-self:start; margin-top:2px}
.chat-item:hover{background:var(--papel-2)}
.chat-item[aria-current="true"]{background:var(--nube); border-left-color:var(--marino)}
.chat-item b{font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.chat-item .snip{grid-column:2 / -1; font-size:.8rem; color:var(--tinta-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chat-item .ci-reg{grid-column:2 / -1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem}
.chat-item .hora{font-size:.7rem; color:var(--tinta-4); white-space:nowrap; align-self:center}
/* Lo último lo dijo la persona: su hora se enciende y su texto se lee, como un «no leído» que no se olvida. */
.chat-item.le-toca .hora{color:var(--marino); font-weight:600}
.chat-item.le-toca .snip{color:var(--tinta-2)}
.chat-item.le-toca > b::after{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--oro);
  margin-left:7px; vertical-align:middle}

/* La cara de cada persona: sus iniciales, siempre en su mismo color. */
.avatar{--tono:220; width:38px; height:38px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:600; letter-spacing:.02em; color:hsl(var(--tono) 55% 30%); background:hsl(var(--tono) 70% 92%)}
.avatar.grupo{border-radius:12px}
.avatar.md{width:40px; height:40px}
.avatar.lg{width:56px; height:56px; font-size:1.1rem}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .avatar{color:hsl(var(--tono) 70% 82%); background:hsl(var(--tono) 35% 22%)} }
:root[data-theme="dark"] .avatar{color:hsl(var(--tono) 70% 82%); background:hsl(var(--tono) 35% 22%)}

.chat-panel{display:flex; flex-direction:column; min-width:0; min-height:0}
.chat-cab{display:flex; align-items:center; gap:10px 12px; padding:10px 16px; border-bottom:1px solid var(--linea); flex-wrap:wrap; background:var(--papel)}
.chat-cab h2{font-size:1rem; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chat-cab h2 + .mini{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chat-acciones{margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.chat-ficha-b[aria-pressed="true"]{background:var(--nube); border-color:var(--marino); color:var(--marino)}
[data-prioridad][aria-pressed="true"]{background:var(--rojo-suave); border-color:var(--rojo); color:var(--rojo)}
/* Los avisos sobre el hilo (socios, sugerencia del padrón) no le quitan el lugar al chat (Berí, 2026-10-21). */
.chat-nota{flex:none; max-height:8em; overflow:auto}
.chat-nota summary{cursor:pointer}
.chat-hilo{flex:1 1 auto; min-height:0; overflow:auto; padding:18px clamp(16px,4%,48px); display:flex; flex-direction:column; gap:2px;
  background:var(--papel-2)}
.burbuja{max-width:min(74%,640px); padding:7px 11px 6px; border-radius:16px; font-size:.9rem; line-height:1.45;
  word-break:break-word; box-shadow:var(--sombra-1); margin-top:8px; display:flow-root}
.burbuja .txt{white-space:pre-wrap}
/* Lo que mandan, a la vista: la foto completa, el PDF con su primera hoja y el video que se reproduce ahí. */
.media-foto{display:block; padding:0; border:0; background:none; cursor:zoom-in; margin:-3px -7px 2px; border-radius:12px; overflow:hidden; max-width:calc(100% + 14px)}
.media-foto img{display:block; max-width:100%; width:auto; max-height:min(420px,50vh); min-width:120px; object-fit:contain; background:var(--papel-3)}
.media-video{display:block; max-width:100%; max-height:min(420px,50vh); border-radius:12px; background:#000}
.media-doc{width:300px; max-width:100%; border:1px solid var(--linea); border-radius:12px; overflow:hidden; background:var(--papel); margin:-1px -5px 2px}
.doc-hoja{display:block; position:relative; width:100%; padding:0; border:0; border-bottom:1px solid var(--linea); background:#fff; cursor:zoom-in;
  height:200px; overflow:hidden}
.doc-hoja img{display:block; width:100%; height:auto}
.doc-hoja::after{content:""; position:absolute; inset:auto 0 0 0; height:40px; background:linear-gradient(transparent,rgba(9,17,54,.10))}
.doc-sin{display:flex; height:100%; align-items:center; justify-content:center; color:var(--tinta-3); font-size:.8rem; background:var(--papel-2)}
.doc-pags{position:absolute; right:8px; bottom:8px; z-index:1; background:rgba(9,17,54,.72); color:#fff; font-size:.68rem; padding:2px 8px; border-radius:999px}
.doc-pie{display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:.8rem; min-width:0; white-space:nowrap}
.doc-ext{flex:none; font-size:.62rem; font-weight:700; letter-spacing:.04em; color:#fff; background:var(--rojo); border-radius:4px; padding:2px 5px}
.media-doc.otro .doc-ext{background:var(--marino)}
.doc-nombre{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-weight:500; color:var(--tinta)}
.doc-abrir{flex:none; font-size:.75rem; font-weight:600}

/* El visor: la foto o el PDF completo en grande, encima de la pantalla. */
.visor{position:fixed; inset:0; z-index:90; background:rgba(6,11,31,.88); display:flex; flex-direction:column; animation:aparece 160ms ease-out}
.visor-barra{display:flex; align-items:center; gap:12px; padding:10px 16px; color:#fff; flex:none}
.visor-nombre{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.visor-cuenta{font-size:.8rem; opacity:.75; white-space:nowrap}
.visor-abrir{margin-left:auto; color:#fff !important; border-color:rgba(255,255,255,.4) !important; background:transparent !important}
.visor-x{border:0; background:rgba(255,255,255,.12); color:#fff; width:36px; height:36px; border-radius:50%; font-size:1.4rem; line-height:1; cursor:pointer}
.visor-cuerpo{flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column; align-items:center; gap:14px; padding:8px 16px 28px}
.visor-foto{max-width:100%; max-height:100%; margin:auto; object-fit:contain; border-radius:6px}
.visor-hoja{display:block; max-width:100%; height:auto; background:#fff; box-shadow:0 6px 30px rgba(0,0,0,.4); border-radius:2px}
.visor-espera{color:#fff; opacity:.8; margin:auto; font-size:.9rem}
.visor-flecha{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:0;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.9rem; line-height:1; cursor:pointer}
.visor-flecha:hover, .visor-x:hover{background:rgba(255,255,255,.26)}
.visor-flecha.ant{left:14px}
.visor-flecha.sig{right:14px}
.visor-flecha[hidden]{display:none}
.burbuja.sigue{margin-top:0}
.burbuja.usuario{align-self:flex-start; background:var(--papel); border-bottom-left-radius:5px}
.burbuja.usuario.sigue{border-top-left-radius:5px}
.burbuja.mio{align-self:flex-end; background:var(--nube); border-bottom-right-radius:5px}
.burbuja.mio.sigue{border-top-right-radius:5px}
.burbuja.sistema{align-self:center; background:transparent; color:var(--tinta-3); font-size:.75rem; box-shadow:none}
/* La hora se acomoda al final del renglón, como en WhatsApp, en lugar de ocupar uno entero. */
.burbuja .meta{float:right; font-size:.66rem; color:var(--tinta-3); margin:6px 0 -2px 12px; line-height:1.2; white-space:nowrap}
.burbuja .meta:has(.ficha), .burbuja .meta:has(a){white-space:normal}
.burbuja.pendiente{opacity:.72}
.burbuja.error{border:1px solid var(--rojo)}
.chat-dia{align-self:center; font-size:.68rem; color:var(--tinta-3); background:var(--papel); border:1px solid var(--linea);
  border-radius:999px; padding:2px 10px; margin:14px 0 4px}
.chat-redactar{display:flex; gap:6px; padding:10px 14px 4px; align-items:flex-end; flex:none; background:var(--papel); border-top:1px solid var(--linea)}
.chat-redactar textarea{flex:1; resize:none; min-height:44px; max-height:180px; padding:11px 14px; border:1px solid var(--linea-2);
  border-radius:22px; font:inherit; font-size:.9rem; background:var(--papel-2); color:var(--tinta); transition:border-color var(--paso), background var(--paso)}
.chat-redactar textarea:focus{outline:none; border-color:var(--marino); background:var(--papel)}
.chat-redactar textarea[readonly]{color:var(--tinta-3)}
.chat-redactar .chat-clip{padding:10px 11px; flex:none; border-radius:50%}
.chat-redactar #btn-enviar{border-radius:22px; min-height:44px; padding:0 20px}
.chat-panel > .mini:last-child{padding:2px 16px 8px !important; font-size:.7rem}
/* El primer toque: el saludo con su nombre, a un clic. */
.chat-toques{display:flex; align-items:center; gap:10px; padding:8px 14px 0; background:var(--papel); border-top:1px solid var(--linea); flex:none; flex-wrap:wrap}
.chat-toques + .chat-redactar{border-top:0}
.chip.toque{border-color:var(--oro); color:var(--tinta); background:color-mix(in srgb,var(--oro) 10%,var(--papel))}
.chip.toque::before{content:"👋 "}
/* El PDF o la foto que va a salir con la respuesta (Berí, 2026-09-11) */
.chat-adjunto{display:flex; align-items:center; gap:8px; padding:8px 14px; border-top:1px solid var(--linea); background:var(--papel-2);
  font-size:.82rem; flex:none; min-width:0}
.chat-adjunto b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chat-adjunto .mini{white-space:nowrap}
.chat-adjunto + .chat-redactar{border-top:0}
.chat-quitar{margin-left:auto; border:0; background:transparent; color:var(--tinta-3); font:inherit; font-size:1.2rem; line-height:1;
  padding:2px 8px; border-radius:6px; cursor:pointer}
.chat-quitar:hover{background:var(--papel-3); color:var(--tinta)}

/* La regla de contestar desde aquí, en una franja con su medidor del mes. */
.chat-regla{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; padding:7px 14px; border-radius:var(--r-md);
  background:var(--nube); font-size:.8rem; color:var(--tinta-2); border-left:3px solid var(--marino)}
.chat-regla b{color:var(--tinta)}
.chat-encabezado .chat-regla{flex-wrap:nowrap; white-space:nowrap}
.chat-encabezado .chat-regla-va{min-width:0; overflow:hidden; text-overflow:ellipsis}
.chat-regla-med{width:90px; height:6px; border-radius:999px; background:color-mix(in srgb,var(--marino) 15%,transparent); overflow:hidden; flex:none}
.chat-regla-med i{display:block; height:100%; background:var(--marino); border-radius:999px}

/* La ficha de quién escribe: quién es, qué tiene abierto y lo que hay que saber, antes de contestar. */
.chat-ficha{border-left:1px solid var(--linea); overflow:auto; min-height:0; background:var(--papel); padding:18px 16px 24px}
.cf-cab{display:flex; gap:12px; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--linea)}
.cf-cab .ficha{margin:4px 4px 0 0}
.cf-nombre{display:block; font-size:.98rem; line-height:1.3; overflow-wrap:anywhere}
.cf-sec{padding:14px 0; border-bottom:1px solid var(--linea)}
.cf-sec:last-child{border-bottom:0}
.cf-t{font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--tinta-3); margin-bottom:8px}
.cf-sec dl{margin:0; display:grid; gap:7px}
.cf-dato dt{font-size:.7rem; color:var(--tinta-3)}
.cf-dato dd{margin:0; font-size:.84rem; color:var(--tinta); overflow-wrap:anywhere}
.cf-nota{font-size:.85rem; background:color-mix(in srgb,var(--oro) 12%,var(--papel)); border-radius:var(--r-sm); padding:10px 12px; white-space:pre-wrap}
.cf-nuevo{background:color-mix(in srgb,var(--oro) 8%,transparent); margin:12px -16px 0; padding:14px 16px; border-bottom:0}
.cf-caso{display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left; border:1px solid var(--linea); background:var(--papel);
  border-radius:var(--r-sm); padding:8px 10px; margin-bottom:6px; cursor:pointer; font:inherit; font-size:.82rem; color:var(--tinta)}
.cf-caso:hover{border-color:var(--marino)}
.cf-caso.cerrado{opacity:.7}
.cf-enlace{border:0; background:none; padding:0; color:var(--azul); text-decoration:underline; cursor:pointer; font:inherit}
@media (max-width:1280px){
  .chat.con-ficha{grid-template-columns:minmax(280px,320px) minmax(0,1fr) 260px}
}
@media (max-width:1100px){
  .chat.con-ficha{grid-template-columns:minmax(260px,300px) minmax(0,1fr)}
  .chat.con-ficha .chat-ficha{display:none}
}
.chat-vacio{margin:auto; text-align:center; color:var(--tinta-3); padding:30px; max-width:42ch}
@media (max-width:900px){
  .chat, .chat.con-ficha{grid-template-columns:1fr; height:auto}
  .chat-lista{border-right:0; border-bottom:1px solid var(--linea); max-height:42vh}
  .chat-hilo{min-height:50vh}
}

/* =====================================================================
   MERCADO — el mapa, el precio de la tonelada y la temporada
   Berí, 2026-09-12: «pon el mapa en mi dashboard». Dos series como máximo
   por gráfica: la principal y la de apoyo. Los dos tonos están medidos
   contra el papel claro y el oscuro, y se distinguen con daltonismo.
   ===================================================================== */
:root{ --serie-1:#2F4BE0; --serie-2:#A8761C; --serie-tenue:#C9D2F6; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --serie-1:#6A82FA; --serie-2:#B5822A; --serie-tenue:#27305A;
}}
:root[data-theme="dark"]{ --serie-1:#6A82FA; --serie-2:#B5822A; --serie-tenue:#27305A; }

.merc-filtros{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 16px}
.merc-filtros .merc-t{font-size:.655rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-3); font-weight:700; margin-right:4px}
.merc-filtros .merc-t:not(:first-child){margin-left:14px}

.merc-mapa{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:0}
.merc-mapa > figure{margin:0; padding:16px 18px 18px; min-width:0}
.merc-mapa > .merc-lado{border-left:1px solid var(--linea); min-width:0}
@media (max-width:860px){
  .merc-mapa{grid-template-columns:1fr}
  .merc-mapa > .merc-lado{border-left:0; border-top:1px solid var(--linea)}
}
.merc-mapa svg{width:100%; height:auto; display:block}
.merc-mapa figcaption{font-size:.75rem; color:var(--tinta-3); margin-top:10px; line-height:1.5}

.merc-zona{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px;
  padding:11px 18px; border-bottom:1px solid var(--linea); align-items:baseline}
.merc-zona:last-child{border-bottom:0}
.merc-zona b{font-size:.88rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* El número que amarra la lista con la burbuja del mapa: los nombres se enciman, el número no. */
.merc-zona .merc-n{display:inline-block; min-width:17px; margin-right:7px; font-size:.72rem;
  font-weight:700; color:var(--serie-1); font-variant-numeric:tabular-nums}
.merc-zona .cifra{font-size:.88rem; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.merc-zona .mini{grid-column:1/-1}
.merc-zona .riel-z{grid-column:1/-1; height:4px; border-radius:999px; background:var(--serie-tenue); overflow:hidden}
.merc-zona .riel-z i{display:block; height:100%; background:var(--serie-1)}

.merc-figura{padding:16px 18px 18px}
.merc-figura svg{width:100%; height:auto; display:block; overflow:visible}
.merc-leyenda{display:flex; flex-wrap:wrap; gap:14px; font-size:.75rem; color:var(--tinta-2); margin-bottom:10px}
.merc-leyenda span{display:inline-flex; align-items:center; gap:6px}
.merc-leyenda i{width:14px; height:3px; border-radius:2px; display:inline-block}
.merc-lectura{padding:0 18px 18px; font-size:.85rem; color:var(--tinta-2); line-height:1.6; max-width:78ch}
.merc-lectura b{color:var(--tinta)}

/* ---------- Galería de Finanzas (db/52, db/53). Los colores de las columnas son los de la hoja de Berí. ---------- */
:root{ --g-ingreso:#3D8B5A; --g-impuesto:#B8567A; --g-costo:#D07A2E; --g-real:#1E5AA8; --g-ganancia:#D9A21B;
  --g-comp:#9A7B1E; --g-operacion:#1596A8; --g-gastos:#E0801E; --g-deficit:#B3261E; }
.gal-corte-cab{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:-6px 0 14px}
.gal-corte-cab h2{font-size:1.15rem}
/* El corte en curso va arriba, con su marca; el que ya terminó queda debajo, separado por aire (Berí, 2026-09-14). */
.gal-corte-cab.gal-en-curso h2 .ficha{vertical-align:middle; margin-right:4px}
.gal-corte-cab.gal-en-curso .btn{margin-left:auto}
.gal-frase + .gal-corte-cab{margin-top:26px}
.gal-seis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:14px}
.gal-seis-c{border-left:4px solid var(--linea-2); padding:14px 16px}
.gal-seis-c .gal-seis-t{display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--tinta-3); margin-bottom:6px}
.gal-seis-c .cifra{font-size:1.45rem}
.gal-seis-c .pie{margin-top:5px}
.gal-seis-c.ingreso{border-color:var(--g-ingreso)} .gal-seis-c.impuesto{border-color:var(--g-impuesto)}
.gal-seis-c.costo{border-color:var(--g-costo)} .gal-seis-c.real{border-color:var(--g-real)}
.gal-seis-c.comp{border-color:var(--g-comp)} .gal-seis-c.operacion{border-color:var(--g-operacion)}
.gal-seis-c.deficit{border-color:var(--g-deficit)} .gal-seis-c.deficit .cifra{color:var(--g-deficit)}
.gal-seis-c.operacion .cifra{color:var(--verde)}
.gal-frase{font-size:1.02rem; line-height:1.7; color:var(--tinta-2); max-width:86ch; margin:0 0 22px;
  padding:16px 20px; background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-md); box-shadow:var(--sombra-1)}
.gal-frase b{color:var(--tinta)}
.gal-rojo{color:var(--rojo)} .gal-verde{color:var(--verde)} .gal-ambar{color:var(--ambar)}
.gal-cero{color:var(--tinta-4)}
.gal-barras{display:flex; gap:6px; align-items:flex-end; flex-wrap:wrap; margin:0 0 22px; padding:14px 16px 10px;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-md); box-shadow:var(--sombra-1)}
.gal-barra{background:none; border:0; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; width:44px; font-family:inherit}
.gal-barra-c{display:flex; align-items:flex-end; gap:2px; height:64px; width:100%; border-bottom:1px solid var(--linea-2)}
.gal-barra-c i{flex:1; display:block; border-radius:3px 3px 0 0; min-height:2px; opacity:.55; transition:opacity var(--paso)}
.gal-barra-c i.in{background:var(--g-ingreso)} .gal-barra-c i.out{background:var(--g-gastos)}
.gal-barra:hover .gal-barra-c i, .gal-barra.activa .gal-barra-c i{opacity:1}
.gal-barra-e{font-size:.64rem; color:var(--tinta-3); white-space:nowrap}
.gal-barra.activa .gal-barra-e{color:var(--azul); font-weight:700}
.gal-leyenda{flex-basis:100%; display:flex; gap:16px; font-size:.72rem; color:var(--tinta-3); margin-top:4px}
.gal-leyenda span{display:inline-flex; align-items:center; gap:6px}
.gal-leyenda i{width:12px; height:8px; border-radius:2px; display:inline-block}
.gal-leyenda i.in{background:var(--g-ingreso)} .gal-leyenda i.out{background:var(--g-gastos)}
.gal-hoja-caja{margin-bottom:22px}
table.gal-hoja th.c-ingreso{color:var(--g-ingreso)} table.gal-hoja th.c-impuesto{color:var(--g-impuesto)}
table.gal-hoja th.c-costo{color:var(--g-costo)} table.gal-hoja th.c-real{color:var(--g-real)}
table.gal-hoja th.c-ganancia{color:var(--g-ganancia)} table.gal-hoja th.c-comp{color:var(--g-comp)}
table.gal-hoja th.c-operacion{color:var(--g-operacion)} table.gal-hoja th.c-gastos{color:var(--g-gastos)}
table.gal-hoja td.c-real{font-weight:600; color:var(--g-real)}
table.gal-hoja tr.gal-fila{cursor:pointer}
table.gal-hoja tr.gal-fila:hover td{background:var(--papel-2)}
table.gal-hoja tr.gal-fila.activa td{background:var(--nube)}
table.gal-hoja tr.gal-fila.vacia td{color:var(--tinta-4)}
table.gal-hoja tfoot td{background:var(--papel-3); border-top:2px solid var(--linea-2)}
table.gal-hoja td.gal-corte{white-space:nowrap}
.gal-detalle{margin-bottom:22px}
.gal-cats{padding:8px 18px 16px}
.gal-cat{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--linea)}
.gal-cat:last-child{border-bottom:0}
.gal-cat-l b{display:block; font-size:.86rem}
.gal-cat-n{font-size:.9rem; font-weight:600; white-space:nowrap}
.gal-riel{height:8px; background:var(--papel-3); border-radius:4px; overflow:hidden}
.gal-riel i{display:block; height:100%; background:var(--g-gastos); border-radius:4px}
.gal-riel.costo i{background:var(--g-costo)} .gal-riel.impuesto i{background:var(--g-impuesto)}
.gal-riel.ingreso i{background:var(--g-ingreso)} .gal-riel.comp i{background:var(--g-comp)} .gal-riel.operacion i{background:var(--g-operacion)}
.gal-riel.distribucion i{background:var(--g-comp)} .gal-riel.inversion i{background:var(--g-real)}
.gal-riel.deuda i{background:var(--tinta-3)} .gal-riel.pendiente i{background:var(--tinta-4)}
.gal-orden{padding:16px 18px; margin-bottom:12px}
.gal-orden-cab{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.gal-orden-cab .sub2{display:block}
.gal-orden-d{margin-left:auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.gal-orden-d .cifra{font-size:1.3rem; font-weight:600}
.gal-orden-nota{margin:8px 0 0}
table.gal-lineas{min-width:0; margin-top:10px}
table.gal-lineas td{padding:7px 0; border-bottom:1px solid var(--linea); font-size:.84rem}
.gal-orden-botones{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.gal-orden-intro{margin-bottom:14px}
.gal-cerradas{margin-top:12px} .gal-cerradas summary{cursor:pointer; padding:8px 0}
.in-gal-cat{max-width:280px}
.gal-orden.activa{border-color:var(--azul); box-shadow:var(--sombra-2)}

/* ---- Galería › Todas tus empresas (db/384). Los colores son los de la hoja; «te queda» es el azul del ingreso real. ---- */
.gem-grupo{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:28px; margin-bottom:22px; align-items:center}
.gem-casc{display:flex; flex-direction:column; gap:9px}
.gem-casc-f{display:grid; grid-template-columns:132px minmax(0,1fr) 118px; gap:12px; align-items:center}
.gem-casc-l{font-size:.8rem; color:var(--tinta-2)}
.gem-casc-f.total .gem-casc-l{font-weight:700; color:var(--tinta)}
.gem-casc-f b{text-align:right; font-size:.92rem}
.gem-casc-f.total b{font-size:1.02rem}
.gem-casc-r{position:relative; height:20px; background:var(--papel-3); border-radius:5px; overflow:hidden}
.gem-casc-r i{position:absolute; top:0; bottom:0; border-radius:5px; background:var(--g-gastos)}
.gem-casc-r i.ingreso{background:var(--g-ingreso)} .gem-casc-r i.impuesto{background:var(--g-impuesto)}
.gem-casc-r i.costo{background:var(--g-costo)} .gem-casc-r i.real{background:var(--g-real)}
.gem-casc-r i.queda{background:var(--g-real); box-shadow:inset 0 0 0 2px var(--g-ganancia)} .gem-casc-r i.deficit{background:var(--g-deficit)}
.gem-casc-f:not(.total) .gem-casc-r i{opacity:.8}
.gem-reparto-t{display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--tinta-3); margin-bottom:10px}
.gem-reparto-l{display:flex; flex-direction:column; gap:8px; margin-top:12px; font-size:.84rem; color:var(--tinta-2)}
.gem-reparto-l i, .gem-cortes-l i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.gem-100{margin:12px 0 4px}
.gem-100-r{display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--papel-3); margin-bottom:6px}
.gem-100-r.grande{height:22px; border-radius:7px}
.gem-100-r i{display:block; height:100%}
.gem-100-r i.impuesto, .gem-reparto-l i.impuesto{background:var(--g-impuesto)} .gem-100-r i.costo{background:var(--g-costo)}
.gem-100-r i.gastos{background:var(--g-gastos)} .gem-100-r i.queda{background:var(--g-real)}
.gem-100-r i.comp, .gem-reparto-l i.comp{background:var(--g-comp)} .gem-100-r i.deuda, .gem-reparto-l i.deuda{background:var(--tinta-3)}
.gem-100-r i.operacion, .gem-reparto-l i.operacion{background:var(--g-operacion)}
.gem-rejilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); gap:16px; margin-bottom:22px}
.gem-t{padding:18px 20px; min-width:0; display:flex; flex-direction:column; gap:10px; border-top:4px solid var(--linea-2)}
.gem-t.lista{border-top-color:var(--g-ingreso)} .gem-t.parcial{border-top-color:var(--ambar)} .gem-t.sin{border-top-color:var(--tinta-4)}
.gem-cab{display:flex; gap:12px; align-items:flex-start; justify-content:space-between}
.gem-cab h3{font-size:1.08rem; margin:0}
.gem-cab .sub2{display:block; font-size:.7rem; color:var(--tinta-3); margin-top:2px}
.gem-cab-d{display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right}
.gem-chips{display:flex; gap:5px; flex-wrap:wrap; margin-top:7px}
.gem-chip{font-size:.66rem; border:1px solid var(--linea-2); color:var(--tinta-3); border-radius:999px; padding:1px 8px}
.gem-seis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 12px}
.gem-n{border-left:3px solid var(--linea-2); padding:2px 0 2px 9px; min-width:0}
.gem-n span{display:block; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--tinta-3)}
.gem-n b{display:block; font-size:1.06rem; margin-top:2px; white-space:nowrap}
.gem-n em{display:block; font-style:normal; font-size:.68rem; color:var(--tinta-3); margin-top:1px}
.gem-n.ingreso{border-color:var(--g-ingreso)} .gem-n.costo{border-color:var(--g-costo)} .gem-n.real{border-color:var(--g-real)}
.gem-n.comp{border-color:var(--g-comp)} .gem-n.operacion{border-color:var(--g-operacion)}
.gem-n.queda{border-color:var(--g-real)} .gem-n.queda b{color:var(--g-real); font-size:1.18rem}
.gem-n.deficit{border-color:var(--g-deficit)} .gem-n.deficit b{color:var(--g-deficit)}
.gem-cortes{display:flex; align-items:flex-end; gap:3px; height:58px; padding-top:6px; flex-wrap:wrap}
.gem-corte{display:flex; align-items:flex-end; gap:1px; height:44px; flex:1; min-width:8px; max-width:22px; border-bottom:1px solid var(--linea-2)}
.gem-corte i{flex:1; display:block; min-height:1px; border-radius:2px 2px 0 0}
.gem-corte i.in, .gem-cortes-l i.in{background:var(--g-ingreso); opacity:.6} .gem-corte i.queda, .gem-cortes-l i.queda{background:var(--g-real)}
.gem-corte i.neg, .gem-cortes-l i.neg{background:var(--g-deficit)}
.gem-corte.vivo{border-bottom:2px solid var(--azul)}
.gem-cortes-l{flex-basis:100%; color:var(--tinta-3)}
.gem-cortes-l i{margin-left:8px}
.gem-vivo{margin:0} .gem-vivo .ficha{margin-right:4px}
.gem-vacia .vacio{padding:14px 6px}
.gem-falta summary{cursor:pointer; font-size:.78rem; font-weight:600; color:var(--tinta-2)}
.gem-falta ul{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:.8rem; color:var(--tinta-2)}
.gem-falta li{padding-left:22px; position:relative; line-height:1.45}
.gem-falta li::before{position:absolute; left:0; top:0; font-weight:700}
.gem-falta li.si::before{content:"✓"; color:var(--verde)} .gem-falta li.no::before{content:"○"; color:var(--ambar)}
.gem-falta li.info::before{content:"i"; color:var(--azul); font-style:italic; left:4px}
.gem-pie{margin-top:auto; display:flex; justify-content:flex-end}
table.gal-hoja tr.gem-total td{font-weight:700}
.gem-papel{margin-top:22px}
.gem-papel-cuerpo{padding:4px 18px 16px}
.gem-papel-e{padding:14px 0; border-top:1px solid var(--linea)}
.gem-papel-e h4{margin:0 0 6px; font-size:.95rem}
.gem-papel-b{display:flex; gap:6px; align-items:flex-end; flex-wrap:wrap; margin:10px 0}
.gem-papel-c{display:flex; flex-direction:column; align-items:center; gap:4px; width:46px}
.gem-papel-c em{font-style:normal; font-size:.62rem; color:var(--tinta-3); white-space:nowrap}
.gem-papel-par{display:flex; align-items:flex-end; gap:2px; height:60px; width:100%; border-bottom:1px solid var(--linea-2)}
.gem-papel-par i{flex:1; display:block; min-height:1px; border-radius:2px 2px 0 0}
.gem-papel-par i.papel, .gem-cortes-l i.papel{background:var(--oro)} .gem-papel-par i.cerebro, .gem-cortes-l i.cerebro{background:var(--g-ingreso)}
/* En oscuro el azul del ingreso real no se lee como cifra: aquí se aclara (contraste 4.5 a 1 sobre el papel oscuro). */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .gem{--g-real:#7FA6EC} }
:root[data-theme="dark"] .gem{--g-real:#7FA6EC}
@media (max-width:760px){ .gem-grupo{grid-template-columns:minmax(0,1fr)} .gem-rejilla{grid-template-columns:minmax(0,1fr)}
  .gem-casc-f{grid-template-columns:96px minmax(0,1fr) 92px; gap:8px} .gem-seis{grid-template-columns:1fr 1fr} }

/* ---- Un color por sistema (Berí, 2026-09-14: «le asignamos un color representativo a cada sistema»).
   Los colores de dinero de la hoja y el semáforo (verde, ámbar, rojo) ya están tomados; los sistemas viven en los
   matices libres: índigo, violeta, verde azulado, rosa y pizarra. Texto sobre su fondo suave: contraste mínimo 4.5 a 1
   en claro y en oscuro. ---- */
:root{
  --sis-orden:#4A32C7;      --sis-orden-suave:#E6E2FF;
  --sis-numeros:#7E22CE;    --sis-numeros-suave:#F3E8FF;
  --sis-proteccion:#0F766E; --sis-proteccion-suave:#CCFBF1;
  --sis-brissa:#BE185D;     --sis-brissa-suave:#FCE7F3;
  --sis-epicentro:#475569;  --sis-epicentro-suave:#E2E8F0;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --sis-orden:#B4A6FF;      --sis-orden-suave:#221B4F;
  --sis-numeros:#D8B4FE;    --sis-numeros-suave:#3B0764;
  --sis-proteccion:#5EEAD4; --sis-proteccion-suave:#042F2E;
  --sis-brissa:#F9A8D4;     --sis-brissa-suave:#500724;
  --sis-epicentro:#CBD5E1;  --sis-epicentro-suave:#1E293B;
}}
:root[data-theme="dark"]{
  --sis-orden:#B4A6FF;      --sis-orden-suave:#221B4F;
  --sis-numeros:#D8B4FE;    --sis-numeros-suave:#3B0764;
  --sis-proteccion:#5EEAD4; --sis-proteccion-suave:#042F2E;
  --sis-brissa:#F9A8D4;     --sis-brissa-suave:#500724;
  --sis-epicentro:#CBD5E1;  --sis-epicentro-suave:#1E293B;
}
/* Cada clase de sistema lleva su color, su fondo suave y el tono claro que se lee sobre el riel marino. */
.sis-orden{--sis-color:var(--sis-orden); --sis-suave:var(--sis-orden-suave); --sis-riel:#B4A6FF}
.sis-numeros{--sis-color:var(--sis-numeros); --sis-suave:var(--sis-numeros-suave); --sis-riel:#D8B4FE}
.sis-proteccion{--sis-color:var(--sis-proteccion); --sis-suave:var(--sis-proteccion-suave); --sis-riel:#5EEAD4}
.sis-brissa{--sis-color:var(--sis-brissa); --sis-suave:var(--sis-brissa-suave); --sis-riel:#F9A8D4}
.sis-epicentro{--sis-color:var(--sis-epicentro); --sis-suave:var(--sis-epicentro-suave); --sis-riel:#CBD5E1}
.sis{display:inline-flex; align-items:center; font-size:.68rem; font-weight:700; letter-spacing:.03em; padding:2px 8px;
  border-radius:999px; color:var(--sis-color, var(--tinta-2)); background:var(--sis-suave, var(--gris-suave)); white-space:nowrap}
.eyebrow .sis{letter-spacing:.03em; vertical-align:1px}
.sis-punto{display:inline-block; width:.55em; height:.55em; border-radius:50%; background:var(--sis-color); margin-right:.4em; vertical-align:.14em}
.riel .sis-letra{display:inline-grid; place-items:center; width:19px; height:19px; flex:none; border-radius:6px;
  font-size:.66rem; font-weight:700; background:var(--sis-riel, rgba(255,255,255,.2)); color:#0B0F22}
tr.sis-fila td:first-child{box-shadow:inset 3px 0 0 var(--sis-color)}
.sis-nombre{color:var(--sis-color)}
/* Las tres revisiones: un chip por sistema con su estado. Lleno = pasa; punteado = falta; apagado = no aplica. */
.rev{display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700; letter-spacing:.02em; border-radius:999px;
  padding:2px 8px; border:1px solid transparent; white-space:nowrap; line-height:1.5}
.rev i{font-style:normal; font-weight:500; opacity:.9}
.rev.falta{border-style:dashed; border-color:currentColor; background:transparent !important}
.rev.na{opacity:.45}
.rev.sis-orden{color:var(--sis-orden); background:var(--sis-orden-suave)}
.rev.sis-numeros{color:var(--sis-numeros); background:var(--sis-numeros-suave)}
.rev.sis-proteccion{color:var(--sis-proteccion); background:var(--sis-proteccion-suave)}
.rev.sis-brissa{color:var(--sis-brissa); background:var(--sis-brissa-suave)}
.rev.sis-epicentro{color:var(--sis-epicentro); background:var(--sis-epicentro-suave)}
.gal-pag-tres{display:flex; gap:6px; flex-wrap:wrap} .gal-pag-tres.v{flex-direction:column; align-items:flex-start}

/* ---- Lo pagado ---- */
.gal-pag-filtros{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 14px} .gal-pag-filtros .der{margin-left:auto}
.gal-pag-filtros select{width:auto; flex:0 1 auto; max-width:260px}
/* db/75: la orden y sus cargos del banco */
.gal-ligas{margin-top:12px; padding:10px 12px; border:1px dashed var(--linea-2); border-radius:var(--r-sm); background:var(--papel-2)}
.gal-ligas-cab{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.gal-ligas-cab .ficha{margin-left:auto}
.gal-ligas-l{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; font-size:.84rem}
.gal-ligas-l li{display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap}
.gal-ligas-l li .sub2{display:block; font-size:.74rem; color:var(--tinta-3)}
.gal-ligas-l li.gal-sug{border-left:3px solid var(--sis-orden); padding-left:8px}
.gal-ligar-mano{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px}
.gal-ligar-mano select{width:auto; max-width:360px}
/* db/80: el candado del corte */
.gal-candado{padding:14px 18px; margin:-6px 0 18px}
.gal-candado-cab{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.gal-candado-cab .btn{margin-left:auto}
.gal-candado-cab .btn[disabled]{opacity:.5; cursor:not-allowed}
.gal-candado-l{list-style:none; margin:10px 0 6px; padding:0; display:grid; gap:4px; font-size:.86rem}
.gal-candado-l li{display:flex; gap:8px; align-items:baseline}
.gal-candado-marca{font-weight:700; width:1.1em; flex:none}
.gal-candado-l li.ok .gal-candado-marca{color:var(--verde)}
.gal-candado-l li.falta .gal-candado-marca{color:var(--rojo)}
.gal-candado-info{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.gal-candado.cerrado{border-color:var(--verde)}
/* db/205: la tasa de impuestos de NÚMEROS en lugar del porcentaje fijo (solo Dirección de NÚMEROS) */
.gal-imp{padding:14px 18px; margin:0 0 18px}
.gal-imp .gal-frase{margin:10px 0 0}
.gal-imp .mini{margin:8px 0 0}
.gal-imp-acciones{display:flex; gap:10px 14px; flex-wrap:wrap; align-items:center; margin-top:12px}
.gal-imp-acciones label{display:flex; gap:8px; align-items:center}
.gal-imp-acciones select{width:auto; max-width:300px}
.gal-imp .btn[disabled]{opacity:.5; cursor:not-allowed}
.gal-imp.aprobada{border-color:var(--verde)}
.gal-pag-resumen .dato .pie{margin-top:6px}
.gal-cat.pulsable{cursor:pointer; border-radius:var(--r-sm); padding-left:8px; padding-right:8px; margin:0 -8px}
.gal-cat.pulsable:hover{background:var(--papel-3)}
.gal-cat[aria-expanded="true"]{border-bottom:0}
.gal-pag-tabla{margin:0 -18px 12px; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); background:var(--papel-2)}
.gal-pag-tabla table.t td{padding:10px 18px}
.gal-pag-tabla td.cap .mini{display:block; margin-bottom:4px}
.gal-pag-det td{background:var(--papel-3) !important}
.gal-pag-det-g{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.gal-pag-det h4{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-3); margin:0 0 8px}
.gal-pag-det dl{display:grid; grid-template-columns:max-content 1fr; gap:3px 12px; margin:0; font-size:.82rem}
.gal-pag-det dt{color:var(--tinta-3)} .gal-pag-det dd{margin:0; overflow-wrap:anywhere}
.gal-pag-lista{list-style:none; margin:0 0 8px; padding:0; display:grid; gap:6px; font-size:.82rem}
.gal-pag-lista li{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
@media (max-width:640px){ .gal-cat.pulsable{grid-template-columns:1fr auto} .gal-pag-det-g{grid-template-columns:1fr} }
@media (max-width:640px){ .gal-seis{grid-template-columns:1fr 1fr} .gal-cat{grid-template-columns:1fr auto} .gal-cat .gal-riel{display:none} }

/* db/396: los tres sobres de impuestos de cada corte y lo que baja o cuesta cada gasto (Berí, 21-oct-2026) */
.gal-imp{padding:14px 18px; margin:-6px 0 18px}
.gal-sobres{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:12px 0 6px}
.gal-sobre{border-left:4px solid var(--g-impuesto); padding:10px 14px}
.gal-sobre .gal-seis-t{display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--tinta-3); margin-bottom:4px}
.gal-sobre .cifra{font-size:1.25rem}
.gal-sobre .pie{display:block; margin-top:4px}
.gal-baja{color:var(--verde); font-weight:600}
.gal-cuesta{color:var(--ambar); font-weight:600}
.gal-efecto{margin:0 18px 10px}

/* ---- Proyectos (db/432, proyectos.js): qué hace cada sesión de Claude, en la Mac y en la nube. Solo Dirección.
   Ningún rojo (los tableros animan, no castigan): lo que espera a Berí va en oro, el color de la marca; lo que lleva dos
   días sin avance, en ámbar; lo cerrado, en verde y plegado. ---- */
.proy-resumen{display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin:-12px 0 22px}
.proy-oro{background:var(--oro); color:#241a05}
.proy-grupo{margin-bottom:24px}
.proy-grupo>.eyebrow{display:block; margin:0 0 10px}
.proy-lista{display:grid; gap:12px}
.proy{padding:16px 18px; min-width:0}
.proy.proy-fijado{border-top:3px solid var(--oro)}
.proy-cab{display:flex; align-items:flex-start; gap:12px}
.proy-cab-t{flex:1; min-width:0}
.proy-nombre{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px}
.proy-cab h3{font-size:1rem; overflow-wrap:anywhere; min-width:0}
.proy-personal{font-size:.66rem; font-weight:600; letter-spacing:.03em; color:var(--tinta-3); border:1px dashed var(--linea-2);
  border-radius:var(--r-full); padding:0 8px; line-height:1.6; white-space:nowrap}
.proy-cab p{margin-top:2px}
.proy-estrella{flex:none; width:38px; height:38px; display:grid; place-items:center; padding:0; border:1px solid var(--linea-2);
  border-radius:var(--r-full); background:var(--papel); color:var(--tinta-4); font-size:1.2rem; line-height:1; cursor:pointer;
  transition:color var(--paso), border-color var(--paso), background var(--paso)}
.proy-estrella:hover{color:var(--oro); border-color:var(--oro)}
.proy-estrella[aria-pressed="true"]{color:var(--oro); border-color:var(--oro); background:color-mix(in srgb,var(--oro) 12%,var(--papel))}
.proy-estrella:disabled{opacity:.5; cursor:wait}
.proy-falta{margin:10px 0 0; font-size:.86rem; color:var(--tinta-2); overflow-wrap:anywhere}
.proy-falta b{color:var(--tinta); font-weight:600}
.proy-doc{margin:6px 0 0; overflow-wrap:anywhere}
.proy-sin{margin:10px 0 0}
.proy-sesiones{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px}
.proy-ses{padding:10px 12px; border:1px solid var(--linea); border-radius:var(--r-sm); background:var(--papel-2); min-width:0}
.proy-ses.e-espera_beri{border-left:3px solid var(--oro)}
.proy-ses-cab{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
.proy-ses-t{flex:1 1 220px; min-width:0; font-size:.9rem; font-weight:600; overflow-wrap:anywhere}
.proy-ses-fichas{display:inline-flex; flex-wrap:wrap; align-items:center; gap:5px}
.proy-hace{white-space:nowrap}
.proy-donde{font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3);
  border:1px solid var(--linea-2); border-radius:var(--r-xs); padding:0 6px; line-height:1.7}
.proy-estado{display:inline-flex; align-items:center; font-size:.7rem; font-weight:600; padding:2px 9px; border-radius:var(--r-full);
  white-space:nowrap; background:var(--gris-suave); color:var(--tinta-2); border:1px solid transparent}
.proy-estado.e-trabajando{background:var(--nube); color:var(--azul)}
.proy-estado.e-espera_beri{background:var(--oro); color:#241a05}
.proy-estado.e-en_pausa{background:transparent; color:var(--tinta-3); border-style:dashed; border-color:var(--linea-2)}
.proy-estado.e-cerrada{background:var(--verde-suave); color:var(--verde)}
.proy-ses-d{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:3px 10px; margin:8px 0 0; font-size:.84rem}
.proy-ses-d dt{color:var(--tinta-3); font-weight:600}
.proy-ses-d dd{margin:0; color:var(--tinta-2); overflow-wrap:anywhere}
.proy-cerradas{margin-top:10px}
.proy-cerradas>summary{cursor:pointer; font-size:.8rem; font-weight:600; color:var(--tinta-3); width:max-content; max-width:100%; padding:4px 0}
.proy-cerradas>summary:hover{color:var(--tinta)}
.proy-cerradas .proy-ses{opacity:.85}
@media (max-width:640px){
  .proy{padding:14px}
  .proy-ses{padding:9px 10px}
  .proy-resumen{margin-top:-6px}
}

/* ---------- Estados de WhatsApp (estados.js): el formulario a la izquierda y el teléfono a la derecha ---------- */
.est-rejilla{display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,380px); gap:22px; align-items:start}
.est-form{padding:20px 22px}
.est-et{display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--tinta-3); margin-bottom:6px}
.est-chips{display:flex; flex-wrap:wrap; gap:6px}
.est-chips .chip{padding:6px 13px; font-size:.8rem}
.est-ayuda{display:flex; justify-content:space-between; gap:10px; margin-top:5px; color:var(--tinta-3)}
.est-ayuda b{font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap}
.est-marca:empty{display:none}
.est-marca{margin:4px 0 14px; padding:10px 14px; border-radius:var(--r-sm); background:var(--ambar-suave); color:var(--ambar)}
.est-marca-t{margin:0 0 4px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ambar)}
.est-marca ul{margin:0; padding-left:18px; font-size:.82rem; line-height:1.45}
.est-fijo{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin:6px 0 0}
.est-vista{position:sticky; top:16px; display:grid; gap:12px; justify-items:center}
.est-telefono{width:100%; max-width:360px; aspect-ratio:9/16; border-radius:26px; overflow:hidden; background:#000;
  box-shadow:var(--sombra-2); border:6px solid #11131c}
.est-telefono canvas{display:block; width:100%; height:100%}
.est-nocabe{margin:0; width:100%; max-width:360px}
.est-botones{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.est-como{margin:0; max-width:360px; text-align:center}
@media (max-width:820px){
  .est-rejilla{grid-template-columns:1fr}
  .est-vista{position:static; order:-1}
  .est-telefono{max-width:300px}
}
.est-telefono.cuadrado{aspect-ratio:1/1; border-radius:14px; border-width:4px}
.est-publica{width:100%; max-width:360px; padding:14px 16px; display:grid; gap:10px}
.est-publica .est-et{margin:0}
.est-publica .campo{margin:0}
.est-publica p{margin:0}
.est-publicados{margin-top:22px; padding:16px 20px}
.est-publicados-cab{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.est-publicados-cab h3{margin:0; font-size:1rem}
.est-lista{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.est-lista li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px;
  border:1px solid var(--linea); border-radius:var(--r-sm); background:var(--papel-2); min-width:0}
.est-lista-t{display:grid; gap:2px; min-width:0}
.est-lista-t b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.est-lista-d{display:flex; align-items:center; gap:8px; flex:none}
.est-lista-vacia{margin:0}
.est-publico{display:flex; flex-direction:column; gap:4px; margin-top:6px}
.est-publico > small{color:var(--tinta-suave, #5b6478); font-weight:600}