/* ============================================================
   TEMA ICC — capa de coherencia visual (v2)
   Se carga DESPUÉS del <style> actual de index.html.
   v2 añade: interior de modales, chat, tablas de admin, selects,
   estados de carga/error y enlaces.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0&display=swap');

:root{
  --crema:#100D0B; --crema-2:#1A1514; --blanco:#171211;
  --tinta:#F2EBE6; --suave:#998D86; --tenue:#877D77;
  --linea:rgba(255,255,255,.07); --linea-2:rgba(255,255,255,.14);
  --terra:#F0793C; --ambar:#F5B08A; --salvia:#6FBF95; --uva:#9C8B82;
  --rojo:#E4695C;
  /* ICC-325 · el naranja tiene DOS trabajos, como el acento de ICC-183 y
     como el rojo de ICC-254: de relleno es `--terra` y de TEXTO sobre su
     propio tinte es este. Aquí vale lo mismo porque ya se lee (5,60 sobre
     el tinte más flojo) — `legible_sobre` no toca lo que ya pasaba. Existe
     igualmente para que la regla que lo use no se quede sin color en
     oscuro, que es cómo se pierde un texto sin que falle nada. */
  --terra-texto:#F0793C;
  --grad:linear-gradient(#F0793C,#F0793C);
  --glow:0 6px 18px rgba(240,121,60,.22);
  --glow-2:0 10px 26px rgba(240,121,60,.30);
  --sombra:0 1px 2px rgba(0,0,0,.4);
  --sombra-2:0 22px 50px rgba(0,0,0,.55);
  --fuente:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --tinta-boton:#180B04;
}

body{letter-spacing:-.005em;text-wrap:pretty}
h1,h2,h3{letter-spacing:-.025em}
a{color:var(--terra);text-decoration:none}
a:hover{color:var(--terra-hover)}

/* ---------- BOTONES ---------- */
.btn-prim,.modal button,.oferta button,#btn-recargar,button.prim,
#mis-agentes button.prim,#a-body .acc .prim,.c-input button,.chat-in button{
  background:var(--terra)!important;color:var(--tinta-boton)!important;
  border:0!important;box-shadow:none!important;font-weight:700;border-radius:10px;
}
.btn-prim:hover,.modal button:hover,.oferta button:hover,#btn-recargar:hover,
button.prim:hover,#mis-agentes button.prim:hover,.c-input button:hover{
  background:var(--terra-hover)!important;filter:none!important;transform:none!important;
}
/* secundario: contorno, nunca naranja relleno.
   OJO con `:not(.prim)` en .panel: sin él, el boton primario de un panel
   (Aprobar de ANNIA) heredaba color gris sobre fondo naranja = ilegible. */
.modal .acc button:not(.prim),#a-body .acc button:not(.prim),.panel button:not(.prim),
#mis-agentes button:not(.prim){
  background:transparent!important;color:var(--suave)!important;
  border:1px solid var(--linea-2)!important;box-shadow:none!important;border-radius:10px;
}
.modal .acc button:not(.prim):hover,#a-body .acc button:not(.prim):hover,
.panel button:not(.prim):hover,#mis-agentes button:not(.prim):hover{
  border-color:var(--terra)!important;color:var(--terra)!important;
}

/* ---------- CABECERA ---------- */
.top{border-bottom:1px solid var(--linea);padding-bottom:1rem}
.tokens,.perfil{box-shadow:none;background:var(--blanco);border-color:var(--linea)}
.tokens{border-color:var(--terra-28);background:var(--terra-08);color:var(--ambar);font-family:var(--mono);font-size:.82rem;font-weight:500}
.tokens .pt{background:var(--terra)}
.tokens small{color:var(--suave);font-family:var(--fuente)}
.glifo{background:var(--grad);color:var(--tinta-boton);font-family:var(--mono);border-radius:9px;box-shadow:none}
.avatar{background:var(--tile);color:var(--terra);font-family:var(--mono);font-size:.7rem;border-radius:50%}
.salir{color:var(--suave);font-weight:600}
.salir:hover{color:var(--tinta)}

/* ---------- CONCIERGE ---------- */
.conc{
  background:linear-gradient(180deg,var(--terra-12),var(--terra-02))!important;
  border:1px solid var(--terra-22);color:var(--tinta);border-radius:20px;padding:1.4rem 1.5rem;
}
.conc::after{display:none}
.conc .c-cara{background:var(--tile);border:1px solid var(--linea);border-radius:12px;width:44px;height:44px}
.conc .c-row h1{font-size:1.35rem}
.conc .c-row p{color:var(--suave)}
.c-input{background:var(--tile);border:1px solid var(--linea);box-shadow:none;border-radius:12px}
.c-input input{color:var(--tinta)}
.c-input input::placeholder{color:var(--tenue)}
.chip{background:transparent;border:1px solid var(--linea-2);color:var(--suave);border-radius:10px;font-size:.84rem}
.chip:hover{border-color:var(--terra);color:var(--terra);background:transparent}

/* ---------- SECCIONES Y MÓDULOS ---------- */
.sec-tit{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;color:var(--suave)}
.sec-tit .ln{background:var(--linea)}
.sec h2{font-size:1.25rem}
.mod{background:var(--crema-2);border:1px solid var(--linea);border-radius:16px;box-shadow:none;padding:1.15rem}
.mod:hover{transform:none;box-shadow:none;border-color:var(--terra-45);background:var(--crema-2-h)}
.mod .ic,.modal .ic,.chat-top .ic{
  background:var(--tile)!important;border:1px solid var(--linea);
  color:var(--terra)!important;border-radius:11px;
}
.mod .ic{width:38px;height:38px;margin-bottom:.85rem}
.mod h3{font-size:1rem}
.mod p{font-size:.84rem;color:var(--suave)}
.badge{font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.06em;text-transform:lowercase;
  padding:.25rem .5rem;border-radius:6px;background:var(--vel-4);color:var(--suave)}
.badge.new{background:var(--terra-14);color:var(--ambar)}
.badge.inc{background:var(--salvia-14);color:var(--salvia)}
.badge.lock{background:var(--vel-3);color:var(--tenue);border:0}
.mod.off{opacity:.42;filter:none}
.mod.off:hover{opacity:.7}

/* ---------- PANELES ---------- */
.panel,.oferta{background:var(--blanco);border:1px solid var(--linea);border-radius:18px;box-shadow:none}
.oferta{background:linear-gradient(180deg,var(--terra-12),var(--terra-02));border-color:var(--terra-22)}
.oferta .k{font-family:var(--mono);font-weight:500;letter-spacing:.14em;color:var(--terra)}
#btn-hoy{border:1px solid var(--terra-30)!important;color:var(--ambar)!important;background:var(--terra-08)!important}
.tokens b,.tokens span,#saldo-num,.kpi-num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- MODALES (todos los pop-ups pasan por aquí) ---------- */
.velo{background:var(--velo);backdrop-filter:blur(4px)}
.modal{background:var(--blanco);border:1px solid var(--linea);border-radius:20px;box-shadow:var(--sombra-2);text-align:left}
/* ---------- PANELES NUEVOS (ICC-118/122/124) ----------
   Mismo cristal que .modal, PERO SIN la clase `.modal`. Y es a propósito:
   la regla de arriba incluye `.modal button` con !important, así que dentro
   de un `.modal` TODO <button> sale naranja relleno y pisa cualquier estilo
   en línea (un !important de hoja gana a un estilo en línea normal).

   Eso está bien para los modales de siempre —cuatro botones, todos de
   acción—, pero los paneles nuevos de AI Studio, Artículos y Mi Web están
   hechos de botones que NO son acciones: fichas de tipo, chips de estilo,
   proporciones, filtros. Con esa regla salían todos naranja y la pantalla
   se volvía ilegible.

   `button.prim` se declara aparte (al final de este fichero) y no depende
   del contenedor, así que los botones primarios de estos paneles siguen
   siendo naranja con texto oscuro, como manda el diseño. */
.icc-panel{background:var(--blanco);border:1px solid var(--linea);border-radius:20px;
  box-shadow:var(--sombra-2);text-align:left;color:var(--tinta)}
.icc-panel h1,.icc-panel h2,.icc-panel h3{color:var(--tinta)}
.icc-panel button{font-family:var(--fuente);cursor:pointer}
/* El botón secundario del panel: contorno, nunca relleno. */
.icc-panel button:not(.prim){background:transparent;color:var(--suave);
  border:1px solid var(--linea-2);border-radius:10px;font-weight:600}
.icc-panel button:not(.prim):hover:not(:disabled){border-color:var(--terra);color:var(--terra)}
.modal>.ic{margin:0 0 .9rem}          /* icono a la izquierda, no centrado */
.modal h3{font-size:1.15rem;margin-bottom:.3rem}
.modal p{color:var(--suave);font-size:.88rem}
.modal .ic{width:44px;height:44px;border-radius:12px}
.modal-x{color:var(--suave);border-radius:8px}
.modal-x:hover{background:var(--vel-4);color:var(--tinta)}
/* filas de lista dentro de modales (leads, clientes, facturas, inbox…) */
.modal [style*="border-bottom:1px solid var(--linea)"]{padding:.7rem 0!important}
.modal .acc{gap:.5rem;margin-top:1rem}
.modal .acc button{font-size:.84rem;padding:.6rem 1rem}
/* chevron de fila */
.modal span[style*="font-size:1.1rem"]{color:var(--tenue)!important}

