/* =====================================================================
   OCLOVA · Sistema de diseño de la maqueta  (assets/css/oclova.css)  v2
   Documentación completa: docs/01_sistema_de_diseno.md

   ÍNDICE
   1. Tokens (:root) ........ color de marca, color semántico, tipografía
   2. Base .................. reset, League Spartan (texto) + JetBrains Mono (cifras)
   3. Franja de maqueta ..... .strip
   4. Barra superior ........ .topbar
   5. Shell ................. .app .menu .page .ph (cabecera de página)
   6. Superficies ........... .card .ch (cabecera de tarjeta) .row
   7. KPIs .................. .kpis .kpi .t-*
   8. Badges ................ .b (+ .s-* etapa K Line, .p-* pago, .m-* método, .x-* estado suave ok/wn/bd/in)
   9. Listas ................ .callout .risk .bar .stg
   10. Tabs, filtros, tabla . .tabs .tab .tools .twrap table
   11. Detalle .............. .crumb .tl .dl .note
   12. Formularios/botones .. .field .btn .link
   13. Login ................ .login

   REGLAS: escala tipográfica fija (ver docs/01); cifras, IDs y badges en mono;
   color solo como señal con significado; superficies planas con borde de 1 px.
   ===================================================================== */

/* 1 · TOKENS */
:root{
  /* Marca */
  --azul:#363C90; --azul90:#474B9A; --azul50:#9794C8; --azul10:#E8E6F4;
  --oro:#CAAA6F; --oro-h:#B8975A;
  --bg:#FAF6F1;            /* dorado 10 % — fondo de página */
  /* Neutros */
  --txt:#111111; --txt2:#3F3F46; --gris:#6B6B6B; --gris-l:#9A9A9A;
  --line:#ECE7DD; --line2:#F3EFE7; --surface:#FFFFFF; --soft:#FBF9F5;
  /* Semánticos (cada uno: color, fondo suave, borde suave) */
  --ok:#14833A;   --ok-bg:#EAF6EE;   --ok-ln:#BFE3CC;     /* confirmado, ingresos */
  --warn:#FFC400; --warn-tx:#8A6400; --warn-bg:#FFF7DB; --warn-ln:#F3DE8D; /* pendiente, margen, cruces */
  --bad:#D4150C;  --bad-bg:#FDEEED;  --bad-ln:#F4C3C0;    /* vencido, mora */
  --info:#0369A1; --info-bg:#E9F4FB; --info-ln:#BBDDF0;   /* SEPA, planificación */
  --vio:#6D28D9;  --vio-bg:#F3EEFC;  --vio-ln:#D8C8F4;    /* disputas, producción, Stripe */
  --teal:#0F766E; --teal-bg:#E7F5F3; --teal-ln:#B5DDD8;   /* SOPORTE, enviado */
  --gold-tx:#7A5F1E; --gold-bg:#F6EEDD; --gold-ln:#E5D5B0;/* revisión, comisiones */
  --slate:#4B5563; --slate-bg:#F3F4F6; --slate-ln:#D9DCE1;/* borrador, neutro */
  /* Tipografía */
  --f:'League Spartan',system-ui,sans-serif;
  --m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* 2 · BASE */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:var(--f);color:var(--txt2);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
button{font-family:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mono{font-family:var(--m);font-variant-numeric:tabular-nums}
h1{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--txt);line-height:1.25}      /* Título 1 · 15pt */
h2{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--txt);line-height:1.3}       /* Título 2 · 13.5pt */
h3{font-size:14px;font-weight:700;color:var(--txt);line-height:1.35}                            /* Título 3 · 10.5pt */
.lead{font-size:12px;color:var(--gris);line-height:1.6}                                         /* Subtítulo 1 */
.lbl{font-size:12px;font-weight:600;color:var(--txt2)}                                          /* Subtítulo 2 */
.sub{font-size:12px;color:var(--gris);line-height:1.5}                                          /* Párrafo 2 */
.foot{font-size:11px;color:var(--gris-l)}                                                       /* Párrafo 3 */
.micro{font-family:var(--m);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-l)} /* Badge micro */
.code{font-family:var(--m);font-size:12px;font-weight:500}                                      /* Código */
.num1{font-family:var(--m);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}    /* Destacado 1 */
.num2{font-family:var(--m);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}    /* Destacado 2 */
.num3{font-family:var(--m);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}    /* Destacado 3 */

