/* ============ SISTEMA TRAMA · Edición "Aqua" (Proton/macOS) ============ */
:root{
  --brand-900:#001B71; --brand-600:#0047BA; --brand-400:#0071CE;
  --brand-100:#DCE9F9; --brand-50:#EEF4FC;
  --surface:#FFFFFF;
  --glass:rgba(255,255,255,.66);
  --glass-bd:rgba(255,255,255,.75);
  --hairline:rgba(0,39,128,.08);
  --text-1:#1D2433; --text-2:#54565A; --text-3:#6C6E73;
  --ok:#1B7A3D; --ok-bg:#E9F5EE; --ok-bd:#BFE3CC;
  --warn:#9A5B00; --warn-bg:#FCF3E2; --warn-bd:#F0D9A8;
  --bad:#B42318; --bad-bg:#FBEAE9; --bad-bd:#F2C4C0;
  --r-s:12px; --r-m:16px; --r-l:22px;
  --sh-1:0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(0,39,128,.06);
  --sh-2:0 2px 4px rgba(16,24,40,.05), 0 14px 36px rgba(0,39,128,.12);
  --sh-3:0 8px 16px rgba(16,24,40,.08), 0 28px 70px rgba(0,27,113,.22);
  --ease:cubic-bezier(.2,0,0,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  /* Pila del sistema, elegida a propósito: la CSP solo permite fuentes propias
     (font-src 'self' data:), así que una webfont externa no cargaría. Antes encabezaba
     "Inter" sin que existiera ningún @font-face: nunca se usó, solo despistaba. */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text-1); line-height:1.5; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(900px 600px at 88% -12%, rgba(0,113,206,.13), transparent 62%),
    radial-gradient(800px 620px at -12% 112%, rgba(0,71,186,.10), transparent 60%),
    radial-gradient(600px 420px at 55% 118%, rgba(220,233,249,.8), transparent 65%),
    linear-gradient(180deg,#F8FAFF 0%,#EFF3FC 55%,#EAF0FB 100%);}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-s{width:16px;height:16px}.ic-l{width:24px;height:24px}
.tnum{font-variant-numeric:tabular-nums}
::selection{background:var(--brand-100)}
/* Lo que no dibujamos también es parte del diseño: cursor de texto, barras de
   desplazamiento, subrayado de enlaces y anillo de foco venían con los valores del
   navegador, que no pertenecen a ningún sistema. */
html{caret-color:var(--brand-600);scrollbar-color:rgba(0,39,128,.28) transparent;scrollbar-width:thin}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(0,39,128,.22);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(0,39,128,.38);background-clip:content-box}
a{text-underline-offset:.18em;text-decoration-thickness:from-font}

/* Anillo de foco. Solo existía para el tema oscuro: en claro el teclado se quedaba con
   el contorno del navegador, y en varios sitios ni eso, porque se anulaba sin sustituto. */
:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px;border-radius:4px}
.search:focus-within{outline:2px solid var(--brand-600);outline-offset:2px}
.tip:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}

/* ============ Shell ============ */
.app{display:flex;min-height:100vh}
.sidebar{width:264px;position:fixed;top:12px;left:12px;bottom:12px;z-index:30;
  display:flex;flex-direction:column;border-radius:var(--r-l);
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid var(--glass-bd);box-shadow:var(--sh-1)}
.main{flex:1;margin-left:288px;display:flex;flex-direction:column;min-width:0}

/* Sidebar */
.brand{display:flex;align-items:center;gap:12px;padding:20px 18px 16px}
.brand .prog{font-weight:700;font-size:14px;line-height:1.15;color:var(--brand-900);letter-spacing:-.01em}
.brand .div{width:1px;height:30px;background:var(--hairline)}
.brand .cop{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--brand-900)}
.brand .mark{width:34px;height:34px;border:none;border-radius:0;box-shadow:none;
  background:url(/assets/coparmex.svg) center/contain no-repeat}
.nav{flex:1;overflow-y:auto;padding:4px 12px 8px}
.nav::-webkit-scrollbar{width:0}
.nav .grp{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text-3);
  text-transform:uppercase;margin:20px 12px 6px}
.nav a{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:12px;
  color:var(--text-2);font-size:14px;text-decoration:none;position:relative;
  transition:background .15s var(--ease), color .15s}
