:root{
  --ink:#0E2A21;          /* verde bosque: sidebar */
  --ink-2:#17382C;        /* petrol claro: hover sidebar */
  --ink-3:#22483A;
  --bg:#F3F4F1;           /* gris cálido del área de trabajo */
  --surface:#FFFFFF;
  --line:#E2E5E0;
  --text:#1B2A31;
  --muted:#6B7A80;
  --accent:#55A630;       /* verde vivo */
  --accent-soft:#EAF5E0;
  --ok:#1F8A5B;
  --ok-soft:#E4F4EC;
  --warn:#B7791F;
  --warn-soft:#FBF0DC;
  --radius:12px;
  --sidebar-w:204px;   /* era 248px; David (13/08): un poco mas estrecha */
  /* Movimientos bancarios: el banco se lee por el FONDO de la fila, no por una
     columna (David, 09/08). Tintes al ~7%: matiz, no alerta. Van aquí y no
     sueltos en el markup para que el día que haya un tercer banco se toque un
     sitio. Comprobado el contraste del importe encima de cada uno:
       cargo #C62828 sobre --fila-santander → 5,0:1
       abono --mov-abono sobre --fila-bbva  → 5,3:1 */
  --fila-santander:#FCEFEE;
  --fila-bbva:#EEF4FB;
  --mov-cargo:#C62828;
  /* El verde de --ok (#1F8A5B) se queda en 4,3:1 sobre BLANCO — ya no llegaba a
     AA antes de los tintes — y baja a 3,9:1 sobre el azul. Este es el mismo
     verde oscurecido: 5,3:1 sobre el tinte. Se oscurece el texto, nunca se
     aclara: aclararlo sobre un fondo claro es ir a peor. */
  --mov-abono:#17724A;
  /* El rojo de los avisos sobre fondo claro (#C62828 es el mismo de los cargos
     del banco y de los botones de peligro). ⚠ Se REDEFINE en `aplicarTema`
     cuando el fondo sobre el que cae es oscuro — con «Modo Noche» el fondo de
     una fila sin leer es --accent-soft #064E3B, y un rojo oscuro encima no se
     lee. Contraste comprobado del par que se usa de verdad, el del chat:
       #C62828 sobre los cuatro --accent-soft claros → de 4,99:1 a 5,3:1
       #FFB4AB sobre #064E3B (Modo Noche)           → 5,7:1 */
  --rojo-aviso:#C62828;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px}
h1,h2,h3,.display{font-family:'Archivo',sans-serif}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ============ LOGIN ============ */
#login{position:fixed;inset:0;display:flex;z-index:50;background:var(--ink)}
.login-brand{flex:1.1;display:flex;flex-direction:column;justify-content:space-between;padding:48px;color:#fff;position:relative;overflow:hidden}
.login-brand::after{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;border:70px solid rgba(85,166,48,.16)}
.brand-mark{display:flex;align-items:center;gap:10px;font-family:'Archivo';font-weight:800;font-size:18px;letter-spacing:.04em}
.brand-dot{width:12px;height:12px;border-radius:3px;background:var(--accent);transform:rotate(45deg)}
.login-brand h1{font-size:clamp(28px,4vw,44px);font-weight:800;line-height:1.1;max-width:14ch}
.login-brand h1 em{font-style:normal;color:var(--accent)}
.login-brand p{color:rgba(255,255,255,.65);max-width:44ch;margin-top:14px;line-height:1.6}
.login-meta{font-size:12px;color:rgba(255,255,255,.4);letter-spacing:.08em;text-transform:uppercase}
.login-card{flex:1;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:32px}
.login-form{width:min(380px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:0 20px 60px rgba(20,38,46,.12)}
.login-form h2{font-size:20px;font-weight:700;margin-bottom:4px}
.login-form>p{color:var(--muted);margin-bottom:22px;font-size:13px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:.02em}
.field input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--bg)}
.field input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.btn-primary{width:100%;padding:12px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;font-size:14px;transition:filter .15s}
.btn-primary:hover{filter:brightness(.94)}
.role-demo{margin-top:22px;padding-top:18px;border-top:1px dashed var(--line)}
.role-demo span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.role-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{padding:7px 12px;border:1px solid var(--line);background:var(--surface);border-radius:99px;font-size:12.5px;font-weight:500;transition:all .12s}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* ============ APP SHELL ============ */
#app{display:none;height:100vh}
#app.on{display:flex}
aside{width:var(--sidebar-w);background:var(--ink);color:var(--ink-text, #C6D2D6);display:flex;flex-direction:column;flex-shrink:0}
.side-head{padding:18px 18px 14px;display:flex;align-items:center;gap:10px;color:var(--ink-head, #fff)}
.side-head .brand-mark{font-size:15px}
.center-switch{margin:0 14px 12px;display:flex;background:var(--ink-2);border-radius:8px;padding:3px}
.center-switch button{flex:1;padding:7px 4px;border:0;background:transparent;color:var(--ink-muted, #9DB0B6);font-size:11.5px;font-weight:600;border-radius:6px;letter-spacing:.02em}
.center-switch button.on{background:var(--accent);color:#fff}
nav{flex:1;overflow-y:auto;padding:4px 10px 10px}
nav::-webkit-scrollbar{width:5px}
nav::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:99px}
.nav-group{margin-top:14px}
.nav-group>span{display:block;padding:0 10px 6px;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--ink-label, #567A6B);text-transform:uppercase;font-family:'Archivo'}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:transparent;color:var(--ink-text, #C6D2D6);border-radius:8px;font-size:13.5px;text-align:left;margin-bottom:1px;transition:background .1s}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.75}
.nav-item:hover{background:var(--ink-2);color:var(--ink-active, #fff)}
.nav-item.active{background:var(--ink-2);color:var(--ink-active, #fff);box-shadow:inset 3px 0 0 var(--accent)}
.nav-item.locked{opacity:.32;pointer-events:none}
/* Reordenar el menú arrastrando. La barra de color marca dónde va a caer. */
.nav-item.arrastrando{opacity:.35}
.nav-item.encima-arriba{box-shadow:inset 0 2px 0 var(--accent)}
.nav-item.encima-abajo{box-shadow:inset 0 -2px 0 var(--accent)}
/* Reordenar columnas de Clientes arrastrando la cabecera. La barra marca dónde cae. */
#cli-tabla th.col-drop-izq{box-shadow:inset 2px 0 0 var(--accent)}
#cli-tabla th.col-drop-der{box-shadow:inset -2px 0 0 var(--accent)}
#cli-tabla th{user-select:none}
a.nav-item{text-decoration:none;cursor:pointer}
.nav-app{margin-top:10px;border-top:1px solid var(--ink-2);border-radius:0 0 8px 8px;padding-top:10px}
.nav-reset{display:block;width:100%;margin-top:10px;padding:6px 10px;border:0;background:transparent;color:var(--ink-label, #567A6B);font:inherit;font-size:11.5px;text-align:left;border-radius:8px}
.nav-reset:hover{background:var(--ink-2);color:var(--ink-text, #C6D2D6)}
.nav-err{margin-top:10px;padding:7px 10px;border-radius:8px;background:#4A1D1B;color:#F2B8B5;font-size:11.5px;line-height:1.45}
.nav-item .lock{margin-left:auto;font-size:11px}
.side-foot{padding:12px 14px;border-top:1px solid var(--ink-2);font-size:12px}
.side-foot label{display:flex;align-items:center;gap:8px;color:var(--ink-muted, #8FA4AB);cursor:pointer}
.side-foot input{accent-color:var(--accent)}

main{flex:1;display:flex;flex-direction:column;min-width:0}
/* La cabecera baja lo que mida la barra de estado del móvil (David, 21/08).
   Red de seguridad del cambio de `apple-mobile-web-app-status-bar-style` a
   `default`: si iOS volviera a pintar debajo de su barra, el reloj taparía
   el botón ☰ y no se podría pulsar. `env()` devuelve 0 donde no hay muesca
   —escritorio, Android—, así que ahí no cambia nada.
   La ALTURA se suma con calc porque aquí es fija: con box-sizing:border-box
   un padding-top a secas se comería los 50px y aplastaría el contenido.
   (En el móvil manda el bloque del media query, con height:auto.) */
header{background:var(--surface);border-bottom:1px solid var(--line);padding:0 20px;padding-top:env(safe-area-inset-top,0px);height:calc(50px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:14px}
header h2{font-size:17px;font-weight:700}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.sync{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ok);background:var(--ok-soft);padding:5px 10px;border-radius:99px;font-weight:500}
.sync i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
.role-select{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.role-select select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-weight:600;background:var(--surface);color:var(--text)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;font-family:'Archivo'}

.content{flex:1;overflow-y:auto;padding:14px 20px}
.page{display:none;max-width:1800px}
.page.on{display:block}
.page-desc{color:var(--muted);margin:-2px 0 14px;max-width:90ch;line-height:1.55;font-size:12.5px}

/* Cards / KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:9px 12px}
.kpi b{display:block;font-family:'Archivo';font-size:19px;font-weight:800}
.kpi span{font-size:11px;color:var(--muted);font-weight:500}
.kpi .trend{font-size:11.5px;color:var(--ok);font-weight:600}
/* ===== KPI de Cuotas DÍA 1: pequeños SIEMPRE y en UNA fila (David, 11/08) =====
   «Ha de salir más pequeño… solo me interesan los euros, y en una fila se han
   de poder ver en el móvil.» Empezó en el móvil (09/08) y ahora vale en todas
   las pantallas, así que las reglas salen del media query. `flex` con `nowrap`
   en vez del grid de .kpis: dos cuadros de solo-euros caben de sobra hasta en
   380px, y el grid los estiraba a media pantalla cada uno.
   Solo aquí: `.kpi` a secas es de toda la aplicación (Caja, Objetivos…). */
.cd1-kpis{display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:10px}
.cd1-kpis .kpi{flex:0 1 auto;min-width:0;padding:5px 12px}
.cd1-kpis .kpi b{font-size:14px}
.cd1-kpis .kpi span{font-size:10px}
/* Contactos: «En lista de espera», en pequeño (David, 19/08) — el resto de
   KPIs («Contactos totales», «Se hacen cliente») bajó al pie de la página;
   arriba solo queda lo urgente, y en pequeño. Mismo patrón que .cd1-kpis,
   sin compartir la clase: son cosas de módulos distintos. */
.ct-kpis-mini{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.ct-kpis-mini .kpi{flex:0 1 auto;min-width:0;padding:5px 12px}
.ct-kpis-mini .kpi b{font-size:14px}
.ct-kpis-mini .kpi span{font-size:10px}
/* El asterisco de «hay plaza disponible», intermitente (David, 19/08: «a
   poder ser rojo... a modo de luz intermitente»). `prefers-reduced-motion`
   ya la apaga sola (regla global, arriba del todo de esta hoja). */
.ct-plaza-luz{color:#C0392B;font-weight:900;animation:ctPlazaBlink 1.1s ease-in-out infinite}
@keyframes ctPlazaBlink{0%,100%{opacity:1}50%{opacity:.15}}
/* Contactos EN EL MÓVIL: fuera los dos KPIs del pie. «Contactos totales» y
   «Se hacen cliente» son de repaso, no de trabajo delante del mostrador, y en
   una pantalla estrecha se comen el final de la página. Los recuentos se
   siguen calculando igual: esconder algo no cambia un número. Mismo corte que
   `pantallaEstrecha()` de core/router.js: 840px.
   ⚠ AQUÍ HABÍA TAMBIÉN `.ct-titulo-tx{display:none}`, que escondía el título
   «Contactos» de la tarjeta SOLO en el móvil (24/08, mañana). Esa misma tarde
   David lo quitó del todo —«es redundante con el título superior de la
   página»—, así que el `span` ya no se pinta en ninguna pantalla y la regla se
   quedó sin nada a lo que aplicarse. El ✱ de plaza disponible no se vio
   afectado: nunca estuvo en ese `span`. */
@media (max-width:840px){
  .ct-kpis-pie{display:none}
}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:18px;color:var(--text)}
.card-head{padding:10px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;color:var(--text)}
.card-head h3{font-size:14.5px;font-weight:700;color:var(--text)}
.card-head .spacer{flex:1}
.btn-sm{padding:7px 13px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:12.5px;font-weight:600}
.btn-sm.accent{background:var(--accent);border-color:var(--accent);color:#fff}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:10px 18px;background:var(--surface);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line)}
td{padding:11px 18px;border-bottom:1px solid var(--line);color:var(--text)}
tr:last-child td{border-bottom:0}
tr:hover td{background:rgba(127,127,127,0.06)}

/* ===== Movimientos bancarios: el banco, en el fondo de la fila (09/08) =====
   El tinte gana al `tr:hover td` de arriba por especificidad (clase + tabla),
   así que el hover global NO lo borra. */
.mov-tabla tbody tr.mov-san td{background:var(--fila-santander)}
.mov-tabla tbody tr.mov-bbva td{background:var(--fila-bbva)}
/* ⚠ EL HOVER NO ES OTRO `background-color`: sería un tercer color que taparía
   el tinte y dejaría la fila sin banco justo cuando la estás señalando. Es una
   capa oscura del 5,5% en `background-image`, que se compone ENCIMA del color
   que haya debajo — blanco, rojo o azul. Un solo valor sirve para los tres, y
   las dos cosas se siguen viendo a la vez. */
.mov-tabla tbody tr:hover td{
  background-image:linear-gradient(rgba(14,42,33,.055),rgba(14,42,33,.055))}
/* No hay zebra en esta tabla y no se añade: con dos tintes serían cuatro fondos
   y el banco dejaría de leerse de un vistazo, que es justo para lo que está.
   Si algún día hace falta marcar una fila elegida, va con
   `box-shadow:inset 3px 0 var(--accent)` — borde, no fondo, para que no pelee
   con el tinte. */

/* La leyenda de la cabecera: el color no puede ser el único que dice el banco,
   así que va con su nombre al lado (y cada fila lleva su `title`). */
.mov-leyenda{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--muted)}
.mov-leyenda span{display:inline-flex;align-items:center;gap:5px}
.mov-leyenda i{width:13px;height:13px;border-radius:4px;border:1px solid var(--line);display:inline-block}
.tag{padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:600}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.off{background:#EEE;color:#777}
.tag.mar{background:#E7F0F7;color:#2C6E9B}
.tag.sp{background:#F3EAF9;color:#7C4DA0}
/* Métodos de pago — mismo código de color que el spreadsheet actual */
.tag.trnf{background:#F9E3F1;color:#A82778}
.tag.dat{background:#E2F3E4;color:#2E7D32}
.tag.efec{background:#FBF6D9;color:#8A7A1A}
.tag.bad{background:#FDE7E9;color:#C62828}

/* Ficha de cliente (drawer lateral) */
#modal .overlay{position:fixed;inset:0;background:rgba(14,42,33,.45);z-index:60}
#modal .drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);background:var(--surface);z-index:61;display:flex;flex-direction:column;box-shadow:-18px 0 50px rgba(0,0,0,.2);animation:slidein .18s ease}
@keyframes slidein{from{transform:translateX(40px);opacity:0}}

/* ===== Avisos y preguntas de la app (core/dialogos.js) =====
   Sustituyen a alert/confirm/prompt del navegador, que salian pegados al borde
   de arriba con «localhost:8888 dice» delante. Estas van CENTRADAS.
   z-index 70: por encima del cajon lateral (61), porque media app pregunta
   desde dentro de un cajon abierto y el cajon tiene que seguir viendose. */
#dlg:empty{display:none}
#dlg{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px}
#dlg .dlg-fondo{position:absolute;inset:0;background:rgba(14,42,33,.5)}
#dlg .dlg-caja{position:relative;width:min(440px,100%);max-height:86vh;display:flex;flex-direction:column;
  background:var(--surface);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.28);animation:dlgin .16s ease}
@keyframes dlgin{from{transform:translateY(10px) scale(.98);opacity:0}}
#dlg .dlg-cuerpo{padding:22px 24px 6px;overflow-y:auto}
#dlg .dlg-titulo{font-family:'Archivo',sans-serif;font-size:16px;font-weight:700;line-height:1.35;color:var(--text)}
#dlg .dlg-texto{margin-top:9px;font-size:13px;line-height:1.55;color:var(--muted)}
#dlg .dlg-texto p+p{margin-top:9px}
#dlg .dlg-pie{display:flex;justify-content:flex-end;gap:9px;padding:16px 24px 20px}
#dlg .dlg-pie .btn-sm{padding:9px 18px;font-size:13px;font-weight:700}
#dlg .dlg-peligro{background:#C62828;border-color:#C62828;color:#fff}
@media (max-width:560px){
  /* En el movil ocupa el ancho y los botones se reparten la fila: pulsar un
     boton de 90px con el pulgar, en recepcion y con prisa, es como se acepta
     sin querer lo que se queria cancelar. */
  #dlg{padding:14px}
  #dlg .dlg-pie{padding:14px 18px 18px}
  #dlg .dlg-pie .btn-sm{flex:1;padding:11px 12px}
  #dlg .dlg-cuerpo{padding:20px 18px 4px}
}
/* `drawer-head`/`drawer-body` son el mismo cajon con otro nombre: se usan en 9
   modulos y nunca tuvieron estilo, asi que sus cabeceras salian sin borde y con
   la ✕ debajo del titulo. Se hacen equivalentes aqui en vez de renombrar 13
   sitios de JavaScript. */
.d-head,.drawer-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.d-body,.drawer-body{flex:1;overflow-y:auto;padding:4px 22px 28px}
.d-body h4,.drawer-body h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:22px 0 6px;font-family:'Archivo'}
.f-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.f-row>span:first-child{color:var(--muted)}
.f-row b{text-align:right}
/* ===== «Sus clases», dentro de la ficha (modules/clientes-citas.js) =====
   David (15/08): «10 filas, bastante juntas, donde poder hacer scroll». La
   altura es EXACTAMENTE diez filas: 10×21px + 1px de borde. Se fija en px y
   no en `vh` a proposito — si dependiera de la pantalla, en un portatil se
   verian seis y en el ordenador de recepcion catorce, y el cuadro dejaria de
   ser el mismo sitio. La undecima se ve a medias, que es lo que dice «esto
   sigue»: un corte limpio parece el final de la lista. */
.fcit-caja{max-height:212px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.fcit-tabla{width:100%;border-collapse:collapse;font-size:11.5px}
.fcit-tabla td{padding:3px 7px;border-bottom:1px solid var(--line);line-height:1.25}
.fcit-tabla tr:last-child td{border-bottom:0}
.fcit-tabla tr:nth-child(even) td{background:var(--surface)}
.log{margin-top:10px;display:flex;flex-direction:column;gap:7px;font-size:12.5px}
.log>div{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 11px;line-height:1.45}
.log>b{margin-top:4px}

/* Horario grid */
.sched{display:grid;grid-template-columns:64px repeat(5,1fr);gap:5px;font-size:11.5px}
.sched .hcell{padding:9px 4px;text-align:center;font-weight:700;font-family:'Archivo';color:var(--muted);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.sched .tcell{padding:9px 4px;text-align:right;color:var(--muted);font-weight:600;font-size:11px}
.slot{border-radius:8px;padding:8px 9px;font-weight:600;line-height:1.3;border:1px solid transparent}
.slot small{display:block;font-weight:500;opacity:.75;margin-top:2px}
.slot.full{background:var(--accent-soft);color:#33691E;border-color:#C9E6B4}
.slot.mid{background:var(--ok-soft);color:var(--ok);border-color:#CBE8D8}
.slot.low{background:#F1F2EF;color:var(--muted);border-color:var(--line)}

/* Horario base — semana completa compacta: 5 días × horas × 6 plazas */
.hbw{display:grid;grid-template-columns:52px repeat(5,1fr);gap:3px;font-size:10.5px}
/* La rejilla de PLAZAS perdio la columna de horas de la izquierda y la fila
   de dias de arriba (David, 06/08): cada cuadro lleva dentro "X . 07:00" y los
   rotulos de los bordes repetian eso mismo. Cinco columnas, sin la de 52px.
   La de Distribucion de entrenadores conserva las suyas: alli las casillas son
   desplegables y no dicen ni el dia ni la hora. */
.hbw.hbw-plazas{grid-template-columns:repeat(5,1fr)}
.hbw .dhead{padding:6px 4px;text-align:center;font-weight:700;font-family:'Archivo';color:var(--muted);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.hbw .hcell{padding:4px 7px 4px 4px;border-radius:6px;font-weight:700;font-size:10px;display:flex;align-items:center;justify-content:flex-end;font-family:'Archivo'}
/* Compacto a propósito: lo que se pide de esta rejilla es ver MUCHAS HORAS de
   una vez. El nombre del cliente va pequeño porque el ojo busca huecos, no
   lee nombres; para leer uno está el «Localizar cliente» y el título al pasar
   el ratón. En el móvil se vuelve a agrandar (más abajo). */
.cellwrap{display:grid;grid-template-columns:1fr 1fr;gap:1px;padding:2px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.cellhora{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font-family:'Archivo';font-weight:800;font-size:9px;letter-spacing:.03em;padding:0 3px 1px}
.p6{padding:1px 4px;border-radius:4px;background:rgba(255,255,255,.88);font-weight:600;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.45;min-width:0}
.p6.mant{opacity:.35}
.p6.blq{background:#FBE9E7;color:#B3261E;text-align:center}
.p6.free{background:transparent;border:1px dashed #D5DAD6;color:#B8C0BB;text-align:center;cursor:pointer}
.p6.free:hover{border-color:var(--accent);color:var(--accent)}
.p6.sel{background:#D93025;color:#fff;opacity:1}
.cli-loc{color:#D93025;font-weight:700;font-size:12.5px;margin-top:6px;line-height:1.4}
.cli-loc small{display:block;font-weight:600;font-size:11.5px}
.cellwrap.cerrado{border:1.5px dashed #C9CFCC;background:repeating-linear-gradient(45deg,#FAFBF9,#FAFBF9 8px,#F3F4F1 8px,#F3F4F1 16px);color:var(--muted);font-size:10.5px;font-weight:600;align-content:center}
/* Los dos únicos datos que se miran de un vistazo: cómo va de lleno y a quién
   se puede llamar. Lo demás (plazas, con cuota, mantenimiento, libres,
   bloqueadas) se quitó: eran seis números para una pregunta. */
/* ===== La barra de centros y meses, fija arriba (David, 06/08) =====
   «Que esos botones se vean siempre, no que al desplazarnos por el horario base
   se dejen de ver.» En una rejilla de 15 horas por 5 días se baja mucho, y sin
   esto había que volver al principio solo para saber si estabas en agosto o en
   septiembre — o para cambiar de centro.
   El fondo es opaco a propósito: `sticky` deja el contenido pasar POR DEBAJO, y
   sin fondo se leerían los dos a la vez. El `z-index` la pone por encima de las
   cabeceras pegajosas de las tablas, que van a 3. */
.hb-barra{position:sticky;top:0;z-index:6;background:var(--bg);padding:8px 0 6px;
          margin-bottom:10px!important;box-shadow:0 6px 10px -8px rgba(20,38,46,.28)}

.hb-kpis{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted);margin-bottom:10px}
.hb-kpis b{color:var(--text);font-family:'Archivo'}

/* ===== El mes que NO es el actual, en oscuro (David, 06/08) =====
   Primero se probó un gris claro y no bastaba: «el gris más gris, casi negro».
   Tiene sentido — mirando septiembre en agosto todo se ve normal, y aquí se
   mueve gente de grupo, así que un cambio hecho en el mes que no era no se
   nota hasta que alguien se queda sin plaza.
   Los cuadros de los grupos traen su propio color, así que lo que se oscurece
   es el marco: el fondo de la tarjeta y los huecos de la rejilla. Y con el
   fondo oscuro hay que aclarar lo que va escrito encima —las horas de la
   izquierda y los días de arriba—, o desaparecen. */
/* Un tono mas suave que el primero (David: "un poco menos fuerte, un tono mas
   tirando a gris"). Sigue siendo inconfundible al lado del mes en curso. */
.card.hb-otro-mes{background:#3C4139;border-color:#3C4139}
.card.hb-otro-mes .card-head{border-bottom-color:#3D4239}
.card.hb-otro-mes .hbw .dhead{color:#D8DCD3}
.card.hb-otro-mes .hbw .hcell{color:#AEB4A8}
/* LA HORA Y LA INICIAL DEL DÍA, EN AMARILLO (David, 06/08). Es lo que se lee en
   cada cuadro para saber dónde estás, y era lo único que iba del color del
   entrenador — o sea, un color distinto en cada grupo. En el mes que no es el
   actual pasa a ser siempre el mismo, y chillón a propósito: al mirar septiembre
   en agosto, ese amarillo es el recordatorio de que no estás en el mes de hoy.
   Solo el PRIMER span: el segundo es el nombre del entrenador, que conserva su
   color porque es como se distinguen los grupos de un vistazo.
   El `!important` es porque el color del entrenador va en un `style=` en línea
   sobre el contenedor, y de ahí lo heredan los dos. */
.card.hb-otro-mes .cellhora span:first-child{color:#F2C744!important}
/* El rayado de los grupos cerrados es casi blanco: sobre negro cegaría. */
.card.hb-otro-mes .cellwrap.cerrado{background:repeating-linear-gradient(45deg,#2C312A,#2C312A 8px,#363C33 8px,#363C33 16px);border-color:#4A5046;color:#9AA294}
/* Y LAS PLAZAS TAMBIÉN (David, 06/08: «en el ordenador, igual de oscuro que en
   el móvil»). El color de la tarjeta era el mismo en los dos; lo que cambiaba
   era cuánto se veía: en el ordenador caben las seis plazas por grupo y esos
   chips son casi blancos (`rgba(255,255,255,.88)`), así que tapaban el fondo y
   el conjunto se veía claro. En el móvil va una plaza por línea y sí se veía el
   fondo. Oscureciéndolos, la rejilla queda igual de oscura en las dos. */
.card.hb-otro-mes .p6{background:rgba(255,255,255,.10);color:#E7EAE3}
.card.hb-otro-mes .p6.free{background:transparent;border-color:#4A5046;color:#79826F}
.card.hb-otro-mes .p6.free:hover{border-color:var(--accent);color:var(--accent)}
/* Estas dos conservan su color: una avisa (plaza bloqueada) y la otra es la que
   se está buscando. Apagadas perderían justo lo que las hace útiles. */
.card.hb-otro-mes .p6.blq{background:#5A2A24;color:#FFD7D2}
.card.hb-otro-mes .p6.sel{background:#D93025;color:#fff}

/* ===== Horario base en el móvil =====
   Con 5 días en el ancho de un teléfono, cada plaza se quedaba en ~25 px y el
   nombre salía cortado a dos letras. Se mantiene la semana (que es como se
   piensa el horario) pero cada columna tiene un ancho mínimo legible y la
   rejilla se desplaza a lo ancho; dentro de cada grupo, una plaza por línea y
   el nombre ENTERO, partido en dos líneas si hace falta. */
@media (max-width:840px){
  .hb-kpis{gap:8px;font-size:11.5px;margin-bottom:7px}
  .hbw{grid-template-columns:38px repeat(5,minmax(128px,1fr));overflow-x:auto;font-size:12px;padding-bottom:6px}
  .hbw .dhead{font-size:11px}
  .hbw .hcell{font-size:11px;padding:4px 4px 4px 2px}
  .cellwrap{grid-template-columns:1fr}
  .cellhora{font-size:11px}
  .p6{white-space:normal;overflow:visible;text-overflow:clip;padding:5px 7px;line-height:1.3;font-size:12px}
}
.asig-in{width:100%;padding:7px 4px;text-align:center;font-weight:800;font-family:'Archivo';font-size:11px;border-radius:6px;letter-spacing:.06em;cursor:pointer}
.asig-in:disabled{cursor:not-allowed;opacity:.75}

/* Panel de entrenamientos */
.mini-in{padding:4px 5px;border:1px solid var(--line);border-radius:5px;font:inherit;font-size:11.5px;text-align:center;background:#fff;font-weight:600}
/* Entrenamientos (13/08): filas lo mas juntas posible y celdas numericas
   clavadas — 6 entrenos tienen que caber en un monitor. */
.hc-tight th,.hc-tight td{padding:1px 2px;line-height:1.15}
.hc-tight .mini-in{padding:2px 1px;font-size:10px}
/* Los triangulos de cambio de modulo: solo en el movil (13/08). */
.nav-flecha{display:none;border:0;background:transparent;font-size:15px;color:var(--muted);cursor:pointer;padding:4px 6px;line-height:1}
.catdot{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:baseline}
.hc-row{display:grid;grid-template-columns:26px minmax(84px,1fr) repeat(8,minmax(0,32px)) 20px;gap:3px;align-items:center;font-size:10.5px;padding:3px 2px;border-bottom:1px solid #F0F2EF;font-weight:600;margin-bottom:1px}
.hc-row>span{text-align:center}
.hc-row>span:first-child{text-align:left}
.mini-in.hc8{width:100%;padding:3px 2px;font-size:10.5px}
.hc-row:last-child{border-bottom:0}
.spark{display:flex;align-items:flex-end;gap:3px;height:52px}
.spark i{flex:1;border-radius:3px 3px 0 0;min-height:4px}

/* Matriz permisos */
.matrix td:first-child{font-weight:600}
.matrix .yes{color:var(--ok);font-weight:700;text-align:center}
.matrix .no{color:#C9CFCC;text-align:center}
.matrix th:not(:first-child){text-align:center}

.placeholder{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);padding:36px;text-align:center;color:var(--muted)}
.placeholder b{display:block;font-family:'Archivo';font-size:16px;color:var(--text);margin-bottom:6px}

/* Ejercicios */
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.ex-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ex-card .demo{height:120px;background:var(--ink);display:flex;align-items:center;justify-content:center}
.ex-card .info{padding:12px 14px}
.ex-card .info b{display:block;font-size:13.5px}
.ex-card .info span{font-size:12px;color:var(--muted)}

.note{background:var(--accent-soft);border:1px solid #C9E6B4;border-radius:var(--radius);padding:18px 22px;font-size:13px;color:#2F5D1C;margin-bottom:26px;line-height:1.75}
.note+.note{margin-top:-8px}
.note b{display:inline-block;margin-bottom:2px}

/* Selector de centros: botones con el nombre dentro (multi-selección, sin casillas) */
.tabsbar{background:var(--surface);border-bottom:1px solid var(--line);padding:6px 20px;display:flex;gap:8px}
.tabsbar button{padding:5px 20px;border:1px solid var(--line);background:var(--surface);border-radius:99px;font-size:12.5px;font-weight:600;color:var(--muted);transition:all .12s}
.tabsbar button:hover{border-color:var(--accent);color:var(--accent)}
.tabsbar button.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* Tabla ancha con scroll horizontal y primera columna fija */
.table-scroll{overflow-x:auto}
.table-scroll table{min-width:max-content}
.table-scroll th,.table-scroll td{white-space:nowrap;padding:9px 14px}
.table-scroll th:first-child,.table-scroll td:first-child{position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:2px 0 0 var(--line)}
.table-scroll th:first-child{background:#FAFBF9;z-index:3}
/* Tabla con altura propia (Facturas): al tener su propio scroll vertical, la
   cabecera se iria de vista a la tercera fila. Se queda pegada arriba. La
   esquina lleva mas z-index porque la primera columna ya es sticky por su
   lado y las dos se cruzan justo ahi. */
.tabla-alta thead th{position:sticky;top:0;z-index:4;background:#FAFBF9}
.tabla-alta thead th:first-child{z-index:5}
.table-scroll tr:hover td:first-child{background:#FBFBF9}
/* Tabla de clientes compacta (filas/columnas más ajustadas).
   Separación mínima (David, 05/08: «las columnas más juntas, el mínimo espacio
   posible»). El hueco entre dos columnas es la suma de los dos rellenos, así que
   4px por lado son 8px de separación: bajar más pega los textos entre sí y ya no
   se distingue dónde acaba una columna. */
table.cli-compact th,table.cli-compact td{padding:4px 4px}
/* La primera columna lleva un poco más por la derecha: es la fija, y su sombra
   hace de línea divisoria — sin ese respiro el nombre queda tocando la sombra. */
table.cli-compact th:first-child,table.cli-compact td:first-child{padding-right:8px}

/* CABECERAS A VARIAS LÍNEAS. Medido en la tabla real: en 18 de las 28 columnas
   el ancho lo fijaba el TÍTULO, no el dato — «Condiciones en papel» ocupaba
   123px de cabecera para enseñar un «—» de 12px. Eran 675px de tabla que no
   mostraban ni un dato.

   `.table-scroll th` pone `nowrap` para toda la aplicación; aquí se levanta solo
   en la tabla de clientes, con un tope de ancho para que el título se parta en
   vez de estirar la columna. Las CELDAS siguen en una línea: partir un nombre o
   una hora sí estorbaría. La cabecera crece un poco de alto, UNA vez, y a cambio
   se recorta a lo ancho en cada una de las 28 columnas. */
/* Con #cli-tabla por delante (David, 20/08): sin el prefijo, estas dos reglas
   se colaban en CUALQUIER tabla con `cli-compact` (solo se pidió esta clase
   por el padding «columnas juntas», no por esto) — en Contactos, con 11
   columnas y mucho más ancho libre que aquí, el tope de 72px cortaba
   «Preferencia» a media palabra y el texto se salía de su celda encima de la
   columna de al lado: parecía que los títulos «se pisaban». */
#cli-tabla table.cli-compact th{white-space:normal;line-height:1.15;vertical-align:bottom}
#cli-tabla table.cli-compact th:not(:first-child){max-width:72px}

/* Columnas de TEXTO LARGO recortadas con puntos suspensivos. Una observación de
   dos frases estiraba su columna a 647px — más que las diez siguientes juntas —
   y encima solo se leía entera en la primera fila. El texto completo está en el
   `title` (pasando el ratón) y en la ficha, así que no se pierde nada. */
table.cli-compact td[data-k="obs"]{max-width:260px;overflow:hidden;text-overflow:ellipsis}
table.cli-compact td[data-k="dir"]{max-width:150px;overflow:hidden;text-overflow:ellipsis}
/* El NOMBRE tambien se recorta: la columna se dimensionaba al mas largo de los
   289, y un solo cliente con dos apellidos largos dejaba hueco muerto en las
   otras 284 filas. Dentro de la celda, la «V» y la etiqueta del centro no
   encogen; lo que cede es el texto. */
table.cli-compact td:first-child{max-width:290px}

/* «Cerrar turno» -> «Fin turno» en el movil (David, 18/08): la cabecera va
   justa y el texto largo empujaba el resto. El corto se enciende dentro del
   media query de abajo. */
.turno-txt-corto{display:none}

@media (max-width:840px){
  #login{flex-direction:column}
  .login-brand{padding:28px;flex:none}
  aside{position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-100%);transition:transform .2s}
  aside.open{transform:none}
  .menu-btn{display:inline-flex!important}
  .nav-flecha{display:inline-flex}

  /* ===== En móvil, la lista de clientes se queda quieta (David, 06/08) =====
     El síntoma era que al mover la tabla de lado los nombres se iban por el
     borde izquierdo. Y la columna del nombre YA era `position:sticky;left:0`
     (más abajo, en `.table-scroll`), así que no faltaba: es que `sticky` se
     ancla al contenedor CON SCROLL más cercano, y lo que se estaba moviendo no
     era la tabla — era la página entera.

     Quien la ensanchaba no tenía nada que ver con clientes: es `.header-right`,
     la barra de arriba (estado, «Cerrar turno», el rol, el avatar, la versión).
     No envolvía, así que medía 539px y empujaba `main` a 689 en una pantalla de
     380. Medido en el navegador: con estas dos reglas `main` pasa de 689 a 380,
     deja de haber scroll de página, y entonces el único que se mueve de lado es
     la tabla — que es donde el `sticky` sí ancla. Los nombres se quedan.

     No se esconde nada: solo se deja envolver. Se probó también ocultando el
     selector de rol y el marcador de versión y no hacía falta, así que se
     quedan — quitar funciones del móvil no era el encargo.
     Y el escritorio no se entera: esto vive dentro del media query. */
  /* La cabecera envuelve… y por eso NO puede seguir con el alto fijo de 50px:
     lo que caía a la segunda línea quedaba cortado o pisando el contenido —
     así se salía el botón de cerrar sesión. `height:auto` con un mínimo de 50
     deja que crezca solo lo que necesite, y en escritorio no cambia nada porque
     esto vive dentro del media query. */
  /* LA CABECERA, EN UNA SOLA LÍNEA (David, 06/08: «el 🚪 se ha saltado de
     línea»). Envolvía y el botón de salir caía a una segunda fila que, con el
     alto fijo de 50px, quedaba cortada. Se arregla por los dos lados:
       · `height:auto` con mínimo de 50, para que si algún día envuelve no se
         corte nada — el `height` fijo era la razón de que se viera partido;
       · y sobre todo, apretando lo justo para que NO tenga que envolver a
         380px: menos hueco entre elementos, el título un punto más pequeño y
         el botón de turno y el círculo un poco más compactos. Medido en el
         navegador: cabecera de 50px y el botón de salir en la misma línea que
         el círculo. En escritorio no cambia nada: esto vive en el media query. */
  /* Aquí la altura es `auto`, así que la barra de estado se suma al padding
     de arriba y ya está — sin calc de altura (21/08, ver el bloque base). */
  header{flex-wrap:wrap;row-gap:6px;height:auto;min-height:50px;gap:7px;padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px}
  header h2{font-size:15px}
  #btnTurno{padding:5px 8px;font-size:12px}
  #btnLogout{padding:5px 7px}
  .avatar{width:28px;height:28px;font-size:11px}
  .header-right{flex-wrap:wrap;justify-content:flex-end;min-width:0}

  /* ===== Y que la tabla se pueda mover de lado con el dedo (David, 06/08) =====
     Al dejar de arrastrarse la página quedó el otro lado del problema: dentro
     del recuadro tampoco había forma de moverse. No es un descuido — el
     contenedor real lleva `overflow-x:hidden` A PROPÓSITO, porque de lado se
     mueve con la franja espejo de arriba (`#cli-scroll-top`), que existe para
     no tener que bajar al final de una tabla de 35 columnas para alcanzar la
     barra. Con ratón funciona; con el dedo, esa franja de 15px no se coge.

     En móvil se le da la vuelta: la tabla se desplaza sola y la franja espejo
     sobra. El `!important` no es pereza — el `overflow-x` va en un `style=` en
     línea, y una regla normal de hoja de estilos no le gana.
     `cliScrollSync` sigue sincronizando: le escribe a una franja escondida, que
     no molesta a nadie. */
  #cli-scroll-real{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  #cli-scroll-top{display:none!important}

  /* «Sincronizado» fuera del móvil (David, 06/08). En el escritorio se queda:
     ahí sobra sitio y dice que la conexión está viva. En una pantalla de 380px
     es una etiqueta que no se mira nunca ocupando media cabecera. */
  .sync{display:none}

  /* ===== La tabla, más apretada y pegada al borde (David, 06/08) =====
     «Pega más a la izquierda los nombres y hazlo un poco más pequeño, no puedo
     apenas ver los campos de la derecha.» Cada píxel que se le quita al nombre
     es uno que se ve de lo demás sin arrastrar.
     El `!important` del tamaño de letra hace falta porque va en un `style=` en
     línea, puesto desde JavaScript, y una regla normal no le gana.
     El tope del nombre baja de 290px a 150: con apellidos largos esa sola
     columna se comía media pantalla. Se recorta con «…» y el nombre entero
     sigue en el `title` y en la ficha, como en el escritorio. */
  #cli-tabla table.cli-compact{font-size:11px!important}
  #cli-tabla table.cli-compact th,#cli-tabla table.cli-compact td{padding:3px 3px}
  #cli-tabla table.cli-compact th:first-child,
  #cli-tabla table.cli-compact td:first-child{padding-left:2px;padding-right:5px;max-width:220px}

  /* ===== Cuotas DÍA 1: la cabecera, en UNA fila también a 390px =====
     (David, 08/08.) Quitado el título duplicado quedan tres controles —MB/SP,
     el mes y REMESAS—, y con el tamaño de escritorio se iban a dos líneas en un
     móvil. Se aprietan solo aquí dentro: son los de esta cabecera, no los
     botones de toda la app.
     `flex-wrap:nowrap` es lo que fuerza la fila única; el `min-width:0` del
     select es lo que le permite encoger en vez de empujar a los demás fuera
     —un `<select>` no baja de su contenido si no se le dice—. */
  .cd1-cab{flex-wrap:nowrap!important;gap:6px!important;align-items:center}
  .cd1-cab>div:first-child{gap:4px!important}
  .cd1-cab .btn-sm{padding:5px 9px!important;font-size:11.5px!important;white-space:nowrap}
  .cd1-cab select{padding:5px 6px!important;font-size:11.5px!important;min-width:0;flex:0 1 auto}

  /* Los KPI de Cuotas DÍA 1 ya no llevan reglas de móvil: desde el 11/08 son
     pequeños SIEMPRE y en una sola fila — las reglas viven fuera del media
     query, junto a .kpis (buscar cd1-kpis más arriba). Aquí quedó esta nota
     para que nadie los vuelva a meter «solo en el móvil». */

  /* ===== Movimientos bancarios en el móvil (David, 08/08) =====
     «Quita el texto Movimientos · Todos los bancos» y «siguen apareciendo los
     campos extremadamente juntos».

     Lo segundo no era falta de apretar: era lo contrario. La tabla tiene DOCE
     columnas con anchos en PORCENTAJE (`table-layout:fixed` + `colgroup`), así
     que en una pantalla de 380px cada columna se lleva su tanto por ciento de
     380 — al concepto le tocaban unos 90px y todo se envolvía en una papilla
     vertical. Apretar más la letra no arregla eso: hay que dejar que la tabla
     mida lo que necesita y se mueva de lado con el dedo, que es justo lo que ya
     se hizo con la lista de clientes el 06/08.

     `min-width` en la tabla y no en el contenedor: el contenedor ya tiene
     `overflow:auto`, así que en cuanto la tabla es más ancha aparece la barra.
     820px es lo que piden las doce columnas para que el concepto llegue a ~200
     y los números no se partan. */
  .mov-titulo{display:none}
  .mov-tabla{min-width:820px}
  .mov-scroll{-webkit-overflow-scrolling:touch}

  /* El hueco de la izquierda (David, 06/08): `.content` trae 20px de relleno a
     cada lado, que en una pantalla de 380px son 40 de los 380 tirados. Bajado a
     4px a peticion suya -- lo justo para que el borde de la tabla no toque el
     cristal. */
  .content{padding:10px 4px}
  /* El boton del turno, con su texto corto (18/08). */
  .turno-txt-largo{display:none}
  .turno-txt-corto{display:inline}

  /* Chat, mas apretado en el movil (David, 19/08). */
  .chat-fila{padding:9px 4px;gap:9px}
  .chat-avatar{width:32px;height:32px;font-size:12.5px}
  .chat-fila-nombre{font-size:13px}
  .chat-fila-hora{font-size:10px}

  /* «Contactos Google», debajo de la tabla en el movil (David, 19/08): la fila
     de arriba ya va justa en un telefono (MB, SP, +Nuevo, filtro, mes, Bonos
     PT); un boton mas la desbordaba fuera de la pantalla. Vive DOS veces —
     una en cada version — y aqui se apaga la de la cabecera y se enciende la
     de debajo de la tabla. */
  .gc-cab{display:none}
  .gc-movil{display:block}
}
.menu-btn{display:inline-flex;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 10px;align-items:center;cursor:pointer;font-size:14px}
.menu-btn:hover{border-color:var(--accent);color:var(--accent)}
#app.nosb aside{display:none}

/* ===== Chat: lista de canales, en filas en vez de columnas (David, 19/08) =====
   Era una tabla: cada columna se ensanchaba con su contenido, y en un canal
   con mucha gente (NARP, doce personas) las siglas de «no leído por» y «en
   el grupo» se ponían en una sola línea sin partirse — la columna se estiraba
   a cientos de píxeles y el 👥 de añadir/quitar gente, el último de la fila,
   quedaba fuera de la pantalla sin scroll horizontal que lo alcanzara. Ahora
   cada canal es una fila flexible: lo que no cabe en una línea (el nombre, el
   último mensaje) se recorta con puntos suspensivos, y lo que antes obligaba
   a una columna ancha (las siglas) envuelve en varias líneas si hace falta —
   nunca empuja la fila hacia un lado. */
.chat-lista{display:flex;flex-direction:column;padding:6px;gap:1px}
.chat-fila{display:flex;align-items:flex-start;gap:12px;padding:10px 8px;border-radius:10px;cursor:pointer}
.chat-fila:hover{background:var(--bg)}
.chat-fila-nl{background:var(--accent-soft)}
.chat-fila-nl:hover{background:var(--accent-soft)}
.chat-avatar{flex:none;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:700;font-size:14px}
.chat-fila-cuerpo{flex:1;min-width:0}
.chat-fila-top{display:flex;align-items:baseline;gap:8px}
.chat-fila-nombre{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-fila-hora{flex:none;font-size:10.5px;color:var(--muted)}
/* «Alguien está escribiendo» (25/08): el ✳ parpadeante de la fila.
   ⚠ El hueco existe SIEMPRE en el HTML (hace falta su id para encenderlo
   sin repintar la página), así que vacío tiene que desaparecer del todo:
   .chat-fila-top es flex con gap, y un <span> vacío seguiría contando
   como hijo y correría la hora 8px a la derecha en TODAS las filas. */
.chat-escr:empty{display:none}
.chat-escribe{flex:none;color:var(--accent);font-weight:700;font-size:12px;line-height:1;
  animation:chat-parpadeo 1.1s ease-in-out infinite}
@keyframes chat-parpadeo{0%,100%{opacity:1}50%{opacity:.15}}
/* Quien pide menos movimiento no se queda sin el aviso: deja de parpadear,
   pero el ✳ sigue ahí. */
@media (prefers-reduced-motion: reduce){
  .chat-escribe{animation:none}
}
.chat-fila-sub{display:flex;align-items:center;gap:8px;margin-top:2px}
.chat-fila-ultimo{flex:1;min-width:0;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El mensaje SIN LEER, en rojo y con grosor fuerte (David, 25/08): entrando al
   módulo hay que ver de un vistazo a qué canal hay que entrar. El fondo suave
   de la fila y el contador ya estaban, pero los dos van del color del acento y
   se confunden con el resto de la pantalla. */
.chat-fila-nl .chat-fila-ultimo{color:var(--rojo-aviso);font-weight:800}
.chat-badge{flex:none;background:var(--accent);color:#fff;border-radius:99px;min-width:18px;height:18px;
  padding:0 6px;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* Aqui es donde vivian las columnas «No leído por» y «En el grupo»: ahora
   son chips que EMPIEZAN a envolver en cuanto no caben, en vez de estirar
   la fila entera hacia la derecha. */
.chat-fila-meta{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin-top:5px}
.chat-meta-label{font-size:10px;color:var(--muted);font-weight:700;margin-right:2px}
.chat-meta-ok{font-size:10px;color:var(--ok)}
.chat-canal-lectura{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin:0 0 8px;padding:6px 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.chat-canal-lectura:empty{display:none;padding:0;border:0;margin:0}
.chat-meta-nota{font-size:10px;color:var(--muted)}
.chat-gente{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:2px 8px;font-size:10.5px;color:var(--muted);cursor:pointer}
.chat-gente:hover{border-color:var(--accent);color:var(--accent)}

/* «Contactos Google» duplicado (David, 19/08): en escritorio solo se ve el
   de la cabecera; el de debajo de la tabla se enciende dentro del media
   query de mas abajo. */
.gc-movil{display:none}

/* ===== v21 ===== */
/* La columna del cuadrante (era `min-width:620px` en linea): en el movil ese
   ancho es mayor que la pantalla, y por eso entraban TRES meses por fila y el
   tercero se salia por el borde -- se veian dos y pico. Aqui se puede apagar
   por tamano; en linea no se podia. */
.narp-cuadrante{flex:1;min-width:620px}
.narp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(198px,1fr));gap:12px}
.narp-mes{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.narp-mes h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 5px;color:var(--text)}
.narp-mes table{width:100%;border-collapse:collapse}
.narp-mes th{padding:1px;background:transparent;border:0;font-size:9px;text-align:center;color:var(--muted);letter-spacing:0}
.narp-mes td{padding:1px;border:0;text-align:center}
.narp-d{display:inline-flex;align-items:center;justify-content:center;width:21px;height:18px;border-radius:4px;font-size:10px;position:relative}
.narp-multi{position:absolute;right:0;bottom:0;width:4px;height:4px;border-radius:50%;background:#333;border:1px solid #fff}
.narp-ley{display:flex;align-items:center;gap:8px;font-size:12px;padding:3px 0}
.narp-ley i{width:14px;height:14px;border-radius:4px;flex:none}
/* ===== v91 · Cal NARP conectado ===== */
/* Pintable: el cursor dice que la casilla se puede arrastrar. Sin pincel
   cogido no se pone la clase, así que el calendario se ve como una consulta. */
.narp-pint{cursor:crosshair;user-select:none}
.narp-pint:hover{outline:2px solid var(--accent);outline-offset:0}
.narp-ley-on{background:var(--accent-soft);border-radius:8px;padding:3px 6px;margin:0 -6px}
.narp-ley-h{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:10px 0 2px;font-weight:700}
.narp-ley-h:first-child{margin-top:0}
.narp-col{width:22px;height:22px;flex:none;padding:0;border:1px solid var(--line);border-radius:5px;background:transparent;cursor:pointer}
.narp-col:disabled{cursor:default;opacity:.7}
.narp-ley-n{flex:1;min-width:0;text-align:left;border:0;background:transparent;font:inherit;font-size:12px;color:var(--text);cursor:pointer;padding:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.narp-ley-n:hover{text-decoration:underline}
.narp-ley-c{flex:none;font-size:11px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.narp-ley-c i{width:auto;height:auto;font-style:normal;font-weight:600;color:var(--muted)}
.narp-ley-no{color:var(--muted);cursor:default}
.narp-ley-no:hover{text-decoration:none}
/* Día ya pasado: no se puede pintar (salvo el propietario). Se marca con el
   cursor, no con un rayado — el cuadro es de 21x18 px y ahí lo único que se
   puede leer es el color de quien libra. */
.narp-cerrado{cursor:default}
/* ===== 23/08 · el cuadrante en el telefono: DOS meses por fila, enteros =====
   Se fuerzan dos columnas (no `auto-fill`, que con el hueco justo se queda en
   una) y el mes se hace elastico: tabla de ancho fijo, sin relleno lateral en
   las celdas y el cuadro del dia estirandose hasta 24px. En 360px de pantalla
   salen dos meses de 172px con celdas de ~22px; en 430px, de 24px. */
@media (max-width:640px){
  /* `min-width:100%`, no `0`: la leyenda de al lado mide 300px fijos, y con
     el cuadrante encogible se repartian la fila (el cuadrante se quedaba en
     160px). Al pedir la fila entera, la leyenda baja debajo -- que es como
     se veia antes, pero sin sacar la pagina de la pantalla. */
  .narp-cuadrante{min-width:100%}
  .narp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;justify-items:center}
  /* El tope de ancho es para el limite de arriba de este tramo (un movil
     grande de lado, ~640px): sin el, cada mes se estiraria a 310px y los
     dias saldrian desperdigados. Se quedan dos meses compactos y centrados. */
  .narp-mes{padding:8px 5px;min-width:0;width:100%;max-width:236px}
  .narp-mes h4{font-size:10px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .narp-mes table{table-layout:fixed}
  .narp-mes th,.narp-mes td{padding:1px 0}
  .narp-d{width:100%;max-width:24px;height:20px}
}
/* Registro de cambios: ventana con scroll, ~20 líneas a la vista de las hasta
   1000 cargadas. La cabecera se queda pegada arriba al subir. */
.cn-log{max-height:480px;overflow:auto;border-top:1px solid var(--line)}
.cn-log table{width:100%;border-collapse:collapse}
.cn-log thead th{position:sticky;top:0;z-index:1;background:var(--surface)}
/* El cupo de días: se pincha para cambiarlo (solo el propietario). */
.narp-cupo{border:0;background:transparent;font:inherit;font-size:11px;font-weight:800;color:var(--accent);cursor:pointer;padding:0;text-decoration:underline dotted}
.narp-otras{font-style:normal;font-weight:700;color:#7048E8}
/* Asterisco del día intercambiado: baja a su fila de la tabla. */
.narp-ast{position:absolute;top:-2px;right:0;font-style:normal;font-weight:900;font-size:11px;line-height:1;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.cn-i-inp{padding:5px 8px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:12px;background:var(--bg)}
.cn-inter-flash{animation:cnFlash 2.2s ease-out}
@keyframes cnFlash{0%{background:#FFE8A3}100%{background:transparent}}
.ejgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
/* 620px ~ 2-3 filas de tarjetas (video 16:9 + cuerpo con texto variable): con
   755 ejercicios en el catalogo, sin este tope la pagina era un scroll infinito
   antes de llegar al resto de la pantalla. Pedido por David el 18/08. */
.ejgrid-wrap{max-height:620px;overflow-y:auto;padding-right:4px}
.ejstats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ejstat{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
.ejstat b{font-family:'Archivo';font-size:15px;font-weight:800;color:var(--text)}
/* El tamaño del vídeo se aparta de la casilla de la esquina para no quedar debajo */
.ejsize{margin-top:auto;text-align:right;font-size:10px;color:var(--muted);padding-right:24px}
.ejcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;position:relative}
/* Casilla de selección, esquina inferior derecha. Fuera del .ejbody a propósito:
   ahí dentro cualquier clic abre el grabador. El área tocable es de 26px para
   que se pueda marcar con el dedo sin abrir la ficha por error. */
.ejsel{position:absolute;right:4px;bottom:4px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:7px;background:var(--surface)}
.ejsel:hover{background:var(--bg)}
.ejsel input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;margin:0}
.ejcard-sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.ejvid{aspect-ratio:16/9;background:linear-gradient(135deg,#12332A,#0E2A21);position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff}
.ejvid .play{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:16px;backdrop-filter:blur(2px);transition:transform .15s}
.ejvid:hover .play{transform:scale(1.12)}
.ejvid .dur{position:absolute;right:7px;bottom:6px;font-size:10px;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:5px}
.ejvid.playing .play{display:none}
.ejfig{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.ejvid.playing .ejfig{display:flex}
.ejfig i{width:16px;height:16px;border-radius:50%;background:var(--accent);animation:ejmove 1.1s ease-in-out infinite}
@keyframes ejmove{0%,100%{transform:translateY(12px) scale(1)}50%{transform:translateY(-14px) scale(1.15)}}
.ejbar{position:absolute;left:0;bottom:0;height:3px;background:var(--accent);width:0}
.ejvid.playing .ejbar{animation:ejprog 8s linear infinite}
@keyframes ejprog{from{width:0}to{width:100%}}
.ejbody{padding:10px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.ejbody b{font-size:13px}
.ejbody p{font-size:11.5px;color:var(--muted);line-height:1.4;margin:0}
.ejprec{font-size:11px;color:#B3261E;background:#FBEAE8;border-radius:6px;padding:4px 7px}
.mailwrap{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);min-height:480px}
.mailfold{width:172px;border-right:1px solid var(--line);padding:12px 0;background:#FAFBF9;flex:none}
.mailfold button{display:flex;width:100%;align-items:center;gap:8px;padding:8px 14px;font-size:13px;border:0;background:transparent;text-align:left}
.mailfold button.on{background:var(--accent-soft);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
.maillist{width:295px;border-right:1px solid var(--line);flex:none;overflow:auto}
.mailitem{padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.mailitem:hover{background:#FAFBF9}
.mailitem.on{background:var(--accent-soft)}
.mailitem b{font-size:13px;display:block}
.mailitem .asu{font-size:12.5px;margin:2px 0}
.mailitem .prev{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mailread{flex:1;padding:20px 24px;overflow:auto}
.mailadj{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12.5px;margin-top:14px;background:#FAFBF9}
@media(max-width:900px){.maillist{width:200px}.mailfold{width:140px}}

/* ===== v24 · Cierre de turno y Registros ===== */
.t-prog{display:flex;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.t-prog .pill{padding:6px 12px;border-radius:99px;font-size:12px;font-weight:700}
.t-cli{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.t-cli.falta{border-color:#E8B4B0;background:#FDF6F5}
.t-cli.falta.marcado{border-color:#B3261E;box-shadow:0 0 0 2px rgba(179,38,30,.18)}
.t-cli textarea{width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:12.5px;min-height:54px;resize:vertical;background:#fff}
.t-mic{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 11px;font-size:12.5px;font-weight:600;white-space:nowrap}
.t-mic.rec{background:#B3261E;color:#fff;border-color:#B3261E;animation:pulse 1s infinite}
.t-via{font-size:10.5px;padding:2px 7px;border-radius:99px;font-weight:700}

/* ===== Calendario y PTs · rejilla semanal (03/08) =====
   Los eventos que coinciden en hora se PISAN escalonados en vez de repartirse
   el ancho: con 7 calendarios abiertos, repartir dejaba tiras de 15 px donde no
   se leía nada. El de encima se lee entero; el ratón (o un toque) trae al
   frente el que quieras. */
.calcol{position:relative;border-left:1px solid var(--line)}
.calev{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:0 6px 6px 0;
  padding:2px 5px;font-size:11px;line-height:1.25;overflow:hidden;cursor:pointer;
  transition:box-shadow .12s ease}
.calev:hover{z-index:300;overflow:visible;box-shadow:0 3px 14px rgba(0,0,0,.22);min-height:34px}
.calev-frente{z-index:400;overflow:visible;box-shadow:0 3px 16px rgba(0,0,0,.28);min-height:52px}
.calev-h{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--muted)}
.calev-p{width:7px;height:7px;border-radius:99px;display:inline-block;flex:0 0 7px}
.calev-t{font-weight:600;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calev:hover .calev-t,.calev-frente .calev-t{white-space:normal;overflow:visible}
.calev-pie{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:3px;
  font-size:10px;color:var(--muted);background:var(--surface)}
/* ND (no disponible): se ve, pero apagado y por debajo de lo demás — no cuenta
   para la franja horaria que se muestra. */
.calev-nd{background:repeating-linear-gradient(45deg,#F2F3F1,#F2F3F1 6px,#E9EBE8 6px,#E9EBE8 12px);color:#6B7A72}
.calev-nd .calev-t{font-weight:500}
.calev[draggable="true"]{cursor:grab}
.calev[draggable="true"]:active{cursor:grabbing}

/* ===== Clientes en el móvil (David, 06/08) =================================
   Pidió tres cosas: que «+ Nuevo cliente» suba a la misma línea, que los
   botones de arriba estén más apretados, y que NO se muevan — que lo único que
   se desplace sea la tabla.

   Lo de «que no se muevan» se resuelve con `sticky`, no bloqueando el scroll
   de la página: bloquearlo dejaría sin alcance la facturación de cuotas y la
   ayuda del pie, que están debajo de la tabla. Con sticky, la barra se queda
   pegada arriba mientras la tabla pasa por debajo, que es el efecto que se
   busca y no rompe nada.

   El separador flexible es lo que empujaba «Cuota del mes» y el botón a una
   línea nueva: en pantalla estrecha se apaga y los dos suben. */
@media (max-width:640px){
  .cli-head{padding:6px 8px;gap:5px;row-gap:5px}
  .cli-head .btn-sm{padding:5px 8px;font-size:12px}
  .cli-head #cli-filtro{min-width:0;flex:1 1 96px;padding:5px 8px;font-size:12px}
  .cli-head-spacer{display:none}
  .cli-head .cli-mes{font-size:0;gap:0}            /* fuera el rótulo, se queda el desplegable */
  .cli-head .cli-mes select{font-size:12px;padding:5px 6px}
  /* La tabla de facturación de cuotas, sin ancho que empuje la página. */
  #cli-resumen{max-width:100%}
  #cli-resumen .resumen-cuotas{font-size:11px}
  #cli-resumen .resumen-cuotas th,#cli-resumen .resumen-cuotas td{padding:3px 5px}
}

/* La cabecera de la TABLA de Clientes se queda fija (David, 06/08: «lo que
   aparece por debajo de los botones Marbella y San Pedro queda fijo»). La barra
   de arriba —botones, filtro, mes, nuevo cliente— SÍ se va con el scroll de la
   página; lo que no se puede perder al bajar por 250 filas son los nombres de
   las columnas, que es lo que dice qué estás mirando.

   El `background` no es decorativo: sin él, al pasar las filas por debajo se
   transparentan sobre la cabecera y no se lee ninguna de las dos. */
#cli-scroll-real thead th{position:sticky;top:0;z-index:5;background:var(--surface)}

/* ===== Configuración: las secciones plegables (24/08, de la maqueta
   docs/maqueta-configuracion.html — «las ventanas se minimizan y abren»). */
.cfg-sec{background:var(--surface,#fff);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.cfg-sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 16px;user-select:none}
.cfg-sec>summary::-webkit-details-marker{display:none}
.cfg-sec>summary::before{content:'▸';color:var(--muted);font-size:12px;transition:transform .12s}
.cfg-sec[open]>summary::before{transform:rotate(90deg)}
.cfg-sec>summary:hover{background:var(--bg)}
.cfg-sec-t{flex:1;display:flex;flex-direction:column;gap:1px}
.cfg-sec-t b{font-family:Archivo,sans-serif;font-size:14px}
.cfg-sec-t i{font-style:normal;font-size:11.5px;color:var(--muted)}
.cfg-sec-est{font-size:11px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:3px 9px;white-space:nowrap}
.cfg-sec-b{padding:6px 16px 14px;border-top:1px solid var(--line)}
.cfg-sec-b>.card{border:0;margin:0;box-shadow:none}
.cfg-chk{width:20px;height:20px;border:2px solid var(--line);border-radius:6px;flex-shrink:0;display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:1px}
.cfg-chk.done{background:var(--accent);border-color:var(--accent);color:#fff}
.cfg-chk.pend{color:var(--muted)}

/* ===== Configuración › App del cliente (v214, config-app-cliente.js) ===== */
.cfgapp-estado{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#FFF8E1;border:1px solid #F0E0A8;border-radius:10px;padding:10px 14px;font-size:12.5px}
.btn-mini{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}
.btn-mini:disabled{opacity:.45;cursor:default}
.btn-mini.primario{background:var(--accent);border-color:var(--accent);color:#fff}
.cfg-sub{font-family:Archivo,sans-serif;font-size:13.5px;margin:20px 0 8px}
.cfg-campo{margin-bottom:12px}
.cfg-campo>label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:5px}
.cfg-campo input[type=text],.cfg-campo input:not([type]){border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px}
.hint-mini{font-size:11px;color:var(--muted);line-height:1.55}
.mono-mini{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;color:var(--muted)}
.inl{border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:12px}
.tabla{border-collapse:collapse;font-size:12.5px}
.tabla th{text-align:left;font-size:11px;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line)}
.tabla td{padding:7px 8px;border-bottom:1px dashed var(--line);vertical-align:top}
.cfgapp-cols{display:grid;grid-template-columns:1fr 240px;gap:20px;align-items:start;margin-top:4px}
@media (max-width:760px){.cfgapp-cols{grid-template-columns:1fr}}
.cfgapp-sws{display:flex;align-items:center;gap:8px}
.cfgapp-sw{width:28px;height:28px;border-radius:8px;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.cfgapp-sw.on{border-color:var(--accent);box-shadow:0 0 0 2px #fff inset}
.cfgapp-sws input[type=color]{width:28px;height:28px;padding:0;border:1px dashed var(--line);border-radius:8px;background:none;cursor:pointer}
.cfgapp-pv{background:#0d1117;border-radius:22px;padding:8px;max-width:240px;margin:0 auto;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.cfgapp-pv-bar{border-radius:14px 14px 0 0;color:#fff;font-family:Archivo,sans-serif;font-weight:800;font-size:13px;padding:12px 12px}
.cfgapp-pv-bar em{font-style:normal}
.cfgapp-pv-alerta{background:#FBECEA;border:1px solid #EFC7C2;color:#8E2A1E;font-size:10.5px;font-weight:700;padding:7px 9px;margin:8px 8px 0;border-radius:9px}
.cfgapp-pv-next{background:#fff;margin:8px 8px 0;border-radius:9px;padding:8px 9px;font-size:10px;color:#444;line-height:1.5}
.cfgapp-pv-next b{font-size:11.5px;color:#111}
.cfgapp-pv-res{margin:8px 8px 0;border-radius:9px;text-align:center;font-weight:800;font-size:11px;padding:9px 0}
.cfgapp-pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;background:#F4F6F9;border-radius:0 0 14px 14px;margin-top:8px}
.cfgapp-pv-gi{background:#fff;border-radius:8px;padding:9px 4px;text-align:center;font-size:8.5px;font-weight:700;color:#333;letter-spacing:.3px}
.cfgapp-pv-gi.pronto{opacity:.45}
.cfgapp-fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.cfgapp-fi{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:12px}
.cfgapp-fi b{flex:1;font-size:11.5px}
.cfgapp-fi i{font-style:normal;font-size:10px;color:var(--muted)}
.cfgapp-fi select{border:1px solid var(--line);border-radius:7px;padding:4px 6px;font-size:11.5px}
.cfgapp-fi.apagada{opacity:.5}
.cfgapp-propuesto{opacity:.5}
.cfgapp-pill{font-size:10.5px;font-weight:700;border-radius:99px;padding:3px 9px;white-space:nowrap}
.cfgapp-pill.ok{background:#E7F4DC;color:#2F5D1C}
.cfgapp-pill.prog{background:#FFF3D6;color:#8a6a12}
.cfgapp-pill.off{background:var(--bg);color:var(--muted)}
.cfgapp-pill.bad{background:#FBECEA;color:#8E2A1E}

/* ===== Registro de cambios: 10 filas y a partir de ahí, scroll (David,
   26/08: «ajusta la ventana a 10 filas y luego hacer scroll, si no es
   excesivamente largo»). Con 200 por página la tarjeta medía media pantalla
   por página y los dos paneles de abajo —las copias mensuales y lo que se ha
   vaciado— quedaban a un viaje de rueda de distancia.
   Se limita LO QUE SE VE, no lo que se trae: la paginación sigue siendo de
   200, así que buscar y contar no cambian.
   La altura va en `em` para que acompañe al tamaño de letra: 10 filas de
   ~2,8em más la cabecera. Y el `background` de la cabecera pegajosa NO es
   decorativo — sin él las filas se transparentan por debajo al pasar y no se
   lee ninguna de las dos (misma razón que en `#cli-scroll-real`). */
#regc-tabla .table-scroll{max-height:31em;overflow-y:auto}
#regc-tabla .table-scroll thead th{position:sticky;top:0;z-index:5;background:var(--surface)}