/* ---------- FORMULARIOS ---------- */
.campo input,.a-in{background:var(--crema);border:1px solid var(--linea);border-radius:10px;color:var(--tinta);font-size:.9rem}
.campo input:focus,.a-in:focus{border-color:var(--terra);background:var(--crema-2);outline:none}
.a-lbl{font-family:var(--fuente);font-size:.76rem;color:var(--suave);font-weight:600}
select.a-in{appearance:none;background-image:none;padding-right:.7rem;cursor:pointer}
textarea.a-in{background:var(--crema)!important;line-height:1.5}
input[type=file].a-in::file-selector-button{background:var(--terra);color:var(--tinta-boton);border-radius:8px;font-weight:700}

/* ---------- LOGIN ---------- */
#auth{background:var(--crema)}
.auth-card{background:var(--blanco);border:1px solid var(--linea);border-radius:20px;box-shadow:var(--sombra-2);padding:2rem 1.9rem}
.brand b{font-size:1.05rem}
.auth-sub{color:var(--suave);font-size:.88rem}
.tabs{background:var(--crema-2);border:1px solid var(--linea);border-radius:12px}
.tabs button{font-weight:600;font-size:.88rem}
.tabs button.on{background:var(--blanco);box-shadow:none;color:var(--tinta)}
.aviso{color:var(--rojo);font-size:.82rem}
.pass-wrap .ojito{opacity:.4}
.pass-wrap .ojito:hover{opacity:.8}

/* ---------- CHAT ---------- */
#chat{background:var(--velo-2);backdrop-filter:blur(3px)}
.chat-panel{background:var(--crema);box-shadow:-24px 0 60px rgba(0,0,0,.6);border-left:1px solid var(--linea)}
.chat-top{background:var(--blanco);border-color:var(--linea)}
.chat-msgs{padding:1.2rem 1.1rem}
.msg{font-size:.9rem;border-radius:14px}
.msg.bot{background:var(--crema-2);border-color:var(--linea)}
.msg.user{background:var(--terra);color:var(--tinta-boton)}
.msg.sys{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--tenue)}
.chat-in{background:var(--blanco);border-color:var(--linea)}
.chat-in input{background:var(--crema);border-color:var(--linea);border-radius:10px}

/* ---------- ADMIN ---------- */
.admin-tabs{border-color:var(--linea);gap:.35rem}
.admin-tabs button{background:transparent;border:1px solid var(--linea);color:var(--suave);border-radius:10px;font-size:.82rem;font-weight:600}
.admin-tabs button:hover{border-color:var(--terra);color:var(--terra)}
.admin-tabs button.on{background:var(--terra);color:var(--tinta-boton);border-color:transparent;box-shadow:none}
.tab-grupo{font-family:var(--mono);letter-spacing:.12em;font-weight:500;font-size:.64rem}
.tab-sep{background:var(--linea)}
#a-body table{width:100%;border-collapse:collapse;font-size:.85rem}
#a-body th{font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--suave);text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--linea)}
#a-body td{padding:.65rem .5rem;border-bottom:1px solid var(--linea)}
#a-body tr:hover td{background:var(--vel-2)}

/* ---------- ESTADOS ---------- */
/* ICC-254 · `--rojo-fondo` y no `--rojo`: aquí el rojo es SUPERFICIE con
   texto blanco encima, y `--rojo` en oscuro es un rojo claro (#E4695C) que
   deja ese blanco en 3,24. Medido. `--rojo` sirve para texto rojo sobre el
   fondo del panel, que es el requisito contrario. */
.notif-badge{background:var(--rojo-fondo);font-family:var(--mono);font-weight:500}
/* ICC-254 · aquí había un rescate:
       [style*="color:#c0392b"]{color:var(--rojo)!important}
   Nació para tapar los rojos escritos a fuego en estilos EN LÍNEA, que ninguna
   hoja puede pisar de otra forma. Funcionaba, y por eso el problema dejó de
   verse — y siguió creciendo: de 161 a 187 apariciones.
   Tres cosas malas tenía. Solo cubría `color:` (ni fondos, ni bordes, ni los
   translúcidos). Se rompía con un espacio: `color: #c0392b` no casa. Y como
   rescataba en silencio, cada rojo nuevo mal escrito nacía ya tapado, así que
   nadie se enteraba nunca.
   Ahora los 170 sitios usan el token, así que este selector no rescata a nadie
   y se va. Lo que impide que vuelvan es un test, no un `!important`. */

/* ---------- PIE ---------- */
.pie{border-color:var(--linea)}
.pie-links a,.pie-legal{font-size:.78rem;color:var(--tenue)}
.pie-links a:hover{color:var(--terra)}

/* ---------- ICONOS DE LÍNEA (los pinta iconos-icc.js) ---------- */
.msym{
  font-family:'Material Symbols Outlined'!important;
  font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;
  text-transform:none;white-space:nowrap;direction:ltr;
  -webkit-font-feature-settings:'liga';font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
}
.mod .ic.msym{font-size:20px}
.modal .ic.msym{font-size:22px}
.chat-top .ic.msym{font-size:19px}
.ag-ic.msym{font-size:18px;color:var(--terra)}
.ag-ic{width:32px;height:32px;border-radius:9px;background:var(--tile);
  border:1px solid var(--linea);display:grid;place-items:center;flex:none}

/* ============================================================
   AJUSTES DE INTEGRACIÓN (ICC-96)
   Piezas que el panel ya tenía y que el tema base no cubría:
   pestañas de Mi Web, lightbox de imágenes, plan editorial,
   avisos y el bloque de puesta en marcha.
   ============================================================ */

/* Pestañas redondeadas (Mi Web) y chips de filtro: naranja plano + texto oscuro */
#mw-tabs button{font-family:var(--fuente)}
#mw-tabs button[style*="var(--grad)"]{color:var(--tinta-boton)!important}

/* Avisos en verde (guardado, publicado): tono salvia del sistema */
/* ICC-254 · aquí había otro rescate por [style*=…], el hermano del rojo:
   tapaba un verde viejo (#5aa46d) escrito a fuego. Sus cuatro usos ya son
   tokens, así que sobra. */
[style*="color:var(--salvia)"]{color:var(--salvia)!important}

/* Tarjeta "cómo se verá en Google": el azul de Google se respeta, el marco no */
#mw-seo>div,#pf-seo>div{background:var(--crema)!important;border-color:var(--linea)!important}

/* Vista previa de la web y lightbox */
#mw-preview,#ew-preview{background:#fff}
.modal iframe{border-radius:12px}

/* Plan editorial: filas y cabeceras de semana */
#pl-lista .sec-tit{margin:1.1rem 0 .55rem}

/* Puesta en marcha (onboarding-icc.js) */
#puesta-marcha button.prim{padding:.55rem 1.1rem}

/* La rejilla de módulos respira más en pantallas grandes */
@media(min-width:1100px){.modulos{gap:1.1rem}}

/* ---- Correcciones tras probar el tema sobre el panel real (ICC-96) ---- */

/* La ✕ de los modales NO es un botón primario */
.modal button.modal-x,.modal button.modal-x:hover{
  background:transparent!important;color:var(--suave)!important;box-shadow:none!important;
  border:0!important;border-radius:8px;padding:.35rem .45rem;
}
.modal button.modal-x:hover{background:var(--vel-4)!important;color:var(--tinta)!important}

/* Pestañas dentro de un modal (Mi Web): activa naranja, inactivas contorneadas */
.modal .mw-tab{
  background:transparent!important;color:var(--suave)!important;
  border:1px solid var(--linea-2)!important;box-shadow:none!important;
  border-radius:999px;font-size:.8rem;padding:.35rem .8rem;font-weight:600;
}
/* El fondo se declara a propósito: `.modal button:hover` (arriba, con
   !important) rellena de naranja CUALQUIER botón del modal, y una pestaña con
   texto naranja sobre fondo naranja no se lee. Cambiar solo el borde y el color
   parecía suficiente y no lo era. */
.modal .mw-tab:hover{background:transparent!important;
  border-color:var(--terra)!important;color:var(--terra)!important}
.modal .mw-tab.on,.modal .mw-tab.on:hover{
  background:var(--terra)!important;color:var(--tinta-boton)!important;
  border-color:transparent!important;font-weight:700;
}

/* Los <select> siguen pareciendo desplegables (el tema base les quitó la flecha) */
select.a-in{
  background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),
                   linear-gradient(135deg,var(--suave) 50%,transparent 50%)!important;
  background-position:calc(100% - 15px) calc(50% + 1px),calc(100% - 10px) calc(50% + 1px)!important;
  background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important;
  padding-right:2rem!important;
}

/* Enlaces-botón naranjas (Ver mi web, Descargar): texto oscuro como los botones */
a[style*="var(--grad)"]{color:var(--tinta-boton)!important}

/* ============================================================
   DASHBOARD v2 (ICC-97) — medidas tomadas del diseño
   (IA Control Center.dc.html). Contenedor 1160, cabecera 68,
   hero 38px/-0.03em, rejilla 1fr 340 gap 20.
   ============================================================ */