.nav a .ic{color:var(--text-3);transition:color .15s}
.nav a:hover{background:rgba(0,27,113,.06)}
.nav a.on{background:linear-gradient(180deg,#FFFFFF,#F2F7FE);color:var(--brand-600);font-weight:700;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 4px 12px rgba(0,71,186,.10),inset 0 0 0 1px rgba(255,255,255,.9)}
.nav a.on .ic{color:var(--brand-600)}
.nav .bdg{margin-left:auto;background:linear-gradient(180deg,#0A54CC,var(--brand-600));color:#fff;
  font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;box-shadow:0 2px 6px rgba(0,27,113,.3)}
.nav .bdg.w{background:linear-gradient(180deg,#B97509,var(--warn));box-shadow:0 2px 6px rgba(154,91,0,.3)}
.sfoot{border-top:1px solid var(--hairline);padding:14px 16px}
.cyc{background:rgba(0,27,113,.06);border-radius:14px;padding:10px 12px;margin-bottom:12px}
.cyc b{font-size:13px;color:var(--brand-900)}
.cyc .bar{height:5px;background:rgba(0,27,113,.12);border-radius:3px;margin-top:8px;overflow:hidden}
.cyc .bar i{display:block;height:100%;width:100%;border-radius:3px;
  transform-origin:left center;transform:scaleX(var(--avance,0));transition:transform .4s var(--ease);
  background:linear-gradient(90deg,var(--brand-400),var(--brand-600))}
.me{display:flex;align-items:center;gap:10px}
.av{width:32px;height:32px;border-radius:999px;color:var(--brand-900);
  background:linear-gradient(180deg,#E8F1FC,#CFE2F7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(0,39,128,.12);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.av.l{width:48px;height:48px;font-size:16px}.av.xl{width:64px;height:64px;font-size:20px}
.me b{font-size:13px;display:block}.me span{font-size:12px;color:var(--text-3)}

/* Header */
.hdr{height:64px;display:flex;align-items:center;gap:16px;padding:0 28px;
  position:sticky;top:0;z-index:20;
  background:rgba(248,250,255,.6);backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid var(--hairline)}
.search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.75);
  border:1px solid var(--glass-bd);box-shadow:var(--sh-1);
  border-radius:999px;height:40px;padding:0 16px;width:330px;color:var(--text-3);font-size:14px}
.search kbd{margin-left:auto;font-size:11px;border:1px solid var(--hairline);border-radius:6px;
  padding:0 6px;color:var(--text-3);font-family:inherit;background:rgba(255,255,255,.8)}
.hchip{display:flex;align-items:center;gap:8px;color:var(--brand-900);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(238,244,252,.9));
  border:1px solid var(--glass-bd);box-shadow:var(--sh-1);
  border-radius:999px;height:34px;padding:0 16px;font-size:13px;font-weight:700;margin-left:auto}
.bell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;color:var(--text-2);transition:background .15s}
.bell:hover{background:rgba(0,27,113,.07)}
.bell i{position:absolute;top:4px;right:4px;width:17px;height:17px;color:#fff;
  background:linear-gradient(180deg,#D03A2E,var(--bad));border:2px solid #F4F7FE;
  border-radius:999px;font-size:9px;font-weight:700;font-style:normal;
  display:flex;align-items:center;justify-content:center}

/* Content */
.content{padding:32px 36px 110px;max-width:1200px;width:100%;margin:0 auto}
.view{display:none}.view.on{display:block;animation:pop .28s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}
.ptitle{display:flex;align-items:flex-start;gap:16px;margin-bottom:6px}
.ptitle h1{font-size:28px;line-height:36px;letter-spacing:-.02em;color:var(--brand-900)}
.psub{color:var(--text-2);font-size:15px;margin-bottom:26px}
.spacer{flex:1}

/* Componentes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;
  border-radius:14px;height:48px;padding:0 22px;font-size:15px;
  transition:transform .15s var(--ease), box-shadow .15s, background .15s}
.btn:active{transform:scale(.97)}
.btn.p{background:linear-gradient(180deg,#0A54CC,var(--brand-600));color:#fff;
  box-shadow:0 8px 18px -6px rgba(0,27,113,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.p:hover{background:linear-gradient(180deg,#1160DB,#0A50C7);box-shadow:0 10px 22px -6px rgba(0,27,113,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.s{background:rgba(255,255,255,.85);border:1px solid var(--glass-bd);color:var(--text-1);
  box-shadow:var(--sh-1)}
.btn.s:hover{background:#fff;box-shadow:var(--sh-2)}
.btn.t{color:var(--brand-600);padding:0 10px;height:auto;border-radius:8px}
.btn.t:hover{text-decoration:underline}
/* Una acción sin vuelta atrás no se anuncia con el mismo color que el resto. */
.btn.t.danger{color:var(--text-3)}
.btn.t.danger:hover{color:var(--bad)}
.btn.sm{height:32px;padding:0 14px;font-size:13px;border-radius:10px}
.btn.md{height:40px;padding:0 18px;font-size:14px;border-radius:12px}
.card{background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-m);padding:24px;box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:box-shadow .2s var(--ease), border-color .2s var(--ease)}
/* El realce al pasar el cursor se reserva a las tarjetas que de verdad llevan a algún
   sitio: levantar una tarjeta que no se puede pulsar promete una interacción que no existe. */
a.card:hover, .card.pulsable:hover{box-shadow:var(--sh-1);border-color:var(--brand-100)}
.card h3{font-size:17px;line-height:24px;margin-bottom:4px;letter-spacing:-.01em}
.grid{display:grid;gap:20px}
.g12{grid-template-columns:repeat(12,1fr)}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
.c6{grid-column:span 6}.c7{grid-column:span 7}.c12{grid-column:span 12}
.ov{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.kpi .num{font-size:30px;line-height:36px;font-weight:700;margin:8px 0 2px;color:var(--brand-900);letter-spacing:-.02em}
.kpi .cmp{font-size:13px;color:var(--text-3)}
.kpi .cmp.up{color:var(--ok)}.kpi .cmp.dn{color:var(--bad)}
.chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 12px;border-radius:999px;
  font-size:13px;font-weight:700;border:1px solid transparent;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.chip .ic{width:14px;height:14px}
.ch-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bd)}
.ch-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-bd)}
.ch-bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-bd)}
.ch-info{background:var(--brand-50);color:var(--brand-600);border-color:#C9DDF5}
.ch-brand{background:var(--brand-100);color:var(--brand-900);border-color:#C9DDF5}
.ch-mut{background:rgba(0,39,128,.05);color:var(--text-2);border-color:var(--hairline)}
.row{display:flex;align-items:center;gap:12px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);padding:14px 18px 8px;border-bottom:1px solid var(--hairline)}
.tbl td{padding:0 18px;height:58px;border-bottom:1px solid rgba(0,39,128,.05);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(0,39,128,.045)}
.tbl .r{text-align:right}
.who b{display:block;font-size:14px}.who span{font-size:12px;color:var(--text-3)}
.dots{display:inline-flex;gap:3px}
.dots i{width:7px;height:7px;border-radius:999px;background:rgba(0,39,128,.15)}
.dots i.f{background:linear-gradient(180deg,var(--brand-400),var(--brand-600))}
.meter{display:flex;align-items:center;gap:12px;padding:10px 0}
.meter .lab{width:130px;font-size:14px}
.meter .bar{flex:1;height:7px;background:rgba(0,71,186,.10);border-radius:4px;overflow:hidden}
.meter .bar i{display:block;height:100%;width:100%;border-radius:4px;
  transform-origin:left center;transform:scaleX(var(--avance,0));transition:transform .4s var(--ease);
  background:linear-gradient(90deg,var(--brand-400),var(--brand-600))}
.meter .st{width:64px;text-align:right;font-size:13px;color:var(--text-2)}
.pend{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(0,39,128,.06)}
.pend:last-child{border:none}
.pend.done{opacity:.3;text-decoration:line-through;transition:opacity .3s}
.pend p{flex:1;font-size:14px}
.pend p span{color:var(--text-3);font-size:12px;display:block}
.banner{display:flex;gap:12px;border-radius:16px;padding:14px 18px;font-size:14px;border:1px solid;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.banner.i{background:linear-gradient(180deg,#F2F7FE,var(--brand-50));border-color:#C9DDF5;color:var(--brand-900)}
.banner.w{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
.empty{padding:40px;text-align:center;border:1px dashed rgba(0,27,113,.25);border-radius:var(--r-m);
  background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(0,27,113,.04) 14px 16px)}
.toast{position:fixed;left:50%;transform:translate(-50%,16px);bottom:28px;
  background:rgba(20,26,40,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#fff;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  padding:12px 22px;font-size:14px;display:flex;gap:10px;align-items:center;z-index:90;
  box-shadow:var(--sh-3);opacity:0;pointer-events:none;transition:.25s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.tabs{display:flex;gap:6px;padding:14px 16px 0;border-bottom:1px solid var(--hairline)}
.tabs button{padding:9px 18px;font-size:14px;font-weight:700;color:var(--text-2);
  border-radius:12px 12px 0 0;display:flex;gap:8px;align-items:center;
  border-bottom:2px solid transparent;transition:color .15s}
.tabs button:hover{color:var(--text-1)}
.tabs button.on{color:var(--brand-600);border-color:var(--brand-600);background:linear-gradient(180deg,rgba(0,27,113,.05),transparent)}
.tabs .n{background:linear-gradient(180deg,#0A54CC,var(--brand-600));color:#fff;border-radius:999px;font-size:11px;padding:0 7px}
.stp{display:flex;gap:0;margin:20px 0}
.stp div{flex:1;text-align:center;font-size:11px;color:var(--text-3);position:relative;padding-top:22px}
.stp div::before{content:"";position:absolute;top:6px;left:50%;width:100%;height:2px;background:rgba(0,39,128,.12)}
.stp div:last-child::before{display:none}
.stp div::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:999px;background:#fff;border:2px solid rgba(0,39,128,.25);z-index:1}
.stp div.d::after{background:linear-gradient(180deg,#0A54CC,var(--brand-600));border-color:var(--brand-600)}
.stp div.d::before{background:var(--brand-600)}
.stp div.c::after{border-color:var(--brand-600);box-shadow:0 0 0 4px rgba(0,27,113,.15)}
.stp div.c{color:var(--brand-600);font-weight:700}
.tl{margin-top:16px}
.tl .ev{display:flex;gap:12px;padding:8px 0;font-size:13px}
.tl .ev .pt{width:8px;height:8px;border-radius:999px;margin-top:6px;flex:none;
  background:linear-gradient(180deg,var(--brand-400),var(--brand-600));
  box-shadow:0 0 0 3px rgba(0,39,128,.15)}
.tl .ev span{color:var(--text-3);display:block;font-size:12px}

/* Drawer (hoja estilo macOS) */
.scrim{position:fixed;inset:0;background:rgba(10,16,34,.32);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:.25s;z-index:60}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:12px;right:-520px;bottom:12px;width:480px;max-width:calc(100vw - 24px);
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid var(--glass-bd);border-radius:var(--r-l);
  z-index:70;box-shadow:var(--sh-3);transition:right .3s var(--ease);display:flex;flex-direction:column}
.drawer.on{right:12px}
.drawer .dh{display:flex;align-items:center;gap:12px;padding:22px 24px;border-bottom:1px solid var(--hairline)}
.drawer .db{flex:1;overflow-y:auto;padding:24px}
.drawer .df{padding:16px 24px;border-top:1px solid var(--hairline);display:flex;gap:12px}
.x{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;
  color:var(--text-2);background:rgba(0,39,128,.05);transition:background .15s}
.x:hover{background:rgba(0,39,128,.1)}

/* Directorio (tiles tipo app) */
.dirgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.pcard{background:rgba(255,255,255,.88);border:1px solid var(--glass-bd);border-radius:20px;
  overflow:hidden;cursor:pointer;box-shadow:var(--sh-1);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease)}
.pcard:hover{box-shadow:var(--sh-2);transform:translateY(-4px) scale(1.01)}
.pcard .ph{aspect-ratio:1.6;color:var(--brand-900);display:flex;
  align-items:center;justify-content:center;font-size:36px;font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(160deg,#EAF2FC 0%,#D5E5F8 55%,#C7DCF5 100%);
  box-shadow:inset 0 -1px 0 rgba(0,39,128,.06)}
.pcard .pb{padding:16px 18px}
.pcard b{font-size:15px;display:block}.pcard small{color:var(--text-3);font-size:13px;display:block;margin-bottom:9px}

/* RQA conversacional */
.rqa{max-width:640px;margin:0 auto;background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-l);box-shadow:var(--sh-1);padding:32px}
.rqa .prog{height:5px;background:rgba(0,27,113,.12);border-radius:3px;overflow:hidden;margin-bottom:10px}
/* Las barras animaban `width`, que obliga a recalcular la maquetación en cada
   fotograma. Con scaleX la animación vive en el compositor. */
.rqa .prog i{display:block;height:100%;width:100%;border-radius:3px;transform-origin:left center;
  transform:scaleX(var(--avance,0));transition:transform .3s var(--ease);
  background:linear-gradient(90deg,var(--brand-400),var(--brand-600))}
.rqa .cnt{font-size:13px;color:var(--text-3);margin-bottom:26px}
.rstep{display:none}.rstep.on{display:block;animation:pop .28s var(--ease)}
.rstep h2{font-size:23px;line-height:31px;margin-bottom:6px;letter-spacing:-.02em;color:var(--brand-900)}
.rstep .hint{color:var(--text-2);font-size:14px;margin-bottom:24px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:rgba(255,255,255,.9);border:1px solid var(--hairline);border-radius:16px;
  min-height:62px;padding:14px 20px;font-size:16px;margin-bottom:12px;
  box-shadow:var(--sh-1);transition:all .18s var(--ease)}
.opt:hover{border-color:rgba(0,27,113,.45);background:#fff;transform:translateY(-1px);box-shadow:var(--sh-2)}
.opt:active{transform:scale(.985)}
.opt.sel{border-color:var(--brand-600);background:linear-gradient(180deg,#F4F9FF,var(--brand-50));
  box-shadow:0 0 0 1px var(--brand-600), var(--sh-1)}
.rnav{display:flex;align-items:center;gap:16px;margin-top:28px}
.rev{border:1px solid var(--hairline);border-radius:16px;overflow:hidden;margin-bottom:24px;background:rgba(255,255,255,.7)}
.rev div{display:flex;justify-content:space-between;gap:16px;padding:14px 20px;font-size:14px;border-bottom:1px solid rgba(0,39,128,.05)}
.rev div:last-child{border:none}
.rev span{color:var(--text-3)}
.done-scr{text-align:center;padding:44px 0}
.done-scr .ok-ic{width:80px;height:80px;border-radius:999px;color:var(--ok);
  background:linear-gradient(180deg,#F0FAF3,var(--ok-bg));
  box-shadow:inset 0 1px 0 #fff,0 10px 26px rgba(27,122,61,.22);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px}

/* Modo Sesión */
.modo{position:fixed;inset:0;color:#fff;z-index:80;display:none;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:
    repeating-linear-gradient(45deg,transparent 0 26px,rgba(255,255,255,.045) 26px 30px),
    radial-gradient(1100px 700px at 50% -15%, #0071CE 0%, #0047BA 52%, #001B71 100%)}
.modo.on{display:flex}
.modo .seg{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin-bottom:10px}
.modo h2{font-size:clamp(26px,4.5vw,44px);margin-bottom:24px;letter-spacing:-.02em}
.modo .clock{font-size:clamp(64px,13vw,130px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  text-shadow:0 10px 50px rgba(0,0,0,.35)}
.modo .clock.w{color:#FFC766}
.modo .nx{margin-top:28px;font-size:15px;opacity:.72}
.modo .ctl{display:flex;gap:14px;margin-top:42px}
.modo .ctl button{height:56px;padding:0 28px;border-radius:999px;font-weight:700;font-size:15px;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .15s, transform .15s}
.modo .ctl button:hover{background:rgba(255,255,255,.22)}
.modo .ctl button:active{transform:scale(.96)}
.modo .ctl .go{background:#fff;color:var(--brand-900);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.modo .close{position:absolute;top:20px;right:20px;color:#fff;background:rgba(255,255,255,.12);opacity:.9}
.modo .lg{position:absolute;top:24px;left:28px;display:flex;align-items:center;gap:10px;opacity:.9;font-size:13px;font-weight:700;letter-spacing:.1em}

/* Reportes */
.repgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.rep .icbox{width:52px;height:52px;border-radius:16px;color:#fff;
  background:linear-gradient(160deg,var(--brand-400),var(--brand-600));
  box-shadow:0 8px 18px -4px rgba(0,27,113,.45),inset 0 1px 0 rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.rep small{color:var(--text-3);font-size:12px}
.rep p{font-size:13px;color:var(--text-2);margin:4px 0 10px}

/* Móvil */
.bbar{display:none}
.demo-note{position:fixed;right:16px;bottom:16px;background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-bd);border-radius:999px;padding:7px 16px;
  font-size:12px;color:var(--text-3);z-index:50;box-shadow:var(--sh-1)}
@media (max-width:980px){
  .sidebar{display:none}
  .main{margin-left:0}
  .content{padding:20px 16px 150px}
  .search{display:none}
  .hchip{margin-left:0}
  .ptitle h1{font-size:24px;line-height:32px}
  .g12 > *{grid-column:span 12 !important}
  .rqa{padding:22px;border-radius:20px}
  .bbar{display:flex;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));height:78px;z-index:40;
    background:var(--glass);backdrop-filter:blur(14px) saturate(1.5);
    -webkit-backdrop-filter:blur(14px) saturate(1.5);
    border:1px solid var(--glass-bd);border-radius:24px;box-shadow:var(--sh-2);
    justify-content:space-around;align-items:center;padding:0 8px}
  .bbar a,.bbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;
    color:var(--text-3);text-decoration:none;width:66px;min-height:62px;border-radius:16px;padding:6px 4px}
  .bbar a .ic,.bbar button .ic{width:27px;height:27px}
  .bbar a.on,.bbar button.on{color:var(--brand-600);font-weight:700;background:var(--brand-50)}
  .bbar .plus{width:58px;height:58px;border-radius:999px;color:#fff;margin-top:-30px;
    background:linear-gradient(180deg,#0A54CC,var(--brand-600));
    box-shadow:0 10px 24px -4px rgba(0,27,113,.55),inset 0 1px 0 rgba(255,255,255,.3);
    display:flex;align-items:center;justify-content:center}
  .demo-note{display:none}
  .drawer{top:auto;left:12px;right:12px;bottom:-100vh;width:auto;max-height:86vh;transition:bottom .3s var(--ease)}
  .drawer.on{right:12px;bottom:12px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

/* ============ Etapa 2: formularios, login y toasts de servidor ============ */
.lbl{font-size:14px;font-weight:700;display:block;margin:14px 0 6px}
.inp{width:100%;height:48px;border-radius:12px;border:1px solid var(--hairline);
  background:rgba(255,255,255,.92);padding:0 16px;font:inherit;color:var(--text-1);
  box-shadow:var(--sh-1);transition:border-color .15s, box-shadow .15s}
.inp:focus{outline:none;border-color:var(--brand-600);box-shadow:0 0 0 3px rgba(0,27,113,.18)}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2354565A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:100%;max-width:420px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-l);box-shadow:var(--sh-2);padding:36px}
.toast.tErr{background:rgba(120,28,22,.88)}
.sfoot form{margin:0}

/* ============ Etapa 6: tooltips, Modo Sesión y ranking ============ */
.tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;color:var(--text-3);cursor:help;outline:none}
.tip:hover,.tip:focus{color:var(--brand-600)}
.tip::after{content:attr(data-tip);position:absolute;top:130%;right:0;background:var(--brand-900);color:#fff;
  padding:10px 14px;border-radius:12px;font-size:12.5px;font-weight:500;line-height:1.45;width:max-content;
  max-width:280px;opacity:0;pointer-events:none;transition:opacity .15s, transform .15s;transform:translateY(-4px);
  z-index:60;box-shadow:var(--sh-2);text-align:left;white-space:normal}
.tip:hover::after,.tip:focus::after{opacity:1;transform:translateY(0)}
.timer{font-size:72px;font-weight:800;letter-spacing:-.02em;color:var(--brand-900);margin:10px 0 2px;
  font-variant-numeric:tabular-nums}
.seg{display:flex;align-items:center;padding:7px 0;border-bottom:1px solid var(--hairline)}
.seg:last-of-type{border-bottom:none}
.seg.ok input{opacity:.55}
.seg.now{background:linear-gradient(90deg, rgba(0,27,113,.06), transparent);border-radius:12px;padding-left:8px;margin-left:-8px}

/* ============ Etapa 7: avisos, badge y menú de administración ============ */
.noti{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--hairline)}
.noti:last-child{border-bottom:none}
.noti.nueva{background:linear-gradient(90deg, rgba(0,27,113,.05), transparent)}
.noti-ic{flex-shrink:0;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-50);color:var(--brand-600)}
.noti.nueva .noti-ic{background:var(--brand-600);color:#fff}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  margin-left:6px;border-radius:9px;background:var(--brand-600);color:#fff;font-size:11px;font-weight:700}
.menu{position:relative;display:inline-block}
.menu summary{list-style:none;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:230px;background:#fff;
  border:1px solid var(--hairline);border-radius:14px;box-shadow:var(--sh-2);padding:12px;text-align:left}
.menu[open] summary{outline:2px solid var(--brand-100);outline-offset:1px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ============ Etapa 8: menú móvil, navegación fluida, perfil y fotos ============ */
.hamb{display:none;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center;
  border:1px solid var(--glass-bd);background:rgba(255,255,255,.8);color:var(--brand-900);cursor:pointer;flex:none}
.menu-fondo{display:none;position:fixed;inset:0;background:rgba(10,20,35,.42);z-index:55;
  opacity:0;transition:opacity .25s var(--ease)}
.menu-fondo.on{display:block;opacity:1}
/* Barra de carga superior para la navegación fluida */
  /* Indicador de navegación. Estaba declarado con width:0 y ninguna regla ni script lo
     movía nunca: ocupaba sitio en la hoja sin llegar a verse jamás. Ahora recorre la
     parte superior mientras se trae la página, que es la señal que el socio necesita
     cuando la red va lenta y aparentemente no pasa nada. */
  #cargabar{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;
    background:linear-gradient(90deg,var(--brand-400),var(--brand-600));
    transform-origin:left center;transform:scaleX(0);opacity:0;
    transition:opacity .2s var(--ease)}
  body.cargando #cargabar{opacity:1;animation:cargaAvance 1.4s var(--ease) infinite}
  @keyframes cargaAvance{0%{transform:scaleX(0)}55%{transform:scaleX(.7)}100%{transform:scaleX(1);opacity:0}}
.content{transition:opacity .18s var(--ease)}
body.cargando .content{opacity:.45}
/* Perfil */
.perfil-foto{display:flex;flex-direction:column;align-items:center;gap:14px}
.foto-marco{width:200px;height:200px;border-radius:24px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,#EEF4FC,#FFF);border:1px solid var(--glass-bd);
  display:flex;align-items:center;justify-content:center;touch-action:none}
.foto-marco img{position:absolute;transform-origin:0 0;user-select:none;pointer-events:none}
.foto-marco .vacio{color:var(--text-3);font-size:13px;text-align:center;padding:0 20px}
.foto-actual{width:120px;height:120px;border-radius:50%;object-fit:cover;border:1px solid var(--glass-bd)}
.zoomr{width:100%;max-width:240px}
/* Fotos en avatares y directorio */
.av img,.av-l img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .ph{overflow:hidden}

@media (max-width:980px){
  .hamb{display:flex}
  /* El menú deja de estar oculto: ahora es un cajón deslizante */
  .sidebar{display:flex;transform:translateX(-115%);transition:transform .28s var(--ease);
    top:0;left:0;bottom:0;width:280px;border-radius:0 22px 22px 0;max-width:86vw;z-index:60}
  .sidebar.abierto{transform:translateX(0)}
  .main{margin-left:0}
}

/* Búsqueda en vivo (Etapa 8) */
.search-wrap{position:relative;margin-right:auto}
.search input{border:0;background:transparent;outline:0;font:inherit;color:var(--text-1);width:240px}
.search input::placeholder{color:var(--text-3)}
.resq{position:absolute;top:48px;left:0;width:360px;max-width:80vw;z-index:60;display:none;
  background:rgba(255,255,255,.98);backdrop-filter:blur(16px);border:1px solid var(--glass-bd);
  border-radius:16px;box-shadow:var(--sh-3);overflow:hidden;max-height:70vh;overflow-y:auto}
.resq.on{display:block;animation:pop .18s var(--ease)}
.resq-grp{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-3);
  text-transform:uppercase;padding:10px 14px 4px}
.resq-item{display:block;padding:8px 14px;text-decoration:none;color:var(--text-1);border-radius:10px;margin:0 6px}
.resq-item:hover{background:rgba(0,27,113,.07)}
.resq-item b{display:block;font-size:14px;font-weight:600}
.resq-item span{display:block;font-size:12px;color:var(--text-3)}
.resq-vacio{padding:14px;color:var(--text-3);font-size:13px;text-align:center}

/* Transición de página entre cargas completas (navegadores compatibles) */
@view-transition{ navigation: auto; }

/* Filas de formulario (Etapa 8) */
.frow{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.frow > div{margin-bottom:2px}

/* Teléfono en tarjeta de directorio */
.dir-tel{display:block;margin-top:6px;color:var(--text-3);font-size:12px}

/* ===================== Etapa 9: refinamientos de UX ===================== */
/* Tooltips accesibles */
.tip{position:relative;display:inline-flex;align-items:center;color:var(--text-3);cursor:help;vertical-align:middle;margin-left:6px}
.tip:hover,.tip:focus{color:var(--brand-600);outline:none}
.tip .tip-txt{position:absolute;bottom:150%;left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--brand-900);color:#fff;font-size:12px;line-height:1.45;font-weight:500;padding:8px 11px;border-radius:10px;
  width:max-content;max-width:248px;text-align:left;opacity:0;visibility:hidden;transition:opacity .15s var(--ease),transform .15s var(--ease);
  z-index:90;box-shadow:var(--sh-2);pointer-events:none;letter-spacing:0;text-transform:none}
.tip:hover .tip-txt,.tip:focus .tip-txt{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media(max-width:600px){.tip .tip-txt{left:auto;right:-8px;transform:translateY(4px)}.tip:hover .tip-txt,.tip:focus .tip-txt{transform:translateY(0)}}

/* Modal centrado (lightbox) */
.modal-fondo{position:fixed;inset:0;background:rgba(10,20,35,.5);backdrop-filter:blur(5px);z-index:85;
  display:none;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .2s var(--ease)}
.modal-fondo.on{display:flex;opacity:1}
.modal{background:#fff;border-radius:24px;box-shadow:var(--sh-3);width:460px;max-width:100%;max-height:88vh;overflow-y:auto;
  position:relative;transform:translateY(12px) scale(.985);transition:transform .24s var(--ease)}
.modal-fondo.on .modal{transform:none}
.modal .mcerrar{position:absolute;top:14px;right:14px;width:36px;height:36px;border:none;border-radius:50%;
  background:rgba(0,0,0,.05);color:var(--text-2);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.modal .mcerrar:hover{background:rgba(0,0,0,.1)}
.modal-head{padding:26px 26px 16px;display:flex;gap:16px;align-items:center}
.modal-head .av{width:64px;height:64px;font-size:22px;flex:none}
.modal-head h3{margin:0;font-size:19px}
.modal-head .gsub{color:var(--text-3);font-size:13px;margin-top:2px}
.modal-body{padding:0 26px 8px}
.modal-row{display:flex;gap:10px;padding:11px 0;border-top:1px solid var(--hairline);font-size:14px;align-items:flex-start}
.modal-row .k{color:var(--text-3);min-width:104px;flex:none}
.modal-row .v{color:var(--text-1);font-weight:500;word-break:break-word}
.modal-foot{padding:16px 26px 24px;display:flex;gap:10px;flex-wrap:wrap}
.modal-foot .btn{flex:1;min-width:140px;justify-content:center}
.modal-cargando{padding:48px;text-align:center;color:var(--text-3)}

/* Tablas responsivas: en móvil cada fila se vuelve una tarjeta etiqueta/valor */
.tbl-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:680px){
  .tbl:not(.cards){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl.cards thead{display:none}
  .tbl.cards tbody,.tbl.cards tr,.tbl.cards td{display:block;width:100%}
  .tbl.cards tr{border-bottom:1px solid var(--hairline);padding:8px 0}
  .tbl.cards tbody tr:last-child{border-bottom:none}
  .tbl.cards td{height:auto!important;padding:7px 18px;display:flex;justify-content:space-between;gap:16px;border:none;text-align:right}
  .tbl.cards td::before{content:attr(data-col);font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--text-3);text-align:left;flex:none;align-self:center}
  .tbl.cards td.r{text-align:right}
  .tbl.cards td[data-col=""]::before{content:none}
}

/* Estados vacíos con guía */
.vacio-guia{text-align:center;padding:40px 22px;color:var(--text-3)}
.vacio-guia .ic-l{width:34px;height:34px;color:var(--brand-400);margin-bottom:10px}
.vacio-guia b{display:block;color:var(--text-2);font-size:15px;margin-bottom:4px}
.vacio-guia p{font-size:13px;margin:0 auto 14px;max-width:340px}

/* Asistente del reporte (tipo Typeform): revelado condicional + progreso */
.rqa-prog{height:6px;border-radius:99px;background:var(--brand-50);overflow:hidden;margin:2px 0 18px}
.rqa-prog i{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(var(--avance,0));background:linear-gradient(90deg,var(--brand-400),var(--brand-600));transition:transform .35s var(--ease)}
.rqa-paso-ov{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-600);margin-bottom:6px}
.rqa-sino{display:flex;gap:12px;margin:16px 0 4px;flex-wrap:wrap}
.rqa-sino .btn{flex:1;min-width:150px;justify-content:center}
/* `max-height` obliga a adivinar una altura y produce una curva de apertura falsa.
   grid-template-rows 0fr→1fr anima la altura real. */
.rqa-captura{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s var(--ease),opacity .25s var(--ease)}
.rqa-captura > *{overflow:hidden;min-height:0}
.rqa-captura.on{max-height:1200px;opacity:1;margin-top:14px}

/* Línea de tiempo (stepper) del estado de una referencia */
.stepper{display:flex;margin:18px 0 6px}
.stepper .paso{flex:1;text-align:center;position:relative;font-size:11.5px;color:var(--text-3);font-weight:600}
.stepper .paso .pt{width:14px;height:14px;border-radius:50%;background:var(--hairline);margin:0 auto 7px;position:relative;z-index:2;transition:background .2s}
.stepper .paso::before{content:'';position:absolute;top:6px;left:-50%;width:100%;height:2px;background:var(--hairline);z-index:1}
.stepper .paso:first-child::before{display:none}
.stepper .paso.done .pt{background:var(--ok)}
.stepper .paso.done::before{background:var(--ok)}
.stepper .paso.now .pt{background:var(--brand-600);box-shadow:0 0 0 4px var(--brand-100)}
.stepper .paso.now{color:var(--brand-600)}
.stepper .paso.lost .pt{background:var(--bad)}
.stepper .paso.lost::before{background:var(--bad)}

/* Directorio: tarjeta clickeable */
.pcard.click{cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.pcard.click:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}

/* Buscador en el cajón móvil (solo ≤980px; en escritorio se usa el del encabezado) */
.search-movil{display:none}
@media(max-width:980px){
  .search-movil{display:block;position:relative;padding:4px 16px 12px}
  .search-movil .search{width:100%}
  .search-movil .search input{width:100%}
  .search-movil .resq{top:52px;left:16px;right:16px;width:auto;max-width:none}
}

/* Tarjeta de onboarding: completar perfil */
.onb{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,var(--brand-50),#fff);
  border:1px solid var(--brand-100)}
.onb .onb-ic{width:46px;height:46px;border-radius:50%;background:var(--brand-100);color:var(--brand-600);
  display:flex;align-items:center;justify-content:center;flex:none}
.onb .onb-tx{flex:1}.onb .onb-tx b{display:block;font-size:15px;color:var(--brand-900)}
.onb .onb-tx span{font-size:13px;color:var(--text-2)}
@media(max-width:600px){.onb{flex-wrap:wrap}.onb .btn{width:100%;justify-content:center}}

/* ===== Editor de plantilla de agenda (encabezados + filas alineadas) ===== */
.pl-head, .pl-row{display:grid;grid-template-columns:30px 1fr 70px 160px auto;gap:10px;align-items:center}
.pl-head{padding:12px 18px;background:var(--brand-50);border-bottom:1px solid var(--hairline);
  font-size:12px;font-weight:600;color:var(--brand-900);text-transform:uppercase;letter-spacing:.4px}
.pl-row{padding:10px 18px;border-bottom:1px solid var(--hairline);margin:0}
.pl-row:last-of-type{border-bottom:none}
.pl-add{background:rgba(175,140,85,.05)}
.pl-ord{color:var(--text-3);font-size:13px;text-align:center}
.pl-head .pl-min{text-align:center}
.pl-head .pl-acc{text-align:right}
.pl-row .inp{height:40px;font-size:14px}
.pl-row .pl-min{text-align:center;padding:0 6px}
.pl-row .pl-resp{font-size:13px}
.pl-acc{display:flex;gap:5px;justify-content:flex-end;align-items:center}
@media(max-width:640px){
  .pl-head{display:none}
  .pl-row{grid-template-columns:1fr 1fr;gap:8px;padding:14px 16px;position:relative}
  .pl-row .pl-ord{position:absolute;top:14px;right:14px}
  .pl-row .pl-seg{grid-column:1 / -1}
  .pl-acc{grid-column:1 / -1;justify-content:flex-start}
}

/* ===== Asistente de primer arranque ===== */
.wz-steps{display:flex;gap:6px;justify-content:center;margin-bottom:22px}
.wz-step{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-3)}
.wz-step:not(:last-child)::after{content:"";width:22px;height:1px;background:var(--hairline);margin-left:6px}
.wz-step .wz-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--hairline);font-size:12px;font-weight:600;background:#fff;color:var(--text-3)}
.wz-step.now .wz-dot{border-color:var(--brand-600);color:var(--brand-700,var(--brand-900));background:var(--brand-50)}
.wz-step.now .wz-lbl{color:var(--brand-900);font-weight:600}
.wz-step.done .wz-dot{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.wz-h1{font-size:21px;text-align:center;color:var(--brand-900);letter-spacing:-.01em;margin-bottom:4px}
.wz-sub{text-align:center;color:var(--text-2);font-size:14px;margin:0 0 22px}

/* ===== Gestión de usuarios (fichas) ===== */
.um-card{margin-bottom:12px}
.um-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.um-tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.um-cargos{font-size:13px;color:var(--text-2);margin-top:8px}
.um-det{margin-top:4px}
.um-det summary{display:inline-flex;align-items:center;gap:6px;list-style:none}
.um-det summary::-webkit-details-marker{display:none}
.um-det[open] summary{outline:2px solid var(--brand-100);outline-offset:1px}
.um-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--hairline)}
.um-block{background:var(--surface-2,#FAFBFC);border:1px solid var(--hairline);border-radius:14px;padding:14px}
.um-bh{display:flex;align-items:center;gap:7px;font-weight:600;font-size:13px;color:var(--brand-900);margin-bottom:10px}
.um-bh .ic{width:16px;height:16px;color:var(--brand-600)}
.um-note{font-size:12.5px;color:var(--text-3);margin-bottom:8px;line-height:1.5}
.inp.sm{height:36px;font-size:13.5px;padding:0 10px}
select.inp.sm{padding:0 8px}
@media(max-width:720px){ .um-panel{grid-template-columns:1fr} }

/* ===== Checkboxes de funciones (cargos) ===== */
.um-checks{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.um-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-1);cursor:pointer;
  padding:6px 9px;border:1px solid var(--hairline);border-radius:9px;background:#fff;transition:border-color .15s}
.um-check:hover{border-color:var(--brand-300,var(--brand-400))}
.um-check input{width:16px;height:16px;accent-color:var(--brand-600);flex:none}
.um-check:has(input:checked){border-color:var(--brand-600);background:var(--brand-50)}

/* ===== QR de asistencia (servidor) + modo proyección ===== */
.qr-box{margin:14px auto;width:248px;height:248px;background:#fff;padding:10px;border-radius:12px;box-shadow:var(--sh-1)}
.qr-svg{display:block;width:100%;height:100%}
.qr-overlay{position:fixed;inset:0;z-index:9999;background:#fff;display:flex;align-items:center;justify-content:center}
.qr-overlay[hidden]{display:none}
.qr-stage{text-align:center;padding:24px;max-width:94vw}
.qr-cap{font-weight:600;font-size:clamp(22px,4.2vw,46px);color:#001B71;letter-spacing:-.01em;line-height:1.1;margin-bottom:20px}
.qr-big{width:min(76vh,76vw);max-width:680px;margin:0 auto}
.qr-big .qr-svg{width:100%;height:auto}
.qr-sub{margin-top:18px;font-size:clamp(15px,2.4vw,26px);color:#001B71}
.qr-link{margin-top:10px;font-size:13px;color:#9aa0a6;word-break:break-all}
.qr-close{position:absolute;top:16px;right:20px;width:50px;height:50px;border:none;background:transparent;font-size:40px;line-height:1;color:#001B71;cursor:pointer;border-radius:10px}
.qr-close:hover{background:#f1f1f1}

/* ===== Tabla de permisos efectivos (ficha de usuario) ===== */
.pm-area{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);margin:10px 0 3px}
.pm-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-1);padding:3px 0;line-height:1.35}
.pm-row .ic{color:var(--ok);width:16px;height:16px;flex:none}

/* ===== Casilla "mantener sesión iniciada" (login) ===== */
.recordar-check{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:14px;color:var(--text-2);cursor:pointer;user-select:none}
.recordar-check input{width:17px;height:17px;accent-color:var(--brand-600);cursor:pointer;flex:none}

/* ===== Interruptores de permiso directo (ficha de usuario) ===== */
.pm-form{margin-top:12px;border-top:1px solid var(--hairline);padding-top:12px}
.pm-toggle{display:flex;align-items:flex-start;gap:9px;padding:5px 0;font-size:13.5px;color:var(--text-1);cursor:pointer;line-height:1.35}
.pm-toggle input{width:16px;height:16px;margin-top:1px;accent-color:var(--brand-600);flex:none;cursor:pointer}
.pm-toggle.por-rol{color:var(--text-3);cursor:default}
.pm-toggle.por-rol input{cursor:default}
.pm-toggle em{font-style:normal;color:var(--brand-600);font-size:11px}

/* Selector de giros (Mi perfil) */
.giro-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.giro-chip{display:inline-flex;align-items:center;gap:7px;background:var(--brand-50);border:1px solid var(--brand-100);color:var(--text-1);border-radius:999px;padding:6px 10px 6px 9px;font-size:13.5px}
.giro-chip.es-principal{background:var(--brand-100);border-color:var(--brand-400)}
.giro-chip .gc-star{border:none;background:none;cursor:pointer;color:var(--text-3);font-size:15px;line-height:1;
  min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:0}
.giro-chip.es-principal .gc-star{color:var(--brand-600)}
.giro-chip .gc-lbl{line-height:1.15}
.giro-chip .gc-x{border:none;background:none;cursor:pointer;color:var(--text-3);font-size:18px;line-height:1;
  min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:0}
.giro-chip .gc-x:hover{color:#b3261e}
.giro-search{position:relative}
.giro-results{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--hairline);border-radius:12px;box-shadow:0 14px 36px rgba(0,27,113,.14);max-height:300px;overflow:auto;z-index:30;padding:6px}
.gr-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;border:none;background:none;cursor:pointer;padding:9px 10px;border-radius:9px}
.gr-item:hover{background:var(--brand-50)}
.gr-item small{color:var(--text-3);font-size:11.5px}
.gr-empty{padding:12px 10px;color:var(--text-3);font-size:13px}

/* Lanzador de acciones (inicio) */
.lz{padding:18px 20px}
.lz-head b{display:block;font-size:16px;color:var(--text-1)}
.lz-head span{display:block;font-size:13px;color:var(--text-3);margin-top:2px}
.lz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.lz-tile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border:1px solid var(--hairline);border-radius:14px;text-decoration:none;background:linear-gradient(180deg,#fff,var(--brand-50));transition:transform .12s,box-shadow .12s,border-color .12s}
.lz-tile:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,27,113,.12);border-color:var(--brand-400)}
.lz-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--brand-100);color:var(--brand-600)}
.lz-ic .ic{width:22px;height:22px}
.lz-t{font-size:14px;font-weight:600;color:var(--text-1);line-height:1.25}
@media (max-width:760px){ .lz-grid{grid-template-columns:repeat(2,1fr)} }

/* Reportería */
.rp-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.rp-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--hairline);border-radius:999px;text-decoration:none;color:var(--text-2);font-size:13.5px;background:#fff}
.rp-tab .ic{width:16px;height:16px}
.rp-tab:hover{border-color:var(--brand-400);color:var(--text-1)}
.rp-tab.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.rp-tab.on .ic{color:#fff}
.rp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:8px 18px 18px}
.rp-kpi{border:1px solid var(--hairline);border-radius:14px;padding:16px;background:linear-gradient(180deg,#fff,var(--brand-50))}
.rp-kv{display:block;font-size:26px;font-weight:700;color:var(--brand-900);line-height:1.1}
.rp-kl{display:block;font-size:12.5px;color:var(--text-3);margin-top:4px}
@media (max-width:760px){ .rp-kpis{grid-template-columns:repeat(2,1fr)} }
@media print{
  /* Antes solo se ocultaban .nav y .bbar, así que el papel salía con la barra lateral,
     el encabezado pegajoso y el buscador. */
  .sidebar,.hdr,.bbar,.nav,.rp-tabs,.btn,.menu-fondo,#cargabar,.toast,.ptitle .spacer{display:none!important}
  .app{display:block}
  .main{margin-left:0!important}
  .content{padding:0!important}
  body::before{display:none}
  .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
}


/* ===================== Portada de documento (Reportes y Estado de cuenta) =====================
   Estas clases se usaban en mis_pagos.php y reportes.php desde hace tiempo pero nunca
   llegaron a definirse: la portada salía como texto plano sin formato. */
.rp-portada{background:linear-gradient(135deg,var(--brand-900),var(--brand-600));color:#fff;
  padding:26px 28px;position:relative}
.rp-portada-marca{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:8px}
.rp-portada-tit{font-size:24px;line-height:1.2;font-weight:700;margin:0;color:#fff;letter-spacing:-.01em}
.rp-portada-meta{font-size:13px;color:rgba(255,255,255,.82);margin-top:8px}
@media (max-width:640px){
  .rp-portada{padding:20px 18px}
  .rp-portada-tit{font-size:20px}
}

/* Elementos que existen para operar en pantalla y no deben salir en papel. */
.no-print{}
@media print{ .no-print{display:none !important} }

/* Formulario en curso de envío: bloquea el segundo toque sin usar `disabled`,
   que quitaría el name/value del botón del envío. */
.form-enviando{pointer-events:none}
.form-enviando button[type=submit],.form-enviando button:not([type]),.form-enviando input[type=submit]{
  opacity:.65;position:relative}
.form-enviando button[type=submit]::after,.form-enviando button:not([type])::after{
  content:"";width:14px;height:14px;margin-left:8px;border-radius:999px;
  border:2px solid currentColor;border-top-color:transparent;display:inline-block;
  animation:girar .7s linear infinite;vertical-align:-2px}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .form-enviando button[type=submit]::after,.form-enviando button:not([type])::after{animation:none}
}

/* Aviso de advertencia: antes compartía estilo con el de éxito (verde con palomita),
   así que "ya existe un registro con ese teléfono" se leía como confirmación. */
.toast.tAvi{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
.toast.tAvi .ic{color:var(--warn)}


/* ===================== Bloque de pendientes en móvil =====================
   Verificado en navegador a 390 px: la fila era un flex horizontal, así que entre el
   avatar y dos botones al texto le quedaban ~100 px y caía a una o dos palabras por
   línea. Es el módulo más importante del inicio —lo que el socio tiene que resolver— y
   era justo el menos legible. Ahora el texto ocupa su renglón y las acciones el suyo. */
@media (max-width:640px){
  .pend{flex-wrap:wrap;align-items:flex-start;row-gap:10px;padding:16px 0}
  .pend .av{flex:none;margin-top:2px}
  .pend p{flex:1 1 calc(100% - 46px);min-width:0;line-height:1.45}
  .pend form,.pend > .btn{flex:1 1 140px;margin:0}
  .pend form .btn,.pend > .btn{width:100%;justify-content:center}

  /* Cuatro indicadores, cada uno en una tarjeta a todo lo ancho, obligaban a recorrer
     media pantalla para leer cuatro cifras. En parejas se leen de un vistazo. */
  .grid.g12 > .card.kpi{grid-column:span 6 !important}
  .kpi .num{font-size:26px;line-height:32px}
  .kpi .ov{font-size:10.5px}
  .kpi .cmp{font-size:12px}

  /* El chip del encabezado se cortaba a media palabra ("Sin sesión progra…"). */
  .hchip{max-width:none;flex:1 1 auto;min-width:0;font-size:12px}
  .hchip svg{flex:none}
}

/* Franja de cifras dentro de "Mi ciclo". Acompañan al progreso, no compiten con él:
   por eso viven en su tarjeta y no en cuatro tarjetas propias a pantalla completa. */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:18px;
  border-top:1px solid var(--hairline);padding-top:14px}
.cifras > div{display:flex;flex-direction:column;gap:2px;padding-right:12px}
.cifras b{font-size:21px;line-height:26px;font-weight:700;color:var(--brand-900);letter-spacing:-.02em}
.cifras span{font-size:11.5px;color:var(--text-3);line-height:1.3}
[data-theme="oscuro"] .cifras b{color:var(--text-1)}
@media (max-width:640px){
  .cifras{grid-template-columns:1fr 1fr;gap:14px 2px}
  .cifras b{font-size:19px;line-height:24px}
}

/* ===================== Reporte del ciclo en una pantalla =====================
   Cada sección muestra lo registrado y abre la captura ahí mismo. La captura se
   despliega sola cuando el socio va corto respecto a la meta: es justo cuando la
   pregunta "¿se te olvidó algo?" vale la pena, y quedarse callado no ayudaría. */
.rqa-uno{max-width:720px}
.rqa-sec{border-top:1px solid var(--hairline);padding:18px 0}
.rqa-sec:first-of-type{border-top:0;padding-top:10px}
.rqa-sec-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rqa-sec-cab b{display:block;font-size:15.5px;color:var(--text-1)}
.rqa-sec-cab span{display:block;font-size:13px;color:var(--text-3);margin-top:2px}
.rqa-sec.falta .rqa-sec-cab b{color:var(--brand-900)}
.rqa-preg{font-size:14px;font-weight:600;color:var(--brand-900);margin:12px 0 10px}
/* Es un botón de verdad, no un enlace dentro de un párrafo: necesita su superficie.
   (Los enlaces en línea dentro de texto sí quedan fuera del umbral de 44 px por norma.) */
.rqa-mas{margin-top:10px;min-height:44px;padding:0 14px 0 10px;border-radius:10px}
.rqa-mas:hover{background:var(--brand-50);text-decoration:none}

/* La captura se anima con grid-template-rows: la altura real, sin adivinar un máximo. */
.rqa-captura{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .28s var(--ease),opacity .22s var(--ease)}
.rqa-captura > div{overflow:hidden;min-height:0}
.rqa-captura.abierta{grid-template-rows:1fr;opacity:1;margin-top:4px}
.rqa-captura.abierta > div{padding:16px;background:var(--brand-50);border-radius:14px}

.rqa-sino{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.rqa-sino form{flex:1 1 160px}
.rqa-sino .btn{width:100%;justify-content:center}

.rqa-enviar{border-top:1px solid var(--hairline);margin-top:22px;padding-top:20px}
.rqa-enviar .btn{width:100%;justify-content:center}
.rqa-enviar .hint{margin-top:10px;text-align:center}

@media (max-width:640px){
  .rqa-sec-cab{flex-direction:column;gap:6px}
  .rqa-captura.abierta > div{padding:14px}
}

/* Lista del calendario */
.cal-lista{list-style:none;margin:0;padding:0;max-height:340px;overflow-y:auto}
.cal-lista li{padding:10px 0;border-bottom:1px solid var(--hairline)}
.cal-lista li:last-child{border-bottom:0}
.cal-lista b{display:block;font-size:14px;color:var(--text-1)}
.cal-lista span{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px}

/* ===================== Encuesta del piloto =====================
   Controles grandes, una decisión por golpe de vista y nada de matrices: se contesta
   con el pulgar, de pie, en tres minutos. Hereda la tarjeta y la tipografía del
   auto-registro para que se sienta parte de la plataforma. */
.enc-card{max-width:560px}
.enc-datos{list-style:none;margin:18px 0 4px;padding:0;display:grid;gap:12px}
.enc-datos li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-2);line-height:1.45}
.enc-datos .ic{color:var(--brand-600);flex:none;margin-top:2px}
.enc-datos li > span{flex:1;min-width:0}

/* Opción única: toda la fila es el blanco táctil, no solo el círculo. */
.enc-ops{display:grid;gap:8px;margin-top:6px}
.enc-op{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;
  border:1.5px solid var(--hairline);border-radius:14px;cursor:pointer;background:var(--surface);
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.enc-op span{font-size:14.5px;color:var(--text-1);line-height:1.35}
.enc-op input{appearance:none;width:22px;height:22px;flex:none;border:2px solid var(--hairline);
  border-radius:999px;margin:0;position:relative;transition:border-color .15s}
.enc-op input:checked{border-color:var(--brand-600);border-width:7px}
.enc-op:hover{border-color:var(--brand-400)}
.enc-op:has(input:checked){border-color:var(--brand-600);background:var(--brand-50)}
.enc-op:has(input:focus-visible){outline:2px solid var(--brand-600);outline-offset:2px}

/* Selección múltiple en fichas. */
.enc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.enc-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;
  border:1.5px solid var(--hairline);border-radius:999px;cursor:pointer;background:var(--surface);
  font-size:14px;color:var(--text-2);transition:border-color .15s,background .15s,color .15s}
.enc-chip input{position:absolute;opacity:0;width:1px;height:1px}
.enc-chip:has(input:checked){border-color:var(--brand-600);background:var(--brand-50);color:var(--brand-900);font-weight:600}
.enc-chip:has(input:focus-visible){outline:2px solid var(--brand-600);outline-offset:2px}
.enc-chip:has(input:disabled){opacity:.42;cursor:not-allowed}

.enc-cond{margin-top:14px;padding-left:14px;border-left:2px solid var(--brand-100)}
.enc-nota{margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);
  font-size:12.5px;line-height:1.5;color:var(--text-3)}
.enc-texto{min-height:132px;padding:14px 16px;line-height:1.5;resize:vertical}

@media (max-width:600px){
  .enc-card{padding:22px 18px}
  .enc-op{min-height:56px}
}

/* Resultados de la encuesta */
.enc-res{display:grid;gap:9px}
.enc-res-fila{display:grid;grid-template-columns:1fr 84px auto;gap:10px;align-items:center;font-size:13.5px}
.enc-res-et{color:var(--text-2);line-height:1.3}
.enc-res-bar{height:8px;background:rgba(0,71,186,.10);border-radius:4px;overflow:hidden}
.enc-res-bar i{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(var(--avance,0));
  background:linear-gradient(90deg,var(--brand-400),var(--brand-600));transition:transform .4s var(--ease)}
.enc-res-n{color:var(--text-3);font-size:12.5px;white-space:nowrap}
.enc-cita{margin:0 0 10px;padding:12px 16px;border-left:2px solid var(--brand-100);
  background:var(--brand-50);border-radius:0 12px 12px 0;font-size:14px;color:var(--text-1);line-height:1.5}
@media (max-width:600px){ .enc-res-fila{grid-template-columns:1fr 56px auto} }

/* ===================== Páginas públicas (.rz-*) =====================
   Tarjeta, progreso y pasos que comparten el auto-registro y la encuesta del
   piloto. Vivían dentro de publico_registro.php, así que la encuesta usaba los
   mismos nombres de clase sin recibir ni un estilo: se servía sin formato. */
.rz-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
  /* Sin overflow:hidden. Recortaba el desplegable de giros contra el borde de la
     tarjeta, y ningún z-index puede escapar de un ancestro que recorta. */
  .rz-card{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--glass-bd);border-radius:24px;
    box-shadow:var(--sh-3);padding:28px 26px;position:relative}
  .rz-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
  .rz-logo{width:42px;height:42px;flex:none;object-fit:contain}
  .rz-brand small{display:block;color:var(--text-3);font-size:12px}
  .rz-brand b{font-size:14px;color:var(--text-1)}
  .rz-prog{display:flex;gap:6px;margin-bottom:20px}
  .rz-prog i{flex:1;height:5px;border-radius:3px;background:var(--hairline)}
  .rz-prog i.on{background:linear-gradient(90deg,var(--brand-400),var(--brand-600))}
  .rz-q{font-size:20px;font-weight:700;color:var(--text-1);margin:0 0 4px;line-height:1.25}
  .rz-h{font-size:13.5px;color:var(--text-3);margin:0 0 16px;line-height:1.4}
  .rz-step{display:none;animation:rzIn .28s var(--ease)}
  .rz-step.on{display:block}
  @keyframes rzIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .rz-field{margin-bottom:12px}
  .rz-senuelo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  /* El desplegable flota POR ENCIMA de la tarjeta y de lo que venga debajo. */
  .rz-field.giro-search{position:relative;z-index:60}
  .rz-field.giro-search .giro-results{z-index:300}
  .rz-field.giro-search .giro-results.arriba{top:auto;bottom:calc(100% + 4px)}
  .rz-ayuda{font-size:12px;color:var(--text-3);margin:6px 2px 0}
  .gr-item[aria-selected="true"],.gr-item.marcado{background:var(--brand-50);outline:2px solid var(--brand-400);outline-offset:-2px}
  .gr-item.gr-off{opacity:.5;cursor:not-allowed}
  /* Error en línea: sustituye a los alert(), que en móvil interrumpen y no dicen dónde. */
  .rz-inline{display:block;color:var(--bad);font-size:12.5px;margin:6px 2px 0}
  .inp.err{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-bg)}
  .rz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rz-nav{display:flex;gap:10px;margin-top:20px}
  .rz-nav .btn{flex:1}
  .rz-rev{background:var(--brand-50);border-radius:12px;padding:14px 16px;margin-bottom:8px}
  .rz-rev .r{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:14px}
  .rz-rev .r span:first-child{color:var(--text-3)}
  .rz-rev .r span:last-child{color:var(--text-1);font-weight:600;text-align:right}
  .rz-ok{text-align:center;padding:8px 4px}
  .rz-ok .tick{width:66px;height:66px;border-radius:999px;background:var(--ok-bg);color:var(--ok);
    display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
  .rz-ok h2{margin:0 0 8px;font-size:22px;color:var(--text-1)}
  .rz-ok p{color:var(--text-2);line-height:1.5;margin:0 auto;max-width:400px}
  .rz-err{background:var(--bad-bg);border:1px solid var(--bad-bd);color:var(--bad);border-radius:12px;
    padding:11px 14px;font-size:13.5px;margin-bottom:16px}
  .rz-foot{text-align:center;color:var(--text-3);font-size:11.5px;margin-top:18px}
  .seg{display:flex;gap:6px;background:var(--brand-50);border-radius:12px;padding:4px}
  .seg-op{flex:1;border-radius:9px;padding:9px 10px;font-size:14px;font-weight:600;color:var(--text-2);background:transparent;text-align:center}
  .seg-op.on{background:#fff;color:var(--brand-900);box-shadow:var(--sh-1)}

/* ===== P0/P1: accesibilidad, control segmentado, banner de actualización, tablas-tarjeta, tooltip táctil ===== */

/* Áreas táctiles mínimas (HIG 44pt) en dispositivos de dedo */
@media (pointer: coarse){
  .btn.sm{min-height:44px}
  .btn.md{min-height:44px}
  .search{height:44px}
  .inp, select.inp{min-height:44px}
  .pl-row .inp{height:44px}
  .seg-op{min-height:44px;height:44px}
  .giro-chip .gc-star,.giro-chip .gc-x{min-width:44px;min-height:44px}
  /* El resto de lo pulsable seguía por debajo del umbral cómodo: campana, hamburguesa,
     avatar, cerrar sesión, enlaces del menú y filas de resultados. En un dedo, 32-40 px
     obliga a apuntar; 44 px no. */
  .bell,.hamb,.theme-toggle{min-width:44px;min-height:44px}
  .tabs button{min-height:44px}
  .hdr .av{width:44px;height:44px}
  .me .x{width:44px!important;height:44px!important}
  .nav a{min-height:44px}
  .gr-item,.resq-item{min-height:44px}
  .tbl.cards td{min-height:40px}
}

/* Control segmentado (Sí / Aún no) */
.seg{display:inline-flex;background:var(--brand-50);border:1px solid var(--hairline);border-radius:12px;padding:3px;gap:3px}
.seg-op{appearance:none;border:0;background:transparent;color:var(--text-2);font:inherit;font-weight:700;
  font-size:14px;padding:9px 16px;border-radius:9px;cursor:pointer;min-height:40px;transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}
.seg-op:hover{color:var(--text-1)}
.seg-op.on{background:#fff;color:var(--brand-900);box-shadow:var(--sh-1)}
.seg-op:active{transform:scale(.97)}

/* Banner de actualización del service worker */
.sw-banner{position:fixed;left:12px;right:12px;z-index:60;display:none;align-items:center;gap:12px;
  bottom:max(12px,env(safe-area-inset-bottom));
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid var(--glass-bd);border-radius:16px;box-shadow:var(--sh-2);padding:12px 14px}
.sw-banner.show{display:flex;animation:swup .3s var(--ease)}
@keyframes swup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sw-banner .sw-t{flex:1;font-size:13.5px;color:var(--text-1);line-height:1.35}
.sw-banner .sw-t b{color:var(--brand-900)}
.sw-banner .btn{flex:none}
@media (max-width:980px){ .sw-banner.show{bottom:calc(96px + env(safe-area-inset-bottom))} }
@media (min-width:981px){ .sw-banner{left:auto;right:24px;max-width:380px;bottom:24px} }

/* Tooltip accesible en táctil (se abre al tocar) */
.tip.tip-open::after{opacity:1;transform:translateY(0)}
.tip.tip-open .tip-txt{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* Tablas que se transforman en tarjetas en móvil */
@media (max-width:640px){
  .tbl.cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl.cards, .tbl.cards tbody, .tbl.cards tfoot{display:block;width:100%}
  .tbl.cards tr{display:block;border:1px solid var(--hairline);border-radius:14px;background:#fff;
    box-shadow:var(--sh-1);padding:6px 12px;margin:0 0 10px}
  .tbl.cards td{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
    border:0 !important;padding:7px 0 !important;text-align:right !important;font-size:14px}
  .tbl.cards td::before{content:attr(data-col);font-weight:700;color:var(--text-2);text-align:left;
    flex:0 0 45%;max-width:45%}
  .tbl.cards td:empty{display:none}
  .tbl.cards tfoot tr{background:var(--brand-50)}
}

/* Perfil enriquecido */
.dir-pv{display:block;font-size:12px;color:var(--text-2);margin-top:4px;font-style:italic;line-height:1.3}
.dm-pv{font-size:14px;color:var(--brand-900);background:var(--brand-50);border-radius:10px;padding:10px 12px;margin-bottom:10px;font-weight:600;line-height:1.35}

/* Siguiente mejor acción */
.sma{display:flex;align-items:center;gap:14px;text-decoration:none;margin:0 0 14px;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-900));color:#fff;
  border-radius:var(--r-m);padding:16px 18px;box-shadow:var(--sh-2);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.sma:hover{transform:translateY(-1px);box-shadow:var(--sh-3)}
.sma:active{transform:scale(.995)}
.sma-ic{flex:none;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.sma-ic .ic{width:22px;height:22px;color:#fff}
.sma-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sma-k{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.85;font-weight:700}
.sma-t{font-size:16px;font-weight:700}
.sma-x{font-size:13px;opacity:.92;line-height:1.35}
.sma-cta{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;
  background:#fff;color:var(--brand-900);border-radius:999px;padding:9px 14px;white-space:nowrap}
.sma-cta .ic{width:15px;height:15px}
@media (max-width:640px){ .sma{flex-wrap:wrap} .sma-cta{width:100%;justify-content:center;margin-top:4px} }

/* ===================== Modo oscuro · Azul COPARMEX ===================== */
.theme-toggle .tt-sun{display:none}
.theme-toggle .tt-moon{display:block}
[data-theme="oscuro"] .theme-toggle .tt-moon{display:none}
[data-theme="oscuro"] .theme-toggle .tt-sun{display:block}

[data-theme="oscuro"]{
  --brand-50:rgba(0,113,206,.16); --brand-100:rgba(0,113,206,.26);
  --surface:#0E1834;
  --glass:rgba(10,20,46,.72); --glass-bd:rgba(96,150,255,.16);
  --hairline:rgba(120,165,255,.14);
  --text-1:#EAF0FC; --text-2:#B7C4E2; --text-3:#8B9AC4;
  --ok:#5FD08A; --ok-bg:rgba(27,122,61,.24); --ok-bd:rgba(95,208,138,.35);
  --warn:#F0BC66; --warn-bg:rgba(154,91,0,.28); --warn-bd:rgba(240,188,102,.35);
  --bad:#F08A80; --bad-bg:rgba(180,35,24,.26); --bad-bd:rgba(240,138,128,.35);
  --sh-1:0 1px 2px rgba(2,6,20,.4), 0 6px 20px rgba(2,6,20,.45);
  --sh-2:0 2px 4px rgba(2,6,20,.45), 0 14px 36px rgba(2,6,20,.55);
  --sh-3:0 8px 16px rgba(2,6,20,.5), 0 28px 70px rgba(2,6,20,.65);
  color-scheme:dark;
}
/* Fondo: el lienzo vive en body::before */
[data-theme="oscuro"] body::before{
  background:
    radial-gradient(1000px 680px at 88% -12%, rgba(0,113,206,.30), transparent 62%),
    radial-gradient(900px 700px at -12% 112%, rgba(0,71,186,.26), transparent 60%),
    radial-gradient(700px 500px at 50% 118%, rgba(0,27,113,.35), transparent 65%),
    linear-gradient(180deg,#0A1436 0%,#071026 55%,#050B1C 100%);
}
[data-theme="oscuro"] body{background:#050B1C}
/* Superficies: navy entintado, no negro */
[data-theme="oscuro"] .hdr{background:rgba(8,17,42,.66)}
[data-theme="oscuro"] .card{background:linear-gradient(180deg,rgba(20,34,72,.78),rgba(12,22,50,.86))}
[data-theme="oscuro"] .pcard{background:linear-gradient(180deg,rgba(20,34,72,.78),rgba(12,22,50,.86))}
[data-theme="oscuro"] .inp{background:rgba(10,24,58,.55);color:var(--text-1);border-color:var(--glass-bd)}
[data-theme="oscuro"] .inp::placeholder{color:var(--text-3)}
[data-theme="oscuro"] .search{background:rgba(10,24,58,.5)}
[data-theme="oscuro"] .search input{color:var(--text-1)}
[data-theme="oscuro"] .search kbd{background:rgba(96,150,255,.16);color:var(--text-2)}
[data-theme="oscuro"] .btn.s{background:rgba(0,71,186,.22);color:#CFE0FF;border-color:rgba(96,150,255,.22)}
[data-theme="oscuro"] .btn.s:hover{background:rgba(0,113,206,.3)}
[data-theme="oscuro"] .seg{background:rgba(6,14,36,.6)}
[data-theme="oscuro"] .seg-op.on{background:linear-gradient(180deg,var(--brand-400),var(--brand-600));color:#fff}
[data-theme="oscuro"] .nav a{color:var(--text-2)}
[data-theme="oscuro"] .nav a:hover{background:rgba(0,113,206,.14);color:#fff}
[data-theme="oscuro"] .nav a.on{background:linear-gradient(135deg,var(--brand-600),var(--brand-900));color:#fff;box-shadow:0 6px 18px rgba(0,27,113,.5)}
[data-theme="oscuro"] .cyc{background:rgba(0,71,186,.18)}
[data-theme="oscuro"] .hchip{background:rgba(0,71,186,.2);color:#CFE0FF}
[data-theme="oscuro"] .bell:hover,[data-theme="oscuro"] .theme-toggle:hover{background:rgba(0,113,206,.18)}
[data-theme="oscuro"] .modal{background:linear-gradient(180deg,#13224A,#0C1736);color:var(--text-1)}
[data-theme="oscuro"] .modal-fondo{background:rgba(3,7,20,.66)}
[data-theme="oscuro"] .lz-tile{background:linear-gradient(160deg,rgba(0,113,206,.22),rgba(0,27,113,.34));border-color:rgba(96,150,255,.2)}
[data-theme="oscuro"] .lz-tile:hover{background:linear-gradient(160deg,rgba(0,113,206,.3),rgba(0,27,113,.42))}
[data-theme="oscuro"] .rp-tab{background:rgba(10,24,58,.5)}
[data-theme="oscuro"] .rp-tab.on{background:linear-gradient(135deg,var(--brand-600),var(--brand-900));color:#fff}
[data-theme="oscuro"] .rp-kpi{background:linear-gradient(160deg,rgba(0,113,206,.2),rgba(0,27,113,.32));border-color:rgba(96,150,255,.18)}
[data-theme="oscuro"] .rp-kv{color:#EAF0FC}
[data-theme="oscuro"] .tbl.cards tr{background:linear-gradient(180deg,rgba(20,34,72,.8),rgba(12,22,50,.9))}
[data-theme="oscuro"] .tbl.cards tfoot tr{background:rgba(0,71,186,.26)}
[data-theme="oscuro"] .tbl th{color:#9FB2DC}
[data-theme="oscuro"] .banner.i{background:linear-gradient(135deg,rgba(0,113,206,.24),rgba(0,27,113,.3));color:var(--text-1);border-color:rgba(96,150,255,.2)}
[data-theme="oscuro"] .dm-pv{background:rgba(0,113,206,.2);color:#DCE9F9}
[data-theme="oscuro"] .opt:hover{background:rgba(0,113,206,.14)}
[data-theme="oscuro"] .chip.ch-info{background:rgba(0,113,206,.22);color:#CFE0FF;border-color:rgba(96,150,255,.25)}
[data-theme="oscuro"] .av{box-shadow:0 0 0 2px rgba(96,150,255,.3)}
[data-theme="oscuro"] .brand .logo{filter:brightness(0) invert(1) opacity(.92)}
[data-theme="oscuro"] .sma{box-shadow:0 14px 40px rgba(0,27,113,.55)}

/* ===================== Pulido 3.1: combobox, móvil, movimiento ===================== */
/* Combobox de giro */
.gr-item.gr-off{opacity:.5;cursor:not-allowed}
.gr-item.gr-off:hover{background:transparent}
[data-theme="oscuro"] .giro-results{background:#1A2030;border-color:var(--glass-bd);box-shadow:0 14px 36px rgba(0,0,0,.5)}
[data-theme="oscuro"] .gr-item:hover{background:rgba(255,255,255,.06)}

/* Movimiento sutil y consistente */
.btn{transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease),color .16s var(--ease)}
.btn:active{transform:scale(.975)}
.card{transition:box-shadow .2s var(--ease)}
.inp,.search{transition:border-color .16s var(--ease),background .2s var(--ease),box-shadow .16s var(--ease)}
body,.hdr,.sidebar,.bbar,.modal{transition:background .28s var(--ease),border-color .28s var(--ease)}
.nav a,.seg-op,.rp-tab,.bell,.theme-toggle{transition:background .16s var(--ease),color .16s var(--ease)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Móvil: respiración y jerarquía */
@media (max-width:760px){
  .content{padding:18px 14px 150px}
  .ptitle h1{font-size:24px}
  .card{padding:16px 14px;border-radius:18px}
  .sma{padding:14px;gap:12px}
  .sma-t{font-size:15px}
  .sma-x{font-size:12.5px}
  /* El tope de 150 px cortaba el dato a media palabra. Se deja crecer con el espacio
     disponible y lo que se recorta es la palabra prescindible, no la fecha. */
  .hchip{font-size:12px;padding:6px 10px;min-width:0;white-space:nowrap}
  .solo-ancho{display:none}
  .rp-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .rp-tabs::-webkit-scrollbar{display:none}
  .rp-tab{white-space:nowrap;flex:none}
  .rp-kpis{grid-template-columns:repeat(2,1fr)}
  .rp-cmp-grid{grid-template-columns:repeat(2,1fr)}
  .rz-card{padding:22px 18px;border-radius:20px}
}

/* Encabezado de reporte en pantalla: más editorial */
.rp-kpi{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.rp-kpi:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}

/* Tablas: lectura editorial en pantalla */
.tbl thead th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3)}
@media screen{
  .tbl tbody tr:nth-child(even) td{background:rgba(0,71,186,.025)}
  [data-theme="oscuro"] .tbl tbody tr:nth-child(even) td{background:rgba(255,255,255,.025)}
}

/* ===================== Centro de Administración ===================== */
.adm-nav{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 10px;margin-bottom:8px}
.adm-nav::-webkit-scrollbar{display:none}
.adm-tab{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:none;text-decoration:none;
  font-size:13.5px;font-weight:600;color:var(--text-2);background:var(--glass);border:1px solid var(--glass-bd);
  border-radius:999px;padding:9px 14px;transition:background .16s var(--ease),color .16s var(--ease)}
.adm-tab .ic{width:15px;height:15px}
.adm-tab:hover{background:var(--brand-50);color:var(--brand-900)}
.adm-tab.on{background:linear-gradient(135deg,var(--brand-600),var(--brand-900));color:#fff;border-color:transparent}
[data-theme="oscuro"] .adm-tab:hover{background:rgba(255,255,255,.08);color:var(--text-1)}

.adm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.adm-kpi{display:flex;flex-direction:column;gap:2px;text-decoration:none;background:linear-gradient(180deg,rgba(255,255,255,.6),var(--brand-50));
  border:1px solid var(--glass-bd);border-radius:14px;padding:14px 14px;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
a.adm-kpi:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.adm-kpi b{font-size:22px;color:var(--brand-900)}
.adm-kpi span{font-size:12px;color:var(--text-3)}
[data-theme="oscuro"] .adm-kpi{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,71,186,.12))}
[data-theme="oscuro"] .adm-kpi b{color:var(--text-1)}

.adm-links{display:flex;gap:8px;flex-wrap:wrap}
.adm-log{padding:8px 0;border-bottom:1px solid var(--hairline);font-size:13px}
.adm-log:last-child{border-bottom:none}
.adm-log b{color:var(--text-1);font-weight:600}
.adm-log span{color:var(--text-2)}
.adm-log small{display:block;color:var(--text-3);font-size:11.5px;margin-top:1px}

.adm-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.adm-check input{margin-top:3px;accent-color:var(--brand-600);width:16px;height:16px;flex:none}
.adm-check b{font-size:13.5px;color:var(--text-1);font-weight:600;display:block}
.adm-check small{font-size:12px;color:var(--text-3);line-height:1.35;display:block}

.adm-flags{display:flex;flex-direction:column;gap:2px}
.adm-flag{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 4px;border-bottom:1px solid var(--hairline);cursor:pointer}
.adm-flag:last-child{border-bottom:none}
.adm-flag-t b{display:block;font-size:14px;color:var(--text-1)}
.adm-flag-t small{display:block;font-size:12.5px;color:var(--text-3);line-height:1.35;margin-top:1px}
.sw{position:relative;flex:none;width:46px;height:27px}
.sw input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;z-index:2;margin:0}
.sw i{position:absolute;inset:0;background:var(--hairline);border-radius:999px;transition:background .2s var(--ease)}
.sw i::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;background:#fff;border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.sw input:checked + i{background:var(--brand-600)}
.sw input:checked + i::after{transform:translateX(19px)}
.sw input:focus-visible + i{outline:2px solid var(--brand-400);outline-offset:2px}

.adm-menu{position:relative;display:inline-block}
.adm-menu summary{list-style:none;cursor:pointer}
.adm-menu summary::-webkit-details-marker{display:none}
.adm-menu-panel{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;background:var(--surface);
  border:1px solid var(--glass-bd);border-radius:14px;box-shadow:var(--sh-3);padding:8px;z-index:40}
[data-theme="oscuro"] .adm-menu-panel{background:#1A2030}
.adm-menu-i{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font:inherit;font-size:13.5px;color:var(--text-1);padding:9px 10px;border-radius:9px;text-decoration:none}
.adm-menu-i:hover{background:var(--brand-50)}
[data-theme="oscuro"] .adm-menu-i:hover{background:rgba(255,255,255,.06)}
.adm-menu-i.peligro{color:var(--bad)}
.adm-menu-sep{height:1px;background:var(--hairline);margin:6px 4px}
.adm-menu-f{padding:8px 10px}

.adm-perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px}
.adm-perm{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.adm-perm:hover{background:var(--brand-50)}
[data-theme="oscuro"] .adm-perm:hover{background:rgba(255,255,255,.05)}
.adm-perm input{margin-top:2px;accent-color:var(--brand-600);flex:none}
.adm-perm b{display:block;font-size:12.5px;font-weight:600;color:var(--text-1);font-family:monospace}
.adm-perm small{display:block;font-size:11.5px;color:var(--text-3);line-height:1.3}

.adm-provs{display:flex;flex-direction:column;gap:8px}
.adm-prov{border:1px solid var(--glass-bd);border-radius:14px;padding:12px 14px;background:var(--glass)}
.adm-prov summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.adm-prov summary::-webkit-details-marker{display:none}
.adm-prov-t b{display:block;font-size:14px;color:var(--text-1)}
.adm-prov-t small{display:block;font-size:12.5px;color:var(--text-3)}
.adm-api-doc{display:flex;flex-direction:column;gap:4px;background:var(--brand-50);border-radius:12px;padding:12px 14px}
.adm-api-doc code{font-size:12.5px;color:var(--brand-900);font-weight:700}
[data-theme="oscuro"] .adm-api-doc{background:rgba(0,71,186,.14)}
[data-theme="oscuro"] .adm-api-doc code{color:var(--text-1)}
.adm-api-doc small{color:var(--text-3);font-size:11.5px;margin-bottom:4px}

/* Fix 4.1: capa del buscador de giros + esquema de color nativo */
[data-theme="oscuro"]{color-scheme:dark}
.giro-results{z-index:140}
.card:focus-within{position:relative;z-index:90}

/* 4.1.1: elevación de tarjetas con desplegables (las .card crean stacking context por el blur) */
.card:focus-within{position:relative;z-index:120}
.card:has(.giro-results:not([hidden])),
.card:has(details[open]){position:relative;z-index:120}
.giro-results{z-index:200}
.adm-menu-panel{z-index:200}
/* Chip de versión (verificación de despliegue) */
/* La opacidad .8 degradaba el color a #8a8b8f: 3.40:1 sobre blanco, por debajo del
   mínimo. El texto atenuado se consigue con el token, no rebajando la opacidad. */
.ver-chip{display:block;text-align:center;font-size:10.5px;color:var(--text-3);padding:8px 0 2px;letter-spacing:.03em}

/* 4.1.2: chips de giro largos en el directorio */
.pcard .chip{white-space:normal;height:auto;min-height:26px;padding:5px 12px;line-height:1.25;max-width:100%;text-align:left}
.pcard .pb{min-width:0}
/* listas dentro de tarjetas sin padding: respetar el radio */
.tbl thead th:first-child{border-top-left-radius:calc(var(--r-m) - 1px)}
.tbl thead th:last-child{border-top-right-radius:calc(var(--r-m) - 1px)}

/* ===== Oscuro: legibilidad y accesibilidad total ===== */
[data-theme="oscuro"] .ptitle h1{color:#EAF0FC}
[data-theme="oscuro"] .rstep h2{color:#EAF0FC}
[data-theme="oscuro"] .kpi .num{color:#EAF0FC}
[data-theme="oscuro"] .cyc b{color:#CFE0FF}
[data-theme="oscuro"] .brand .prog,[data-theme="oscuro"] .brand .cop{color:#DCE9F9}
[data-theme="oscuro"] .pcard .ph{color:#CFE0FF}
[data-theme="oscuro"] .ch-brand{background:rgba(0,113,206,.24);color:#CFE0FF;border-color:rgba(96,150,255,.3)}
[data-theme="oscuro"] .rqa{background:linear-gradient(180deg,rgba(20,34,72,.85),rgba(12,22,50,.92))}
[data-theme="oscuro"] .rqa .prog{background:rgba(96,150,255,.18)}
[data-theme="oscuro"] .rqa-sino,[data-theme="oscuro"] .rqa-captura{background:rgba(0,71,186,.2);border-color:rgba(96,150,255,.28);color:#EAF0FC}
[data-theme="oscuro"] .rqa .resumen-item,[data-theme="oscuro"] .rqa .chip{color:#EAF0FC}
[data-theme="oscuro"] .modo .ctl .go{background:linear-gradient(180deg,var(--brand-400),var(--brand-600));color:#fff}
[data-theme="oscuro"] a{color:#7FB2FF}
[data-theme="oscuro"] .btn.p{box-shadow:0 8px 24px rgba(0,27,113,.5)}
[data-theme="oscuro"] :focus-visible{outline:2px solid #7FB2FF;outline-offset:2px}
[data-theme="oscuro"] ::selection{background:rgba(0,113,206,.45);color:#fff}
[data-theme="oscuro"] .psub{color:#9FB0D6}
[data-theme="oscuro"] .rev{background:rgba(0,71,186,.22);border-color:rgba(96,150,255,.3);color:#EAF0FC}
[data-theme="oscuro"] .rev b{color:#fff}
[data-theme="oscuro"] .hint{color:#9FB0D6}