:root{
  --fondo:#060b16; --panel:#0d1628; --panel2:#131f36; --linea:#1f2a40; --linea2:#2c3b58;
  --tinta:#edf2fa; --dim:#93a3bf; --acento:#3d7ef0; --acento-2:#6ea8ff; --acento-3:#1f63d6;
  --ok:#3ecf8e; --alerta:#f5b544; --mal:#ff6b6b;
  --radio:14px; --sombra:0 18px 44px -24px rgba(0,0,0,.75);
  --fuente:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --curva:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; color:var(--tinta);
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(31,99,214,.22), transparent 62%),
    radial-gradient(800px 480px at -12% 112%, rgba(110,168,255,.09), transparent 60%),
    var(--fondo);
  background-attachment:fixed;
  font-family:var(--fuente); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(110,168,255,.35);}
:focus-visible{outline:2px solid var(--acento-2); outline-offset:2px;}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--linea2);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
a{color:inherit;}
.app{display:flex; min-height:100vh;}

/* ── Barra lateral ─────────────────────────────────────── */
.lateral{
  width:246px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--linea);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.marca{padding:18px 18px 14px; border-bottom:1px solid var(--linea);}
.marca .n{font-weight:700; font-size:15px; letter-spacing:-.2px;}
.marca .s{font-size:11px; color:var(--dim); margin-top:2px;}
.grupo{padding:14px 10px 4px;}
.grupo .t{
  font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--dim);
  padding:0 8px 8px; font-weight:600;
}
.nav a{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px;
  text-decoration:none; color:var(--dim); font-size:13.5px; margin-bottom:1px;
}
.nav a:hover{background:var(--panel2); color:var(--tinta);}
.nav a.on{background:var(--panel2); color:var(--tinta); font-weight:600;}
.punto{width:8px;height:8px;border-radius:3px;flex-shrink:0;}

/* ── Contenido ─────────────────────────────────────────── */
.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.cab{
  padding:18px 26px; border-bottom:1px solid var(--linea);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.cab h1{font-size:19px; font-weight:700; margin:0; letter-spacing:-.3px;}
.cab .sub{font-size:12.5px; color:var(--dim); margin-top:3px;}
.cuerpo{padding:24px 26px; flex:1;}

/* ── Piezas ────────────────────────────────────────────── */
.tarjetas{display:flex; gap:26px; flex-wrap:wrap; margin-bottom:22px;}
.kpi .v{font-size:26px; font-weight:700; line-height:1;}
.kpi .e{font-size:11px; color:var(--dim); margin-top:5px;}
.caja{background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden;}
table{width:100%; border-collapse:collapse;}
th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--dim); padding:11px 16px; border-bottom:1px solid var(--linea); font-weight:600;
}
td{padding:13px 16px; border-bottom:1px solid var(--linea); vertical-align:top;}
tr:last-child td{border-bottom:none;}
tr.cl:hover{background:var(--panel2); cursor:pointer;}
.pill{display:inline-block; padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:700;}
.pill.ok{background:rgba(62,207,142,.13); color:var(--ok);}
.pill.al{background:rgba(245,181,68,.13); color:var(--alerta);}
.pill.mal{background:rgba(255,107,107,.13); color:var(--mal);}
.pill.n{background:rgba(61,126,240,.16); color:var(--acento-2);}
.dim{color:var(--dim);}
.mini{font-size:11.5px;}
.vacio{padding:34px 20px; text-align:center; color:var(--dim); font-size:13px;}
.enl{color:var(--acento-2); text-decoration:none;}
.enl:hover{text-decoration:underline;}

/* ── Hilo de conversación ──────────────────────────────── */
.split{display:flex; gap:0; height:calc(100vh - 78px);}
.lista{width:330px; flex-shrink:0; border-right:1px solid var(--linea); overflow-y:auto;}
.lista .it{display:block; padding:12px 16px; border-bottom:1px solid var(--linea); text-decoration:none;}
.lista .it:hover{background:var(--panel2);}
.lista .it.on{background:var(--panel2); box-shadow:inset 3px 0 0 var(--acento);}
.lista .it .n{font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:7px;}
.lista .it .p{font-size:12px; color:var(--dim); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hilo{flex:1; min-width:0; display:flex; flex-direction:column;}
.hilo .top{padding:14px 20px; border-bottom:1px solid var(--linea); display:flex; justify-content:space-between; align-items:center; gap:12px;}
.msgs{flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px;}
.m{max-width:70%; padding:10px 13px; border-radius:12px; font-size:13.5px; white-space:pre-wrap; word-break:break-word;}
.m.u{align-self:flex-start; background:var(--panel2); border:1px solid var(--linea); border-bottom-left-radius:4px;}
.m.a{align-self:flex-end; background:rgba(61,126,240,.14); border:1px solid rgba(61,126,240,.3); border-bottom-right-radius:4px;}
.m .h{font-size:10.5px; color:var(--dim); margin-top:6px;}
.badge{background:var(--mal); color:#fff; font-size:10px; font-weight:700; border-radius:999px; padding:1px 7px;}

/* ── Calendario ────────────────────────────────────────── */
.cal-nav{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px;}
.cal-nav strong{font-size:13px;}
.cal-sel{display:flex; gap:7px; flex-wrap:wrap; padding:12px 16px 0;}
.cal-scroll{overflow-x:auto; padding:0 16px;}
table.cal{border-collapse:separate; border-spacing:3px; width:100%; min-width:620px;}
table.cal th{padding:0; border:none; text-transform:none; letter-spacing:0;}
.cal-h{width:74px; font-size:10.5px; color:var(--dim); text-align:right; padding-right:8px !important; font-weight:500;}
.cal-dia{font-size:11px; color:var(--dim); padding-bottom:6px !important; text-align:center;}
.cal-dia span{display:block; font-size:13px; color:var(--tinta); font-weight:700;}
.cal-hoy span{color:var(--acento-2);}
.cal-c{height:34px; border-radius:6px; padding:0 !important; border:none !important; text-align:center; vertical-align:middle;}
.cal-libre{background:rgba(62,207,142,.07); border:1px dashed rgba(62,207,142,.3) !important;}
.cal-libre a{display:block; line-height:32px; color:rgba(62,207,142,.55); text-decoration:none; font-size:15px; font-weight:700;}
.cal-libre:hover{background:rgba(62,207,142,.16);}
.cal-libre:hover a{color:var(--ok);}
.cal-lleno{background:rgba(61,126,240,.3); border:1px solid rgba(61,126,240,.55) !important;}
.cal-parcial{background:rgba(245,181,68,.18); border:1px solid rgba(245,181,68,.4) !important;}
.cal-pasado{background:var(--panel2); opacity:.35;}
.cal-n{display:block; font-size:10.5px; font-weight:600; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cal-cap{display:block; font-size:9.5px; color:var(--dim);}

.form-fila{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; padding:14px 16px;
}
.form-fila label{display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--dim); font-weight:600;}
.form-fila input, .form-fila select{
  background:var(--panel2); border:1px solid var(--linea); color:var(--tinta);
  padding:9px 11px; border-radius:8px; font-size:13px; font-family:inherit; min-width:150px;
}
.form-fila input:focus, .form-fila select:focus{outline:none; border-color:var(--acento);}
.form-fila button{cursor:pointer;}
.enl-boton{
  background:none; border:0; color:var(--dim); cursor:pointer; font-size:12px;
  font-family:inherit; padding:3px 8px; border-radius:6px; text-decoration:underline;
}
.enl-boton:hover{color:var(--mal); background:rgba(255,107,107,.1); text-decoration:none;}

.boton-chico{
  display:inline-block; text-decoration:none; font-size:12.5px; font-weight:600;
  padding:8px 14px; border-radius:8px; white-space:nowrap;
  background:var(--panel2); border:1px solid var(--linea); color:var(--tinta);
}
.boton-chico:hover{border-color:var(--acento); color:var(--acento-2);}

/* ── Cajas con título ──────────────────────────────────── */
.caja-tit{
  padding:12px 16px; border-bottom:1px solid var(--linea);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:12.5px; font-weight:700; letter-spacing:.01em;
}
.caja-cuerpo{padding:4px 0;}
.caja-cuerpo > .vacio{padding:26px 20px;}
.datos{padding:8px 16px;}
.dato{display:flex; gap:16px; padding:9px 0; border-bottom:1px solid var(--linea);}
.dato:last-child{border-bottom:none;}
.dato-e{width:190px; flex-shrink:0; font-size:12px; color:var(--dim); padding-top:1px;}
.dato-v{font-size:13.5px; min-width:0; word-break:break-word;}
.texto{
  margin:0; padding:14px 16px; white-space:pre-wrap; word-break:break-word;
  font-family:inherit; font-size:13px; line-height:1.6; color:var(--tinta);
  max-height:380px; overflow-y:auto;
}
.barra{height:6px; background:var(--panel2); border-radius:999px; margin:4px 16px 14px; overflow:hidden;}
.barra-llena{height:100%; background:var(--acento); border-radius:999px;}

/* ── Filtros ───────────────────────────────────────────── */
.chips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px;}
.chip{
  padding:6px 13px; border-radius:999px; text-decoration:none; font-size:12.5px;
  background:var(--panel); border:1px solid var(--linea); color:var(--dim);
}
.chip:hover{color:var(--tinta); border-color:var(--acento);}
.chip.on{background:rgba(61,126,240,.16); border-color:var(--acento); color:var(--acento-2); font-weight:600;}

.texto-edit{
  width:100%; background:var(--panel2); border:1px solid var(--linea); color:var(--tinta);
  padding:12px; border-radius:8px; font-family:inherit; font-size:13px; line-height:1.6;
  resize:vertical; min-height:180px;
}
.texto-edit:focus{outline:none; border-color:var(--acento);}

.ventana-cerrada{
  padding:14px 20px; border-top:1px solid var(--linea);
  background:rgba(245,181,68,.07); font-size:13px; color:var(--tinta);
}
.ventana-cerrada strong{display:block; margin-bottom:4px; color:var(--alerta);}

/* ── Mi agente ─────────────────────────────────────────── */
.tonos{display:flex; gap:12px; flex-wrap:wrap;}
.tono{
  flex:1; min-width:200px; cursor:pointer; padding:14px;
  background:var(--panel2); border:1px solid var(--linea); border-radius:10px;
  display:flex; flex-direction:column; gap:6px;
}
.tono:hover{border-color:var(--acento);}
.tono.on{border-color:var(--acento); background:rgba(61,126,240,.09);}
.tono input{margin:0 0 4px;}
.tono strong{font-size:14px;}
.interruptor{display:flex; align-items:center; gap:10px; cursor:pointer;}
.interruptor input{width:17px; height:17px; cursor:pointer; flex-shrink:0;}
.interruptor input:disabled{cursor:not-allowed; opacity:.5;}
.interruptor-t{font-size:13.5px; font-weight:600; color:var(--tinta);}

/* ── Lo que sugiere la IA ──────────────────────────────── */
.caja.ia{border-color:rgba(110,168,255,.3);}
.marca-ia{
  display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--acento-2); background:rgba(110,168,255,.12);
  border:1px solid rgba(110,168,255,.3); padding:3px 9px; border-radius:999px;
  margin-bottom:12px;
}
.lista-ia{margin:0; padding-left:18px;}
.lista-ia li{margin-bottom:6px;}
.lista-ia li:last-child{margin-bottom:0;}

/* ── Hallazgos del supervisor ──────────────────────────── */
.hallazgos{display:flex; flex-direction:column; gap:14px; margin-bottom:18px;}
.hallazgo{background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden;}
.hallazgo.alta{border-left:3px solid var(--mal);}
.hallazgo.media{border-left:3px solid var(--alerta);}
.hallazgo.baja{border-left:3px solid var(--linea);}
.hallazgo-cab{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--linea); flex-wrap:wrap;}
.hallazgo-cab strong{font-size:14px;}
.hallazgo-cuerpo{padding:14px 16px 16px;}
.hallazgo-cuerpo p{margin:0 0 12px; font-size:13.5px; max-width:720px;}
.hallazgo-cuerpo .dato{padding:8px 0;}
.evidencia{
  background:var(--panel2); border:1px solid var(--linea); border-radius:8px;
  padding:10px 12px; font-size:13px; margin-bottom:6px; max-width:720px;
}
.evidencia span{
  display:block; font-size:10px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--dim); font-weight:700; margin-bottom:4px;
}

/* ── Buscador de la bandeja ────────────────────────────── */
.buscador{padding:12px 14px 0; border-bottom:1px solid var(--linea); position:sticky; top:0; background:var(--fondo); z-index:2;}
.buscador form{position:relative; margin-bottom:10px;}
.buscador input{
  width:100%; background:var(--panel2); border:1px solid var(--linea); color:var(--tinta);
  padding:9px 30px 9px 12px; border-radius:8px; font-size:13px; font-family:inherit;
}
.buscador input:focus{outline:none; border-color:var(--acento);}
.buscador .limpiar{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  color:var(--dim); text-decoration:none; font-size:16px; line-height:1; padding:2px 5px;
}
.buscador .limpiar:hover{color:var(--mal);}
.buscador .chip{font-size:11.5px; padding:5px 10px;}
/* El rango de fechas. Va APARTE de la regla de arriba a proposito: esa pone
   width:100% a todo input del buscador, y con dos campos de fecha al 100% cada
   uno la fila revienta y no se pueden usar. Y la caja del texto se envuelve en
   su propio contenedor relativo para que la equis de limpiar se ancle a ELLA y
   no al formulario entero — si no, al crecer el formulario la equis se queda
   flotando en el medio. */