:root{ --texto-2:#A2948C; --linea-3:rgba(255,255,255,0.10); }

/* ---------- TOKENS DE SUPERFICIE Y TINTES (ICC-126) ----------
   El modo claro funciona redefiniendo tokens: todo color que se escriba a
   pelo se queda oscuro cuando el usuario cambia de tema. Los paneles nuevos
   (AI Studio, Artículos, Mi Web, Vacíos) se transcribieron de la maqueta con
   hex literales, así que hacían falta estos tokens para poder convertirlos.

   Los tintes con alfa (--terra-14, --salvia-18…) existen porque
   `rgba(240,121,60,.14)` NO sigue al token: en claro el naranja pasa a
   #C4501E y ese rgba se quedaría con el naranja de oscuro. */
:root{
  --tile:#0C0908;            /* cuadro donde vive un icono */
  --hueco:#141010;           /* cajas vacías y esqueletos */
  --texto-3:#D6CBC4;         /* texto de tarjeta, por encima de --texto-2 */
  --tenue-2:#4F4642;         /* el gris más apagado que se usa */
  --terra-hover:#FF8B4F;
  --sello:rgba(8,6,5,.72);   /* etiqueta sobre una foto */
  --fade:linear-gradient(180deg,rgba(16,13,11,0) 30%,rgba(16,13,11,.9) 100%);

  --terra-02:rgba(240,121,60,.02); --terra-04:rgba(240,121,60,.04);
  --terra-06:rgba(240,121,60,.06); --terra-08:rgba(240,121,60,.08);
  --terra-12:rgba(240,121,60,.12); --terra-14:rgba(240,121,60,.14);
  --terra-20:rgba(240,121,60,.20); --terra-22:rgba(240,121,60,.22);
  --terra-24:rgba(240,121,60,.24); --terra-28:rgba(240,121,60,.28);
  --terra-30:rgba(240,121,60,.30); --terra-45:rgba(240,121,60,.45);
  --terra-50:rgba(240,121,60,.50);

  --salvia-08:rgba(111,191,149,.08); --salvia-14:rgba(111,191,149,.14);
  --salvia-18:rgba(111,191,149,.18); --salvia-30:rgba(111,191,149,.30);

  --rojo-08:rgba(228,105,92,.08); --rojo-20:rgba(228,105,92,.20);
  --rojo-35:rgba(228,105,92,.35); --rojo-claro:#F0A79E;
  /* ICC-254 · el rojo de SUPERFICIE, y es el mismo en los dos temas a
     propósito. `--rojo` cambia porque es para texto rojo sobre el fondo del
     panel; una superficie roja con texto BLANCO encima pide lo contrario —un
     rojo oscuro—, y usar `--rojo` aquí deja el blanco en 3,24 sobre el
     #E4695C del tema oscuro. Medido. */
  --rojo-fondo:#C0392B;
  /* ICC-316 · el mismo reparto para el ámbar, y hacía falta por lo mismo.
     `--ambar` es TEXTO y en claro es un naranja oscuro (#B1450E); usarlo de
     superficie con texto casi negro encima deja ese texto en 3,29. Este es el
     ámbar claro que hasta hoy estaba escrito a fuego —el #E8B563 de la nota de
     ICC-216—, y como superficie es el mismo en los dos temas: 9,90 con el
     #1a1206 que lleva encima. Medido. */
  --ambar-fondo:#E8B563;
  /* ICC-344 · el tinte de `--ambar`, para la franja de «los mensajes no te
     llegan». Es un AVISO —hay algo que hacer— y no un error, así que no puede
     ir con el rojo. Se construye del ámbar de ESTE tema y por eso los dos
     valores son distintos en claro: allí `--ambar` es un naranja oscuro y el
     mismo alfa sobre papel blanco sale mucho más cargado. Es el reparto que ya
     tienen `--terra-08` y `--rojo-08`. */
  --ambar-08:rgba(245,176,138,.08); --ambar-30:rgba(245,176,138,.30);

  --vel-1:rgba(255,255,255,.015); --vel-2:rgba(255,255,255,.03);
  --vel-3:rgba(255,255,255,.045); --vel-4:rgba(255,255,255,.06);
  --vel-5:rgba(255,255,255,.08);  --vel-6:rgba(255,255,255,.09);
  --vel-7:rgba(255,255,255,.18);

  /* Estados y superficies que antes iban a pelo (ICC-130). */
  --crema-2-h:#1F1816;        /* tarjeta con el ratón encima */
  --hueco-h:#1B1614;          /* fila de rejilla con el ratón encima */
  --barra:rgba(26,21,20,.92); /* barra flotante del Concierge */
  --velo:rgba(8,6,5,.72);     /* fondo detrás de un modal */
  --velo-2:rgba(8,6,5,.6);    /* fondo detrás del chat lateral */
}


.app{max-width:1160px;margin:0 auto;padding:0 24px 40px}

/* ---- cabecera ---- */
.top{display:flex;align-items:center;justify-content:space-between;height:68px;
  padding:0;margin:0;border-bottom:1px solid var(--linea)}
.top .logo{display:flex;align-items:center;gap:12px}
.glifo{width:30px;height:30px;border-radius:9px;font-size:13px;font-weight:600}
.top .logo>span:last-child{display:flex;flex-direction:column;gap:1px;font-size:14px;font-weight:700;letter-spacing:-.01em}
.top .logo small{font-size:11px;color:var(--suave);font-weight:500}
.top-r{display:flex;align-items:center;gap:10px}
.tokens{height:34px;padding:0 12px;border-radius:999px;
  border:1px solid var(--terra-28);background:var(--terra-08);gap:8px}
.tokens .pt{width:6px;height:6px;border-radius:50%;background:var(--terra);font-size:0}
.tokens>span:nth-child(2),.tokens #saldo{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ambar)}
.tokens small{font-size:11px;color:var(--suave)}
.perfil{height:34px;padding:0 12px 0 6px;border-radius:999px;
  border:1px solid var(--vel-5);background:var(--crema-2);gap:8px}
.avatar{width:22px;height:22px;font-size:10px}
.perfil b{font-size:12.5px;font-weight:600}
.salir{background:transparent!important;border:0!important;box-shadow:none!important;
  font-size:12.5px;color:var(--suave)!important;font-weight:500;padding:.3rem .2rem}
.salir:hover{color:var(--tinta)!important}

/* ---- saludo + KPIs ---- */
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  padding:44px 0 28px;flex-wrap:wrap}
.hero-txt{max-width:560px;flex:1;min-width:280px}
.hero .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--suave);text-transform:uppercase;margin-bottom:14px}
.hero h1{margin:0;font-size:38px;line-height:1.1;font-weight:800;letter-spacing:-.03em}
.hero p{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--texto-2)}
.kpis{display:flex;gap:8px;flex-shrink:0}
.kpi{min-width:118px;padding:16px 18px;border-radius:14px;
  border:1px solid var(--linea);background:var(--blanco);text-align:left}
.kpi b{display:block;font-family:var(--mono);font-size:24px;font-weight:600;
  letter-spacing:-.02em;color:var(--tinta);font-variant-numeric:tabular-nums}
.kpi span{display:block;font-size:11.5px;color:var(--suave);margin-top:4px}
/* El paso de las cifras estimadas a las medidas (ICC-265).
   `flex-basis:100%` lo baja a su propia línea dentro de `.hero`, que ya es
   `flex-wrap:wrap`: metido como tercer hermano a secas se colocaría ENTRE el
   saludo y los KPI y descuadraría la cabecera (la lección de ICC-237 — antes de
   añadir un hijo a un flex, mira qué hace el reparto).
   Y con su propia regla, no con el `button` de fábrica: fuera de `.panel` y de
   `.modal` no le alcanza ninguna, y se quedaría con el gris de Chrome en mitad
   del tema oscuro (ICC-216). */
.kpi-mas{flex-basis:100%;align-self:flex-end;margin-top:8px;text-align:right;
  background:transparent;border:none;padding:2px 2px 0;font-size:12px;
  font-weight:700;color:var(--terra)}
.kpi-mas:hover{text-decoration:underline}
@media(max-width:760px){.kpi-mas{text-align:center}}

/* ---- rejilla principal ---- */
.grid-main{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.col-r{display:flex;flex-direction:column;gap:16px}
.col-r .panel{border-radius:18px;border:1px solid var(--linea);background:var(--blanco);padding:20px}

/* saldo */
.saldo-num{display:flex;align-items:baseline;gap:8px;margin-top:12px;
  font-family:var(--mono);font-size:30px;font-weight:600;color:var(--terra);letter-spacing:-.02em}
.saldo-num small{font-family:var(--fuente);font-size:12px;color:var(--suave);font-weight:500}
.desglose{display:flex;flex-direction:column;gap:7px;margin:16px 0 0}
.desg-fila{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--texto-2)}
.desg-fila b{font-family:var(--mono);font-weight:400;color:var(--tenue)}
.desg-vacio{font-size:12px;color:var(--tenue)}
/* "Recargar tokens" es contorneado, no relleno (así el único botón lleno de la
   pantalla es la acción del paso siguiente) */
#btn-recargar{height:38px;margin-top:16px;border:1px solid var(--terra-30)!important;
  border-radius:10px;background:var(--terra-08)!important;color:var(--ambar)!important;
  font-size:13px;font-weight:600;box-shadow:none!important}
