/* Estilos base del ERP de Método Zenon que usan las pantallas de Burocracks (copiados el 15/10/2026 de MetodoZenon_ERP_v41_PB.html, líneas 284-1822 y 1868-1899). */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --negro:#1a1a1a;--marron:#5c3d1e;--fondo:#f8f6f1;--sup:#ffffff;--sup2:#f2efe8;
  /* Variables --{centroId}, --{centroId}-l, --{centroId}-bg generadas dinámicamente
     por _regenerarCSSCentros() leyendo la colección centros de PocketBase al arrancar.
     Los valores de abajo son FALLBACK inicial para los 3 centros originales,
     solo visibles durante los ~100ms entre carga del HTML y ejecución del JS.
     No son la fuente de verdad: la edición real se hace desde el modal del ERP. */
  --ten:#2C5F6E;--ten-l:#e4f0f3;--ten-bg:#f0f8fa;
  --par:#5C3D6E;--par-l:#ede8f5;--par-bg:#f7f4fc;
  --val:#3D6E4A;--val-l:#e4f0e8;--val-bg:#f0f8f2;
  --todos-bg:#f5f3ee;
  --verde:#2d7a4f;--rojo:#a32d2d;--gris-e:#888780;--azul:#185FA5;
  --borde:#e0ddd6;--borde2:#ccc9c0;
  --txt:#1a1a1a;--txt2:#6b6860;--txt3:#9b9890;
  --r:8px;--rl:12px;
  --centro-bg:var(--fondo);
  /* 12/05/2026 — Propuesta A "Negro mate + acento":
     --acento es el color del centro activo. Se actualiza desde setCentroTab().
     Solo se usa en detalles sutiles: franja bajo topbar, subrayado pestaña activa,
     borde de pills, no inunda fondos enteros. */
  --acento:#2d7a4f;
}
/* TOPBAR */
.topbar{position:fixed;top:0;left:0;right:0;height:46px;background:var(--negro);display:flex;align-items:center;gap:5px;padding:0 1.5rem;z-index:200;transition:background 0.3s;border-bottom:4px solid var(--acento)}
.tb-marca{font-size:13px;font-weight:600;color:#f8f6f1;letter-spacing:0.04em;font-family:'Georgia',serif;margin-right:6px;white-space:nowrap}
.tb-sep{width:0.5px;height:20px;background:rgba(255,255,255,0.15);margin:0 4px;flex-shrink:0}
.tb-btn{font-size:11px;padding:5px 13px;border-radius:6px;border:1.5px solid transparent;background:transparent;color:rgba(255,255,255,0.45);cursor:pointer;font-family:sans-serif;font-weight:700;transition:all 0.18s ease;white-space:nowrap;letter-spacing:0.02em;transform-origin:center}
.tb-btn:hover{color:#f8f6f1;background:rgba(255,255,255,0.08)}
.tb-todos{font-size:12px;padding:5px 16px;letter-spacing:0.04em}
/* 12/05/2026 — Propuesta A: el botón de centro activo NO inunda el color del centro.
   En vez de eso, fondo sutil + borde de acento. El "subrayado" se hace con un
   box-shadow inset de 2px en la parte inferior. */
.tb-btn[class*="tb-activo-"]{
  font-size:13px;
  padding:7px 18px;
  font-weight:800;
  letter-spacing:0.05em;
  background:rgba(255,255,255,0.10)!important;
  color:#f8f6f1!important;
  border-color:var(--acento)!important;
  box-shadow:inset 0 -2px 0 var(--acento);
}
/* Botón "TODOS" — caso especial. No tiene color de centro, así que su acento
   es un blanco sutil. Mantiene el patrón visual de los demás. */
.tb-activo-tod{
  background:rgba(255,255,255,0.18)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,0.4)!important;
  box-shadow:inset 0 -2px 0 rgba(255,255,255,0.5);
}
body{font-family:'Georgia',serif;background:var(--fondo);color:var(--txt);min-height:100vh;padding-top:46px;background-attachment:fixed;background-size:cover;background-position:center}
.app{display:flex;min-height:100vh}

/* SIDEBAR */
.sb{width:200px;background:var(--negro);height:calc(100vh - 46px);position:fixed;left:0;top:46px;display:flex;flex-direction:column;z-index:100;transition:background 0.3s}
.sb-logo{padding:1rem 1.25rem 0.75rem;border-bottom:0.5px solid rgba(255,255,255,0.08)}
.sb-marca{font-size:12px;font-weight:600;color:rgba(255,255,255,0.5);letter-spacing:0.04em;font-family:sans-serif}
.sb-centro-label{font-size:11px;color:#f8f6f1;margin-top:3px;font-family:sans-serif;font-weight:600;min-height:16px}
.sb-per{padding:1rem 1.25rem;border-bottom:0.5px solid rgba(255,255,255,0.1)}
.sb-per label{font-size:10px;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:0.06em;display:block;margin-bottom:6px}
.sb-per select{font-size:12px;padding:5px 8px;border-radius:var(--r);border:0.5px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.07);color:#f8f6f1;width:100%;margin-bottom:6px;cursor:pointer}
.sb-per button{font-size:11px;padding:5px 10px;background:rgba(255,255,255,0.1);color:#f8f6f1;border:0.5px solid rgba(255,255,255,0.18);border-radius:var(--r);cursor:pointer;width:100%}
.sb-per button:hover{background:rgba(255,255,255,0.18)}
.sb-nav{padding:1rem 0;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) transparent}
.sb-nav::-webkit-scrollbar{width:5px}
.sb-nav::-webkit-scrollbar-track{background:transparent}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px}
.sb-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.3)}
.ni{display:flex;align-items:center;padding:10px 1.25rem;font-size:13px;color:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.15s;border-left:2px solid transparent}
.ni:hover{color:#f8f6f1;background:rgba(255,255,255,0.05)}
.ni.active{color:#f8f6f1;background:rgba(255,255,255,0.09);border-left-color:var(--acento)}
/* Sidebar con foto: asegurar legibilidad y hover marcado */
.sb.sb-con-foto{background-size:cover;background-position:center;background-attachment:fixed}
.sb.sb-con-foto::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.45);pointer-events:none;z-index:0}
.sb.sb-con-foto > *{position:relative;z-index:1}
.sb.sb-con-foto .ni,
.sb.sb-con-foto .sb-marca,
.sb.sb-con-foto .sb-centro-label,
.sb.sb-con-foto .nl,
.sb.sb-con-foto .sb-per label,
.sb.sb-con-foto .sb-count-label,
.sb.sb-con-foto .sb-count-val{color:#ffffff;text-shadow:0 1px 2px rgba(0,0,0,0.9),0 0 6px rgba(0,0,0,0.7)}
.sb.sb-con-foto .ni:hover{color:#ffffff;background:rgba(255,255,255,0.22);text-shadow:0 1px 3px rgba(0,0,0,1),0 0 10px rgba(0,0,0,1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.35)}
.sb.sb-con-foto .ni.active{color:#ffffff;background:rgba(255,255,255,0.28);border-left-color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,1),0 0 8px rgba(0,0,0,1)}
.ns{height:0.5px;background:rgba(255,255,255,0.07);margin:8px 1.25rem}
.nl{font-size:9px;color:rgba(255,255,255,0.28);text-transform:uppercase;letter-spacing:0.1em;padding:8px 1.25rem 4px}
.sb-counts{padding:1rem 1.25rem;border-top:0.5px solid rgba(255,255,255,0.08)}
.sb-count-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.sb-count-label{font-size:10px;color:rgba(255,255,255,0.35);font-family:sans-serif;display:flex;align-items:center;gap:5px}
.sb-count-dot{display:inline-block;width:7px;height:7px;border-radius:50%}
.sb-count-val{font-size:11px;font-weight:600;color:rgba(255,255,255,0.65)}

/* MAIN */
.main{margin-left:200px;padding:2rem;flex:1;min-height:100vh;background:transparent;transition:background 0.3s;position:relative}
.ph{margin-bottom:1.5rem}
.pt{font-size:22px;font-weight:600;margin-bottom:4px}
.ps{font-size:13px;color:var(--txt2);font-family:sans-serif}
.vista{display:none}
.tabla-datos,.cobros-grid,.clientes-grid,table{background:var(--sup)!important;backdrop-filter:none!important}
/* Regla legacy para tarjetas y paneles del ERP. Excluye clases del módulo
   gamificación (gamif-* y gcel-*) que tienen su propio fondo oscuro y se
   verían como "blanco sobre blanco" si heredasen --sup. */
.card,.panel,.sup-box,[class*="-card"]:not([class*="gamif-"]):not([class*="gcel-"]),[class*="-panel"]:not([class*="gamif-"]):not([class*="gcel-"]){background:var(--sup)!important}
.visible{display:block}.vista.visible{display:block}

/* KPIS */
.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:1.5rem}
.kpi{background:var(--sup);border:0.5px solid var(--borde);border-radius:var(--rl);padding:1rem 1.25rem}
.kpi-l{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:6px;font-family:sans-serif}
.kpi-v{font-size:24px;font-weight:600}
.kpi-s{font-size:11px;color:var(--txt3);margin-top:3px;font-family:sans-serif}

/* REMESA */
.remesa-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1.5rem}
.rem-card{border-radius:var(--rl);padding:1rem 1.25rem;border:0.5px solid var(--borde)}
/* Las clases .rem-card.{centroId} se generan dinámicamente en _regenerarCSSCentros() */
.rem-nombre{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;font-family:sans-serif;margin-bottom:6px}
/* Las clases .rem-nombre.{centroId} se generan dinámicamente en _regenerarCSSCentros() */
.rem-total{font-size:22px;font-weight:600;margin-bottom:2px}
.rem-sub{font-size:11px;color:var(--txt2);font-family:sans-serif;margin-bottom:10px}
.btn-rem{font-size:12px;padding:7px 14px;border:none;border-radius:var(--r);cursor:pointer;font-family:sans-serif;font-weight:500;width:100%}
/* Las clases .btn-rem.{centroId} se generan dinámicamente en _regenerarCSSCentros() */
.btn-rem:hover{opacity:0.85}

/* CENTRO TABS */
.ctabs{display:flex;gap:6px;margin-bottom:1rem;flex-wrap:wrap}
.ctab{font-size:12px;padding:6px 16px;border-radius:var(--r);border:0.5px solid var(--borde);background:var(--sup);color:var(--txt2);cursor:pointer;font-family:sans-serif;transition:all 0.2s;font-weight:500}
.ctab:hover{background:var(--sup2)}
/* .ctab.at/.ap/.av eliminadas — eran código muerto (nunca se aplicaban en el HTML) */
.ctab.all{background:var(--negro);color:#f8f6f1;border-color:var(--negro);box-shadow:inset 0 -3px 0 var(--acento)}

/* TABLES */
.tw{background:var(--sup);border:0.5px solid var(--borde);border-radius:var(--rl);overflow:hidden;margin-bottom:1.5rem}
table{width:100%;border-collapse:collapse;font-family:sans-serif}
thead th{font-size:10px;text-transform:uppercase;letter-spacing:0.07em;color:var(--txt3);font-weight:500;padding:10px 14px;border-bottom:0.5px solid var(--borde);text-align:left;background:var(--sup2);cursor:pointer;user-select:none;white-space:nowrap}
thead th:hover{color:var(--txt)}
thead th.sorted{color:var(--negro)}
tbody td{padding:11px 14px;border-bottom:0.5px solid var(--borde);font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--sup2);cursor:pointer}

/* BADGES */
.badge{font-size:10px;padding:2px 8px;border-radius:8px;font-weight:600;font-family:sans-serif;display:inline-block;white-space:nowrap}
.b-dom{background:#EAF3DE;color:#1a5c35}.b-tar{background:#E6F1FB;color:#0C447C}.b-efe{background:#F1EFE8;color:#5F5E5A}
.b-ent{background:#EAF3DE;color:#27500A}.b-fis{background:#E6F1FB;color:#0C447C}.b-psi{background:#EEEDFE;color:#3C3489}.b-nut{background:#FAEEDA;color:#633806}
.b-alta{background:#EAF3DE;color:#1a5c35}.b-baja{background:#FCEBEB;color:#791F1F}.b-desc{background:#FAEEDA;color:#633806}
/* .b-tenerias/.b-parquesol/.b-vallsur eliminadas — eran código muerto (nunca se aplicaban en el HTML) */
.edot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.ev{background:var(--verde)}.er{background:var(--rojo)}.eg{background:var(--gris-e)}.ea{background:var(--azul)}
.est-sel{font-size:11px;padding:4px 7px;border-radius:var(--r);border:0.5px solid var(--borde);background:var(--sup);color:var(--txt);cursor:pointer;font-family:sans-serif}
.btn-fac{font-size:11px;padding:3px 9px;border-radius:var(--r);border:0.5px solid var(--borde);background:transparent;color:var(--txt2);cursor:pointer;font-family:sans-serif;white-space:nowrap;margin-right:3px}
.btn-fac:hover{background:var(--sup2)}.btn-rect{border-color:var(--rojo);color:var(--rojo)}.btn-rect:hover{background:#FCEBEB}

/* FORMS */
.fc{background:var(--sup);border:0.5px solid var(--borde);border-radius:var(--rl);padding:1.5rem;margin-bottom:1.5rem}
.ft{font-size:15px;font-weight:600;margin-bottom:1.25rem;padding-bottom:10px;border-bottom:0.5px solid var(--borde)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;font-family:sans-serif}
.fr.full{grid-template-columns:1fr}.fr.three{grid-template-columns:1fr 1fr 1fr}
.fg{display:flex;flex-direction:column;gap:5px}
.fl{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:0.06em;font-family:sans-serif}
.fl.req::after{content:' *';color:var(--rojo)}
.fi{font-size:13px;padding:9px 11px;border-radius:var(--r);border:0.5px solid var(--borde);background:var(--sup);color:var(--txt);width:100%;font-family:sans-serif}
.fi:focus{outline:none;border-color:var(--negro)}
.fi.error{border-color:var(--rojo);background:#fff9f9}
/* 23/05/2026 — Cajas IBAN: padding lateral fino y border-radius más cuadrado.
   Las cajas son estrechas (2 o 4 dígitos monoespacio) y con el padding 11px lateral
   del .fi genérico se ven como cápsulas apretadas. */
.iban-caja{padding:9px 4px !important;border-radius:5px !important;font-size:13px;font-family:'SF Mono',Menlo,Consolas,monospace !important}
.iban-caja:focus{border-color:var(--negro) !important}
/* 23/05/2026 — Stepper integrado para sesiones fisio/nutri (Ses/mes).
   Sustituye al input type=number que tenía spinners nativos minúsculos.
   Una sola caja con dos botones (−, +) a los lados y el número centrado más grande. */
.ses-stepper{display:inline-flex;align-items:stretch;border:0.5px solid var(--borde);border-radius:var(--r);background:var(--sup);overflow:hidden;width:100px;height:38px;box-sizing:border-box}
.ses-stepper:focus-within{border-color:var(--negro)}
.ses-stepper-btn{border:none;background:transparent;color:var(--txt2);font-size:18px;font-weight:600;width:28px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;font-family:sans-serif;user-select:none;line-height:1}
.ses-stepper-btn:hover{background:var(--sup2);color:var(--txt)}
.ses-stepper-btn:active{background:var(--borde)}
.ses-stepper-btn:disabled{opacity:0.25;cursor:not-allowed;background:transparent}
.ses-stepper-btn:disabled:hover{background:transparent;color:var(--txt2)}
.ses-stepper-input{border:none;background:transparent;text-align:center;font-size:16px;font-family:sans-serif;color:var(--txt);width:44px;padding:0;outline:none;border-left:0.5px solid var(--borde);border-right:0.5px solid var(--borde);appearance:textfield;-moz-appearance:textfield}
.ses-stepper-input::-webkit-outer-spin-button,.ses-stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fi-hint{font-size:10px;color:var(--txt3);font-family:sans-serif;margin-top:2px}
.fsep{height:0.5px;background:var(--borde);margin:1.25rem 0}
.fa{display:flex;gap:8px;justify-content:flex-end;margin-top:1.25rem;padding-top:1.25rem;border-top:0.5px solid var(--borde)}
.bp{font-size:13px;padding:9px 20px;background:var(--negro);color:#f8f6f1;border:none;border-bottom:2px solid var(--acento);border-radius:var(--r);cursor:pointer;font-family:sans-serif}
.bp:hover{background:#333}
.bs{font-size:13px;padding:9px 20px;background:transparent;color:var(--txt2);border:0.5px solid var(--borde);border-radius:var(--r);cursor:pointer;font-family:sans-serif}
.bs:hover{background:var(--sup2)}
.bdanger{font-size:13px;padding:9px 20px;background:transparent;color:var(--rojo);border:0.5px solid var(--rojo);border-radius:var(--r);cursor:pointer;margin-right:auto;font-family:sans-serif}
.bdanger:hover{background:#FCEBEB}
.back{font-size:13px;color:var(--txt2);background:var(--sup);border:0.5px solid var(--borde);border-radius:var(--r);cursor:pointer;padding:7px 14px;margin-bottom:1.25rem;display:inline-flex;align-items:center;gap:6px;font-family:sans-serif;transition:all 0.15s}
.back:hover{background:var(--sup2);color:var(--txt)}
.btn-nuevo{font-size:13px;padding:8px 18px;background:var(--negro);color:#f8f6f1;border:none;border-radius:var(--r);cursor:pointer;font-family:sans-serif;margin-left:auto}

/* TOOLBAR */
.toolbar{display:flex;gap:8px;margin-bottom:1rem;flex-wrap:wrap;align-items:center}
.si{font-size:13px;padding:8px 12px;border-radius:var(--r);border:0.5px solid var(--borde);background:var(--sup);color:var(--txt);width:220px;font-family:sans-serif}
.fsel{font-size:12px;padding:7px 10px;border-radius:var(--r);border:0.5px solid var(--borde);background:var(--sup);color:var(--txt2);font-family:sans-serif}

/* PROGRAMAS */
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:1.5rem}
.pc{background:var(--sup);border:0.5px solid var(--borde);border-top:3px solid var(--acento);border-radius:var(--rl);padding:1.25rem;cursor:pointer;transition:all 0.15s}
.pc:hover{box-shadow:0 2px 8px rgba(0,0,0,0.07)}
.pc-n{font-size:14px;font-weight:600;margin-bottom:6px}
.pc-p{font-size:22px;font-weight:600;margin-bottom:10px}
.stags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.pc-c{font-size:11px;color:var(--txt3);font-family:sans-serif}
.btn-add-p{font-size:13px;padding:10px;border:0.5px dashed var(--borde2);border-radius:var(--rl);background:none;color:var(--txt3);cursor:pointer;width:100%;min-height:100px;display:flex;align-items:center;justify-content:center;font-family:sans-serif;transition:all 0.15s}
.btn-add-p:hover{background:var(--sup2);color:var(--txt)}
.srv-checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sc{display:flex;align-items:center;gap:6px;cursor:pointer;padding:7px 12px;border-radius:var(--r);border:0.5px solid var(--borde);transition:all 0.15s;user-select:none;font-family:sans-serif}
.sc:hover{background:var(--sup2)}.sc.on{border-color:var(--negro);background:var(--sup2)}

/* FICHA */
.fh{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;gap:12px;border-left:3px solid var(--acento);padding-left:12px}
.fn{font-size:24px;font-weight:600;margin-bottom:5px}
.fsub{font-size:13px;color:var(--txt2);display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:sans-serif}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.5rem}
.fblk{background:var(--sup2);border-radius:var(--r);padding:14px 16px}
.fbt{font-size:10px;text-transform:uppercase;letter-spacing:0.07em;color:var(--txt3);margin-bottom:10px;font-family:sans-serif}
.frow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.frl{font-size:12px;color:var(--txt2);font-family:sans-serif}
.frv{font-size:13px;font-weight:500;text-align:right;max-width:60%;word-break:break-word}
.pblk{background:var(--sup);border:0.5px solid var(--borde);border-radius:var(--rl);padding:1.25rem;margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.pbn{font-size:15px;font-weight:600;margin-bottom:4px}
.pbp{font-size:26px;font-weight:600}
.esp-b{font-size:11px;color:#854f0b;margin-left:8px;font-family:sans-serif}

/* EQUIPO */
.equipo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:1.5rem}
.eq-card{background:var(--sup);border:0.5px solid var(--borde);border-left:4px solid transparent;border-radius:var(--rl);padding:1rem 1.25rem;display:flex;flex-direction:column;gap:12px}
.eq-info .eq-nombre{font-size:14px;font-weight:600;margin-bottom:4px}
.eq-info .eq-rol{font-size:12px;color:var(--txt2);font-family:sans-serif}
.eq-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.eq-btn{font-size:11px;padding:4px 10px;border-radius:var(--r);border:0.5px solid var(--borde);background:transparent;color:var(--txt2);cursor:pointer;font-family:sans-serif}
.eq-btn:hover{background:var(--sup2)}
.eq-btn.del{border-color:var(--rojo);color:var(--rojo)}.eq-btn.del:hover{background:#FCEBEB}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal{background:var(--sup);border-radius:var(--rl);padding:1.5rem;max-width:500px;width:100%;box-shadow:0 8px 32px rgba(0,0,0,0.18);max-height:90vh;display:flex;flex-direction:column}
.modal.modal-wide{max-width:680px}
.modal.modal-xwide{max-width:920px}
.modal.modal-flibre{max-width:min(960px,96vw)}
.modal.modal-eval{max-width:min(1500px,96vw);width:96vw}   /* 05/09/2026: Evaluaciones a todo el ancho (Juan: «usa el 30% de la pantalla») */
.modal-title{font-size:16px;font-weight:600;margin-bottom:1rem;padding-bottom:10px;border-bottom:0.5px solid var(--borde);flex-shrink:0}
.modal-body{margin-bottom:1.25rem;overflow-y:auto;flex:1}
.modal-body p{font-size:13px;color:var(--txt2);margin-bottom:10px;font-family:sans-serif;line-height:1.6}
.modal-body strong{color:var(--txt)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;flex-shrink:0;padding-top:10px;border-top:0.5px solid var(--borde);flex-wrap:wrap;align-items:center}
.modal-actions button{white-space:nowrap}
/* MARCADOR_DESPLIEGUE_v9MAY_2026_BTN_CERRAR_X
   Botón "X cuadrada" para cerrar modal. Va a la izquierda gracias a
   margin-right:auto que empuja los botones de acción a la derecha.
   Cuadrado, sin texto, color discreto para no competir visualmente
   con los botones de acción positiva/negativa.
   Hover rojo suave para indicar que cierra. */
.btn-cerrar-x{
  margin-right:auto;
  width:40px;height:40px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:600;line-height:1;
  background:transparent;color:var(--txt2);
  border:1px solid var(--borde);border-radius:var(--r);
  cursor:pointer;transition:background 0.15s,color 0.15s,border-color 0.15s;
  font-family:inherit;
}
.btn-cerrar-x:hover{background:var(--sup2);color:var(--rojo);border-color:var(--rojo)}
.btn-cerrar-x:active{background:var(--sup)}
.warn{font-size:11px;color:var(--rojo);font-family:sans-serif;margin-top:6px;min-height:16px}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;background:var(--negro);color:#f8f6f1;padding:11px 20px;border-radius:var(--r);font-size:13px;opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:9999;font-family:sans-serif;box-shadow:0 4px 16px rgba(0,0,0,0.2);max-width:380px;line-height:1.5}
.toast.show{opacity:1}
.empty{text-align:center;padding:3rem;color:var(--txt3);font-size:14px;font-family:sans-serif}

/* PENDIENTE COBRAR */
.pendiente-section{background:var(--sup);border:0.5px solid var(--borde);border-radius:var(--rl);padding:1.25rem;margin-bottom:1.5rem}
.pendiente-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:var(--txt3);margin-bottom:1rem;font-family:sans-serif}
.pend-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:0.5px solid var(--borde);font-family:sans-serif}
.pend-row:last-child{border-bottom:none}
.pend-nombre{font-size:13px;font-weight:500}
/* 07/09/2026 — en pendientes, el nombre abre la ficha del cliente */
.pend-link{cursor:pointer;text-decoration:underline;text-decoration-color:var(--borde);text-underline-offset:3px}
.pend-link:hover{color:var(--azul);text-decoration-color:var(--azul)}
.pend-imp{font-size:13px;font-weight:600;color:var(--rojo)}
.pend-pago{font-size:11px;color:var(--txt3);margin-left:8px}

/* CONTABILIDAD */
.cont-subtab{font-size:13px;padding:8px 20px;border-radius:var(--r);border:0.5px solid var(--borde);background:var(--sup);color:var(--txt2);cursor:pointer;font-family:sans-serif;font-weight:500;transition:all 0.15s}
.cont-subtab:hover{background:var(--sup2)}
.cont-subtab.active{background:var(--negro);color:#f8f6f1;border-color:var(--negro);box-shadow:inset 0 -3px 0 var(--acento)}
.cont-mes-tab{font-size:11px;padding:4px 10px;border-radius:var(--r);border:0.5px solid var(--borde);background:var(--sup);color:var(--txt2);cursor:pointer;font-family:sans-serif;transition:all 0.15s}
.cont-mes-tab:hover{background:var(--sup2)}
.cont-mes-tab.active{background:var(--negro);color:#f8f6f1;border-color:var(--negro);box-shadow:inset 0 -2px 0 var(--acento)}
/* MARCADOR_DESPLIEGUE_v10MAY_2026_KPIS_INTEGRADOS_CSS
   10/05/2026: tarjetas integradas con desglose dentro.
   - Ingresos y Gastos son tarjetas grandes con chips (Base/IVA, OPEX/CAPEX)
     dentro de la propia tarjeta.
   - EBITDA y Net Income son tarjetas simples como antes.
   - 4 columnas en PC, 2 en móvil/tablet (adaptado en bloque @media).
   v2 (10/05/2026 noche): Juan reportó proporciones malas — la cifra
   principal y los chips se veían del mismo tamaño. Rediseño con
   jerarquía visual real: cifra dominante (34px), chips compactos en
   una sola fila horizontal (tipo "Base 9.903 € · IVA 570 €") con
   colores fuertes que destaquen. */
.cont-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.25rem;align-items:stretch}
.cont-kpi{background:var(--sup);border:0.5px solid var(--borde);border-radius:var(--rl);padding:14px 16px;display:flex;flex-direction:column;gap:4px;justify-content:flex-start}
.cont-kpi-l{font-size:10.5px;color:var(--txt3);text-transform:uppercase;letter-spacing:0.08em;font-family:sans-serif;font-weight:600}
.cont-kpi-v{font-size:32px;font-weight:700;line-height:1.05;letter-spacing:-0.02em}
.cont-kpi-s{font-size:10.5px;color:var(--txt3);font-family:sans-serif;margin-top:auto;padding-top:6px}
/* Desglose: una sola fila horizontal con pills compactos tipo
   "Base 9.903 € · IVA 570 €". El protagonismo visual queda en la
   cifra grande de arriba. */
.cont-kpi-desglose{display:none;gap:8px;margin-top:6px;flex-wrap:wrap;align-items:center}
.cont-kpi-chip{display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border-radius:11px;border:0.5px solid var(--borde);font-family:sans-serif;line-height:1.2;white-space:nowrap}
.cont-kpi-chip-l{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;opacity:0.85}
.cont-kpi-chip-v{font-size:12px;font-weight:600}
/* Colores fuertes y diferenciados para cada chip. Sin fondo claro: el
   color va en el borde y en la etiqueta para no competir con la cifra
   principal grande. */
.cont-kpi-chip-base{border-color:rgba(46,160,67,0.55);background:rgba(46,160,67,0.10)}
.cont-kpi-chip-base .cont-kpi-chip-l{color:rgb(36,130,55)}
.cont-kpi-chip-base .cont-kpi-chip-v{color:rgb(28,100,42)}
.cont-kpi-chip-iva{border-color:rgba(212,169,74,0.65);background:rgba(212,169,74,0.14)}
.cont-kpi-chip-iva .cont-kpi-chip-l{color:rgb(160,118,28)}
.cont-kpi-chip-iva .cont-kpi-chip-v{color:rgb(125,90,18)}
.cont-kpi-chip-opex{border-color:rgba(176,52,52,0.55);background:rgba(176,52,52,0.10)}
.cont-kpi-chip-opex .cont-kpi-chip-l{color:rgb(155,42,42)}
.cont-kpi-chip-opex .cont-kpi-chip-v{color:rgb(120,32,32)}
.cont-kpi-chip-capex{border-color:rgba(120,40,80,0.6);background:rgba(120,40,80,0.10)}
.cont-kpi-chip-capex .cont-kpi-chip-l{color:rgb(110,38,75)}
.cont-kpi-chip-capex .cont-kpi-chip-v{color:rgb(85,28,58)}
/* Badge de margen para la tarjeta EBITDA. Rellena el espacio entre la
   cifra grande y el sufijo "Ingresos − Gastos" (antes había un agujero
   porque la tarjeta EBITDA no tenía chips de desglose como las otras). */
.cont-kpi-margen{display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border-radius:11px;background:var(--sup2);border:0.5px solid var(--borde);font-family:sans-serif;line-height:1.2;width:fit-content;margin-top:6px}
.cont-kpi-margen-l{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--txt3)}
.cont-kpi-margen-v{font-size:12px;font-weight:600;color:var(--txt)}

/* Estadísticas — tarjetas KPI clickables.
   MARCADOR_DESPLIEGUE_v10MAY_2026_EST_KPI_LAYOUT_v4_FIX_ESPECIFICIDAD
   v4 (10/05/2026 noche-3): TRES versiones anteriores no funcionaron
   porque `.cont-blk { padding: 1.25rem }` (línea 605) pisaba a `.est-kpi-card`
   ya que tienen misma especificidad (1 clase cada una) y `.cont-blk` viene
   DESPUÉS en el CSS. La tarjeta tiene `class="cont-blk est-kpi-card"`,
   ambas afectan, y `.cont-blk` ganaba el padding. Con padding 1.25rem (20px)
   y min-height 130px, el contenido del churn alto (título 14 + margen 12 +
   cifra 32 + margen 10 + sub 14 = 82px) cabía, pero al añadir line-heights
   y line-wrapping del sub-texto en cifras altas, se desbordaba simétricamente
   por flex justify-content:center y la cifra se montaba sobre el título.
   FIX: usar selector `.cont-blk.est-kpi-card` (dos clases juntas, especificidad
   0,2,0 vs 0,1,0 de `.cont-blk` sola) → mis reglas ganan SIEMPRE. Aumento
   padding vertical a 28px y min-height a 156px para dar holgura real. */
.cont-blk.est-kpi-card {
  padding: 28px 22px;
  cursor: pointer;
  position: relative;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 156px;
}
.cont-blk.est-kpi-card .est-kpi-l {
  font-size: 14px;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: sans-serif;
  font-weight: 600;
  margin: 0 0 24px 0;
  line-height: 1;
}
.cont-blk.est-kpi-card .est-kpi-v {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.cont-blk.est-kpi-card .est-kpi-sub {
  font-family: sans-serif;
  font-size: 11px;
  margin: 14px 0 0 0;
  line-height: 1.3;
  color: var(--txt3);
}
.cont-blk.est-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-color: var(--negro);
}

/* MARCADOR_DESPLIEGUE_v10MAY_2026_SELECTOR_MES_MOVIL_CSS
   Selector horizontal arrastrable de meses para móvil. Reemplaza la
   cuadrícula 6+6 que ocupaba media pantalla. En PC permanece oculto. */
.cont-mes-mob-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* MARCADOR_DESPLIEGUE_v10MAY_2026_CARRUSEL_FIX_PADDING
     10/05/2026: el padding 4px 50% 4px 50% expandía el ancho intrínseco
     del carrusel a (50% + 50%) = 100% del padre + ancho de los chips,
     forzando scroll horizontal de toda la página. Padding reducido a
     valores fijos. Pierde el efecto "primer chip centrado al cargar"
     pero el JS hace scrollIntoView del chip activo igual. */
  padding: 4px 8px;
  scrollbar-width: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.cont-mes-mob-scroll::-webkit-scrollbar { display: none; }
.cont-mes-mob-chip {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 8px 4px;
  border-radius: 12px;
  border: 0.5px solid var(--borde);
  background: var(--sup);
  color: var(--txt2);
  font-family: sans-serif;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.cont-mes-mob-chip:active { transform: scale(0.96); }
.cont-mes-mob-chip .cont-mes-mob-num {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--txt3);
  line-height: 1;
}
.cont-mes-mob-chip .cont-mes-mob-lbl {
  font-size: 14px;
  font-weight: 600;
  margin-top: 3px;
  line-height: 1;
}
.cont-mes-mob-chip.active {
  background: var(--negro);
  color: #f8f6f1;
  border-color: var(--negro);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.cont-mes-mob-chip.active .cont-mes-mob-num,
.cont-mes-mob-chip.active .cont-mes-mob-lbl {
  color: #f8f6f1;
}
/* MARCADOR_DESPLIEGUE_v10MAY_2026_KPI_MOB_BAR_CSS
   Barra de progreso proporcional para móvil (Opción D).
   En PC permanece oculta — los chips son lo que se ve.
   En móvil (regla en mobile.css con @media) se muestra y los chips
   se ocultan. Cada segmento tiene un color y un ancho según su peso
   real (ej: Base 95% IVA 5% si Base=9903 e IVA=571). */
/* MARCADOR_DESPLIEGUE_v10MAY_2026_BARRA_PROPORCIONAL_PC
   La barra de progreso proporcional originalmente era solo para móvil
   (Opción D). Juan reportó que los chips fijos en PC se veían igual
   aunque los valores fueran muy distintos (Base 9.903 € e IVA 570 €
   ocupaban el mismo ancho). Solución: usar la misma barra proporcional
   en PC, aprovechando el ancho mayor para que se vea realmente bien.
   Los chips antiguos (.cont-kpi-desglose) quedan ocultos: la barra los
   reemplaza con la leyenda colorida abajo. */
.kpi-mob-bar{display:block;margin-top:8px}
.kpi-mob-bar-track{display:flex;height:10px;border-radius:5px;overflow:hidden;background:#eee;margin-bottom:6px}
.kpi-mob-bar-seg{height:100%;transition:width 0.3s}
.kpi-mob-bar-seg.seg-base{background:rgb(46,160,67)}
.kpi-mob-bar-seg.seg-iva{background:rgb(212,169,74)}
.kpi-mob-bar-seg.seg-opex{background:rgb(176,52,52)}
.kpi-mob-bar-seg.seg-capex{background:rgb(120,40,80)}
.kpi-mob-bar-leyenda{display:flex;justify-content:space-between;font-size:11px;font-family:sans-serif;line-height:1.3}
.kpi-mob-bar-leyenda .leg-l{color:var(--txt2)}
.kpi-mob-bar-leyenda .leg-l strong{color:var(--txt);font-weight:600}
.kpi-mob-bar-leyenda .leg-base{color:rgb(36,130,55)}
.kpi-mob-bar-leyenda .leg-iva{color:rgb(160,118,28)}
.kpi-mob-bar-leyenda .leg-opex{color:rgb(155,42,42)}
.kpi-mob-bar-leyenda .leg-capex{color:rgb(110,38,75)}
/* Cifras duales: en PC se ve la versión con decimales, en móvil la
   redondeada. El JS pinta ambas y el CSS móvil oculta la PC. */
.cifra-pc{display:inline}
.cifra-mob{display:none}

/* MARCADOR_DESPLIEGUE_v10MAY_2026_CONTABILIDAD_MODO_TODOS_CSS
   10/05/2026: cuando el centro activo es TODOS, fondo oscuro mate
   en toda la pestaña Contabilidad. Las tarjetas internas (cont-blk,
   cont-kpi) mantienen fondo claro y destacan visualmente — al usuario
   le queda muy claro que está en VISIÓN GLOBAL.
   El botón TODOS de los selectores se hace más grande y con su color
   de "activo total".
   v2 (10/05/2026 noche): rediseño tras ver captura — ENORMES huecos
   vacíos y proporciones malas. Compactar todo, banner integrado en la
   cabecera sin forzar flex-column. */
#vista-contabilidad.cont-todos {
  /* Efecto "nube": tinte oscuro translúcido sobre el fondo crema.
     Mucho más sutil que el negro mate anterior — Juan reportó que el
     negro era demasiado agresivo. Esto da una sensación de "zona
     diferenciada" sin romper la armonía cromática del ERP. */
  background: rgba(60, 50, 35, 0.08);
  border: 0.5px solid rgba(60, 50, 35, 0.15);
  border-radius: 8px;
  padding: 14px 18px 18px;
  margin: 0;
  transition: background 0.2s, padding 0.2s;
}
/* Cabecera y textos: ahora se mantienen oscuros porque el fondo es
   claro (no negro). No invertir colores. */
#vista-contabilidad.cont-todos .pt {
  color: var(--txt);
}
#vista-contabilidad.cont-todos .ps {
  color: var(--txt2);
}
/* Compactar el margen vertical de la cabecera. */
#vista-contabilidad.cont-todos .ph {
  margin-bottom: 12px;
}
/* Botón TODOS activo: destacado con borde fuerte y fondo oscuro
   sutil, no necesita ser color claro porque el fondo ya es claro. */
#vista-contabilidad.cont-todos #cont-centros-btns button[data-centro="todos"].active {
  background: var(--negro);
  color: #f0e8d8;
  border-color: var(--negro);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  font-weight: 700;
}
/* Botones NO activos: sutilmente diferenciados del fondo "nube". */
#vista-contabilidad.cont-todos #cont-centros-btns button:not(.active) {
  background: rgba(255,255,255,0.5);
  color: var(--txt);
  border-color: rgba(60,50,35,0.18);
}
#vista-contabilidad.cont-todos #cont-centros-btns button:not(.active):hover {
  background: rgba(255,255,255,0.8);
}
/* Subtabs (Resumen / Ingresos / Gastos). */
#vista-contabilidad.cont-todos .cont-subtab:not(.active) {
  background: rgba(255,255,255,0.5);
  color: var(--txt);
  border-color: rgba(60,50,35,0.16);
}
#vista-contabilidad.cont-todos .cont-subtab:not(.active):hover {
  background: rgba(255,255,255,0.8);
}
#vista-contabilidad.cont-todos .cont-subtab.active {
  background: var(--negro);
  color: #f0e8d8;
  border-color: var(--negro);
}
/* Tabs de mes. */
#vista-contabilidad.cont-todos .cont-mes-tab:not(.active) {
  background: rgba(255,255,255,0.5);
  color: var(--txt);
  border-color: rgba(60,50,35,0.16);
}
#vista-contabilidad.cont-todos .cont-mes-tab.active {
  background: var(--negro);
  color: #f0e8d8;
  border-color: var(--negro);
}
/* Selector de año. */
#vista-contabilidad.cont-todos #cont-anyo {
  background: rgba(255,255,255,0.7);
  color: var(--txt);
  border-color: rgba(60,50,35,0.18);
}
/* Las tarjetas internas (cont-kpi, cont-blk) mantienen su look claro.
   Su fondo blanco/sup destaca sobre el negro. No las tocamos. */
