/* Portal Estuma: barra lateral en azul corporativo + área de trabajo clara.
   Cada cliente aporta su propio color de marca (--marca) a monograma y gráficas.
   Estuma: azul #004F71, Montserrat (títulos), Source Sans 3 (texto), formas angulares (rombo del logotipo). */
:root{
  --bg:#F4F6F8; --surface:#FFFFFF; --surface-2:#EDF0F3;
  --line:#DFE4E9; --line-strong:#C6CDD6;
  --fg:#111827; --fg-2:#434E5C; --fg-3:#5F6B7A;
  --accent:#004F71; --accent-hover:#003A54; --accent-soft:#E6F2F7; --accent-fg:#FFFFFF;
  --side-bg:#003A54; --side-fg:#EAF3F8; --side-fg-2:#9FC3D5;
  --side-hover:rgba(255,255,255,.08); --side-active:rgba(255,255,255,.15); --side-line:rgba(255,255,255,.16);
  --hero-bg:#004F71;
  --ok:#17663F; --ok-soft:#E3F3EA;
  --warn:#8A5200; --warn-soft:#FDF0D8;
  --bad:#A8321D; --bad-soft:#FBE7E2;
  --paper:#FFFFFF; --paper-line:#D6DBE1;
  --shadow:0 1px 2px rgba(17,24,39,.06),0 10px 30px rgba(17,24,39,.12);
  --marca:#004F71;
  --f-tit:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --f-txt:'Source Sans 3',system-ui,'Segoe UI',Roboto,sans-serif;
  --r-s:4px; --r-m:8px; --r-l:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1620; --surface:#16212D; --surface-2:#1D2B3A;
    --line:#27374A; --line-strong:#3A4C61;
    --fg:#E8EDF2; --fg-2:#BAC5D0; --fg-3:#93A1B0;
    --accent:#63B8DE; --accent-hover:#8CCBE8; --accent-soft:rgba(99,184,222,.15); --accent-fg:#04202D;
    --side-bg:#0A121A; --side-fg:#E8EDF2; --side-fg-2:#8FA7B8;
    --hero-bg:#05293A;
    --ok:#5ACB92; --ok-soft:rgba(90,203,146,.15);
    --warn:#F2B955; --warn-soft:rgba(242,185,85,.15);
    --bad:#FF9480; --bad-soft:rgba(255,148,128,.15);
    --paper:#EEF1F4; --paper-line:#C9D0D8;
    --shadow:0 12px 34px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1620; --surface:#16212D; --surface-2:#1D2B3A;
  --line:#27374A; --line-strong:#3A4C61;
  --fg:#E8EDF2; --fg-2:#BAC5D0; --fg-3:#93A1B0;
  --accent:#63B8DE; --accent-hover:#8CCBE8; --accent-soft:rgba(99,184,222,.15); --accent-fg:#04202D;
  --side-bg:#0A121A; --side-fg:#E8EDF2; --side-fg-2:#8FA7B8;
  --hero-bg:#05293A;
  --ok:#5ACB92; --ok-soft:rgba(90,203,146,.15);
  --warn:#F2B955; --warn-soft:rgba(242,185,85,.15);
  --bad:#FF9480; --bad-soft:rgba(255,148,128,.15);
  --paper:#EEF1F4; --paper-line:#C9D0D8;
  --shadow:0 12px 34px rgba(0,0,0,.5);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-txt);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-family:var(--f-tit);text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.logo{height:26px;width:auto;display:block}