#btn-recargar:hover{background:var(--terra-20)!important;color:var(--ambar)!important}
#annia-panel .k+*{margin-top:0}
#btn-hoy{height:auto;font-family:var(--mono)!important;font-size:10px!important;
  letter-spacing:.06em;padding:3px 8px!important;border-radius:6px!important;
  background:var(--terra-12)!important;border:0!important;color:var(--terra)!important}

/* ---- cabeceras de sección ---- */
.sec-cab{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:52px 0 18px}
.sec-cab h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.sec-nota{font-size:12.5px;color:var(--suave)}

/* ---- equipo de agentes ---- */
/* `minmax(0,1fr)` y no `1fr` (ICC-237).
 *
 * `1fr` es `minmax(auto,1fr)`, y ese `auto` es el MIN-CONTENT del item: si una
 * tarjeta pide 680 px, la columna mide 680 px aunque el contenedor tenga 1112
 * y sean tres. La rejilla no se encoge: **empuja la pagina**, y aparece una
 * barra horizontal en todo el panel con los ultimos agentes cortados.
 *
 * Es la misma aritmetica que ICC-230 y la conclusion opuesta, a proposito:
 * alli una ETIQUETA no podia bajar de su palabra (`minmax(min-content,1fr)`)
 * porque encogerla la pintaba encima de su valor; aqui una TARJETA si puede
 * encogerse —su texto envuelve— y lo que no puede es ensanchar la pagina.
 * La regla, entonces: `min-content` cuando el item NO debe encoger, `0` cuando
 * el item PUEDE envolver y lo que no debe es desbordar. */
.rejilla-2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ag-card{border-radius:16px;border:1px solid var(--vel-6);background:var(--crema-2);
  padding:18px;display:block}
.ag-card .ag-fila{display:flex;align-items:center;gap:11px}
.ag-ic{width:36px;height:36px;border-radius:11px;background:var(--tile);
  border:1px solid var(--linea);display:grid;place-items:center;flex:none;color:var(--terra)}
.ag-txt{flex:1;min-width:0}
.ag-txt b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.ag-txt small{display:block;font-size:12px;color:var(--suave)}
.ag-on{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--salvia)}
.ag-on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--salvia)}
.ag-mods{margin-top:14px;padding-top:13px;border-top:1px solid var(--vel-4);
  font-size:12.5px;color:var(--texto-2);line-height:1.5}
.ag-abrir{margin-top:12px;width:100%;height:34px;font-size:12.5px;
  background:transparent!important;border:1px solid var(--linea-2)!important;
  color:var(--suave)!important;box-shadow:none!important;border-radius:9px}
.ag-abrir:hover{border-color:var(--terra)!important;color:var(--terra)!important}
/* los que puedes contratar: caja de borde discontinuo */
.lista-caja#agentes-contratar{margin-top:12px;border-radius:16px;
  border:1px dashed var(--linea-3);background:var(--hueco);padding:6px}
.fila-ag{display:flex;align-items:center;gap:14px;padding:13px 14px;border:0}
.fila-ag .ag-ic{width:32px;height:32px;border-radius:9px;color:var(--uva)}
.fila-ag .fila-txt b{font-size:14px;font-weight:600}
.fila-ag .fila-txt small{font-size:12.5px;color:var(--tenue);margin-top:2px}
.ag-precio{font-family:var(--mono);font-size:12.5px;color:var(--texto-2);white-space:nowrap}
.fila-ag button{height:32px;padding:0 15px;border-radius:9px;font-size:12.5px;font-weight:600;
  background:transparent!important;border:1px solid var(--linea-2)!important;
  color:var(--tinta)!important;box-shadow:none!important}
.fila-ag button:hover{border-color:var(--terra)!important;color:var(--terra)!important}

/* ---- módulos destacados ---- */
/* minmax(0,1fr), por lo mismo que `.rejilla-2` unas lineas mas
   arriba: `1fr` deja que el min-content de una tarjeta empuje la
   pagina entera en vez de encogerse (ICC-237). */
.modulos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mod{border-radius:16px;border:1px solid var(--vel-6);background:var(--crema-2);
  padding:20px;min-height:150px;display:flex;flex-direction:column;position:relative}
.mod .ic{width:38px;height:38px;border-radius:11px;margin:0}
.mod .badge{position:absolute;top:20px;right:20px}
.mod h3{margin-top:auto;font-size:16px;font-weight:700;letter-spacing:-.015em}
.mod p{font-size:12.5px;color:var(--suave);margin-top:5px;line-height:1.5}

/* ---- grupos en rejilla con separadores de 1px ---- */
.sec-tit{display:flex;align-items:center;gap:12px;margin:30px 0 12px}
.sec-tit>span:first-child{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--suave);text-transform:uppercase}
.sec-tit .ln{flex:1;height:1px;background:var(--linea)}
.lista-caja.rejilla-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.fila-mod{display:flex;align-items:center;gap:12px;padding:15px 16px;background:var(--hueco);
  cursor:pointer;border:0}
.fila-mod:hover{background:var(--hueco-h)}
.fila-mod .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--tile)!important;border:1px solid var(--linea);color:var(--uva)!important;
  font-size:.9rem;flex:none}
.fila-txt{flex:1;min-width:0}
.fila-txt b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila-txt small{display:block;font-size:11.5px;color:var(--tenue);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.punto{width:6px;height:6px;border-radius:50%;flex:none;background:var(--salvia)}
.punto.aviso{background:var(--terra)}
.punto.bloq{background:var(--tenue-2)}
.fila-mod.off{opacity:1}
.fila-mod.off .fila-txt b,.fila-mod.off .ic{opacity:.55}

/* ---- pie ---- */
.pie{display:flex;align-items:center;justify-content:space-between;margin-top:64px;
  padding-top:22px;border-top:1px solid var(--linea)}
.pie-legal{font-size:11.5px;color:var(--tenue)}
.pie-links{display:flex;gap:20px}
.pie-links a{font-size:11.5px;color:var(--tenue)}
.pie-links a:hover{color:var(--terra)}

/* ---- Concierge: pegado abajo, dentro del flujo ---- */
.conc-bar{position:sticky;bottom:20px;z-index:20;margin:28px 0 0;
  display:flex;align-items:center;gap:10px;padding:9px 9px 9px 18px;border-radius:16px;
  border:1px solid var(--linea-3);background:var(--barra);backdrop-filter:blur(14px);
  box-shadow:0 18px 40px rgba(0,0,0,.5)}
.conc-pt{width:7px;height:7px;border-radius:50%;background:var(--terra);flex:none}
.conc-bar input{flex:1;min-width:100px;height:38px;border:0;outline:0;background:transparent;
  color:var(--tinta);font-size:14px}
.conc-chips{display:flex;gap:6px}
.conc-bar .chip{height:34px;display:inline-flex;align-items:center;padding:0 12px;
  border:1px solid var(--linea-3);border-radius:9px;background:transparent;color:var(--texto-2);
  font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer}
.conc-bar .chip:hover{border-color:var(--terra);color:var(--terra)}
.conc-bar button{height:38px;padding:0 18px;border-radius:10px;font-size:13px;font-weight:700;
  background:var(--terra)!important;color:var(--tinta-boton)!important;border:0!important;box-shadow:none!important}
.conc-bar button:hover{background:var(--terra-hover)!important}

/* ---- responsive ---- */
@media(max-width:1000px){
  .grid-main{grid-template-columns:1fr}
  .rejilla-2,.modulos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lista-caja.rejilla-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .app{padding:0 14px 30px}
  .top{height:auto;padding:12px 0;flex-wrap:wrap;gap:.6rem}
  .hero{padding:28px 0 20px}
  .hero h1{font-size:28px}
  .kpis{width:100%}.kpi{flex:1;min-width:0;padding:12px 10px;text-align:center}
  .rejilla-2,.modulos,.lista-caja.rejilla-3{grid-template-columns:minmax(0,1fr)}
  .conc-chips{display:none}
  .pie{flex-direction:column;gap:.8rem;align-items:flex-start}
}

/* ---- contraste de botones (ICC-98) ----
   El primario lleva SIEMPRE texto oscuro sobre naranja, esté donde esté.
   Se declara al final para que gane a cualquier regla anterior. */
button.prim,.acc button.prim,.panel button.prim,.modal button.prim,#annia-propuestas button.prim{
  background:var(--terra)!important;color:var(--tinta-boton)!important;
  border:0!important;box-shadow:none!important;font-weight:700}
button.prim:hover,.acc button.prim:hover{background:var(--terra-hover)!important;color:var(--tinta-boton)!important}
button.prim:disabled,button:disabled{opacity:.5;cursor:default}

/* Tamaño del glifo según dónde vive (ICC-98) */
.mod .ic.msym{font-size:20px}
.fila-mod .ic.msym{font-size:17px}
.ag-card .ag-ic.msym{font-size:19px}
.fila-ag .ag-ic.msym{font-size:17px}

/* ---- Puesta en marcha: fases completado / pulso / alerta (ICC-99) ---- */
#puesta-marcha{margin-bottom:0}
#puesta-marcha .msym{font-family:'Material Symbols Outlined'!important}
#puesta-marcha button.prim{height:38px;padding:0 18px}