.buscador .q-wrap{position:relative; margin-bottom:8px;}
.buscador .rango-pliegue{margin:0 0 2px;}
.buscador .rango-pliegue summary{cursor:pointer; list-style:none; font-size:11.5px; color:var(--dim); padding:2px 0; width:max-content;}
.buscador .rango-pliegue summary::-webkit-details-marker{display:none;}
.buscador .rango-pliegue summary::before{content:"▸ "; color:var(--acento-2);}
.buscador .rango-pliegue[open] summary::before{content:"▾ ";}
.buscador .rango-pliegue summary:hover{color:var(--tinta);}
.buscador .rango{display:flex; gap:6px; align-items:center; margin:6px 0 4px;}
.buscador .rango input{width:auto; flex:1; min-width:0; padding:5px 7px; font-size:11.5px; border-radius:6px; color-scheme:dark;}
.buscador .rango .boton-chico{padding:5px 10px; font-size:11.5px;}
/* El pie de cada fila de la bandeja: canal, hace cuánto y quién la lleva, en
   UNA línea. La etiqueta de quién la lleva iba como bloque a lo ancho de la
   fila y pesaba más que el nombre del cliente. */
.it .fila-pie{margin-top:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
/* La etiqueta de una tarea: departamento en azul, tipo en gris, en una línea. */
.tarea-etq{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:2px 0;}
.tarea-etq .pill{font-size:9.5px; padding:1px 8px;}
.tarea-etq .tipo{font-size:11px; color:var(--dim); border:1px solid var(--linea); border-radius:999px; padding:0 8px;}
.it .fila-pie .pill{display:inline-block; width:auto; font-size:9.5px; padding:1px 7px; letter-spacing:.03em;}

/* ── Notas internas ────────────────────────────────────── */
.m.nota{
  align-self:center; max-width:82%; background:rgba(245,181,68,.09);
  border:1px dashed rgba(245,181,68,.4); border-radius:10px; color:var(--alerta);
}
.nota-t{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--alerta); margin-bottom:5px;
}
/* Quién escribió una respuesta humana. Discreto a propósito: es un dato de
   referencia, no el mensaje — pero tiene que estar en todas, porque una
   burbuja sin firma es la del asistente y esa es toda la diferencia. */
.m .quien{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--dim); margin-bottom:4px;
}
.clip.on{background:rgba(245,181,68,.16); border-color:var(--alerta); color:var(--alerta);}
#compositor.en-nota{background:rgba(245,181,68,.05);}
#compositor.en-nota input#txt{border-color:rgba(245,181,68,.45);}
#compositor.en-nota button#btn-enviar{background:var(--alerta); color:var(--fondo);}
#btn-enviar svg{width:17px; height:17px;}

/* ── Archivos dentro del hilo ──────────────────────────── */
.m .foto{max-width:100%; max-height:320px; border-radius:9px; display:block; cursor:zoom-in;}
.m audio{display:block; width:250px; max-width:100%; margin:2px 0;}
.m .arch{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;
  padding:9px 11px; border-radius:9px; background:rgba(255,255,255,.045);
  border:1px solid var(--linea); min-width:200px;
}
.m .arch:hover{background:rgba(255,255,255,.085); border-color:var(--acento);}
.m .arch .ico{
  width:32px; height:32px; border-radius:7px; flex-shrink:0;
  background:rgba(61,126,240,.16); color:var(--acento-2);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
}
.m .arch .nom{font-size:12.5px; font-weight:600; word-break:break-all; line-height:1.3;}
.m .arch .pes{font-size:10.5px; color:var(--dim); margin-top:1px;}
.m .pie{margin-top:7px;}
.m .adjs{display:flex; flex-direction:column; gap:7px;}

/* ── Enviar un archivo ─────────────────────────────────── */
/* ── LOS BOTONES DEL COMPOSITOR ───────────────────────────
   LLEVAN SU NOMBRE AL LADO, no solo un icono. Son seis seguidos y con
   iconos solos no se distinguen: el de grabar y el de dictar se parecen,
   y el de nota y el de adjuntar también. El texto de ayuda al pasar el ratón no vale de nada en una
   pantalla táctil, que es donde más se usa esto.

   Por debajo de 720px se quedan los iconos solos: ahí el espacio se lo
   tiene que llevar el cuadro de escribir, que es lo que de verdad importa. */
.clip{
  height:32px; flex-shrink:0; border-radius:7px; cursor:pointer;
  background:var(--panel2); border:1px solid var(--linea); color:var(--dim);
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  font-size:14px; padding:0 9px; min-width:32px;
}
.clip .et{font-size:11.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap;}
.clip:hover{color:var(--acento-2); border-color:var(--acento);}

/* ── LOS QUE NO LLEVAN NOMBRE ─────────────────────────────────────────
   El clip de un archivo se entiende sin leerlo: es el mismo dibujo en todas
   las aplicaciones de mensajes que existen. Un rayo o un microfono no, y por
   eso esos sí lo llevan.

   El nombre se ESCONDE, no se borra: con display:none se lo llevaria también
   el lector de pantalla, y quien no ve el dibujo se quedaria con un botón sin
   nombre. Así sigue anunciándose. */
.clip.muda{width:32px; padding:0;}
.clip.muda .et{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}