/* ---------- Botones y campos ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:var(--r-s);border:1px solid var(--line-strong);background:var(--surface);color:var(--fg);font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.btn:hover{background:var(--surface-2)}
.btn-primario{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn-primario:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-sm{min-height:34px;padding:5px 12px;font-size:13.5px}
.btn-block{width:100%}
.btn-peligro{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.btn-peligro:hover{background:var(--bad-soft)}
.enlace{background:none;border:0;padding:4px 0;color:var(--accent);font-weight:600;cursor:pointer;text-align:left;display:inline-flex;align-items:center;gap:6px}
.enlace:hover{text-decoration:underline}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--r-s);border:0;background:transparent;color:inherit;cursor:pointer;flex:none}
.icon-btn:hover{background:var(--side-hover)}
.campo{display:grid;gap:6px}
.campo>span{font-weight:600;font-size:13.5px}
input,select,textarea{width:100%;min-height:40px;padding:9px 12px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-s)}
textarea{resize:vertical;min-height:72px}
input[type="color"]{padding:3px;height:40px;cursor:pointer}
input[type="checkbox"]{width:auto;min-height:0}
.error{color:var(--bad);font-weight:600;font-size:14px}

/* ---------- Estructura ---------- */
.app{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:100%}
.topbar{display:none}
.side{background:var(--side-bg);color:var(--side-fg);position:sticky;top:env(safe-area-inset-top,0px);align-self:start;height:100vh;display:flex;flex-direction:column;overflow-y:auto}
.side-top{padding:22px 20px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.side-cerrar{display:none}
.side-cliente{margin:0 14px 14px;padding:12px;border:1px solid var(--side-line);border-radius:var(--r-m);display:flex;gap:12px;align-items:center}
.side-cliente b{display:block;font:600 14px/1.25 var(--f-tit);overflow-wrap:anywhere}
.side-cliente small{display:block;color:var(--side-fg-2);font-size:12.5px;margin-top:2px}
.mono{width:40px;height:40px;border-radius:var(--r-s);background:var(--marca);color:#fff;display:grid;place-items:center;font:700 14px/1 var(--f-tit);letter-spacing:.02em;flex:none}
.mono-lg{width:48px;height:48px;font-size:16px}
.volver{margin:0 14px 12px;display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--side-line);color:var(--side-fg);border-radius:var(--r-s);padding:8px 12px;font-weight:600;font-size:13.5px;cursor:pointer}
.volver:hover{background:var(--side-hover)}
.volver .ic{transform:rotate(180deg)}
.etiqueta-modo{margin:0 14px 10px;font:600 11px/1 var(--f-tit);letter-spacing:.14em;text-transform:uppercase;color:var(--side-fg-2)}
.side nav{padding:4px 10px;display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:var(--r-s);color:var(--side-fg);background:none;border:0;font:500 14.5px/1.25 var(--f-txt);text-align:left;cursor:pointer}
.nav-item:hover{background:var(--side-hover)}
.nav-item[aria-current="page"]{background:var(--side-active);font-weight:600}
.nav-item .num{font:600 12px/1 var(--f-tit);color:var(--side-fg-2);width:20px;flex:none;font-variant-numeric:tabular-nums}
.nav-item[aria-current="page"] .num{color:#fff}
.nav-item .ic{color:var(--side-fg-2)}
.badge{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:#F2B955;color:#2A1B00;font:700 12px/22px var(--f-txt);text-align:center}
.side-aviso{margin:14px 14px 0;display:flex;gap:10px;color:var(--side-fg-2);font-size:12.5px;line-height:1.45}
.side-aviso .ic{margin-top:1px}
.side-bottom{margin-top:auto;padding:14px;border-top:1px solid var(--side-line);display:flex;gap:10px;align-items:center}
.side-bottom div{min-width:0;flex:1}
.side-bottom b{display:block;font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.side-bottom small{color:var(--side-fg-2);font-size:12.5px}
.av{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;font:700 11.5px/1 var(--f-tit);flex:none}
.av-side{background:rgba(255,255,255,.16);color:#fff;width:36px;height:36px}
.av.cli{background:var(--marca);color:#fff}
.main{padding:32px clamp(16px,4vw,48px) 72px;min-width:0}
.main-in{max-width:1040px}
.nota{display:flex;align-items:flex-start;gap:10px;padding:10px 12px 10px 14px;border:1px dashed var(--line-strong);border-radius:var(--r-m);color:var(--fg-2);font-size:13.5px;margin-bottom:26px}
.nota span{flex:1}
.nota .icon-btn{width:28px;height:28px;margin:-3px 0}
.nota .icon-btn:hover{background:var(--surface-2)}

/* ---------- Cabecera de página ---------- */
.cab{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;justify-content:space-between}
.cab>div{min-width:0}
.eyebrow{font:600 12px/1 var(--f-tit);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:12px;font-variant-numeric:tabular-nums}
h1{font-size:clamp(1.65rem,1.2rem + 1.7vw,2.25rem);line-height:1.15;font-weight:700;letter-spacing:-.01em}
.lede{color:var(--fg-2);max-width:64ch;margin-top:10px}
.incluye{margin-top:14px;color:var(--fg-2);font-size:14px;max-width:80ch}
.incluye b{color:var(--fg)}

/* ---------- Filtros ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 16px}
.chip{display:inline-flex;align-items:center;min-height:34px;padding:6px 12px;border:1px solid var(--line-strong);border-radius:var(--r-s);background:var(--surface);color:var(--fg);font:600 13px/1.2 var(--f-txt);cursor:pointer}
.chip:hover{background:var(--surface-2)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.chip .n{margin-left:7px;opacity:.75;font-variant-numeric:tabular-nums}

/* ---------- Estados ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:var(--r-s);font:600 12.5px/1.2 var(--f-txt);white-space:nowrap}
.pill .ic{width:14px;height:14px}
.pill-curso{background:var(--accent-soft);color:var(--accent)}
.pill-pendiente{background:var(--warn-soft);color:var(--warn)}
.pill-cambios{background:var(--bad-soft);color:var(--bad)}
.pill-aprobado{background:var(--ok-soft);color:var(--ok)}
.pill-entregado{background:var(--surface-2);color:var(--fg-2)}

/* ---------- Acciones ---------- */
.accion{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);margin-bottom:12px;overflow:hidden}
.accion[data-estado="pendiente"]{border-color:color-mix(in srgb,var(--warn) 50%,var(--line))}
.accion-cab{appearance:none;background:none;border:0;width:100%;text-align:left;cursor:pointer;padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto 20px;grid-template-areas:"main pill chev";gap:8px 14px;align-items:center}
.accion-cab:hover{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.accion-cab:focus-visible{outline-offset:-3px}
.accion-main{grid-area:main;min-width:0}
.accion-cab .pill{grid-area:pill}
.accion-cab .chev{grid-area:chev}
.accion-tit{display:block;font:600 16px/1.3 var(--f-tit);overflow-wrap:anywhere}
.accion-meta{display:block;color:var(--fg-3);font-size:13.5px;margin-top:4px}
.chev{color:var(--fg-3);transition:transform .2s}
[aria-expanded="true"] .chev{transform:rotate(180deg)}
.accion-cuerpo{border-top:1px solid var(--line);padding:18px;display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
.accion-cuerpo>div{min-width:0}
.accion-cuerpo h3{font:600 12px/1 var(--f-tit);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin:24px 0 12px}
.accion-cuerpo h3:first-child{margin-top:0}
.desc{color:var(--fg);max-width:70ch}
.serv-tag{display:block;margin-top:10px;color:var(--fg-3);font-size:13.5px}
.aprobacion{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);border-radius:var(--r-m);padding:12px 14px;margin:16px 0 0}
.aprobacion.info{background:var(--surface-2);border-color:var(--line)}
.aprobacion strong{display:block}
.aprobacion span{color:var(--fg-2);font-size:14px}
.aprobacion .botones{display:flex;flex-wrap:wrap;gap:8px}
.cambios-form{flex-basis:100%;display:grid;gap:10px}
.botones{display:flex;flex-wrap:wrap;gap:8px}
.archivos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.archivo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s)}
.ext{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-s);background:var(--surface-2);color:var(--fg-2);font:700 10.5px/1 var(--f-tit);letter-spacing:.04em}
.archivo-n{display:block;font-weight:600;overflow-wrap:anywhere}
.archivo-m{display:block;color:var(--fg-3);font-size:13px}
.vacio-txt{color:var(--fg-3);font-size:14px}

/* Conversación */
.hilo{display:grid;gap:14px;margin-bottom:14px}
.com{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px}
.com-cab{display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline}
.com-quien{font-weight:700}
.com-ts{color:var(--fg-3);font-size:12.5px}
.com-txt{margin-top:2px;overflow-wrap:anywhere}
.com-sis{display:flex;gap:8px;align-items:center;color:var(--ok);font-size:13px;font-weight:600}
.com-form{display:grid;gap:8px;justify-items:start}

/* Controles de agencia */
.admin-ctl{margin-top:20px;padding:14px;border:1px dashed var(--line-strong);border-radius:var(--r-m);display:grid;gap:12px}
.admin-ctl .fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.admin-tit{font:600 12px/1 var(--f-tit);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.file-btn:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Resultados y gráfica ---------- */
.res{margin-top:24px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:18px}
.kpi{padding:12px;border:1px solid var(--line);border-radius:var(--r-s)}
.kpi .v{font:700 24px/1.1 var(--f-tit);overflow-wrap:anywhere}
.kpi .l{font-size:13px;color:var(--fg-2);margin-top:4px}
.kpi .d{font-size:12.5px;font-weight:700;margin-top:6px;color:var(--ok)}
.kpi .d.malo{color:var(--bad)}
.vs{color:var(--fg-3);font-size:13px;margin:-4px 0 12px}
.grafica-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px;margin-bottom:6px}
.grafica-tit{font-weight:700}
.grafica-lienzo{position:relative}
.grafica-svg{display:block;width:100%;height:auto;overflow:visible}
.grafica-svg .gl{stroke:var(--line);stroke-width:1}
.grafica-svg .base{stroke:var(--line-strong);stroke-width:1}
.grafica-svg .ax{fill:var(--fg-3);font:12px var(--f-txt)}
.grafica-svg .val{fill:var(--fg);font:700 12.5px var(--f-txt)}
.grafica-svg .bar{fill:var(--marca);transition:opacity .12s}
.grafica-svg .bar.dim{opacity:.4}
.grafica-svg .hit{fill:transparent;cursor:default}
.grafica-svg .hit:focus-visible{outline:2px solid var(--accent)}
.tip{position:absolute;transform:translate(-50%,calc(-100% - 10px));background:var(--fg);color:var(--bg);padding:6px 10px;border-radius:var(--r-s);font-size:13px;white-space:nowrap;pointer-events:none;box-shadow:var(--shadow);z-index:2}
.tip b{margin-right:8px}
.tabla-mini{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabla-mini th,.tabla-mini td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.tabla-mini td:last-child,.tabla-mini th:last-child{text-align:right}
.tabla-mini th{font-size:12.5px;color:var(--fg-3);font-weight:600}

/* ---------- Gestión (01) ---------- */
.resumen{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:30px}
.resumen .grande{font:700 clamp(2.2rem,1.6rem + 2vw,3rem)/1 var(--f-tit)}
.resumen span{color:var(--fg-2)}
.resumen .grande{color:var(--fg)}
.mapa{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:18px 20px;margin:20px 0 4px}
.rombos{display:flex;gap:9px;padding:4px 3px}
.rombo{display:block;width:12px;height:12px;transform:rotate(45deg);border:1.5px solid var(--fg-3);border-radius:1px}
.rombo.on{background:var(--accent);border-color:var(--accent)}
.mapa-n{margin-top:8px;font-size:12.5px;color:var(--fg-2)}
.mapa-n b{font-family:var(--f-tit);color:var(--fg);font-variant-numeric:tabular-nums}
.grupo{margin-top:30px}
.grupo-cab{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--line-strong);padding-bottom:10px}
.grupo-cab h2{font-size:1.1rem;font-weight:600}
.grupo-cab .num{font:600 12px/1 var(--f-tit);color:var(--fg-3);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.grupo-cab small{margin-left:auto;color:var(--fg-3);font-size:13px}
.serv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:8px 24px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.serv-n{font-weight:700}
.serv-d{color:var(--fg-2);font-size:14px;max-width:60ch}
.serv-est{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 12px}
.serv-sub{color:var(--fg-3);font-size:13px}
.vacio{padding:34px 22px;border:1px dashed var(--line-strong);border-radius:var(--r-m);color:var(--fg-2);display:grid;gap:12px;justify-items:start}
.vacio b{color:var(--fg);font-family:var(--f-tit);font-weight:600}

/* Interruptor */
.sw{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;font-size:14px;position:relative}
.sw input{position:absolute;opacity:0;width:38px;height:22px;margin:0;cursor:pointer}
.sw-pista{width:38px;height:22px;border-radius:11px;background:var(--line-strong);position:relative;transition:background .15s;flex:none}
.sw-pista::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.sw input:checked+.sw-pista{background:var(--accent)}
.sw input:checked+.sw-pista::after{transform:translateX(16px)}
.sw input:focus-visible+.sw-pista{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Administración ---------- */
.clientes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;margin-top:26px}
.cli-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:18px;display:grid;gap:16px;align-content:start}
.cli-cab{display:flex;gap:14px;align-items:center}
.cli-cab b{display:block;font:600 16px/1.25 var(--f-tit)}
.cli-cab small{color:var(--fg-3);font-size:13px}
.cli-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.cli-stats div{min-width:0}
.cli-stats dt{color:var(--fg-3);font-size:12.5px}
.cli-stats dd{margin:2px 0 0;font:700 20px/1.2 var(--f-tit);font-variant-numeric:tabular-nums}
.tabla-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);margin-top:26px}
.tabla-wrap table{border-collapse:collapse;width:100%;min-width:760px}
.tabla-wrap th{font:600 11.5px/1 var(--f-tit);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);text-align:left;padding:14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tabla-wrap td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabla-wrap tr:last-child td{border-bottom:0}
.usr{display:flex;gap:10px;align-items:center}
.usr b{display:block;line-height:1.25}
.usr small{color:var(--fg-3)}
.num-tab{font-variant-numeric:tabular-nums;white-space:nowrap}
.acciones-fila{display:flex;flex-wrap:wrap;gap:6px}
.act-lista{list-style:none;margin:26px 0 0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m)}
.act-lista li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:4px 16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.act-lista li:last-child{border-bottom:0}
.act-ts{color:var(--fg-3);font-size:13px;font-variant-numeric:tabular-nums}
.act-cli{color:var(--fg-3)}