/* ---- Mi Web, arriba del todo hasta que la publique (ICC-256) ----
   Va ANTES de `.grid-main` y a todo lo ancho: lo primero que ve el cliente
   mientras tenga una web escrita esperando un clic. El bloque entero lo
   monta `assets/miweb-hero-icc.js`, que también lo quita al publicar.

   El botón secundario lleva su regla propia y esto NO es un detalle: las
   reglas de secundario del tema cuelgan de `.modal`, `#a-body .acc`,
   `.panel` y `#mis-agentes`, y este bloque no es ninguno de los cuatro. Sin
   esto se quedaría con los estilos de fábrica del navegador —gris claro
   relleno en mitad del tema oscuro—, que es exactamente el fallo de ICC-216:
   se pinta, se pulsa, funciona, y no lo cubre ninguna regla. */
#miweb-hero{display:grid;grid-template-columns:1fr 396px;align-items:stretch;
  border-radius:20px;overflow:hidden;margin-bottom:1.25rem;
  border:1px solid var(--terra-28);
  background:linear-gradient(135deg,var(--terra-12),var(--terra-02) 46%,var(--blanco))}
#miweb-hero .msym{font-family:'Material Symbols Outlined'!important}
/* ICC va preinstalado en portátiles y los iconos vienen de Google Fonts, así
   que sin red `iconos-icc.js` VACÍA los `.msym` para no enseñar la palabra
   «rocket_launch» dentro de un botón (ICC-155). Aquí todos son decorativos
   —el texto dice lo mismo—, pero el `gap` del flex se queda igual y deja un
   hueco delante de cada frase. Se ve, y parece un fallo de maquetación. */
#miweb-hero .msym:empty{display:none}
.mwh-txt{padding:1.75rem 1.9rem 1.9rem;min-width:0}
.mwh-et{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--terra)}
.mwh-pt{width:6px;height:6px;border-radius:50%;background:var(--terra);flex:none}
#miweb-hero h2{margin:1rem 0 0;font-size:1.85rem;line-height:1.12;font-weight:800;
  max-width:22ch;text-wrap:balance}
#miweb-hero p{margin:.75rem 0 0;font-size:.95rem;line-height:1.6;color:var(--suave);
  max-width:48ch}
.mwh-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.35rem}
.mwh-acc{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.45rem}
#miweb-hero button.prim{height:46px;padding:0 1.35rem;display:inline-flex;align-items:center;
  gap:.55rem;font-size:.95rem;border-radius:12px}
#miweb-hero button:not(.prim){height:46px;padding:0 1.1rem;background:transparent;
  color:var(--tinta);border:1px solid var(--linea-2);border-radius:12px;font-weight:600;
  font-size:.88rem}
#miweb-hero button:not(.prim):hover{border-color:var(--terra);color:var(--terra)}
.mwh-pie{display:flex;align-items:center;gap:.45rem;margin-top:1rem;font-size:.78rem;
  color:var(--tenue);line-height:1.5}
.mwh-pie .msym{flex:none}

/* La previa: su web de verdad, en pequeño y sin ratón. */
.mwh-previa{border-left:1px solid var(--linea);background:var(--crema);padding:1.35rem;
  cursor:pointer;display:flex;flex-direction:column;gap:.75rem;min-width:0}
.mwh-previa:hover{background:var(--crema-2)}
.mwh-barra{display:flex;align-items:center;gap:.5rem;height:30px;padding:0 .6rem;
  border-radius:9px;background:var(--tile);border:1px solid var(--linea)}
.mwh-luces{display:flex;gap:4px;flex:none}
.mwh-luces i{width:7px;height:7px;border-radius:50%;background:var(--linea-2)}
.mwh-url{flex:1;min-width:0;font-family:var(--mono);font-size:.66rem;color:var(--suave);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mwh-borr{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--tenue);
  text-transform:uppercase;flex:none}
/* `contain` y una altura fija: la previa es una FOTO. Sin altura, el iframe
   crece con la web y una de veinte secciones estiraría el dashboard entero. */
/* El blanco es a propósito y no se tokeniza: es el PAPEL de su web, que es
   blanca en los dos temas porque es una página, no una superficie nuestra.
   Es el mismo blanco que la previa grande de Mi Web. */
.mwh-marco{flex:1;min-height:210px;border-radius:12px;border:1px solid var(--linea);
  background:#fff;overflow:hidden;position:relative}
.mwh-marco iframe{position:absolute;top:0;left:0;width:1200px;height:900px;border:0;
  transform:scale(.29);transform-origin:0 0;pointer-events:none}
.mwh-firma{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);
  font-size:.66rem;color:var(--suave)}
.mwh-firma .msym{color:var(--terra)}

@media(max-width:900px){
  #miweb-hero{grid-template-columns:1fr}
  /* En móvil la previa va DEBAJO y más baja: arriba empujaría el titular y la
     acción fuera de la primera pantalla, que es donde tienen que estar. */
  .mwh-previa{border-left:0;border-top:1px solid var(--linea)}
  .mwh-marco{min-height:150px}
  #miweb-hero h2{font-size:1.5rem}
}

/* ---- equilibrio del dashboard (ICC-100) ----
   En la fase de pulso, ANNIA se muda a la columna ancha y sus propuestas se
   reparten en dos columnas: si no, quedaba una tarjeta estirada y rara. */
.annia-ancho #annia-propuestas{display:grid!important;grid-template-columns:repeat(2,1fr);
  gap:.8rem!important;align-items:stretch}
@media(max-width:820px){.annia-ancho #annia-propuestas{grid-template-columns:1fr}}
#annia-propuestas>div{display:flex;flex-direction:column}

/* Aprobar / Ahora no: separados y con el primario mandando */
.acc{display:flex;gap:8px;align-items:center}
#annia-propuestas .acc{margin-top:auto;padding-top:.7rem}
#annia-propuestas .acc button{height:36px;padding:0 14px;font-size:13px;border-radius:10px}
#annia-propuestas .acc button.prim{flex:1}

/* ---- Anuncio / oferta bajo el saldo (ICC-101) ---- */
#panel-anuncio{position:relative}
#panel-anuncio.anuncio-oferta{background:linear-gradient(180deg,var(--terra-12),var(--terra-02));
  border-color:var(--terra-22)}
.anuncio-cab{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.anuncio-cab .ic{width:32px;height:32px;border-radius:9px;background:var(--tile)!important;
  border:1px solid var(--linea);color:var(--terra)!important;display:grid;place-items:center;flex:none}
.anuncio-cab .ic.msym{font-size:17px}
.anuncio-cab .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--suave);flex:1}
#panel-anuncio .anuncio-x{background:transparent!important;border:0!important;box-shadow:none!important;
  color:var(--tenue)!important;font-size:.85rem;padding:.2rem .3rem;line-height:1;cursor:pointer;
  border-radius:6px;flex:none}
#panel-anuncio .anuncio-x:hover{color:var(--tinta)!important;background:var(--vel-4)!important}
#panel-anuncio h3{margin:0;font-size:15px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
#panel-anuncio p{margin:.5rem 0 0;font-size:12.5px;color:var(--suave);line-height:1.5}

/* ---------- AGENDA (ICC-106) ----------
   El panel de agenda usa clase propia y NO `.modal`: las reglas de `.modal
   button` pintan de naranja todo botón que haya dentro, y aquí hay botones de
   día, chips y acciones secundarias que deben ser contorneados. */
.ag-panel{background:var(--blanco);border:1px solid var(--linea);border-radius:20px;
  box-shadow:var(--sombra-2);text-align:left;color:var(--tinta)}
.ag-panel h2{letter-spacing:-.025em}
.ag-panel button{font-family:inherit;font-weight:600;cursor:pointer;border-radius:10px;
  background:transparent;color:var(--suave);border:1px solid var(--linea-2);
  transition:border-color .15s,color .15s}
.ag-panel button:hover{border-color:var(--terra);color:var(--terra)}
.ag-panel button.prim,.ag-panel button.prim:hover{
  background:var(--terra);color:var(--tinta-boton);border-color:transparent;font-weight:700}
.ag-panel button.prim:hover{background:var(--terra-hover)}
.ag-panel button:disabled{opacity:.55;cursor:default}
.ag-panel .modal-x{position:absolute;color:var(--suave);border-radius:8px;padding:.3rem}
.ag-panel .modal-x:hover{color:var(--tinta);background:var(--vel-4)}
.ag-panel .a-in{width:100%;background:var(--crema);border:1px solid var(--linea);
  border-radius:10px;color:var(--tinta);font-family:inherit;font-size:.9rem}
.ag-panel .a-in:focus{outline:none;border-color:var(--terra);background:var(--crema-2)}
/* Horas arregladas a mano en el registro de jornada, y quién está de baja
   (ICC-266). Es un apunte, no una alarma: una corrección con motivo es el
   funcionamiento normal —para eso existe— y pintarla en rojo haría que el dueño
   dejara de corregir, que es justo lo contrario de lo que la ley pide.
   Con tokens y sin rgba a fuego (ICC-254); `eq-` porque `.ag-fila` y `.pie` ya
   se cogieron dos veces cada uno sin prefijo (ICC-237). */
.eq-corr{font-family:var(--mono);font-size:.62rem;padding:.1rem .38rem;border-radius:6px;
  background:var(--crema);color:var(--suave);white-space:nowrap;font-weight:600}