@media (max-width:720px){
  .clip{padding:0; width:34px; height:34px;}
  .clip .et{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
}
.adjunto{
  display:flex; align-items:center; gap:10px; padding:9px 20px;
  border-top:1px solid var(--linea); background:var(--panel2); font-size:12.5px;
}
.adjunto .mini-ico{
  width:26px; height:26px; border-radius:6px; flex-shrink:0;
  background:rgba(61,126,240,.16); color:var(--acento-2);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
}
.adjunto .quitar{
  margin-left:auto; cursor:pointer; color:var(--dim); padding:3px 9px;
  border-radius:6px; font-size:12px; border:1px solid transparent;
}
.adjunto .quitar:hover{color:var(--mal); background:rgba(255,107,107,.1);}
.subiendo{opacity:.55; pointer-events:none;}

/* ── Quién está dentro ─────────────────────────────────── */
.yo{
  margin-top:auto; border-top:1px solid var(--linea); padding:12px 14px;
  display:flex; align-items:center; gap:10px;
}
.yo .ini{
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  background:rgba(61,126,240,.18); color:var(--acento-2);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px;
}
.yo .d{min-width:0; flex:1;}
.yo .d .n{font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.yo .d .e{font-size:10.5px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.yo a.out{color:var(--dim); text-decoration:none; font-size:11px; padding:4px 7px; border-radius:6px;}
.yo a.out:hover{background:var(--panel2); color:var(--mal);}
.marca-maestro{
  display:inline-block; margin-top:4px; font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  background:rgba(110,168,255,.14); color:var(--acento-2);
  padding:1px 6px; border-radius:999px;
}

/* ── Entrada ───────────────────────────────────────────── */
.puerta{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.puerta .caja{width:100%; max-width:390px; padding:30px 28px;}
.puerta .logo{font-size:18px; font-weight:700; letter-spacing:-.3px;}
.puerta .logo b{color:var(--acento-2); font-weight:inherit;}
.puerta .lema{font-size:12.5px; color:var(--dim); margin:4px 0 22px;}
.campo{margin-bottom:14px;}
.campo label{display:block; font-size:11.5px; color:var(--dim); font-weight:600; margin-bottom:6px;}
.campo input{
  width:100%; background:var(--panel2); border:1px solid var(--linea); color:var(--tinta);
  padding:11px 12px; border-radius:8px; font-size:14px; font-family:inherit;
}
.campo input:focus{outline:none; border-color:var(--acento); background:var(--panel2);}
.campo .pista{font-size:11px; color:var(--dim); margin-top:5px;}
.boton{
  width:100%; background:var(--acento); color:#fff; border:0; padding:12px;
  border-radius:8px; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit;
}
.boton:hover{background:var(--acento-2);}
.error{
  background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.28); color:var(--mal);
  padding:10px 12px; border-radius:8px; font-size:12.5px; margin-bottom:16px;
}
.aviso{
  background:rgba(245,181,68,.08); border:1px solid rgba(245,181,68,.25); color:var(--alerta);
  padding:10px 12px; border-radius:8px; font-size:12.5px; margin-bottom:16px;
}

/* ══ Capa Innova: forma, movimiento y celular ══════════════════════════════
   Va al final para ganar por cascada sin tocar las reglas de cada pieza. */

/* Barra lateral */
.lateral{
  background:linear-gradient(180deg,rgba(13,22,40,.94),rgba(6,11,22,.94));
  backdrop-filter:blur(14px); width:256px; z-index:40;
}
.marca{display:flex; align-items:center; gap:11px; padding:18px 18px 16px;}
.marca img{width:30px; height:auto; display:block; filter:drop-shadow(0 6px 14px rgba(61,126,240,.45));}
.marca .n{font-size:15.5px; font-weight:600; letter-spacing:-.02em;}
.marca .s{font-size:11.5px;}
.grupo .t{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.14em; padding:0 10px 8px;}
.nav a{
  position:relative; gap:11px; padding:7px 11px; border-radius:9px; font-size:13.5px; min-height:34px;
  transition:background .15s ease, color .15s ease;
}
.nav a svg{width:17px; height:17px; flex-shrink:0; opacity:.8; transition:opacity .15s ease, color .15s ease;}
.nav a .tx{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.nav a:hover{background:var(--panel);}
.nav a:hover svg{opacity:1;}
.nav a.on{background:var(--panel2); box-shadow:inset 3px 0 0 var(--acento); color:var(--tinta);}
.nav a.on svg{opacity:1; color:var(--acento-2);}
.nav a.cerrado{color:var(--dim); opacity:.7;}
.nav a .candado{margin-left:auto; width:14px; height:14px; opacity:.6;}
.contexto-nav{font-size:12px; color:var(--dim); padding:10px 20px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.plegador{flex-shrink:0;
  display:flex; align-items:center; justify-content:center; gap:8px; width:calc(100% - 20px); margin:10px 10px 0;
  height:34px; border-radius:9px; border:1px solid var(--linea); background:transparent; color:var(--dim);
  font:500 12.5px var(--fuente); cursor:pointer;
}
.plegador:hover{color:var(--tinta); border-color:var(--linea2);}
.plegador svg{width:16px; height:16px;}
/* Menú plegado: solo íconos. Los títulos de grupo se vuelven una raya. */
@media (min-width:861px){
  .app.plegado .lateral{width:72px;}
  .app.plegado .marca > div, .app.plegado .tx, .app.plegado .grupo .t, .app.plegado .contexto-nav,
  .app.plegado .yo .d, .app.plegado .yo a.out, .app.plegado .plegador .tx, .app.plegado .nav a .candado{display:none;}
  .app.plegado .grupo .t + .nav{border-top:1px solid var(--linea); padding-top:6px;}
  .app.plegado .nav a{justify-content:center; padding:7px 0;}
  .app.plegado .nav a .badge{position:absolute; top:2px; right:6px; font-size:9px; padding:0 5px; margin:0 !important;}
  .app.plegado .marca{justify-content:center; padding:18px 0 16px;}
  .app.plegado .yo{justify-content:center; padding:12px 0;}
}
.punto{width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.04);}

/* Cabecera de vidrio */
.cab{
  position:sticky; top:0; z-index:30; padding:18px 30px;
  background:rgba(6,11,22,.62); backdrop-filter:blur(16px) saturate(1.4);
}
.cab h1{font-size:21px; font-weight:600; letter-spacing:-.025em;}
.cab .sub{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.vivo{
  width:8px; height:8px; border-radius:50%; background:var(--ok); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(62,207,142,.6); animation:latido 2s infinite;
}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(62,207,142,.55)}70%{box-shadow:0 0 0 8px rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}
.cuerpo{padding:26px 30px 40px;}

/* Cifras grandes como tarjetas */
.tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:22px;}
.kpi{
  background:var(--panel);
  border:1px solid var(--linea); border-radius:var(--radio); padding:16px 18px;
  transition:translate .22s var(--curva), border-color .22s ease, box-shadow .22s ease;
}
.kpi:hover{translate:0 -3px; border-color:var(--linea2); box-shadow:0 16px 36px -20px rgba(31,99,214,.6);}
.kpi .v{font-size:30px; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.kpi .e{font-size:11.5px; margin-top:8px;}

/* Cajas */
.caja{
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 30%),var(--panel);
  border-radius:var(--radio); box-shadow:var(--sombra);
  transition:border-color .22s ease, box-shadow .22s ease;
}
.caja:hover{border-color:var(--linea2);}
.caja-tit{font-size:13px; font-weight:600; padding:14px 18px;}
th{font-family:var(--mono); font-weight:500; letter-spacing:.1em; padding:12px 18px; background:rgba(255,255,255,.015);}
td{padding:14px 18px;}
tr.cl{transition:background .15s ease;}
tr.cl:hover{background:rgba(61,126,240,.06);}
.pill{font-weight:600; letter-spacing:.01em; padding:3px 10px;}
.chip{transition:all .18s ease;}
.chip.on{box-shadow:0 0 0 3px rgba(61,126,240,.12);}
.barra{height:8px;}
.barra-llena{
  background:linear-gradient(90deg,var(--acento-3),var(--acento-2));
  transform-origin:left; animation:llenar 1.1s var(--curva) both;
}
@keyframes llenar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Botones */
.boton, #compositor button#btn-enviar{
  background:linear-gradient(135deg,var(--acento-3),var(--acento)); border-radius:12px;
  box-shadow:0 12px 28px -12px rgba(61,126,240,.85); transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.boton:hover{background:linear-gradient(135deg,var(--acento-3),var(--acento)); filter:brightness(1.1); transform:translateY(-1px);}
.boton:active{transform:translateY(0);}
.boton-chico{border-radius:10px; transition:all .18s ease;}
.boton-chico:hover{background:rgba(61,126,240,.1); transform:translateY(-1px);}
input, select, textarea{transition:border-color .18s ease, box-shadow .18s ease;}
.form-fila input:focus, .form-fila select:focus, .campo input:focus, .texto-edit:focus, .buscador input:focus{
  box-shadow:0 0 0 4px rgba(61,126,240,.16);
}

/* Bandeja */
.lista{background:rgba(6,11,22,.35);}
.lista .it{transition:background .15s ease;}
.lista .it.on{background:rgba(61,126,240,.1); box-shadow:inset 3px 0 0 var(--acento-2);}
.m{border-radius:14px; animation:globo .35s var(--curva) both;}
.m.a{background:rgba(61,126,240,.14); border-color:rgba(61,126,240,.35);}
.m.a.p{background:rgba(62,207,142,.10); border-color:rgba(62,207,142,.30);}
.m.a.p .quien{color:var(--ok);}
.m.a .quien{color:var(--acento-2);}
.m.u{background:var(--panel2);}
@keyframes globo{from{opacity:0; transform:translateY(6px) scale(.98)}to{opacity:1; transform:none}}
.buscador{background:rgba(6,11,22,.85); backdrop-filter:blur(10px);}
.volver-m{display:none;}

/* Quién está dentro */
.yo{background:rgba(255,255,255,.02);}
.yo .ini{background:linear-gradient(135deg,var(--acento-3),var(--acento-2)); color:#fff; border-radius:10px;}

/* Entrada del contenido */
.cuerpo > *, .split{animation:entra .55s var(--curva) both;}
.cuerpo > *:nth-child(2){animation-delay:.05s}
.cuerpo > *:nth-child(3){animation-delay:.1s}
.cuerpo > *:nth-child(4){animation-delay:.15s}
.cuerpo > *:nth-child(n+5){animation-delay:.2s}
@keyframes entra{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}


/* Visión general: lo urgente arriba, luego cifras, luego detalle */
.atencion{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px;}
.aviso-at{flex:1 1 260px; display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; text-decoration:none; border:1px solid var(--linea); background:var(--panel); color:var(--tinta);}
.aviso-at .n{font-size:20px; font-weight:600; font-variant-numeric:tabular-nums;}
.aviso-at .t{flex:1; min-width:0; font-size:13.5px;}
.aviso-at .a{font-size:12.5px; color:var(--acento-2); white-space:nowrap;}
.aviso-at.mal{border-color:rgba(255,107,107,.35); background:rgba(255,107,107,.07);} .aviso-at.mal .n{color:var(--mal);}
.aviso-at.al{border-color:rgba(245,181,68,.35); background:rgba(245,181,68,.07);} .aviso-at.al .n{color:var(--alerta);}
.aviso-at:hover{border-color:var(--acento);}
.kpi .f{font-size:11px; color:var(--dim); margin-top:4px;}
.caja-tit .enl{white-space:nowrap;}
.resumen-cols{display:flex; flex-wrap:wrap; gap:0 18px; align-items:flex-start;}
.resumen-cols .col-a{flex:999 1 520px; min-width:0;}
.resumen-cols .col-b{flex:1 1 340px; min-width:0;}
.lista-ag{display:flex; flex-direction:column;}
.it-ag{padding:11px 16px; border-bottom:1px solid var(--linea); font-size:13.5px;}
.it-ag:last-child{border-bottom:none;}
.it-ag .q{font-size:12px; color:var(--dim);}
.fila-ag{display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:12px; align-items:start;}
.fila-ag .pt{width:8px; height:8px; border-radius:50%; margin-top:7px;}
.fila-ag .h{font:11.5px var(--mono); color:var(--dim); white-space:nowrap;}

/* Ficha de la persona, a la derecha del hilo (solo en pantallas anchas) */
.ctx{width:290px; flex-shrink:0; border-left:1px solid var(--linea); padding:18px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; background:rgba(6,11,22,.35);}
.ctx-n{font-size:15px; font-weight:600;}
.ctx-e{font:500 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:2px;}
.ctx-f{font-size:13.5px;}
.ctx .boton-chico{align-self:flex-start;}
/* El interruptor de la ficha va en un formulario: dentro de una columna flex
   un formulario se estira, y el boton quedaria centrado a lo ancho. */
.ctx form{align-self:flex-start;}
@media (max-width:1279px){.ctx{display:none;}}

/* Gráficas de barras */
.graf{display:flex; align-items:flex-end; gap:6px; height:190px; padding:18px 16px 8px;}
.graf-c{flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px;}
.graf-b{width:100%; max-width:34px; min-height:2px; border-radius:5px 5px 0 0; background:var(--acento); transition:background .15s ease;}
.graf-c:hover .graf-b{background:var(--acento-2);}
.graf-v{font:11px var(--mono); color:var(--dim);}
.graf-e{font:10.5px var(--mono); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
@media (max-width:640px){.graf-e{font-size:9px;} .graf{gap:3px; padding:14px 10px 6px;}}

/* Pestañas de una sección (cerebro, agente…) */
.pestanas{display:flex; flex-wrap:wrap; gap:4px 22px; border-bottom:1px solid var(--linea); margin:-6px 0 20px;}
.pestanas a{height:40px; display:flex; align-items:center; text-decoration:none; color:var(--dim); font-size:13.5px; font-weight:500; border-bottom:2px solid transparent; margin-bottom:-1px;}
.pestanas a:hover{color:var(--tinta);}
.pestanas a.on{color:#fff; border-bottom-color:var(--acento);}
.mapa-cerebro{overflow-x:auto; padding:8px 0;}
.mapa-cerebro svg{display:block; margin:0 auto; font-family:var(--fuente);}
.mapa-movil{display:none;}
@media (max-width:640px){.mapa-cerebro{display:none;} .mapa-movil{display:block;}}
.obj-c{padding:12px 16px; border-bottom:1px solid var(--linea);}
.obj-c:last-child{border-bottom:none;}
.obj-t{display:flex; justify-content:space-between; gap:10px; font-size:13.5px;}
.obj-c .barra{margin-left:0; margin-right:0;}

/* Los 5 puntos, las migas y las pestañas de cada punto */
.nav-puntos a{min-height:42px; font-size:14px; font-weight:500;}
.nav-puntos a svg{width:19px; height:19px;}
.grupo-ajustes{margin-top:auto; border-top:1px solid var(--linea);}
.cab.con-pestanas{flex-direction:column; align-items:stretch; padding-bottom:0; gap:6px;}
.cab-fila{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.cab:not(.con-pestanas) .cab-fila{flex:1;}
.migas{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px; color:var(--dim); margin-bottom:3px;}
.migas a{color:var(--acento-2); text-decoration:none;}
.migas a:hover{text-decoration:underline;}
.migas span:last-child{color:var(--dim);}
.cab.con-pestanas, .cab.con-pestanas > *{min-width:0; max-width:100%;}
.pestanas-punto{min-width:0; max-width:100%; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin-top:12px; padding-bottom:14px;}
.pestanas-punto::-webkit-scrollbar{display:none;}
.pestanas-punto a{flex:none; display:flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:10px; border:1px solid var(--linea2); background:var(--panel); text-decoration:none; color:var(--dim); font-size:14px; font-weight:500; white-space:nowrap; transition:border-color .15s, color .15s, background .15s;}
.pestanas-punto a:hover{color:var(--tinta); border-color:var(--acento);}
.pestanas-punto a.on{color:var(--tinta); background:var(--panel2); border-color:var(--acento); box-shadow:0 0 0 1px var(--acento) inset;}
.pestanas-punto a.cerrado{color:var(--dim); border-style:dashed;}
.pestanas-punto a .candado{width:13px; height:13px; opacity:.6;}
.pestanas-punto .badge{font-size:10px;}
/* «Más»: al abrirse, sus pestañas siguen en la misma fila (sin menú flotante
   que la fila, que se desplaza de lado, recortaría). */
.pestanas-mas{flex:none; display:flex; gap:8px;}
.pestanas-mas > summary{list-style:none; display:flex; align-items:center; height:38px; padding:0 16px; border-radius:10px; border:1px dashed var(--linea2); background:var(--panel); color:var(--dim); font-size:14px; font-weight:500; white-space:nowrap; cursor:pointer;}
.pestanas-mas > summary::-webkit-details-marker{display:none;}
.pestanas-mas > summary:hover{color:var(--tinta); border-color:var(--acento);}
.pestanas-mas[open] > summary{color:var(--tinta);}
.pestanas-mas > div{display:flex; gap:8px;}
/* ── Dinero: Finanzas, Libro y Recibos (prefijo fz-) ──────────────────────
   Lenguaje institucional, con la paleta de siempre:
   · La información se ordena con espacio, alineación y líneas finas, no con
     cajas. Solo el resumen del periodo lleva fondo propio.
   · Radios contenidos (6–8px), sin sombras, bordes de 1px solo donde separan.
   · Verde y rojo, solo para resultados y variaciones reales. Ámbar, para
     advertencias. Azul, para acciones y marca. Lo demás va en neutros.
   · Escala de texto: metadato 12px · cuerpo 13.5px · título de sección 15px ·
     cifra 20–40px, siempre con números tabulares. */
.fz{display:grid; grid-template-columns:minmax(0,1fr); gap:28px;}
.cuerpo > .fz{animation:none;}
.fz > *{animation:fzAparece .4s var(--curva) both;}
@keyframes fzAparece{from{opacity:0;} to{opacity:1;}}
.fz > .fz-panel{animation:none;}
.fz-g{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:40px; row-gap:28px; align-items:start;}
.fz-s12{grid-column:span 12;} .fz-s8{grid-column:span 8;} .fz-s7{grid-column:span 7;} .fz-s6{grid-column:span 6;} .fz-s5{grid-column:span 5;} .fz-s4{grid-column:span 4;} .fz-s3{grid-column:span 3;}
/* cabecera: pestañas y periodo en una línea */
.fz-cab{display:flex; align-items:center; gap:12px; flex-wrap:wrap; border-bottom:1px solid var(--linea); margin:-4px 0 -8px;}
.fz-sub{display:flex; gap:2px 26px; flex-wrap:wrap; min-width:0;}
.fz-sub a{height:44px; display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--dim); font-size:14px; font-weight:500; border-bottom:1px solid transparent; margin-bottom:-1px;}
.fz-sub a:hover{color:var(--tinta);}
.fz-sub a.on{color:var(--tinta); border-bottom-color:var(--tinta);}
.fz-sub svg{width:15px; height:15px; opacity:.7;}
.fz-cab .fz-der{margin-left:auto; display:flex; gap:14px; align-items:center; padding:6px 0;}
.fz-periodo{display:inline-flex; align-items:center; gap:2px; height:34px;}
.fz-periodo a{display:grid; place-items:center; width:28px; height:28px; border-radius:6px; color:var(--dim); text-decoration:none; font-size:16px;}
.fz-periodo a:hover{background:var(--panel2); color:var(--tinta);}
.fz-periodo span{padding:0 6px; font-size:14px; font-weight:600; white-space:nowrap;}
.fz-periodo .off{width:28px;}
.fz-select{height:32px; background:transparent; border:1px solid var(--linea2); color:var(--tinta); padding:0 8px; border-radius:6px; font-size:13.5px; font-weight:500; font-family:inherit;}
/* secciones: sin caja, con título y una línea fina arriba */
.fz-card{min-width:0; border-top:1px solid var(--linea); padding-top:18px;}
.fz-card.compacta{padding-top:16px;}
.fz-card + .fz-card{margin-top:0;}
.fz-card-t{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:16px;}
.fz-card-t h3{font-size:15px; font-weight:600; letter-spacing:-.01em; margin:0;}
.fz-card-t .fz-acc{font-size:13px; color:var(--acento-2); text-decoration:none; white-space:nowrap;}
.fz-card-t .fz-acc:hover{text-decoration:underline;}
/* el resumen del periodo: la única superficie con fondo propio */
.fz-resumen{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); background:var(--panel); border-radius:8px; overflow:hidden;}
.fz-resumen > .izq{padding:24px 28px;}
.fz-resumen > .der{display:grid; border-left:1px solid var(--linea);}
.fz-k{font-size:12px; font-weight:500; color:var(--dim);}
.fz-v{font-size:22px; font-weight:600; letter-spacing:-.025em; line-height:1.15; margin-top:6px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fz-v.xl{font-size:clamp(32px,3.2vw,42px); letter-spacing:-.035em;}
.fz-v.ok{color:var(--ok);} .fz-v.mal{color:var(--mal);}
/* LO QUE NO SE SABE NO SE PINTA COMO UNA CIFRA. Con el mismo cuerpo y el
   mismo peso que un importe, «No se sabe» se lee como un importe raro en vez
   de como un hueco — y un hueco que parece dato es el fallo que persigue
   entero este panel. */
.fz-v.sin{font-size:15px; font-weight:500; color:var(--dim); letter-spacing:0;}
.fz-nota{font-size:13px; color:var(--dim); line-height:1.65; margin-top:8px; max-width:68ch;}
.fz-nota strong{color:var(--tinta); font-weight:600;}
/* indicadores agrupados: una lista con divisiones, no tarjetas sueltas */
.fz-kpis{display:grid; grid-template-columns:minmax(0,1fr);}
.fz-kpi{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:12px; padding:18px 24px; border-top:1px solid var(--linea); text-decoration:none; color:inherit; min-width:0;}
.fz-kpi:first-child{border-top:0;}
.fz-kpi .fz-v{margin:0; font-size:20px; grid-column:2; grid-row:1; text-align:right;}
.fz-kpi .fz-k{grid-column:1; grid-row:1; font-size:13px;}
.fz-kpi .fz-delta{grid-column:1/-1; margin-top:4px;}
a.fz-kpi:hover{background:rgba(255,255,255,.015);}
.fz-kpis4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));}
.fz-kpis4 .fz-kpi{display:block; padding:0 0 0 24px; border-top:0; border-left:1px solid var(--linea);}
.fz-kpis4 .fz-kpi .fz-v{text-align:left; margin-top:6px;}
.fz-delta{display:block; font-size:12px; font-weight:500; color:var(--dim);}
.fz-delta.bien{color:var(--ok);} .fz-delta.mal{color:var(--mal);}
/* gráfico */
.fz-graf{display:block; width:100%; height:auto; margin-top:20px;}
.fz-graf text{font-family:var(--fuente); font-size:12px; fill:var(--dim);}
.fz-graf .val{fill:var(--tinta); font-weight:500; font-variant-numeric:tabular-nums;}
.fz-ley{display:flex; gap:18px; font-size:12px; color:var(--dim); margin-top:10px;}
.fz-ley i{display:inline-block; width:12px; height:2px; margin-right:7px; vertical-align:3px;}
/* atención: una lista corta, no un muro de etiquetas */
.fz-alertas{display:grid; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);}
.fz-alerta{display:flex; align-items:center; gap:12px; padding:11px 2px; font-size:13.5px; color:var(--tinta); text-decoration:none; border-top:1px solid var(--linea);}
.fz-alerta:first-child{border-top:0;}
.fz-alerta .p{width:6px; height:6px; border-radius:50%; flex:none; background:var(--dim);}
.fz-alerta.mal .p{background:var(--mal);} .fz-alerta.al .p{background:var(--alerta);} .fz-alerta.az .p{background:var(--acento);}
.fz-alerta .ir{margin-left:auto; color:var(--acento-2); font-size:13px; white-space:nowrap;}
a.fz-alerta:hover .ir{text-decoration:underline;}
/* medidor */
.fz-medidor{position:relative; height:4px; border-radius:2px; background:var(--linea2); margin:20px 0 10px;}
.fz-medidor .fz-lleno{position:absolute; inset:0 auto 0 0; border-radius:2px; background:var(--acento);}
.fz-medidor .fz-lleno.ok{background:var(--ok);}
.fz-medidor .fz-marca{position:absolute; top:-6px; width:1px; height:16px; background:var(--tinta);}
.fz-medidor-e{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--dim);}
/* reparto */
.fz-reparto{display:grid; gap:14px;}
.fz-reparto .r{display:grid; grid-template-columns:minmax(0,1fr) auto 44px; gap:6px 16px; align-items:center; font-size:13.5px;}
.fz-reparto .r .m{color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap;}
.fz-reparto .r .pc{font-weight:600; font-variant-numeric:tabular-nums; text-align:right;}
.fz-reparto .b{grid-column:1/-1; height:3px; border-radius:2px; background:var(--linea); overflow:hidden;}
.fz-reparto .b i{display:block; height:100%; background:var(--acento);}
/* listas */
.fz-lista{display:grid;}
.fz-item{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:center; padding:14px 0; border-top:1px solid var(--linea);}
.fz-item:first-child{border-top:0; padding-top:0;}
.fz-item > .fz-ini{display:none;}
.fz-ini{display:none;}
.fz-t{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fz-t2{font-size:12.5px; color:var(--dim); margin-top:3px; overflow:hidden; text-overflow:ellipsis;}
.fz-der-col{display:flex; align-items:center; gap:16px; justify-content:flex-end; flex-wrap:wrap;}
.fz-monto{font-weight:600; font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap;}
.fz-monto.ok{color:var(--ok);} .fz-monto.mal{color:var(--mal);}
/* estado: punto y palabra; el color solo cuando significa algo */
.fz-et{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:var(--dim); white-space:nowrap; max-width:100%;}
.fz-et::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--linea2); flex:none;}
.fz-et.sin::before{content:none;}
.fz-et.mal{color:var(--mal);} .fz-et.mal::before{background:var(--mal);}
.fz-et.al{color:var(--alerta);} .fz-et.al::before{background:var(--alerta);}
.fz-et.ok::before{background:var(--ok);}
.fz-et.az::before{background:var(--acento);}
/* acciones: un primario por bloque; lo demás, como enlace */
.fz-btn{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:6px; border:1px solid var(--linea2); background:transparent; color:var(--tinta); font-size:13px; font-weight:500; font-family:inherit; text-decoration:none; cursor:pointer; white-space:nowrap; transition:border-color .15s, background .15s;}
.fz-btn:hover{border-color:var(--dim);}
.fz-btn.pri{background:var(--acento-3); border-color:var(--acento-3); color:#fff;}
.fz-btn.pri:hover{background:var(--acento);}
.fz-btn.chico{height:28px; padding:0 10px; font-size:12.5px;}
.fz-enl{background:none; border:0; padding:0; color:var(--acento-2); font-size:13px; font-weight:500; font-family:inherit; text-decoration:none; cursor:pointer; white-space:nowrap;}
.fz-enl:hover{text-decoration:underline;}
.fz-form{display:grid; gap:14px; margin-top:16px; padding:18px 0 4px; border-top:1px solid var(--linea);}
.fz-form .fz-r{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px;}
.fz-form label{display:grid; gap:6px; font-size:12.5px; font-weight:500; color:var(--dim);}
.fz-campo{width:100%; height:38px; background:var(--fondo); border:1px solid var(--linea2); color:var(--tinta); padding:0 12px; border-radius:6px; font-size:13.5px; font-family:inherit;}
.fz-campo:focus{outline:none; border-color:var(--acento);}
.fz-abrir{cursor:pointer; list-style:none; display:inline-flex;}
.fz-abrir::-webkit-details-marker{display:none;}
.fz-abrir.oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
.fz-vacio{padding:28px 0; color:var(--dim); font-size:13.5px; line-height:1.7;}
.fz-vacio b{display:block; color:var(--tinta); font-size:14px; font-weight:600; margin-bottom:4px;}
.fz-aviso{display:flex; gap:10px; align-items:flex-start; padding:12px 16px; border-radius:6px; font-size:13.5px; line-height:1.6; background:var(--panel); border-left:2px solid var(--linea2);}
.fz-aviso.mal{border-left-color:var(--mal);}
.fz-aviso.al{border-left-color:var(--alerta);}
.fz-aviso.ok{border-left-color:var(--ok);}
/* tablas */
.fz-tabla-caja{min-width:0; border-top:1px solid var(--linea); padding-top:18px;}
.fz-tabla-cab{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:0 0 12px;}
.fz-tabla-cab h3{font-size:15px; font-weight:600; margin:0;}
.fz-scroll{overflow-x:auto;}
.fz-tabla{width:100%; border-collapse:collapse; font-size:13.5px;}
.fz-tabla th{text-align:left; font-size:12px; font-weight:500; color:var(--dim); padding:10px 14px; border-bottom:1px solid var(--linea2); white-space:nowrap;}
.fz-tabla th:first-child, .fz-tabla td:first-child{padding-left:0;}
.fz-tabla th:last-child, .fz-tabla td:last-child{padding-right:0;}
.fz-tabla td{padding:13px 14px; border-bottom:1px solid var(--linea); vertical-align:middle;}
.fz-tabla tbody tr{transition:background .12s;}
.fz-tabla tbody tr:hover{background:rgba(255,255,255,.018);}
.fz-tabla .num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
.fz-tabla .fz-t{font-weight:600;}
.fz-tabla tr.fz-ojo td:first-child{box-shadow:inset 2px 0 0 var(--mal); padding-left:12px;}
.fz-tabla tr[hidden]{display:none!important;}
.fz-tabla tr.anulado td{text-decoration:line-through; opacity:.5;}
.fz-tabla tr:target{background:rgba(61,126,240,.08);}
.fz-tabla .acc{width:1%; white-space:nowrap; text-align:right;}
.fz-falta{color:var(--mal);}
.fz-tabla .m-solo{display:none;}
.fz-filtro{position:relative; flex:0 1 280px;}
.fz-filtro input{width:100%; height:32px; padding:0 10px 0 32px; border-radius:6px; border:1px solid var(--linea2); background:transparent; color:var(--tinta); font-size:13.5px; font-family:inherit;}
.fz-filtro input:focus{outline:none; border-color:var(--acento);}
.fz-filtro svg{position:absolute; left:10px; top:8px; width:16px; height:16px; color:var(--dim);}
.fz-seg{display:inline-flex; gap:22px;}
.fz-seg a{height:32px; display:flex; align-items:center; color:var(--dim); text-decoration:none; font-size:13.5px; font-weight:500; white-space:nowrap; border-bottom:1px solid transparent;}
.fz-seg a:hover{color:var(--tinta);}
.fz-seg a.on{color:var(--tinta); border-bottom-color:var(--tinta);}
.fz-sinres{display:none; padding:24px 0; color:var(--dim); font-size:13.5px;}
/* panel de detalle: se abre con el ancla de la fila, sin tocar nada del servidor */
.fz-panel{position:fixed; inset:0; z-index:200; display:none;}
.fz-panel:target{display:block;}
.fz-panel .fondo{position:absolute; inset:0; background:rgba(3,6,12,.66);}
.fz-panel .hoja{position:absolute; top:0; right:0; bottom:0; width:min(440px,100%); background:var(--panel); border-left:1px solid var(--linea); padding:26px 28px; overflow-y:auto; animation:fzEntra .2s var(--curva);}
@keyframes fzEntra{from{transform:translateX(16px); opacity:0;} to{transform:none; opacity:1;}}
.fz-panel .hoja h3{font-size:19px; font-weight:600; letter-spacing:-.02em; margin:6px 0 4px;}
.fz-panel dl{display:grid; grid-template-columns:auto 1fr; margin:22px 0 0; font-size:13.5px;}
.fz-panel dt, .fz-panel dd{padding:10px 0; border-top:1px solid var(--linea);}
.fz-panel dt{color:var(--dim);}
.fz-panel dd{margin:0; text-align:right; font-variant-numeric:tabular-nums;}
.fz-panel .cerrar{position:absolute; top:20px; right:22px;}
.fz-panel .total{display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; border-top:1px solid var(--linea2);}
/* ── La tabla de cuentas ───────────────────────────────────────────────────
   Más densa que la tabla general de la casa —estas llevan diez columnas, no
   cuatro— pero con la misma cabecera en mono y los mismos tonos. */
.t-fin{width:100%; border-collapse:collapse; font-size:13px;}
.t-fin th{
  font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim);
  padding:9px 10px; background:rgba(255,255,255,.015);
  border-bottom:1px solid var(--linea); text-align:left; white-space:nowrap;
}
.t-fin td{padding:10px; border-bottom:1px solid rgba(31,42,64,.55); vertical-align:top;}
.t-fin tbody tr{transition:background .15s ease;}
.t-fin tbody tr:hover{background:rgba(61,126,240,.055);}
.t-fin tbody tr:last-child td{border-bottom:0;}

