/* =====================================================================
   Águila · Agencia de Marketing y Publicidad
   Modo oscuro: #1B1B1B principal · #D8D8D8 secundario
   Modo claro:  #D8D8D8 principal · #1B1B1B secundario
   ===================================================================== */
@property --bx{syntax:'<length>';inherits:true;initial-value:0px}
@property --by{syntax:'<length>';inherits:true;initial-value:0px}
:root{
  --bg:#141414; --s1:#1b1b1b; --s2:#202020; --s3:#262626; --s4:#2c2c2c; --s5:#363636;
  --line:#2a2a2a; --line2:#242424; --line3:#383838;
  --fg:#ededeb; --soft:#d8d8d8; --soft-h:#ececea; --muted:#8f8f8b; --muted2:#bdbdba;
  --brand:#1b1b1b;
  --pop:#222222; --pop-line:#323232; --input:#161616; --input-line:#2e2e2e;
  --sombra:rgba(0,0,0,.5); --velo:rgba(0,0,0,.6); --tenue:rgba(255,255,255,.07); --brillo:rgba(216,216,216,.1);
  --sim-bg:#101010;
  /* Semáforo translúcido */
  --ok:#8fc4a6; --okbg:rgba(108,192,149,.13);
  --warn:#d9b071; --warnbg:rgba(224,163,90,.13);
  --bad:#d99085; --badbg:rgba(226,121,106,.13); --badline:rgba(226,121,106,.35);
  --info:#aebcd8; --infobg:rgba(157,183,232,.12);
  --idle:#a9a9a5; --idlebg:rgba(255,255,255,.06);
  --r:18px; --tabh:64px;
  --safet:env(safe-area-inset-top,0px);
  --safeb:env(safe-area-inset-bottom,0px);
  --ios:0px; /* compensación de la app instalada en iPhone (se mide en app.js) */
  --f:"Urbanist","Helvetica Neue",Arial,sans-serif;
  --suave:cubic-bezier(.25,.9,.3,1); --rebote:cubic-bezier(.34,1.32,.5,1);
  color-scheme:dark;
}
:root[data-tema="claro"]{
  --bg:#e4e4e3; --s1:#d8d8d8; --s2:#d0d0cf; --s3:#c8c8c7; --s4:#bfbfbe; --s5:#b4b4b3;
  --line:#c4c4c3; --line2:#cbcbca; --line3:#a8a8a7;
  --fg:#1b1b1b; --soft:#1b1b1b; --soft-h:#333333; --muted:#5d5d5a; --muted2:#3c3c3a;
  --brand:#d8d8d8;
  --pop:#dddddc; --pop-line:#c0c0bf; --input:#e9e9e8; --input-line:#b9b9b8;
  --sombra:rgba(0,0,0,.16); --velo:rgba(20,20,20,.35); --tenue:rgba(0,0,0,.07); --brillo:rgba(255,255,255,.45);
  --sim-bg:#cfcfce;
  --ok:#2c7150; --okbg:rgba(44,113,80,.14);
  --warn:#86560f; --warnbg:rgba(176,116,30,.17);
  --bad:#a23e2d; --badbg:rgba(190,70,50,.14); --badline:rgba(162,62,45,.45);
  --info:#3a5390; --infobg:rgba(70,100,170,.15);
  --idle:#4e4e4c; --idlebg:rgba(0,0,0,.07);
  color-scheme:light;
}
*{box-sizing:border-box}
/* El body crece con el contenido: así el encabezado fijo (sticky) nunca se va al deslizar mucho */
html{height:100%}
html,body{margin:0;background:var(--bg);overflow-x:clip}
body{min-height:100%}
html{min-height:calc(100% + var(--ios))}
/* App instalada en iPhone: si la página es más corta que la pantalla, iOS sube la barra inferior la altura de la
   barra de estado. Con la página siempre un poco más alta que la pantalla, la barra queda en su sitio. */
html.app-ios,html.app-ios body{min-height:calc(100% + max(var(--ios), env(safe-area-inset-top,0px)))}
body{color:var(--fg);font:15px/1.5 var(--f);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:background-color .4s ease,color .4s ease}
input,textarea,select{-webkit-user-select:text;user-select:text}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--soft);outline-offset:2px}
[hidden]{display:none!important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--s4);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Logotipo (toma el color del tema) ---------- */
.logo{display:block;flex:none;height:32px;aspect-ratio:872/250;background:var(--soft);-webkit-mask:url(../img/logo.svg) center/contain no-repeat;mask:url(../img/logo.svg) center/contain no-repeat}