/* En qué sitio es la cita: sillón, cabina, box, vehículo (ICC-264). Prefijo
   `ag-` y nombre de dos palabras porque `.pie`, `.ag-fila` y `.ad-mini` ya se
   han cogido dos veces cada uno (ICC-173, ICC-215, ICC-237): antes de reutilizar
   un nombre corto, mira si ya significa algo en la OTRA hoja.
   Con tokens y sin rgba a fuego (ICC-254). */
.ag-sitio{font-family:var(--mono);font-size:.62rem;padding:.15rem .4rem;border-radius:6px;
  margin-left:.4rem;background:var(--crema);color:var(--suave);white-space:nowrap;
  vertical-align:middle;font-weight:600}
/* «Sin sitio» no es un hueco de datos: significa que esa cita ocupa TODOS los
   sitios porque no consta cuál usó. Punteado y no relleno, como «Sin marcar»
   de ICC-263: es una cosa que falta, no un estado más. */
.ag-sitio.nc{background:transparent;border:1px dashed var(--linea);color:var(--tenue)}
/* «Por asignar» sí es una TAREA, y por eso no comparte el punteado gris de
   arriba (ICC-290): son las citas que ICC-272 dejó sin profesional porque había
   dos a la misma hora, y ahí hay algo que decidir. Ámbar y no rojo —no está
   roto, está pendiente— y sin relleno: el color y el borde ya la separan, y un
   `rgba()` a fuego para teñirla es la deuda que ICC-254 barrió. `--ambar` está
   definido en las TRES hojas (oscuro, claro y el `<style>` del index), que es
   lo que ICC-201 pone rojo cuando falta en alguna.

   Ojo con el nombre: `.pa` cuelga SIEMPRE de `.ag-sitio`, porque dos letras
   sueltas son justo el nombre corto del que este fichero avisa tres líneas más
   arriba. */
.ag-sitio.pa{background:transparent;border:1px solid var(--ambar);
  color:var(--ambar);cursor:pointer}
@media(max-width:900px){.ag-panel .ag-cols{grid-template-columns:1fr!important}}

/* Bonos, membresías y tarjetas regalo (ICC-267).
   ---------------------------------------------------------------------------
   Prefijo `bn-` y NO `bo-`: `.bo-caja`, `.bo-cab`, `.bo-cifras`, `.bo-ok` y
   `.bo-nota` ya son el bloque del BOLETÍN dentro de `index.html` desde ICC-240.
   Escribir `.bo-cab` aquí habría repintado la caja de suscriptores de la
   pantalla de Clientes sin que fallara nada — ICC-237 al pie de la letra, que
   ya se cobró `.pie`, `.ag-fila` y `.ad-mini`.

   Y la aritmética de especificidad de ICC-229, que aquí muerde por partida
   doble porque estas tarjetas se pintan en DOS sitios: dentro de la pantalla
   (`.ag-panel`, donde `.ag-panel button` es (0,1,1) y le gana a un `.bn-acc`
   suelto de (0,1,0)) y dentro de la ficha del cliente (`#clientes-page`, donde
   manda un id). Por eso los botones se declaran con los dos prefijos delante y
   **se pintan enteros**, sin heredar nada de ninguno de los dos contenedores:
   una regla que solo añadiera el tamaño dejaría el botón con los colores del
   panel en un sitio y con los de fábrica del navegador en el otro — que es el
   fallo de ICC-216, donde un «Guardar y probar» medía 15 px de alto.
   Todo con tokens, sin colores a fuego (ICC-254). */
.bn-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--suave);margin-bottom:.5rem}
.bn-barra{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.1rem}
.bn-buscar{display:flex;align-items:center;gap:.5rem;flex:1;min-width:220px;height:38px;
  padding:0 .8rem;border-radius:11px;border:1px solid var(--linea-2);background:var(--crema)}
.bn-buscar .msym{font-size:18px;color:var(--tenue)}
.bn-buscar input{flex:1;min-width:0;border:0;background:transparent;color:var(--tinta);
  font-family:var(--mono);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;outline:0}
.ag-panel .bn-barra button{height:38px;padding:0 1rem;font-size:.84rem}

/* Las cifras del resumen. Van en la tipografía de las cifras, como los KPI
   (ICC-230): estos números se comparan con los del panel financiero. */
.bn-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;
  margin-bottom:.9rem}
.bn-cifra{padding:.85rem .95rem;border-radius:14px;border:1px solid var(--linea);
  background:var(--hueco)}
.bn-cifra .et{font-size:.7rem;font-weight:600;color:var(--suave)}
.bn-cifra .n{font-family:var(--mono);font-size:1.25rem;font-weight:700;margin-top:.15rem}
.bn-cifra .sub{font-size:.72rem;color:var(--tenue);margin-top:.1rem}
.bn-estados{font-size:.76rem;color:var(--suave);margin-bottom:1rem}

.bn-tarjeta{border-radius:16px;border:1px solid var(--linea);background:var(--blanco);
  padding:1rem 1.1rem;margin-bottom:.7rem}
/* Un bono que no vale se apaga, no se esconde: el cliente puede aparecer con él
   en la mano y hay que poder enseñarle qué pasó. */
.bn-tarjeta.no{background:var(--hueco);border-style:dashed}
.bn-cab{display:flex;gap:.75rem;align-items:center}
.bn-ico{width:34px;height:34px;flex:none;border-radius:10px;background:var(--tile);
  border:1px solid var(--linea);display:grid;place-items:center}
.bn-ico .msym{font-size:18px;color:var(--salvia)}
/* `min-width:0` o un nombre de bono largo empuja el saldo fuera de la tarjeta
   (ICC-226): el único que se puede encoger es el texto. */
.bn-quien{flex:1;min-width:0;display:flex;flex-direction:column;gap:.12rem}
.bn-nom{font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:.4rem;
  flex-wrap:wrap}
.bn-sub{font-size:.76rem;color:var(--suave)}
.bn-saldo{flex:none;text-align:right;display:flex;flex-direction:column;gap:.05rem}
.bn-pie{margin-top:.6rem;font-size:.74rem;color:var(--tenue);line-height:1.5}
.bn-botones{margin-top:.7rem;display:flex;gap:.4rem;flex-wrap:wrap}
.ag-panel .bn-acc,#clientes-page .bn-acc{height:30px;padding:0 .75rem;font-size:.76rem;
  font-family:inherit;font-weight:600;cursor:pointer;border-radius:8px;white-space:nowrap;
  background:transparent;color:var(--suave);border:1px solid var(--linea-2);
  transition:border-color .15s,color .15s}
.ag-panel .bn-acc:hover,#clientes-page .bn-acc:hover{border-color:var(--terra);color:var(--terra)}
/* Anular es lo único de aquí que no se deshace, y se pinta como tal. Con
   `--rojo`, que es el token del panel: `#c0392b` a fuego da 3,56 en oscuro
   (ICC-254). */
.ag-panel .bn-acc.mal,#clientes-page .bn-acc.mal{color:var(--rojo);border-color:var(--rojo-35)}
.ag-panel .bn-acc.mal:hover,#clientes-page .bn-acc.mal:hover{color:var(--rojo);
  border-color:var(--rojo);background:var(--rojo-08)}

.bn-notas{margin-top:.5rem;padding:.5rem .65rem;border-radius:9px;background:var(--crema);
  font-size:.78rem;color:var(--suave);line-height:1.5;white-space:pre-wrap}

/* El historial de un bono. Se guarda desde el primer día y la pantalla lo
   promete tres veces —«queda escrito: es lo que se le enseña el día que
   pregunte»—, así que sin sitio donde leerlo la promesa era falsa (ICC-260). */
.bn-hist{margin-top:.6rem}
.ag-panel .bn-hist-abrir,#clientes-page .bn-hist-abrir{height:26px;padding:0 .6rem;
  font-size:.72rem;font-family:inherit;font-weight:600;cursor:pointer;border-radius:7px;
  background:transparent;color:var(--suave);border:1px dashed var(--linea-2)}
.ag-panel .bn-hist-abrir:hover,#clientes-page .bn-hist-abrir:hover{
  border-color:var(--terra);color:var(--terra)}
.bn-linea{display:flex;gap:.6rem;align-items:baseline;padding:.35rem 0;
  border-bottom:1px solid var(--linea);font-size:.76rem;color:var(--suave)}
.bn-linea:last-child{border-bottom:0}
.bn-linea .c{font-family:var(--mono);font-size:.7rem;color:var(--tenue);flex:none}
/* `min-width:0` o un motivo largo empuja la cantidad fuera de la fila
   (ICC-226): el único que puede encoger es el texto. */
.bn-linea .m{flex:1;min-width:0}
.bn-linea .d{font-family:var(--mono);font-weight:700;color:var(--tinta);flex:none}
/* Devolver suma, gastar resta, y se ve sin leer el signo. */
.bn-linea .d.mas{color:var(--salvia)}

.bn-hallado{padding:.8rem .95rem;border-radius:12px;border:1px solid var(--linea);
  background:var(--hueco);font-size:.83rem;color:var(--suave);line-height:1.5;
  margin-bottom:.7rem}