/* ---------- Modal, aviso ---------- */
.velo{position:fixed;inset:0;background:rgba(5,12,18,.58);display:grid;place-items:center;padding:16px;z-index:50;overflow:auto}
.modal{background:var(--surface);color:var(--fg);border-radius:var(--r-l);width:min(540px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px;box-shadow:var(--shadow)}
.modal-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.modal-cab h2{font-size:1.2rem;font-weight:700}
.modal-cab p{color:var(--fg-3);font-size:13.5px;margin-top:4px;overflow-wrap:anywhere}
.modal-cab .icon-btn:hover{background:var(--surface-2)}
.modal form{display:grid;gap:14px}
.modal .fila2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.modal-pie{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:4px}
.prev{aspect-ratio:4/3;max-width:100%;border-radius:var(--r-m);display:grid;place-items:center;overflow:hidden;position:relative;margin-bottom:12px}
.prev-img{background:var(--marca)}
.prev-img svg{position:absolute;inset:0;width:100%;height:100%}
.prev-pdf,.prev-gen{background:var(--surface-2)}
.hoja{width:58%;aspect-ratio:3/4;background:var(--paper);border-radius:var(--r-s);padding:12% 11%;display:grid;gap:7px;align-content:start;box-shadow:var(--shadow)}
.hoja i{display:block;height:6px;background:var(--paper-line);border-radius:2px}
.hoja i:nth-child(odd){width:86%}
.hoja b{display:block;height:14px;width:55%;background:var(--marca);border-radius:2px;margin-bottom:6px}
.prev-nota{color:var(--fg-3);font-size:13px;margin-bottom:14px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:11px 16px;border-radius:var(--r-s);font-weight:600;z-index:60;max-width:calc(100vw - 32px);box-shadow:var(--shadow)}

/* ---------- Acceso ---------- */
.login{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100%}
.login-marca{position:relative;background:var(--hero-bg);color:#fff;padding:36px clamp(24px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:48px;overflow:hidden}
.patron{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(160deg,transparent 5%,#000 70%);mask-image:linear-gradient(160deg,transparent 5%,#000 70%)}
.login-marca>*:not(.patron){position:relative}
.login-marca .logo{height:30px;align-self:flex-start}
.login-marca .eyebrow{color:rgba(255,255,255,.72)}
.login-marca h1{font-size:clamp(1.9rem,1.2rem + 2.4vw,3.1rem);max-width:15ch;line-height:1.1}
.login-marca p.sub{margin-top:16px;max-width:42ch;color:rgba(255,255,255,.86);font-size:16px}
.login-form{display:grid;place-items:center;padding:40px clamp(16px,5vw,56px)}
.tarjeta{width:min(100%,400px)}
.tarjeta h2{font-size:1.5rem;font-weight:700;margin-bottom:8px}
.tarjeta .sub{color:var(--fg-2);margin-bottom:22px}
.tarjeta form{display:grid;gap:16px}
.codigo{font:700 28px/1 var(--f-tit);letter-spacing:.5em;text-align:center;padding-left:.5em;min-height:56px}
.aviso-proto{margin-top:22px;padding:10px 12px;background:var(--surface-2);border-radius:var(--r-s);color:var(--fg-2);font-size:13.5px;display:flex;gap:10px}
.aviso-proto .ic{margin-top:2px}
.demo{margin-top:26px;border-top:1px solid var(--line);padding-top:18px;display:grid;gap:8px}
.demo h3{font:600 12px/1 var(--f-tit);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:6px}
.demo-btn{display:flex;gap:12px;align-items:center;width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-s);background:var(--surface);cursor:pointer;text-align:left}
.demo-btn:hover{background:var(--surface-2)}
.demo-btn b{display:block;line-height:1.25}
.demo-btn small{color:var(--fg-3);font-size:13px}
.demo-btn .mono{width:34px;height:34px;font-size:12px}

/* ---------- Pantallas estrechas / anchas ---------- */
@media (min-width:1180px){
  .accion-cuerpo{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .topbar{display:flex;align-items:center;gap:12px;background:var(--side-bg);color:var(--side-fg);padding:8px 12px 8px 8px;position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
  .topbar .logo{height:22px}
  .topbar-c{margin-left:auto;font:600 13px/1.2 var(--f-tit);color:var(--side-fg-2);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .side{position:fixed;z-index:40;top:0;left:0;bottom:0;height:100%;width:min(86vw,320px);transform:translateX(-105%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
  .side.abierta{transform:none;visibility:visible;transition:transform .22s ease,visibility 0s}
  .side-cerrar{display:inline-grid}
  .velo-nav{position:fixed;inset:0;background:rgba(5,12,18,.55);z-index:30}
  .main{padding-top:24px}
  .login{grid-template-columns:minmax(0,1fr)}
  .login-marca{gap:28px;padding-block:28px}
  .login-marca p.sub{display:none}
  .login-marca h1{max-width:none}
  .login-form{place-items:start center;padding-block:28px 48px}
}
@media (max-width:640px){
  .accion-cab{grid-template-columns:minmax(0,1fr) 20px;grid-template-areas:"main chev" "pill chev"}
  .accion-cab .pill{justify-self:start}
  .accion-cuerpo{padding:16px}
  .serv{grid-template-columns:minmax(0,1fr)}
  .serv-est{justify-content:flex-start}
  .act-lista li{grid-template-columns:minmax(0,1fr)}
  .cli-stats dd{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- Cliente: servicios sin contratar y secciones bloqueadas ---------- */
.serv-incl{color:var(--fg-3);font-size:13.5px;margin-top:6px;max-width:70ch}
.serv-incl b{color:var(--fg-2)}
.serv-bloq{padding-block:12px}
.serv-bloq .serv-n{display:flex;align-items:center;gap:8px;color:var(--fg-2);font-weight:600}
.serv-bloq .serv-n .ic{width:15px;height:15px;color:var(--fg-3)}
.nav-bloq{color:var(--side-fg-2)}
.nav-bloq .cand{margin-left:auto;display:grid}
.nav-bloq .cand .ic{width:15px;height:15px}
.bloqueo{display:flex;gap:14px;align-items:flex-start;margin:26px 0 8px;padding:16px 18px;border:1px dashed var(--line-strong);border-radius:var(--r-m);color:var(--fg-2)}
.bloqueo .ic{margin-top:3px;color:var(--fg-3)}
.bloqueo b{display:block;color:var(--fg);font-family:var(--f-tit);font-weight:600;margin-bottom:4px}

/* ---------- Catálogo ---------- */
.cat-total{margin-top:22px;color:var(--fg-3);font-size:13.5px}
.grupo-cab+.accion{margin-top:14px}
.accion-cab .cat-res{grid-area:pill;color:var(--fg-3);font-size:13px;text-align:right}
.cat-cuerpo{border-top:1px solid var(--line);padding:18px;display:grid;gap:14px}
.sub-lista{display:grid;margin-top:4px}
.sub-cab,.sub-fila{display:grid;grid-template-columns:minmax(0,1fr) 124px 104px 86px 86px 148px;gap:8px 14px;align-items:center}
.sub-cab{padding-bottom:8px;border-bottom:1px solid var(--line-strong);font:600 11.5px/1 var(--f-tit);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.sub-fila{padding:12px 0;border-bottom:1px solid var(--line)}
.sub-main{min-width:0}
.sub-main b{display:block}
.sub-main span{display:block;color:var(--fg-3);font-size:13.5px}
.sub-num{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.sub-fila .lab,.lin .lab{display:none}
.sub-num .lab{font-weight:400}

/* ---------- Presupuestos ---------- */
.ic-atras{transform:rotate(180deg)}
.pres-acc{align-items:flex-end}
.pres-acc .campo{min-width:150px}
.pres-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;margin-top:26px}
.pres-main{display:grid;gap:20px;min-width:0}
.pres-bloque{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:18px;display:grid;gap:14px;min-width:0}
.pres-bloque>h2{font:600 12px/1 var(--f-tit);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.fila2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.fila5{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.pres-pick{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.pres-pick .campo{flex:1 1 260px;min-width:0}
.lineas{display:grid;margin-top:2px}
.lin-cab,.lin{display:grid;grid-template-columns:minmax(0,1fr) 112px 70px 104px 84px 104px 36px;gap:8px 10px;align-items:center}
.lin-cab{padding-bottom:8px;border-bottom:1px solid var(--line-strong);font:600 11.5px/1 var(--f-tit);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.lin-cab .r{text-align:right}
.lin{padding:12px 0;border-bottom:1px solid var(--line)}
.lin>label,.lin>div{min-width:0}
.lin-con b{display:block;overflow-wrap:anywhere}
.lin-con small{display:block;color:var(--fg-3);font-size:13px}
.lin input,.lin select{min-height:36px;padding:6px 8px}
.lin-sub{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.lin-sub output{display:block}
.lin .icon-btn{width:36px;height:36px}
.lin .icon-btn:hover{background:var(--surface-2)}
.pres-tot{position:sticky;top:calc(16px + env(safe-area-inset-top,0px));min-width:0}
.tot-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:18px;display:grid;gap:20px}
.tot-card>h2{font:600 12px/1 var(--f-tit);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.tot-bloque h3{font:600 14px/1.2 var(--f-tit);margin-bottom:10px}
.tot-bloque dl{margin:0;display:grid;gap:6px}
.tot-fila{display:flex;justify-content:space-between;gap:12px;color:var(--fg-2);font-size:14px}
.tot-fila dt,.tot-fila dd{margin:0}
.tot-fila dd{font-variant-numeric:tabular-nums}
.tot-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-strong)}
.tot-total b{font:700 1.6rem/1.1 var(--f-tit);overflow-wrap:anywhere;text-align:right}
.tot-pie{display:grid;gap:6px;padding-top:16px;border-top:1px solid var(--line);color:var(--fg-2);font-size:13.5px}
.tot-pie b{color:var(--fg)}
#copia-txt{font:13.5px/1.5 var(--f-txt);white-space:pre-wrap}

@media (max-width:1100px){
  .pres-grid{grid-template-columns:minmax(0,1fr)}
  .pres-tot{position:static}
}
.sub-lista,.lineas{container-type:inline-size}
@container (max-width:720px){
  .sub-cab,.lin-cab{display:none}
  .sub-fila{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sub-main,.sub-fila .acciones-fila{grid-column:1/-1}
  .sub-fila .lab,.lin .lab{display:block;color:var(--fg-3);font-size:12px;font-weight:600;margin-bottom:2px}
  .lin{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lin-con{grid-column:1/-1}
  .lin-sub{text-align:left}
  .lin .icon-btn{justify-self:end;align-self:end}
}

.acc-nw{flex-wrap:nowrap}
.tabla-wrap td .acc-nw .btn{white-space:nowrap}
.col-para{min-width:210px}

/* ===== Activación de la cuenta (QR y códigos de respaldo) ===== */
.paso-t{margin:18px 0 8px;font-size:14px;color:var(--fg)}
.paso-t b{color:var(--accent)}
.qr{width:176px;max-width:100%;margin:6px auto 4px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-m)}
.qr svg{display:block;width:100%;height:auto}
.clave-2fa{margin:8px 0 0;text-align:center}
.clave-2fa small{display:block;color:var(--fg-3);margin-bottom:4px}
.clave-2fa code,.respaldo code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;background:var(--surface-2);padding:3px 8px;border-radius:6px;word-break:break-all}
.respaldo{list-style:none;margin:18px 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.respaldo li{text-align:center}
#enlace-txt{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.clave-2fa code{display:block;font-size:13px;letter-spacing:.04em;line-height:1.7;margin:2px 0;word-spacing:.15em}

/* ===== Configuración · Impuestos ===== */
.conf-sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:22px 24px;margin-top:8px}
.conf-sec>h2{margin:0 0 4px;font-size:18px}
.imp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:18px}
.imp-bloque{border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px}
.imp-bloque h3{margin:0 0 2px;font-size:15px}
.imp-bloque .lede{margin:0 0 12px;font-size:13.5px}
.imp-lista{list-style:none;margin:0 0 14px;padding:0}
.imp-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--line)}
.imp-fila:first-child{border-top:0}
.imp-v{font-family:var(--f-tit);font-weight:700;font-size:17px}
.imp-der{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.imp-vacio{color:var(--fg-3);font-size:14px;padding:6px 0}
.imp-alta{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.imp-alta .campo{flex:1 1 150px;margin:0}

/* ===== Fondo blanco en el portal del cliente ===== */
body[data-rol="cliente"]{--bg:#FFFFFF;--surface-2:#F4F6F8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body[data-rol="cliente"]{--bg:#0E1620;--surface-2:#1D2B3A}}

/* ===== 01 Gestión en fichas ===== */
.fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:16px}
.ficha{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:18px 18px 16px;box-shadow:0 1px 2px rgba(17,24,39,.04);transition:box-shadow .15s,transform .15s,border-color .15s;overflow:hidden}
.ficha:hover{box-shadow:0 8px 24px rgba(17,24,39,.09);transform:translateY(-2px);border-color:var(--line-strong)}
.ficha.on::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--accent)}
.ficha-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px}
.ficha-n{font:600 12px/1 var(--f-tit);letter-spacing:.1em;color:var(--fg-3);font-variant-numeric:tabular-nums}
.ficha .serv-n{font:600 1.02rem/1.3 var(--f-tit);margin:2px 0 0}
.ficha .serv-d{margin:0;color:var(--fg-2);font-size:14px;line-height:1.5}
.ficha .serv-incl{margin-top:4px;font-size:12.5px}
.ficha .serv-incl b{display:block;margin-bottom:5px;font:600 11px/1 var(--f-tit);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.ficha-incl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ficha-incl li{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600}
.ficha-pie{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;border-top:1px solid var(--line)}
.ficha:not(.on):not(.ficha-bloq) .ficha-pie,.ficha-bloq .ficha-pie{justify-content:flex-start}
.ficha-bloq{background:var(--surface-2);box-shadow:none;border-style:dashed}
.ficha-bloq:hover{transform:none;box-shadow:none}
.ficha-bloq .serv-n{color:var(--fg-2)}
.ficha-bloq .ficha-cab .ic{width:16px;height:16px;color:var(--fg-3)}
.ficha-bloq .ficha-pie{border-top:0;padding-top:6px}
@media (prefers-reduced-motion:reduce){.ficha{transition:none}.ficha:hover{transform:none}}

.fichas-mini{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));align-items:start;gap:12px;margin-top:12px}
.fichas-mini .ficha-bloq{padding:14px 16px 12px;gap:6px}

/* Subservicios contratados por separado */
.ficha-incl li.off{background:transparent;border:1px dashed var(--line-strong);color:var(--fg-3);font-weight:500}
.ficha-incl li .ic{width:11px;height:11px;margin-right:4px;vertical-align:-1px}
.sub-checks{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sub-chk{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer;color:var(--fg)}
.sub-chk input{width:16px;height:16px;accent-color:var(--accent);flex:none}
.sub-chk small{margin-left:auto;color:var(--fg-3);white-space:nowrap}

.sub-fila-c{display:flex;align-items:center;gap:6px}
.sub-fila-c .sub-chk{flex:1;min-width:0}
.sub-fila-c .icon-btn{flex:none;width:28px;height:28px}
.sub-fila-c .icon-btn .ic{width:14px;height:14px}
.sub-pers{font-style:normal;font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:1px 7px;margin-left:4px}
.ficha-incl li.con-d{flex-basis:100%;border-radius:12px;padding:6px 12px}
.ficha-incl li.con-d small{display:block;font-weight:400;font-size:12px;color:var(--fg-2);margin-top:2px}

.sub-bloque{border-bottom:1px solid var(--line)}
.sub-bloque:last-child{border-bottom:0}
.sub-bloque .sub-fila{border-bottom:0;padding-bottom:6px}
.el-bloque{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;padding:0 0 12px 18px}
.el-tit{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);padding-top:6px}
.el-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;flex:1 1 280px}
.el-lista li{display:flex;align-items:center;gap:2px;background:var(--surface-2);border-radius:var(--r-s);padding:3px 4px 3px 10px;font-size:13px}
.el-t small{display:block;font-size:12px;color:var(--fg-2);font-weight:400}
.el-lista .icon-btn{width:24px;height:24px}
.el-lista .icon-btn .ic{width:12px;height:12px}
.el-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.el-chips span{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:12px;font-weight:500;color:var(--fg-2)}

.el-precio{font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap;padding:0 4px}

.sub-item{list-style:none}
.el-checks{list-style:none;margin:2px 0 8px 25px;padding:0 0 0 12px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:5px}
.el-checks .sub-chk{font-size:13px;color:var(--fg-2)}
.el-chips span.off{border-style:dashed;color:var(--fg-3);background:transparent}
.el-chips span.off .ic{width:10px;height:10px;margin-right:3px;vertical-align:-1px}