/* LAS CIFRAS, EN CIFRAS. Las cifras tabulares hacen que todos los dígitos ocupen lo
   mismo, así que los millares caen unos debajo de otros y la columna se lee
   de un golpe en vez de número a número. Es el cambio que más se nota de
   todo el §3, y no se ve hasta que se comparan las dos. */
.t-fin .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
/* La cabecera de una columna de cifras va donde van las cifras. */
.t-fin th.num{text-align:right;}

/* LA CABECERA SE QUEDA. Con los cuatrocientos documentos de un mes de
   verdad, a la fila 40 ya no se sabe qué columna es cuál y hay que subir.

   EL FONDO ES UN TOKEN DEL TEMA, no un gris inventado. Tiene que ser OPACO
   —si no, las filas se ven por debajo al desplazar— y aquí había un #101a2e
   suelto que cumplía eso y nada más: un color fuera de la paleta, que es
   justo lo que el encargo pedía no hacer. La variable --panel2 es opaca, es
   del tema, y si algún día se cambia el tema esto se cambia con él. */
.t-fin thead th{position:sticky; top:0; z-index:2; background:var(--panel2);}


/* ── LO QUE LAS PANTALLAS SIGUEN NECESITANDO ──────────────────────────────
   El diseño nuevo rediseñó Finanzas, Libro y Recibos, y trajo su propio
   vocabulario fz-* para lo que tocó. Lo que NO tocó se quedó sin reglas:
   utilidades sueltas y dos piezas del Libro que se escribieron la semana
   pasada.

   Y una clase sin regla NO DA ERROR. No rompe el build, no tira ninguna
   prueba —miran el contenido del HTML, no si existe la clase que lo
   envuelve— y deja la pantalla en texto subrayado en vertical, con las
   cifras correctas y sin poder leer ninguna.

   Aquí no hay ningún color ni ninguna decisión de diseño: son medidas y
   alineaciones, y todo sale de los tokens que ya existen. Lo que SÍ tenía
   equivalente en el diseño nuevo no está aquí: las tarjetas pasaron a
   fz-kpi, los vacios a fz-vacio y las tablas anchas a fz-scroll. */
.cifra{font-variant-numeric:tabular-nums;}
.ctrl{
  background:var(--panel2); border:1px solid var(--linea); color:var(--tinta);
  padding:7px 10px; border-radius:9px; font-size:13px; font-family:inherit;
  line-height:1.3; height:34px;
}
.ctrl:focus{outline:none; border-color:var(--acento);}
.nowrap{white-space:nowrap;}
.despliega{margin-top:12px;}
.despliega > summary{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; list-style:none;
  background:var(--panel2); border:1px solid var(--linea); color:var(--tinta);
  padding:7px 13px; border-radius:10px; font-size:12.5px; font-weight:600;
  transition:border-color .15s ease, background .15s ease;
}
.despliega > summary::-webkit-details-marker{display:none;}
.despliega > summary:hover{border-color:var(--acento); background:rgba(61,126,240,.1);}
.despliega > summary::before{content:"+"; font-size:14px; line-height:1; opacity:.7;}
.despliega > .dentro{
  margin-top:11px; padding-top:12px; border-top:1px solid var(--linea);
}
.cifras-mes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:12px 22px; margin:4px 0 12px;
}
.cifras-mes .e{font-size:11.5px; color:var(--dim);}
.cifras-mes .v{font-size:17px; font-weight:600; font-variant-numeric:tabular-nums;}
.cifras-mes .v.grande{font-size:21px; font-weight:700;}

@media (prefers-reduced-motion:reduce){.fz-panel .hoja, .fz > *{animation:none;}}
/* ── Las pantallas de dinero, con el lenguaje institucional ────────────────
   Solo dentro de .es-dinero (Finanzas, Libro, Recibos y Cobros): las mismas
   clases fuera de aquí no cambian, así que ningún otro módulo se mueve.
   Secciones separadas por una línea fina y no por cajas, un único fondo para
   los seis indicadores, radios contenidos y el color solo cuando significa. */
.es-dinero > *{max-width:100%;}
.es-dinero .caja, .es-dinero .fz-hoja{background:transparent; border:0; border-top:1px solid var(--linea); border-radius:0; box-shadow:none; padding:0; margin:0 0 30px!important; overflow:visible;}
.es-dinero .caja:hover{border-color:var(--linea);}
.es-dinero .caja-tit{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; padding:18px 0 12px; font-size:15px; font-weight:600; letter-spacing:-.01em; border:0; background:transparent;}
.es-dinero .caja-tit .mini{font-size:12.5px; font-weight:400;}
.es-dinero .caja-cuerpo{padding:0;}
/* Cajas que se pliegan: la flecha a la izquierda del título; cerradas
   enseñan solo su resumen (.fz-plegado), abiertas el cuerpo entero. */