.bn-hallado.ok{background:var(--salvia-08);border-color:var(--salvia-30);color:var(--salvia)}
.bn-hallado.mal{background:var(--rojo-08);border-color:var(--rojo-35);color:var(--rojo)}
.bn-vacio{padding:2rem 1.5rem;border-radius:16px;border:1px dashed var(--linea);
  text-align:center}
.bn-vacio .t{font-size:.9rem;font-weight:700;margin-top:.6rem}
.bn-vacio p{margin:.5rem auto 0;max-width:34rem;font-size:.82rem;color:var(--suave);
  line-height:1.55}
@media(max-width:640px){
  .bn-cifras{grid-template-columns:1fr}
  .bn-cab{flex-wrap:wrap}
  .bn-saldo{width:100%;text-align:left;flex-direction:row;align-items:baseline;gap:.4rem}
}

/* ===========================================================================
   EL CATÁLOGO DE SERVICIOS · ICC-271                    (assets/servicios-icc.js)
   ---------------------------------------------------------------------------
   Prefijo `sv-`, comprobado libre antes de usarlo: `.pie`, `.ag-fila`,
   `.ad-mini` y `.bo-cab` ya se cobraron su ticket cada uno por reutilizar un
   nombre corto que ya significaba algo en la otra hoja (ICC-237).

   Y la aritmética de especificidad de ICC-229/216: la pantalla vive dentro de
   `.ag-panel`, donde `.ag-panel button` es (0,1,1) y le gana a un `.sv-acc`
   suelto de (0,1,0). Por eso los botones se declaran con el contenedor delante
   y **se pintan enteros** —tamaño Y colores—: una regla que solo añadiera el
   padding dejaría el botón con los colores de fábrica del navegador en mitad
   del tema oscuro, que es el «Guardar y probar» de 15 px de ICC-216.
   Todo con tokens, sin colores a fuego (ICC-254).
   =========================================================================== */
.sv-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--suave);margin-bottom:.5rem}
.sv-titulo{margin:0;font-size:1.5rem;font-weight:800}
.sv-lead{margin:.4rem 0 1.1rem;font-size:.85rem;color:var(--suave);line-height:1.55;
  max-width:44rem}
.sv-barra{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.ag-panel .sv-barra button{height:38px;padding:0 1rem;font-size:.84rem}
/* Cuántos hay de cuántos caben. Cuenta TAMBIÉN los apagados, que es lo que
   cuenta el tope del servidor: sumar solo los visibles diría «12 de 200» a
   quien no puede crear el 201 (ICC-217). */
.sv-cuenta{margin-left:auto;font-family:var(--mono);font-size:.76rem;color:var(--tenue)}
.sv-nota{padding:.6rem .8rem;border-radius:11px;background:var(--hueco);
  border:1px solid var(--linea);font-size:.79rem;color:var(--suave);
  line-height:1.5;margin-bottom:.9rem}
/* Clases en grupo (ICC-275). Reutiliza `.sv-tarjeta` y `.sv-acc` del catálogo
   —son la misma clase de pantalla y darles otro aspecto sería dos diseños para
   lo mismo— y añade solo lo suyo. `.cl-` y no `.c-`: antes de reutilizar un
   nombre corto, mira si ya significa algo (ICC-237, que ya mordió tres veces
   con `.pie`, `.ad-mini` y `.ag-fila`).

   **Y mordió la cuarta, dentro de este mismo comentario**: `.cl-vacio` YA
   existe en el `<style>` de `index.html` y es el estado vacío de la pantalla de
   CLIENTES. Esta hoja se carga después y con la misma especificidad, así que el
   vacío de Clientes pasaba a tener borde discontinuo, otro padding y otro tamaño
   de letra — una regresión visual en una pantalla que este ticket no toca, que
   ni falla ni la ve nadie. Comprobar el prefijo no basta: hay que buscar el
   NOMBRE ENTERO, y en las dos hojas (`index.html` comparte 71 clases con esta).
   Aquí se llama `.cl-mudo`. */
.cl-h{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--suave);margin:1.6rem 0 .7rem}
.cl-sub-h{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue);margin:.9rem 0 .4rem}
.cl-mudo{padding:1rem 1.1rem;border-radius:12px;border:1px dashed var(--linea-2);
  color:var(--suave);font-size:.85rem;line-height:1.55}
/* Las plazas, en la tipografía de las cifras: es lo que se compara de un
   vistazo entre filas (ICC-230). Y «completa» NO es un cero que haya que restar
   mentalmente — se dice con la palabra y con el color del acento, nunca en
   rojo: una clase llena es una buena noticia. */
.sv-par .cl-plazas{font-family:var(--mono);font-size:.92rem;font-weight:700;
  color:var(--tinta);font-variant-numeric:tabular-nums}
.sv-par .cl-plazas.llena{font-family:inherit;font-size:.78rem;color:var(--terra)}
/* Por dónde entra la gente (ICC-294). Una línea, no una tarjeta: es contexto
   para decidir si merece la pena publicar las clases en la web, no un KPI — y
   con caja propia competiría con el horario, que es a lo que se viene. Las
   cifras van en la tipografía de las cifras porque se comparan entre sí
   (ICC-230). El nombre se comprobó ENTERO en las dos hojas antes de usarlo:
   `.cl-vacio` ya era el estado vacío de Clientes (ICC-275). */
.cl-origen{margin:0 0 1rem;padding:.55rem .8rem;border-radius:10px;
  background:var(--hueco);border:1px solid var(--linea);line-height:1.55}
.cl-origen b{font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--tinta)}
/* Lo que no consta va en ámbar y no en rojo: no es un fallo, es historia que
   nadie midió — y se arregla solo según entren inscripciones nuevas. */
.cl-origen-sin{color:var(--ambar);font-weight:600}
.cl-lista{margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--linea-2)}
.cl-alu{display:flex;align-items:center;gap:.7rem;padding:.4rem 0}
.cl-alu + .cl-alu{border-top:1px solid var(--linea)}
.cl-alu .n{flex:none;width:26px;height:26px;border-radius:8px;display:grid;
  place-items:center;background:var(--crema-2);color:var(--suave);
  font-family:var(--mono);font-size:.72rem;font-weight:700}
.cl-alu .t{font-size:.85rem;font-weight:600;display:flex;align-items:center;
  gap:.4rem;flex-wrap:wrap}
.cl-alu .d{margin-top:.1rem;font-size:.75rem;color:var(--tenue)}
.sv-fallo{padding:1rem 1.1rem;border-radius:12px;border:1px solid var(--linea);
  background:var(--hueco);font-size:.84rem;color:var(--suave);line-height:1.55;
  margin-bottom:.9rem}

.sv-lista{display:flex;flex-direction:column;gap:.6rem}
.sv-tarjeta{border-radius:16px;border:1px solid var(--linea);background:var(--blanco);
  padding:.9rem 1rem}
/* Apagado no es borrado: se ve, y se ve que no se está ofreciendo. El borde
   discontinuo lo dice sin depender del color (ICC-264). */
.sv-tarjeta.no{background:var(--hueco);border-style:dashed}
.sv-cab{display:flex;gap:.8rem;align-items:center}
.sv-foto{width:44px;height:44px;flex:none;border-radius:11px;object-fit:cover;
  border:1px solid var(--linea)}
.sv-foto.vacia{display:grid;place-items:center;background:var(--tile);
  color:var(--tenue);font-size:20px;border-style:dashed}
/* `min-width:0` obligatorio: sin él, el nombre largo de un servicio de verdad
   empuja las cifras fuera de la tarjeta (ICC-226). */