/* 3 · FRANJA DE MAQUETA */
.strip{background:var(--txt);color:#fff;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 16px;position:sticky;top:0;z-index:60}
.strip .t{font-family:var(--m);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--oro);margin-right:8px}
.strip a{padding:3px 12px;border-radius:999px;font-size:11px;font-weight:500;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.18)}
.strip a:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.strip a.on{background:#fff;color:var(--txt);font-weight:700;border-color:#fff}
.strip a.off{opacity:.4;pointer-events:none}
.strip .r{margin-left:auto;font-size:11px;color:rgba(255,255,255,.6)}

/* 4 · BARRA SUPERIOR */
.topbar{background:var(--surface);border-bottom:1px solid var(--line);height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:30px;z-index:50}
.topbar .l{display:flex;align-items:center;gap:12px}
.topbar .l span{font-family:var(--m);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);padding-left:12px;border-left:1px solid var(--line)}
.topbar .r{display:flex;align-items:center;gap:12px}
.topbar .u{text-align:right;line-height:1.25}
.topbar .u b{display:block;font-size:12px;font-weight:600;color:var(--txt)}
.topbar .u small{font-size:11px;color:var(--gris)}
.topbar i{width:30px;height:30px;border-radius:50%;background:var(--azul10);color:var(--azul);display:flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--m);font-size:11px;font-weight:700}
.tag{font-family:var(--m);font-size:10px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--warn-bg);border:1px solid var(--warn-ln);color:var(--warn-tx);letter-spacing:.04em;text-transform:uppercase}

/* 5 · SHELL */
.app{display:grid;grid-template-columns:216px minmax(0,1fr);gap:16px;padding:16px 20px 48px;align-items:start;width:100%}
.menu{position:sticky;top:94px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 10px;display:flex;flex-direction:column;gap:16px}
.menu nav{display:flex;flex-direction:column;gap:14px}
.menu nav div{display:flex;flex-direction:column;gap:1px}
.menu .micro{padding:0 10px 4px}
.menu nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;font-size:12px;font-weight:500;color:var(--txt2)}
.menu nav a:hover{background:var(--soft)}
.menu nav a.on{background:var(--azul10);color:var(--azul);font-weight:700}
.menu nav a.soon{color:var(--gris-l);pointer-events:none}
.menu nav svg{flex:0 0 16px}
.credit{border-top:1px solid var(--line);padding:12px 10px 0;font-size:11px;line-height:1.55;color:var(--gris)}
.credit b{display:block;font-size:12px;color:var(--txt);margin-bottom:2px}
.page{min-width:0}
#content{display:flex;flex-direction:column;gap:16px;min-width:0}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ph>div{display:flex;flex-direction:column;gap:4px}
.ph .acts{flex-direction:row;gap:8px;flex-wrap:wrap}

/* 6 · SUPERFICIES */
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 20px;box-shadow:0 1px 2px rgba(17,17,17,.03)}
.ch{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line2)}
.ch>div{display:flex;flex-direction:column;gap:2px}
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:stretch}
.row>.card{min-width:0}