/* ---------- Esqueleto con destello (carga) ---------- */
.sk{display:block;background:var(--s1);border:1px solid var(--line2);border-radius:14px;position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,var(--brillo) 50%,transparent 80%);transform:translateX(-100%);animation:barrido 1.5s ease-in-out infinite;animation-delay:calc(var(--d,0)*.07s)}
.sk.t{border:0;border-radius:8px;background:var(--s2)}
.sk-g{display:grid;gap:14px}
.sk-k{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.sk-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.dot{display:block;border-radius:50%;background:var(--tenue);animation:destello 1.6s ease-in-out infinite;animation-delay:calc(var(--i,0)*.14s)}
@keyframes destello{0%,100%{background:var(--tenue)}18%{background:var(--brillo);box-shadow:0 0 14px var(--brillo)}40%{background:var(--tenue)}}
@keyframes barrido{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- Carga inicial ---------- */
#carga{position:fixed;inset:0;z-index:90;background:var(--bg);transition:opacity .5s ease}
#carga.fuera{opacity:0;pointer-events:none}
#carga .sk-top{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + var(--safet)) 20px 14px;height:calc(74px + var(--safet))}
#carga .sk-top .logo{opacity:.9}
#carga .sk-rail{position:absolute;left:14px;top:calc(94px + var(--safet));width:58px;padding:16px 0;border-radius:30px;background:var(--s1);border:1px solid var(--line2);display:flex;flex-direction:column;align-items:center;gap:18px}
#carga .sk-rail .dot{width:24px;height:24px}
#carga .sk-main{position:absolute;left:112px;right:24px;top:calc(96px + var(--safet));max-width:1120px}
#carga .sk-bar{display:none}

/* ---------- Estructura ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:calc(14px + var(--safet)) max(20px,env(safe-area-inset-right,0px)) 14px max(20px,env(safe-area-inset-left,0px));
  isolation:isolate}
/* El fondo del encabezado es translúcido y difumina la página que pasa por detrás. El desenfoque va en una capa
   aparte, detrás del logo y del perfil, que quedan siempre nítidos. Solo su borde inferior se desvanece. */
.top::before{content:"";position:absolute;inset:0 0 -18px 0;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--bg) 70%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);transition:background-color .5s ease;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent)}
/* El círculo del perfil solo aparece en Inicio */
.cap #yo{transition:opacity .45s ease,transform .5s var(--suave),width .5s var(--suave),margin .5s var(--suave),background .2s,box-shadow .2s}
body:not(.en-inicio) .cap #yo{opacity:0;transform:scale(.6);width:0;margin-left:-12px;pointer-events:none}
.cap{margin-left:auto;display:flex;align-items:center;gap:12px}
.cap .cg{font-weight:600;font-size:14px;color:var(--muted2);white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.av{width:38px;height:38px;border-radius:50%;background:var(--s4);color:var(--fg);display:grid;place-items:center;font-weight:700;font-size:13px;border:0;flex:none}
button.av{transition:background .2s,box-shadow .2s}
button.av:hover{background:var(--s5)}
button.av[aria-expanded="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--soft)}
.wrap{display:grid;grid-template-columns:96px minmax(0,1fr);min-height:calc(100% - 90px)}
.main{padding:18px max(20px,env(safe-area-inset-right,0px)) 56px 14px;min-width:0;max-width:1240px;width:100%}
.tabbar{display:none}

/* ---------- Barra lateral con gota que sale de la barra (computadora y tableta) ---------- */
.rail{position:sticky;top:calc(96px + var(--safet));align-self:start;margin:6px 0 0 max(14px,env(safe-area-inset-left,0px));width:58px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:25;isolation:isolate}
.rail::before,.rail::after{content:"";position:absolute;z-index:-2;border-radius:30px;
  -webkit-mask:radial-gradient(circle 28px at calc(100% - 8px) var(--by),transparent 97%,#000 100%);mask:radial-gradient(circle 28px at calc(100% - 8px) var(--by),transparent 97%,#000 100%)}
.rail::before{inset:0;background:var(--line3)}
.rail::after{inset:1px;z-index:-1;background:var(--s1);border-radius:29px;
  -webkit-mask:radial-gradient(circle 29.5px at calc(100% - 7px) calc(var(--by) - 1px),transparent 97%,#000 100%);mask:radial-gradient(circle 29.5px at calc(100% - 7px) calc(var(--by) - 1px),transparent 97%,#000 100%)}
.rail.listo{transition:--by .6s var(--suave)}
.rail .sep{width:22px;height:1px;background:var(--tenue);margin:6px 0}
.rail .bead{position:absolute;z-index:0;left:calc(100% - 29px);top:calc(var(--by) - 21px);width:42px;height:42px;border-radius:50%;background:var(--soft);box-shadow:0 6px 18px var(--sombra);pointer-events:none}
.nav{position:relative;z-index:1;width:42px;height:42px;border-radius:50%;border:0;background:none;color:var(--muted2);display:grid;place-items:center;transition:color .35s ease}
.nav:hover{color:var(--fg)}
.nav:not([aria-current="page"]):hover{background:var(--s3)}
.nav[aria-current="page"]{color:var(--brand);transform:translateX(21px)}
/* El ícono no salta: se desvanece en la barra y aparece dentro del círculo, nítido y a su tamaño, cuando el círculo llega */
.nav.llega .ic{animation:icoLlega .66s var(--suave) both}
.nav.sale .ic{animation:icoSale .5s var(--suave) both}
.nav.llega .badge,.nav.sale .badge{animation:icoSale .5s .2s var(--suave) both}
@keyframes icoLlega{0%,35%{opacity:0;transform:scale(.45);filter:blur(5px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes icoSale{0%{opacity:0;transform:scale(.7);filter:blur(3px)}100%{opacity:1;transform:none;filter:blur(0)}}
.nav .ic{width:19px;height:19px}
.nav::after{content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;transform:translate(-4px,-50%);white-space:nowrap;background:var(--pop);color:var(--fg);border:1px solid var(--pop-line);font-size:13px;font-weight:600;padding:6px 12px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:60;box-shadow:0 8px 24px var(--sombra)}
.nav[aria-current="page"]::after{left:calc(100% + 10px)}
.nav:hover::after,.nav:focus-visible::after{opacity:1;transform:translate(0,-50%)}
.badge{background:var(--soft);color:var(--brand);border-radius:99px;font-size:11px;line-height:18px;height:18px;min-width:18px;padding:0 5px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.nav .badge{position:absolute;top:-2px;right:-4px;box-shadow:0 0 0 2px var(--s1)}
.nav[aria-current="page"] .badge{background:var(--brand);color:var(--soft);box-shadow:0 0 0 2px var(--soft)}

/* ---------- Tipografía ---------- */
.hola{color:var(--muted);font-size:14px;font-weight:500;margin:0 0 6px}
h1{font-size:28px;font-weight:700;letter-spacing:-.015em;margin:0;line-height:1.2}
h2{font-size:17px;font-weight:600;margin:26px 0 10px;display:flex;align-items:center;gap:8px}
h2 .count{font-size:13px;color:var(--muted);font-weight:600}
.sub{color:var(--muted);margin:4px 0 0}
.note{font-size:13.5px;color:var(--muted)}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}

/* ---------- Bloques ---------- */
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.card-b{cursor:pointer;text-align:left;color:var(--fg);width:100%;display:block;transition:border-color .25s,background .25s,transform .25s var(--suave)}
.card-b:hover{border-color:var(--line3);background:var(--s2)}
.card-b:active{transform:scale(.995)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.k{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;text-align:left;color:var(--fg);display:block;min-width:0}
button.k{cursor:pointer;transition:border-color .25s,background .25s,transform .25s var(--suave)}
button.k:hover{border-color:var(--line3);background:var(--s2)}
button.k[aria-pressed="true"]{border-color:var(--soft)}
.k.plano{background:none;border-color:transparent;padding-left:2px}
.k small{color:var(--muted);font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.k small .ic{width:15px;height:15px;opacity:.6}
.k div{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3}
.k.ok div{color:var(--ok)}.k.warn div{color:var(--warn)}.k.bad div{color:var(--bad)}
.vacio{border:1px dashed var(--line3);border-radius:var(--r);padding:26px;color:var(--muted);text-align:center}
.pill{display:inline-block;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap}
.p-ok{background:var(--okbg);color:var(--ok)}.p-warn{background:var(--warnbg);color:var(--warn)}.p-bad{background:var(--badbg);color:var(--bad)}.p-info{background:var(--infobg);color:var(--info)}.p-idle{background:var(--idlebg);color:var(--idle)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tabs button{background:var(--s1);border:1px solid var(--line);color:var(--muted2);border-radius:99px;padding:7px 15px;font-size:13.5px;font-weight:600;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.tabs button:hover{border-color:var(--line3)}
.tabs button[aria-pressed="true"]{background:var(--soft);color:var(--brand);border-color:var(--soft)}

/* ---------- Botones (jerarquía) ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:99px;padding:9px 16px;font-size:13.5px;font-weight:700;white-space:nowrap;min-height:38px;background:var(--s4);color:var(--fg);transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--s5)}
.btn.pri{background:var(--soft);color:var(--brand)}.btn.pri:hover{background:var(--soft-h)}
.btn.fant{background:transparent;border:1px solid var(--line3);color:var(--muted2);font-weight:600}
.btn.fant:hover{border-color:var(--muted);color:var(--fg);background:var(--s2)}
.btn.peligro{background:transparent;border:1px solid var(--badline);color:var(--bad);font-weight:600}
.btn.peligro:hover{background:var(--badbg)}
.btn.peligro-s{background:#c86a5c;color:#fff}
.btn:disabled{opacity:.5;cursor:default}
.btn .chev{transition:transform .5s var(--suave)}
.btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.atras{margin-bottom:14px}
.atras .ic{width:17px;height:17px}

/* ---------- Formularios ---------- */
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:16px 18px}
.form .full{grid-column:1/-1}
label{display:grid;gap:6px;font-size:13.5px;color:var(--muted);font-weight:600;min-width:0}
input,select,textarea{background:var(--input);border:1px solid var(--input-line);border-radius:12px;padding:10px 12px;width:100%;min-width:0;min-height:42px;color:var(--fg);transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--muted);outline:none}
textarea{min-height:90px;resize:vertical}
select option{background:var(--pop);color:var(--fg)}
/* Menús de selección propios (ver js/selector.js) */
.sl-nativo{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;opacity:0;pointer-events:none;clip-path:inset(50%)}
.sl{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;min-height:42px;background:var(--input);border:1px solid var(--input-line);border-radius:12px;padding:9px 12px 9px 14px;color:var(--fg);font-weight:500;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.sl:hover{border-color:var(--line3)}
.sl[aria-expanded="true"]{border-color:var(--muted)}
.sl:disabled{opacity:.5;cursor:default}
.sl-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl.vacio .sl-t{color:var(--muted)}
.sl-c{flex:none;color:var(--muted2);transition:transform .5s var(--suave)}
.sl[aria-expanded="true"] .sl-c{transform:rotate(180deg)}
.sl-m{position:fixed;z-index:150;background:var(--pop);border:1px solid var(--pop-line);border-radius:16px;padding:6px;box-shadow:0 18px 44px var(--sombra);overflow:auto;display:grid;gap:2px;overscroll-behavior:contain}
.sl-o{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:none;border:0;border-radius:11px;padding:10px 12px;color:var(--fg);font-size:14.5px;font-weight:600;text-align:left;transition:background .2s}
.sl-o span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-o svg{flex:none;opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s var(--rebote)}
.sl-o:hover,.sl-o:focus-visible{background:var(--s4);outline:none}
.sl-o[aria-selected="true"]{background:var(--s3)}
.sl-o[aria-selected="true"] svg{opacity:1;transform:none}
.sl-o:disabled{opacity:.45;cursor:default}
.sl-v{margin:0;padding:12px;color:var(--muted);font-size:14px}
.estado{font-size:13.5px;color:var(--muted);margin-top:10px;min-height:0}
.estado:empty{display:none}
.estado{animation:aparece .5s var(--suave)}
@keyframes aparece{from{opacity:0;filter:blur(6px);transform:translateY(4px)}}
/* Casillas en círculo (más minimalista) */
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;width:18px;height:18px;min-height:0;padding:0;margin:0;border-radius:50%;border:1.5px solid var(--muted);background:transparent;flex:none;cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--soft);border-color:var(--soft);box-shadow:inset 0 0 0 3px var(--brand)}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--fg)}
.chk{display:flex;align-items:center;gap:8px;color:var(--fg);font-weight:500;margin:0 0 12px;cursor:pointer}
.mas-campos{display:contents}

/* ---------- Tablas (en teléfono pasan a tarjetas) ---------- */
.tabla{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--s1)}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:13px;font-weight:600;color:var(--muted);padding:12px 14px;background:var(--s2);border-bottom:1px solid var(--line2);white-space:nowrap}
td{padding:12px 14px;border-top:1px solid var(--line2);font-size:14.5px;vertical-align:middle}
tr:first-child td{border-top:0}
td .s{display:block;color:var(--muted);font-size:13px}

/* ---------- Listas: nombre y cargo; al tocar se abre el detalle ---------- */
/* Cada ficha mide lo que su contenido pide: varias por fila en pantallas anchas, una por fila en el teléfono */
.lista{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.li{display:flex;align-items:center;gap:12px;width:100%;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;color:var(--fg);text-align:left;min-width:0;transition:border-color .25s,background .25s,transform .25s var(--suave)}
.li:hover{border-color:var(--line3);background:var(--s2)}
.li:active{transform:scale(.995)}
.li .av{width:42px;height:42px}
.li .av.cuad{border-radius:14px;font-size:12.5px}
.li-t{flex:1;min-width:0;display:grid}
.li-t b,.li-t .note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .ir{width:18px;height:18px;color:var(--muted);flex:none;transform:rotate(-90deg)}
.det-h{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.det-h .av{width:56px;height:56px;font-size:16px}
.det-h .av.cuad{border-radius:18px}
.det-h>div{display:grid;min-width:0}
.det-h h1{font-size:24px}
.bloque{margin-bottom:12px}
.bloque h3{margin:0 0 6px;font-size:15.5px}
/* Archivo: clientes y trabajadores fuera del grupo activo */
.archivo{margin-top:22px}
.archivo>.btn{width:100%;justify-content:space-between}
.archivo .lista{margin-top:10px}
.archivo .li{opacity:.8}

/* ---------- Panel desplegable ---------- */
.panel{margin-bottom:20px}
.panel .fh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel .fh h2{margin:0}
.plegar{width:34px;height:34px;border-radius:50%;border:0;background:var(--s3);color:var(--soft);display:grid;place-items:center;transform:rotate(180deg);flex:none}
.plegar:hover{background:var(--s4)}

/* ---------- Ficha de perfil ---------- */
#perfil{position:fixed;top:calc(78px + var(--safet));right:max(16px,env(safe-area-inset-right,0px));z-index:70;width:min(320px,calc(100vw - 32px));padding:18px;border-radius:24px;background:var(--pop);border:1px solid var(--pop-line);box-shadow:0 20px 50px var(--sombra);transform-origin:top right}
.pf-h{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line2)}
.pf-h>div{display:grid;min-width:0}.pf-h b{font-size:16px}.pf-h span{color:var(--muted);font-size:13.5px}
.pf-sec{padding:12px 0;border-bottom:1px solid var(--line2);display:grid;gap:4px}
.pf-sec:last-child{border-bottom:0;padding-bottom:0}
.rol{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:var(--fg);padding:8px;border-radius:12px;text-align:left}
.rol:hover{background:var(--s3)}.rol.on{background:var(--s2)}
.rol .av{width:30px;height:30px;font-size:10.5px}
.rol .rn{flex:1;font-weight:600;font-size:14px}.rol .ok{font-size:12px;color:var(--muted)}
.rol .ic{width:20px;height:20px;color:var(--muted2)}
.pf-estado{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted2);padding:4px 8px}
.pf-estado i{width:8px;height:8px;border-radius:50%;background:var(--ok)}

/* ---------- Configuración ---------- */
/* Interruptor de apariencia: al tocarlo, la perilla se desliza hacia el modo elegido */
.interruptor{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px 14px 18px}
.interruptor>span{font-weight:600}
.sw{position:relative;flex:none;width:78px;height:42px;border:0;padding:0;border-radius:99px;background:var(--s4);box-shadow:inset 0 2px 6px var(--sombra);transition:background .5s ease}
.sw-k{position:absolute;top:5px;left:5px;width:32px;height:32px;border-radius:50%;background:var(--soft);color:var(--brand);box-shadow:0 3px 10px var(--sombra);transition:transform .65s var(--rebote),background .5s ease,color .5s ease;overflow:hidden}
.sw[aria-checked="true"] .sw-k{transform:translateX(36px)}
.sw-i{position:absolute;inset:0;display:grid;place-items:center;transition:transform .6s var(--suave),opacity .4s ease}
.sw-i .ic{width:17px;height:17px}
.sw-i.luna{opacity:0;transform:rotate(-90deg) scale(.5)}
.sw[aria-checked="true"] .sw-i.luna{opacity:1;transform:none}
.sw[aria-checked="true"] .sw-i.sol{opacity:0;transform:rotate(90deg) scale(.5)}
/* Cambio de tema: toda la pantalla se funde a la vez (el interruptor sigue deslizándose encima) */
::view-transition-old(root),::view-transition-new(root){animation-duration:.7s;animation-timing-function:cubic-bezier(.45,0,.25,1);mix-blend-mode:normal}
::view-transition-old(root){animation-name:tema-sale}
::view-transition-new(root){animation-name:tema-entra}
@keyframes tema-sale{to{opacity:0}}
@keyframes tema-entra{from{opacity:0}}
/* Durante el fundido nada cambia por su cuenta: así todo pasa al mismo tiempo */
.vt-tema,.vt-tema body,.vt-tema *,.vt-tema *::before,.vt-tema *::after{transition:none!important}
.vt-tema .sw-k{view-transition-name:tema-perilla}
::view-transition-group(tema-perilla){animation-duration:.65s;animation-timing-function:var(--rebote)}
/* Mientras cambia el tema, los colores se funden en lugar de saltar */
.cambiando-tema *,.cambiando-tema *::before,.cambiando-tema *::after{transition:background-color .5s ease,color .5s ease,border-color .5s ease,fill .5s ease,stroke .5s ease!important}
.cambiando-tema .sw-k{transition:transform .65s var(--rebote),background-color .5s ease,color .5s ease!important}
.cambiando-tema .sw-i{transition:transform .6s var(--suave),opacity .4s ease!important}

/* ---------- Avisos breves (una línea, claros sobre la interfaz oscura) ---------- */
#toast{position:fixed;left:50%;bottom:calc(24px + var(--safeb) - var(--ios));transform:translateX(-50%);z-index:95;max-width:calc(100vw - 32px);pointer-events:none}
.toast{background:var(--soft);color:var(--brand);border-radius:99px;padding:10px 20px;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 10px 30px var(--sombra);animation:sube .45s var(--suave)}
.toast.sale{animation:baja .35s ease forwards}

/* ---------- Acceso e incorporación ---------- */
.acceso{min-height:100%;display:grid;place-items:center;padding:calc(24px + var(--safet)) 20px calc(24px + var(--safeb))}
.acceso .box{width:min(400px,100%);display:grid;gap:22px}
.acceso .box.ancha{width:min(760px,100%)}
.acceso .logo{height:34px;justify-self:start}
.acceso h1{font-size:26px}
.acceso .card{display:grid;gap:14px;padding:22px}
.acceso .card.form{display:grid}
.link{background:none;border:0;color:var(--muted2);font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:0;justify-self:start}

/* ---------- Animaciones ---------- */
.rv{animation:rv .75s var(--suave) both}
@keyframes rv{from{opacity:0;filter:blur(10px);transform:translateY(10px) scale(.985)}}
.rv-sk{position:relative;overflow:hidden}
.rv-sk::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(100deg,transparent 20%,var(--brillo) 50%,transparent 80%);transform:translateX(-100%);animation:barrido 1.1s ease-out both;animation-delay:inherit}
@keyframes sube{from{opacity:0;transform:translateY(12px)}}
@keyframes baja{to{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Tableta ---------- */
@media (max-width:1080px){ .wrap{grid-template-columns:92px minmax(0,1fr)} }

/* ---------- Teléfono ---------- */
@media (max-width:820px){
  input,select,textarea{font-size:16px}
  .sl{font-size:16px}
  .wrap{grid-template-columns:minmax(0,1fr);min-height:0}
  .rail{display:none}
  .top{padding:calc(10px + var(--safet)) 16px 10px}
  .logo{height:27px}
  .cap{gap:10px}
  .cap .cg{font-size:13.5px;max-width:150px}
  .cap .av{width:36px;height:36px}
  .main{padding:8px max(16px,env(safe-area-inset-right,0px)) calc(var(--tabh) + var(--tabb) + 40px) max(16px,env(safe-area-inset-left,0px))}
  h1{font-size:24px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpis:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .k{padding:12px 13px}
  .kpis:has(> :nth-child(3):last-child) .k small{font-size:12px;line-height:1.3}
  .kpis:has(> :nth-child(3):last-child) .k small .ic{display:none}
  .k div{font-size:24px}
  .ph{flex-direction:column;align-items:flex-start;gap:12px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 16px;padding:0 16px 2px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabla{border:0;background:none;overflow:visible}
  table,tbody{display:block}
  thead{display:none}
  tbody{display:grid;gap:10px}
  tr{display:block;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
  td{display:flex;justify-content:space-between;gap:12px;border:0!important;padding:5px 0;text-align:right}
  td::before{content:attr(data-label);color:var(--muted);font-size:13px;font-weight:600;text-align:left;flex:none}
  td[data-label=""]::before{display:none}
  td:first-child{display:block;text-align:left;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--line2)!important}
  td:first-child::before{display:none}
  td.full{display:block;text-align:left}
  #toast{bottom:calc(var(--tabh) + var(--tabb) + 16px - var(--ios))}
  #perfil{top:calc(62px + var(--safet))}
  #carga .sk-rail{display:none}
  #carga .sk-top{padding:calc(10px + var(--safet)) 16px 10px;height:calc(58px + var(--safet))}
  #carga .sk-main{left:16px;right:16px;top:calc(76px + var(--safet))}
  #carga .sk-bar{display:block;position:absolute;left:14px;right:14px;bottom:calc(var(--tabb) - var(--ios));height:var(--tabh);border-radius:999px;background:var(--s1);border:1px solid var(--line2)}
}
/* Distancia de la barra inferior al borde: pegada, sin el gran espacio vacío */
:root{--tabb:12px}
@supports (bottom:env(safe-area-inset-bottom)){ :root{--tabb:max(10px, calc(env(safe-area-inset-bottom,0px) - 12px))} }

/* ---------- Barra inferior con gota (teléfono) ---------- */
@media (max-width:820px){
  .tabbar{display:flex;position:fixed;left:max(14px,env(safe-area-inset-left,0px));right:max(14px,env(safe-area-inset-right,0px));bottom:calc(var(--tabb) - var(--ios));z-index:40;height:var(--tabh);padding:0 6px;isolation:isolate;filter:drop-shadow(0 10px 22px var(--sombra));transition:transform .6s var(--suave),opacity .45s ease,filter .45s ease}
  /* Media luna con los bordes redondeados (curvas suaves donde se une con la barra). Se mueve con --bx,
     igual que el círculo: siempre juntos, con la misma suavidad y sin rebote. */
  .tabbar::before,.tabbar::after{content:"";position:absolute;z-index:-2;border-radius:999px;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:xor;mask-composite:exclude;
    -webkit-mask-size:100px 42px,100% 100%;mask-size:100px 42px,100% 100%}
  .tabbar::before{inset:0;background:var(--line3);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -2 100 42'%3E%3Cpath d='M11.21 0A8 8 0 0 1 19.17 7.18A31 31 0 0 0 80.83 7.18A8 8 0 0 1 88.79 0L88.79 -2L11.21 -2Z'/%3E%3C/svg%3E"),linear-gradient(#000 0 0);
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -2 100 42'%3E%3Cpath d='M11.21 0A8 8 0 0 1 19.17 7.18A31 31 0 0 0 80.83 7.18A8 8 0 0 1 88.79 0L88.79 -2L11.21 -2Z'/%3E%3C/svg%3E"),linear-gradient(#000 0 0);
    -webkit-mask-position:calc(var(--bx) - 50px) -2px,0 0;mask-position:calc(var(--bx) - 50px) -2px,0 0}
  .tabbar::after{inset:1px;z-index:-1;background:var(--pop);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -2 100 42'%3E%3Cpath d='M11.16 1A6.5 6.5 0 0 1 17.63 6.92A32.5 32.5 0 0 0 82.37 6.92A6.5 6.5 0 0 1 88.84 1L88.84 -2L11.16 -2Z'/%3E%3C/svg%3E"),linear-gradient(#000 0 0);
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -2 100 42'%3E%3Cpath d='M11.16 1A6.5 6.5 0 0 1 17.63 6.92A32.5 32.5 0 0 0 82.37 6.92A6.5 6.5 0 0 1 88.84 1L88.84 -2L11.16 -2Z'/%3E%3C/svg%3E"),linear-gradient(#000 0 0);
    -webkit-mask-position:calc(var(--bx) - 51px) -3px,0 0;mask-position:calc(var(--bx) - 51px) -3px,0 0}
  .tabbar.listo{transition:--bx .6s var(--suave),transform .6s var(--suave),opacity .45s ease,filter .45s ease}
  .tabbar .bead{position:absolute;z-index:0;top:-20px;left:calc(var(--bx) - 24px);width:48px;height:48px;border-radius:50%;background:var(--soft);box-shadow:0 8px 20px var(--sombra);pointer-events:none}
  .tb{position:relative;z-index:1;flex:1;display:grid;justify-items:center;align-content:center;background:none;border:0;color:var(--muted);font-size:11px;font-weight:700;padding:0;min-width:0;height:100%}
  .tb .ic{width:22px;height:22px;transition:transform .6s var(--suave),color .35s}
  .tb .lb{position:absolute;bottom:7px;left:0;right:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(4px);transition:opacity .35s .1s,transform .45s var(--suave) .1s;color:var(--fg)}
  .tb[aria-current="page"] .ic{transform:translateY(-28px);color:var(--brand)}
  .tb.llega .ic{animation:icoLlegaT .66s var(--suave) both}
  .tb.sale .ic{animation:icoSale .5s var(--suave) both}
  @keyframes icoLlegaT{0%,35%{opacity:0;transform:translateY(-28px) scale(.45);filter:blur(5px)}100%{opacity:1;transform:translateY(-28px);filter:blur(0)}}
  .tb[aria-current="page"] .lb{opacity:1;transform:none}
  .tb .badge{position:absolute;top:10px;left:calc(50% + 6px);height:17px;min-width:17px;line-height:17px;font-size:10px;padding:0 4px;box-shadow:0 0 0 2px var(--pop);transition:transform .6s var(--suave)}
  .tb[aria-current="page"] .badge{transform:translateY(-26px)}
  /* Al escribir o abrir el chat, la barra baja y se desvanece; al volver, sube con suavidad (nunca de golpe) */
  body.escribiendo .tabbar,body.con-chat .tabbar,body.con-detalle .tabbar{transform:translateY(calc(100% + 40px));opacity:0;pointer-events:none}
}

/* ---------- Hoja "Más secciones" ---------- */
#hoja .velo{position:fixed;inset:0 0 calc(0px - var(--ios)) 0;background:var(--velo);z-index:80;display:grid;align-items:end}
#hoja .hj{border-radius:24px 24px 0 0;padding:20px 18px calc(24px + var(--safeb));background:var(--pop);border:1px solid var(--pop-line);border-bottom:0}
/* Cada opción de "Más" lleva su recuadro redondeado: se nota que es un botón */
#hoja .hj{display:grid;gap:8px}
#hoja .rol.caja{padding:13px 14px;border:1px solid var(--line3);border-radius:16px;background:var(--s2);min-height:50px}
#hoja .rol.caja:hover{background:var(--s3)}
#hoja .rol.caja.on{border-color:var(--soft);background:var(--s3)}
#hoja .rol .badge{margin-left:auto}

/* =====================================================================
   Portal del cliente, entregas y chat
   ===================================================================== */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px;margin-bottom:18px}
.fila{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line2);text-align:left}
.fila:first-of-type{border-top:0}
.card h2+.fila{border-top:0}
.fila-b{width:100%;background:none;border:0;border-top:1px solid var(--line2);color:var(--fg);border-radius:0}
.fila-b:hover b{text-decoration:underline;text-underline-offset:3px}
.sel{-webkit-user-select:text;user-select:text}
.btn.chico{min-height:32px;padding:6px 12px;font-size:13px}
.btn .ic{width:17px;height:17px}
.gira .ic{transform:rotate(180deg)}
.solo-movil{display:none}
.solo-movil-b{display:none}

/* Tarjetas de entrega */
.ents{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.ent{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px 10px 10px;color:var(--fg);transition:background .2s,border-color .2s}
.card .ent{background:var(--s2)}
.ent:hover{border-color:var(--line3);background:var(--s2)}
.ent-m{width:56px;height:56px;border-radius:12px;overflow:hidden;background:var(--s3);flex:none;display:grid;place-items:center;color:var(--muted);font-weight:700;font-size:13px}
.ent-m img{width:100%;height:100%;object-fit:cover;display:block}
.ent-t{flex:1;min-width:0;display:grid}
.ent-t b,.ent-t .note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ent-f{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;margin-top:2px}
.ent-f .note{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ent-f .pill{flex:none;font-size:12px;padding:2px 9px}
.fila-b>.note{white-space:nowrap;flex:none}

/* Gráfica ascendente */
.graf{width:100%;height:auto;display:block}
.graf .g-v{fill:var(--fg);font:700 12px var(--f)}
.graf .g-m{fill:var(--muted);font:600 11.5px var(--f);text-transform:capitalize}
.graf .g-a{fill:var(--tenue)}
.graf .g-p{fill:var(--soft)}
.g-linea{stroke:var(--soft);stroke-dasharray:1;stroke-dashoffset:1;animation:trazo 1.4s .3s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes trazo{to{stroke-dashoffset:0}}

/* Calendario compacto e interactivo */
.cal{padding:14px;max-width:760px}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-h b{font-size:16px}
.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cs{font-size:12px;color:var(--muted);font-weight:600;text-align:center;padding:2px 0 6px}
.cd{height:54px;background:none;border:1px solid transparent;border-radius:12px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:3px;min-width:0;color:var(--fg);font:inherit;transition:background .25s,border-color .25s}
button.cd{cursor:pointer}
button.cd:hover{background:var(--s3)}
.cd.fuera{pointer-events:none}
.cd .n{font-size:13px;color:var(--muted2);font-weight:600;width:24px;height:24px;display:grid;place-items:center;border-radius:99px}
.cd.hoy .n{background:var(--s4);color:var(--fg)}
.cd.sel{background:var(--s2);border-color:var(--line3)}
.cd.sel .n{background:var(--soft);color:var(--brand)}
.pts{display:flex;gap:3px;height:6px;align-items:center}
.pt{width:6px;height:6px;border-radius:50%;background:var(--soft);display:block}
.pt.ok{background:var(--ok)}.pt.pend{background:var(--info)}.pt.ses{background:var(--warn)}.pt.canc{background:var(--idle)}
.ev{font-size:11.5px;font-weight:600;border:0;border-radius:7px;padding:2px 6px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}
.ev.ok{background:var(--okbg);color:var(--ok)}.ev.pend{background:var(--infobg);color:var(--info)}.ev.ses{background:var(--warnbg);color:var(--warn)}
.cal-lado{display:grid;grid-template-columns:minmax(0,760px) minmax(0,1fr);gap:14px;align-items:start}
.dia-l{display:grid;gap:8px}
.dia-l h3{margin:2px 0 4px;font-size:15px}

/* Ventana de revisión */
#detalle:empty{display:none}
.d-velo{position:fixed;inset:0;background:var(--velo);z-index:84}
/* Del tamaño de su contenido: ni más grande ni más chica de lo necesario */
.d-hoja{position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);z-index:85;background:var(--bg);border:1px solid var(--line);border-radius:24px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px var(--sombra)}
.d-cab{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line2)}
.d-tt{flex:1;min-width:0;display:grid}
.d-tt b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-tt .note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-cuerpo{flex:0 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,420px) 340px;grid-template-rows:minmax(0,1fr)}
.d-sim{overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;background:var(--sim-bg);min-height:0}
.d-lado{overflow:auto;padding:18px;border-left:1px solid var(--line2);display:flex;flex-direction:column;gap:14px;min-height:0}
.d-blq h3{margin:0 0 4px;font-size:16px}
.d-blq p{margin:4px 0 0}
.d-texto{white-space:normal;line-height:1.55;margin:6px 0 0;-webkit-user-select:text;user-select:text}
.d-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--line2)}
.d-acc:has(.confirma){display:block}
.confirma p{margin:0 0 10px}
.notas{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.notas li{background:var(--s2);border:1px solid var(--line2);border-radius:14px;padding:10px 12px}
.notas li.hecha p{color:var(--muted);text-decoration:line-through}
.notas p{margin:4px 0 6px;-webkit-user-select:text;user-select:text}
.notas .acts:empty{display:none}
.ref{background:var(--s4);border:0;color:var(--fg);font-size:12px;font-weight:700;border-radius:99px;padding:3px 10px}
.ref:hover{background:var(--s5)}
.subir{cursor:pointer}
.aprob{display:grid;justify-items:center;gap:14px;text-align:center;max-width:360px}
.aprob{padding:8px 0}
.aprob img{max-width:100%;max-height:min(52vh,420px);border-radius:16px;display:block}
.aprob p{margin:0}

/* Simulación (sin logotipos oficiales; siempre oscura, como la red) */
.sim{width:min(360px,100%);background:#0b0b0b;border:1px solid #262626;border-radius:22px;overflow:hidden;color:#f2f2f0;font-size:14px;flex:none;position:relative}
.s-pad{padding:12px 14px}.s-pad0{padding:0 14px}
.s-h{display:flex;align-items:center;gap:10px}
.s-h span{display:grid;line-height:1.25}.s-h small{color:#8f8f8b;font-size:12px}
.s-av{width:32px;height:32px;border-radius:50%;background:#2c2c2c;display:grid!important;place-items:center;font-size:11.5px;font-weight:700;flex:none;line-height:1}
.s-media{position:relative;background:#000;width:100%;overflow:hidden}
.s-texto .s-media{border-radius:14px;border:1px solid #222}
.s-pin .s-media{border-radius:18px}
.s-car{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.s-car::-webkit-scrollbar{display:none}
.s-sl{flex:0 0 100%;height:100%;scroll-snap-align:center;display:grid;place-items:center}
.s-sl img,.s-sl video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.s-vacio{display:grid;place-items:center;height:100%;min-height:160px;color:#8f8f8b;font-size:13px}
.s-cont{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:700;border-radius:99px;padding:2px 9px;pointer-events:none}
.s-fl{position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;border:0;background:rgba(255,255,255,.82);color:#111;display:grid;place-items:center;opacity:.85}
.s-fl .ic{width:16px;height:16px}
.s-fl.izq{left:8px}.s-fl.der{right:8px}.s-fl.der .ic{transform:rotate(180deg)}
.s-puntos{display:flex;justify-content:center;gap:4px;padding:8px 0 0}
.s-puntos i{width:6px;height:6px;border-radius:50%;background:#444;transition:background .2s}
.s-puntos i.on{background:#d8d8d8}
.s-acc{display:flex;gap:16px;padding:10px 14px}
.s-acc .ic{width:23px;height:23px}
.s-txt{margin:0;line-height:1.45;white-space:normal;word-break:break-word}
.s-tit{display:block;font-size:15px;margin-bottom:10px;line-height:1.3}
.s-desc{color:#bdbdba;margin-top:10px;font-size:13px}
.s-vert{width:min(320px,100%)}
.s-vert .s-media{aspect-ratio:9/16}
.s-sobre{position:absolute;left:0;right:56px;bottom:0;padding:44px 14px 16px;background:linear-gradient(transparent,rgba(0,0,0,.72));pointer-events:none}
.s-sobre .s-txt{margin-top:8px;font-size:13.5px;max-height:6em;overflow:hidden}
.s-vert:has(.s-barras) .s-sobre{top:0;bottom:auto;right:0;padding:22px 12px 30px;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.s-lado{position:absolute;right:10px;bottom:22px;display:grid;gap:18px;pointer-events:none}
.s-lado .ic{width:26px;height:26px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.s-barras{position:absolute;left:10px;right:10px;top:8px;display:flex;gap:4px;z-index:2;pointer-events:none}
.s-barras i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35)}
.s-barras i.on{background:#fff}
.s-plat{font-size:12.5px;color:var(--muted);font-weight:600}

/* Chat de atención al cliente: se despliega desde el botón y se recoge hacia él */
#fab{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(24px + var(--safeb));z-index:45;display:flex;align-items:center;gap:8px;border:0;border-radius:99px;padding:12px 18px 12px 15px;background:var(--soft);color:var(--brand);font-weight:700;font-size:14px;box-shadow:0 10px 30px var(--sombra);transition:transform .35s var(--suave),opacity .3s}
#fab:hover{transform:translateY(-2px)}
#fab .ic{width:20px;height:20px}
#fab .badge{background:var(--brand);color:var(--soft);box-shadow:none}
body.con-chat #fab{opacity:0;transform:scale(.8);pointer-events:none}
body.con-detalle #fab{opacity:0;transform:scale(.6);pointer-events:none}
#chatbox{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(24px + var(--safeb));z-index:86;width:min(400px,calc(100vw - 40px));height:min(620px,calc(100vh - 110px));background:var(--pop);border:1px solid var(--pop-line);border-radius:24px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px var(--sombra);transform-origin:bottom right}
.ch-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line2)}
.ch-cab>div{display:grid;flex:1;min-width:0}
.ch-cab .plegar{transform:none}
.ch-msgs{flex:1;min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:6px}
.ch-vacio{margin:auto;text-align:center;color:var(--muted);font-size:13.5px;max-width:280px;padding:20px}
.ch-dia{align-self:center;font-size:12px;color:var(--muted);font-weight:600;margin:10px 0 4px}
.ch-m{max-width:82%;align-self:flex-start;background:var(--s3);border-radius:18px 18px 18px 6px;padding:8px 12px 6px;display:grid;gap:4px}
.ch-m.mio{align-self:flex-end;background:var(--soft);color:var(--brand);border-radius:18px 18px 6px 18px}
.ch-m p{margin:0;-webkit-user-select:text;user-select:text;word-break:break-word}
.ch-q{font-size:12px;font-weight:700;color:var(--muted2)}
.ch-t{font-size:11px;opacity:.65;justify-self:end}
.ch-a{display:grid;gap:6px}
.ch-a img,.ch-a video{max-width:100%;max-height:260px;border-radius:12px;display:block}
/* Documentos en el chat: un cuadrito con el formato y el nombre del archivo (como en WhatsApp) */
.ch-arch{display:flex;align-items:center;gap:10px;min-width:0;max-width:280px;background:var(--tenue);border-radius:14px;padding:8px 12px 8px 8px;text-decoration:none;color:inherit;transition:background .2s}
.ch-arch:hover{background:color-mix(in srgb,var(--fg) 12%,transparent)}
.ch-m.mio .ch-arch{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.ch-m.mio .ch-arch:hover{background:color-mix(in srgb,var(--brand) 18%,transparent)}
.ch-fmt{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--s5);color:var(--fg);font-size:10px;font-weight:800;letter-spacing:.02em}
.ch-m.mio .ch-fmt{background:var(--brand);color:var(--soft)}
.ch-dn{min-width:0;font-size:13.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.ch-m.nuevo{animation:burbuja .5s var(--suave) both}
@keyframes burbuja{from{opacity:0;filter:blur(6px);transform:translateY(10px) scale(.97)}}
.ch-f{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--line2)}
.ch-f textarea{flex:1;min-height:40px;max-height:140px;resize:none;border-radius:20px;padding:9px 14px;line-height:1.4}
.ch-b{width:40px;height:40px;border-radius:50%;border:0;background:var(--s3);color:var(--fg);display:grid;place-items:center;flex:none;cursor:pointer}
.ch-env{background:var(--soft);color:var(--brand)}
.ch-b .ic{width:20px;height:20px}
a.btn{text-decoration:none}
body.con-fab .main{padding-bottom:110px}
.ch-est{margin:0;padding:0 16px 8px;font-size:12.5px;color:var(--muted)}
.ch-est:empty{display:none}
.ch-solo{margin:0;padding:12px 16px;border-top:1px solid var(--line2)}

/* Mensajes del equipo */
.msj{display:grid;grid-template-columns:320px minmax(0,1fr);gap:14px;height:calc(100vh - 270px);min-height:440px}
.msj-l{padding:8px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.msj-c{padding:0;display:flex;flex-direction:column;overflow:hidden}
.conv{display:flex;align-items:center;gap:10px;width:100%;min-width:0;flex:none;background:none;border:1px solid transparent;color:var(--fg);padding:9px 10px;border-radius:14px;text-align:left;transition:background .2s,border-color .2s}
.conv:hover{background:var(--s2)}.conv.on{background:var(--s3);border-color:var(--line3)}
.conv .av{border-radius:12px;font-size:11.5px;width:38px;height:38px}
.cv-t{flex:1;min-width:0;display:grid}
.cv-t b,.cv-t .note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-h{font-size:11.5px;color:var(--muted);display:grid;justify-items:end;gap:4px;white-space:nowrap;flex:none}

@media (max-width:1080px){ .d-cuerpo{grid-template-columns:minmax(0,400px) 300px} .cal-lado{grid-template-columns:1fr} }
@media (max-width:820px){
  .solo-movil{display:inline-flex}
  .solo-movil-b{display:block}
  .d-hoja{inset:0 0 calc(0px - var(--ios)) 0;margin:0;width:auto;height:auto;max-width:none;max-height:none;border-radius:0;border:0}
  .d-cuerpo{grid-template-rows:none}
  .d-cab{padding:10px 12px;padding-top:max(10px,var(--safet))}
  .d-cab .btn{padding:8px 12px}.d-cab .btn{font-size:0;gap:0}.d-cab .btn .ic{width:20px;height:20px}
  .d-cuerpo{display:block;overflow:auto;flex:1}
  .d-sim{overflow:visible;padding:16px 12px}
  .d-lado{overflow:visible;border-left:0;border-top:1px solid var(--line2);padding:16px 16px calc(24px + var(--safeb))}
  #fab{bottom:calc(var(--tabh) + var(--tabb) + 16px - var(--ios));right:16px;padding:12px}
  #fab .fab-t{display:none}
  #fab .badge{position:absolute;top:-4px;right:-4px}
  body.escribiendo #fab{opacity:0;transform:scale(.6) translateY(20px);pointer-events:none}
  body.con-fab .main{padding-bottom:calc(var(--tabh) + var(--tabb) + 96px)}
  .fila-b{flex-direction:column;align-items:flex-start;gap:2px}
  #chatbox{inset:0 0 calc(0px - var(--ios)) 0;width:auto;height:auto;border-radius:0;border:0}
  .ch-cab{padding-top:max(12px,var(--safet))}
  .ch-f{padding-bottom:max(10px,var(--safeb))}
  .cd{height:46px;padding:4px 2px}
  .msj{display:block;height:auto;min-height:0}
  .msj-l{padding:6px}
  .msj.abierta .msj-l{display:none}
  .msj:not(.abierta) .msj-c{display:none}
  .msj-c{position:fixed;inset:0 0 calc(0px - var(--ios)) 0;z-index:60;border-radius:0;border:0}
  .msj-c .ch-cab{justify-content:flex-start;padding-top:max(12px,var(--safet))}
  .msj-c .ch-cab>div{flex:1}
  .msj-c .ch-f{padding-bottom:max(10px,var(--safeb))}
}

/* =====================================================================
   Finanzas y pausa por mora
   ===================================================================== */
.susp{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--badbg);border:1px solid var(--badline);border-radius:var(--r);padding:16px 18px;margin-bottom:18px}
.susp b{color:var(--fg)}
.susp>div>b{font-size:16px}
.susp p{margin:4px 0 0;color:var(--muted2);font-size:14px}
.bloq{position:relative}
.borroso{filter:blur(9px);opacity:.55;pointer-events:none;-webkit-user-select:none;user-select:none}
.bloq-m{position:absolute;inset:0;display:grid;place-items:center;margin:0;text-align:center;font-weight:600;font-size:14px;color:var(--fg);padding:16px}
.pagos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:14px}
.pg-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.pg-h>div{display:grid}
.pg-m{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pago .confirma{margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}
.cobros{display:grid;gap:8px}
.cobro{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) auto;gap:8px;align-items:center}
/* Menú "Descargar": flota por encima de todo (no queda detrás de la ventana) */
.dl{position:relative;display:inline-block}
.dl-m{position:fixed;z-index:140;background:var(--pop);border:1px solid var(--pop-line);border-radius:14px;padding:6px;min-width:150px;box-shadow:0 14px 34px var(--sombra);display:grid;transform-origin:top right}
.dl-m button{background:none;border:0;color:var(--fg);text-align:left;padding:9px 12px;border-radius:9px;font-weight:600;font-size:14px}
.dl-m button:hover{background:var(--s4)}
@media (max-width:820px){
  .susp{flex-direction:column;align-items:flex-start}
  .cobro{grid-template-columns:1fr}
}

/* =====================================================================
   Agenda, "Elige tu horario" y chat del equipo
   ===================================================================== */
.ag-bar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:16px}
.ag-t{font-size:16px;flex:1;min-width:180px}
.ag-f .chk{margin:0;font-size:13.5px}
.sem{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.sem-d{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:8px;display:flex;flex-direction:column;gap:6px;min-height:120px;min-width:0}
.sem-d.hoy{border-color:var(--line3)}
.sem-h{display:flex;align-items:baseline;gap:6px;background:none;border:0;color:var(--muted);padding:2px 4px;font-weight:600;font-size:12.5px;text-align:left;border-radius:8px}
.sem-h:hover{background:var(--s3)}
.sem-h b{color:var(--fg);font-size:17px}
.sem-d.hoy .sem-h b{background:var(--soft);color:var(--brand);border-radius:99px;padding:0 7px}
.sem-v{flex:1}
.agc{display:grid;gap:2px;text-align:left;width:100%;background:var(--s2);border:1px solid var(--line2);border-radius:12px;padding:8px 9px;color:var(--fg);min-width:0;transition:border-color .2s}
.agc:hover,.agc.on{border-color:var(--line3)}
.agc b{font-size:13px;line-height:1.25}
.agc .note{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agc-h{font-size:12px;font-weight:700;color:var(--muted2)}
.agc .pill{justify-self:start;font-size:11px;padding:1px 8px;margin-top:3px}
.agc.canc{opacity:.5}.agc.canc b{text-decoration:line-through}
.dia{display:grid;gap:10px;max-width:640px}
.dia .agc{padding:12px 14px}.dia .agc b{font-size:15px}
.ev.canc{background:var(--idlebg);color:var(--idle);text-decoration:line-through}
.aviso-choque{background:var(--warnbg);border:1px solid var(--warnbg);color:var(--fg);border-radius:14px;padding:10px 14px;font-size:13.5px;line-height:1.55}
.aviso-choque b{color:var(--warn)}
fieldset.resp{border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:0}
fieldset.resp .chk{margin:0;font-size:14px}
fieldset.resp .chk .note{font-size:12px}

/* Tarjeta "Elige tu horario" */
.ch-m.ch-tj{max-width:min(340px,90%)}
.hor{display:grid;gap:6px;min-width:220px}
.hor b{font-size:15px}
.hor-o{display:grid;gap:6px;margin:4px 0}
.hor-b{display:flex;align-items:center;gap:6px;background:var(--s4);border:1px solid var(--line3);color:var(--fg);border-radius:12px;padding:9px 12px;font-weight:600;font-size:13.5px;text-align:left}
button.hor-b:hover{background:var(--s5)}
.hor-b .ic{width:16px;height:16px}
.hor-b.el{background:var(--okbg);border-color:var(--okbg);color:var(--ok)}
.hor-b.no{opacity:.45}
.ch-m.mio .hor-b{background:color-mix(in srgb,var(--brand) 10%,transparent);border-color:color-mix(in srgb,var(--brand) 25%,transparent);color:var(--brand)}
.ch-m.mio .hor .note{color:inherit;opacity:.7}
.prop{padding:14px 16px;border-bottom:1px solid var(--line2);max-height:55vh;overflow:auto}
.pr-op{display:grid;gap:4px}
.pr-g{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}

/* Edición de mensajes: todo con contraste dentro de la burbuja propia */
.ch-t{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.ch-ed{border:0;background:none;color:inherit;opacity:0;padding:2px;border-radius:6px;display:grid;place-items:center;transition:opacity .2s}
.ch-m:hover .ch-ed,.ch-m.ver-ed .ch-ed,.ch-ed:focus-visible{opacity:.85}
.ch-edf{display:grid;gap:8px;min-width:220px}
.ch-edf textarea{min-height:60px;background:color-mix(in srgb,var(--brand) 9%,transparent);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 35%,transparent)}
.ch-edf textarea:focus{border-color:var(--brand)}
.ch-m.mio .btn.pri{background:var(--brand);color:var(--soft)}
.ch-m.mio .btn.fant{background:transparent;color:var(--brand);border-color:color-mix(in srgb,var(--brand) 55%,transparent)}
.ch-m.mio .btn.fant:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
@media (hover:none){ .ch-m.ver-ed .ch-ed{opacity:1} }

@media (max-width:1080px){ .sem{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:820px){
  .sem{grid-template-columns:1fr}
  .sem-d{min-height:0}
  .sem-v{display:none}
  .sem-d:not(:has(.agc)):not(.hoy){display:none}
  .sem-d.hoy:not(:has(.agc))::after{content:'Sin jornadas hoy';font-size:13px;color:var(--muted);padding:0 4px 4px}
  .ag-t{order:-1;flex-basis:100%}
  .pr-g{grid-template-columns:1fr 1fr auto 1fr}
  .pr-g input[type=date]{grid-column:1/-1}
}

/* Pendientes y rendimiento */
.pends{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:12px}
.pend-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pend-h>div{display:grid;min-width:0}
.pend .confirma{margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}
.pend .chk{margin:0;font-size:13.5px}
.just{padding:12px 0;border-top:1px solid var(--line2)}.just.pri1{border-top:0;padding-top:0}

/* Formularios e informes */
fieldset.esc{border:0;padding:0;margin:0;display:grid;gap:8px}
fieldset.esc legend{font-size:13.5px;color:var(--muted);font-weight:600;padding:0;margin-bottom:8px}
fieldset.esc .chk{margin:0}
.esc-b input{position:absolute;opacity:0;pointer-events:none}
.esc-b span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--s3);border:1px solid var(--line3);color:var(--fg);font-weight:700;cursor:pointer;transition:background .2s}
.esc-b input:checked+span{background:var(--soft);color:var(--brand);border-color:var(--soft)}
.esc-b input:focus-visible+span{outline:2px solid var(--soft);outline-offset:2px}
.resp-l .fila b{text-align:right;max-width:60%}
.inf-h{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}
.var{display:inline-block;font-size:12px;font-weight:700;margin-top:2px}
.var.sube{color:var(--ok)}.var.baja{color:var(--bad)}
.barras{display:flex;align-items:flex-end;gap:14px;height:220px;padding-top:24px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;min-width:0}
.bar i{display:block;width:min(56px,100%);height:var(--h);background:linear-gradient(180deg,var(--soft),var(--muted));border-radius:10px 10px 4px 4px;transform-origin:bottom;animation:crece .9s var(--d) cubic-bezier(.3,.7,.2,1) both}
.bar-v{font-size:12.5px;font-weight:700}
.bar .note{font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@keyframes crece{from{transform:scaleY(0)}}
.met input{min-height:36px;padding:6px 10px;max-width:130px}
@media (max-width:820px){ .barras{gap:8px;height:180px} .met input{max-width:none} }

/* Avisos dentro de la web e invitación a activar notificaciones */
#pops{position:fixed;top:calc(14px + var(--safet));right:max(16px,env(safe-area-inset-right,0px));z-index:120;display:grid;gap:8px;width:min(360px,calc(100vw - 32px))}
.pop{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;background:var(--pop);border:1px solid var(--pop-line);border-radius:18px;padding:12px 14px;color:var(--fg);box-shadow:0 16px 40px var(--sombra);animation:popIn .5s var(--suave)}
.pop:hover{border-color:var(--line3)}
.pop.sale{animation:popOut .38s cubic-bezier(.45,0,.25,1) forwards}
.pop-i{width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--brand);display:grid;place-items:center;flex:none}
.pop-t{display:grid;gap:2px;min-width:0}
.pop-t b{font-size:14px}
.pop-t span{font-size:13px;color:var(--muted2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@keyframes popIn{from{opacity:0;transform:translateY(-12px) scale(.98)}}
@keyframes popOut{to{opacity:0;transform:translateY(-10px) scale(.98)}}
#invitacion .inv-velo{position:fixed;inset:0;background:var(--velo);z-index:130;animation:velo .4s ease}
.inv{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:131;width:min(400px,calc(100vw - 32px));background:var(--pop);border:1px solid var(--pop-line);border-radius:24px;padding:26px 22px 22px;text-align:center;box-shadow:0 30px 80px var(--sombra);animation:invIn .55s var(--suave)}
.inv-i{width:52px;height:52px;border-radius:50%;background:var(--s3);color:var(--fg);display:inline-grid;place-items:center;margin-bottom:6px}
.inv-i svg{width:24px;height:24px}
.inv h2{justify-content:center;font-size:19px;margin:8px 0 8px}
.inv p{color:var(--muted2);margin:0 0 18px;line-height:1.55}
.inv-b{display:grid;gap:8px}
.inv-b .btn{justify-content:center;min-height:44px}
#invitacion.sale .inv{animation:invOut .38s forwards}#invitacion.sale .inv-velo{animation:velo .38s reverse forwards}
@keyframes invIn{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
@keyframes invOut{to{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
@keyframes velo{from{opacity:0}}
@media (max-width:820px){ #pops{left:12px;right:12px;width:auto} }

/* Trato de cortesía (Sr. o Sra.) en las fichas */
.trato{display:inline-flex;gap:6px;flex:none}
.trato .btn{min-width:52px;justify-content:center}
.trato-f{justify-content:flex-start;gap:16px;margin:-6px 0 14px;border-top:0}

/* ---------- Fotos de perfil (personas) y logos (marcas) ---------- */
.av.con-foto{padding:0;overflow:hidden;background:var(--s4)}
.av.con-foto img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.av.con-foto.es-logo img{object-fit:contain;padding:14%}
.av.grande{width:96px;height:96px;font-size:26px}
button.av.con-foto{padding:0}
.foto-campo{display:flex;align-items:center;gap:18px}
.foto-prev{flex:none}
.foto-txt{min-width:0}
.foto-ind{margin:6px 0 12px;padding-left:18px;color:var(--muted2);font-size:14px;line-height:1.55}
.foto-ind li{margin:2px 0}
.logos-fila{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
@media (max-width:520px){ .foto-campo{flex-direction:column;align-items:flex-start} }

/* ---------- Papelera del Programador ---------- */
.pap{margin-top:16px}
.pap-btn{width:100%;justify-content:space-between}
.pap-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.pap-cont{padding-top:14px}
.pap-acts{margin-bottom:6px}
.pap-lote{margin-top:16px}
.pap-lote>.note{display:block;margin-bottom:6px}
.pap-it{display:flex;align-items:center;gap:12px;width:100%;padding:10px 2px;border:0;border-top:1px solid var(--line2);background:none;color:var(--fg);text-align:left;font:inherit}
.pap-it b{flex:1;font-weight:600}
.pap-it.toca{padding:11px 12px;margin-top:6px;border:1px solid var(--line);border-radius:14px;background:var(--s1);transition:border-color .25s,background .25s}
.pap-it.toca:hover{border-color:var(--line3)}
.pap-it.toca[aria-pressed="true"]{border-color:var(--soft)}
.pap-it .circ{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--muted);flex:none;transition:background .25s,border-color .25s,box-shadow .25s}
.pap-it[aria-pressed="true"] .circ{background:var(--soft);border-color:var(--soft);box-shadow:inset 0 0 0 3px var(--brand)}
.btn:disabled{opacity:.45;pointer-events:none}

/* ---------- Deslizar hacia abajo para recargar (teléfonos y tabletas) ---------- */
html,body{overscroll-behavior-y:contain}
#recarga{position:fixed;left:50%;top:0;z-index:29;transform:translate(-50%,-60px);opacity:0;pointer-events:none}
#recarga .rc-c{width:40px;height:40px;border-radius:50%;background:var(--pop);color:var(--fg);border:1px solid var(--pop-line);display:grid;place-items:center;box-shadow:0 8px 20px var(--sombra);transition:background-color .3s ease,color .3s ease}
#recarga.listo .rc-c,#recarga.gira .rc-c{background:var(--soft);color:var(--brand);border-color:var(--soft)}
#recarga svg{width:19px;height:19px}
#recarga.gira svg{animation:rcGiro .8s linear infinite}
@keyframes rcGiro{to{transform:rotate(360deg)}}
#recarga.suelta,#main.suelta{transition:transform .45s var(--suave),opacity .35s ease}

/* ---------- Cambio de tema en la app del iPhone: un solo fundido ---------- */
.velo-tema{position:fixed;inset:-100px 0;z-index:200;opacity:0;pointer-events:none}
#carga.liso{transition:opacity .55s cubic-bezier(.25,.9,.3,1)}

/* Recarga tras cambiar de tema en el iPhone: la pantalla espera en el color anterior y se funde junto con la barra de estado */
html.desde-tema,html.desde-tema body,html.desde-tema #carga{background-color:var(--desde)!important}
html.desde-sale,html.desde-sale body,html.desde-sale #carga{transition:background-color .11s cubic-bezier(.3,0,.4,1)!important}

/* =====================================================================
   v33 · Las 26 modificaciones
   ===================================================================== */
.tb .badge.pt-b{min-width:8px;width:8px;height:8px;padding:0;left:calc(50% + 10px);top:14px}
/* Monto en dólares con su equivalente en bolívares debajo */
.doble{display:grid;line-height:1.2}
.doble small{font-size:12.5px;font-weight:600;color:var(--muted);margin-top:3px}
.k .doble b{font-size:inherit}
.k .doble small{font-size:12.5px}
td .doble{justify-items:end}
@media (min-width:821px){ td .doble{justify-items:start} }
.tasa-n{margin-top:18px}
/* Gráficas */
.graf-c{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px 4px}
.card .graf{margin-top:4px}
.graf .g-base{stroke:var(--line3);stroke-width:1}
.graf .g-b{fill:var(--soft);transform-box:fill-box;transform-origin:bottom;animation:crece .9s var(--d,0ms) cubic-bezier(.3,.7,.2,1) both}
.g-toca .g-pt{cursor:pointer;outline:none}
.g-toca .g-zona{fill:transparent}
.g-toca .g-pt:hover .g-p,.g-toca .g-pt:focus-visible .g-p{r:6}
.g-toca .g-pt.on .g-p{fill:var(--soft);stroke:var(--bg);stroke-width:2}
.g-toca .g-p{transition:r .3s var(--suave)}
.graf-p{display:grid;gap:4px}
.graf-p b{font-size:14px}
.resp-mes{margin:10px 0 0}
.resp-mes>b{display:block;margin:6px 0 4px}
/* Listas sin recuadro (lo que no se toca no lleva recuadro) */
.plano-l{display:grid}
.fila-p{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line2)}
.fila-p:first-child{border-top:0;padding-top:4px}
.fila-p>div{min-width:0;flex:1}
.fila-p p{margin:4px 0 0;word-break:break-word}
.fila-p .pill{flex:none}
.hist{display:grid;gap:10px;margin-top:10px;padding-left:12px;border-left:2px solid var(--line3)}
.hist-i p{margin:4px 0 0}
.alta .chev{flex:none;transition:transform .5s var(--suave)}
.alta[aria-expanded="true"] .chev{transform:rotate(180deg)}
.alta-d{padding:2px 0 10px 12px;border-left:2px solid var(--line3);margin:0 0 6px 2px}
.res-l{margin-top:4px}
/* Soporte: estados en el semáforo */
.est-q .chk{margin:0;padding:6px 12px;border-radius:99px;border:1px solid var(--line3)}
.est-q .est-p-bad:has(input:checked){background:var(--badbg);border-color:var(--badline);color:var(--bad)}
.est-q .est-p-warn:has(input:checked){background:var(--warnbg);border-color:transparent;color:var(--warn)}
.est-q .est-p-ok:has(input:checked){background:var(--okbg);border-color:transparent;color:var(--ok)}
/* Nuevo cliente */
.nuevo-cli h3{margin:10px 0 -6px;font-size:15px;color:var(--fg)}
/* Notas de voz */
.ch-voz{width:min(260px,100%);height:38px;display:block}
.ch-mic.on{background:var(--badbg);color:var(--bad)}
.ch-grab{flex:1;display:flex;align-items:center;gap:10px;min-height:40px;padding:0 6px 0 14px;border-radius:20px;background:var(--input);border:1px solid var(--input-line);font-variant-numeric:tabular-nums;font-weight:600}
.ch-grab .btn{margin-left:auto}
.ch-grab .rec{width:10px;height:10px;border-radius:50%;background:var(--bad);animation:latido 1.2s ease-in-out infinite}
@keyframes latido{50%{opacity:.35;transform:scale(.8)}}
.ch-f.grabando{animation:aparece .4s var(--suave)}
/* Programador: seleccionar mensajes */
.ch-m.sel-m{cursor:pointer;position:relative;padding-left:34px}
.ch-m.sel-m .circ{position:absolute;left:10px;top:12px;width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;opacity:.7;transition:background .25s,box-shadow .25s}
.ch-m.sel-m[aria-pressed="true"]{box-shadow:0 0 0 2px var(--soft)}
.ch-m.sel-m[aria-pressed="true"] .circ{background:currentColor;opacity:1}
.ch-selb{padding:10px 12px;border-top:1px solid var(--line2)}
.ch-selb .confirma{margin:0}
/* Sin sección del menú a la vista (Configuración, Soporte): la barra queda lisa, sin media luna */
.tabbar.sin-gota::before,.tabbar.sin-gota::after,.rail.sin-gota::before,.rail.sin-gota::after{-webkit-mask-image:none!important;mask-image:none!important}
.alta{display:flex!important;align-items:center}
.archivo-btn{width:max-content}