.sv-quien{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.sv-nom{font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:.45rem;
  flex-wrap:wrap}
.sv-desc{font-size:.78rem;color:var(--suave);line-height:1.5}
.sv-chip{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.12rem .45rem;border-radius:999px;background:var(--crema-2);color:var(--tenue)}
/* La cadencia (ICC-274) reutiliza el chip y NO se pinta igual, a propósito.
   `.sv-chip` a secas significa un ESTADO —«no se ofrece»— y esto es un atributo
   del servicio: con la misma pastilla gris en mayúsculas al lado del nombre,
   «CADA 6 MESES» se leería como una advertencia. En minúsculas y con borde en
   vez de relleno. Es la lección de ICC-237 aplicada antes de que muerda: antes
   de reutilizar un nombre corto, mira qué significa ya. */
.sv-chip.cad{background:transparent;border:1px solid var(--linea-2);
  color:var(--suave);text-transform:none;letter-spacing:0;font-weight:600}
.sv-cifras{flex:none;display:flex;gap:1.1rem}
.sv-par{display:flex;flex-direction:column;gap:.1rem;text-align:right}
.sv-par .e{font-size:.68rem;font-weight:600;color:var(--suave)}
/* Las cifras en la tipografía de las cifras, que es como se comparan de un
   vistazo entre filas (ICC-230). `tabular-nums` para que las columnas cuadren. */
.sv-par .v{font-family:var(--mono);font-size:.92rem;font-weight:700;color:var(--tinta);
  font-variant-numeric:tabular-nums}
/* «A consultar» y «la del horario» NO son cifras: van apagadas y sin la
   tipografía de los números, para que no se lean como un importe (ICC-185). */
.sv-par .v.no{font-family:inherit;font-size:.78rem;font-weight:600;color:var(--tenue)}

.sv-botones{margin-top:.75rem;display:flex;gap:.4rem;flex-wrap:wrap}
.ag-panel .sv-acc{height:30px;padding:0 .75rem;font-size:.76rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.35rem;border-radius:9px;
  border:1px solid var(--linea-2);background:transparent;color:var(--suave);
  cursor:pointer;font-family:inherit}
.ag-panel .sv-acc:hover{border-color:var(--terra);color:var(--terra)}
.ag-panel .sv-acc .msym{font-size:16px}
.ag-panel .sv-acc.mini{padding:0 .5rem}
/* Un botón deshabilitado tiene que PARECERLO: el primero de la lista no puede
   subir, y sin esto se pulsa y no pasa nada, que se lee como que está roto. */
.ag-panel .sv-acc[disabled]{opacity:.35;cursor:default}
.ag-panel .sv-acc[disabled]:hover{border-color:var(--linea-2);color:var(--suave)}

@media(max-width:640px){
  .sv-cab{flex-wrap:wrap}
  .sv-cifras{width:100%;gap:1.4rem}
  .sv-par{text-align:left}
  .sv-cuenta{margin-left:0;width:100%}
}

/* ============================================================
   PRESUPUESTOS · PLANES DE TRATAMIENTO (ICC-301)

   Prefijo `ps-` y no `pr-`: `pr-` ya es el diff de prompts del super-admin
   (ICC-220). Antes de reutilizar un nombre de clase corto hay que mirar si ya
   significa algo — `.pie` se comió el pie del panel en ICC-173, `.ad-mini` una
   barra de progreso en ICC-215 y `.ag-fila` empujó la página entera en ICC-237.
   ============================================================ */
.ps-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--terra);margin-bottom:.35rem}
.ps-barra{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.ps-filtros{display:flex;gap:.3rem;flex:1;min-width:0;flex-wrap:wrap}
.ag-panel .ps-filtro{height:30px;padding:0 .7rem;font-size:.76rem;font-family:inherit;
  font-weight:600;cursor:pointer;border-radius:8px;background:transparent;
  color:var(--suave);border:1px solid var(--linea-2)}
.ag-panel .ps-filtro:hover{border-color:var(--terra);color:var(--terra)}
.ag-panel .ps-filtro.on{background:var(--terra-14);color:var(--terra);border-color:var(--terra)}

.ps-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:.6rem;margin-bottom:1.1rem}
.ps-cifra{border:1px solid var(--linea);border-radius:12px;padding:.7rem .8rem;
  background:var(--hueco)}
.ps-cifra .et{font-size:.7rem;font-weight:600;color:var(--suave)}
.ps-cifra .n{display:block;font-family:var(--mono);font-size:1.25rem;font-weight:700;
  margin-top:.15rem;font-variant-numeric:tabular-nums}
/* «Hacen falta 5 resueltos» NO es una cifra: va apagado y sin la tipografía de
   los números, para que no se lea como un porcentaje (ICC-185). */
.ps-cifra .sub{display:block;font-size:.72rem;color:var(--tenue);margin-top:.1rem}
.ps-estados{font-size:.76rem;color:var(--suave);margin-bottom:1rem}

.ps-tarjeta{border-radius:16px;border:1px solid var(--linea);background:var(--blanco);
  padding:1rem 1.1rem;margin-bottom:.7rem}
/* Uno ya resuelto se apaga, no se esconde: cuántos se rechazan es la mitad de
   la única cifra útil de esta pantalla. */
.ps-tarjeta.no{background:var(--hueco);border-style:dashed}
.ps-cab{display:flex;gap:.75rem;align-items:center}
.ps-ico{width:34px;height:34px;flex:none;border-radius:10px;background:var(--tile);
  border:1px solid var(--linea);display:grid;place-items:center}
.ps-ico .msym{font-size:18px;color:var(--terra)}
/* `min-width:0` o un nombre largo empuja el total fuera de la tarjeta
   (ICC-226): el único que se puede encoger es el texto. */
.ps-quien{flex:1;min-width:0;display:flex;flex-direction:column;gap:.12rem}
.ps-nom{font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:.4rem;
  flex-wrap:wrap}
.ps-sub{font-size:.76rem;color:var(--suave)}
.ps-total{flex:none;text-align:right;display:flex;flex-direction:column;gap:.05rem}
.ps-total b{font-family:var(--mono);font-size:1.15rem;font-variant-numeric:tabular-nums}
.ps-tsub{font-size:.72rem;color:var(--tenue)}
.ps-pastilla{font-size:.68rem;font-weight:700;padding:.12rem .45rem;border-radius:6px;
  border:1px solid}

.ps-lineas{margin-top:.7rem;border-top:1px solid var(--linea);padding-top:.5rem}
.ps-linea{display:flex;gap:.6rem;align-items:baseline;padding:.25rem 0;font-size:.8rem}
.ps-linea .n{flex:1;min-width:0;color:var(--suave)}
.ps-linea .c{flex:none;font-family:var(--mono);color:var(--tenue);font-size:.76rem}
.ps-linea .i{flex:none;font-family:var(--mono);font-weight:600;
  font-variant-numeric:tabular-nums}
.ps-prog{margin-top:.55rem;display:flex;align-items:center;gap:.35rem;font-size:.76rem;
  color:var(--suave)}
.ps-prog .msym{font-size:15px}
.ps-pie{margin-top:.55rem;font-size:.74rem;color:var(--tenue);line-height:1.5}
.ps-botones{margin-top:.7rem;display:flex;gap:.4rem;flex-wrap:wrap}
.ag-panel .ps-acc{height:30px;padding:0 .75rem;font-size:.76rem;font-family:inherit;
  font-weight:600;cursor:pointer;border-radius:8px;white-space:nowrap;
  background:transparent;color:var(--suave);border:1px solid var(--linea-2);
  transition:border-color .15s,color .15s}
.ag-panel .ps-acc:hover{border-color:var(--terra);color:var(--terra)}
/* Rechazar no se deshace, y se pinta como tal. Con `--rojo`, que es el token
   del panel: `#c0392b` a fuego da 3,56 en oscuro (ICC-254). */
.ag-panel .ps-acc.mal{color:var(--rojo);border-color:var(--rojo-35)}
.ag-panel .ps-acc.mal:hover{color:var(--rojo);border-color:var(--rojo);
  background:var(--rojo-08)}

.ps-vacio{border:1px dashed var(--linea-2);border-radius:14px;padding:1.6rem 1.4rem;
  background:var(--hueco);font-size:.86rem;color:var(--suave);line-height:1.6}
.ps-vacio b{color:var(--tinta);display:block;margin-bottom:.4rem}
.ps-vacio p{margin:.4rem 0 0}
.ps-vacio .mini{font-size:.78rem;color:var(--tenue)}
.ps-hallado{border-radius:12px;padding:.7rem .9rem;font-size:.82rem;margin-bottom:1rem;
  background:var(--hueco);color:var(--suave)}
.ps-hallado.mal{background:var(--rojo-08);color:var(--rojo);border:1px solid var(--rojo-35)}

/* --- el borrador: elegir del catálogo, nunca escribir --- */
.ps-nuevo h3{margin:0 0 .8rem;font-size:1.05rem;font-weight:800}
.ps-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.7rem}
.ps-campos label{display:flex;flex-direction:column;gap:.25rem;font-size:.76rem;
  font-weight:600;color:var(--suave)}
/* Un control de formulario NO hereda el fondo del contenedor: trae el del
   navegador (blanco) mientras el color sí se hereda, y eso deja texto casi
   blanco sobre blanco (ICC-205). Si escribes estilos de un campo, el fondo va
   con el borde. */
.ps-campos input{height:36px;padding:0 .6rem;border-radius:9px;font-family:inherit;
  font-size:.88rem;font-weight:400;background:var(--blanco);color:var(--tinta);
  border:1px solid var(--linea-2)}
.ps-campos input:focus{outline:2px solid var(--terra);outline-offset:1px}
.ps-nota{margin:.9rem 0 .6rem;font-size:.78rem;color:var(--tenue);line-height:1.55}
.ps-lista{border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.ps-elige{display:flex;gap:.7rem;align-items:center;padding:.55rem .8rem;
  border-bottom:1px solid var(--linea);font-size:.85rem}
.ps-elige:last-child{border-bottom:0}
.ps-elige.on{background:var(--terra-14)}
.ps-elige .n{flex:1;min-width:0}
.ps-elige .p{flex:none;font-family:var(--mono);font-size:.8rem;color:var(--suave);
  font-variant-numeric:tabular-nums}
.ps-elige .p .no{font-family:inherit;font-size:.76rem;color:var(--tenue)}
.ps-elige .q{flex:none;display:flex;align-items:center;gap:.45rem}
.ps-elige .q b{font-family:var(--mono);min-width:1.2rem;text-align:center}
.ag-panel .ps-mas{width:26px;height:26px;border-radius:7px;font-family:inherit;
  font-size:.95rem;font-weight:700;line-height:1;cursor:pointer;background:transparent;
  color:var(--suave);border:1px solid var(--linea-2)}
.ag-panel .ps-mas:hover{border-color:var(--terra);color:var(--terra)}
.ps-acciones{margin-top:1rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

@media(max-width:640px){
  .ps-cab{flex-wrap:wrap}
  .ps-total{width:100%;text-align:left}
}