.es-dinero .fz-plegable > summary{list-style:none; cursor:pointer; justify-content:flex-start; user-select:none;}
.es-dinero .fz-plegable > summary::-webkit-details-marker{display:none;}
.es-dinero .fz-plegable > summary::before{content:""; flex:none; align-self:center; width:7px; height:7px; margin:0 3px 0 2px; border-right:1.6px solid var(--dim); border-bottom:1.6px solid var(--dim); transform:rotate(-45deg); transition:transform .18s ease;}
.es-dinero .fz-plegable[open] > summary::before{transform:rotate(45deg) translate(-2px,-2px);}
.es-dinero .fz-plegable > summary > :nth-child(2){margin-left:auto;}
.es-dinero .fz-plegable > summary:hover > span:first-child{color:var(--acento);}
.es-dinero .fz-plegable > summary:focus-visible{outline:2px solid var(--acento); outline-offset:2px; border-radius:4px;}
.es-dinero .fz-plegable[open] > summary > .fz-plegado{display:none;}
.fz-plegado{flex-basis:100%; padding:4px 0 2px 20px; font-size:13px; font-weight:400; letter-spacing:0;}
.es-dinero .fz-plegable > summary > .fz-plegado .mini{font-size:12.5px;}
.fz-corta{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:13px; border-bottom:1px solid var(--linea);}
.fz-corta:last-child{border-bottom:0;}
.fz-corta .cifra{color:var(--tinta); font-variant-numeric:tabular-nums;}
.fz-dos{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px 36px;}
.fz-dos-tit{font-size:11.5px; font-weight:600; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px;}
.es-dinero .caja-cuerpo > .vacio, .es-dinero .vacio{padding:22px 0; text-align:left;}
.es-dinero .fz-hoja{padding-top:18px;}
/* los seis indicadores: una sola superficie, en rejilla de tres */
.es-dinero .fz-kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--panel); border-radius:8px; overflow:hidden; margin-bottom:30px;}
.es-dinero .fz-kpi{display:block; padding:20px 22px 18px; border:0; border-left:1px solid var(--linea); border-top:1px solid var(--linea); text-decoration:none; color:inherit; min-width:0; border-radius:0; background:transparent;}
.es-dinero .fz-kpi:nth-child(-n+3){border-top:0;}
.es-dinero .fz-kpi:nth-child(3n+1){border-left:0;}
.es-dinero a.fz-kpi:hover{background:rgba(255,255,255,.018);}
.es-dinero .fz-kpi .fz-k{font-size:13px; font-weight:500; color:var(--dim);}
.es-dinero .fz-kpi .fz-v{display:block; margin:8px 0 6px; font-size:26px; font-weight:600; letter-spacing:-.03em; text-align:left; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.es-dinero .fz-kpi .fz-delta{display:block; font-size:12px; line-height:1.55; color:var(--dim); margin-top:2px;}
/* EL TERCER ESTADO: «no se sabe». Ni cero ni cifra: otra forma, otro cuerpo
   y otra tipografía, para que un hueco nunca se lea como un importe raro. */
.fz-v.sin, .es-dinero .fz-kpi .fz-v.sin{display:inline-flex; align-items:center; gap:8px; margin:10px 0 8px; padding:5px 10px; font-size:13px; font-weight:500; letter-spacing:0; line-height:1.4; color:var(--dim); white-space:normal; border:1px dashed var(--linea2); border-radius:6px; background:transparent;}
.fz-v.sin::before{content:"?"; display:inline-grid; place-items:center; width:16px; height:16px; flex:none; border-radius:50%; border:1px solid var(--linea2); font-size:10.5px; font-weight:700; color:var(--dim);}
/* el criterio de fijo/variable: escrito, encima de los botones */
.fz-criterio{display:grid; gap:3px; margin:0 0 14px; padding:12px 14px; border-left:2px solid var(--acento); background:var(--panel); border-radius:0 6px 6px 0; font-size:13px; line-height:1.6;}
.fz-criterio > strong{font-size:13.5px; color:var(--tinta);}
/* avisos y bloques de criterio */
.es-dinero .aviso{border-radius:6px; border:0; border-left:2px solid var(--alerta); background:var(--panel);}
.es-dinero .aviso.mal{border-left-color:var(--mal);}
/* botones: quietos, del mismo peso entre sí */
.es-dinero .boton-chico{height:30px; display:inline-flex; align-items:center; padding:0 12px; border-radius:6px; border:1px solid var(--linea2); background:transparent; color:var(--tinta); font-size:12.5px; font-weight:500; box-shadow:none; transform:none;}
.es-dinero .boton-chico:hover{border-color:var(--dim); background:transparent; color:var(--tinta); transform:none;}
.es-dinero .enl-boton{border-radius:6px;}
/* campos y selectores */
.es-dinero .ctrl{height:34px; background:var(--fondo); border:1px solid var(--linea2); border-radius:6px; color:var(--tinta); padding:0 10px; font-size:13px;}
.es-dinero textarea.ctrl{height:auto; padding:8px 10px;}
.es-dinero .ctrl:focus{border-color:var(--acento); box-shadow:none;}
/* plegables: el resumen como enlace, el contenido bajo una línea fina */
.es-dinero .despliega > summary{border:0; background:transparent; padding:0; height:auto; color:var(--acento-2); font-size:13px; font-weight:500; border-radius:0;}
.es-dinero .despliega > summary:hover{background:transparent; text-decoration:underline;}
.es-dinero .despliega > .dentro{margin-top:12px; padding:16px 0 4px; border:0; border-top:1px solid var(--linea); border-radius:0; background:transparent;}
/* totales del libro: una superficie, cada cifra en su celda */
.es-dinero .cifras-mes{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:0; background:var(--panel); border-radius:8px; overflow:hidden; margin:6px 0 16px;}
.es-dinero .cifras-mes > div{padding:16px 18px; border-left:1px solid var(--linea); min-width:0;}
.es-dinero .cifras-mes > div:first-child{border-left:0;}
.es-dinero .cifras-mes .e{font-size:12.5px; color:var(--dim);}
.es-dinero .cifras-mes .v{font-size:19px; font-weight:600; letter-spacing:-.02em; margin-top:4px;}
.es-dinero .cifras-mes .v.grande{font-size:24px;}
/* TABLAS DE CUENTAS: cifras en columna y cabecera fija, opaca y del tema.
   Hasta diez columnas y cuatrocientas filas: la tabla tiene su propio
   desplazamiento para que la cabecera se quede arriba mientras se baja. */
.fz-meses{min-width:0;}
/* Lo que vence: una fila por fecha, la fecha a la izquierda como en un
   calendario de papel, el estado a la derecha. Sin importes (punto 10). */
.ob-fila{display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--linea);}
.ob-fila:last-child{border-bottom:0;}
.ob-fecha{display:grid; justify-items:center; align-content:center; min-height:52px; border:1px solid var(--linea2); border-radius:8px; background:var(--panel); line-height:1.1;}
.ob-fecha strong{font-size:20px; font-weight:600;}
.ob-fecha span{font-size:10.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em;}
.ob-fecha .ob-mueve{text-transform:none; letter-spacing:0; text-align:center; padding:0 4px;}
.ob-fila.mal .ob-fecha{border-color:var(--mal);}
.ob-fila.alerta .ob-fecha{border-color:var(--alerta);}
.ob-nombre{font-size:14px; font-weight:600;}
.ob-que .mini{margin-top:2px;}
.ob-estado{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:3px 10px; border-radius:999px; border:1px solid var(--linea2); color:var(--dim); white-space:nowrap;}
.ob-estado::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.ob-estado.mal{color:var(--mal); border-color:color-mix(in srgb,var(--mal) 45%,transparent);}
.ob-estado.alerta{color:var(--alerta); border-color:color-mix(in srgb,var(--alerta) 45%,transparent);}
.ob-estado.ok{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,transparent);}
.ob-resumen{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 6px;}
.ob-pide{padding:18px 20px; border:1px dashed var(--linea2); border-radius:8px; background:var(--panel); line-height:1.65;}
.ob-pide p{margin:6px 0 12px; color:var(--dim); font-size:13px; max-width:68ch;}
.ob-pie{margin:-10px 0 0; line-height:1.7; max-width:80ch;}
/* De dónde salió cada fecha, y el formulario al lado (F-Tramites, 11-nov-2026) */
.ob-origen{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:middle; flex-shrink:0;}
.ob-origen.ley{background:var(--acento-2);}
.ob-origen.visto{background:var(--ok);}
.ob-origen.tu{background:var(--tinta);}
.ob-leyenda{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:11.5px; color:var(--dim); margin:-10px 0 0;}
.ob-leyenda > span{display:inline-flex; align-items:center;}
.ob-con-form{display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start;}
.ob-lista{flex:999 1 560px; min-width:0;}
.ob-form{flex:1 1 300px; max-width:400px; min-width:0;}
.ob-form-cuerpo{padding:14px 18px 0; margin:0;}
.ob-form-cuerpo fieldset{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; min-width:0;}
.ob-form-cuerpo fieldset:disabled{opacity:.55;}
.ob-form-dos{display:flex; gap:10px;}
.ob-form-dos > *{flex:1; min-width:0;}
.ob-form-pie{display:flex; flex-direction:column; gap:10px; padding:14px 18px 18px;}
.ob-form-mas{display:flex; flex-direction:column; gap:10px;}
.ob-form-mas > summary{cursor:pointer; list-style:none;}
.ob-form-mas > summary::-webkit-details-marker{display:none;}
.ob-form-mas[open] > summary{margin-bottom:10px;}
.ob-quitar{margin:4px 0 0;}
@media (max-width:640px){
  .ob-fila{grid-template-columns:50px minmax(0,1fr); row-gap:8px;}
  .ob-fila > .ob-estado{grid-column:2; justify-self:start;}
}
/* Ingresos y gastos: arriba lo que entra, abajo lo que sale. */
.fz-graf{display:block; width:100%; max-width:940px; height:auto; overflow:visible;}
.fz-graf.estrecho{display:none;}
@media (max-width:640px){.fz-graf.ancho{display:none;} .fz-graf.estrecho{display:block;}}
.fz-graf text{font-family:inherit; font-variant-numeric:tabular-nums;}
.fz-gv{font-size:10.5px;}
.fz-gm{font-size:12px; font-weight:600; text-transform:capitalize;}
/* Cómo cambian tus deudas: una fila por mes, barras horizontales. */
.fz-deudas{display:grid; gap:2px;}
.fz-deu{display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px; align-items:center; padding:10px 0; border-bottom:1px solid var(--linea);}
.fz-deu:last-child{border-bottom:0;}
.fz-deu-mes{font-size:13px; font-weight:600; text-transform:capitalize; display:grid; gap:1px;}
.fz-deu-mes .mini{font-weight:400; text-transform:none;}
.fz-deu-barras{display:grid; gap:6px; border-left:1px solid var(--linea2); padding-left:10px;}
.fz-deu-l{display:flex; align-items:center; gap:10px; font-size:12.5px; min-width:0;}
.fz-deu-b{display:block; height:14px; border-radius:0 4px 4px 0; flex:none;}
.fz-deu.en-curso .fz-deu-b{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 3px,transparent 3px 7px);}
.fz-deu-hueco{width:90px; border:1px dashed var(--linea2); border-radius:4px; background:transparent!important;}
.es-dinero .fz-scroll{overflow:auto; max-height:72vh; border-top:1px solid var(--linea2);}
.es-dinero .t-fin{font-size:13.5px; border-collapse:separate; border-spacing:0;}
.es-dinero .t-fin thead th{position:sticky; top:0; z-index:2; background:var(--fondo); color:var(--dim); font-family:var(--fuente); font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; padding:11px 12px; border-bottom:1px solid var(--linea2); white-space:nowrap;}
.es-dinero .t-fin td{padding:12px; border-bottom:1px solid var(--linea); vertical-align:middle; font-variant-numeric:tabular-nums;}
.es-dinero .t-fin th:first-child, .es-dinero .t-fin td:first-child{padding-left:2px;}
.es-dinero .t-fin tbody tr:hover{background:rgba(255,255,255,.018);}
.es-dinero .t-fin .num{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;}
.es-dinero .cifra{font-variant-numeric:tabular-nums;}
.es-dinero .t-fin a.enl, .es-dinero .t-fin .enl{text-decoration:none;}
@media (max-width:1000px){
  .es-dinero .fz-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .es-dinero .fz-kpi:nth-child(-n+3){border-top:1px solid var(--linea);}
  .es-dinero .fz-kpi:nth-child(-n+2){border-top:0;}
  .es-dinero .fz-kpi:nth-child(3n+1){border-left:1px solid var(--linea);}
  .es-dinero .fz-kpi:nth-child(2n+1){border-left:0;}
}
@media (max-width:640px){
  .es-dinero .fz-kpis{grid-template-columns:minmax(0,1fr);}
  .es-dinero .fz-kpi{border-left:0!important; border-top:1px solid var(--linea)!important; padding:16px 18px;}
  .es-dinero .fz-kpi:first-child{border-top:0!important;}
  .es-dinero .fz-kpi .fz-v{font-size:22px;}
  .es-dinero .cifras-mes > div{border-left:0; border-top:1px solid var(--linea);}
  .es-dinero .fz-scroll{max-height:none;}
  .es-dinero .fz-meses{overflow-x:auto; padding-bottom:8px!important;}
}
@media (max-width:1180px){
  .fz-s7,.fz-s5,.fz-s8,.fz-s4,.fz-s6{grid-column:span 12;}
  .fz-s3{grid-column:span 6;}
  .fz-resumen{grid-template-columns:minmax(0,1fr);}
  .fz-g{column-gap:20px;}
  .fz-resumen > .der{border-left:0; border-top:1px solid var(--linea); grid-template-columns:repeat(2,minmax(0,1fr));}
  .fz-resumen > .der .fz-kpi:nth-child(2){border-top:0; border-left:1px solid var(--linea);}
  .fz-resumen > .der .fz-kpi:nth-child(4){border-left:1px solid var(--linea);}
  .fz-kpis4{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:18px;}
  .fz-kpis4 .fz-kpi:nth-child(3){border-left:0; padding-left:0;}
}
@media (max-width:700px){
  .fz{gap:22px;}
  .fz-g{row-gap:22px; grid-template-columns:minmax(0,1fr);}
  .fz-g > *{grid-column:auto!important;}
  .fz-resumen > .izq{padding:20px;}
  .fz-kpi{padding:14px 20px;}
  .fz-kpi .fz-v{font-size:17px;}
  .fz-v{font-size:20px;}
  .fz-cab .fz-der{margin-left:0; width:100%; padding:0 0 10px;}
  .fz-cab{display:block;}
  .fz-sub{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:22px;}
  .fz-sub::-webkit-scrollbar{display:none;}
  .fz-sub a{flex:none;}
  .fz-resumen > .der{grid-template-columns:minmax(0,1fr);}
  .fz-resumen > .der .fz-kpi{border-left:0!important; border-top:1px solid var(--linea)!important;}
  .fz-resumen > .der .fz-kpi:first-child{border-top:0!important;}
  .fz-kpi .fz-delta{grid-column:1/-1;}
  .fz-tabla thead{display:none;}
  .fz-tabla, .fz-tabla tbody{display:block;}
  .fz-tabla tr{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; padding:14px 0; border-bottom:1px solid var(--linea);}
  .fz-tabla td{display:block; padding:0!important; border:0;}
  .fz-tabla td.m-oculta{display:none;}
  .fz-tabla td.m-prim{grid-column:1; grid-row:1;}
  .fz-tabla td.m-monto{grid-column:2; grid-row:1; text-align:right;}
  .fz-tabla td.m-sec{grid-column:1/-1; font-size:12.5px; color:var(--dim);}
  .fz-tabla td.m-pie{grid-column:1/-1; display:flex; justify-content:flex-start; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:6px;}
  .fz-tabla tr.fz-ojo{box-shadow:inset 2px 0 0 var(--mal); padding-left:12px;}
  .fz-tabla tr.fz-ojo td:first-child{box-shadow:none;}
  .fz-tabla .m-solo{display:inline;}
  .fz-tabla div.m-solo{display:block;}
  .fz-tabla td.m-pie2{display:block; grid-column:2; grid-row:2; align-self:end; text-align:right;}
  .fz-tabla tr:has(td.m-pie2) td.m-pie{grid-column:1; grid-row:2;}
  .fz-seg{overflow-x:auto; max-width:100%;}
  .fz-filtro{flex:1 1 100%;}
  .fz-kpis4 .fz-kpi{padding-left:16px;}
}