.cont-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:1.5rem}
.cont-blk{background:var(--sup);border:0.5px solid var(--borde);border-radius:var(--rl);padding:1.25rem}
.cont-blk-h{font-size:13px;font-weight:600;margin-bottom:1rem;padding-bottom:8px;border-bottom:0.5px solid var(--borde);display:flex;justify-content:space-between;align-items:center}
.cont-blk-total{font-size:17px;font-weight:700;color:var(--rojo)}
.cont-blk-total.pos{color:var(--verde)}
.cont-cat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--txt2);font-family:sans-serif;margin:12px 0 6px;padding-bottom:4px;border-bottom:0.5px solid var(--borde2)}
.cont-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:0.5px solid var(--borde);font-family:sans-serif;font-size:13px}
.cont-item:last-child{border-bottom:none}
.cont-item-r{display:flex;align-items:center;gap:8px}
.cont-item-imp{font-weight:600;font-size:14px}
.cbtn{font-size:10px;padding:2px 7px;border-radius:4px;border:0.5px solid var(--borde);background:transparent;color:var(--txt2);cursor:pointer;font-family:sans-serif}
.cbtn:hover{background:var(--sup2)}
.cbtn.del{border-color:var(--rojo);color:var(--rojo)}.cbtn.del:hover{background:#FCEBEB}
/* 26/05/2026 — Móvil: botones de Contabilidad más grandes para evitar miss-clicks.
   Aplica a TODOS los .cbtn (✏ editar + × eliminar) y al espacio que los separa.
   PC sigue intacto. Touch target mínimo ≈ 34×34 px (Apple HIG recomienda 44,
   pero priorizamos no romper el resto del layout). */
@media (max-width:768px){
  .cbtn{font-size:16px;padding:8px 14px;min-width:38px;min-height:38px;line-height:1;border-radius:6px;border-width:1px}
  .cbtn.del{border-width:1.5px}
  .cont-item-r{gap:10px}
  .cont-item{padding:8px 4px}
}
.cont-add{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:0.5px solid var(--borde);align-items:flex-end;flex-wrap:wrap}
.cont-add .fi{font-size:12px;padding:6px 8px}
.cont-anual{background:var(--sup);border:0.5px solid var(--borde);border-radius:var(--rl);overflow:hidden}
.cont-anual table{width:100%;border-collapse:collapse;font-family:sans-serif;font-size:12px}
.cont-anual thead th{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--txt3);font-weight:500;padding:8px 12px;border-bottom:0.5px solid var(--borde);background:var(--sup2);text-align:right;white-space:nowrap}
.cont-anual thead th:first-child{text-align:left}
.cont-anual tbody td{padding:8px 12px;border-bottom:0.5px solid var(--borde);text-align:right;font-family:sans-serif}
.cont-anual tbody td:first-child{text-align:left;font-weight:600}
.cont-anual tbody tr:last-child td{border-bottom:none;background:var(--sup2);font-weight:700}
.cont-anual .pos{color:var(--verde);font-weight:600}
.cont-anual .neg{color:var(--rojo);font-weight:600}