/* 7 · KPIs */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (min-width:1700px){.kpis{grid-template-columns:repeat(6,minmax(0,1fr))}}
.kpi{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;background:var(--surface)}
.kpi .h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi .h .lbl{color:inherit}
.kpi .v{font-family:var(--m);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;color:var(--txt)}
.kpi .s{font-size:11px;color:var(--gris)}
.t-sl .h,.t-sl .v{color:var(--txt)}
.t-az{background:#F4F3FA;border-color:#D9D6EC}.t-az .h,.t-az .v{color:var(--azul)}
.t-wn{background:var(--warn-bg);border-color:var(--warn-ln)}.t-wn .h,.t-wn .v{color:var(--warn-tx)}
.t-bd{background:var(--bad-bg);border-color:var(--bad-ln)}.t-bd .h,.t-bd .v{color:var(--bad)}
.t-ok{background:var(--ok-bg);border-color:var(--ok-ln)}.t-ok .h,.t-ok .v{color:var(--ok)}
.t-in{background:var(--info-bg);border-color:var(--info-ln)}.t-in .h,.t-in .v{color:var(--info)}
.t-gd{background:var(--gold-bg);border-color:var(--gold-ln)}.t-gd .h,.t-gd .v{color:var(--gold-tx)}

/* 8 · BADGES */
.b{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;border:1px solid transparent;font-family:var(--m);font-size:11px;font-weight:600;white-space:nowrap;line-height:1.5}
.s-new{background:var(--slate-bg);border-color:var(--slate-ln);color:var(--slate)}
.s-plan{background:var(--info-bg);border-color:var(--info-ln);color:var(--info)}
.s-rev{background:var(--gold-bg);border-color:var(--gold-ln);color:var(--gold-tx)}
.s-sign{background:#EEEDF8;border-color:#CFCCEA;color:var(--azul)}
.s-prod{background:var(--vio-bg);border-color:var(--vio-ln);color:var(--vio)}
.s-ship{background:var(--teal-bg);border-color:var(--teal-ln);color:var(--teal)}
.p-pen{background:var(--warn);color:#111}
.p-ok{background:var(--ok);color:#fff}
.p-ven{background:var(--bad);color:#fff}
.x-ok{background:var(--ok-bg);border-color:var(--ok-ln);color:var(--ok)}
.x-wn{background:var(--warn-bg);border-color:var(--warn-ln);color:var(--warn-tx)}
.x-bd{background:var(--bad-bg);border-color:var(--bad-ln);color:var(--bad)}
.x-in{background:var(--info-bg);border-color:var(--info-ln);color:var(--info)}
.m-sepa{background:var(--info-bg);border-color:var(--info-ln);color:var(--info)}
.m-stripe{background:var(--vio-bg);border-color:var(--vio-ln);color:var(--vio)}
.m-rev{background:var(--gold-bg);border-color:var(--gold-ln);color:var(--gold-tx);font-weight:500}

/* 9 · LISTAS */
.callouts{display:flex;flex-direction:column;gap:8px}
.callout{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--soft)}
.callout svg{flex:0 0 16px;margin-top:1px}
.callout b{display:block;font-size:12px;font-weight:600}
.callout span{display:block;font-size:11px;color:var(--gris);line-height:1.45}
.callout .n{margin-left:auto;font-family:var(--m);font-size:16px;font-weight:700}
.c-in{background:var(--info-bg);border-color:var(--info-ln)}.c-in svg,.c-in b,.c-in .n{color:var(--info)}
.c-wn{background:var(--warn-bg);border-color:var(--warn-ln)}.c-wn svg,.c-wn b,.c-wn .n{color:var(--warn-tx)}
.c-vi{background:var(--vio-bg);border-color:var(--vio-ln)}.c-vi svg,.c-vi b,.c-vi .n{color:var(--vio)}
.c-te{background:var(--teal-bg);border-color:var(--teal-ln)}.c-te svg,.c-te b,.c-te .n{color:var(--teal)}
a.callout:hover{filter:brightness(.98)}
.risk{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
.risk:hover{border-color:var(--azul50)}
.risk .who{display:flex;flex-direction:column;gap:2px;min-width:0}
.risk .who>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.risk .rt{width:220px;max-width:100%;display:flex;flex-direction:column;gap:4px}
.risk .rt>div{display:flex;justify-content:space-between;gap:8px;font-size:11px}
.bar{height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.bar b{display:block;height:100%;border-radius:99px}
.stg{display:flex;flex-direction:column;gap:10px}
.stg .li{display:grid;grid-template-columns:minmax(130px,170px) minmax(0,1fr) 36px;align-items:center;gap:12px}
.stg .nm{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500}
.stg .nm i{width:8px;height:8px;border-radius:2px;display:block}
.stg .tr{height:6px;background:var(--line2);border-radius:99px;overflow:hidden}
.stg .tr b{display:block;height:100%;border-radius:99px}
.stg .ct{font-family:var(--m);font-size:14px;font-weight:700;text-align:right;color:var(--txt)}

/* 10 · TABS / FILTROS / TABLA */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:7px;background:var(--surface);border:1px solid var(--line);font-size:12px;font-weight:500;color:var(--txt2);cursor:pointer}
.tab b{font-family:var(--m);font-size:11px;font-weight:700;color:var(--gris)}
.tab:hover{border-color:var(--azul50)}
.tab.on{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:600}.tab.on b{color:#fff}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.search,.sel{height:34px;border:1px solid var(--line);border-radius:7px;padding:0 12px;font:inherit;font-size:12px;background:#fff;color:var(--txt);min-width:0}
.search{width:280px;max-width:100%}
.search:focus,.sel:focus,.field input:focus{outline:2px solid var(--azul);outline-offset:1px}
.twrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:900px}
th{text-align:left;font-family:var(--m);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-l);padding:8px 12px;background:var(--soft);border-bottom:1px solid var(--line)}
td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:middle;font-size:14px;color:var(--txt)}
tbody tr:hover td{background:var(--soft)}
.cid{display:block;font-family:var(--m);font-size:12px;font-weight:500;color:var(--azul)}
.pt{font-size:14px;color:var(--txt)}
.imp{font-family:var(--m);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--txt)}
.kl{font-family:var(--m);font-size:11px;color:var(--azul90);text-decoration:underline}
.foot-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:12px;margin-top:4px;border-top:1px solid var(--line2)}

/* Escalones de comisión */
.esc{display:flex;flex-direction:column;gap:8px}
.esc .e{display:grid;grid-template-columns:90px 1fr 56px;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
.esc .e .rg{font-size:12px;font-weight:600;color:var(--txt)}
.esc .e .tr{height:6px;background:var(--line);border-radius:99px;overflow:hidden}.esc .e .tr b{display:block;height:100%;border-radius:99px}
.esc .e .pc{font-family:var(--m);font-size:16px;font-weight:700;text-align:right;color:var(--txt)}

/* 11 · DETALLE */
.crumb{font-size:12px;color:var(--gris)}.crumb a{color:var(--azul90);font-weight:600}
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl li{display:flex;gap:12px;padding-bottom:16px;position:relative}
.tl li:last-child{padding-bottom:0}
.tl li:not(:last-child):before{content:"";position:absolute;left:9px;top:22px;bottom:0;width:1px;background:var(--line)}
.tl .dot{width:20px;height:20px;border-radius:50%;background:var(--slate-bg);border:1px solid var(--slate-ln);color:var(--gris);display:flex;align-items:center;justify-content:center;font-family:var(--m);font-size:10px;font-weight:700;flex:0 0 20px}
.tl li.done .dot{background:var(--azul);border-color:var(--azul);color:#fff}
.tl li.now .dot{background:var(--oro);border-color:var(--oro);color:#111;box-shadow:0 0 0 4px var(--gold-bg)}
.tl b{display:block;font-size:12px;font-weight:600;color:var(--txt)}
.tl li.todo b{color:var(--gris-l);font-weight:500}
.tl span{font-size:11px;color:var(--gris)}
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.dl div span{display:block;font-family:var(--m);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-l)}
.dl div b{font-size:14px;font-weight:600;color:var(--txt)}
.note{background:var(--gold-bg);border:1px solid var(--gold-ln);border-radius:8px;padding:8px 12px;font-size:11px;color:var(--gold-tx);line-height:1.5}

/* 12 · FORMULARIOS Y BOTONES */
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--txt2)}
.field input{height:38px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font:inherit;font-size:13px;font-weight:400;background:#fff;color:var(--txt);min-width:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border-radius:7px;background:var(--oro);color:var(--txt);font-weight:700;font-size:12px;border:1px solid var(--oro);cursor:pointer}
.btn:hover{background:var(--oro-h);border-color:var(--oro-h)}
.btn.sec{background:#fff;border-color:var(--line);color:var(--azul);font-weight:600}
.btn.sec:hover{background:var(--azul10);border-color:var(--azul50)}
.btn.lg{height:40px;font-size:13px;padding:0 20px}
.link{font-weight:600;color:var(--azul90);text-decoration:underline;cursor:pointer}

/* 13 · LOGIN */
.login{display:flex;flex-wrap:wrap;min-height:calc(100vh - 30px)}
.login .l{flex:1 1 440px;background:var(--azul);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;position:relative;overflow:hidden}
.login .l:before,.login .l:after{content:"";position:absolute;border-radius:50%;border:44px solid rgba(255,255,255,.05)}
.login .l:before{width:460px;height:460px;right:-180px;bottom:-140px}
.login .l:after{width:260px;height:260px;right:70px;bottom:180px;border-color:rgba(202,170,111,.16);border-width:32px}
.login .l>*{position:relative;z-index:1}
.login .l h1{color:#fff;font-size:30px;font-weight:700;line-height:1.2;max-width:460px}
.login .r{flex:1 1 440px;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:40px}
.login form{width:100%;max-width:340px;display:flex;flex-direction:column;gap:16px}

/* RESPONSIVE */
@media (max-width:1000px){
  .app{grid-template-columns:1fr;padding:12px}
  .menu{position:static}.menu nav{flex-direction:row;flex-wrap:wrap}
  .kpis.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login .l{padding:32px 20px}
}
@media (max-width:760px){.kpis,.kpis.four{grid-template-columns:1fr}.topbar .u{display:none}}

/* 14 · v8 · Configuración, interruptores, grupos de columnas, paneles */
.sw{position:relative;width:36px;height:20px;border-radius:20px;background:#D9D5CB;border:0;cursor:pointer;flex:none;padding:0}
.sw:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.sw[aria-checked="true"]{background:var(--ok)}.sw[aria-checked="true"]:after{left:18px}
.pm{display:flex;flex-direction:column;gap:14px;flex:1 1 320px;min-width:0}
.pm .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pm .ttl{display:flex;align-items:center;gap:10px}
.pm .ic{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;flex:none}
.pm.off{background:var(--soft)}.pm.off .dl{opacity:.55}
.inp{height:30px;width:84px;border:1px solid var(--line);border-radius:7px;padding:0 8px;font:500 12px 'JetBrains Mono',monospace;text-align:right;background:#fff;color:var(--txt)}
.gh-crm{background:var(--teal-bg)!important;color:var(--teal)!important;border-bottom:1px solid var(--teal-ln)}
.gh-nuc{background:var(--azul10)!important;color:var(--azul)!important;border-bottom:1px solid var(--azul50)}
.sepL{border-left:2px solid var(--line)}
.rowsel{cursor:pointer}.rowsel.on td{background:var(--azul10)}
.chk{width:16px;height:16px;accent-color:var(--azul);cursor:pointer}
.toast{position:fixed;right:20px;bottom:20px;background:#111;color:#fff;padding:10px 14px;border-radius:8px;font-size:12px;z-index:50;opacity:0;transition:opacity .2s;pointer-events:none}.toast.on{opacity:1}
.two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr);gap:16px;align-items:start}
@media (max-width:1100px){.two{grid-template-columns:1fr}}

/* 15 · v9 · edición en línea (sin modal), segmentado, escalones dinámicos */
.edit{display:none;flex-direction:column;gap:14px;border-top:1px solid var(--line);padding-top:14px}.edit.on{display:flex}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;align-self:flex-start;background:#fff}
.seg button{border:0;background:#fff;padding:7px 14px;font:600 12px inherit;font-family:inherit;color:var(--txt2);cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}.seg button.on{background:var(--azul);color:#fff}
.seg.live button.on[data-v="live"]{background:var(--bad)}.seg.live button.on[data-v="test"]{background:var(--warn);color:#111}
.lbl2{font-size:12px;font-weight:600;color:var(--txt2)}
.ix{width:30px;height:30px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--txt2);cursor:pointer;display:grid;place-items:center;font-size:16px;line-height:1}.ix:hover{border-color:var(--bad);color:var(--bad)}
.inp.w{width:200px;text-align:left;font-family:inherit}
.inp.err{border-color:var(--bad);background:var(--bad-bg)}
.inp[disabled]{background:var(--soft);color:var(--gris)}
.unl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt2);white-space:nowrap}
.addrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}

/* 16. v10 · Integraciones, Revisión SOPORTE, Usuarios y roles */
.h2g{font-size:14px;font-weight:700;color:var(--txt);margin:4px 0 -4px}
.field select{height:38px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font:inherit;font-size:13px;background:#fff;color:var(--txt)}
.field select:focus{outline:2px solid var(--azul);outline-offset:1px}
.card.edit{gap:12px}
.txt{width:100%;min-height:96px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;font-size:13px;line-height:1.5;background:#fff;color:var(--txt);resize:vertical}
.txt:focus{outline:2px solid var(--azul);outline-offset:1px}
.quote{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.5;color:var(--txt2)}
.who2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* 17. v11 · Portal Clínica: stepper, sala de videollamada, agenda, paquetes, plazo de crédito */
.stp{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto}
.stp li{flex:1 0 96px;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;text-align:center;padding:0 4px}
.stp li:not(:last-child):before{content:"";position:absolute;top:11px;left:calc(50% + 14px);right:calc(-50% + 14px);height:2px;background:var(--line)}
.stp li.done:not(:last-child):before{background:var(--azul)}
.stp .dot{width:22px;height:22px;border-radius:50%;background:var(--slate-bg);border:1px solid var(--slate-ln);color:var(--gris);display:flex;align-items:center;justify-content:center;font-family:var(--m);font-size:10px;font-weight:700}
.stp li.done .dot{background:var(--azul);border-color:var(--azul);color:#fff}
.stp li.now .dot{background:var(--oro);border-color:var(--oro);color:#111;box-shadow:0 0 0 4px var(--gold-bg)}
.stp b{font-size:11px;font-weight:600;color:var(--txt);line-height:1.3}
.stp li.todo b{color:var(--gris-l);font-weight:500}
.room{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px;border:1px solid var(--teal-ln);background:var(--teal-bg);border-radius:10px}
.room .ic{width:40px;height:40px;border-radius:10px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.room .tx{flex:1 1 280px;display:flex;flex-direction:column;gap:2px;min-width:0}
.room .tx b{font-size:14px;font-weight:700;color:var(--txt)}
.room .tm{font-family:var(--m);font-size:20px;font-weight:700;color:var(--teal);white-space:nowrap}
.days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.day{display:flex;flex-direction:column;gap:6px}
.day>b{font-size:12px;font-weight:700;color:var(--txt)}.day>b span{display:block;font-family:var(--m);font-size:10px;font-weight:600;color:var(--gris);text-transform:uppercase;letter-spacing:.06em}
.slot{height:32px;border:1px solid var(--line);border-radius:7px;background:#fff;font:600 12px 'JetBrains Mono',monospace;color:var(--txt);cursor:pointer}
.slot:hover{border-color:var(--azul50)}.slot.on{background:var(--azul);border-color:var(--azul);color:#fff}
.slot[disabled]{background:var(--soft);color:var(--gris-l);text-decoration:line-through;cursor:not-allowed}
.pks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pk{border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.pk .n{font-size:14px;font-weight:700;color:var(--txt)}.pk .p{font-family:var(--m);font-size:20px;font-weight:700;color:var(--azul)}
.pkr{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fff;cursor:pointer}
.pkr:hover{border-color:var(--azul50)}.pkr.on{border-color:var(--azul);background:var(--azul10)}
.pkr input{position:absolute;opacity:0;pointer-events:none}
.pkr b{font-size:13px;font-weight:600}.pkr span{font-family:var(--m);font-size:12px;font-weight:700;color:var(--azul)}
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.pbar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;min-width:90px}.pbar b{display:block;height:100%;border-radius:99px}
.okbig{width:44px;height:44px;border-radius:50%;background:var(--ok-bg);border:1px solid var(--ok-ln);color:var(--ok);display:flex;align-items:center;justify-content:center}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* 18. Portal Ortodoncista: textarea, hilos de mensajes, tarjeta de estado */
.field textarea{border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;font-size:13px;font-weight:400;background:#fff;color:var(--txt);min-height:84px;resize:vertical;min-width:0}
.field textarea:focus{outline:2px solid var(--azul);outline-offset:1px}
.thread{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.thread li{max-width:86%;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:2px;font-size:13px}
.thread li.me{align-self:flex-end;background:var(--azul10);border-color:var(--azul50)}
.thread li small{font-family:var(--m);font-size:10px;font-weight:600;color:var(--gris);text-transform:uppercase;letter-spacing:.05em}
.stbox{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}

/* 19 · v15 · Selector de ortodoncista, estados vacíos y de error, tablas de eventos */
.orts{display:flex;flex-direction:column;gap:8px}
.ort{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font:inherit;color:var(--txt)}
.ort:hover{border-color:var(--azul50)}
.ort.on{border-color:var(--azul);background:var(--azul10);box-shadow:0 0 0 2px var(--azul10)}
.ort .av{width:36px;height:36px;border-radius:50%;background:var(--azul);color:#fff;display:grid;place-items:center;font:700 12px var(--m);flex:none}
.ort b{display:block;font-size:13px}.ort small{display:block;font-size:11px;color:var(--gris);line-height:1.4}
.ort .b{margin-left:auto;flex:none}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:36px 16px}
.empty .ic{width:48px;height:48px;border-radius:50%;background:var(--soft);border:1px solid var(--line);color:var(--gris);display:grid;place-items:center}
.empty p{max-width:420px;font-size:13px;color:var(--gris);line-height:1.5}
.errbox{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:10px;background:var(--bad-bg);border:1px solid var(--bad-ln);color:var(--txt)}
.errbox svg{color:var(--bad);flex:none;margin-top:2px}
.errbox b{display:block;color:var(--bad);font-size:14px}.errbox span{display:block;font-size:12px;color:var(--txt2);line-height:1.5;margin-top:2px}
.ro{display:inline-flex;align-items:center;gap:6px;font:600 10px var(--m);text-transform:uppercase;letter-spacing:.06em;color:var(--gris);background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
@media (max-width:1000px){.days{grid-template-columns:repeat(3,minmax(0,1fr))}.login .l{flex:1 1 auto}}
@media (max-width:760px){.days{grid-template-columns:repeat(2,minmax(0,1fr))}.ph{flex-direction:column;align-items:flex-start}.ph .acts{flex-wrap:wrap}.ort{flex-wrap:wrap}.stp{padding-bottom:6px}}

/* 20 · v15 · Responsive: nada se sale de la pantalla en móvil ni tableta; las tablas se desplazan dentro de su tarjeta */
.page,.card,.row>*,.kpis>*{min-width:0}
.twrap{max-width:100%;overflow-x:auto}
@media (max-width:1000px){.app{grid-template-columns:minmax(0,1fr)}.topbar{padding-left:12px;padding-right:12px}.strip{overflow-x:auto;white-space:nowrap}}
@media (max-width:760px){.row{flex-direction:column}.row>*{flex:1 1 auto!important;width:100%}.fg{grid-template-columns:1fr}.tools{flex-wrap:wrap}}
.twrap{position:relative}.pm .top{flex-wrap:wrap}
/* Menú compacto en pantalla estrecha: una sola fila con desplazamiento horizontal */
@media (max-width:1000px){.menu nav{flex-wrap:nowrap;overflow-x:auto;gap:4px;padding-bottom:4px}.menu nav>div{display:flex;flex-direction:row;align-items:center;gap:4px;flex:none}.menu nav .micro{display:none}.menu nav a{white-space:nowrap;flex:none}.menu .credit{display:none}.menu{padding:8px}}

/* 21 · v16 · Agenda semanal: horarios de descanso y fuera de horario */
.days.wk{grid-template-columns:repeat(5,minmax(0,1fr))}
.slot.rest[disabled]{text-decoration:none;background:repeating-linear-gradient(45deg,var(--soft),var(--soft) 4px,#fff 4px,#fff 8px);color:var(--gris)}
.slot.off[disabled]{text-decoration:none;background:transparent;border-style:dashed;color:var(--gris-l)}
@media (max-width:1000px){.days.wk{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.days.wk{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 22 · Documentación y Ayuda (acordeón + buscador visual) */
.hlp-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.hlp-bar .field{flex:1 1 280px;min-width:0}
.hlp-bar input{width:100%}
.hlp-list{display:flex;flex-direction:column;gap:8px}
.hlp-item{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.hlp-item[hidden]{display:none}
.hlp-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 16px;font-weight:600;color:var(--txt)}
.hlp-item>summary::-webkit-details-marker{display:none}
.hlp-item>summary .n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--oro);min-width:24px}
.hlp-item>summary .t{flex:1;min-width:0}
.hlp-item>summary::after{content:"+";font-size:18px;color:var(--azul);line-height:1}
.hlp-item[open]>summary::after{content:"−"}
.hlp-item[open]>summary{border-bottom:1px solid var(--line);background:var(--soft)}
.hlp-item .bd{padding:14px 16px 16px 52px;line-height:1.65;font-size:14px}
.hlp-item .bd code{font-family:'JetBrains Mono',monospace;font-size:12.5px;background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.hlp-item mark{background:rgba(202,170,111,.35);color:inherit;border-radius:2px}
.hlp-empty{display:none}
.hlp-empty.on{display:block}
@media(max-width:700px){.hlp-item .bd{padding-left:16px}}