.nav-puntos a{position:relative;}
/* Cada área es un grupo con su título (FINANZAS, MARKETING Y VENTAS…) y
   debajo sus opciones, cada una con su ícono. El grupo se abre y se cierra
   con un clic; el de la pantalla llega abierto. */
.nav-puntos details.punto-menu{margin-top:4px;}
/* El título del área: su dibujito en un cuadrito de color y el nombre en
   letra normal, para que cada grupo se reconozca de un vistazo. */
.nav-puntos summary{list-style:none; position:relative; display:flex; align-items:center; gap:11px; min-height:44px; padding:0 10px 0 8px; border-radius:11px; cursor:pointer; color:var(--dim); font-size:14px; font-weight:600; letter-spacing:-.005em; user-select:none; transition:background .15s ease, color .15s ease;}
.nav-puntos summary::-webkit-details-marker{display:none;}
.nav-puntos summary .tx{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.nav-puntos summary svg{display:block; width:30px; height:30px; padding:6.5px; flex:none; border-radius:9px; background:var(--panel2); border:1px solid var(--linea2); color:var(--acento-2); box-sizing:border-box; transition:background .15s ease, border-color .15s ease, color .15s ease;}
.nav-puntos summary:hover{color:var(--tinta); background:var(--panel);}
.nav-puntos summary:hover svg{border-color:var(--linea2);}
.nav-puntos summary.on{color:#fff;}
.nav-puntos summary.on svg{background:var(--acento-3); border-color:var(--acento); color:#fff;}
.nav-puntos details[open] > summary{color:#fff;}
.nav-puntos summary:focus-visible{outline:2px solid var(--acento); outline-offset:2px;}
.nav-puntos summary .badge{font-family:var(--fuente); letter-spacing:0;}
.nav-puntos .flecha{margin-left:auto; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); opacity:.45; flex:none; transition:transform .18s ease;}
.nav-puntos .badge + .flecha{margin-left:10px;}
.nav-puntos details[open] > summary .flecha{transform:rotate(45deg); opacity:.8; margin-top:-3px;}
/* Las opciones cuelgan de su área: sangría y una línea fina que las une. */
.sub-punto{display:flex; flex-direction:column; gap:1px; margin:2px 0 8px 23px; padding-left:12px; border-left:1px solid var(--linea2);}
.sub-punto a{display:flex; align-items:center; gap:10px; min-height:34px; padding:0 10px; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--dim); text-decoration:none; transition:background .15s ease, color .15s ease;}
.sub-punto a svg{width:16px; height:16px; flex:none; opacity:.75;}
.sub-punto a:hover{color:var(--tinta); background:var(--panel);}
.sub-punto a.on{color:var(--tinta); background:var(--panel2); font-weight:600; box-shadow:inset 3px 0 0 var(--acento);}
.sub-punto a.on svg{opacity:1; color:var(--acento-2);}
.sub-punto a.on::before{content:""; position:absolute; margin-left:-23px; width:2px; height:18px; border-radius:2px; background:var(--acento);}
.sub-punto a.cerrado{color:var(--dim);}
.sub-punto a .candado{width:12px; height:12px; opacity:.6; margin-left:auto;}
.sub-punto a.sub-hija{position:relative;}
.app.plegado .sub-punto, .app.plegado .nav-puntos .flecha{display:none;}
.app.plegado .nav-puntos summary{justify-content:center; padding:6px 0; min-height:44px;}
.app.plegado .nav-puntos summary svg{display:block;}
.app.plegado .nav-puntos summary .tx{display:none;}
.app.plegado .nav-puntos details.punto-menu{margin-top:2px;}
.app.plegado .nav-puntos summary .badge{position:absolute; top:2px; right:6px; font-size:9px; padding:0 5px; margin:0 !important;}
@media (max-width:860px){.pestanas-punto{gap:6px; margin-right:-16px; padding-right:16px;} .pestanas-punto a{height:36px; padding:0 13px; font-size:13.5px;}}
/* Barra del celular (oculta en escritorio) */
.menu-t{position:absolute; opacity:0; pointer-events:none;}
.topm, .velo{display:none;}

@media (max-width:860px){
  .topm{
    display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:35;
    padding:12px 16px; background:rgba(6,11,22,.85); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--linea);
  }
  .topm img{width:26px;}
  .topm .n{font-weight:600; font-size:14.5px; letter-spacing:-.02em; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .topm label{
    width:40px; height:40px; border-radius:11px; border:1px solid var(--linea2);
    display:grid; place-items:center; cursor:pointer; background:var(--panel);
  }
  .topm label svg{width:20px; height:20px;}
  .app{display:block;}
  .lateral{
    position:fixed; left:0; top:0; bottom:0; height:100%; width:min(300px,86vw);
    transform:translateX(-102%); transition:transform .32s var(--curva); box-shadow:24px 0 60px rgba(0,0,0,.5);
  }
  .menu-t:checked ~ .app .lateral{transform:none;}
  .velo{
    display:block; position:fixed; inset:0; z-index:39; background:rgba(2,5,12,.6);
    opacity:0; pointer-events:none; transition:opacity .3s ease; backdrop-filter:blur(2px);
  }
  .menu-t:checked ~ .app .velo{opacity:1; pointer-events:auto;}
  .cab{position:static; padding:16px; flex-wrap:wrap;}
  .cab h1{font-size:19px;}
  .cuerpo{padding:16px 16px 32px;}
  .tarjetas{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .kpi{padding:14px;}
  .kpi .v{font-size:25px;}
  .caja{overflow-x:auto;}
  .caja table{min-width:560px;}
  .dato{flex-direction:column; gap:2px;}
  .dato-e{width:auto;}
  .split{display:block; height:auto;}
  .lista{width:100%; border-right:none;}
  .split:has(.lista .it.on) .lista{display:none;}
  .split:not(:has(.lista .it.on)) .hilo{display:none;}
  .hilo{height:calc(100vh - 150px); height:calc(100dvh - 150px);}
  .volver-m{display:flex; width:fit-content; align-items:center; gap:6px; color:var(--acento-2); text-decoration:none; font-size:13px; font-weight:600; margin-bottom:6px;}
  .m{max-width:86%;}
  .form-fila input, .form-fila select{min-width:0; width:100%;}
  .form-fila label{flex:1 1 100%;}
}

/* Entrada (login): pantalla partida con la marca en movimiento */
.puerta{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:16px;
  padding:16px; align-items:stretch; justify-content:stretch;
}
.puerta-form{display:flex; align-items:center; justify-content:center; padding:32px 16px;}
.puerta .caja{
  max-width:420px; padding:34px 32px; border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),var(--panel);
  animation:entra .6s var(--curva) both;
}
.puerta .logo{display:flex; align-items:center; gap:12px; font-size:20px; font-weight:600; letter-spacing:-.03em;}
.puerta .logo img{width:36px; filter:drop-shadow(0 6px 16px rgba(61,126,240,.5));}
.puerta .logo b{color:var(--acento-2); font-weight:inherit;}
.puerta .lema{font-size:13px; margin:6px 0 26px;}
.campo input{padding:13px 14px; border-radius:11px; background:var(--panel2); border-color:var(--linea2);}
.boton{padding:13px; font-size:14.5px;}
.puerta-marca{
  position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--linea);
  background:var(--fondo); padding:48px; display:flex; flex-direction:column; justify-content:space-between; min-height:calc(100vh - 32px);
}
.manchas{position:absolute; inset:0;}
.mancha{position:absolute; width:75%; height:75%; border-radius:50%; filter:blur(70px); opacity:.9;}
.mancha.a{left:-15%; top:-20%; background:#1f63d6; animation:deriva1 18s ease-in-out infinite;}
.mancha.b{right:-20%; top:10%; background:#3d7ef0; opacity:.6; animation:deriva2 23s ease-in-out infinite;}
.mancha.c{left:10%; bottom:-30%; background:var(--acento-3); animation:deriva3 20s ease-in-out infinite;}
@keyframes deriva1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(14%,12%) scale(1.15)}}
@keyframes deriva2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-16%,14%) scale(1.1)}}
@keyframes deriva3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(12%,-12%) scale(1.2)}}
.rejilla{
  position:absolute; inset:0; opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(ellipse at 30% 30%,#000 20%,transparent 75%);
}
.puerta-marca > *:not(.manchas):not(.rejilla){position:relative;}
.puerta-marca h2{font-size:clamp(34px,3.6vw,54px); line-height:1.02; letter-spacing:-.045em; font-weight:600; margin:0; max-width:520px;}
.puerta-marca h2 em{font-style:normal; color:var(--acento-2);}
.puerta-marca .lista-m{display:grid; gap:12px; margin:28px 0 0; padding:0; list-style:none; max-width:440px;}
.puerta-marca .lista-m li{display:flex; gap:12px; align-items:center; color:var(--tinta); font-size:14.5px;}
.puerta-marca .lista-m svg{width:18px; height:18px; color:var(--acento-2); flex-shrink:0;}
.puerta-marca .pie{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--tinta);}
.puerta-marca .pie .vivo{animation:latido 2s infinite;}
@media (max-width:960px){
  .puerta{grid-template-columns:1fr; padding:0;}
  .puerta-marca{display:none;}
  .puerta-form{min-height:100vh; min-height:100dvh;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
}

/* ── Fichas que se pliegan ─────────────────────────────────
   Una pantalla con cinco competidores revisados era un rollo de varios
   metros, y lo que uno quiere casi siempre es mirar UNO. */
details.ficha-comp > summary{list-style:none;}
details.ficha-comp > summary::-webkit-details-marker{display:none;}
details.ficha-comp > summary:hover{background:rgba(255,255,255,.02);}
details.ficha-comp .flecha{
  color:var(--dim); font-size:11px; transition:transform .18s var(--curva);
  display:inline-block; flex-shrink:0;
}
details.ficha-comp[open] > summary .flecha{transform:rotate(180deg);}
/* Plegada, el nombre y la direccion caben en una linea y no se parten. */
details.ficha-comp > summary a{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ── Ver la contraseña ─────────────────────────────────────
   Escribir una contraseña larga a ciegas, en un teclado de móvil, y que te
   rechacen sin saber si fue un dedo o la contraseña: eso es lo que arregla
   este botón. Va dentro del campo y en palabras, no en un icono de ojo — un
   ojo tachado significa cosas distintas según a quién le preguntes. */
.con-ojo{position:relative; display:block;}
.con-ojo input{width:100%; padding-right:78px;}
.ojo{
  position:absolute; right:7px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:var(--dim); font:inherit; font-size:12px;
  font-weight:600; cursor:pointer; padding:5px 8px; border-radius:7px; line-height:1;
}
.ojo:hover{color:var(--tinta); background:rgba(255,255,255,.07);}
.ojo:focus-visible{outline:2px solid var(--acento); outline-offset:1px;}

/* ── Las piezas · el diseño aprobado el 10-nov-2026 ───────────────────────
   Las mismas del lienzo «El producto entero». Solo los trece tokens, y cada
   uno con un trabajo: acento-3 es el botón que decide (blanco encima da
   5,5:1; sobre acento solo 3,9), alerta es «no cuadra» y el crítico, mal es
   lo roto de verdad y nada más. La palabra distingue a los agentes, no el
   color. Ver lienzo: claude.ai/artifact/NNS2qCjqE37u4UC71t4dMW */
.pz{display:flex; flex-direction:column; gap:22px; max-width:1360px;}
.pz-fila{display:flex; flex-wrap:wrap; gap:14px; align-items:stretch;}
.pz-fila > *{min-width:0;}
.pz-rejilla{display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));}
.pz-h{margin:0; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); display:flex; align-items:center; gap:10px;}
.pz-h .n{font-size:15px; font-weight:700; color:var(--tinta); font-variant-numeric:tabular-nums; letter-spacing:0; text-transform:none;}
.pz-lede{margin:0; font-size:13px; color:var(--dim); line-height:1.6; max-width:80ch;}
.pz-lede b{color:var(--tinta);}
.pz-caja{background:var(--panel); border:1px solid var(--linea); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:9px;}
.pz-caja.fuerte{border-color:var(--linea2);}
.pz-caja.decide{border-color:var(--acento);}
.pz-caja.ojo-ambar{border-color:rgba(245,181,68,.34);}
.pz-caja.roto{border-color:rgba(255,107,107,.40);}
.pz-caja.hueco{border-style:dashed; border-color:var(--linea2);}
.pz-caja h2,.pz-caja h3{margin:0; font-size:16px; font-weight:600; line-height:1.35; text-wrap:balance;}
.pz-por{font-size:12px; color:var(--dim); line-height:1.55;}
.pz-por b{color:var(--tinta);}
.pz-firma{display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; background:rgba(61,126,240,.16); color:var(--acento-2); font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;}
.pz-firma.critico{background:rgba(245,181,68,.14); color:var(--alerta);}
.pz-firma.bien{background:rgba(62,207,142,.13); color:var(--ok);}
.pz-firma.gris{background:var(--panel2); border:1px solid var(--linea2); color:var(--dim);}
.pz-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:11.5px; color:var(--dim);}
.pz-grande{font-size:44px; font-weight:700; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums;}
.pz-media{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.25;}
.pz-et{font-size:11px; color:var(--dim);}
.pz-cifras{display:flex; flex-direction:column; gap:4px; font-size:13px; font-variant-numeric:tabular-nums;}
.pz-cifras > div{display:flex; justify-content:space-between; gap:12px;}
.pz-cifras > div > span:first-child{color:var(--dim);}
.pz-cifras .suma{padding-top:6px; border-top:1px solid var(--linea); font-weight:700;}
.pz-botones{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.pz-boton,.pz-boton-2{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:10px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none; transition:background .2s, border-color .2s, transform .12s;}
.pz-boton{border:1px solid var(--acento); background:var(--acento-3); color:#fff;}
.pz-boton:hover{background:var(--acento);}
.pz-boton-2{border:1px solid var(--linea); background:var(--panel2); color:var(--tinta);}
.pz-boton-2:hover{border-color:var(--acento); color:var(--acento-2);}
.pz-boton:active,.pz-boton-2:active{transform:translateY(1px);}
.pz-boton:focus-visible,.pz-boton-2:focus-visible{outline:2px solid var(--acento-2); outline-offset:2px;}
.pz-quitar{background:none; border:0; color:var(--dim); font:inherit; font-size:12.5px; text-decoration:underline; cursor:pointer; padding:0 6px; min-height:44px;}
.pz-quitar:hover{color:var(--mal);}
.pz-ir{font-size:12.5px; color:var(--acento-2); text-decoration:none;}
.pz-ir:hover{text-decoration:underline;}
.pz-ambar{background:rgba(245,181,68,.09); border:1px solid rgba(245,181,68,.30); border-radius:10px; padding:10px 13px; font-size:12.5px; color:var(--alerta); line-height:1.55;}
.pz-ambar b{color:var(--alerta);}
.pz-rojo{background:rgba(255,107,107,.06); border:1px solid rgba(255,107,107,.30); border-radius:10px; padding:10px 13px; font-size:12.5px; color:var(--tinta); line-height:1.55;}
.pz-rojo b{color:var(--mal);}
/* Las cinco marcas de procedencia */
.pz-doc{font-variant-numeric:tabular-nums;}
.pz-persona{font-family:var(--mono); border-bottom:1px dotted var(--linea2);}
.pz-propuesta{font-family:var(--mono); color:var(--dim);}
.pz-nose{color:var(--dim);}
.pz-nocuadra{color:var(--alerta); font-variant-numeric:tabular-nums;}
/* La tabla como unidad */
.pz-tabla-c{border:1px solid var(--linea); border-radius:14px; background:var(--panel); overflow-x:auto;}
/* Listas que se leen en el móvil: lo que es a la izquierda, la cifra a la derecha. */
.pz-lista{list-style:none; margin:0; padding:0; border:1px solid var(--linea); border-radius:14px; background:var(--panel);}
.pz-lista > li{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:13px 16px; border-bottom:1px solid var(--linea);}
.pz-lista > li:last-child{border-bottom:none;}
.pz-lista .que{display:flex; flex-direction:column; gap:3px; min-width:0; font-size:13.5px;}
.pz-lista .cuanto{display:flex; flex-direction:column; align-items:flex-end; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; font-size:14px;}
.pz-lista .sub,.pz-tramos .sub{display:block; font-size:11.5px; color:var(--dim); font-weight:400;}
.pz-baja{color:var(--ok); font-variant-numeric:tabular-nums;}
.pz-lede b.pz-nocuadra,.pz-lista b.pz-nocuadra{color:var(--alerta);}
/* Un precio en el tiempo, por tramos: el último, el de hoy, resaltado. */
.pz-tramos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.pz-tramos > li{display:flex; justify-content:space-between; gap:12px; padding:9px 12px; border-radius:10px; background:var(--panel2); font-size:13px;}
.pz-tramos .cuando{min-width:0;}
.pz-tramos .cuanto{text-align:right; font-variant-numeric:tabular-nums; font-weight:600;}
.pz-tramos > li.ahora{background:rgba(245,181,68,.09); border:1px solid rgba(245,181,68,.30);}
.pz-tramos > li.ahora .cuanto{color:var(--alerta);}
.pz-tabla{width:100%; border-collapse:collapse; font-size:13px;}
.pz-tabla th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); font-weight:600; padding:11px 16px; border-bottom:1px solid var(--linea); white-space:nowrap;}
.pz-tabla td{padding:12px 16px; border-bottom:1px solid var(--linea); vertical-align:top;}
.pz-tabla tr:last-child td{border-bottom:none;}
.pz-tabla tbody tr:hover{background:var(--panel2);}
.pz-tabla .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.pz-tabla .pz-nose,.pz-tabla .pz-propuesta,.pz-tabla .pz-persona{white-space:nowrap;}
.pz-tabla .sub{display:block; font-size:11.5px; color:var(--dim); margin-top:2px;}
.pz-tabla tr.abre td{border-top:1px solid var(--linea2);}
.pz-tabla tfoot td{border-top:1px solid var(--linea2); font-weight:700;}
/* ══ LAS PIEZAS VIEJAS HABLAN EL IDIOMA DE LAS NUEVAS (10-nov-2026) ═════════
   37 pantallas seguían con las piezas de antes —cajas con degradado y sombra,
   cifras que flotan al pasar el ratón, títulos de tabla en letra de máquina—
   y 9 con las del lienzo aprobado. Pasar de una a otra parecía cambiar de
   programa. En vez de reescribir 37 pantallas, las piezas viejas se pintan
   como las nuevas aquí, al final, donde ganan por cascada sin tocar el HTML de
   nadie. Misma paleta, ningún color nuevo. */