/* GRÁFICO EVOLUCIÓN ANUAL */
.gr-chart{position:relative;height:280px;display:flex;align-items:flex-end;gap:12px;padding:20px 10px 10px;border-bottom:1px solid var(--borde)}
.gr-mes{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;cursor:pointer;position:relative}
.gr-bars{flex:1;display:flex;gap:4px;align-items:flex-end;width:100%;justify-content:center}
.gr-bar-wrap{width:16px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:3px 3px 0 0;overflow:hidden}
.gr-bar{width:100%;transition:opacity 0.2s}
.gr-bar.iva{background:linear-gradient(180deg,#e6c271 0%,#d4a94a 100%)}
.gr-bar.base{background:linear-gradient(180deg,#4aa66e 0%,var(--verde) 100%)}
.gr-bar.gas{width:16px;background:linear-gradient(180deg,#c94848 0%,var(--rojo) 100%);border-radius:3px 3px 0 0}
.gr-mes-lbl{font-size:10px;font-family:sans-serif;color:var(--txt3);font-weight:600;text-transform:uppercase}
.gr-mes.active .gr-mes-lbl{color:var(--negro);font-weight:700}
.gr-mes.active .gr-bars{background:var(--sup2);border-radius:var(--r);padding:4px 6px;margin:0 -4px}
.gr-mes:hover .gr-bar,.gr-mes:hover .gr-bar.gas{opacity:0.85}
.gr-tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--negro);color:#f8f6f1;padding:6px 10px;border-radius:6px;font-family:sans-serif;font-size:11px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.15s;z-index:5;text-align:left}
.gr-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--negro)}
.gr-mes:hover .gr-tooltip{opacity:1}
.gr-legend{display:flex;gap:18px;justify-content:center;margin-top:14px;font-family:sans-serif;font-size:12px;color:var(--txt2)}
.gr-legend-item{display:flex;align-items:center;gap:6px}
.gr-legend-dot{width:12px;height:12px;border-radius:3px}

/* RESUMEN TRIMESTRAL */
.trim-wrap{margin-top:1rem;padding:14px 16px;background:#fff9e6;border:1px solid #e8a000;border-radius:var(--r)}
.trim-header{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;font-family:sans-serif;font-size:13px;color:#5a3f00;flex-wrap:wrap}
.trim-header .trim-label{font-weight:700;color:#7a5000;font-size:14px}
.trim-header .trim-hint{font-size:11px;color:#7a5000;margin-left:auto}
.trim-bar-wrap{position:relative;height:42px;background:var(--sup2);border-radius:var(--r);overflow:hidden;display:flex}
.trim-bar-base{background:linear-gradient(180deg,#4aa66e 0%,var(--verde) 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;font-family:sans-serif}
.trim-bar-iva{background:linear-gradient(180deg,#e6c271 0%,#d4a94a 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;font-family:sans-serif}
.trim-labels{display:flex;justify-content:space-between;font-family:sans-serif;font-size:11px;color:#7a5000;margin-top:8px}

/* FACTURAS HISTORIAL */
.btn-verfact{font-size:11px;padding:3px 10px;border-radius:var(--r);border:0.5px solid var(--borde);background:transparent;color:var(--azul);cursor:pointer;font-family:sans-serif;white-space:nowrap}
.btn-verfact:hover{background:#e8f0fb}

/* HOJA CUOTAS BAJAS Y HORARIOS */
.cuotas-tbl{border-collapse:collapse;font-size:12px;font-family:sans-serif;width:max-content;min-width:100%}
.cuotas-tbl th,.cuotas-tbl td{padding:6px 8px;text-align:left;border-bottom:0.5px solid var(--borde);vertical-align:middle;white-space:nowrap}
.cuotas-tbl thead th{background:#f0ede6;font-weight:600;color:var(--txt2);font-size:11px;text-transform:uppercase;letter-spacing:0.03em;position:sticky;top:0;z-index:5;border-bottom:1px solid var(--borde2)}
/* Sticky de cabecera en dos filas (Mejora 6/05/2026): la fila 1 (mes + columnas
   con rowspan="2") va en top:0, la fila 2 (sub-cabeceras Dto/Nota) va debajo.
   Sin esto, el thead con dos filas no queda pegado correctamente al hacer scroll. */
.cuotas-tbl thead tr:first-child th{top:0;z-index:6}
.cuotas-tbl thead tr:nth-child(2) th{top:38px;z-index:5}
.cuotas-tbl tbody tr:nth-child(even) td:not(.cfc){background:#fbfaf6}
.cuotas-tbl tbody tr:nth-child(even) .cfc{background:#fbfaf6}
.cuotas-tbl tbody tr:hover td:not(.cfc){background:#f3efe4 !important}
.cuotas-tbl tbody tr:hover .cfc{background:#f3efe4 !important}
/* Columnas fijas a la izquierda */
.cuotas-tbl .cfc{position:sticky;background:#fff;z-index:3}
.cuotas-tbl .cfc-cli{left:0;min-width:170px;border-right:0.5px solid var(--borde)}
/* Columna Programa eliminada (decisión 03/05/2026 noche). Las posiciones
   de las columnas posteriores se han recalculado partiendo de left:170
   directamente para .cfc-hor en vez de saltar al 310 que tenía la columna
   Programa. */
.cuotas-tbl .cfc-hor{left:170px;min-width:94px}
.cuotas-tbl .cfc-ent{left:264px;min-width:80px}
.cuotas-tbl .cfc-pago{left:344px;min-width:40px;border-right:1px solid var(--borde2);text-align:center}
.cuotas-tbl thead .cfc{z-index:6;background:#f0ede6}
/* Nombre cliente clicable */
.cli-nombre-hoja{font-weight:600;cursor:pointer;color:var(--azul)}
.cli-nombre-hoja:hover{text-decoration:underline}
/* Meses cabecera */
.cuotas-tbl .cmes{text-align:center;min-width:150px;border-left:2px solid var(--borde2);background:#f0ede6;padding:6px 4px}
.cuotas-tbl .cmes-act{background:#fff9e6;border-left:3px solid #e6c200;border-right:3px solid #e6c200}
/* Meses pasados más compactos — 60% del ancho */
.cuotas-tbl .cmes-pas{min-width:95px;background:#f4f2ed}
.cuotas-tbl .cmes-pas .cml{font-size:11px}
.cuotas-tbl .cmes-pas .cma{font-size:9px}
.cuotas-tbl .cml{font-weight:700;font-size:13px;color:var(--txt);letter-spacing:0.03em}
.cuotas-tbl .cma{font-size:10px;color:var(--txt3);font-weight:400;margin-top:2px}
.cuotas-tbl .cmes-act .cma{color:#8a7000;font-weight:600}
/* Total domiciliados */
.cuotas-tbl .cmtot{font-size:11px;font-weight:700;color:var(--azul);margin-top:4px;padding-top:4px;border-top:0.5px dashed var(--borde2);letter-spacing:0;text-transform:none;white-space:nowrap}
.cuotas-tbl .cmes-act .cmtot{color:#8a7000}
.cuotas-tbl .cmes-pas .cmtot{font-size:10px;color:var(--azul);opacity:0.75}
/* Sub-cabeceras Dto/Nota */
.cuotas-tbl .csub{text-align:center;min-width:75px;font-weight:500;font-size:10px;color:var(--txt3);text-transform:none;letter-spacing:0;padding:4px 6px}
.cuotas-tbl .csub-izq{border-left:2px solid var(--borde2)}
.cuotas-tbl .csub-act{background:#fff9e6}
.cuotas-tbl .csub-act.csub-izq{border-left:3px solid #e6c200}
.cuotas-tbl .csub-pas{font-size:9px;background:#f4f2ed;min-width:48px}
/* Celdas datos */
.cuotas-tbl td.cmes-cel{min-width:75px;text-align:center;vertical-align:middle;font-size:12px;cursor:pointer;user-select:none;padding:4px 6px}
.cuotas-tbl td.cmes-izq{border-left:2px solid var(--borde2)}
.cuotas-tbl td.cmes-der{border-right:none;min-width:120px}
.cuotas-tbl td.cmes-act{background:#fff9e6 !important}
.cuotas-tbl td.cmes-izq.cmes-act{border-left:3px solid #e6c200}
.cuotas-tbl td.cmes-der.cmes-act{border-right:3px solid #e6c200}
.cuotas-tbl td.cmes-pas{background:#f9f7f2;min-width:48px;font-size:11px;padding:2px 3px}
.cuotas-tbl td.cmes-pas .cimp{font-size:11px}
.cuotas-tbl td.cmes-pas .cdesc{font-size:9px;width:48px}
.cuotas-tbl td.cmes-pas .ctxt{font-size:10px}
.cuotas-tbl td.cmes-sel{outline:2px solid var(--azul);outline-offset:-2px;background:#e8f0fb !important}
/* Meses bloqueados (sin permiso de editar pasados): inputs sutilmente grises */
.cuotas-tbl td.cmes-bloq .cdesc,.cuotas-tbl td.cmes-bloq .ctxt{opacity:0.85;cursor:default;background:transparent}
.cuotas-tbl td.cmes-bloq .cdesc{pointer-events:none}
/* Importe */
.cimp{font-weight:600;font-size:13px;margin-bottom:2px;color:var(--txt)}
.cimp-0{color:var(--txt3)}
/* Desplegable descuento */
.cdesc{font-size:10px;padding:1px 4px;border:0.5px solid var(--borde);border-radius:3px;background:#fff;font-family:sans-serif;color:var(--txt2);cursor:pointer;width:62px}
.cdesc-apl{font-weight:700;color:var(--txt)}
.cdesc:disabled{opacity:0.6;cursor:not-allowed;background:#f4f2ed}
/* Textarea de 2 líneas */
.ctxt{font-size:11px;font-family:sans-serif;color:inherit;padding:3px 5px;border:none;background:transparent;width:100%;text-align:center;cursor:text;min-height:34px;resize:none;line-height:1.25;overflow:hidden;white-space:normal;word-break:break-word;display:block}
.ctxt:focus{outline:1px solid var(--azul);background:#fff;overflow:auto}
.ctxt:disabled{cursor:not-allowed;color:inherit;-webkit-text-fill-color:currentColor;opacity:0.9}
/* 09/06/2026 — Iconos de la columna de la nota (opcion 1): fila DEBAJO de la
   nota, anchos y con color. Palmera = verde (reserva). Entrenos = azul. */
.cqv-wrap{display:flex;flex-direction:column;gap:5px;min-height:40px}
.cqv-iconos{display:flex;gap:5px}
.cqv-btn{flex:1;height:26px;display:flex;align-items:center;justify-content:center;gap:3px;border:0.5px solid var(--borde);border-radius:6px;background:var(--sup,#f4f2ed);cursor:pointer;padding:0;line-height:1;color:var(--txt2)}
.cqv-btn:hover{filter:brightness(0.97)}
.cqv-btn:disabled{opacity:0.4;cursor:not-allowed}
.cqv-palmera{font-size:13px;border-color:#9FE1CB;background:#E1F5EE;color:#0F6E56;filter:grayscale(1);opacity:0.5}
.cqv-palmera.cqv-on{filter:none;opacity:1;border-color:#1D9E75;font-weight:600}
.cqv-gestion{border-color:#85B7EB;background:#E6F1FB;color:#185FA5}
/* Colores según marcador — aplica a importe, select y texto */
.cuotas-tbl td.cmark-negro .cimp,.cuotas-tbl td.cmark-negro .ctxt,.cuotas-tbl td.cmark-negro .cdesc{color:var(--txt)}
.cuotas-tbl td.cmark-verde .cimp,.cuotas-tbl td.cmark-verde .ctxt,.cuotas-tbl td.cmark-verde .cdesc{color:var(--verde);font-weight:600;-webkit-text-fill-color:var(--verde)}
.cuotas-tbl td.cmark-rojo .cimp,.cuotas-tbl td.cmark-rojo .ctxt,.cuotas-tbl td.cmark-rojo .cdesc{color:var(--rojo);font-weight:600;-webkit-text-fill-color:var(--rojo)}
/* 13/05/2026 — Marcadores de conciliación Baja (-1) y Pausa (-2). Usan
   borde de celda + icono en esquina superior derecha. NO interfieren con
   los marcadores de texto (negro/verde/rojo) porque aquellos cambian
   color del texto, no bordes. */
.cuotas-tbl td.cmes-baja{box-shadow:inset 0 0 0 1px var(--rojo);position:relative}
.cuotas-tbl td.cmes-baja::after{content:'💀';position:absolute;top:1px;right:3px;font-size:11px;line-height:1;pointer-events:none;opacity:0.85;z-index:1}
.cuotas-tbl td.cmes-pausa{box-shadow:inset 0 0 0 1px rgba(120,120,120,0.65);position:relative}
.cuotas-tbl td.cmes-pausa::after{content:'⏸';position:absolute;top:1px;right:3px;font-size:11px;line-height:1;pointer-events:none;opacity:0.8;z-index:1}
/* Badge pago */
.cbp{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;font-weight:700;font-size:11px;color:#fff}
.cbp-T{background:#7a5cbe}
.cbp-D{background:#2d7a4f}
.cbp-E{background:#b87d22}
/* Barra acciones */
.cba{padding:5px 12px;border-radius:var(--r);border:0.5px solid var(--borde);background:#fff;font-family:sans-serif;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-right:6px}
.cba:hover:not(:disabled){background:#fbfaf6}
.cba:disabled{opacity:0.4;cursor:not-allowed}
.cba .cbadot{width:10px;height:10px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,0.15)}
.cba-negro .cbadot{background:#1a1a1a}
.cba-rojo{color:var(--rojo)}
.cba-rojo .cbadot{background:var(--rojo)}
.cba-verde{color:var(--verde);font-weight:600}
.cba-verde .cbadot{background:var(--verde)}
/* Banner aviso pendientes */
.cuotas-banner{display:flex;align-items:center;gap:12px;background:#fff8dc;border:1px solid #e6c200;border-radius:var(--r);padding:12px 16px;margin:12px 0 14px;font-family:sans-serif;font-size:13px;color:#5c4500;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.cuotas-banner .cba-icono{font-size:20px;flex-shrink:0}
.cuotas-banner strong{color:#3a2a00;font-weight:700}
.cuotas-banner .cba-cerrar{margin-left:auto;background:transparent;border:none;font-size:18px;cursor:pointer;color:#8a7000;padding:0 6px;line-height:1;flex-shrink:0}
.cuotas-banner .cba-cerrar:hover{color:#3a2a00}
/* Contador sidebar junto al ítem de Cuotas */
.cal-toggle-btn{background:transparent;color:var(--txt1);transition:background 0.15s ease}
.cal-toggle-btn:hover{background:rgba(0,0,0,0.05)}
.cal-toggle-btn-active{background:var(--txt1)!important;color:white!important;box-shadow:inset 0 2px 6px rgba(0,0,0,0.25)}
.ni .cuotas-contador{display:inline-block;background:var(--rojo);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:6px;min-width:18px;text-align:center;font-family:sans-serif;vertical-align:middle}
.ni .cli-sin-ins-contador{display:inline-block;background:#e8a000;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:6px;min-width:18px;text-align:center;font-family:sans-serif;vertical-align:middle}
.cli-banner-amarillo{display:flex;gap:12px;align-items:flex-start;background:#fef9f0;border:0.5px solid #e8a000;border-radius:var(--r);padding:12px 16px;margin:0 0 14px 0;font-family:sans-serif;font-size:13px;color:#7a5000}
.cli-banner-amarillo .cli-banner-icono{font-size:18px;flex-shrink:0;line-height:1.2}
.cli-banner-amarillo .cli-banner-contenido{flex:1;line-height:1.6}
.cli-banner-amarillo .cli-banner-item:hover{text-decoration:underline}
.ni .cli-sin-nivel-contador{display:inline-block;background:var(--azul);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:6px;min-width:18px;text-align:center;font-family:sans-serif;vertical-align:middle}
.cli-banner-azul{display:flex;gap:12px;align-items:flex-start;background:#eef4fb;border:0.5px solid var(--azul);border-radius:var(--r);padding:12px 16px;margin:0 0 14px 0;font-family:sans-serif;font-size:13px;color:#143a5e}
.cli-banner-azul .cli-banner-icono{font-size:18px;flex-shrink:0;line-height:1.2}
.cli-banner-azul .cli-banner-contenido{flex:1;line-height:1.6}
.cli-banner-azul .cli-banner-item:hover{text-decoration:underline}

@media(max-width:768px){
  /* Bloque C4 (8/05/2026): la regla `.sb{width:100%;min-height:auto;position:relative}.main{margin-left:0;padding:1rem}`
     que vivía aquí se ha movido a src/core/mobile.css (sección C4). Allí se
     sustituye por sidebar deslizable + topbar de dos filas. Si ves comportamiento
     extraño del sidebar en móvil, comprueba que mobile.css se está cargando. */
  .kpi-grid{grid-template-columns:1fr 1fr}.fr{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}
  .remesa-summary{grid-template-columns:1fr}.cont-kpis{grid-template-columns:1fr 1fr}.cont-cols{grid-template-columns:1fr}
  /* 19/05/2026 — En móvil el botón del podio (🏆) vive en la topbar móvil
     (fila 1, esquina derecha) creado desde mobile-helpers.js. Ocultamos
     el de la cabecera del calendario para que NO salga cortado debajo
     del topbar fijo. */
  #cal-btn-podio { display: none !important; }
}

/* ─── CALENDARIO (Fase 6) ──────────────────────────────────────────────────── */
#cal-sel-prof .cal-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 16px; cursor: pointer;
  background: #fff; border: 1px solid var(--borde);
  font-family: sans-serif; font-size: 12px;
  transition: all 0.12s;
}
#cal-sel-prof .cal-chip:hover { background: #f5f6f7; }
#cal-sel-prof .cal-chip.activo {
  background: #2b5797; color: #fff; border-color: #2b5797;
}
#cal-sel-prof .cal-chip .cal-swatch {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 3px; border: 0.5px solid rgba(0,0,0,0.15);
}
#cal-sel-prof .cal-chip .cal-rol-mini {
  font-size: 10px; color: var(--txt3); font-weight: 500;
}
#cal-sel-prof .cal-chip.activo .cal-rol-mini { color: rgba(255,255,255,0.7); }

/* Rejilla — 1 semana (7 días). Corner + 6 días entresemana + 1 domingo más estrecho.
   Antes eran 14 columnas (2 semanas) — cambiado a 7 el 27/04 por decisión Juan. */
.cal-header, .cal-cuerpo {
  display: grid;
  /* 30/07/2026 (Juan): las cabeceras de dia no coincidian con sus columnas.
     Causa: cabecera y cuerpo son DOS rejillas hermanas y un 1fr nunca baja
     del ancho minimo de su contenido — si una tarjeta empuja, la columna del
     cuerpo engorda, la cabecera no, y el desvio se acumula hacia la derecha.
     minmax(0,1fr) clava las pistas al reparto exacto: el contenido encoge
     dentro (los nombres ya llevan puntos suspensivos) y cabecera y cuerpo
     miden SIEMPRE lo mismo, haya lo que haya dentro. */
  grid-template-columns:
    60px
    repeat(6, minmax(0, 1fr)) 70px;
}
.cal-header {
  background: #f8f9fa; border-bottom: 2px solid var(--borde);
  position: sticky; top: 0; z-index: 10;
}
.cal-hh {
  padding: 6px 4px; font-size: 11px; text-align: center;
  border-right: 1px solid var(--borde-suave);
  color: var(--txt2);
}
.cal-hh.dia { font-weight: 600; color: var(--txt); }
.cal-hh.dia.hoy { background: #e3edf8; color: #2b5797; }
.cal-hh.dia.festivo { background: #f1f3f5; color: var(--txt3); }
.cal-hh.col-domingo { background: #f5f5f5; font-size: 9px; }
.cal-hh.sem-divider { border-right: 2px solid var(--borde) !important; }

/* Corte horario: separación visual cuando hay un salto entre horas (ej. 14:00 → 15:00).
   Pinta una línea más gruesa arriba de las filas que vienen tras un hueco. */
.cal-hora.cal-corte,
.cal-celda.cal-corte { border-top: 3px solid var(--borde); }
/* Línea fina horizontal entre cada inicio de slot — ayuda a identificar dónde empieza
   cada sesión (07:20, 08:10, 09:00...). Más sutil que el corte de turno. */
.cal-hora,
.cal-celda { border-top: 1px solid rgba(0,0,0,0.06); }
/* La primera fila no necesita borde superior */
.cal-hora.cal-primera,
.cal-celda.cal-primera { border-top: none; }
.cal-hh .dia-num { font-size: 15px; font-weight: 700; display: block; }

.cal-hora {
  padding: 4px 6px 4px 4px; font-size: 10.5px; text-align: right;
  color: var(--txt2);
  border-right: 1px solid var(--borde);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex; align-items: flex-start; justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  background: #fafbfc;
  position: sticky; left: 0; z-index: 5;
}
.cal-celda {
  border-right: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  min-height: 92px; position: relative;
  padding: 2px;
  display: flex; flex-wrap: wrap; align-content: stretch; gap: 2px;
  min-width: 0; /* 30/07/2026: permite encoger — sin esto el nowrap de los nombres empuja la columna */
}
.cal-celda > * { min-width: 0; } /* 30/07/2026: la cadena de encogimiento llega a las tarjetas (los ellipsis funcionan) */
/* 30/07/2026 (Juan) — prioridades en celda: si conviven sesiones y marcadores
   (vacaciones/vacío/cerrado), el marcador se encoge a una tira: icono y aspa
   visibles, texto completo en el tooltip, click de reasignar intacto. */
.cal-celda.cal-mixta .cal-prio-baja {
  flex: 0 0 46px; min-width: 46px; max-width: 46px;
  order: 99; min-height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.cal-celda.cal-mixta .cal-prio-baja span { display: none; }
.cal-celda.cal-mixta .cal-prio-baja span:first-child { display: inline; }
.cal-celda.col-domingo { background: #f5f5f5; }
.cal-celda.sem-divider { border-right: 2px solid var(--borde); }
.cal-celda.fuera-horario { background: #f1f3f5; cursor: default; }
.cal-celda.festivo { background: #f1f3f5; cursor: default; }
.cal-celda.ausencia { background: rgba(0,0,0,0.04); }

.cal-slot {
  border-radius: 3px; padding: 2px 4px;
  font-size: 9.5px; line-height: 1.25; cursor: pointer;
  overflow: hidden;
  border-left: 3px solid;
  flex: 1 1 auto; min-width: 30%; min-height: 36px;
  align-self: stretch;
  display: flex; flex-direction: column; gap: 1px;
  position: relative;
  font-family: sans-serif;
}
.cal-slot.full-width { flex-basis: 100%; align-self: stretch; }
/* 27/07/2026 — Un post-it (tarea) que comparte celda con la sesión del
   trabajador iba como slot estrecho compitiendo por hueco: según la
   composición quedaba estrujado o montado con ella. Franja completa propia
   y compacta: SIEMPRE salen los dos, uno sobre otro en orden de hora. */
.cal-slot.cal-slot-bloque { flex-basis: 100%; min-height: 24px; }
.cal-slot:hover {
  filter: brightness(0.93);
  box-shadow: 0 0 0 2px #2b5797;
  z-index: 5;
}
.cal-slot.vacio {
  border-left-width: 4px !important;
  border-left-style: solid !important;
  color: var(--txt3);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.3px; font-weight: 600;
}
.cal-slot.vacio:hover { filter: brightness(0.96); }
.cal-slot .cal-badge-cubre {
  display: inline-block; background: rgba(0,0,0,0.18);
  padding: 0 4px; border-radius: 2px;
  font-size: 8px; font-weight: 700;
}
.cal-slot .cal-nombre { font-weight: 600; font-size: 9.5px; }
.cal-slot .cal-extras { color: rgba(0,0,0,0.55); font-size: 8.5px; }
/* 13/08/2026 — Letra blanca sobre colores oscuros del trabajador: el juez de
   luminancia (window._calTextoSobre) añade .tx-claro a los slots de entreno y
   cita cuando el fondo (color del prof) es oscuro. */
.cal-slot.tx-claro { color: #fff; }
.cal-slot.tx-claro .cal-extras { color: rgba(255,255,255,0.72); }
.cal-slot.estado-realizada::before {
  content: '✓'; color: var(--verde); font-weight: 700;
  margin-right: 2px; font-size: 10px;
}
.cal-slot.estado-no-asistio,
.cal-slot.estado-cancelada-tarde {
  text-decoration: line-through; opacity: 0.55;
  border-left-color: var(--rojo) !important;
}

.cal-tarjeta {
  background: var(--panel);
  border: 0.5px solid var(--borde);
  border-radius: var(--r);
  padding: 12px;
}
.cal-tarjeta h3 {
  margin: 0 0 8px 0;
  font-family: sans-serif; font-size: 12px;
  color: var(--txt2); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cal-tarjeta .cal-num-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.cal-tarjeta .cal-num-item {
  background: var(--sup);
  border-radius: var(--r);
  padding: 8px;
  text-align: center;
}
.cal-tarjeta .cal-num-valor {
  font-size: 18px; font-weight: 700; color: var(--txt);
  font-family: sans-serif;
}
.cal-tarjeta .cal-num-label {
  font-size: 10px; color: var(--txt3);
  font-family: sans-serif;
}
.cal-tarjeta .cal-mini-list {
  list-style: none; padding: 0; margin: 0;
  font-family: sans-serif; font-size: 11px;
}
.cal-tarjeta .cal-mini-list li {
  padding: 4px 0;
  border-bottom: 0.5px solid var(--borde-suave);
  display: flex; justify-content: space-between; align-items: center;
}
.cal-tarjeta .cal-mini-list li:last-child { border-bottom: none; }
.cal-tarjeta .cal-mini-list li .meta {
  color: var(--txt3); font-size: 10px;
}
.cal-tarjeta .cal-mini-list li .ctd {
  font-weight: 600; font-size: 10px;
  background: var(--sup); padding: 2px 6px;
  border-radius: 8px;
}
.cal-tarjeta .cal-mini-list li .ctd.alerta-naranja {
  color: var(--naranja); background: #fff3e0;
}
.cal-tarjeta .cal-mini-list li .ctd.alerta-rojo {
  color: var(--rojo); background: #fde4e4;
}
.cal-tarjeta .cal-leyenda-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; font-family: sans-serif; font-size: 11px;
}
.cal-tarjeta .cal-leyenda-row .cal-swatch {
  width: 14px; height: 14px; border-radius: 3px;
  border: 0.5px solid rgba(0,0,0,0.15);
}

@media (max-width: 1100px) {
  #cal-layout { grid-template-columns: 1fr !important; }
  #cal-panel-lateral { order: -1; }
}
/* ─── /CALENDARIO ──────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   GAMIFICACIÓN VISUAL — paquete CSS reutilizable
   ─────────────────────────────────────────────────────────────────────────
   Clases comunes para todos los componentes de gamificación:
   - Widget del calendario
   - Modal del podio (escalones, top históricos, vendedor, etc.)
   - Ficha individual del trabajador
   - Banners de recompensa

   Lenguaje visual: 4 paletas progresivas, una por acto.
   Cada acto es más "rico" visualmente que el anterior, reflejando el
   ascenso del trabajador.

   Variables: ZENON_GAMIFICACION.md §3.3 (paletas oficiales)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Acto 1 — Llegar (patina verdosa) */
  --gamif-llegar-base:  #7d9b85;
  --gamif-llegar-borde: #5d7864;
  --gamif-llegar-luz:   #a3b8a8;
  /* Acto 2 — Demostrar (bronce) */
  --gamif-demostrar-base:  #a0633a;
  --gamif-demostrar-borde: #6b3f1f;
  --gamif-demostrar-luz:   #d4a274;
  /* Acto 3 — Liderar (plata) */
  --gamif-liderar-base:  #8b95a3;
  --gamif-liderar-borde: #5e6772;
  --gamif-liderar-luz:   #d4dae0;
  /* Acto 4 — Trascender (oro) */
  --gamif-trascender-base:  #c9a23a;
  --gamif-trascender-borde: #8b6f1a;
  --gamif-trascender-luz:   #f0d878;
}

/* ─── Disco circular con sprite dentro ─────────────────────────────────── */
.gamif-disco {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
}
.gamif-disco--xs { width: 32px;  height: 32px; }   /* lista compacta (podio) */
.gamif-disco--sm { width: 75px;  height: 75px; }   /* widget KPI calendario */
.gamif-disco--md { width: 80px;  height: 80px; }   /* fila puntos históricos */
.gamif-disco--lg { width: 120px; height: 120px; }  /* ficha trabajador */

/* Sprite dentro del disco — tamaño absoluto por tamaño de disco.
   No usamos % porque dentro de inline-flex los % de altura no se aplican
   de forma fiable en todos los navegadores. Tamaño fijo en px. */
.gamif-disco img {
  display: block;
  width: auto;
  image-rendering: auto;
  image-rendering: smooth;
  image-rendering: high-quality;
  pointer-events: none;
}
.gamif-disco--xs img { height: 30px; }
.gamif-disco--sm img { height: 72px; }
.gamif-disco--md img { height: 76px; }
.gamif-disco--lg img { height: 116px; }

/* Paletas del disco — gradiente radial + borde + sombra interior */
.gamif-disco--llegar {
  background: radial-gradient(circle at 50% 35%, var(--gamif-llegar-luz) 0%, var(--gamif-llegar-base) 60%, var(--gamif-llegar-borde) 100%);
  box-shadow: inset 0 0 0 2px var(--gamif-llegar-borde), inset 0 -4px 10px rgba(0,0,0,0.2), inset 0 4px 10px rgba(255,255,255,0.18);
}
.gamif-disco--demostrar {
  background: radial-gradient(circle at 50% 35%, var(--gamif-demostrar-luz) 0%, var(--gamif-demostrar-base) 60%, var(--gamif-demostrar-borde) 100%);
  box-shadow: inset 0 0 0 2px var(--gamif-demostrar-borde), inset 0 -4px 10px rgba(0,0,0,0.25), inset 0 4px 10px rgba(255,255,255,0.18);
}
.gamif-disco--liderar {
  background: radial-gradient(circle at 50% 35%, var(--gamif-liderar-luz) 0%, var(--gamif-liderar-base) 60%, var(--gamif-liderar-borde) 100%);
  box-shadow: inset 0 0 0 2px var(--gamif-liderar-borde), inset 0 -4px 10px rgba(0,0,0,0.2), inset 0 4px 10px rgba(255,255,255,0.3);
}
.gamif-disco--trascender {
  background: radial-gradient(circle at 50% 35%, var(--gamif-trascender-luz) 0%, var(--gamif-trascender-base) 55%, var(--gamif-trascender-borde) 100%);
  box-shadow:
    inset 0 0 0 2px var(--gamif-trascender-borde),
    inset 0 -4px 10px rgba(0,0,0,0.18),
    inset 0 4px 10px rgba(255,255,255,0.35),
    0 0 12px rgba(240,216,120,0.45);
  animation: gamif-disco-trascender-pulse 3s ease-in-out infinite;
}
@keyframes gamif-disco-trascender-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--gamif-trascender-borde), inset 0 -4px 10px rgba(0,0,0,0.18), inset 0 4px 10px rgba(255,255,255,0.35), 0 0 12px rgba(240,216,120,0.45); }
  50%      { box-shadow: inset 0 0 0 2px var(--gamif-trascender-borde), inset 0 -4px 10px rgba(0,0,0,0.18), inset 0 4px 10px rgba(255,255,255,0.5),  0 0 24px rgba(240,216,120,0.7); }
}

/* Estado "sin rango" / nivel 0 (gris apagado) */
.gamif-disco--apagado {
  background: radial-gradient(circle at 50% 35%, #d8d4cc 0%, #b8b3a8 60%, #8a857d 100%);
  box-shadow: inset 0 0 0 2px #8a857d, inset 0 -4px 10px rgba(0,0,0,0.2), inset 0 4px 10px rgba(255,255,255,0.15);
}
.gamif-disco--apagado .gamif-iniciales {
  color: rgba(0,0,0,0.45);
  font-weight: 700;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 1px;
}

/* Iniciales como fallback dentro del disco (cuando no hay sprite) */
.gamif-iniciales {
  align-self: center;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  color: rgba(0,0,0,0.55);
  letter-spacing: 2px;
}
.gamif-disco--xs .gamif-iniciales { font-size: 11px; }
.gamif-disco--sm .gamif-iniciales { font-size: 16px; }
.gamif-disco--md .gamif-iniciales { font-size: 22px; }
.gamif-disco--lg .gamif-iniciales { font-size: 34px; }

/* ─── Barra de progreso V4 GEMA — lenguaje progresivo por acto y nivel ─
   Estilo cristal/gema con facetas (sombra arriba + sombra abajo).
   Los 4 actos tienen shimmer animado con intensidad y velocidad crecientes:
     Acto 1 Llegar:     shimmer muy sutil y muy lento (apenas se nota)
     Acto 2 Demostrar:  shimmer sutil lento (se ve un brillo bronce)
     Acto 3 Liderar:    shimmer medio (plata reflejando)
     Acto 4 Trascender: shimmer rápido + halo dorado + sparkles

   ADORNOS POR NIVEL DENTRO DEL RANGO (clase .gamif-barra-fill--lvlN):
     lvl1: barra básica
     lvl2: añade una pequeña marca dorada a la izquierda
     lvl3: marca dorada + brillo central
     lvl4: borde superior brillante
     lvl5: detalle de "remate" en el extremo derecho (lleno del rango)
   Estos son detalles muy sutiles que se acumulan al subir nivel.
*/
.gamif-barra {
  position: relative;
  width: 100%;
  height: 14px;
  background: #1a1612;
  border-radius: 3px;
  padding: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
}
.gamif-barra--md { height: 16px; border-radius: 3px; }
.gamif-barra--lg { height: 20px; border-radius: 4px; }

/* ── Segmentos del rango (20/05/2026) ───────────────────────────────────────
   Tira de 5 (o N) segmentos sobre la barra que indican visualmente cuántos
   niveles tiene este rango, cuántos ya están completados y cuál es el
   actual. Resuelve la queja "no se ve el progreso entre niveles y rangos".

   Estado por segmento:
   - pasado: nivel ya superado dentro del rango. Color del rango pero tenue.
   - actual: nivel en curso. Color vivo del rango.
   - futuro: aún no alcanzado. Semi-transparente.
*/
.gamif-barra-segmentos {
  display: flex;
  gap: 3px;
  width: 100%;
  height: 6px;
  margin-bottom: 0;
}
.gamif-barra-seg {
  flex: 1;
  height: 100%;
  border-radius: 1.5px;
  transition: background 0.3s ease;
}
.gamif-barra-seg--pasado {
  background: var(--gamif-color-acento, #d4af37);
  opacity: 0.55;
}
.gamif-barra-seg--actual {
  background: var(--gamif-color-acento, #d4af37);
  opacity: 1;
  box-shadow: 0 0 4px var(--gamif-color-acento, #d4af37);
}
.gamif-barra-seg--futuro {
  background: rgba(255,255,255,0.12);
  border: 0.5px solid rgba(255,255,255,0.08);
}

.gamif-barra-fill {
  position: relative;
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Acto 1 · Llegar: gema verde con shimmer muy sutil y muy lento */
.gamif-barra-fill--llegar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 35%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.2) 100%),
    linear-gradient(180deg, var(--gamif-llegar-luz) 0%, var(--gamif-llegar-base) 50%, var(--gamif-llegar-borde) 100%);
}
.gamif-barra-fill--llegar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,0.18) 50%, transparent 58%);
  background-size: 300% 100%;
  animation: gamif-shimmer-muy-lento 11s linear infinite;
  pointer-events: none;
}

/* Acto 2 · Demostrar: gema bronce con shimmer sutil + faceta central */
.gamif-barra-fill--demostrar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 35%),
    linear-gradient(180deg, transparent 48%, rgba(0,0,0,0.22) 50%, transparent 52%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.3) 100%),
    linear-gradient(180deg, var(--gamif-demostrar-luz) 0%, var(--gamif-demostrar-base) 50%, var(--gamif-demostrar-borde) 100%);
}
.gamif-barra-fill--demostrar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 38%, rgba(255,235,200,0.32) 50%, transparent 62%);
  background-size: 250% 100%;
  animation: gamif-shimmer-lento-2 8s linear infinite;
  pointer-events: none;
}

/* Acto 3 · Liderar: gema plata con shimmer medio + borde brillante inferior */
.gamif-barra-fill--liderar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.45) 0%, transparent 35%),
    linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, var(--gamif-liderar-luz) 0%, var(--gamif-liderar-base) 50%, var(--gamif-liderar-borde) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.4);
}
.gamif-barra-fill--liderar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
  background-size: 200% 100%;
  animation: gamif-shimmer-medio 5s linear infinite;
  pointer-events: none;
}

/* Acto 4 · Trascender: gema oro con shimmer rápido + halo dorado animado */
.gamif-barra-fill--trascender {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, transparent 40%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, var(--gamif-trascender-luz) 0%, var(--gamif-trascender-base) 50%, var(--gamif-trascender-borde) 100%);
  box-shadow:
    0 0 10px rgba(240,216,120,0.7),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(255,235,150,0.5);
  animation: gamif-trascender-halo 3s ease-in-out infinite;
}
.gamif-barra-fill--trascender::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.75) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: gamif-shimmer-rapido 2.5s linear infinite;
  pointer-events: none;
}
@keyframes gamif-trascender-halo {
  0%,100% { box-shadow: 0 0 8px rgba(240,216,120,0.55), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(255,235,150,0.4); }
  50%     { box-shadow: 0 0 18px rgba(240,216,120,1),    inset 0 1px 0 rgba(255,255,255,0.8),  inset 0 -1px 0 rgba(255,235,150,0.7); }
}

@keyframes gamif-shimmer-muy-lento {
  0%   { background-position: -300% 0; }
  100% { background-position:  300% 0; }
}
@keyframes gamif-shimmer-lento-2 {
  0%   { background-position: -250% 0; }
  100% { background-position:  250% 0; }
}
@keyframes gamif-shimmer-medio {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes gamif-shimmer-rapido {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ─── ADORNOS POR NIVEL DENTRO DEL RANGO ─────────────────────────────────
   Se aplican como clases adicionales: .gamif-barra-fill--lvl2 etc.
   Cada nivel añade un detalle sutil. Es ACUMULATIVO conceptualmente pero
   en CSS solo se aplica el de tu nivel actual para no saturar.

   lvl1: nada extra (barra base del acto)
   lvl2: pequeño punto/joya en el borde izquierdo
   lvl3: lvl2 + un brillo central sutil
   lvl4: lvl3 + borde superior reluciente
   lvl5: lvl4 + remate dorado en el extremo derecho (rango completo)
*/
.gamif-barra-fill--lvl2::before,
.gamif-barra-fill--lvl3::before,
.gamif-barra-fill--lvl4::before,
.gamif-barra-fill--lvl5::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,235,150,0.85);
  box-shadow: 0 0 3px rgba(255,235,150,0.9);
  z-index: 1;
}
.gamif-barra-fill--lvl4,
.gamif-barra-fill--lvl5 {
  border-top: 1px solid rgba(255,255,255,0.5) !important;
}
.gamif-barra-fill--lvl5 {
  box-shadow: 0 0 6px rgba(240,216,120,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}
/* Para Trascender (lvl en rango Zenon, 4 niveles): los adornos los iluminan más */
.gamif-barra-fill--trascender.gamif-barra-fill--lvl2::before,
.gamif-barra-fill--trascender.gamif-barra-fill--lvl3::before,
.gamif-barra-fill--trascender.gamif-barra-fill--lvl4::before {
  background: rgba(255,250,200,1);
  box-shadow: 0 0 5px rgba(255,235,150,1);
  width: 4px;
  height: 4px;
}

/* ─── Estrellas del rango ───────────────────────────────────────────────── */
.gamif-estrellas {
  display: inline-flex;
  gap: 1px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
}
.gamif-estrella--llena {
  color: currentColor;
  text-shadow: 0 0 2px currentColor;
}
.gamif-estrella--vacia {
  color: rgba(0,0,0,0.18);
}

/* ─── Cinta/badge con nombre del rango ──────────────────────────────────── */
.gamif-nombre-rango {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMACIONES DE TRANSICIÓN (subir nivel / rango / acto)
   ─────────────────────────────────────────────────────────────────────────
   Se aplican AÑADIENDO una clase al elemento durante un tiempo limitado.
   El JS de gamif-ui.js detecta el cambio comparando snapshot anterior con
   el actual y dispara la clase apropiada.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Fogonazo de la nueva estrella al subir nivel dentro del rango */
.gamif-estrella-nueva {
  animation: gamif-estrella-fogonazo 700ms ease-out;
  display: inline-block;
}
@keyframes gamif-estrella-fogonazo {
  0%   { transform: scale(0.3); opacity: 0; filter: brightness(2); }
  35%  { transform: scale(1.8); opacity: 1; filter: brightness(3) drop-shadow(0 0 8px currentColor); }
  70%  { transform: scale(1.0); filter: brightness(1.5) drop-shadow(0 0 4px currentColor); }
  100% { transform: scale(1.0); filter: brightness(1); }
}

/* (2) Reinicio de estrellas en cadena al subir de rango — destellos secuenciales */
.gamif-rango-nuevo .gamif-estrella--llena,
.gamif-rango-nuevo .gamif-estrella--vacia {
  animation: gamif-estrella-cadena 600ms ease-out;
}
.gamif-rango-nuevo .gamif-estrella--llena:nth-child(1),
.gamif-rango-nuevo .gamif-estrella--vacia:nth-child(1) { animation-delay: 0ms; }
.gamif-rango-nuevo .gamif-estrella--llena:nth-child(2),
.gamif-rango-nuevo .gamif-estrella--vacia:nth-child(2) { animation-delay: 100ms; }
.gamif-rango-nuevo .gamif-estrella--llena:nth-child(3),
.gamif-rango-nuevo .gamif-estrella--vacia:nth-child(3) { animation-delay: 200ms; }
.gamif-rango-nuevo .gamif-estrella--llena:nth-child(4),
.gamif-rango-nuevo .gamif-estrella--vacia:nth-child(4) { animation-delay: 300ms; }
.gamif-rango-nuevo .gamif-estrella--llena:nth-child(5),
.gamif-rango-nuevo .gamif-estrella--vacia:nth-child(5) { animation-delay: 400ms; }
@keyframes gamif-estrella-cadena {
  0%   { transform: scale(0.5) rotate(-45deg); opacity: 0; }
  50%  { transform: scale(1.5) rotate(0deg);  opacity: 1; filter: drop-shadow(0 0 6px currentColor); }
  100% { transform: scale(1.0) rotate(0deg);  opacity: 1; }
}

/* (3) Crossfade del sprite en disco al subir de rango */
.gamif-disco-nuevo-rango {
  animation: gamif-disco-rango-pulso 900ms ease-out;
}
@keyframes gamif-disco-rango-pulso {
  0%   { transform: scale(1);    filter: brightness(1); }
  35%  { transform: scale(1.18); filter: brightness(1.4) drop-shadow(0 0 12px rgba(255,255,255,0.6)); }
  100% { transform: scale(1);    filter: brightness(1); }
}

/* (4) Transmutación del disco al subir de acto — más fuerte que cambio de rango */
.gamif-disco-nuevo-acto {
  position: relative;
  animation: gamif-disco-transmuta 1600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gamif-disco-nuevo-acto::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,250,200,0.8) 0%, rgba(255,235,150,0.4) 40%, transparent 70%);
  animation: gamif-acto-aura 1600ms ease-out;
  pointer-events: none;
  z-index: -1;
}
@keyframes gamif-disco-transmuta {
  0%   { transform: scale(1) rotate(0deg); filter: brightness(1); }
  20%  { transform: scale(0.85) rotate(-3deg); filter: brightness(0.7); }
  50%  { transform: scale(1.3) rotate(2deg); filter: brightness(2) drop-shadow(0 0 20px rgba(255,235,150,1)); }
  80%  { transform: scale(1.05) rotate(0deg); filter: brightness(1.3); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}
@keyframes gamif-acto-aura {
  0%   { opacity: 0; transform: scale(0.5); }
  30%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(2.5); }
}

/* (5) Barra completándose al subir nivel — usa la transición existente del width
       pero añadimos un "flash" sobre la barra al cambiar */
.gamif-barra-nuevo-nivel {
  animation: gamif-barra-flash 800ms ease-out;
}
@keyframes gamif-barra-flash {
  0%   { box-shadow: 0 0 0 rgba(255,255,255,0); }
  40%  { box-shadow: 0 0 14px rgba(255,255,255,0.8), inset 0 0 6px rgba(255,255,255,0.5); }
  100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
}

/* (6) Toast de cambio de acto — popup central celebrando */
.gamif-toast-acto {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  background: linear-gradient(135deg, #1a1612 0%, #2a241c 100%);
  border: 2px solid var(--gamif-trascender-base);
  border-radius: 14px;
  padding: 30px 44px;
  text-align: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 60px rgba(0,0,0,0.6), 0 0 30px rgba(240,216,120,0.4);
  font-family: 'Cinzel', Georgia, serif;
  animation: gamif-toast-acto-anim 3800ms ease-out forwards;
  max-width: 90vw;
}
.gamif-toast-acto .toast-pretitulo {
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 12px;
}
.gamif-toast-acto .toast-titulo {
  font-size: 28px;
  font-weight: 700;
  color: #f4e4c1;
  margin-bottom: 8px;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.gamif-toast-acto .toast-acto {
  font-size: 14px;
  color: var(--gamif-trascender-luz);
  letter-spacing: 3px;
  text-transform: uppercase;
}
.gamif-toast-acto .toast-frase {
  margin-top: 16px;
  font-style: italic;
  font-family: Georgia, serif;
  color: #ccc;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.5;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
@keyframes gamif-toast-acto-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  18%  { transform: translate(-50%, -50%) scale(1); }
  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

/* (7) Respeta `prefers-reduced-motion` — usuario que pide menos animaciones
   se ahorra todo esto. Solo deja transiciones suaves. */
@media (prefers-reduced-motion: reduce) {
  .gamif-estrella-nueva,
  .gamif-rango-nuevo .gamif-estrella--llena,
  .gamif-rango-nuevo .gamif-estrella--vacia,
  .gamif-disco-nuevo-rango,
  .gamif-disco-nuevo-acto,
  .gamif-barra-nuevo-nivel {
    animation: none !important;
  }
  .gamif-disco-nuevo-acto::before { display: none; }
  .gamif-toast-acto { animation-duration: 100ms; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /GAMIFICACIÓN VISUAL
   ═══════════════════════════════════════════════════════════════════════════ */
  @keyframes spin{to{transform:rotate(360deg)}}
  /* 9/05/2026 noche-9 — Animación reescrita a TRAZO ESCRIBIÉNDOSE.
     Antes: fade-in superpuesto (Juan reportó "no se escribe").
     Ahora: clip-path:inset() recortando desde la derecha y descubriendo
     hacia la izquierda — el SVG se "rellena" como si lo dibujaran.
     Orden: 1) M izq+dcha juntas. 2) Z encima. 3) Mantienen. 4) Fade-out.
     Ciclo 2.4s para que el trazo se aprecie. */
  #login-mz-m1, #login-mz-m2 {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    animation: login-mz-trazo-m 2.4s ease-in-out infinite;
  }
  #login-mz-z {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    animation: login-mz-trazo-z 2.4s ease-in-out infinite;
  }
  @keyframes login-mz-trazo-m {
    0%   { clip-path: inset(0 100% 0 0); opacity: 1; }
    30%  { clip-path: inset(0 0 0 0);    opacity: 1; }
    80%  { clip-path: inset(0 0 0 0);    opacity: 1; }
    92%  { clip-path: inset(0 0 0 0);    opacity: 0; }
    100% { clip-path: inset(0 100% 0 0); opacity: 0; }
  }
  @keyframes login-mz-trazo-z {
    0%,
    35% { clip-path: inset(0 100% 0 0); opacity: 1; }
    65% { clip-path: inset(0 0 0 0);    opacity: 1; }
    80% { clip-path: inset(0 0 0 0);    opacity: 1; }
    92% { clip-path: inset(0 0 0 0);    opacity: 0; }
    100% { clip-path: inset(0 100% 0 0); opacity: 0; }
  }