/* Tipografía cargada por en index.html (Schibsted Grotesk display + Inter body).
Marca "Operaciones, en claro": papel cálido + tinta casi negra + naranja señal.
Un producto único: tema claro coherente entre landing y app, sin glows ni degradados de plantilla. */
:root {
/* Superficies claras (todo el producto) */
--bg:#F4F2EE; /* papel cálido — fondo de app */
--bg2:#FFFFFF; /* tarjetas/superficies */
--bg3:#FAF8F4; /* superficie sutil */
--sidebar:#211F1B;--sidebar2:#17150F; /* charcoal cálido para el panel lateral */
--border:#E7E2D9;--border2:#D8D2C6;
--primary:#E8562A;--primary2:#C8461F; /* naranja señal — acento de marca */
--green:#1F9D6B;--green2:#178055;
--red:#E0483B;--red2:#C43A2E;
--yellow:#E8A013;--orange:#E8562A;
--purple:#8B5CF6;--teal:#0E9C7E;
--text:#1B1917;--text2:#5E5A52;--text3:#6F6A5E; /* text3 oscurecido para contraste AA (Fase 6) */
--white:#FFFFFF;
--sh:0 1px 2px rgba(30,24,15,.06);
--sh2:0 4px 14px -6px rgba(30,24,15,.12);
--sh3:0 18px 40px -18px rgba(30,24,15,.22);
--r:14px;--r2:10px;--r3:7px;
/* Marca / tokens compartidos */
--ink:#1B1917; /* tinta casi negra cálida */
--ink2:#24211D; /* band oscura de contraste (footer/CTA) */
--paper:#F4F2EE;
--brand:#E8562A; /* naranja señal */
--brand-2:#C8461F; /* naranja profundo (hover) */
--brand-soft:#FBEEE7; /* naranja lavado para fondos suaves */
--line:#E7E2D9; /* hairline sobre claro */
--on-dark:#F3EFE8; /* texto sobre band oscura */
--on-dark-mut:#ABA498; /* texto secundario sobre band oscura */
--font-display:'Schibsted Grotesk','Inter',system-ui,sans-serif;
--font-body:'Inter',system-ui,-apple-system,sans-serif;
--font-mono:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;overflow:hidden}
/* SCREENS */
.sc{display:none;width:100vw;height:100vh;overflow:hidden}
.sc.on{display:flex}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--r2);font-family:'Inter',sans-serif;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .15s;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(232,86,42,.3)}
.btn-success{background:var(--green);color:#fff}.btn-success:hover{background:var(--green2);transform:translateY(-1px)}
.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{background:var(--red2)}
.btn-outline{background:transparent;border:1.5px solid var(--border2);color:var(--text2)}.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--brand-soft)}
.btn-ghost{background:transparent;color:var(--text2);padding:8px 12px}.btn-ghost:hover{background:var(--bg3)}
.btn-full{width:100%}.btn-lg{padding:14px 28px;font-size:15px;border-radius:var(--r)}.btn-sm{padding:7px 14px;font-size:12px}
/* INPUTS */
.inp{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r2);color:var(--text);padding:11px 14px;font-family:'Inter',sans-serif;font-size:16px;outline:none;transition:all .2s}
.inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(232,86,42,.1);background:var(--white)}
.inp::placeholder{color:var(--text3)}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:6px}
/* ════════ ACCESIBILIDAD (Fase 6) ════════ */
/* Foco visible SIEMPRE (teclado): antes había outline:none sin reemplazo en varios sitios. */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.inp:focus-visible,.wc-btn:focus-visible,.wk-chip:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
/* Elementos clicables no nativos (divs con onclick) que se hacen operables por teclado. */
[role="button"]{cursor:pointer}
/* Objetivos táctiles mínimos ~44px en controles solo-icono. */
.btn-logout,.mo-close,.chat-icon-btn,.btn-icon-only,.consent-x{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
/* Respetar "reducir movimiento". */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Clase utilitaria: texto solo para lectores de pantalla. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:12px;font-weight:600}
.bg-green{background:#DCFCE7;color:#15803D}.bg-red{background:#FEE2E2;color:#B91C1C}
.bg-yellow{background:#FEF9C3;color:#92400E}.bg-blue{background:#DBEAFE;color:#1D4ED8}
.bg-gray{background:var(--bg3);color:var(--text2)}.bg-purple{background:#EDE9FE;color:#6D28D9}
/* ALERTS */
.al{padding:12px 16px;border-radius:var(--r2);font-size:13px;font-weight:500;margin-bottom:16px;display:flex;align-items:flex-start;gap:10px}
.al-err{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.al-ok{background:#F0FDF4;border:1px solid #BBF7D0;color:#166534}
.al-info{background:var(--bg3);border:1px solid var(--border2);color:var(--text)}
.al-warn{background:#FFFBEB;border:1px solid #FDE68A;color:#92400E}
/* ════════ ICONOS (sprite SVG, estilo trazo) ════════ */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sb-ico{display:inline-flex;align-items:center;justify-content:center;width:20px}
.sb-ico .ic{width:18px;height:18px}
.kpi-ico{display:block;margin-bottom:10px;color:var(--text3)}
.kpi-ico .ic{width:26px;height:26px}
.kpi.bl .kpi-ico{color:var(--primary)}.kpi.gr .kpi-ico{color:var(--green)}
.kpi.rd .kpi-ico{color:var(--red)}.kpi.yl .kpi-ico{color:var(--yellow)}
.pg-title .ic{width:20px;height:20px;vertical-align:-.16em;color:var(--primary)}
.panel-title .ic{width:15px;height:15px;vertical-align:-.18em;color:var(--primary)}
.btn .ic,.at-cta .ic{width:16px;height:16px}
.btn-icon-only .ic,.chat-icon-btn .ic{width:18px;height:18px}
.btn-logout .ic{width:18px;height:18px}
.auth-logo-ico .ic{width:26px;height:26px;color:var(--brand-2)}
.auth-logo-ico.worker .ic{color:var(--text2)}
.lp-feat-ico{color:var(--brand-2)}.lp-feat-ico .ic{width:24px;height:24px}
.dpb-ico .ic{width:26px;height:26px}
.banner-ico .ic{width:24px;height:24px}
.cam-head-title .ic{width:14px;height:14px;vertical-align:-.16em}
.call-btn .ic{width:22px;height:22px}
.consent-x .ic,.mo-close .ic{width:18px;height:18px}
/* ════════ LANDING ════════ */
#s-land{flex-direction:column;align-items:center;background:var(--ink);padding:32px 24px;overflow-y:auto;position:relative}
#s-land::before,#s-land::after{content:none}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,20px) scale(1.05)}}
.land-inner{position:relative;z-index:1;width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center;margin-block:auto}
.land-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(232,86,42,.15);border:1px solid rgba(232,86,42,.3);border-radius:100px;padding:6px 16px;font-size:12px;font-weight:600;color:#93C5FD;margin-bottom:24px}
.land-title{font-size:clamp(36px,5vw,58px);font-weight:800;color:#fff;letter-spacing:-1.5px;line-height:1.1;margin-bottom:16px;text-align:center}
.land-title .acc{background:linear-gradient(135deg,#60A5FA,#34D399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.land-sub{font-size:17px;color:rgba(255,255,255,.55);max-width:520px;margin:0 auto 32px;line-height:1.6;text-align:center}
.land-stats{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}
.ls-val{font-size:24px;font-weight:800;color:#fff;font-family:var(--font-mono);text-align:center}
.ls-lbl{font-size:12px;color:rgba(255,255,255,.4);margin-top:2px;text-align:center}
/* Account type cards — 3 options (tema claro) */
.at-lbl{font-size:13px;font-weight:600;color:var(--text3);letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;text-align:center}
.at-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:100%;max-width:960px;margin:0 auto}
.at-card{background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:30px 26px;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;text-align:left;position:relative;box-shadow:var(--sh)}
.at-card:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--border2)}
.at-card.admin{border-color:#F3D9CC}
.at-card.admin:hover{border-color:var(--brand)}
.at-ico{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 0 18px;background:var(--bg3);border:1px solid var(--border)}
.personal .at-ico{background:#EAF6EF;border-color:#C6E7D5}
.admin .at-ico{background:var(--brand-soft);border-color:#F3D9CC}
.worker .at-ico{background:var(--bg3);border-color:var(--border2)}
.at-title{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink);margin-bottom:7px;letter-spacing:-.3px}
.at-desc{font-size:13px;color:var(--text2);line-height:1.55;margin-bottom:18px}
.at-feats{list-style:none;text-align:left;margin-bottom:20px}
.at-feats li{font-size:12.5px;color:var(--text2);padding:4px 0;display:flex;align-items:center;gap:9px}
.at-feats li::before{font-weight:800;font-size:10px;flex-shrink:0;content:'✓';color:var(--brand)}
.personal .at-feats li::before{color:var(--green)}
.at-price{font-size:12px;font-weight:700;padding:6px 14px;border-radius:100px;display:inline-block;margin-bottom:14px;background:var(--brand-soft);color:var(--brand-2);border:1px solid #F3D9CC}
.personal .at-price{background:#EAF6EF;color:var(--green2);border-color:#C6E7D5}
.worker .at-price{background:var(--bg3);color:var(--text2);border-color:var(--border2)}
.at-cta{width:100%;padding:12px;border-radius:10px;font-family:var(--font-display);font-size:13.5px;font-weight:700;border:none;cursor:pointer;transition:all .15s;display:block;text-align:center}
.admin .at-cta{background:var(--brand);color:#fff}
.admin .at-cta:hover{background:var(--brand-2)}
.personal .at-cta{background:var(--ink);color:var(--on-dark)}
.personal .at-cta:hover{background:#000}
.worker .at-cta{background:var(--bg2);color:var(--ink);border:1.5px solid var(--border2)}
.worker .at-cta:hover{border-color:var(--ink)}
.land-footer{margin-top:24px;font-size:13px;color:rgba(255,255,255,.35);text-align:center}
.land-footer a{color:#60A5FA;font-weight:600;cursor:pointer;text-decoration:none}
.trust-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.trust-item{font-size:12px;color:rgba(255,255,255,.3)}
/* ════════ AUTH ════════ */
#s-auth{flex-direction:column;align-items:center;background:var(--bg);color:var(--text);padding:24px;overflow-y:auto;position:relative}
.auth-wrap{width:100%;max-width:460px;position:relative;z-index:1;margin-block:auto}
.auth-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text2);cursor:pointer;margin-bottom:24px;border:none;background:none;padding:0;transition:color .15s}
.auth-back:hover{color:var(--ink)}
.auth-logo{text-align:center;margin-bottom:24px}
.auth-logo-ico{width:56px;height:56px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 12px;background:var(--bg2);border:1px solid var(--border);box-shadow:var(--sh)}
.auth-logo-ico.personal{border-color:var(--brand);background:var(--brand-soft)}
.auth-logo-ico.admin{border-color:var(--brand);background:var(--brand-soft)}
.auth-logo-ico.worker{border-color:var(--border2)}
.auth-logo h1{font-family:var(--font-display);font-size:23px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
.auth-logo p{font-size:13px;color:var(--text2);margin-top:4px}
.auth-card{background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:32px;box-shadow:var(--sh2)}
.auth-tabs{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);padding:4px;margin-bottom:24px}
.auth-tab{flex:1;text-align:center;padding:9px;border-radius:var(--r3);font-family:var(--font-display);font-size:13px;font-weight:600;cursor:pointer;color:var(--text2);transition:all .2s}
.auth-tab.on{background:var(--brand);color:#fff}
.auth-form{display:none}
.auth-form.on{display:block}
.auth-card .inp{background:var(--bg3);border:1.5px solid var(--border);color:var(--ink)}
.auth-card .inp:focus{border-color:var(--brand);background:var(--bg2);box-shadow:0 0 0 3px rgba(232,86,42,.12)}
.auth-card .inp::placeholder{color:var(--text3)}
.auth-card label{color:var(--text2)}
.wc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.wc-btn{background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r3);color:var(--text2);padding:9px 4px;font-size:13px;font-weight:700;cursor:pointer;text-align:center;transition:all .15s;font-variant-numeric:tabular-nums}
.wc-btn:hover,.wc-btn.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-2)}
.plan-prev{background:var(--brand-soft);border:1px solid #F3D9CC;border-radius:var(--r2);padding:14px 16px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
.pp-left{font-size:13px;color:var(--text2)}
.pp-left strong{color:var(--ink);display:block;font-size:14px;margin-bottom:2px}
.pp-price{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--brand-2)}
.pp-period{font-size:11px;color:var(--text3);text-align:right}
.free-note{background:#EAF6EF;border:1px solid #C6E7D5;border-radius:var(--r2);padding:10px 14px;font-size:12px;color:var(--green2);margin-bottom:16px;display:flex;gap:8px;align-items:center}
.auth-foot{text-align:center;margin-top:16px;font-size:12px;color:var(--text3)}
.pass-hint{background:var(--brand-soft);border:1px solid #F3D9CC;border-radius:var(--r2);padding:10px 14px;font-size:12px;color:var(--brand-2);margin-bottom:16px}
/* ════════ APP LAYOUT ════════ */
#s-app{flex-direction:row}
.sidebar{width:240px;background:var(--sidebar);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sb-logo{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-logo-wrap{display:flex;align-items:center;gap:10px}
.sb-logo-ico{width:36px;height:36px;background:var(--primary);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.sb-logo-text{font-size:13px;font-weight:700;color:#fff;line-height:1.2}
.sb-logo-sub{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.5px}
.sb-co{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-co-name{font-size:12px;font-weight:600;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-co-email{font-size:11px;color:rgba(255,255,255,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-timer{margin-top:8px;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.25);border-radius:6px;padding:8px 10px}
.sb-timer-label{font-size:9px;color:#6EE7B7;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px}
.sb-timer-days{font-family:var(--font-mono);font-size:22px;font-weight:700;color:#34D399;line-height:1}
.sb-timer-sub{font-size:10px;color:rgba(255,255,255,.4);margin-top:2px}
.sb-plan-badge{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:100px;font-size:10px;font-weight:700;background:rgba(232,86,42,.25);color:#FBD9C9;letter-spacing:.5px}
.sb-role-badge{display:inline-block;padding:2px 10px;border-radius:100px;font-size:10px;font-weight:700;margin-top:4px}
.sb-role-badge.admin{background:rgba(232,86,42,.25);color:#FBD9C9}
.sb-role-badge.worker{background:rgba(255,255,255,.12);color:rgba(255,255,255,.75)}
.sb-role-badge.personal{background:rgba(16,185,129,.3);color:#6EE7B7}
.sb-nav{padding:12px 0;flex:1}
.sb-sec-lbl{padding:8px 20px 4px;font-size:10px;font-weight:700;color:rgba(255,255,255,.25);letter-spacing:1px;text-transform:uppercase}
.sb-item{display:flex;align-items:center;gap:10px;padding:10px 20px;color:rgba(255,255,255,.6);cursor:pointer;transition:all .15s;border-left:3px solid transparent;font-size:13px;font-weight:500}
.sb-item:hover{color:#fff;background:rgba(255,255,255,.05)}
.sb-item.on{color:#fff;background:rgba(255,255,255,.08);border-left-color:var(--primary)}
.sb-ico{font-size:16px;width:20px;text-align:center}
.sb-bottom{padding:14px 20px;border-top:1px solid rgba(255,255,255,.08)}
.sb-user{display:flex;align-items:center;gap:10px}
.sb-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.sb-avatar img{width:100%;height:100%;object-fit:cover}
.sb-user-info{flex:1;min-width:0}
.sb-uname{font-size:12px;font-weight:600;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-urole{font-size:10px;color:rgba(255,255,255,.4)}
.btn-logout{background:transparent;border:none;cursor:pointer;color:rgba(255,255,255,.4);font-size:16px;padding:4px;transition:color .15s}
.btn-logout:hover{color:var(--red)}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{background:var(--white);border-bottom:1px solid var(--border);padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.topbar-title{font-size:17px;font-weight:700}
.topbar-sub{font-size:12px;color:var(--text3);margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:10px}
.session-clock{font-family:var(--font-mono);font-size:13px;color:var(--text3)}
.pg{flex:1;overflow-y:auto;padding:24px;display:none}
.pg.on{display:block}
.pg-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.pg-title{font-size:18px;font-weight:700}
.pg-sub{font-size:13px;color:var(--text3);margin-top:2px}
/* ════════ VIGILANCIA ════════ */
.watch-grid{display:grid;grid-template-columns:1fr 300px;gap:20px;height:calc(100vh - 60px - 48px)}
.cam-card{background:var(--ink);border-radius:var(--r);overflow:hidden;position:relative;display:flex;flex-direction:column}
.cam-head{padding:10px 16px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between}
.cam-head-title{font-size:12px;font-weight:600;color:rgba(255,255,255,.7)}
.cam-rec{display:flex;align-items:center;gap:6px;font-size:11px;color:#6EE7B7;font-weight:600;letter-spacing:1px}
.rec-dot{width:6px;height:6px;border-radius:50%;background:#34D399;animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.cam-body{flex:1;position:relative;overflow:hidden;min-height:0}
#video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
#ov-canvas{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1);pointer-events:none}
#load-ov{position:absolute;inset:0;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:10}
.load-spin{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.load-txt{font-size:12px;color:rgba(255,255,255,.5)}
.load-bar{width:180px;height:3px;background:rgba(255,255,255,.1);border-radius:100px;overflow:hidden}
.load-fill{height:100%;background:var(--primary);border-radius:100px;width:0%;transition:width .4s ease}
.cam-hud{position:absolute;top:12px;left:12px;background:rgba(27,25,23,.85);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:var(--r2);padding:8px 12px;font-size:12px;font-weight:600;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:6px}
.cam-hud.ok{border-color:rgba(16,185,129,.4);color:#6EE7B7}
.cam-hud.bad{border-color:rgba(239,68,68,.4);color:#FCA5A5}
.abs-big{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:80px;font-weight:700;color:rgba(239,68,68,.9);text-shadow:0 0 40px rgba(239,68,68,.5);opacity:0;transition:opacity .3s;pointer-events:none;line-height:1}
.abs-big.on{opacity:1}
.worker-bar{padding:10px 16px;background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:12px}
.worker-bar label{font-size:11px;color:rgba(255,255,255,.4);white-space:nowrap}
.worker-sel{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:var(--r3);color:rgba(255,255,255,.85);padding:7px 10px;font-family:'Inter',sans-serif;font-size:13px;outline:none;cursor:pointer}
/* Side panel */
.wpanel{display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.panel-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:14px}
.panel-title{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.stats-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat-mini{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r3);padding:10px;text-align:center}
.stat-mini-val{font-family:var(--font-display);font-size:23px;font-weight:800;line-height:1;margin-bottom:2px;font-variant-numeric:tabular-nums}
.smv-g{color:var(--green)}.smv-r{color:var(--red)}.smv-b{color:var(--primary)}.smv-y{color:var(--yellow)}
.stat-mini-lbl{font-size:10px;color:var(--text3)}
.cfg-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cfg-row label{font-size:12px;color:var(--text2)}
.cfg-val{font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--primary)}
input[type=range]{width:100%;accent-color:var(--primary);cursor:pointer;margin-bottom:8px}
.break-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.break-type-btn{background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r3);color:var(--text2);padding:7px;font-size:12px;font-weight:600;cursor:pointer;text-align:center;transition:all .15s}
.break-type-btn:hover,.break-type-btn.on{border-color:var(--primary);color:var(--primary);background:var(--brand-soft)}
.dur-row{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.dur-btn{background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r3);color:var(--text2);padding:5px 8px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}
.dur-btn.on{border-color:var(--primary);color:var(--primary);background:var(--brand-soft)}
.log-wrap{flex:1;overflow-y:auto;min-height:0}
.log-entry{display:flex;gap:8px;padding:4px 0;border-bottom:1px solid var(--bg3);align-items:flex-start}
.log-time{font-size:10px;color:var(--text3);white-space:nowrap;padding-top:1px;font-family:var(--font-mono)}
.log-msg{flex:1;font-size:11px;color:var(--text2)}
.log-msg.ok{color:var(--green2)}.log-msg.bad{color:var(--red2);font-weight:600}
.log-msg.info{color:var(--primary)}.log-msg.em{color:var(--orange)}.log-msg.xp{color:var(--purple)}
.excuse-btn{font-size:10px;color:var(--text3);cursor:pointer;text-decoration:underline;margin-left:4px}
.excuse-inp{width:100%;margin-top:3px;font-size:11px;border:1px solid var(--border);border-radius:4px;padding:4px 8px;outline:none;font-family:'Inter',sans-serif}
/* ════════ TRABAJADORES (Admin) ════════ */
.workers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.wk-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:18px;transition:box-shadow .2s}
.wk-card:hover{box-shadow:var(--sh2)}
.wk-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.wk-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.wk-avatar img{width:100%;height:100%;object-fit:cover}
.wk-name{font-size:14px;font-weight:700}
.wk-job{font-size:12px;color:var(--text3)}
.wk-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.ws-item{background:var(--bg3);border-radius:var(--r3);padding:8px;text-align:center}
.ws-val{font-size:16px;font-weight:700;color:var(--text);font-family:var(--font-mono)}
.ws-lbl{font-size:10px;color:var(--text3);margin-top:1px}
.wk-foot{display:flex;align-items:center;justify-content:space-between}
.wk-pay-status{font-size:11px;color:var(--text3)}
/* Password chip on worker card */
.wk-pass-chip{background:var(--brand-soft);border:1px solid #F3D9CC;border-radius:6px;padding:6px 10px;font-size:11px;color:var(--brand-2);font-family:var(--font-mono);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.wk-pass-chip span{font-weight:700;letter-spacing:1px}
.add-wk-card{background:var(--bg3);border:2px dashed var(--border2);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;min-height:160px;transition:all .2s}
.add-wk-card:hover{border-color:var(--primary);background:var(--brand-soft)}
.add-wk-card .ic{width:26px;height:26px;color:var(--text3)}
/* Barra de herramientas del panel (Fase 3): buscar / filtrar / ordenar / agrupar */
.wk-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding:12px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r)}
.wk-search{display:flex;align-items:center;gap:8px;flex:1;min-width:220px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:0 12px}
.wk-search .ic{width:16px;height:16px;color:var(--text3);flex-shrink:0}
.wk-search input{flex:1;border:none;background:none;outline:none;padding:10px 0;font-size:14px;color:var(--text);font-family:var(--font-body)}
.wk-chips{display:flex;gap:6px;flex-wrap:wrap}
.wk-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);border-radius:100px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s}
.wk-chip:hover{border-color:var(--border2)}
.wk-chip.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-2)}
.wk-chip b{font-variant-numeric:tabular-nums;font-weight:800;opacity:.85}
.wk-sort{width:auto;min-width:170px;padding:9px 12px;font-size:13px;cursor:pointer}
.wk-group{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;white-space:nowrap}
.wk-group input{accent-color:var(--primary);width:16px;height:16px;cursor:pointer}
.wk-group-head{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:6px 0 2px;font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--ink)}
.wk-group-head span{font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--text3);background:var(--bg3);border:1px solid var(--border);border-radius:100px;padding:2px 9px}
.wk-group-head::after{content:'';flex:1;height:1px;background:var(--border)}
.wk-empty{grid-column:1/-1;text-align:center;padding:40px 16px;color:var(--text3)}
.wk-team-tag{display:inline-block;font-size:10.5px;font-weight:700;color:var(--brand-2);background:var(--brand-soft);border:1px solid #F3D9CC;border-radius:100px;padding:1px 8px;margin-left:6px;vertical-align:1px}
/* ════════ WORKER VIEW (mi avance) ════════ */
.worker-view{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.day-score-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:24px;text-align:center}
.day-score-big{font-family:var(--font-display);font-size:74px;font-weight:800;line-height:1;margin:12px 0;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.day-score-big.excellent{color:var(--green)}
.day-score-big.good{color:#80C080}
.day-score-big.average{color:var(--yellow)}
.day-score-big.poor{color:var(--red)}
.day-score-label{font-size:12px;color:var(--text3);letter-spacing:1px;text-transform:uppercase}
.day-score-grade{font-size:20px;font-weight:700;margin-top:6px}
.worker-history{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:20px}
/* ════════ DASHBOARD (Admin) ════════ */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:18px;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.kpi.bl::before{background:var(--primary)}.kpi.gr::before{background:var(--green)}
.kpi.rd::before{background:var(--red)}.kpi.yl::before{background:var(--yellow)}
.kpi-ico{font-size:24px;margin-bottom:8px;display:block}
.kpi-lbl{font-size:10px;color:var(--text3);font-weight:500;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.kpi-val{font-size:30px;font-weight:800;color:var(--text);font-family:var(--font-display);letter-spacing:-1px;font-variant-numeric:tabular-nums}
.kpi.bl .kpi-val{color:var(--primary)}.kpi.gr .kpi-val{color:var(--green)}
.kpi.rd .kpi-val{color:var(--red)}.kpi.yl .kpi-val{color:var(--yellow)}
.kpi-sub{font-size:10px;color:var(--text3);margin-top:3px}
.wk-table{width:100%;border-collapse:collapse}
.wk-table th,.wk-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}
.wk-table th{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;background:var(--bg3)}
.wk-table td{font-size:13px}
/* ════════ PERFIL ════════ */
.profile-grid{display:grid;grid-template-columns:260px 1fr;gap:20px}
.profile-photo-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:24px;text-align:center}
.profile-avatar-big{width:90px;height:90px;border-radius:50%;margin:0 auto 14px;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;overflow:hidden;position:relative;cursor:pointer}
.profile-avatar-big img{width:100%;height:100%;object-fit:cover}
.photo-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;border-radius:50%;font-size:20px}
.profile-avatar-big:hover .photo-overlay{opacity:1}
.profile-form-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:24px}
/* ════════ MODALS ════════ */
.mo{display:none;position:fixed;inset:0;background:rgba(27,25,23,.6);backdrop-filter:blur(4px);z-index:900;align-items:center;justify-content:center;padding:24px}
.mo.on{display:flex}
.mo-box{background:var(--white);border-radius:16px;width:100%;max-width:500px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);animation:moIn .2s ease}
.mo-box.wide{max-width:700px}
/* Ventanas más altas que la pantalla: cabecera (✕) y botones fijos, solo el contenido se desplaza */
.mo-box{max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);display:flex;flex-direction:column}
.mo-head,.mo-foot{flex-shrink:0}
.mo-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex:1 1 auto;min-height:0}
@keyframes moIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.mo-head{padding:20px 24px 0;display:flex;justify-content:space-between;align-items:flex-start}
.mo-title{font-size:17px;font-weight:700}
.mo-sub{font-size:13px;color:var(--text3);margin-top:2px}
.mo-close{background:none;border:none;cursor:pointer;font-size:20px;color:var(--text3);padding:4px;border-radius:var(--r3);transition:all .15s}
.mo-close:hover{background:var(--bg3);color:var(--text)}
.mo-body{padding:20px 24px}
.mo-foot{padding:0 24px 20px;display:flex;gap:10px;justify-content:flex-end}
/* ════════ BREAK OVERLAY ════════ */
#break-ov{display:none;position:fixed;inset:0;background:linear-gradient(135deg,rgba(232,86,42,.97),rgba(232,86,42,.97));backdrop-filter:blur(8px);z-index:800;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
#break-ov.on{display:flex}
.bov-ico{font-size:64px;display:block;margin-bottom:6px}
.bov-type{font-size:12px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:2px;text-transform:uppercase}
.bov-title{font-size:20px;font-weight:800;color:#fff}
.bov-cd{font-size:88px;font-weight:800;color:#fff;font-family:var(--font-mono);line-height:1;text-shadow:0 4px 20px rgba(0,0,0,.2)}
.bov-obs{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--r2);padding:8px 14px;font-size:13px;color:rgba(255,255,255,.8);max-width:380px;font-style:italic}
/* ════════ ALARM ════════ */
#alarm-banner{position:fixed;top:0;left:0;right:0;background:linear-gradient(90deg,#991B1B,#B91C1C);z-index:700;display:none;align-items:center;gap:16px;padding:12px 24px;box-shadow:0 4px 20px rgba(239,68,68,.4);animation:slideDown .3s ease}
#alarm-banner.on{display:flex}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.banner-ico{font-size:26px;animation:wiggle .5s infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.banner-info{flex:1}
.banner-main{font-size:15px;font-weight:800;color:#fff}
.banner-sub{font-size:12px;color:rgba(255,255,255,.8);margin-top:2px}
.banner-ret{display:none;font-size:12px;font-weight:700;color:#BBF7D0;margin-top:2px}
.banner-ret.on{display:block}
/* ════════ ABANDON ════════ */
#abandon-ov{display:none;position:fixed;inset:0;background:rgba(127,0,0,.97);z-index:1100;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;animation:pulseRed 1s ease-in-out infinite alternate}
#abandon-ov.on{display:flex}
@keyframes pulseRed{0%{background:rgba(127,0,0,.97)}100%{background:rgba(185,28,28,.97)}}
.abandon-ico{font-size:72px;animation:bounce .5s infinite alternate}
@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(-12px)}}
.abandon-title{font-size:28px;font-weight:800;color:#fff}
.abandon-sub{font-size:15px;color:rgba(255,255,255,.7);max-width:380px;line-height:1.5}
.abandon-time{font-family:var(--font-mono);font-size:44px;font-weight:700;color:#FCA5A5}
/* ════════ PAYWALL ════════ */
.mo#paywall-ov{z-index:1000;background:rgba(27,25,23,.94)}
.paywall-card{background:var(--white);border-radius:20px;padding:36px;max-width:480px;width:100%;text-align:center;box-shadow:0 25px 60px rgba(0,0,0,.3)}
.pw-ico{font-size:48px;display:block;margin-bottom:14px}
.pw-title{font-size:22px;font-weight:800;margin-bottom:8px}
.pw-sub{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:20px}
.pw-price-box{background:var(--brand-soft);border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:20px}
.pw-price{font-size:36px;font-weight:800;color:var(--primary);font-family:var(--font-mono)}
.pw-period{font-size:12px;color:var(--text3);margin-top:3px}
.pw-feats{list-style:none;text-align:left;margin-bottom:20px}
.pw-feats li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);padding:5px 0}
.pw-feats li::before{content:'✓';color:var(--green);font-weight:700;font-size:14px}
/* CONFIG */
.cfg-lock-view,.cfg-unlock-view{display:none}
.cfg-lock-view.on,.cfg-unlock-view.on{display:block}
/* Toast */
.toast{position:fixed;bottom:24px;right:24px;background:var(--sidebar);color:#fff;padding:12px 18px;border-radius:var(--r);box-shadow:var(--sh3);font-size:13px;font-weight:500;z-index:2000;display:flex;align-items:center;gap:10px;animation:toastIn .3s ease;max-width:340px}
@keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* ════════ PLANS PAGE ════════ */
.plans-hero{text-align:center;margin-bottom:28px}
.plans-hero h2{font-size:22px;font-weight:800;margin-bottom:6px}
.plans-hero p{font-size:13px;color:var(--text2);max-width:480px;margin:0 auto}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-bottom:24px}
.plan-card{background:var(--white);border:2px solid var(--border);border-radius:var(--r);padding:24px;position:relative;transition:all .2s}
.plan-card.recommended{border-color:var(--primary);box-shadow:0 0 0 4px rgba(232,86,42,.08)}
.plan-card .plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;font-size:11px;font-weight:700;padding:3px 14px;border-radius:100px;white-space:nowrap}
.plan-name{font-size:16px;font-weight:800;margin-bottom:4px}
.plan-price{font-size:32px;font-weight:800;color:var(--primary);font-family:var(--font-mono);line-height:1;margin:10px 0 2px}
.plan-period{font-size:11px;color:var(--text3);margin-bottom:14px}
.plan-feats{list-style:none;margin-bottom:18px}
.plan-feats li{font-size:12px;color:var(--text2);padding:4px 0;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--bg3)}
.plan-feats li:last-child{border:none}
.plan-feats li::before{content:'✓';color:var(--green);font-weight:700;flex-shrink:0}
.plan-feats li.no::before{content:'✗';color:var(--text3)}
.plan-feats li.no{color:var(--text3)}
.plan-current-badge{display:inline-flex;align-items:center;gap:6px;background:#F0FDF4;border:1px solid #BBF7D0;color:#166534;border-radius:var(--r2);padding:10px 14px;font-size:13px;font-weight:600;margin-bottom:16px}
.worker-plan-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:28px;max-width:500px;margin:0 auto;text-align:center}
.worker-plan-ico{font-size:48px;margin-bottom:12px}
/* Landing hint */
.land-plans-hint{margin-top:16px;margin-bottom:8px;font-size:13px;color:rgba(255,255,255,.35);display:flex;align-items:center;gap:10px;justify-content:center}
.land-plans-hint a{color:var(--primary);font-weight:600;cursor:pointer;text-decoration:none}
/* Worker daily plan banner */
.daily-plan-banner{background:linear-gradient(135deg,#2A2723,#1B1917);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:20px 24px;margin-bottom:20px;display:flex;align-items:center;gap:20px}
.dpb-ico{font-size:36px;flex-shrink:0}
.dpb-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px}
.dpb-sub{font-size:12px;color:rgba(255,255,255,.5)}
.dpb-goal{margin-left:auto;text-align:right;flex-shrink:0}
.dpb-goal-val{font-size:24px;font-weight:800;color:#34D399;font-family:var(--font-mono)}
.dpb-goal-lbl{font-size:10px;color:rgba(255,255,255,.4);margin-top:2px}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:100px}
/* ════════ CONSENTIMIENTO (T&C + Datos) ════════ */
#consent-ov{display:none;position:fixed;inset:0;z-index:9999;background:rgba(8,12,22,.82);backdrop-filter:blur(6px);padding:20px;overflow-y:auto}
#consent-ov.on{display:flex;align-items:flex-start;justify-content:center}
.consent-card{background:var(--white);border-radius:18px;max-width:640px;width:100%;margin:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);overflow:hidden;position:relative}
.consent-head{background:linear-gradient(135deg,#2A2723,#1B1917);color:#fff;padding:26px 28px 22px;text-align:center;position:relative}
.consent-head .c-ico{font-size:34px}
.consent-head h2{font-size:21px;font-weight:800;margin:8px 0 6px}
.consent-head p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.5;max-width:460px;margin:0 auto}
.consent-x{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.12);border:none;color:#fff;width:30px;height:30px;border-radius:50%;font-size:16px;cursor:pointer;display:none}
#consent-ov.readonly .consent-x{display:block}
.consent-docs{padding:18px 24px 4px;max-height:46vh;overflow-y:auto}
.consent-doc{border:1px solid var(--border);border-radius:10px;margin-bottom:12px;overflow:hidden}
.consent-doc summary{padding:13px 16px;font-size:14px;font-weight:700;color:var(--text);cursor:pointer;background:var(--bg3);list-style:none;display:flex;align-items:center;justify-content:space-between}
.consent-doc summary::-webkit-details-marker{display:none}
.consent-doc summary::after{content:'▾';color:var(--text3);transition:transform .2s}
.consent-doc[open] summary::after{transform:rotate(180deg)}
.consent-doc .doc-body{padding:14px 18px;font-size:12.5px;line-height:1.65;color:var(--text2);max-height:240px;overflow-y:auto;border-top:1px solid var(--border)}
.consent-doc .doc-body h4{font-size:13px;color:var(--text);margin:12px 0 4px;font-weight:700}
.consent-doc .doc-body h4:first-child{margin-top:0}
.consent-doc .doc-body p{margin-bottom:7px}
.consent-doc .doc-body ul{margin:0 0 8px 18px}
.consent-doc .doc-body li{margin-bottom:4px}
.consent-doc .doc-body strong{color:var(--text)}
.consent-actions{padding:8px 24px 22px}
.consent-summary{font-size:12px;color:var(--text2);line-height:1.55;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:11px 14px;margin-bottom:14px}
#consent-ov.readonly .consent-actions{display:none}
.consent-foot{font-size:10.5px;color:var(--text3);text-align:center;padding:0 24px 18px;line-height:1.5}
/* ════════ SELLOS DE PAGO (Visa / Mastercard) ════════ */
.pay-badges{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
.paybadge{background:#fff;border-radius:5px;height:26px;min-width:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.paybadge.visa{color:#1A1F71;font-weight:800;font-style:italic;font-size:14px;letter-spacing:.5px;font-family:'Inter',Arial,sans-serif}
.mc-circles{position:relative;width:36px;height:22px}
.mc-circles i{position:absolute;top:0;width:22px;height:22px;border-radius:50%;display:block}
.mc-circles i.r{left:0;background:#EB001B}
.mc-circles i.y{right:0;background:#F79E1B;mix-blend-mode:multiply}
.pay-row{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:18px}
.pay-row .pay-lbl{font-size:12px;color:rgba(255,255,255,.45);display:inline-flex;align-items:center;gap:6px}
/* ════════ LLAMADO DE ATENCIÓN (chip en card) ════════ */
.wk-warn{margin-top:8px;background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C;border-radius:var(--r3);padding:6px 10px;font-size:11px;font-weight:700}
/* ════════ REPORTES ════════ */
#reports-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.rep-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:18px}
.rep-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.rep-date{font-size:15px;font-weight:800;color:var(--text)}
.rep-subname{font-size:12px;color:var(--text3)}
.rep-score{font-family:var(--font-mono);font-size:26px;font-weight:800}
.rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.rep-k{font-size:11px;color:var(--text3)}
.rep-v{font-size:15px;font-weight:700;color:var(--text)}
.rep-permits{font-size:12px;color:var(--text2);background:var(--bg3);border-radius:var(--r3);padding:10px 12px;margin-bottom:12px;line-height:1.6}
/* ════════ VIDEOLLAMADA (D) ════════ */
#call-ov{display:none;position:fixed;inset:0;z-index:10000;background:#0B1120;align-items:center;justify-content:center;padding:16px}
#call-ov.on{display:flex}
.call-box{width:100%;max-width:860px;display:flex;flex-direction:column;gap:14px}
.call-head{display:flex;justify-content:space-between;align-items:center;color:#fff}
.call-status-wrap{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.call-rec{animation:blink 1.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.call-peer-name{font-size:13px;color:rgba(255,255,255,.6)}
.call-videos{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px -15px rgba(0,0,0,.7)}
#call-remote{width:100%;height:100%;object-fit:cover;background:#000;transform:scaleX(-1)}
#call-local{position:absolute;bottom:14px;right:14px;width:23%;max-width:200px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:2px solid rgba(255,255,255,.5);background:#111;transform:scaleX(-1)}
/* ── Compartir pantalla + control guiado ── */
/* Una pantalla NO se refleja ni se recorta (hay que leer texto): sin espejo + completa */
#call-remote.screen-mode,#call-local.screen-mode{object-fit:contain;transform:none;background:#000}
/* Cuando YO comparto, mi pantalla pasa a ser la vista grande y el otro queda en PIP */
.call-videos.local-big #call-local{position:absolute;inset:0;width:100%;max-width:none;height:100%;aspect-ratio:auto;border:none;border-radius:16px;z-index:1}
.call-videos.local-big #call-remote{position:absolute;top:14px;right:14px;left:auto;width:23%;max-width:200px;height:auto;aspect-ratio:4/3;border:2px solid rgba(255,255,255,.5);border-radius:10px;z-index:2}
#guide-layer{position:absolute;display:none;pointer-events:none;z-index:6;overflow:hidden}
#guide-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#guide-cursor{position:absolute;display:none;pointer-events:none;z-index:7;will-change:left,top}
#guide-cursor .gc-arrow{width:0;height:0;border-left:11px solid #F59E0B;border-top:7px solid transparent;border-bottom:7px solid transparent;transform:rotate(-38deg);filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
#guide-cursor .gc-lbl{position:absolute;top:12px;left:8px;background:#F59E0B;color:#1F2937;font-size:10px;font-weight:800;padding:1px 7px;border-radius:8px;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.guide-ping{position:absolute;width:14px;height:14px;border:3px solid #F59E0B;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:guidePing .9s ease-out forwards}
@keyframes guidePing{from{opacity:1;transform:translate(-50%,-50%) scale(.4)}to{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}
#guide-hint{display:none;text-align:center;color:#FCD34D;font-size:12px;font-weight:600;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);border-radius:10px;padding:7px 14px;margin-top:-4px}
#call-remote.screen-mode{cursor:crosshair}
.call-btn.on{background:#F59E0B;color:#1F2937;font-weight:700}
.call-controls{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.call-btn{background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:100px;padding:12px 18px;font-size:18px;cursor:pointer;transition:all .15s;min-width:54px}
.call-btn:hover{background:rgba(255,255,255,.22)}
.call-btn.hang{background:var(--red);font-size:14px;font-weight:700;padding:12px 24px}
.call-btn.hang:hover{background:var(--red2)}
@media(max-width:600px){.call-videos{aspect-ratio:3/4}#call-local{width:34%}}
/* ════════════════════════════════════════════════════════
RESPONSIVE MÓVIL (Fase 5) — drawer lateral + layouts en columna
════════════════════════════════════════════════════════ */
/* Base: en desktop la hamburguesa y el backdrop no se ven */
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.hamburger{display:none;background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--text2);padding:4px 8px;border-radius:var(--r3)}
.hamburger:hover{background:var(--bg3)}
.sb-backdrop{display:none}
@media(max-width:768px){
/* Alturas reales de viewport móvil (barra de URL): usa dvh si existe */
.sc{height:100vh;height:100dvh}
/* Sidebar como cajón deslizable fuera de pantalla */
.hamburger{display:block}
.sidebar{position:fixed;top:0;left:0;bottom:0;height:100%;width:264px;max-width:84vw;
z-index:600;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 10px 40px rgba(0,0,0,.4)}
#s-app.sb-open .sidebar{transform:translateX(0)}
#s-app.sb-open .sb-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:550}
/* Topbar compacto: sin subtítulo, botones solo con ícono */
.main{width:100%;min-width:0}
.topbar{padding:0 12px;gap:8px}
.topbar-sub{display:none}
.topbar-right{gap:6px}
.btn-txt{display:none}
.session-clock{font-size:12px}
.topbar-title{font-size:15px}
/* Páginas: menos padding y cabeceras que envuelven */
.pg{padding:16px 12px}
.pg-header{flex-direction:column;align-items:flex-start;gap:10px}
.pg-header>div{flex-wrap:wrap}
/* Vigilancia: cámara arriba, panel abajo (una columna con scroll en .pg) */
.watch-grid{grid-template-columns:1fr;height:auto;gap:14px}
.cam-card{height:56vh;min-height:300px}
.wpanel{overflow:visible}
/* Grids principales a una/dos columnas */
.at-grid{grid-template-columns:1fr}
.kpi-row{grid-template-columns:1fr 1fr;gap:10px}
.kpi{padding:14px}
.kpi-val{font-size:22px}
.worker-view{grid-template-columns:1fr}
.profile-grid{grid-template-columns:1fr}
.plans-grid{grid-template-columns:1fr}
.workers-grid{grid-template-columns:1fr}
#reports-body{grid-template-columns:1fr}
/* Banner del día: que envuelva sin desbordar */
.daily-plan-banner{flex-wrap:wrap;gap:12px;padding:16px}
.dpb-goal{margin-left:0}
/* Tablas: scroll horizontal en su contenedor (no rompen el ancho del móvil) */
#wk-table-wrap,#wkd-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wk-table{min-width:560px}
/* Modales como hoja inferior (bottom sheet) */
.mo{padding:0;align-items:flex-end}
.mo-box,.mo-box.wide{max-width:100%;width:100%;border-radius:16px 16px 0 0;max-height:92vh;overflow-y:auto}
.mo-foot{flex-wrap:wrap}
.mo-foot .btn{flex:1}
/* Consentimiento a pantalla completa */
#consent-ov{padding:0}
.consent-card{border-radius:0;max-width:100%;min-height:100%}
}
/* Teléfonos muy estrechos */
@media(max-width:380px){
.kpi-row{grid-template-columns:1fr}
.land-stats{gap:18px}
}
/* ════════ SAFE AREAS (notch / Dynamic Island / barra de gestos) ════════
En PWA instalada y móviles edge-to-edge el contenido se metía bajo el notch
(arriba) y la barra de inicio (abajo), tapando botones. env(safe-area-inset-*)
= 0 en equipos sin notch, así que NO afecta a desktop. Scope: móvil. */
@media(max-width:768px){
.topbar{
padding-top: env(safe-area-inset-top);
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
min-height: calc(60px + env(safe-area-inset-top));
height: auto;
}
.sidebar{
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
.pg{ padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
#s-land, #s-auth{
padding-top: max(24px, env(safe-area-inset-top));
padding-bottom: max(24px, env(safe-area-inset-bottom));
padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
}
/* Overlays con controles pegados a los bordes */
.call-controls{ padding-bottom: env(safe-area-inset-bottom); }
#break-ov, #abandon-ov{ padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
#alarm-banner{ padding-top: calc(12px + env(safe-area-inset-top)); }
.mo-box, .mo-box.wide{ padding-bottom: env(safe-area-inset-bottom); }
}
/* ═══════════════════════════════════════════════════════════════════
LANDING PROFESIONAL (Fase 12) — página de conversión
═══════════════════════════════════════════════════════════════════ */
#s-land.on{display:block}
#s-land{padding:0;overflow-x:hidden;scroll-behavior:smooth;background:var(--bg);color:var(--text);font-family:var(--font-body)}
.lp-wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}
/* NAV */
.lp-nav{position:sticky;top:0;z-index:50;background:rgba(244,242,238,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.lp-nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.lp-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
.lp-logo svg{display:block;width:32px;height:32px;flex-shrink:0}
.lp-nav-right{display:flex;align-items:center;gap:24px}
.lp-navlink{font-size:14.5px;font-weight:500;color:var(--text2);text-decoration:none;cursor:pointer;transition:color .15s}
.lp-navlink:hover{color:var(--ink)}
/* BOTONES landing — fills sólidos, naranja de marca */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:700;border:none;cursor:pointer;border-radius:11px;padding:11px 20px;font-size:14px;letter-spacing:-.2px;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;text-decoration:none;white-space:nowrap}
.lp-btn-sm{padding:9px 16px;font-size:13px}
.lp-btn-lg{padding:15px 26px;font-size:16px;border-radius:12px}
.lp-btn-full{width:100%}
.lp-btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 18px -8px rgba(232,86,42,.55)}
.lp-btn-primary:hover{background:var(--brand-2);transform:translateY(-1px)}
.lp-btn-ghost{background:var(--bg2);color:var(--ink);border:1px solid var(--border2)}
.lp-btn-ghost:hover{border-color:var(--ink);background:#fff}
.lp-btn-light{background:var(--ink);color:var(--on-dark)}
.lp-btn-light:hover{transform:translateY(-1px);background:#000}
/* HERO — claro, aireado; producto real a la derecha, sin retícula ni glow */
.lp-hero{position:relative;padding:76px 0 68px}
.lp-hero-grid{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:60px;align-items:center}
.lp-badge{display:inline-flex;align-items:center;gap:9px;background:var(--brand-soft);border:1px solid #F3D9CC;border-radius:100px;padding:7px 15px;font-size:12.5px;font-weight:600;color:var(--brand-2);margin-bottom:24px;letter-spacing:.1px}
.lp-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(31,157,107,.16);animation:lpPulse 1.8s infinite}
@keyframes lpPulse{0%,100%{box-shadow:0 0 0 4px rgba(31,157,107,.16)}50%{box-shadow:0 0 0 8px rgba(31,157,107,.03)}}
.lp-h1{font-family:var(--font-display);font-size:clamp(40px,5.4vw,64px);line-height:1.03;font-weight:800;letter-spacing:-2px;color:var(--ink);margin-bottom:22px;text-wrap:balance}
.lp-grad{color:var(--brand)}
.lp-lead{font-size:18.5px;line-height:1.6;color:var(--text2);max-width:520px;margin-bottom:32px}
.lp-lead strong{color:var(--ink);font-weight:600}
.lp-hero-ctas{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px}
.lp-hero-trust{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--text2);font-weight:500}
/* MOCKUP — tablero de presencia del equipo, en claro (mismo look que la app) */
.lp-hero-visual{position:relative}
.lp-mock{position:relative;z-index:2;background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--sh3)}
.lp-mock-cam{background:var(--bg3);border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.lp-mock-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;background:var(--bg2);border-bottom:1px solid var(--border)}
.lp-mock-bar-t{font-size:11.5px;font-weight:600;color:var(--text3)}
.lp-rec{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--green);letter-spacing:.4px}
.lp-rec i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(31,157,107,.18)}
.lp-mock-feed{padding:8px}
.lp-roster{display:flex;flex-direction:column;gap:6px}
.lp-rost{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;background:var(--bg2);border:1px solid var(--border)}
.lp-rost-av{width:32px;height:32px;border-radius:9px;flex-shrink:0;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--brand-2)}
.lp-rost-name{flex:1;min-width:0}
.lp-rost-n{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-rost-r{font-size:11px;color:var(--text3)}
.lp-rost-foc{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.lp-rost-st{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--green)}
.lp-rost-st i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.lp-rost.away .lp-rost-st{color:var(--yellow)}.lp-rost.away .lp-rost-st i{background:var(--yellow)}
.lp-mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:11px}
.lp-mock-stat{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:12px}
.lp-mock-v{font-size:20px;font-weight:800;line-height:1;color:var(--ink);font-family:var(--font-display);font-variant-numeric:tabular-nums}
.lp-mock-l{font-size:10px;color:var(--text3);margin-top:4px;text-transform:uppercase;letter-spacing:.6px;font-weight:600}
/* STRIP de números */
.lp-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg3);padding:34px 0}
.lp-strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.lp-strip-v{font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.8px}
.lp-strip-v em{font-style:normal;color:var(--brand)}
.lp-strip-l{font-size:12.5px;color:var(--text2);margin-top:6px}
/* SECCIONES */
.lp-section{padding:92px 0}
.lp-alt{background:var(--bg2)}
.lp-head{text-align:center;max-width:680px;margin:0 auto 56px}
.lp-eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.lp-h2{font-family:var(--font-display);font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-1.3px;color:var(--ink);line-height:1.08;margin-bottom:15px;text-wrap:balance}
.lp-sub{font-size:17px;color:var(--text2);line-height:1.6}
/* PASOS */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lp-step{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:32px 28px;position:relative;box-shadow:var(--sh)}
.lp-step-n{width:42px;height:42px;border-radius:12px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--brand-2);margin-bottom:20px}
.lp-step h3{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink);margin-bottom:9px;letter-spacing:-.3px}
.lp-step p{font-size:14.5px;color:var(--text2);line-height:1.62}
/* BENEFICIOS */
.lp-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lp-feat{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:28px 26px;transition:transform .2s,box-shadow .2s;box-shadow:var(--sh)}
.lp-feat:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.lp-feat-ico{width:48px;height:48px;border-radius:12px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px}
.lp-feat h3{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink);margin-bottom:9px;letter-spacing:-.3px}
.lp-feat p{font-size:14.5px;color:var(--text2);line-height:1.6}
/* ROI */
.lp-roi{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.lp-roi-field{margin-top:16px}
.lp-roi-field label{display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:7px}
.lp-roi-input{width:100%;background:var(--bg2);border:1.5px solid var(--border2);border-radius:10px;color:var(--ink);padding:13px 15px;font-size:16px;font-weight:600;outline:none;transition:border-color .15s;font-variant-numeric:tabular-nums}
.lp-roi-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(232,86,42,.12)}
.lp-roi-note{font-size:12px;color:var(--text3);margin-top:14px;line-height:1.5}
.lp-roi-card{background:var(--ink);border:1px solid var(--ink2);border-radius:16px;padding:30px;box-shadow:var(--sh3);color:var(--on-dark)}
.lp-roi-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:14.5px;color:var(--on-dark-mut)}
.lp-roi-row strong{font-size:16px;color:var(--on-dark);font-weight:700;font-variant-numeric:tabular-nums}
.lp-roi-green{color:#5FCF9A !important}
.lp-roi-divider{height:1px;background:rgba(243,239,232,.14);margin:6px 0}
.lp-roi-net{font-size:16px}
.lp-roi-net strong{font-size:28px;color:var(--brand);font-family:var(--font-display)}
/* PRECIO */
.lp-price-card{max-width:460px;margin:0 auto;background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:36px;box-shadow:var(--sh3);position:relative}
.lp-price-card::before{content:'';position:absolute;top:0;left:24px;right:24px;height:3px;background:var(--brand);border-radius:0 0 3px 3px}
.lp-price-top{text-align:center;padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:22px}
.lp-price-name{font-size:12.5px;font-weight:700;color:var(--brand);letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}
.lp-price-num{font-family:var(--font-display);font-size:50px;font-weight:800;color:var(--ink);letter-spacing:-2px}
.lp-price-per{display:block;font-size:13px;color:var(--text2);margin-top:4px}
.lp-price-feats{list-style:none;margin-bottom:24px}
.lp-price-feats li{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--text);padding:8px 0}
.lp-price-feats li::before{content:'✓';width:19px;height:19px;border-radius:50%;flex-shrink:0;background:var(--brand-soft);color:var(--brand-2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.lp-price-foot{text-align:center;font-size:12.5px;color:var(--text3);margin-top:14px}
/* FAQ */
.lp-faq-wrap{max-width:760px}
.lp-faq{border:1px solid var(--border);border-radius:13px;margin-bottom:12px;background:var(--bg2);overflow:hidden}
.lp-faq summary{list-style:none;cursor:pointer;padding:19px 22px;font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:'+';font-size:22px;color:var(--brand);font-weight:400;flex-shrink:0}
.lp-faq[open] summary::after{content:'–'}
.lp-faq p{padding:0 22px 20px;font-size:14.5px;color:var(--text2);line-height:1.65}
/* CTA FINAL — band oscura de contraste */
.lp-final{position:relative;padding:96px 0;background:var(--ink);overflow:hidden}
.lp-final::before{content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(232,86,42,.16),transparent 62%);pointer-events:none}
.lp-final-inner{position:relative;text-align:center;max-width:640px;margin:0 auto}
.lp-final h2{font-family:var(--font-display);font-size:clamp(32px,4vw,48px);font-weight:800;letter-spacing:-1.4px;color:var(--on-dark);margin-bottom:15px;text-wrap:balance}
.lp-final p{font-size:17.5px;color:var(--on-dark-mut);margin-bottom:30px}
.lp-final-login{margin-top:18px;font-size:14px;color:var(--on-dark-mut)}
.lp-final-login a{color:var(--brand);font-weight:700;cursor:pointer;text-decoration:none}
/* FOOTER */
.lp-footer{background:var(--ink2);border-top:1px solid rgba(243,239,232,.08);padding:56px 0 28px}
.lp-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
.lp-footer .lp-logo{color:var(--on-dark)}
.lp-footer-brand p{font-size:13.5px;color:var(--on-dark-mut);line-height:1.6;margin-top:12px;max-width:320px}
.lp-footer-col h4{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--on-dark);margin-bottom:14px;letter-spacing:.3px}
.lp-footer-col a{display:block;font-size:14px;color:var(--on-dark-mut);text-decoration:none;cursor:pointer;padding:5px 0;transition:color .15s}
.lp-footer-col a:hover{color:var(--on-dark)}
.lp-footer-bottom{text-align:center;font-size:12.5px;color:var(--on-dark-mut);margin-top:40px;padding-top:24px;border-top:1px solid rgba(243,239,232,.08)}
/* RESPONSIVE landing */
@media(max-width:860px){
.lp-hero-grid{grid-template-columns:1fr;gap:40px}
.lp-roi{grid-template-columns:1fr;gap:28px}
.lp-footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
.lp-section{padding:60px 0}
.lp-hero{padding:56px 0 48px}
.lp-steps,.lp-feats,.lp-strip-grid{grid-template-columns:1fr}
.lp-strip-grid{grid-template-columns:1fr 1fr;gap:24px}
.lp-navlink:not(.lp-login-link){display:none}
.lp-hide-sm{display:none}
.lp-login-link{display:inline-flex} /* login siempre visible en móvil */
.lp-nav-right{gap:8px}
.lp-logo{flex-shrink:0}
.lp-footer-grid{grid-template-columns:1fr}
.lp-mock{transform:none}
}
/* Selector de idioma en la nav de la landing (Fase 13) */
.lp-lang{background:var(--bg2);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:7px 9px;font-size:13px;font-weight:600;cursor:pointer;outline:none;font-family:var(--font-body)}
.lp-lang option{background:var(--bg2);color:var(--text)}
@media(max-width:680px){.lp-lang{padding:6px 7px;font-size:12px}}
/* Acceso para quien ya tiene cuenta: botón visible en la nav + enlace bajo el CTA del hero */
.lp-hero-login{margin:-10px 0 22px;font-size:14.5px;color:var(--text2)}
.lp-hero-login a{color:var(--brand);font-weight:700;text-decoration:none;cursor:pointer}
.lp-hero-login a:hover{text-decoration:underline}
@media(max-width:480px){
.lp-nav-cta{display:none} /* el hero ya muestra "Empezar gratis" justo debajo */
.lp-lang{max-width:62px}
}
/* ════════ TRANSCRIPCIÓN Y REUNIONES (Fase 14) ════════ */
.call-subs-wrap{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 14px;margin-top:4px}
.call-subs-title{font-size:11px;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px}
.call-subs{max-height:120px;overflow-y:auto;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.85)}
.call-sub-line{padding:2px 0}
@media(max-width:600px){.call-subs{max-height:90px;font-size:12.5px}}
#meeting-alert{position:fixed;top:0;left:0;right:0;z-index:710;display:none;align-items:center;gap:14px;padding:12px 24px;background:var(--brand);box-shadow:0 4px 20px rgba(232,86,42,.4);animation:slideDown .3s ease}
#meeting-alert.on{display:flex}
#meeting-alert .banner-ico{font-size:24px;animation:wiggle .6s infinite}
#meeting-alert .banner-main{font-size:15px;font-weight:800;color:#fff}
#meeting-alert .banner-sub{font-size:12px;color:rgba(255,255,255,.85);margin-top:2px}
#calls-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
@media(max-width:680px){#calls-body{grid-template-columns:1fr}}
/* ════════ CHAT INTERNO (Fase 16) ════════ */
.chat-badge{display:none;align-items:center;justify-content:center;margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#EF4444;color:#fff;font-size:10px;font-weight:800}
/* grid-template-rows:minmax(0,1fr) — SIN esto la fila implícita crece con el contenido:
con una conversación larga el input quedaba recortado fuera de la vista (overflow:hidden)
y .chat-msgs nunca activaba su scroll ("chat congelado", visto en Safari 2026-06-11). */
.chat-wrap{display:grid;grid-template-columns:290px 1fr;grid-template-rows:minmax(0,1fr);background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;height:calc(100vh - 130px);min-height:420px}
.chat-rooms{border-right:1px solid var(--border);overflow-y:auto;background:var(--bg3);padding:8px;min-height:0}
.chat-room{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r3);cursor:pointer;transition:background .15s}
.chat-room:hover{background:rgba(232,86,42,.07)}
.chat-room.on{background:rgba(232,86,42,.12)}
.chat-room.new{opacity:.75}
.chat-room-ico{font-size:20px;flex-shrink:0}
.chat-room-txt{min-width:0;flex:1}
.chat-room-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-room-prev{font-size:11.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-dot{width:10px;height:10px;border-radius:50%;background:#EF4444;flex-shrink:0}
.chat-new-lbl{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text3);padding:14px 12px 4px}
.chat-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.chat-empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text3);font-size:15px;line-height:2}
/* flex:1 en vez de height:100% — el % sobre un padre de alto automático es frágil (Safari) */
.chat-room-view{flex:1;flex-direction:column;min-height:0}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.chat-head-name{font-size:14px;font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-back{display:none;border:none;background:none;font-size:20px;cursor:pointer;color:var(--text2);padding:2px 6px}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;min-height:0}
.chat-day{align-self:center;font-size:10.5px;font-weight:700;color:var(--text3);background:var(--bg3);border-radius:999px;padding:3px 12px;margin:6px 0}
.chat-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:78%}
.chat-msg.mine{align-self:flex-end;align-items:flex-end}
.chat-msg-from{font-size:10.5px;font-weight:700;color:var(--primary);margin:0 0 2px 10px}
.chat-bubble{background:var(--bg3);border:1px solid var(--border);border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:13.5px;line-height:1.45;word-break:break-word}
.chat-msg.mine .chat-bubble{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:14px 14px 4px 14px}
.chat-time{font-size:9.5px;opacity:.65;margin-left:8px;white-space:nowrap}
.chat-input-row{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border)}
.chat-input-row .inp{flex:1}
.chat-note{color:var(--text3);text-align:center;font-size:13px;padding:30px 14px;line-height:1.7}
.chat-member-row{display:flex;align-items:center;gap:10px;padding:9px 4px;font-size:13.5px;font-weight:600;cursor:pointer;border-bottom:1px solid var(--border)}
.chat-member-row input{width:16px;height:16px;accent-color:var(--primary)}
@media(max-width:768px){
.chat-wrap{grid-template-columns:1fr;height:calc(100vh - 120px)}
.chat-main{display:none}
.chat-wrap.room-open .chat-main{display:flex}
.chat-wrap.room-open .chat-rooms,.chat-wrap.room-open .chat-side{display:none}
.chat-back{display:inline-flex}
.chat-msg{max-width:88%}
}
/* ════════ CHAT 2.0 (Fase 18) ════════ */
/* Layout SÓLIDO: la página de chat es una columna flex que llena el alto visible;
la lista de mensajes es el ÚNICO scroll y la caja de escribir siempre se ve. */
#pg-chat.on{display:flex;flex-direction:column;overflow:hidden}
#pg-chat .chat-wrap{flex:1;min-height:0;height:auto}
.chat-head-role{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-role{display:inline-block;background:rgba(232,86,42,.1);color:var(--primary);font-size:9.5px;font-weight:800;padding:1px 7px;border-radius:999px;vertical-align:1px;letter-spacing:.3px}
.chat-msg.mine .chat-role{background:rgba(255,255,255,.25);color:#fff}
.chat-icon-btn{border:1px solid var(--border);background:var(--bg3);border-radius:10px;font-size:17px;padding:7px 11px;cursor:pointer;transition:background .15s;flex-shrink:0}
.chat-icon-btn:hover{background:rgba(232,86,42,.1)}
.chat-img{max-width:240px;max-height:240px;border-radius:10px;display:block;cursor:zoom-in}
.chat-audio-wrap{display:flex;align-items:center;gap:6px}
.chat-audio{height:36px;max-width:220px}
.chat-dur{font-size:10px;opacity:.7;white-space:nowrap}
.chat-file{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:inherit;text-decoration:underline;word-break:break-all}
.chat-voice-bar{display:none;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--border);background:rgba(239,68,68,.06);font-size:13px;font-weight:600}
.chat-voice-bar.on{display:flex}
.vn-dot{width:10px;height:10px;border-radius:50%;background:#EF4444;animation:vnblink 1s infinite}
@keyframes vnblink{50%{opacity:.25}}
#chat-lightbox{display:none;position:fixed;inset:0;background:rgba(27,25,23,.92);z-index:980;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
#chat-lightbox.on{display:flex}
#chat-lightbox img{max-width:96%;max-height:96%;border-radius:12px}
#chatcall-alert{position:fixed;top:0;left:0;right:0;z-index:720;display:none;align-items:center;gap:14px;padding:12px 24px;background:var(--green);box-shadow:0 4px 20px rgba(5,150,105,.4);animation:slideDown .3s ease}
#chatcall-alert.on{display:flex}
#chatcall-alert .banner-ico{font-size:24px;animation:wiggle .6s infinite}
#chatcall-alert .banner-main{font-size:15px;font-weight:800;color:#fff}
#chatcall-alert .banner-sub{font-size:12px;color:rgba(255,255,255,.85);margin-top:2px}
.toast-click{cursor:pointer;border:1px solid rgba(255,255,255,.25)}
.toast-click:hover{filter:brightness(1.1)}
@media(max-width:768px){
#pg-chat.on{padding:10px 8px calc(10px + env(safe-area-inset-bottom))}
.chat-img{max-width:200px;max-height:200px}
.chat-audio{max-width:160px}
#chatcall-alert{flex-wrap:wrap;gap:8px;padding:10px 14px}
}
@media(max-width:1000px) and (min-width:769px){ .chat-wrap{grid-template-columns:220px 1fr} }
/* ════════ CHATBOT DE SOPORTE (Fase 20) ════════ */
#helpbot-fab{position:fixed;right:18px;bottom:18px;z-index:850;width:54px;height:54px;border-radius:50%;border:none;background:var(--primary);color:#fff;font-size:25px;cursor:pointer;box-shadow:0 6px 22px rgba(232,86,42,.45);display:none;align-items:center;justify-content:center;transition:transform .15s}
#helpbot-fab:hover{transform:scale(1.08)}
/* En la página de Chat el FAB tapaba el botón ➤ de enviar: se sube por encima del input */
body.chat-open #helpbot-fab{bottom:92px}
body.chat-open #helpbot-panel{bottom:156px}
#helpbot-panel{display:none;position:fixed;right:18px;bottom:82px;z-index:860;width:360px;max-width:calc(100vw - 24px);height:480px;max-height:calc(100vh - 110px);background:var(--white);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 50px rgba(27,25,23,.3);flex-direction:column;overflow:hidden}
#helpbot-panel.on{display:flex}
.hb-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:var(--ink)}
.hb-title{font-size:14px;font-weight:800;color:#fff}
.hb-sub{font-size:11px;color:rgba(255,255,255,.7);margin-top:1px}
.hb-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;min-height:0;background:var(--bg3)}
.hb-msg{display:flex}
.hb-msg.me{justify-content:flex-end}
.hb-bubble{max-width:85%;padding:9px 12px;border-radius:13px 13px 13px 4px;background:var(--white);border:1px solid var(--border);font-size:13px;line-height:1.5}
.hb-msg.me .hb-bubble{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:13px 13px 4px 13px}
.hb-actions{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 4px}
.hb-chip{border:1px solid var(--primary);background:rgba(232,86,42,.06);color:var(--primary);font-size:12px;font-weight:700;padding:6px 11px;border-radius:999px;cursor:pointer;transition:background .15s}
.hb-chip:hover{background:rgba(232,86,42,.15)}
.hb-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--white)}
.hb-input .inp{flex:1}
@media(max-width:768px){
#helpbot-panel{right:8px;left:8px;width:auto;bottom:76px;height:70vh}
#helpbot-fab{bottom:calc(14px + env(safe-area-inset-bottom))}
}
/* ══════════ SKELETONS (auditoría rendimiento 2026-06-11) ══════════
Placeholders animados mientras llegan los datos de Firestore: nada se ve
"vacío" ni "pegado" durante la carga inicial del equipo. */
.sk{ background:linear-gradient(90deg,var(--bg3) 25%,var(--border) 50%,var(--bg3) 75%); background-size:200% 100%; animation:sk-shimmer 1.2s ease-in-out infinite; border-radius:6px; }
.sk-line{ height:12px; margin:8px 0; }
.sk-ava{ width:44px; height:44px; border-radius:50%; flex-shrink:0; }
.sk-card{ pointer-events:none; }
@keyframes sk-shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@media (prefers-reduced-motion: reduce){ .sk{ animation:none; } }
/* ════════ PANEL JP COMPANY (súper-admin) ════════ */
.sa-search{flex:1;min-width:220px;max-width:380px;padding:9px 13px}
.sa-table-wrap,#sa-table{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow-x:auto;-webkit-overflow-scrolling:touch}
.sa-table{min-width:880px}
.sa-table tr:hover td{background:var(--bg3)}
.sa-off td{opacity:.62}
.sa-name{font-weight:650;color:var(--ink)}
.sa-mail{font-size:12px;color:var(--text3);word-break:break-all}
.sa-actions{text-align:right;white-space:nowrap}
.sa-actions .btn{margin-left:4px;padding:6px 10px;font-size:12px}
.sa-kvs{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-bottom:6px}
.sa-kv{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--border)}
.sa-kv span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3)}
.sa-kv b{font-weight:600;font-size:13.5px;color:var(--ink)}
.sa-sec{font-family:var(--font-display);font-weight:700;font-size:15px;margin:20px 0 10px}
.sa-table-wrap .wk-table{min-width:520px}
@media(max-width:768px){ .sa-kvs{grid-template-columns:1fr} .sa-search{max-width:none} }
body.role-super .topbar-right>*{display:none!important}
/* ════════ PAGO ÚNICO POR EMPRESA (Mi Plan) + registro en Panel JP Company ════════ */
.bill-status{display:flex;gap:14px;align-items:flex-start;border-radius:var(--r);padding:16px 18px;margin-bottom:18px;border:1px solid var(--border)}
.bill-status .bill-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.bill-status .bill-ico .ic{width:20px;height:20px}
.bill-status.ok{background:#EEF8F2;border-color:#BFE3CF}.bill-status.ok .bill-ico{background:#1F9D6B;color:#fff}
.bill-status.due{background:#FDF0EE;border-color:#F3C5BC}.bill-status.due .bill-ico{background:#C8461F;color:#fff}
.bill-status.none{background:var(--bg2)}.bill-status.none .bill-ico{background:var(--brand-soft);color:var(--brand-2)}
.bill-st-t{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink)}
.bill-st-s{font-size:13.5px;color:var(--text2);margin-top:3px;line-height:1.5}
.bill-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.bill-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:20px}
.bill-card-t{font-family:var(--font-display);font-weight:700;font-size:16px;margin-bottom:12px}
.bill-line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--text2)}
.bill-line b{color:var(--ink);font-variant-numeric:tabular-nums}
.bill-total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 4px}
.bill-total span{font-weight:600}
.bill-total b{font-family:var(--font-display);font-size:28px;color:var(--ink);font-variant-numeric:tabular-nums}
.bill-total small{font-size:13px;color:var(--text3);font-weight:600}
.bill-pay{margin-top:12px;gap:8px;white-space:normal;height:auto;line-height:1.3;text-align:center;padding-top:12px;padding-bottom:12px}
.bill-card .wk-table{min-width:0}
.bill-note{font-size:12.5px;color:var(--text3);margin-top:10px;line-height:1.5}
.bill-sub{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin:16px 0 8px}
.bill-chips{display:flex;flex-wrap:wrap;gap:6px}
.bill-chip{background:var(--bg3);border:1px solid var(--border);border-radius:100px;padding:4px 10px;font-size:12px;color:var(--text2)}
.bill-chip.more{background:var(--brand-soft);border-color:transparent;color:var(--brand-2);font-weight:600}
.bill-empty{font-size:13.5px;color:var(--text3);padding:18px 0}
.sa-pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.sa-pay-prev{background:var(--bg3);border-radius:var(--r2);padding:12px 14px;font-size:13.5px;line-height:1.7}
.sa-warn{color:#B45309;font-weight:600}
@media(max-width:1100px){ .bill-grid{grid-template-columns:1fr} }
@media(max-width:768px){ .sa-pay-grid{grid-template-columns:1fr} }
.call-sub-line.live{opacity:.62;font-style:italic}
.chat-acta{min-width:220px}
.chat-acta details{margin-top:6px}
.chat-acta summary{cursor:pointer;font-weight:600;font-size:12.5px;opacity:.9}
.chat-acta-l{padding:6px 0;border-top:1px solid rgba(127,127,127,.25);font-size:12.5px}
.cfg-note{font-size:11.5px;color:var(--text3);margin-top:6px}
input[type=range]:disabled{opacity:.55;cursor:not-allowed}
.wkd-face{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:12px 14px;margin-bottom:16px}
.wkd-face .btn{flex-shrink:0}
.trial-badge{background:var(--brand-soft);color:var(--brand-2);border:1px solid var(--brand);border-radius:100px;padding:5px 12px;font-size:12.5px;font-weight:700;white-space:nowrap}
.trial-badge.low{background:#FEE2E2;border-color:#FCA5A5;color:#B91C1C}
body.role-super .trial-badge{display:none!important}
.cam-hud.warn{border-color:rgba(232,160,19,.45);color:#FCD34D}
/* ════════ CHAT PRO (2026-09) ════════ */
.chat-side{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--border);background:var(--bg2)}
.chat-side-top{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--border);align-items:center}
.chat-search{padding:9px 12px;font-size:14px;flex:1;min-width:0}
.chat-newgroup{flex-shrink:0;padding:9px 11px}
.chat-side .chat-rooms{flex:1;overflow-y:auto;border-right:0}
.chat-room{position:relative}
.chat-room-ico{position:relative}
.chat-ava{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--brand-soft);color:var(--brand-2);font-weight:800;font-size:13.5px;letter-spacing:.3px}
.chat-pres{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--text3);border:2px solid var(--white)}
.chat-pres.on{background:var(--green)}
.chat-room-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.chat-room-time{font-size:11px;color:var(--text3);flex-shrink:0}
.chat-plus{font-size:20px;color:var(--brand);font-weight:700;line-height:1}
.chat-typing{display:flex;align-items:center;gap:3px;font-size:11.5px;color:var(--green2,#1F9D6B);margin-top:2px}
.chat-typing span{width:5px;height:5px;border-radius:50%;background:currentColor;animation:chatDot 1.2s infinite}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}
.chat-typing i{font-style:normal;margin-left:4px}
@keyframes chatDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat-msg.seguido{margin-top:-6px}
.chat-check{margin-left:6px;opacity:.75;font-size:11px}
.chat-check.read{color:#6EE7B7;opacity:1}
.grp-members{max-height:230px;overflow:auto;border:1px solid var(--border);border-radius:var(--r2);padding:6px}
.grp-chk{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.grp-chk:hover{background:var(--bg3)}
.grp-chk i{font-style:normal;color:var(--text3);font-size:12px}
@media(max-width:768px){ .chat-side{width:100%} }
/* ── ESTADO DE LA CONVERSACIÓN (2026-09-18) ── */
.chat-st{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.3px;padding:2px 8px;border-radius:999px;white-space:nowrap;vertical-align:1px}
.chat-st.pend{background:rgba(224,72,59,.12);color:var(--red)}
.chat-st.work{background:rgba(232,160,19,.16);color:#9A6A00}
.chat-st.done{background:rgba(31,157,107,.13);color:var(--green)}
.chat-room-st{margin-top:3px}
.chat-st-filter{display:flex;flex-wrap:wrap;gap:6px;padding:10px 10px 2px}
.chat-st-filter .wk-chip{padding:5px 10px;font-size:11.5px}
.chat-status-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);font-size:12px;font-weight:600;color:var(--text2);background:var(--bg2)}
.chat-status-bar::before{content:'Estado del caso';font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text3)}
.chat-st-seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg3)}
.chat-st-seg button{border:0;background:transparent;padding:6px 11px;font:inherit;font-size:12px;font-weight:700;color:var(--text2);cursor:pointer;-webkit-appearance:none;appearance:none}
.chat-st-seg button+button{border-left:1px solid var(--border)}
.chat-st-seg button:disabled{opacity:.55;cursor:wait}
.chat-st-seg button.on.pend{background:rgba(224,72,59,.14);color:var(--red)}
.chat-st-seg button.on.work{background:rgba(232,160,19,.18);color:#9A6A00}
.chat-st-seg button.on.done{background:rgba(31,157,107,.15);color:var(--green)}
.chat-status-note{align-self:center;max-width:92%;text-align:center;font-size:12px;color:var(--text2);background:var(--bg3);border:1px dashed var(--border);border-radius:12px;padding:6px 12px;margin:6px 0}
@media (max-width:768px){ .chat-status-bar{padding:8px 12px} .chat-status-bar::before{display:none} .chat-st-seg{display:flex;flex:1} .chat-st-seg button{flex:1;padding:7px 4px;font-size:11.5px} }
/* ── ARCHIVADOS (2026-09-18) ── */
.chat-arch-box{margin-top:10px;border-top:1px solid var(--border)}
.chat-arch-box .chat-room-ico{font-size:20px}
.chat-arch-head{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:12.5px;font-weight:800;color:var(--text2);border-bottom:1px solid var(--border)}
.chat-arch-back{border:1px solid var(--border);background:var(--bg3);border-radius:8px;padding:5px 10px;font:inherit;font-size:12px;font-weight:700;color:var(--text2);cursor:pointer;-webkit-appearance:none;appearance:none}
/* ── PANEL JP: ACCESO Y PLAN (2026-09-19) ── */
.sa-acc{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--bg3);display:flex;flex-direction:column;gap:12px}
.sa-acc-now{font-size:13px;font-weight:600}
.sa-acc-grp{display:flex;flex-direction:column;gap:6px}
.sa-acc-lbl{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text3);display:flex;align-items:center;gap:6px}
.sa-acc-opt{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px}
.sa-acc-opt span{color:var(--text2)}
.sa-acc-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px}
.sa-acc-in{width:auto;padding:5px 8px;font-size:13px}
.sa-day{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--border);border-radius:8px;padding:4px 8px;background:var(--bg2);font-size:12px;font-weight:700;cursor:pointer}
.sa-acc > .btn{align-self:flex-start}
/* ── PANEL JP: TABLERO DE CLIENTES (2026-09-19) ── */
.sa-states{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 14px}
.sa-st-lbl{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text3);margin-right:4px}
.sa-st-chip.warn b{color:#9A6A00}
.sa-st-chip.bad b{color:var(--red)}
.sa-kpi-click{cursor:pointer}
.sa-kpi-click:hover{border-color:var(--brand)}
.sa-kpi-money{font-size:22px}
/* ── INFORME DE GESTIÓN (2026-09-18) ── */
.tr-ctrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tr-ctrl select.inp{width:auto;min-width:180px;padding:8px}
.tr-custom{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--text3);flex-wrap:wrap}
.tr-custom input.inp{width:140px;padding:7px}
.tr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tr-co{font-size:18px;font-weight:800;color:var(--text)}
.tr-kpis{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.tr-kpis .kpi-val small{font-size:14px;font-weight:600;color:var(--text3)}
.tr-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;margin-bottom:20px}
.tr-card-t{font-size:14px;font-weight:700;margin-bottom:14px}
.tr-bars{display:flex;gap:6px;align-items:flex-end;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}
.tr-bar{flex:1 0 34px;max-width:64px;display:flex;flex-direction:column;align-items:center;gap:4px}
.tr-bar-v{width:100%;height:120px;display:flex;align-items:flex-end;background:var(--bg3);border-radius:6px;overflow:hidden}
.tr-bar-v i{display:block;width:100%;background:var(--primary);border-radius:6px 6px 0 0}
.tr-bar-v i.ok{background:var(--green)}.tr-bar-v i.mid{background:var(--yellow)}.tr-bar-v i.low{background:var(--red)}
.tr-bar-c{font-size:11px;font-weight:700;color:var(--text2)}
.tr-bar-c.ok,.tr-pct.ok{color:var(--green)}.tr-bar-c.mid,.tr-pct.mid{color:var(--yellow)}.tr-bar-c.low,.tr-pct.low{color:var(--red)}
.tr-pct{font-weight:700}
.tr-bar-d{font-size:10px;color:var(--text3)}
.tr-empty{background:var(--white);border:1px dashed var(--border);border-radius:var(--r);padding:28px;text-align:center}
tr.tr-idle td{opacity:.55}
tr.tr-idle td.tr-dl{opacity:1}
.tr-dl{white-space:nowrap}
.tr-dl .btn{padding:4px 9px;font-size:11.5px}
.tr-filters{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px}
.tr-filters .wk-chip b{margin-left:4px;font-weight:800}
.tr-filters .wk-chip:disabled{opacity:.4;cursor:default}
.tr-filters .tr-chip-grave:not(.on){border-color:var(--red);color:var(--red)}
.tr-filter-note{font-size:12.5px;color:var(--text2);background:var(--brand-soft);border-radius:8px;padding:8px 12px;margin-bottom:10px}
.tr-dl-lbl{font-size:12px;color:var(--text3);font-weight:600}
@media(max-width:768px){
.tr-ctrl{width:100%}
.tr-ctrl select.inp{flex:1;min-width:0}
.tr-kpis{grid-template-columns:1fr 1fr}
}
/* ── SUSCRIPCIÓN Y CUENTA (2026-09-18) ── */
.acct-card{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.acct-t{font-size:14px;font-weight:800;margin-bottom:8px}
.acct-status{font-size:13px;color:var(--text2);margin-bottom:12px;line-height:1.5}
.acct-status b{color:var(--text)}
.acct-pill{display:inline-block;font-size:11.5px;font-weight:700;border-radius:100px;padding:3px 10px;margin-right:6px}
.acct-pill.ok{background:rgba(31,157,107,.12);color:var(--green)}
.acct-pill.off{background:rgba(224,72,59,.12);color:var(--red)}
.acct-pill.trial{background:var(--brand-soft);color:var(--primary)}
.acct-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-danger-outline{background:transparent;border:1.5px solid var(--red);color:var(--red)}
.btn-danger-outline:hover{background:rgba(224,72,59,.08)}
.acct-info{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.55;margin-bottom:14px}
.acct-info.danger{background:rgba(224,72,59,.06);border-color:rgba(224,72,59,.3)}
.acct-info ul{margin:6px 0 0 18px;padding:0}
.acct-mo-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}