.caja{background:var(--panel); border:1px solid var(--linea); border-radius:14px; box-shadow:none;}
.caja:hover{border-color:var(--linea);}
.caja-tit{font-size:14px; font-weight:600; padding:14px 18px; letter-spacing:0; border-bottom:1px solid var(--linea);}
.caja-tit .mini{font-weight:400;}
th{font-family:inherit; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); padding:11px 16px; background:none; white-space:nowrap;}
td{padding:12px 16px;}
tbody tr:hover{background:var(--panel2);}
tr.cl:hover{background:var(--panel2);}
.tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:22px;}
.kpi{background:var(--panel); border:1px solid var(--linea); border-radius:14px; padding:16px 18px; box-shadow:none;}
.kpi:hover{translate:none; box-shadow:none; border-color:var(--linea2);}
.kpi .v{font-size:28px; font-weight:700; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums;}
.kpi .e{font-size:11.5px; color:var(--dim); margin-top:6px;}
.pill{border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 9px;}
.boton{background:var(--acento-3); border:1px solid var(--acento); border-radius:10px; box-shadow:none; min-height:44px; font-size:13.5px; font-weight:600;}
.boton:hover{background:var(--acento); filter:none; transform:none;}
.boton-chico{border-radius:10px; min-height:36px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; background:var(--panel2); border:1px solid var(--linea); color:var(--tinta); transform:none;}
.boton-chico:hover{background:var(--panel2); border-color:var(--acento); color:var(--acento-2); transform:none;}
.boton-chico:focus-visible,.boton:focus-visible{outline:2px solid var(--acento-2); outline-offset:2px;}
.vacio{background:var(--panel2); border-radius:12px; padding:22px 20px; color:var(--dim); font-size:13px; line-height:1.6;}
.caja .vacio{background:none; border-radius:0;}
.aviso{background:rgba(245,181,68,.09); border:1px solid rgba(245,181,68,.30); border-radius:10px; padding:10px 13px; font-size:12.5px; line-height:1.55;}
.error{background:rgba(255,107,107,.06); border:1px solid rgba(255,107,107,.30); border-radius:10px; padding:10px 13px; font-size:12.5px; color:var(--tinta); line-height:1.55;}
/* Los estados: vacío, leyendo, roto y a medias nunca se ven igual */
.pz-vacio{background:var(--panel2); border:1px solid var(--linea); border-radius:12px; padding:20px 22px; display:flex; flex-direction:column; gap:8px;}
.pz-vacio .q{font-size:16px; font-weight:600;}
.pz-vacio .p{font-size:12.5px; color:var(--dim); line-height:1.6; max-width:72ch;}
/* Pestañas de una pantalla */
.pz-pestanas{display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--linea); padding-bottom:10px;}
.pz-pestanas a{padding:7px 13px; border-radius:999px; font-size:12.5px; color:var(--dim); text-decoration:none; border:1px solid var(--linea); background:var(--panel);}
.pz-pestanas a:hover{color:var(--tinta); border-color:var(--acento);}
.pz-pestanas a.on{color:var(--tinta); border-color:var(--acento); background:var(--panel2); font-weight:600;}
.pz-campo{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--dim); font-weight:600;}
.pz-campo select,.pz-campo input{background:var(--panel2); border:1px solid var(--linea); color:var(--tinta); min-height:44px; padding:0 12px; border-radius:10px; font:inherit; font-size:13.5px; font-weight:400;}
.pz-campo select:focus,.pz-campo input:focus{outline:none; border-color:var(--acento);}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.hoy-lista{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:13px;}
.hoy-lista li{display:flex; justify-content:space-between; gap:12px;}
.hoy-hora{width:44px; flex-shrink:0; color:var(--dim); font-family:var(--mono); font-size:12px;}
/* Lo que un agente hace solo (11-nov-2026): interruptores por tipo en su
   pantalla, y en Hoy lo que va a salir —con su «Cancelar»— y lo que salió. */
.solo-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.solo-fila,.solo-va{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:12px 14px; border:1px solid var(--linea); border-radius:12px; background:var(--panel2);}
.solo-fila.on{border-color:rgba(62,207,142,.35);}
.solo-que{flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:5px; font-size:13.5px;}
.solo-titulo{font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
/* Ventas (11-nov-2026): el catálogo editable y lo que se cotizó. */
.venta-ajustes{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;}
.venta-estado{display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; font-size:13.5px; margin:0 0 10px;}
.venta-ajustes .pz-campo{flex:1 1 200px;}
.venta-tabla td{vertical-align:middle;}
.venta-tabla .ctrl{width:100%; min-width:0;}
.venta-tabla select.ctrl{min-width:120px;}
.venta-nombre{min-width:180px!important;}
.venta-desc{margin-top:6px; font-size:12px!important;}
.venta-precio{width:120px!important; text-align:right;}
.venta-unidad{width:90px!important;}
.venta-nueva td{opacity:.8;}
.venta-cot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:12px 14px; border:1px solid var(--linea); border-radius:12px; background:var(--panel2);}
.venta-cot.avisar{border-color:rgba(245,181,68,.4);}
.venta-total{display:flex; flex-direction:column; align-items:flex-end; gap:8px; font-weight:700; font-variant-numeric:tabular-nums;}
/* Una plantilla para cada cosa (11-nov-2026): cada cupo con su Usar / En pausa. */
.prop-fila{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:12px 14px; border:1px solid var(--linea); border-radius:12px; background:var(--panel2);}
.prop-fila.on{border-color:rgba(62,207,142,.35);}
.prop-que{flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:4px; font-size:13.5px;}
.prop-que .sub{font-size:12px; color:var(--dim); line-height:1.5;}
.prop-titulo{font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.prop-asignar > summary{cursor:pointer; list-style:none; margin-top:4px;}
.prop-asignar > summary::-webkit-details-marker{display:none;}
.prop-form{display:flex; flex-direction:column; gap:10px; margin:10px 0 0; max-width:520px;}
.prop-dos{display:flex; gap:10px;}
.prop-dos > :first-child{flex:1; min-width:0;}
.prop-dos > :last-child{width:110px;}
/* Con los cupos del motor: qué va en cada {{n}} y el envío automático, aparte. */
.prop-vars{display:flex; flex-direction:column; gap:8px;}
.prop-trabajo{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:2px; padding-top:8px; border-top:1px dashed var(--linea);}
.prop-trabajo .sub{flex:1 1 260px;}
.solo-sugiere{font-size:12.5px; color:var(--acento-2); line-height:1.5;}
/* Hoy: decidir en la tarjeta (P-Hoy, aprobado el 11-nov-2026). «Así no» se
   despliega en el sitio con el porqué: rechazar sin decir por qué no le
   enseña nada al agente. */
.hoy-asino{display:inline-block;}
.hoy-asino > summary{list-style:none;}
.hoy-asino > summary::-webkit-details-marker{display:none;}
.hoy-asino[open] > summary{border-color:var(--acento); color:var(--acento-2);}
.hoy-asino-form{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; margin:10px 0 0;}
.hoy-asino-form .pz-campo{flex:1 1 240px;}
.hoy-params{margin:8px 0 0; padding:10px 12px; background:var(--panel2); border-radius:8px; overflow:auto; font-size:12px; line-height:1.5; font-family:var(--mono); white-space:pre-wrap;}
/* La retención, en el libro (F-Retencion, aprobado el 11-nov-2026). La fila
   que no cuadra lleva la raya ámbar a la izquierda y su explicación debajo;
   los conceptos son píldoras que se pulsan con el pulgar. */
.ret-vistas{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0 0 14px;}
.ret-vistas .chip{min-height:36px; display:inline-flex; align-items:center;}
.ret-bloque{display:flex; flex-direction:column; gap:10px; margin:0 0 16px;}
.ret-cifra{flex:1 1 200px; padding:12px 14px; gap:4px;}
.ret-sub{font-size:13px; font-weight:500; color:var(--dim);}
.t-fin tr.ret-nocuadra td{background:rgba(245,181,68,.05); border-bottom:0;}
.t-fin tr.ret-nocuadra td:first-child{box-shadow:inset 3px 0 0 var(--alerta);}
.t-fin tr.ret-explica td{background:rgba(245,181,68,.05); box-shadow:inset 3px 0 0 var(--alerta); padding-top:0;}
.t-fin tr.ret-explica:hover{background:none;}
.ret-caja{display:flex; flex-direction:column; gap:9px; max-width:820px;}
.ret-texto{margin:0; font-size:13px; line-height:1.6; color:var(--tinta); white-space:normal;}
.ret-otro{display:inline-block;}
.ret-otro[open] > summary{border-color:var(--acento); color:var(--acento-2);}
.ret-opciones{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.ret-opcion{gap:8px;}
.ret-pct{font-size:11.5px; font-weight:500; color:var(--dim);}
.t-fin tr.ret-explica.suave td{background:none; box-shadow:none;}
.ret-otro > summary{list-style:none;}
.ret-otro > summary::-webkit-details-marker{display:none;}

/* La barra de arriba: de qué empresa, y la caja de preguntar */
/* LA BARRA DE ARRIBA se llamó «.barra» hasta el 10-nov-2026, y «.barra» ya era la
   barra de progreso (6px de alto, lo que sobra recortado): salía aplastada y
   medio escondida. Un nombre propio para que no vuelvan a pisarse. */
.barra-arriba{display:flex; align-items:center; gap:12px; padding:10px 26px; border-bottom:1px solid var(--linea); background:rgba(6,11,22,.6); position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);}
.empresas{position:relative;}
.empresas > summary{list-style:none; display:inline-flex; align-items:center; gap:9px; min-height:38px; padding:0 12px; border-radius:10px; border:1px solid var(--linea); background:var(--panel); font-size:13px; font-weight:600; cursor:pointer; color:var(--tinta);}
.empresas > summary::-webkit-details-marker{display:none;}
.empresas > summary:hover{border-color:var(--linea2);}
.empresas > summary svg{color:var(--dim);}
.empresas-lista{position:absolute; left:0; top:calc(100% + 6px); min-width:260px; max-height:60vh; overflow:auto; background:var(--panel); border:1px solid var(--linea2); border-radius:12px; padding:6px; box-shadow:var(--sombra); z-index:30;}
/* EL BOTÓN DEL CHAT, EN LA ESQUINA DE LA DERECHA (10-nov-2026). Era una caja
   de búsqueda de 560px en medio de la barra; Martín: «esto no me cuadra,
   ponlo en la esquina de la derecha con un botón». */
.barra-preguntar{flex:none; margin-left:auto; display:flex; align-items:center; gap:9px; min-height:38px; padding:0 14px; border-radius:10px; border:1px solid var(--acento); background:var(--acento-3); color:#fff; font:inherit; font-size:13px; font-weight:600; cursor:pointer; text-align:left;}
.barra-preguntar:hover{background:var(--acento);}
.barra-preguntar .tx{flex:none;}
.barra-preguntar kbd{border-color:rgba(255,255,255,.35) !important; color:rgba(255,255,255,.85) !important;}
.barra-preguntar kbd{font-family:var(--mono); font-size:11px; border:1px solid var(--linea2); border-radius:5px; padding:1px 6px; color:var(--dim);}

/* El chat central: a la derecha, en todas las pantallas */
.dock{position:fixed; top:0; right:0; bottom:0; width:min(420px, 100vw); background:var(--panel); border-left:1px solid var(--linea2); box-shadow:var(--sombra); z-index:60; display:flex; flex-direction:column;}
.dock[hidden],.dock-velo[hidden]{display:none !important;}
.dock-velo{position:fixed; inset:0; background:rgba(6,11,22,.55); z-index:55;}
.dock-cab{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid var(--linea);}
.dock-cab h2{margin:0; font-size:15px; font-weight:700;}
.dock-x{width:36px; height:36px; border-radius:9px; border:1px solid var(--linea); background:var(--panel2); color:var(--dim); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;}
.dock-x:hover{color:var(--tinta); border-color:var(--linea2);}
.dock-cuerpo{flex:1; min-height:0; overflow-y:auto; padding:16px 18px 20px; display:flex; flex-direction:column; gap:14px;}
.dock-intro{margin:0; font-size:13px; color:var(--dim); line-height:1.6;}
.dock-hilo{display:flex; flex-direction:column; gap:8px;}
.dock-yo{align-self:flex-end; max-width:88%; background:var(--acento-3); color:#fff; border-radius:12px 12px 4px 12px; padding:9px 13px; font-size:13px; white-space:pre-wrap; word-break:break-word;}
.dock-el{background:var(--panel2); border:1px solid var(--linea); border-radius:4px 12px 12px 12px; padding:11px 13px; font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word; max-height:46vh; overflow-y:auto;}
.dock-ejemplos{display:flex; flex-direction:column; gap:6px;}
.dock-ej{text-align:left; padding:8px 11px; border-radius:9px; background:var(--panel2); border:1px solid var(--linea); color:var(--dim); font:inherit; font-size:12.5px; cursor:pointer;}
.dock-ej:hover{color:var(--tinta); border-color:var(--acento);}
.dock-form{display:flex; flex-direction:column; gap:8px; margin-top:auto;}
.dock-a{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim);}
.dock-a select{flex:1; background:var(--panel2); border:1px solid var(--linea); color:var(--tinta); min-height:36px; border-radius:9px; padding:0 10px; font:inherit; font-size:12.5px;}
.dock-caja{display:flex; gap:8px; align-items:flex-end; background:var(--fondo); border:1px solid var(--linea2); border-radius:12px; padding:6px;}
.dock-caja textarea{flex:1; min-width:0; resize:vertical; min-height:44px; max-height:200px; background:none; border:0; outline:none; color:var(--tinta); font:inherit; font-size:13.5px; padding:8px;}
.dock-caja:focus-within{border-color:var(--acento);}
.dock-nota{margin:0; font-size:11px; color:var(--dim); line-height:1.5;}
.dock-vacio{font-size:13px; color:var(--dim); line-height:1.6;}
.dock-vacio b{color:var(--tinta);}
.dock-flota{display:none; position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:56px; height:56px; border-radius:16px; border:1px solid var(--acento); background:var(--acento-3); color:#fff; align-items:center; justify-content:center; box-shadow:var(--sombra); z-index:50; cursor:pointer;}
/* EL CHAT CONVIVE CON LA PÁGINA (10-nov-2026). Era un panel con un velo
   oscuro encima de todo: abrirlo tapaba lo que estabas mirando y tocar fuera
   lo cerraba. Martín: «si tengo el chat abierto también pueda ver e
   interactuar con lo otro sin que se cierre». En pantalla ancha, la página se
   corre a la izquierda y el chat queda al lado; el velo solo existe en el
   móvil, donde no hay sitio para los dos. */
@media (min-width:1100px){
  .dock-velo{display:none !important;}
  html.con-dock .app{padding-right:420px;}
  html.con-dock .barra-preguntar{visibility:hidden;}
}
.dock-el{white-space:normal;}
/* Los mensajes del chat de un agente: tú a la derecha, el agente a la izquierda. */
.msg-yo{align-self:flex-end; max-width:78%; background:var(--acento-3); color:#fff; border-radius:14px 14px 4px 14px; padding:10px 14px; font-size:14px; line-height:1.55; white-space:pre-wrap; word-break:break-word;}
.msg-yo a{color:#fff;}
.msg-ag{align-self:flex-start; max-width:min(780px, 94%); background:var(--panel2); border:1px solid var(--linea); border-radius:4px 14px 14px 14px; padding:14px 18px; display:flex; flex-direction:column; gap:8px;}
.msg-quien{display:flex; align-items:center; gap:8px;}
.ag-texto{font-size:14px; line-height:1.65; color:var(--tinta); word-break:break-word;}
.ag-texto p{margin:0 0 10px;}
.ag-texto p:last-child,.ag-texto .ag-lista:last-child{margin-bottom:0;}
.ag-texto strong{color:var(--tinta); font-weight:700;}
.t-ag{margin:14px 0 6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--acento-2);}
.t-ag:first-child{margin-top:0;}
.ag-lista{margin:0 0 12px; padding-left:22px; display:flex; flex-direction:column; gap:7px;}
.ag-lista li{padding-left:4px;}
.ag-sub{display:block; margin-top:4px; color:var(--dim);}
.ag-lista li::marker{color:var(--acento-2); font-weight:700;}
/* Mientras el agente trabaja: sus pasos y el texto en borrador. El borrador
   va en tenue y con su etiqueta: nada sin guardar se enseña como respuesta. */
.ag-vivo-pasos{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--dim);}
.ag-vivo-pasos li::before{content:"✓ "; color:var(--acento-2);}
.ag-vivo-pasos li.no::before{content:"✗ "; color:var(--dim);}
.ag-borrador{border-left:2px dashed var(--linea2); padding-left:10px; font-size:14px; line-height:1.65; color:var(--dim); white-space:pre-wrap; word-break:break-word;}
.ag-borrador-et{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); margin-bottom:4px;}
/* La caja de escribir de un agente: una sola pieza, con sus botones dentro. */
.compositor-ag{margin-top:14px; background:var(--fondo); border:1px solid var(--linea2); border-radius:12px; padding:6px 8px 6px 12px; display:flex; flex-direction:column; gap:2px;}
.compositor-ag:focus-within{border-color:var(--acento); box-shadow:0 0 0 3px rgba(61,126,240,.14);}
.compositor-ag textarea{width:100%; resize:none; min-height:24px; max-height:320px; overflow-y:auto; background:none; border:0; outline:none; color:var(--tinta); font:inherit; font-size:14px; line-height:1.5; padding:6px 0 2px;}
.compositor-ag .pz-boton{min-height:34px; padding:0 16px; font-size:13px;}
.compositor-pie{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.compositor-nota{font-size:11px; color:var(--dim);}
.compositor-extra{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 10px; border-radius:10px; border:1px solid var(--linea); background:var(--panel2); color:var(--dim); font:inherit; font-size:12.5px; cursor:pointer;}
.compositor-extra:hover{color:var(--tinta); border-color:var(--acento);}

@media (max-width:720px){
  .barra-arriba{padding:8px 12px; position:static; backdrop-filter:none;}
  .barra-preguntar{display:none;}
  .dock-flota{display:inline-flex;}
  .pz-grande{font-size:34px;}
  .pz-tabla th,.pz-tabla td{padding:10px 12px;}
}
/* ── PASAR DE UNA PANTALLA A OTRA SIN PARPADEO (11-nov-2026) ──────────────
   Al navegar, el navegador funde la pantalla vieja con la nueva en vez de
   dejarla en blanco un instante. Corto a propósito: es para que no
   parpadee, no una animación que haya que esperar. El menú lleva su propio
   nombre para quedarse quieto mientras cambia lo de la derecha. Quien pide
   menos movimiento no lo recibe. */
@view-transition { navigation: auto; }
.lateral { view-transition-name: lateral; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ── LAS PÁGINAS PÚBLICAS: privacidad, términos, borrado (12-nov-2026) ─────
   Las lee gente que no tiene cuenta —y el revisor de Meta—, así que no llevan
   barra lateral: una columna de lectura, con el tamaño de letra de un texto
   largo y no el de una tabla. Ver src/vistas/legales.ts. */
.legal{max-width:760px; margin:0 auto; padding:28px 18px 60px; font-size:15px; line-height:1.7;}
.legal-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--linea); margin-bottom:24px;}
.legal-marca{display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px;}
.legal-marca img{width:28px; height:28px; border-radius:8px;}
.legal-idioma{font-size:13px; color:var(--dim);}
.legal-idioma a{color:var(--acento-2);}
.legal h1{font-size:26px; line-height:1.25; letter-spacing:-.4px; margin:0 0 6px;}
.legal h2{font-size:17px; margin:30px 0 8px; letter-spacing:-.2px;}
.legal h3{font-size:15px; margin:20px 0 6px;}
.legal ul, .legal ol{padding-left:22px;}
.legal li{margin-bottom:6px;}
.legal a{color:var(--acento-2);}
.legal table{margin:10px 0 16px; font-size:13.5px;}
.legal th, .legal td{text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid var(--linea);}
.legal code{font-family:var(--mono); font-size:13px; background:var(--panel2); padding:1px 5px; border-radius:5px;}
.legal-nota{color:var(--dim); font-size:13px;}
.legal-recuadro{background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio); padding:16px 18px; margin:16px 0;}
.legal-recuadro form{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.legal-recuadro input, .legal-recuadro select{flex:1; min-width:180px; background:var(--panel2); border:1px solid var(--linea2); color:var(--tinta); border-radius:8px; padding:8px 10px; font:inherit; font-size:14px;}
.legal-estado{display:inline-block; font-weight:700; padding:2px 10px; border-radius:999px; background:var(--panel2); border:1px solid var(--linea2);}
.legal-estado.hecho{color:var(--ok); border-color:var(--ok);}
.legal-estado.abierto{color:var(--alerta); border-color:var(--alerta);}
.legal-pie{margin-top:40px; padding-top:16px; border-top:1px solid var(--linea); font-size:13px; color:var(--dim);}
.legal-pie a{color:var(--dim);}