/* =====================================================================
   TechDesk Pro · Sistema de Gestión de Soporte TI
   ===================================================================== */
:root{
  --brand:#4f46e5; --brand-2:#6366f1; --brand-3:#06b6d4; --brand-soft:#eef2ff;
  --bg:#f4f6fb; --card:#ffffff; --ink:#0f172a; --muted:#64748b; --line:#e8ecf4;
  --sb-bg:#0b1437; --sb-bg2:#101a4a; --sb-ink:#aab4d6; --sb-w:272px; --sb-w-c:78px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -8px rgba(15,23,42,.08);
  --radius:18px;
}
[data-theme="dark"]{
  --bg:#0a1020; --card:#111a30; --ink:#e8edf8; --muted:#8e9bb8; --line:#1e2a47; --brand-soft:#1b2250;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -8px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink);font-size:.925rem;-webkit-font-smoothing:antialiased}
a{text-decoration:none}
.text-muted{color:var(--muted)!important}
.link-brand{color:var(--brand);font-weight:600}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#c4cbe0;border-radius:8px}

/* ---------- Botones ---------- */
.btn-brand{background:linear-gradient(135deg,var(--brand),var(--brand-2) 60%,#7c6cf6);color:#fff;border:0;font-weight:600;border-radius:12px;box-shadow:0 8px 20px -8px rgba(79,70,229,.7);transition:.2s}
.btn-brand:hover{color:#fff;transform:translateY(-1px);box-shadow:0 12px 24px -8px rgba(79,70,229,.8)}
.btn-soft{background:var(--brand-soft);color:var(--brand);font-weight:600;border-radius:10px;border:0}
.btn-soft:hover{background:var(--brand);color:#fff}
.btn-glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px;backdrop-filter:blur(6px);font-weight:500}
.btn-glass:hover{background:rgba(255,255,255,.25);color:#fff}
.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;font-size:1.1rem;transition:.2s}
.icon-btn:hover{background:var(--brand-soft);color:var(--brand)}

/* ---------- Chips / pills ---------- */
.chip{display:inline-flex;align-items:center;font-size:.72rem;font-weight:600;padding:.35rem .75rem;border-radius:99px}
.chip-soft{background:var(--brand-soft);color:var(--brand)}
.chip-glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.pill{display:inline-block;white-space:nowrap;font-size:.72rem;font-weight:700;padding:.28rem .65rem;border-radius:8px}
.pill-danger{background:#fee2e2;color:#dc2626}.pill-warning{background:#fef3c7;color:#b45309}.pill-info{background:#e0f2fe;color:#0369a1}.pill-muted{background:#f1f5f9;color:#64748b}
.pill-soft-primary{background:#e0e7ff;color:#4338ca}.pill-soft-info{background:#cffafe;color:#0e7490}.pill-soft-warning{background:#fef3c7;color:#b45309}
[data-theme="dark"] .pill-danger{background:#451a1f;color:#fca5a5}[data-theme="dark"] .pill-warning,[data-theme="dark"] .pill-soft-warning{background:#43310f;color:#fcd34d}
[data-theme="dark"] .pill-info,[data-theme="dark"] .pill-soft-info{background:#0b2f44;color:#7dd3fc}[data-theme="dark"] .pill-muted{background:#1e2a47;color:#9fb0cf}
[data-theme="dark"] .pill-soft-primary{background:#25285e;color:#a5b4fc}

/* ---------- Marca ---------- */
.brand{display:flex;align-items:center;gap:.8rem;color:#fff}
.brand-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--brand-3),var(--brand) 70%);display:grid;place-items:center;font-size:1.35rem;color:#fff;box-shadow:0 8px 20px -6px rgba(6,182,212,.6);flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text b{font-size:1.15rem;font-weight:800;letter-spacing:-.3px}
.brand-text small{font-size:.7rem;opacity:.7;font-weight:500}
.brand-dark{color:var(--ink)}.brand-lg .brand-mark{width:52px;height:52px;font-size:1.6rem}

/* =====================================================================
   LOGIN
   ===================================================================== */
.login-body{background:#fff;min-height:100vh}
.login-wrap{display:grid;grid-template-columns:1.15fr 1fr;min-height:100vh}
.login-hero{position:relative;overflow:hidden;background:linear-gradient(145deg,#0b1437 0%,#1b1f6b 55%,#3730a3 100%);color:#fff;display:flex}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at 30% 40%,#000 20%,transparent 75%)}
.hero-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:float 12s ease-in-out infinite}
.orb-1{width:420px;height:420px;background:#06b6d4;top:-120px;right:-80px}
.orb-2{width:380px;height:380px;background:#7c3aed;bottom:-140px;left:-100px;animation-delay:-5s}
@keyframes float{50%{transform:translate(30px,-30px) scale(1.08)}}
.hero-inner{position:relative;z-index:2;padding:3rem 3.5rem;display:flex;flex-direction:column;justify-content:space-between;width:100%}
.hero-copy h1{font-size:clamp(2rem,3.4vw,3.2rem);font-weight:800;letter-spacing:-1.2px;line-height:1.1;margin:1.2rem 0 1rem}
.hero-copy h1 span{background:linear-gradient(90deg,#67e8f9,#a5b4fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{max-width:460px;color:#c7d0f5;font-size:1.02rem;line-height:1.6}
.hero-cards{position:relative;height:210px;margin:1.5rem 0}
.float-card{position:absolute;display:flex;align-items:center;gap:.8rem;padding:.85rem 1.1rem;border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);box-shadow:0 20px 40px -20px rgba(0,0,0,.5);animation:bob 6s ease-in-out infinite}
.float-card b{display:block;font-size:.88rem}.float-card small{color:#c7d0f5;font-size:.76rem}
.fc-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1.1rem}
.fc-1{top:0;left:0}.fc-2{top:70px;left:210px;animation-delay:-2s}.fc-3{top:140px;left:30px;animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-8px)}}
.hero-stats{display:flex;gap:2.5rem;border-top:1px solid rgba(255,255,255,.15);padding-top:1.4rem}
.hero-stats b{display:block;font-size:1.6rem;font-weight:800}.hero-stats span{font-size:.78rem;color:#aab4e8}
.dot-live{width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;margin-right:6px;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pulse 2s infinite}
.float-card .dot-live{position:absolute;top:12px;right:12px;margin:0}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

.login-panel{display:grid;place-items:center;padding:2rem;background:#fff}
.login-card{width:100%;max-width:420px}
.login-card-ancho{max-width:640px;background:#fff;border:1px solid #e6eaf3;border-radius:22px;padding:2.2rem 2.4rem;box-shadow:0 24px 48px -24px rgba(15,23,42,.18)}
.login-card h2{font-weight:800;letter-spacing:-.6px;font-size:1.8rem}
.field-label{font-weight:600;font-size:.85rem;color:#334155;margin-bottom:.4rem;display:block}
.input-ui{position:relative}
.input-ui>i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:1.1rem;pointer-events:none;transition:.2s}
.input-ui input{width:100%;height:52px;padding:0 48px;border:1.5px solid #e2e8f0;border-radius:14px;background:#f8fafc;font-size:.95rem;transition:.2s;outline:0}
.input-ui input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(79,70,229,.12)}
.input-ui input:focus+i,.input-ui:focus-within>i{color:var(--brand)}
.toggle-pass{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;width:38px;height:38px;border-radius:10px;color:#94a3b8}
.toggle-pass:hover{background:#eef2ff;color:var(--brand)}
.login-card .btn-brand{height:54px;border-radius:14px}
.alert-ui{display:flex;gap:.7rem;align-items:center;padding:.85rem 1rem;border-radius:12px;font-size:.88rem;margin-bottom:1.1rem}
.alert-ui-danger{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.alert-ui-success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.alert-ui-info{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.alert-ui-warning{background:#fffbeb;color:#b45309;border:1px solid #fde68a}
.login-sep{display:flex;align-items:center;gap:.8rem;margin:1.1rem 0;color:#94a3b8;font-size:.8rem;font-weight:600}
.login-sep::before,.login-sep::after{content:"";flex:1;height:1px;background:#e2e8f0}
.btn-google{background:#fff;border:1.5px solid #e2e8f0;color:#1e293b;font-weight:600;border-radius:14px;height:54px;display:flex;align-items:center;justify-content:center;gap:.6rem;transition:.2s}
.btn-google:hover{background:#f8fafc;border-color:#cbd5e1;color:#1e293b}
.btn-google i{font-size:1.15rem;color:#4285f4}
.shake{animation:shake .45s}@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}

@media(max-width:991.98px){.login-wrap{grid-template-columns:1fr}.login-hero{display:none}.login-panel{min-height:100vh;background:linear-gradient(180deg,#f4f6ff,#fff)}}
@media(max-width:575.98px){.login-card-ancho{padding:1.5rem 1.15rem;border-radius:18px}}

/* =====================================================================
   LAYOUT APP
   ===================================================================== */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sb-w);background:linear-gradient(180deg,var(--sb-bg),var(--sb-bg2));color:var(--sb-ink);display:flex;flex-direction:column;z-index:1040;transition:width .28s,transform .28s;border-right:1px solid rgba(255,255,255,.04)}
.sb-head{padding:1.4rem 1.25rem 1rem;height:82px;display:flex;align-items:center}
.sb-nav{flex:1;overflow-y:auto;padding:.25rem .85rem 1rem}
.sb-nav::-webkit-scrollbar{width:5px}.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)}
.sb-section{font-size:.66rem;text-transform:uppercase;letter-spacing:.13em;color:#5c6896;font-weight:700;padding:1.1rem .75rem .45rem;white-space:nowrap}
.sb-link{position:relative;display:flex;align-items:center;gap:.85rem;padding:.7rem .85rem;margin-bottom:2px;border-radius:12px;color:var(--sb-ink);font-weight:500;font-size:.9rem;transition:.18s;white-space:nowrap}
.sb-link i{font-size:1.15rem;width:22px;text-align:center;flex:none;transition:.18s}
.sb-link:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-link.active{color:#fff;background:linear-gradient(135deg,rgba(99,102,241,.95),rgba(79,70,229,.85));box-shadow:0 10px 24px -10px rgba(99,102,241,.9)}
.sb-link.active::before{content:"";position:absolute;left:-14px;top:22%;bottom:22%;width:4px;border-radius:0 4px 4px 0;background:#67e8f9}
.sb-badge{margin-left:auto;background:#ef4444;color:#fff;font-size:.68rem;font-weight:700;padding:.15rem .5rem;border-radius:99px}
.sb-badge.warn{background:#f59e0b}
.sb-soon{margin-left:auto;width:7px;height:7px;border-radius:50%;background:#3b4a85;font-size:0;flex:none}
.sb-foot{padding:1rem}
.sb-support{display:flex;gap:.75rem;align-items:center;padding:.85rem;border-radius:14px;background:linear-gradient(135deg,rgba(6,182,212,.18),rgba(99,102,241,.18));border:1px solid rgba(255,255,255,.08);color:#fff;white-space:nowrap;overflow:hidden}
.sb-support b{display:block;font-size:.82rem}.sb-support small{font-size:.72rem;color:#aab4d6}
.sb-support-ic{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#fde047;flex:none}

.main-wrap{margin-left:var(--sb-w);min-height:100vh;display:flex;flex-direction:column;transition:margin .28s}
.topbar{position:sticky;top:0;z-index:1030;height:74px;display:flex;align-items:center;gap:1rem;padding:0 1.75rem;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.search-ui{align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 .9rem;height:44px;width:min(420px,40vw);color:var(--muted)}
.search-ui input{border:0;outline:0;background:none;flex:1;color:var(--ink);font-size:.9rem}
.search-ui:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(79,70,229,.1)}
.search-ui kbd{background:var(--bg);color:var(--muted);border:1px solid var(--line);font-size:.68rem;padding:.15rem .4rem;border-radius:6px}
.notif-dot{position:absolute;top:10px;right:11px;width:9px;height:9px;border-radius:50%;background:#ef4444;border:2px solid var(--card)}
.user-btn{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.3rem .75rem .3rem .35rem;color:var(--ink)}
.user-btn b{font-size:.84rem;display:block}.user-btn small{font-size:.72rem;color:var(--muted)}
.avatar{width:36px;height:36px;border-radius:11px;display:inline-grid;place-items:center;color:#fff;font-weight:700;font-size:.78rem;flex:none}
.avatar-lg{width:46px;height:46px;font-size:.95rem;border-radius:14px}.avatar-sm{width:30px;height:30px;font-size:.68rem;border-radius:9px}
.dd-ui{border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px -15px rgba(15,23,42,.25);background:var(--card);overflow:hidden;margin-top:10px!important}
.dd-head{display:flex;align-items:center;padding:.9rem 1rem;font-weight:700;border-bottom:1px solid var(--line)}
.dd-item{display:flex;gap:.8rem;padding:.8rem 1rem;color:var(--ink);align-items:flex-start;border-bottom:1px solid var(--line)}
.dd-item:hover{background:var(--brand-soft)}.dd-item i{font-size:1.1rem;margin-top:2px}.dd-item b{display:block;font-size:.85rem}.dd-item small{color:var(--muted);font-size:.76rem}
.dd-foot{display:block;text-align:center;padding:.75rem;font-weight:600;font-size:.83rem;color:var(--brand)}
.dd-user{display:flex;gap:.8rem;align-items:center;padding:1rem;border-bottom:1px solid var(--line)}.dd-user small{display:block;color:var(--muted);font-size:.75rem}
.dd-link{display:flex;gap:.7rem;align-items:center;padding:.7rem 1rem;color:var(--ink);font-size:.88rem}.dd-link:hover{background:var(--brand-soft)}

.content{padding:1.5rem 1.75rem 1rem;flex:1}
.app-footer{display:flex;justify-content:space-between;padding:1rem 1.75rem 1.5rem;color:var(--muted);font-size:.78rem}
.sb-backdrop{display:none}

/* Sidebar colapsado (desktop) */
html.sb-collapsed .sidebar{width:var(--sb-w-c)}
html.sb-collapsed .main-wrap{margin-left:var(--sb-w-c)}
html.sb-collapsed .sb-label,html.sb-collapsed .sb-badge,html.sb-collapsed .sb-soon,html.sb-collapsed .brand-text,html.sb-collapsed .sb-support div:last-child{display:none}
html.sb-collapsed .sb-section{font-size:0;padding:.6rem 0;text-align:center}
html.sb-collapsed .sb-section::after{content:"";display:block;height:1px;background:rgba(255,255,255,.08);margin:0 .6rem}
html.sb-collapsed .sb-link{justify-content:center;padding:.75rem}
html.sb-collapsed .sb-link.active::before{left:-14px}
html.sb-collapsed .sb-support{justify-content:center;padding:.6rem}
@media(max-width:991.98px){
  .sidebar{transform:translateX(-100%);width:var(--sb-w)!important}.sidebar.open{transform:none}
  .main-wrap{margin-left:0!important}.topbar,.content,.app-footer{padding-left:1rem;padding-right:1rem}
  .sb-backdrop.show{display:block;position:fixed;inset:0;background:rgba(2,6,23,.55);z-index:1035;backdrop-filter:blur(2px)}
  html.sb-collapsed .sb-label,html.sb-collapsed .brand-text{display:revert}
}

/* ---------- Variante clara del sidebar (portal del cliente) ----------
   Solo color. El ancho, el fijo, el off-canvas y el colapso siguen siendo los del panel: --sb-bg y
   --sb-bg2 se apoyan en --card y --bg, que sí tienen gemelo oscuro, así que el sidebar del cliente
   pasa a tema oscuro sin una regla más. */
.sidebar-light{--sb-bg:var(--card);--sb-bg2:var(--bg);--sb-ink:#334155;border-right-color:var(--line);box-shadow:var(--shadow)}
[data-theme="dark"] .sidebar-light{--sb-ink:#c3cfe4}
.sidebar-light .brand{color:var(--ink)}
.sidebar-light .sb-nav::-webkit-scrollbar-thumb{background:var(--line)}
.sidebar-light .sb-section{color:var(--muted)}
.sidebar-light .sb-link:hover{background:var(--brand-soft);color:color-mix(in srgb,var(--brand) 75%,#000)}
.sidebar-light .sb-link.active{background:var(--brand-soft);color:color-mix(in srgb,var(--brand) 75%,#000);box-shadow:none}
/* El texto sube de tono, el fondo no: `color:var(--brand)` sobre `--brand-soft` se quedaba en 2.40:1
   con la marca de fábrica en oscuro y en 4.12:1 con la del tenant en claro, bajo el 4.5:1 de WCAG 1.4.3
   para texto pequeño. Mezclado hacia negro en claro y hacia blanco en oscuro llega a ≥4.5:1 en las ocho
   marcas que puede elegir la empresa —la hoja no manda: `brand_css()` redefine `--brand`/`--brand-2`/
   `--brand-soft` por tenant—. La intención sigue siendo la tinta suave de antes, no el bloque saturado
   del panel. La barrita de `::before` es decoro, no texto: se queda en `--brand`. */
[data-theme="dark"] .sidebar-light .sb-link:hover,[data-theme="dark"] .sidebar-light .sb-link.active{color:color-mix(in srgb,var(--brand-2) 65%,#fff)}
.sidebar-light .sb-link.active::before{background:var(--brand)}
html.sb-collapsed .sidebar-light .sb-section::after{background:var(--line)}
.sb-cta{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.7rem .85rem;border-radius:12px;font-weight:700;font-size:.9rem;margin-bottom:.4rem;white-space:nowrap}
.sb-cta.on{box-shadow:0 0 0 4px var(--brand-soft)}
.hero-portal{position:relative;overflow:hidden;border-radius:24px;padding:1.6rem 1.8rem;color:#fff;background:linear-gradient(120deg,#4f46e5 0%,#6d28d9 55%,#0891b2 135%);box-shadow:0 22px 44px -24px rgba(79,70,229,.75)}

/* =====================================================================
   COMPONENTES
   ===================================================================== */
.card-ui{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.35rem;box-shadow:var(--shadow)}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}
.card-head h6{font-weight:700;margin:0;font-size:1rem}.card-head small{color:var(--muted);font-size:.78rem}
.section-title{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;color:var(--muted)}
.mini-title{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:1rem 0 .7rem}
.chart-box{position:relative;width:100%}
.legend-inline{display:flex;gap:1rem;font-size:.78rem;color:var(--muted);font-weight:500}
.legend-inline i,.donut-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}

/* Welcome */
.welcome{position:relative;overflow:hidden;border-radius:22px;padding:1.8rem 2rem;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:2rem;background:linear-gradient(120deg,#312e81 0%,#4f46e5 50%,#0891b2 130%);box-shadow:0 20px 40px -20px rgba(79,70,229,.6)}
.welcome::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.2px);background-size:22px 22px;mask-image:linear-gradient(90deg,transparent 35%,#000);pointer-events:none}
.welcome-orb{position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.12);right:-90px;top:-130px;filter:blur(8px)}
.welcome-text{position:relative;z-index:1;max-width:620px}
.welcome h1{font-size:1.75rem;font-weight:800;letter-spacing:-.6px;margin:.8rem 0 .4rem}
.welcome p{margin:0;color:#e0e7ff;line-height:1.55}
.welcome-stats{position:relative;z-index:1;gap:1rem}
.welcome-stats>div{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);border-radius:16px;padding:.9rem 1.3rem;text-align:center;min-width:112px}
.welcome-stats b{display:block;font-size:1.65rem;font-weight:800}.welcome-stats span{font-size:.74rem;color:#e0e7ff}

/* KPI */
.kpi{--c:#4f46e5;--cs:#eef2ff;position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.15rem;box-shadow:var(--shadow);height:100%;overflow:hidden;transition:.25s;color:var(--ink);text-decoration:none;display:block}
.kpi:hover{transform:translateY(-4px);box-shadow:0 20px 36px -18px color-mix(in srgb,var(--c) 55%,transparent);color:var(--ink);text-decoration:none}
.kpi::after{content:"";position:absolute;right:-28px;top:-28px;width:96px;height:96px;border-radius:50%;background:var(--cs);opacity:.7}
.kpi-ic{position:relative;z-index:1;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--c);color:#fff;font-size:1.2rem;box-shadow:0 10px 18px -8px var(--c)}
.kpi-val{font-size:1.65rem;font-weight:800;letter-spacing:-.8px;margin-top:.85rem;line-height:1.1}
.kpi-lbl{color:var(--muted);font-size:.8rem;font-weight:500;margin-top:.15rem}
.kpi-sub{font-size:.72rem;margin-top:.55rem;color:var(--muted);font-weight:600}
.kpi-sub.up{color:#059669}.kpi-sub.down{color:#dc2626}
.kpi-indigo{--c:#4f46e5;--cs:#eef2ff}.kpi-red{--c:#ef4444;--cs:#fee2e2}.kpi-green{--c:#10b981;--cs:#d1fae5}
.kpi-sky{--c:#0ea5e9;--cs:#e0f2fe}.kpi-amber{--c:#f59e0b;--cs:#fef3c7}.kpi-violet{--c:#8b5cf6;--cs:#ede9fe}
[data-theme="dark"] .kpi::after{opacity:.12}

/* Donut / gauge */
.donut-box{height:210px}.donut-center,.gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-center b{font-size:2rem;font-weight:800;line-height:1}.donut-center span,.gauge-center span{font-size:.75rem;color:var(--muted)}
.donut-legend{margin-top:1rem;display:grid;gap:.5rem}.donut-legend div{display:flex;align-items:center;font-size:.84rem;color:var(--muted)}.donut-legend b{margin-left:auto;color:var(--ink)}
.gauge-box{height:150px}.gauge-center{justify-content:flex-end;padding-bottom:6px}.gauge-center b{font-size:2rem;font-weight:800;line-height:1}

/* Progreso */
.progress-ui{height:8px;border-radius:99px;background:var(--bg);overflow:hidden;flex:1}
.progress-ui .bar{height:100%;border-radius:99px;background:var(--brand);transition:width 1s}
.bar-danger{background:#ef4444!important}.bar-warning{background:#f59e0b!important}.bar-info{background:#0ea5e9!important}.bar-muted{background:#94a3b8!important}
.prio-row{display:flex;align-items:center;gap:.8rem;margin-bottom:.65rem;font-size:.84rem}.prio-name{width:84px;display:flex;align-items:center;gap:.5rem;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot-danger{background:#ef4444}.dot-warning{background:#f59e0b}.dot-info{background:#0ea5e9}.dot-muted{background:#94a3b8}
.tech-row{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:1rem}.tech-row b{font-size:.86rem}

/* Tabla */
.table-ui{width:100%;border-collapse:separate;border-spacing:0}
.table-ui th{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;padding:.7rem .75rem;background:var(--bg);white-space:nowrap}
.table-ui th:first-child{border-radius:10px 0 0 10px}.table-ui th:last-child{border-radius:0 10px 10px 0}
.table-ui td{padding:.8rem .75rem;border-bottom:1px solid var(--line);vertical-align:middle}
.table-ui tbody tr:last-child td{border-bottom:0}.table-ui tbody tr:hover{background:color-mix(in srgb,var(--brand-soft) 55%,transparent)}
.tk-code{color:var(--brand);font-size:.84rem}.tk-sub{font-size:.76rem;color:var(--muted)}
.sla{font-size:.78rem;font-weight:600;white-space:nowrap}.sla-ok{color:#059669}.sla-bad{color:#dc2626}

/* Timeline y alertas */
.timeline{position:relative}.tl-item{display:flex;gap:.85rem;padding-bottom:1.1rem;position:relative}
.tl-item:not(:last-child)::before{content:"";position:absolute;left:19px;top:40px;bottom:2px;width:2px;background:var(--line)}
.tl-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1.05rem;flex:none}
.tl-item b{display:block;font-size:.86rem;line-height:1.3}.tl-item small{display:block;color:var(--muted);font-size:.78rem}.tl-item em{font-style:normal;color:#94a3b8;font-size:.72rem}
.alert-row{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.7rem 0;border-bottom:1px dashed var(--line)}
.alert-row:last-child{border-bottom:0}.alert-row b{display:block;font-size:.85rem}.alert-row small{color:var(--muted);font-size:.75rem}

/* Módulos pendientes */
.module-hero{text-align:center;padding:3rem 1.5rem}
.empty-icon{width:84px;height:84px;margin:0 auto 1.2rem;border-radius:26px;display:grid;place-items:center;font-size:2.3rem;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-3));box-shadow:0 18px 30px -14px var(--brand)}
.empty-state{text-align:center;padding:4rem 1rem}
.feature-item{display:flex;gap:.75rem;align-items:flex-start;padding:1rem 1.1rem;font-weight:500}.feature-item i{color:#10b981;font-size:1.2rem}

@media(max-width:575.98px){.welcome{padding:1.3rem}.welcome h1{font-size:1.35rem}.kpi-val{font-size:1.35rem}}

/* =====================================================================
   MÓDULOS: cabeceras, filtros, formularios, paginación, toasts
   ===================================================================== */
.pill-success{background:#d1fae5;color:#047857}[data-theme="dark"] .pill-success{background:#064e3b;color:#6ee7b7}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.page-head h1{font-size:1.5rem;font-weight:800;letter-spacing:-.5px;margin:0}
.page-head p{margin:0;color:var(--muted);font-size:.86rem}
.crumbs{font-size:.78rem;color:var(--muted);margin-bottom:.35rem}.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--brand)}
.stat-mini{display:flex;align-items:center;gap:.9rem;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:.9rem 1rem;box-shadow:var(--shadow);height:100%}
.stat-mini .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.15rem}
.stat-mini b{display:block;font-size:1.3rem;font-weight:800;line-height:1.1}.stat-mini span{font-size:.76rem;color:var(--muted)}
.filter-bar{display:flex;gap:.65rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.filter-bar .search-ui{width:auto;flex:1;min-width:220px;display:flex}
.select-ui,.form-ui .form-control,.form-ui .form-select{height:44px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:.88rem;padding:0 .9rem;outline:0;transition:.2s}
.select-ui{min-width:150px}
.mini-field{height:38px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:.82rem;padding:0 .7rem;outline:0;min-width:0;transition:.2s}
.mini-field:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(79,70,229,.12)}
.form-ui textarea.form-control{height:auto;padding:.7rem .9rem}
.select-ui:focus,.form-ui .form-control:focus,.form-ui .form-select:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(79,70,229,.12);background:var(--card);color:var(--ink)}
.form-ui label.lbl{font-weight:600;font-size:.82rem;margin-bottom:.35rem;color:var(--ink)}
.form-ui .req{color:#ef4444}
.form-ui .is-invalid{border-color:#ef4444}.form-ui .err{color:#dc2626;font-size:.76rem;margin-top:.25rem}
.form-ui .help{color:var(--muted);font-size:.74rem;margin-top:.25rem}
.form-ui .form-check-input{width:2.6em;height:1.4em}
.form-section{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:1.2rem 0 .8rem;display:flex;align-items:center;gap:.6rem}
.form-section::after{content:"";flex:1;height:1px;background:var(--line)}
/* Casillas de un campo 'multi': la lista puede ser larga (todos los repuestos publicados), así que
   se abre un cuadro con scroll en vez de estirar el formulario. */
.multi-box{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:.45rem .7rem;background:var(--card)}
.multi-box.is-invalid{border-color:#dc2626}
.multi-op{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;font-size:.9rem;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line);cursor:pointer}
.multi-op:last-child{border-bottom:0}
.multi-op input{width:16px;height:16px;flex:none;accent-color:var(--brand)}
.multi-vacia{font-size:.86rem;color:var(--muted);margin:.2rem 0}
/* Historial de un cupón: la barrita es relativa al día en que más se usó. */
.uso-dia{display:flex;align-items:center;gap:.55rem;font-size:.82rem;margin-bottom:.4rem}
.uso-dia-f{width:84px;flex:none;color:var(--muted)}
.uso-dia-b{height:8px;flex:none;border-radius:6px;background:var(--brand);opacity:.85;min-width:6px}
.btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:12px;font-weight:600}
.btn-ghost:hover{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-soft)}
.row-actions{display:flex;gap:.35rem;justify-content:flex-end}
.act-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--muted);display:grid;place-items:center;transition:.15s;font-size:.95rem}
.act-btn:hover{background:var(--brand-soft);color:var(--brand)}.act-btn.danger:hover{background:#fee2e2;color:#dc2626}
.table-ui td.cell-main b{display:block;font-size:.88rem}.table-ui td.cell-main small{color:var(--muted);font-size:.76rem}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;flex-wrap:wrap;gap:.6rem}
.pager-info{font-size:.8rem;color:var(--muted)}
.pager ul{display:flex;gap:.3rem;list-style:none;margin:0;padding:0}
.pager li a,.pager li.gap{display:grid;place-items:center;min-width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:.82rem;font-weight:600;padding:0 .4rem}
.pager li.gap{border:0;background:none}.pager li a:hover{background:var(--brand-soft);color:var(--brand)}
.pager li.active a{background:var(--brand);color:#fff;border-color:var(--brand)}.pager li.disabled a{opacity:.4;pointer-events:none}
.empty-row{text-align:center;padding:2.5rem 1rem;color:var(--muted)}.empty-row i{font-size:2rem;display:block;margin-bottom:.4rem;opacity:.5}
.toast-stack{position:fixed;right:1.25rem;bottom:1.25rem;z-index:2000;display:flex;flex-direction:column;gap:.6rem}
.toast-ui{display:flex;align-items:center;gap:.7rem;min-width:280px;max-width:380px;background:#0f172a;color:#fff;padding:.85rem 1rem;border-radius:14px;box-shadow:0 20px 40px -12px rgba(0,0,0,.4);animation:tin .35s;border-left:4px solid #6366f1;font-size:.88rem}
.toast-ui button{margin-left:auto;background:none;border:0;color:#94a3b8;font-size:1.3rem;line-height:1}
.toast-success{border-color:#10b981}.toast-success i{color:#34d399}.toast-danger{border-color:#ef4444}.toast-danger i{color:#f87171}.toast-warning{border-color:#f59e0b}.toast-warning i{color:#fbbf24}
.toast-ui.out{opacity:0;transform:translateX(20px);transition:.4s}@keyframes tin{from{opacity:0;transform:translateY(12px)}}
.modal-content{border:0;border-radius:20px;background:var(--card);color:var(--ink)}

/* Ticket detalle */
.tk-head h1{font-size:1.35rem;font-weight:800;letter-spacing:-.4px}
.tk-code-lg{font-weight:800;color:var(--brand);font-size:.95rem}
.info-list{display:grid;gap:.85rem}.info-item{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;align-items:flex-start}
.info-item span:first-child{color:var(--muted);flex:none}.info-item b{font-weight:600;text-align:right}
.sla-box{border-radius:14px;padding:1rem;background:var(--bg);margin-bottom:1rem}
.sla-box .top{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:.5rem}
.sla-box .time{font-size:1.25rem;font-weight:800}
.sla-box.ok .time{color:#059669}.sla-box.warn .time{color:#d97706}.sla-box.bad .time{color:#dc2626}
.comment{display:flex;gap:.8rem;margin-bottom:1.1rem}
.comment .bubble{flex:1;background:var(--bg);border-radius:4px 16px 16px 16px;padding:.8rem 1rem}
.comment.internal .bubble{background:#fffbeb;border:1px dashed #fcd34d}[data-theme="dark"] .comment.internal .bubble{background:#2b2410}
.comment .meta{display:flex;gap:.5rem;align-items:center;font-size:.78rem;color:var(--muted);margin-bottom:.25rem}.comment .meta b{color:var(--ink)}
.sys-event{display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--muted);margin:0 0 1rem 3.4rem}
.sys-event i{color:var(--brand)}
.desc-box{background:var(--bg);border-radius:14px;padding:1rem 1.1rem;line-height:1.6;white-space:pre-line}
.state-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-weight:600;font-size:.82rem;transition:.15s}
.state-chip b{background:var(--bg);border-radius:8px;padding:.05rem .45rem;font-size:.76rem}
.state-chip:hover,.state-chip.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.detail-hero{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.detail-hero .logo{width:68px;height:68px;border-radius:20px;background:linear-gradient(135deg,var(--brand),var(--brand-3));color:#fff;display:grid;place-items:center;font-size:1.7rem;font-weight:800}
.filter-bar .select-ui{min-width:0;flex:0 1 165px}
.filter-bar .btn{height:44px;display:inline-flex;align-items:center}

/* Calendario de visitas */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cal-h{background:var(--bg);text-align:center;font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:.6rem 0}
.cal-c{min-height:104px;padding:.35rem;border-top:1px solid var(--line);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:3px;background:var(--card)}
.cal-c:nth-child(7n+8){border-left:0}.cal-c.off{background:var(--bg)}
.cal-n{font-size:.78rem;font-weight:700;color:var(--muted);width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.cal-c.today{background:color-mix(in srgb,var(--brand-soft) 60%,var(--card))}.cal-c.today .cal-n{background:var(--brand);color:#fff}
.cal-ev{display:block;font-size:.68rem;line-height:1.25;padding:.2rem .4rem;border-radius:6px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);border-left:3px solid var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.cal-ev:hover{background:color-mix(in srgb,var(--c) 26%,transparent)}.cal-ev.done{opacity:.5;text-decoration:line-through}
.cal-more{font-size:.66rem;color:var(--muted);padding-left:.3rem}
.visit-item{display:flex;gap:.9rem;padding:.9rem 0;border-bottom:1px dashed var(--line)}.visit-item:last-child{border-bottom:0}
.visit-item b{display:block;font-size:.88rem}.visit-item small{color:var(--muted);font-size:.76rem}
.vdate{width:50px;height:56px;border-radius:14px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.vdate b{font-size:1.25rem;line-height:1}.vdate span{font-size:.66rem;text-transform:uppercase;font-weight:700}
@media(max-width:767.98px){.cal-c{min-height:70px}.cal-ev b{display:none}}
@media print{.sidebar,.topbar,.app-footer,.page-head .btn,.toast-stack,form button{display:none!important}.main-wrap{margin:0!important}.card-ui{box-shadow:none}}

/* Reportes */
.report-card{--c:#4f46e5;transition:.25s;color:var(--ink);position:relative;overflow:hidden}
.report-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px var(--c);color:var(--ink)}
.report-card::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--c);opacity:.08}
.rc-ic{width:50px;height:50px;border-radius:15px;background:var(--c);color:#fff;display:grid;place-items:center;font-size:1.4rem;margin-bottom:1rem;box-shadow:0 12px 20px -10px var(--c)}
.report-card h5{font-weight:700;font-size:1.05rem}.report-card p{color:var(--muted);font-size:.86rem;min-height:2.6em}
.rc-go{color:var(--c);font-weight:700;font-size:.85rem}
.table-ui td.text-end,.table-ui td.text-end{white-space:nowrap}

/* Configuración */
.cfg-tab{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-radius:12px;color:var(--ink);font-weight:600;font-size:.9rem;transition:.15s}
.cfg-tab i{font-size:1.1rem;color:var(--muted)}.cfg-tab:hover{background:var(--brand-soft);color:var(--brand)}
.cfg-tab.active{background:var(--brand);color:#fff}.cfg-tab.active i{color:#fff}
.cat-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.65rem 0;border-bottom:1px dashed var(--line)}.cat-row:last-child{border-bottom:0}
/* ---------- Mi seguridad: centro de postura ---------- */
.seg-app{--seg-ok:#059669;--seg-aviso:#c2410c;--seg-peligro:#dc2626}
[data-theme="dark"] .seg-app{--seg-ok:#34d399;--seg-aviso:#fbbf24;--seg-peligro:#f87171}
.seg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:.85rem}
.seg-card{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:14px;padding:.85rem .95rem;box-shadow:var(--shadow)}
.seg-card.seg-ok{border-left-color:var(--seg-ok)}.seg-card.seg-aviso{border-left-color:var(--seg-aviso)}.seg-card.seg-peligro{border-left-color:var(--seg-peligro)}
.seg-cab{display:flex;align-items:center;gap:.55rem;margin-bottom:.4rem}
.seg-cab>b{flex:1;font-size:.86rem}
.seg-ic{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-size:.92rem}
.seg-pill{flex:none;font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.18rem .48rem;border-radius:99px;color:var(--muted);background:color-mix(in srgb,var(--muted) 14%,transparent)}
.seg-ok>.seg-cab .seg-pill,.seg-alerta.seg-ok .seg-pill{color:var(--seg-ok);background:color-mix(in srgb,var(--seg-ok) 14%,transparent)}
.seg-aviso>.seg-cab .seg-pill{color:var(--seg-aviso);background:color-mix(in srgb,var(--seg-aviso) 14%,transparent)}
.seg-peligro>.seg-cab .seg-pill{color:var(--seg-peligro);background:color-mix(in srgb,var(--seg-peligro) 14%,transparent)}
.seg-card p{margin:0 0 .5rem;font-size:.77rem;line-height:1.45;color:var(--muted)}
.seg-pie{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;font-size:.7rem}
.seg-pie code{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:.12rem .38rem;color:var(--ink);font-size:.7rem}
.seg-pie span{color:var(--muted);margin-left:auto}
.seg-alertas{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.9rem}
.seg-alerta{display:flex;gap:.6rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:12px;padding:.6rem .8rem}
.seg-alerta.seg-aviso{border-left-color:var(--seg-aviso)}.seg-alerta.seg-peligro{border-left-color:var(--seg-peligro)}
.seg-alerta>i{font-size:1rem;margin-top:.1rem;color:var(--muted)}
.seg-alerta.seg-aviso>i{color:var(--seg-aviso)}.seg-alerta.seg-peligro>i{color:var(--seg-peligro)}
.seg-alerta b{display:block;font-size:.82rem}.seg-alerta span{display:block;font-size:.75rem;color:var(--muted);line-height:1.45}
.seg-switch{display:flex;align-items:flex-start;gap:1rem;padding:.7rem 0;border-bottom:1px dashed var(--line);cursor:pointer}
.seg-switch:last-of-type{border-bottom:0}
.seg-sw-t{flex:1}.seg-sw-t b{display:block;font-size:.85rem}
.seg-sw-t small{display:block;font-size:.75rem;color:var(--muted);line-height:1.45;margin-top:.15rem}
.seg-sw-t code{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:.05rem .3rem;font-size:.72rem}
.cfg-uri{background:var(--sb-bg);color:#dbe4ff;border-radius:12px;padding:.7rem .9rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.78rem;line-height:1.75;white-space:pre-wrap;word-break:break-all;user-select:all;margin:0}
.table-report td{white-space:nowrap}
.table-scroll{max-height:580px;overflow:auto}.table-scroll thead th{position:sticky;top:0;z-index:2}
@media print{.table-scroll{max-height:none;overflow:visible}}

/* =====================================================================
   KPI en degradado (panel principal)
   ===================================================================== */
.kpi-g{--g1:#6366f1;--g2:#4338ca;height:100%;position:relative;display:flex;flex-direction:column;min-height:158px;padding:1.2rem 1.25rem 1.05rem;border-radius:20px;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:0 18px 32px -18px var(--g2);transition:transform .25s,box-shadow .25s}
.kpi-g:hover{color:#fff;transform:translateY(-5px);box-shadow:0 26px 38px -16px var(--g2)}
.kpi-g::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0,rgba(255,255,255,.22),transparent 55%);pointer-events:none}
.kpi-g-bg{position:absolute;right:-4px;bottom:-10px;font-size:5.4rem;line-height:1;opacity:.16;transform:rotate(-8deg);transition:.35s;pointer-events:none}
.kpi-g:hover .kpi-g-bg{transform:rotate(0) scale(1.12);opacity:.28}
.kpi-g-val{position:relative;font-size:2.35rem;font-weight:800;letter-spacing:-1px;line-height:1.05}
.kpi-g-tit{position:relative;font-weight:700;font-size:.95rem;margin-top:.3rem}
.kpi-g-sub{position:relative;font-size:.76rem;line-height:1.35;opacity:.9;margin-top:.1rem}
.kpi-g-foot{position:relative;margin-top:auto;padding-top:.8rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}.kpi-g-go{position:relative;font-weight:700;font-size:.85rem;display:inline-flex;align-items:center;gap:.4rem}
.kpi-g-go i{transition:transform .2s}.kpi-g:hover .kpi-g-go i{transform:translateX(5px)}
.kpi-g-chip{position:relative;z-index:1;white-space:nowrap;font-size:.68rem;font-weight:700;padding:.18rem .55rem;border-radius:99px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(4px)}
.kpi-g-indigo{--g1:#6366f1;--g2:#4338ca}.kpi-g-red{--g1:#fb923c;--g2:#dc2626}.kpi-g-green{--g1:#10b981;--g2:#047857}.kpi-g-blue{--g1:#3b82f6;--g2:#1d4ed8}
.kpi-g-amber{--g1:#fbbf24;--g2:#d97706}.kpi-g-teal{--g1:#14b8a6;--g2:#0f766e}.kpi-g-cyan{--g1:#22d3ee;--g2:#0e7490}.kpi-g-violet{--g1:#a78bfa;--g2:#6d28d9}
@media(max-width:575.98px){.kpi-g{min-height:140px}.kpi-g-val{font-size:2rem}}

/* =====================================================================
   ASISTENTE IA + CHAT IA
   ===================================================================== */
.sb-tag{margin-left:auto;font-size:.6rem;font-weight:800;letter-spacing:.05em;padding:.12rem .45rem;border-radius:99px;color:#fff;background:linear-gradient(135deg,#7c3aed,#06b6d4);flex:none}
html.sb-collapsed .sb-tag{display:none}
.ia-hero{background:linear-gradient(120deg,#1e1b4b,#4338ca 55%,#7c3aed);border-radius:20px;color:#fff;padding:24px 28px;margin-bottom:16px;position:relative;overflow:hidden;box-shadow:0 22px 40px -22px rgba(79,70,229,.7)}
.ia-hero:after{content:"";position:absolute;right:-50px;top:-70px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.07)}
.ia-hero h2{font-size:1.25rem;font-weight:800;margin:0 0 4px;position:relative;z-index:1}.ia-hero p{margin:0 0 14px;opacity:.85;font-size:.88rem;position:relative;z-index:1}
.ia-ask{display:flex;gap:8px;background:#fff;border-radius:14px;padding:6px;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);position:relative;z-index:1}
.ia-ask textarea{flex:1;border:0;outline:0;resize:none;padding:.65rem .8rem;font-size:.97rem;border-radius:10px;background:transparent;color:#0f172a;min-height:48px;max-height:120px}
.ia-ask button{border:0;border-radius:11px;padding:0 20px;font-weight:700;color:#fff;background:linear-gradient(135deg,#4f46e5,#7c3aed);display:flex;align-items:center;gap:8px;white-space:nowrap}
.ia-ask button:disabled{opacity:.6}
.ia-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;position:relative;z-index:1}
.ia-chip{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:5px 12px;font-size:.78rem;cursor:pointer;transition:.15s}
.ia-chip:hover{background:rgba(255,255,255,.25)}
.ia-res{margin-bottom:16px}
.ia-res h5{font-weight:800;margin:0;font-size:1.05rem}.ia-meta{color:var(--muted);font-size:.78rem}
.ia-sum{background:linear-gradient(135deg,#eef2ff,#f5f3ff);border:1px solid #e0e7ff;border-radius:12px;padding:10px 14px;font-size:.88rem;color:#312e81;display:flex;gap:10px;align-items:flex-start;margin:12px 0}
[data-theme="dark"] .ia-sum{background:#1e1b4b;border-color:#312e81;color:#c7d2fe}
.ia-chart{position:relative;height:300px;margin:8px 0 14px}
.ia-sql{background:#0f172a;color:#e2e8f0;border-radius:12px;padding:12px 14px;font-size:.78rem;white-space:pre-wrap;word-break:break-word;margin:10px 0 0}
.ia-tbl{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:12px}
.ia-tbl .table-ui th{position:sticky;top:0;z-index:1;border-radius:0}
.ia-side .it{display:flex;gap:8px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:8px}
.ia-side .it:hover{background:var(--bg)}.ia-side .it:last-child{border:0}
.ia-side .it .tx{flex:1;min-width:0;font-size:.82rem;line-height:1.25}.ia-side .it .tx small{color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ia-side .it button{border:0;background:none;color:var(--muted);padding:2px 4px}.ia-side .it button:hover{color:#e11d48}
.ia-load{display:flex;align-items:center;gap:12px;padding:22px;color:var(--muted)}
.ia-dots span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#7c3aed;margin-right:4px;animation:iad 1s infinite ease-in-out}.ia-dots span:nth-child(2){animation-delay:.15s}.ia-dots span:nth-child(3){animation-delay:.3s}
@keyframes iad{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}
.ia-setup .st{display:flex;gap:12px;margin-bottom:10px}.ia-setup .st b{width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none;font-size:.8rem}
.seg{display:inline-flex;background:var(--bg);border-radius:10px;padding:3px}.seg button{border:0;background:none;padding:.25rem .7rem;border-radius:8px;font-size:.76rem;font-weight:600;color:var(--muted)}.seg button.on{background:var(--card);color:var(--brand);box-shadow:var(--shadow)}
.empty-row{text-align:center;color:var(--muted);padding:1.5rem}.empty-row i{display:block;font-size:1.6rem;margin-bottom:.3rem}
@media(max-width:575.98px){.ia-ask{flex-direction:column}.ia-ask button{padding:12px;justify-content:center}.ia-hero{padding:16px}}

/* ---- Chat ---- */
.chat-fab{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;border:0;color:#fff;font-size:1.5rem;background:linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 14px 30px -8px rgba(79,70,229,.7);z-index:1045;display:grid;place-items:center;transition:transform .15s}
.chat-fab:hover{transform:scale(1.07)}
.chat-panel{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);overflow:hidden}
.chat-root:not(.chat-page) .chat-panel{position:fixed;right:22px;bottom:92px;width:390px;height:min(620px,calc(100dvh - 120px));border-radius:20px;box-shadow:0 30px 70px -20px rgba(15,23,42,.45);z-index:1046}
.chat-root:not(.chat-page) .chat-panel[hidden]{display:none}
.chat-page .chat-panel{height:calc(100dvh - 250px);min-height:460px;max-width:900px;border-radius:18px;box-shadow:var(--shadow)}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;color:#fff;background:linear-gradient(120deg,#4338ca,#7c3aed)}
.chat-head b{display:block;line-height:1.1}.chat-head small{opacity:.8;font-size:.72rem}
.chat-head button{border:0;background:rgba(255,255,255,.15);color:#fff;border-radius:9px;width:32px;height:32px}
.chat-av{width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.chat-msgs{flex:1;overflow-y:auto;padding:14px;background:var(--bg);display:flex;flex-direction:column;gap:10px}
.chat-m{display:flex}.chat-m.me{justify-content:flex-end}
.chat-b{max-width:88%;padding:9px 13px;border-radius:16px;font-size:.88rem;line-height:1.45;word-break:break-word}
.chat-m.bot .chat-b{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:5px}
.chat-m.me .chat-b{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border-bottom-right-radius:5px}
.chat-sugs{display:flex;flex-wrap:wrap;gap:6px}.chat-sug{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 11px;font-size:.78rem;color:var(--ink)}.chat-sug:hover{border-color:#7c3aed;color:#7c3aed}
.chat-tg{display:block;margin-top:8px;border:0;background:none;color:var(--brand);font-size:.78rem;font-weight:600;padding:0}.chat-tg.on{color:var(--muted)}
.chat-tbl{margin-top:6px;border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:100%}.chat-tbl .table-ui{font-size:.74rem}.chat-tbl .table-ui td,.chat-tbl .table-ui th{padding:.35rem .5rem}
.chat-in{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--card);align-items:flex-end}
.chat-in textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:12px;padding:.55rem .75rem;font-size:16px;background:var(--bg);color:var(--ink);outline:0;max-height:110px}
.chat-in textarea:focus{border-color:#7c3aed}
.chat-in button{width:42px;height:42px;border:0;border-radius:12px;color:#fff;background:linear-gradient(135deg,#4f46e5,#7c3aed)}.chat-in button:disabled{opacity:.5}
@media(max-width:575.98px){
  .chat-fab{right:14px;bottom:14px;width:54px;height:54px}
  .chat-root:not(.chat-page) .chat-panel{inset:0;width:auto;height:auto;border-radius:0}
  body.chat-open .chat-fab{display:none}
  .chat-page .chat-panel{height:calc(100dvh - 230px)}
}

/* ===== CRM ===== */
.seg a{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .8rem;border-radius:8px;font-size:.78rem;font-weight:600;color:var(--muted);text-decoration:none}.seg a.on{background:var(--card);color:var(--brand);box-shadow:var(--shadow)}
.avatar-xs{width:24px;height:24px;font-size:.58rem;border-radius:8px}
.tabs-ui{gap:.25rem;border-bottom:1px solid var(--line);flex-wrap:nowrap;overflow-x:auto}.tabs-ui .nav-link{border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--muted);font-weight:600;font-size:.86rem;padding:.6rem .95rem;white-space:nowrap;background:none}.tabs-ui .nav-link.active{color:var(--brand);border-bottom-color:var(--brand);background:none}
.btn-danger-soft{background:#fee2e2;color:#dc2626;border:0;font-weight:600}.btn-danger-soft:hover{background:#fecaca;color:#b91c1c}[data-theme="dark"] .btn-danger-soft{background:#451a1f;color:#fca5a5}
/* score */
.score{display:flex;align-items:center;gap:.5rem}.score-bar{flex:1;height:6px;background:var(--bg);border-radius:6px;overflow:hidden;min-width:50px}.score-bar i{display:block;height:100%;border-radius:6px}.score b{font-size:.78rem;min-width:22px}
.score-lg{display:flex;align-items:center;gap:1rem}.score-ring{--p:0;width:78px;height:78px;border-radius:50%;background:conic-gradient(var(--brand) calc(var(--p)*1%),var(--bg) 0);display:grid;place-items:center;flex:none;position:relative}.score-ring::before{content:"";position:absolute;inset:8px;background:var(--card);border-radius:50%}.score-ring b{position:relative;font-size:1.4rem;font-weight:800}
/* kanban */
.kb-board{display:flex;gap:.9rem;overflow-x:auto;padding-bottom:.8rem;align-items:flex-start}
.kb-col{flex:0 0 280px;background:var(--bg);border-radius:16px;border-top:3px solid var(--kc);padding:.65rem;min-height:140px;transition:background .15s,box-shadow .15s}
.kb-col.over{box-shadow:0 0 0 2px var(--kc);background:var(--brand-soft)}
.kb-head{padding:.15rem .3rem .6rem}.kb-head b{font-size:.86rem}.kb-head small{display:block;color:var(--muted);font-size:.72rem;margin-top:1px}
.kb-n{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:20px;font-size:.68rem;font-weight:700;padding:0 .45rem;color:var(--muted);vertical-align:middle}
.kb-body{display:flex;flex-direction:column;gap:.55rem;min-height:40px}
.kb-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;box-shadow:var(--shadow);cursor:grab}.kb-card:active{cursor:grabbing}.kb-card.drag{opacity:.45;transform:rotate(1.5deg)}.kb-card:hover{border-color:var(--brand)}
.kb-top{display:flex;justify-content:space-between;gap:.4rem}.kb-title{font-weight:700;font-size:.84rem;color:var(--ink);text-decoration:none;line-height:1.25}.kb-title:hover{color:var(--brand)}
.kb-mv{border:0;background:none;color:var(--muted);padding:0 .2rem;line-height:1;border-radius:6px}.kb-mv:hover{background:var(--bg)}
.kb-cli{font-size:.74rem;color:var(--muted);margin:.25rem 0}.kb-val{font-weight:800;font-size:.95rem;color:var(--ink)}.kb-tipo{font-size:.65rem;font-weight:600;background:var(--brand-soft);color:var(--brand);padding:.05rem .45rem;border-radius:20px;margin-left:.25rem;vertical-align:middle}
.kb-foot{display:flex;align-items:center;gap:.6rem;margin-top:.5rem;padding-top:.5rem;border-top:1px dashed var(--line);font-size:.72rem;color:var(--muted)}.kb-foot .avatar{margin-left:auto}.kb-foot .tl-ic{width:18px;height:18px;font-size:.65rem;border-radius:6px;display:inline-grid;vertical-align:middle}
.kb-empty{text-align:center;font-size:.76rem;color:var(--muted);border:1.5px dashed var(--line);border-radius:12px;padding:1rem}
.crm-toast{position:fixed;right:20px;bottom:20px;z-index:2000;padding:.65rem 1rem;border-radius:12px;color:#fff;font-weight:600;font-size:.85rem;opacity:0;transform:translateY(10px);transition:.25s;box-shadow:0 8px 24px #0004}.crm-toast.show{opacity:1;transform:none}.crm-toast.ok{background:#059669}.crm-toast.err{background:#dc2626}
/* actividades */
.act-it{display:flex;gap:.8rem;padding:.75rem 0;border-bottom:1px solid var(--line)}.act-it:last-child{border-bottom:0}
.act-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}.act-body{flex:1;min-width:0}
.act-top b{font-size:.88rem}.act-sub{display:flex;flex-wrap:wrap;gap:.2rem .8rem;font-size:.74rem;color:var(--muted);margin-top:.15rem}.act-sub a{color:var(--brand);text-decoration:none;font-weight:600}
.act-det{font-size:.8rem;margin-top:.3rem;color:var(--ink)}.act-res{font-size:.8rem;margin-top:.35rem;background:#10b9811a;color:#047857;border-radius:8px;padding:.35rem .6rem}[data-theme="dark"] .act-res{color:#6ee7b7}
.act-it.done .act-top b{text-decoration:line-through;color:var(--muted)}.act-it.late{background:linear-gradient(90deg,#ef44440f,transparent);margin:0 -.5rem;padding-left:.5rem;border-radius:10px}
.act-actions{display:flex;gap:.3rem;align-items:flex-start}
.act-types{display:flex;flex-wrap:wrap;gap:.4rem}.act-type input{display:none}.act-type span{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .75rem;border:1.5px solid var(--line);border-radius:10px;font-size:.8rem;font-weight:600;cursor:pointer;color:var(--muted)}.act-type input:checked+span{border-color:var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent)}
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem}.wd{background:var(--card);border:1px solid var(--line);border-radius:14px;text-align:center;padding:.55rem .2rem;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;box-shadow:var(--shadow)}.wd small{color:var(--muted);font-size:.7rem;font-weight:600;text-transform:uppercase}.wd b{font-size:1.2rem}.wd span{font-size:.68rem;color:var(--muted)}.wd.has span{color:var(--brand);font-weight:700}.wd.on{background:var(--brand);color:#fff;border-color:var(--brand)}.wd.on small,.wd.on span{color:#ffffffcc}
/* oportunidad: stepper */
.stepper{display:flex;gap:.4rem}.step{flex:1;text-align:center;position:relative;padding-top:.2rem}.step span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--bg);color:var(--muted);font-weight:700;font-size:.8rem;border:2px solid var(--line)}
.step b{display:block;font-size:.78rem;margin-top:.25rem}.step small{color:var(--muted);font-size:.68rem}.step::before{content:"";position:absolute;top:17px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}.step:first-child::before{display:none}.step span{position:relative;z-index:1}
.step.done span{background:#10b981;border-color:#10b981;color:#fff}.step.done::before{background:#10b981}.step.cur span{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 4px var(--brand-soft)}.step.cur::before{background:var(--brand)}.step.cur b{color:var(--brand)}
.mini-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:.86rem}.mini-row:last-child{border-bottom:0}
.contact-card{border:1px solid var(--line);border-radius:14px;padding:.9rem;height:100%;background:var(--card)}
/* embudo */
.funnel-row{display:grid;grid-template-columns:120px 1fr 90px;gap:.7rem;align-items:center;padding:.5rem 0;text-decoration:none;color:var(--ink)}.funnel-row small{display:block;color:var(--muted);font-size:.7rem}.funnel-row b{font-size:.84rem}
.fn-bar{height:22px;background:var(--bg);border-radius:8px;overflow:hidden}.fn-bar span{display:block;height:100%;border-radius:8px}.fn-v{text-align:right;font-weight:700;font-size:.82rem}
/* cotización */
.cq-totals{background:var(--bg);border-radius:14px;padding:.8rem 1rem}.cq-totals>div{display:flex;justify-content:space-between;padding:.2rem 0;font-size:.88rem}.cq-totals .tot{border-top:2px solid var(--line);margin-top:.35rem;padding-top:.5rem;font-size:1.1rem;font-weight:800;color:var(--brand)}
@media(max-width:767px){.week-strip{grid-template-columns:repeat(7,64px);overflow-x:auto}.funnel-row{grid-template-columns:90px 1fr 70px}.kb-col{flex-basis:260px}.stepper{overflow-x:auto}}

/* ===== Firma digital ===== */
.firma-pad{position:relative;border:2px dashed var(--line);border-radius:14px;background:#fff;touch-action:none;overflow:hidden}
.firma-pad canvas{display:block;width:100%;height:190px;cursor:crosshair;touch-action:none}
.firma-hint{position:absolute;inset:0;display:grid;place-items:center;color:#cbd5e1;font-weight:600;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;font-size:.8rem}
.firma-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.5rem;text-align:center}
.firma-box img{max-width:100%;max-height:120px}

/* ===== Calendario ===== */
.cal-capa{border:1px solid var(--line);background:var(--card,#fff);color:var(--ink);border-radius:99px;padding:.35rem .85rem;font-size:.8rem;font-weight:600;display:inline-flex;gap:.4rem;align-items:center;opacity:.55;transition:.15s}
.cal-capa i{color:var(--c)}.cal-capa.active{opacity:1;border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent)}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border-radius:12px;overflow:hidden}
.cal-h{background:var(--bg-soft,#f8fafc);text-align:center;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.5rem 0;color:var(--muted)}
.cal-c{background:var(--card,#fff);min-height:104px;padding:.3rem .35rem;cursor:pointer;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.cal-c:hover{background:var(--brand-soft)}.cal-c.out{opacity:.45}.cal-c.sel{box-shadow:inset 0 0 0 2px var(--brand)}
.cal-c .n{font-size:.78rem;font-weight:700;color:var(--ink);width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.cal-c.today .n{background:var(--brand);color:#fff}
.cal-e{font-size:.68rem;line-height:1.25;padding:.1rem .35rem;border-radius:5px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);border-left:3px solid var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.cal-e.done{opacity:.5;text-decoration:line-through}.cal-more{font-size:.68rem;color:var(--muted);font-weight:600;padding-left:.3rem}
.cal-dia{display:flex;flex-direction:column;gap:.5rem;max-height:560px;overflow:auto}
.cal-item{display:block;border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 8%,transparent);border-radius:10px;padding:.55rem .7rem;text-decoration:none;color:var(--ink)}
.cal-item b{display:block;font-size:.84rem}.cal-item small{color:var(--muted)}.cal-item em{font-style:normal;color:var(--c)}.cal-item.done{opacity:.55}
@media(max-width:767px){.cal-c{min-height:64px}.cal-e{display:none}.cal-c.has::after{content:'';}}
.ic-lg{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem}
.table-danger-soft td{background:rgba(239,68,68,.05)}

/* ===== Mi jornada (móvil) ===== */
.jr-h{display:flex;align-items:center;gap:.5rem;font-weight:700;margin:.5rem 0 .75rem;color:var(--ink)}.jr-h i{color:var(--brand)}.jr-h span{background:var(--brand-soft);color:var(--brand);border-radius:99px;padding:.05rem .55rem;font-size:.75rem}
.jr-card{padding:1rem;height:100%}.jr-card.live{border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.15)}
.jr-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}.jr-actions form{display:contents}.jr-actions .btn{flex:1 1 auto;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.35rem}
.jr-tk{display:flex;gap:.8rem;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}.jr-tk:last-child{border:0}.jr-tk:hover{background:var(--brand-soft)}
.jr-card .pill{align-self:flex-start;flex-shrink:0}.jr-tk .tk-code{white-space:nowrap}.jr-tk .prio-pill,.jr-tk .pill{flex-shrink:0}

/* ===== Respaldo y restauración ===== */
.bk-hero{display:flex;gap:1.2rem;align-items:center;border-radius:20px;padding:1.4rem 1.6rem;color:#fff;margin-bottom:1.2rem;position:relative;overflow:hidden;background:linear-gradient(135deg,#0b1437,#4338ca)}
.bk-hero.bk-success{background:linear-gradient(135deg,#064e3b,#059669 70%,#22d3ee)}.bk-hero.bk-warning{background:linear-gradient(135deg,#78350f,#d97706)}.bk-hero.bk-danger{background:linear-gradient(135deg,#7f1d1d,#dc2626)}
.bk-hero::after{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)}
.bk-hero-ic{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:2rem;flex:none}
.bk-hero small{opacity:.8;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;font-weight:700}.bk-hero h2{margin:.1rem 0 .6rem;font-size:1.45rem;font-weight:800}
.bk-chips{display:flex;flex-wrap:wrap;gap:.45rem}.bk-chips span{background:rgba(255,255,255,.16);border-radius:99px;padding:.25rem .75rem;font-size:.78rem;font-weight:600;display:inline-flex;gap:.4rem;align-items:center}
.seg{display:inline-flex;gap:.25rem;background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:.3rem;flex-wrap:wrap}
.seg a{display:inline-flex;gap:.45rem;align-items:center;padding:.5rem 1rem;border-radius:10px;font-weight:600;font-size:.88rem;color:var(--muted);text-decoration:none}.seg a:hover{color:var(--ink);background:var(--brand-soft)}
.seg a.on{background:var(--brand);color:#fff;box-shadow:0 6px 14px -6px var(--brand)}.seg a.danger-h:hover{background:#fee2e2;color:#dc2626}.seg a.on.danger{background:#dc2626;box-shadow:0 6px 14px -6px #dc2626}
.bk-card{padding:1.3rem}.bk-card h5{font-weight:700;font-size:1.05rem;margin:0 0 .25rem}
/* Panel Sistema → Landing */
.plan-edit{border:1px solid var(--line);border-radius:14px;padding:1.1rem;background:var(--bg,#f8fafc)}
.faq-edit{border-bottom:1px dashed var(--line);padding-top:.2rem;margin-bottom:.9rem}
/* Filas del alcance de la comparativa: un concepto y una celda por plan, sin tabla ni columnas fijas,
   para que funcione igual con tres planes que con cinco. */
.cmp-fila{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;border-bottom:1px dashed var(--line);padding-bottom:.8rem;margin-bottom:.8rem}
.cmp-cel{flex:1 1 120px;min-width:110px}
.cmp-cel-t{flex:2 1 240px}
.cmp-cel label.lbl{font-size:.72rem;margin-bottom:.2rem;color:var(--muted)}
.cmp-fila .cmp-del{margin-bottom:.25rem}
.bk-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;flex:none;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.bk-step{display:flex;gap:.9rem;margin-bottom:1rem}.bk-step>b{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:.8rem;flex:none;margin-top:.1rem}
.bk-warn{display:flex;gap:.75rem;background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:12px;padding:.8rem 1rem;font-size:.86rem}.bk-warn i{font-size:1.2rem}
[data-theme=dark] .bk-warn{background:#3a2a0a;border-color:#78530f;color:#fcd34d}
.bk-danger-head{display:flex;gap:1rem;align-items:center;background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;border-radius:16px;padding:1rem 1.3rem;margin-bottom:1rem}.bk-danger-head i{font-size:2rem}.bk-danger-head h5{margin:0;font-weight:800}.bk-danger-head p{margin:0;opacity:.9;font-size:.88rem}
.bk-opt{display:block;cursor:pointer;margin:0}.bk-opt>input{position:absolute;opacity:0;pointer-events:none}.bk-opt .card-ui{border:2px solid var(--line);transition:.15s}.bk-opt.sel .card-ui{border-color:#dc2626;box-shadow:0 10px 30px -14px rgba(220,38,38,.5)}
.bk-list{list-style:none;padding:0;margin:.6rem 0 0}.bk-list li{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px dashed var(--line);font-size:.86rem}.bk-list li:last-child{border:0}.bk-list b{color:#dc2626}
.bk-keep{margin-top:.8rem;padding:.8rem;background:var(--brand-soft);border-radius:12px}

/* ===== Empresa ===== */
.emp-logo{width:96px;height:96px;border-radius:20px;border:2px dashed var(--line);display:grid;place-items:center;background:var(--bg);overflow:hidden;font-size:2rem;color:var(--muted);flex:none}.emp-logo img{max-width:100%;max-height:100%;object-fit:contain;padding:8px;background:#fff;width:100%;height:100%}
.emp-logo-sm{width:60px;height:60px;border-radius:14px;font-size:1.4rem}.emp-logo-sm img{padding:5px}
.emp-card{background:linear-gradient(135deg,#0b1437,#312e81);border-radius:16px;padding:1.1rem;color:#fff}.emp-card .brand{display:flex;gap:.75rem;align-items:center;color:#fff}.emp-card .brand-text b{display:block;font-size:1.05rem}.emp-card .brand-text small{opacity:.7}
.brand-mark.has-logo{background:#fff;padding:5px;box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}.brand-mark.has-logo img{max-width:100%;max-height:100%;object-fit:contain}
.mon-prev{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}.mon-prev>div{background:var(--brand-soft);border-radius:14px;padding:.9rem 1rem}.mon-prev small{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;font-weight:700;letter-spacing:.05em}.mon-prev b{font-size:1.15rem;color:var(--brand);word-break:break-all}
.col-swatches{display:flex;gap:.9rem;flex-wrap:wrap}.sw{cursor:pointer;text-align:center;margin:0}.sw input{display:none}.sw span{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:#fff;font-size:1.3rem;opacity:.85;transition:.15s;border:3px solid transparent}.sw span i{opacity:0}.sw input:checked+span{opacity:1;border-color:var(--ink);transform:scale(1.08)}.sw input:checked+span i{opacity:1}.sw small{display:block;margin-top:.3rem;font-size:.72rem;color:var(--muted);font-weight:600}
@media(max-width:575px){.mon-prev{grid-template-columns:1fr}}
.form-switch .form-check-label{margin-left:.5rem}

/* =====================================================================
   Landing pública de servicios y planes (/planes)
   ===================================================================== */
html{scroll-behavior:smooth}
/* Valores de fábrica del tema. Coinciden con los de core/Landing.php: el editor solo escribe
   la variable que usted cambia, así que una landing sin tocar se pinta exactamente igual. */
.land-body{background:#fff;--land-nav-h:68px;--land-mov-nav-h:58px;--land-nav-bg:rgba(255,255,255,.9);
  --land-top-h:38px;--land-mov-top-h:30px;--land-top-bg:#0b1437;--land-hero-h:0px;--land-hero-1:#0b1437;--land-hero-2:#1b1f6b;--land-hero-3:#3730a3;
  --land-fuente:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --land-sombra:0 1px 2px rgba(15,23,42,.04),0 8px 24px -8px rgba(15,23,42,.08);
  font-family:var(--land-fuente);--shadow:var(--land-sombra)}
.land-main{max-width:1340px;margin:0 auto;padding:0 1.75rem}
.land-nav{position:sticky;top:0;z-index:30;background:var(--land-nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.land-nav-in{max-width:1340px;margin:0 auto;padding:.75rem 1.75rem;display:flex;align-items:center;gap:1.5rem;min-height:var(--land-nav-h)}
.land-nav .brand{color:var(--ink)}
.land-nav-links{gap:var(--land-nav-gap,1.4rem);margin-left:auto}
.land-nav-cta{display:flex;align-items:center;gap:.6rem}
/* Los botones del cabecero mezclan icono, número y rótulo: con `gap` el aire solo aparece entre lo
   que de verdad se pinta. El rótulo vacío —el carrito no lleva palabra de fábrica— sale de la fila
   para que el botón no quede descentrado; el !important le gana al d-inline del propio span. */
.land-nav-cta .btn{display:inline-flex;align-items:center;gap:.4rem}
.land-cta-txt:empty{display:none!important}
.land-cta-num{font-weight:600}
/* Los botones del cabecero se pintan dos veces, una lista por dispositivo. `display:contents`
   sube sus enlaces a esta misma fila: el hueco y el orden son los de siempre y lo apagado con
   `hidden` no deja sitio vacío. */
.land-cta-d{display:contents}
.land-cta-m{display:none}
.land-link{color:var(--muted);font-weight:600;font-size:.88rem}
.land-link:hover{color:var(--brand)}
/* El enlace de la página que se está leyendo: el cabecero es el mismo en la landing y en la
   tienda, y la página llamante le dice cuál de los seis es ella. */
.land-nav-links .land-link.is-on,.land-menu-l.is-on{color:var(--brand)}
/* Divisor entre los enlaces del menú: una regla fina centrada en el hueco, del color del propio
   texto, para que se vea sobre cualquier color de cabecero. El `~ :not([hidden])` deja fuera el
   primero que se pinta —así no queda una raya suelta a la izquierda— y hace que el editor en vivo
   la quite solo con apagar el enlace de delante, porque lo que manda es el atributo hidden. */
.land-nav-links .land-link{position:relative}
.land-nav-links .land-link:not([hidden])~.land-link:not([hidden])::before{content:"";position:absolute;
  left:calc(var(--land-nav-gap,1.4rem) / -2);top:.1rem;bottom:.1rem;width:1px;background:currentColor;opacity:.3}
/* Entre 992 y 1200 el cabecero todavía lleva los seis enlaces y los tres botones, y con el aire de
   fábrica la fila no da: el botón principal baja de línea y el cabecero crece. Aquí no se esconde
   nada —lo que apaga o enciende el operador lo decide el tema, no el CSS—: solo se ciñe el hueco
   entre enlaces (la variable que también centra el divisor), la letra del menú y el aire entre las
   tres piezas de la fila. El quiebre de 992 es el mismo donde el menú se recoge en el botón. */
@media(max-width:1199.98px){.land-nav-in{gap:1rem}.land-nav-links{--land-nav-gap:.62rem}.land-link{font-size:.8rem}}
/* El menú del móvil cuelga del propio cabecero, que ya es sticky: así no se superpone al
   abrirse ni deja la barra flotando sobre el contenido. */
.land-burger{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font-size:1.3rem;line-height:1;padding:0;order:9}
.land-burger:hover{border-color:var(--brand);color:var(--brand)}
.land-menu{display:grid;gap:.05rem;padding:.4rem 1.1rem 1rem;background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 12px 24px -18px rgba(15,23,42,.35)}
.land-menu[hidden]{display:none}
.land-menu-l{padding:.62rem .15rem;font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;border-bottom:1px solid #f1f5f9}
.land-menu-l:hover{color:var(--brand)}
.land-menu .btn{margin-top:.9rem}
/* El menú desplegado vive hasta 992, que es donde el cabecero empieza a no dar para más; el botón
   que lo abre y el panel son la misma pareja en el tablet que en el celular. */
@media(min-width:992px){.land-menu{display:none}}
/* Apagado desde el tema, a cualquier ancho: si el operador quita el menú, no queda el botón solo. */
.land-body[data-land-mov-menu="off"] .land-burger,.land-body[data-land-mov-menu="off"] .land-menu{display:none}

.land-hero{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--land-hero-1) 0%,var(--land-hero-2) 55%,var(--land-hero-3) 100%);color:#fff;padding:4rem 0 calc(2.8rem + max(0px,var(--land-hero-h) - 560px))}
.land-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center}
.land-hero .hero-stats{position:relative;z-index:2;margin-top:2.6rem}
.land-hero .hero-copy p{max-width:520px}
.hero-puntos{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;padding:0;margin:1.5rem 0 0;font-size:.83rem;color:#c7d0f5}
.hero-puntos li{display:flex;align-items:center;gap:.4rem}
.hero-puntos i{color:#34d399}

.land-sec{padding:4.5rem 0;scroll-margin-top:calc(var(--land-nav-h) + 6px)}
.land-sec-soft{background:var(--bg)}
/* Encabezado de sección: centrado, con su banda de ahorro y su conmutador debajo. */
.land-cab{max-width:860px;margin:0 auto 2rem;text-align:center}
.land-cab .land-h2{margin:1rem auto .6rem}
.land-cab .land-lead{margin:0 auto}
.land-h2{font-size:clamp(1.7rem,2.6vw,2.35rem);font-weight:800;letter-spacing:-1px;margin:1rem 0 .6rem}
.land-lead{color:var(--muted);max-width:700px;font-size:1.02rem;line-height:1.65;margin:0 0 2.2rem}

.land-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.land-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.land-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;background:var(--brand-soft);color:var(--brand)}
.land-card h3{font-size:1.02rem;font-weight:700;margin:1rem 0 .4rem}
.land-card p{color:var(--muted);font-size:.87rem;line-height:1.6;margin:0 0 .9rem}
.land-card ul{list-style:none;padding:0;margin:0;display:grid;gap:.42rem}
.land-card li{display:flex;gap:.5rem;align-items:flex-start;font-size:.82rem;color:#475569}
.land-card li i{color:var(--brand);font-size:.85rem;margin-top:.15rem}

.land-planes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;align-items:stretch}
.land-plan{position:relative;display:flex;flex-direction:column;background:var(--card);border:1.5px solid var(--line);border-radius:calc(var(--radius) + 4px);padding:1.7rem 1.5rem;box-shadow:var(--shadow)}
.land-plan.is-destacado{border-color:var(--brand);box-shadow:0 24px 46px -26px rgba(79,70,229,.55)}
.land-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:.72rem;font-weight:700;padding:.3rem .85rem;border-radius:99px;white-space:nowrap}
/* El descuento es de cada plan, no del catálogo: se lee arriba del nombre, a la derecha.
   El renglón existe siempre, con o sin marcilla, para que los nombres de las tarjetas partan
   de la misma altura cuando un plan se cotiza a medida y no muestra porcentaje. */
.land-plan-cab{display:flex;justify-content:flex-end;min-height:1.55rem}
.land-ahorro-card{font-size:.78rem;font-weight:800;color:#b45309;background:rgba(245,158,11,.15);border-radius:8px;padding:.16rem .5rem}
.land-plan h3{font-size:1.05rem;font-weight:800;margin:.2rem 0 .5rem}
.land-sla{font-size:.8rem;color:var(--muted);background:var(--brand-soft);border-radius:10px;padding:.5rem .7rem;margin-bottom:1rem}
.land-sla b{color:var(--brand)}
.land-precio{font-size:1.85rem;font-weight:800;letter-spacing:-1px;line-height:1}
.land-precio-sub{font-size:.76rem;color:var(--muted);margin:.4rem 0 1.1rem}
.land-plan ul{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.5rem}
.land-plan li{display:flex;gap:.55rem;align-items:flex-start;font-size:.85rem;color:#475569}
.land-plan li i{color:#10b981;font-size:.85rem;margin-top:.15rem}
.land-plan .btn{width:100%}
.land-note{margin:1.7rem 0 0;font-size:.88rem;color:var(--muted)}

/* El conmutador manda sobre la banda: primero se elige el período y recién abajo se lee
   lo que cuesta. En un solo renglón la banda parecía un tercer botón del conmutador. */
.land-plazo{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:1.5rem}
.land-periodo{display:inline-flex;align-items:center;gap:.35rem;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:.3rem;margin:0;box-shadow:var(--shadow)}
.land-periodo button{border:0;background:transparent;color:var(--muted);font-size:.85rem;font-weight:700;padding:.5rem 1.3rem;border-radius:99px;cursor:pointer;transition:background .18s,color .18s}
.land-periodo button.is-on{background:var(--brand);color:#fff;box-shadow:0 6px 14px -8px rgba(15,23,42,.5)}
.land-ahorro-band{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45rem .6rem;margin:0;padding:.55rem 1.1rem;border-radius:99px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.28);font-size:.85rem;color:#065f46}
.land-ahorro-band i{color:#10b981}
.land-ahorro-band b{font-weight:800;color:#059669}
.land-ahorro-band em{font-style:normal;font-weight:700;color:#065f46}
.land-antes{display:none;font-size:.92rem;font-weight:600;color:var(--muted);margin-top:.35rem}
.land-plan.tiene-ahorro.es-anual .land-antes{display:block}
.land-plan.tiene-ahorro.es-anual .land-precio>span{color:#059669}
.land-ahorro-pie{display:block;font-size:.76rem;font-weight:700;color:#059669;margin-top:.7rem}

.land-pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.land-paso{border-left:2px solid var(--line);padding:.2rem 0 .2rem 1.1rem}
.land-num{font-size:.75rem;font-weight:800;color:var(--brand);background:var(--brand-soft);border-radius:8px;padding:.15rem .5rem}
.land-paso h3{font-size:.98rem;font-weight:700;margin:.75rem 0 .35rem}
.land-paso p{font-size:.85rem;color:var(--muted);line-height:1.6;margin:0}

/* Cotizador por número de equipos */
.land-cot{display:grid;grid-template-columns:1.15fr .85fr;gap:1.6rem;align-items:start}
.land-cot-lado{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:1.7rem;box-shadow:var(--shadow)}
.land-campo{display:block;font-size:.9rem;font-weight:700;color:var(--ink,#0f172a)}
.land-campo span{display:block;margin-bottom:.4rem}
.land-cot-num{float:right;font-size:1.5rem;font-weight:800;color:var(--brand);line-height:1}
.land-campo input[type=range]{width:100%;accent-color:var(--brand);height:1.6rem;cursor:pointer}
.land-cot-escala{display:flex;justify-content:space-between;font-size:.7rem;font-weight:600;color:var(--muted);margin-top:-.2rem}
.land-cot-escala b{font-weight:600}
.land-cot-ayuda{font-size:.8rem;color:var(--muted);line-height:1.6;margin:.9rem 0 1.4rem}
.land-cot-titulo{display:block;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:.6rem}
.land-cot-nec{display:grid;gap:.55rem}
.land-check{display:flex;align-items:center;gap:.6rem;border:1.5px solid var(--line);border-radius:12px;padding:.65rem .85rem;font-size:.88rem;font-weight:600;cursor:pointer;transition:border-color .18s,background .18s}
.land-check:hover{border-color:var(--brand)}
.land-check input{accent-color:var(--brand);width:1.05rem;height:1.05rem;flex:none}
.land-check i{color:var(--brand-2,#6366f1)}
.land-check:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.land-cot-res{position:sticky;top:92px;background:linear-gradient(150deg,#0b1437,#1b1f6b 58%,#3730a3);border-radius:22px;padding:1.6rem;color:#fff;box-shadow:var(--shadow)}
.land-cot-cabe{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.land-cot-precio b{display:block;font-size:2rem;font-weight:800;letter-spacing:-1px;line-height:1.1;transition:color .2s}
.land-cot-precio b.es-anual{color:#6ee7b7}
.land-cot-precio del{display:block;font-size:.85rem;font-weight:600;color:#8f9bd0;margin-top:.2rem}
.land-cot-precio small{font-size:.75rem;color:#aab4e8}
.land-cot-sla{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.45rem}
.land-cot-sla li{display:flex;gap:.55rem;align-items:center;font-size:.85rem;color:#dbe2ff}
.land-cot-sla b{color:#fff}
.land-cot-sla i{color:#7dd3fc}
.land-cot-razon{font-size:.82rem;line-height:1.6;color:#c7d0f5;background:rgba(255,255,255,.07);border-radius:12px;padding:.7rem .85rem;margin:0 0 1.1rem}
.land-cot-razon b{color:#fff}
.land-cot-res .btn-glass{justify-content:center}
.land-cot-nota{font-size:.72rem;color:#8f9bd0;line-height:1.55;margin:.9rem 0 0}

/* Banda de inclusiones */
.land-incl{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem 1.6rem}
.land-incl-i{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.7rem;align-items:center}
.land-incl-i i{grid-row:span 2;font-size:1.15rem;color:var(--brand);background:var(--brand-soft);border-radius:11px;padding:.45rem .5rem}
.land-incl-i b{font-size:.92rem;font-weight:700}
.land-incl-i span{font-size:.8rem;color:var(--muted);line-height:1.5}

/* Tabla comparativa */
.land-tabla-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}
.land-tabla{width:100%;border-collapse:collapse;min-width:560px}
.land-tabla th,.land-tabla td{padding:.85rem 1rem;text-align:center;font-size:.86rem;border-bottom:1px solid var(--line)}
.land-tabla thead th{background:#f8fafc;font-size:.92rem;font-weight:800;color:var(--ink,#0f172a)}
.land-tabla thead th small{display:block;font-size:.68rem;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.5px}
.land-tabla tbody th{text-align:left;font-weight:600;color:#475569;width:38%}
.land-tabla tbody tr:last-child th,.land-tabla tbody tr:last-child td{border-bottom:0}
.land-tabla td b{font-weight:800;color:var(--ink,#0f172a)}
.land-si{color:#10b981;font-size:1.05rem;font-weight:900}
.land-no{color:#cbd5e1}

/* Soporte por horas vs plan */
.land-vs{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.land-vs-card{border-radius:20px;padding:1.6rem;border:1.5px solid var(--line);background:var(--card)}
.land-vs-card.is-bueno{border-color:var(--brand);box-shadow:0 24px 46px -28px rgba(79,70,229,.5)}
.land-vs-card.is-malo{background:#f8fafc}
.land-vs-card h3{display:flex;align-items:center;gap:.55rem;font-size:1rem;font-weight:800;margin:0 0 1rem}
.land-vs-card.is-malo h3{color:#94a3b8}
.land-vs-card.is-bueno h3{color:var(--brand)}
.land-vs-card ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.land-vs-card li{display:flex;gap:.6rem;font-size:.87rem;line-height:1.55;color:#475569}
.land-vs-card i{flex:none;margin-top:.15rem}
.land-vs-card.is-malo i{color:#ef4444;font-size:.75rem}
.land-vs-card.is-bueno i{color:#10b981;font-size:.8rem}

/* Preguntas */
.land-main-narrow{max-width:900px}
.land-faq{display:grid;gap:.7rem}
.land-faq-i{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0}
.land-faq-i summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;font-weight:700;font-size:.95rem;padding:1.05rem 1.2rem;list-style:none}
.land-faq-i summary::-webkit-details-marker{display:none}
.land-faq-i summary i{color:var(--brand);transition:transform .2s}
.land-faq-i[open] summary i{transform:rotate(45deg)}
.land-faq-i p{margin:0;padding:0 1.2rem 1.15rem;font-size:.88rem;line-height:1.65;color:var(--muted)}

/* Formulario de contacto */
.land-form-band{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start}
.land-form-copy .land-lead{margin-bottom:1.4rem}
.land-cta-datos{display:grid;gap:.6rem}
.land-cta-dato{display:flex;gap:.55rem;align-items:center;font-size:.88rem;color:#475569}
a.land-cta-dato:hover{color:var(--brand)}
.land-cta-dato i{color:var(--brand);font-size:1rem}
.land-cta-web{display:inline-block;margin-top:1rem;font-size:.85rem;color:var(--muted)}
.land-cta-web:hover{color:var(--brand)}
.land-form-box{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:1.7rem;box-shadow:var(--shadow);scroll-margin-top:90px}
.land-lbl{display:block;font-size:.78rem;font-weight:700;color:#475569;margin-bottom:.3rem}
.land-lbl small{font-weight:500;color:var(--muted)}
.land-in{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:.6rem .8rem;font-size:.9rem;background:#fff;transition:border-color .18s,box-shadow .18s}
.land-in:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea.land-in{resize:vertical;min-height:82px}
.land-form-err{font-size:.82rem;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:.6rem .8rem;margin:.9rem 0 0}
.land-form-pie{font-size:.72rem;color:var(--muted);text-align:center;margin:.8rem 0 0}
.land-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.land-ok{text-align:center;padding:1.4rem .6rem}
.land-ok-ic{display:inline-flex;width:52px;height:52px;border-radius:50%;background:#ecfdf5;color:#10b981;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:.8rem}
.land-ok h3{font-size:1.25rem;font-weight:800;margin:0 0 .4rem}
.land-ok p{font-size:.9rem;color:var(--muted);line-height:1.6;margin:0}

/* Barra fija del móvil */
.land-sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:990;gap:.6rem;padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.land-sticky .btn{flex:1}

.land-foot{border-top:1px solid var(--line);padding:1.6rem 0 2.2rem;font-size:.82rem;color:var(--muted)}
.land-link2{color:var(--muted);font-size:.82rem}.land-link2:hover{color:var(--brand)}
.land-ver{opacity:.6;font-size:.76rem}

@media(max-width:991.98px){
  .land-hero-in{grid-template-columns:1fr}
  .land-hero .hero-cards{display:none}
  .land-nav-cta{margin-left:auto}
  .land-svc{grid-template-columns:1fr 1fr}
  .land-planes{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .land-pasos{grid-template-columns:1fr 1fr}
  .land-cot,.land-form-band,.land-incl{grid-template-columns:1fr}
  .land-cot-res{position:static}
  .land-vs{grid-template-columns:1fr}
}
@media(max-width:575.98px){
  .land-hero{padding:2.6rem 0 calc(2rem + max(0px,var(--land-hero-h) - 560px))}
  .land-sec{padding:3rem 0 4.5rem}
  .land-svc,.land-pasos{grid-template-columns:1fr}
  .land-nav-in{gap:.8rem;padding:.6rem 1rem}
  .land-nav .brand-text small{display:none}
  .land-sticky{display:flex}
  /* Altura de arranque de la barra, antes de que el JS la mida: 62px con su texto de siempre. */
  .land-body:not([data-land-mov-cta="off"]){--barra-fija:calc(62px + env(safe-area-inset-bottom))}
  .land-form-box{padding:1.2rem}
  /* La barra fija del móvil solapa el pie: se le da aire al final de la página. */
  .land-foot{padding-bottom:4.2rem}
}


/* =====================================================================
   Tema de la landing · editor en Configuración → Tema de la landing
   El tema no escribe CSS: escribe variables y atributos data-land-* sobre el <body>.
   Todo bloque opcional se pinta siempre en el HTML y aquí solo se enciende o se apaga,
   para que la vista previa del editor pueda mostrarlo sin volver a renderizar la página.
   ===================================================================== */
.land-body [hidden]{display:none!important}

/* ---------- Barra superior ---------- */
.land-top{display:none;background:var(--land-top-bg);color:rgba(255,255,255,.9)}
/* Cada pantalla abre su propia barra: la de escritorio desde 768 px con su interruptor, la del
   celular debajo con el suyo. Antes la regla de abajo-valía-para-todo-no-pantalla mandaba a todos
   los anchos y `mov_top` solo podía restar, así que no había manera de tener la barra en el bolsillo
   sin tenerla también en el escritorio, ni de apagarla allá sin apagarla acá. */
@media(min-width:768px){.land-body[data-land-top="on"] .land-top{display:block}}
.land-top-in{max-width:1340px;margin:0 auto;padding:0 1.75rem;height:var(--land-top-h);display:flex;align-items:center;gap:1.3rem;font-size:.78rem;font-weight:600}
/* Dos filas, una por pantalla: el celular arranca guardado y lo baja el bloque de abajo. */
.land-top-m{display:none}
/* Tres columnas: la izquierda y la derecha se reparten por igual lo que sobra después de medir el
   centro, así el mensaje del medio queda centrado de verdad y el centro nunca se achica. */
.land-top-col{display:flex;align-items:center;gap:1.3rem;min-width:0}
.land-top-col[data-col="izq"],.land-top-col[data-col="der"]{flex:1}
.land-top-col[data-col="cen"]{justify-content:center}
.land-top-col[data-col="der"]{justify-content:flex-end}
.land-top-i{display:flex;align-items:center;gap:.45rem;opacity:.9}
.land-top-i i{font-size:.92rem;opacity:.8}
.land-top-i a{color:inherit;display:inline-flex;align-items:center;gap:.4rem}
.land-top-i a:hover{opacity:1;color:#fff;text-decoration:underline}
.land-body[data-land-top-ink="oscuro"] .land-top{color:rgba(15,23,42,.82)}
.land-body[data-land-top-ink="oscuro"] .land-top-i a:hover{color:#0f172a}
/* Sin el empuje a la derecha de antes: la columna ya hace ese trabajo. */
.land-top-i[data-bloque="redes"],.land-top-i[data-bloque-m="redes"]{gap:.5rem}
.land-top-red{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(255,255,255,.12);font-size:.85rem}
.land-body[data-land-top-ink="oscuro"] .land-top-red{background:rgba(15,23,42,.08)}
.land-top-red:hover{background:rgba(255,255,255,.24)}

/* ---------- Cabecero ---------- */
.land-body[data-land-nav-border="off"] .land-nav{border-bottom:0}
/* La sombra del cabecero solo aparece pegada al borde, nunca sobre la portada. */
.land-body[data-land-nav-shadow="on"] .land-nav.is-pegado{box-shadow:0 14px 26px -22px rgba(15,23,42,.55)}
.land-body[data-land-nav-sticky="off"] .land-nav{position:static}
/* Ancho completo: la fila del cabecero llega de borde a borde en lugar de centrarse. */
.land-body[data-land-nav-wide="on"] .land-nav-in,.land-body[data-land-nav-wide="on"] .land-top-in{max-width:none}
/* Ocultar al bajar: lo decide el script de la landing, que solo actúa con el conmutador encendido. */
.land-nav{transition:transform .28s ease,box-shadow .28s ease}
.land-nav.is-arriba{transform:translateY(-110%)}
.land-body[data-land-logo="off"] .land-nav .brand-mark{display:none}
.land-body[data-land-nombre="off"] .brand-text b{display:none}
.land-body[data-land-eslogan="off"] .brand-text small{display:none}
.land-body[data-land-nombre="off"][data-land-eslogan="off"] .brand-text{display:none}
/* El menú y los botones del cabecero no se apagan con el tema: son listas de bloques y el
   propio HTML trae `hidden` en lo que el operador quitó, igual que la barra superior. */

/* ---------- Portada ---------- */
.land-body[data-land-hero-chip="off"] .land-hero .chip{display:none}
.land-body[data-land-hero-puntos="off"] .hero-puntos{display:none}
.land-body[data-land-hero-stats="off"] .hero-stats{display:none}
.land-body[data-land-hero-cards="off"] .land-hero-in{grid-template-columns:1fr}
.land-body[data-land-hero-cards="off"] .hero-cards{display:none}

/* ---------- Secciones y planes ---------- */
.land-body[data-land-sec-alt="off"] .land-sec-soft{background:var(--card)}
.land-body[data-land-plan-anual="off"] .land-periodo{display:none}
.land-body[data-land-plan-dest="off"] .land-badge{display:none}
.land-body[data-land-plan-dest="off"] .land-plan.is-destacado{border-color:var(--line);box-shadow:var(--shadow)}

/* ---------- Celular ---------- */
@media(max-width:767.98px){
  .land-nav-in{min-height:var(--land-mov-nav-h)}
  .land-sec{scroll-margin-top:calc(var(--land-mov-nav-h) + 6px)}
  /* Debajo del punto de quiebre manda la otra fila de botones, la que reparte el grupo Celular. */
  .land-cta-d{display:none}
  .land-cta-m{display:contents}
  /* La barra del celular es la otra fila: su propia lista, su propia altura y sus propios textos,
     porque lo preparado para el escritorio no cabe en 390 px. Va con `min-height` y no con `height`,
     para que encender el texto la haga crecer en vez de partir los bloques por la mitad. */
  .land-top-d{display:none}
  .land-body[data-land-top-mov="on"] .land-top{display:block}
  .land-top-m{display:flex;height:auto;min-height:var(--land-mov-top-h);padding:.15rem 1rem;
    gap:.85rem;justify-content:center;font-size:.75rem;flex-wrap:wrap}
  /* Apagado el texto, la barra queda en puros íconos. El texto se esconde con `clip` y no con
     `display:none`, para que el enlace siga teniendo nombre delante del lector de pantalla. */
  .land-body[data-land-top-mov-txt="off"] .land-top-m .land-top-t{position:absolute;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .land-body[data-land-nav-mov-sticky="off"] .land-nav{position:static}
  .land-body[data-land-mov-cta="off"] .land-sticky{display:none}
  .land-body[data-land-mov-cta="off"] .land-foot{padding-bottom:2.2rem}
  .land-body[data-land-mov-wa="on"] .land-wa{display:grid}
}
.land-wa{display:none;position:fixed;right:20px;bottom:calc(var(--barra-fija) + 20px);z-index:1000;width:52px;height:52px;border-radius:50%;
  background:#25d366;color:#fff;place-items:center;font-size:1.6rem;text-decoration:none;
  box-shadow:0 14px 26px -10px rgba(18,140,74,.6)}
.land-wa:hover{color:#fff}
/* El disco va sentado encima de la barra fija, no encima de ella. La barra mide lo que mide su
   texto —que además edita el operador—, así que la altura real la mide el JS de la landing y la
   deja en `--barra-medida` al poner la clase `.has-bottom-bar`. Sin medir todavía (primer pintado
   o navegador sin JS) vale el cálculo del medioquery, y con la barra apagada por el tema ninguna
   de las dos se activa: el disco baja solo 20px. */
.land-body{--barra-fija:0px;--barra-medida:0px}
.land-body.has-bottom-bar{--barra-fija:var(--barra-medida)}

/* ---------- La pantalla del editor: inspector a la izquierda, la landing real a la derecha ---------- */
.tema-app{--tem-w:100%;--tem-bar-h:64px;--tem-pega:calc(74px + var(--tem-bar-h) + 14px)}
.tem-barra{position:sticky;top:74px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.75rem 1rem;box-shadow:var(--shadow)}
.tem-titulos h6{margin:0;font-size:1rem;font-weight:800}
.tem-titulos small{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.3rem}
.tem-pastilla{display:inline-flex;align-items:center;font-size:.71rem;font-weight:700;padding:.2rem .6rem;border-radius:99px;background:var(--brand-soft);color:var(--brand)}
.tem-pastilla.neutra{background:var(--bg);color:var(--muted);font-weight:600}
.tem-pastilla.warn{background:#fef3c7;color:#92400e}
[data-theme="dark"] .tem-pastilla.warn{background:#3a2d10;color:#fcd34d}
.tem-acciones{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.tem-dev button{border:0;background:none;padding:.32rem .7rem;border-radius:9px;font-size:.76rem;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:.35rem}
.tem-dev button.is-on{background:var(--card);color:var(--brand);box-shadow:var(--shadow)}
.tem-botones{display:flex;gap:.4rem}
.tem-botones .btn:disabled{opacity:.45;pointer-events:none}
.tem-cols{display:grid;grid-template-columns:minmax(320px,380px) minmax(0,1fr);gap:1rem;margin-top:1rem;align-items:start}
/* Las dos columnas se pegan justo debajo de la barra del editor, que no siempre mide lo mismo:
   al no caber sus botones se parte en dos renglones y el hueco fijo se los traga. */
.tem-insp{display:flex;flex-direction:column;gap:.55rem;max-height:calc(100vh - var(--tem-pega) - 38px);overflow:auto;padding:.15rem .35rem .15rem .1rem;position:sticky;top:var(--tem-pega)}
.tem-prev-col{min-width:0}
.tem-pie{margin:.4rem 0 0;padding:.7rem .8rem;border:1px dashed var(--line);border-radius:12px;font-size:.75rem;color:var(--muted);line-height:1.5}

/* Grupos plegables. El inspector cede altura a los cuerpos abiertos (`min-height:0`) para que
   las cabeceras de abajo queden siempre a la vista, y cada cuerpo desplaza por dentro. */
.tem-grupo{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;min-height:0;flex:0 1 auto}
.tem-cab{width:100%;display:flex;align-items:center;gap:.6rem;background:none;border:0;padding:.65rem .8rem;text-align:left;font-weight:700;font-size:.85rem;color:var(--ink)}
.tem-cab:hover{background:var(--bg)}
.tem-cab-ic{width:28px;height:28px;border-radius:9px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:.85rem;flex:none}
.tem-cab-n{font-style:normal;font-size:.67rem;font-weight:800;color:var(--brand);background:var(--brand-soft);padding:.12rem .45rem;border-radius:99px}
.tem-cab-n:empty{display:none}
.tem-cab-f{margin-left:auto;color:var(--muted);transition:transform .18s}
.tem-grupo.es-cerrado .tem-cab-f{transform:rotate(-90deg)}
.tem-grupo.es-cerrado .tem-cuerpo{display:none}
/* Un grupo largo no debe tragarse las cabeceras de abajo: desplaza por dentro. */
.tem-cuerpo{display:flex;flex-direction:column;gap:.1rem;padding:.2rem .55rem .55rem;border-top:1px solid var(--line);
  max-height:calc(100vh - var(--tem-pega) - 92px);overflow-y:auto}
/* El inspector muestra solo lo que aplica a la pantalla elegida. */
.tema-app[data-dev="cel"] [data-solo="esc"],.tema-app[data-dev="esc"] [data-solo="cel"]{display:none}

/* Un control por renglón: etiqueta suelta a la izquierda, mando a la derecha */
.tem-fila{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.35rem .5rem;border-radius:9px;min-height:38px}
.tem-fila:hover{background:var(--bg)}
.tem-lbl{font-size:.77rem;font-weight:600;color:var(--muted);line-height:1.3}
.tem-fila select{width:168px;font-size:.77rem;font-weight:600;padding:.28rem .45rem}
.tem-fila .tem-txt{width:168px;font-size:.77rem;font-weight:600;padding:.28rem .45rem;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--ink)}
.tem-fila .tem-txt::placeholder{font-weight:500;color:#a4aec2}
.tem-color{display:flex;align-items:center;gap:.35rem}
.tem-hex{width:80px;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:.22rem .3rem;color:var(--muted);font-size:.7rem;font-family:ui-monospace,SFMono-Regular,monospace;text-align:center;text-transform:uppercase}
.tem-color input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}
.tem-color input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.tem-color input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}
.tem-px{display:flex;align-items:center;gap:.5rem;width:190px}
.tem-px input[type=range]{flex:1;accent-color:var(--brand);height:22px}
.tem-num{font-size:.72rem;font-weight:700;color:var(--brand);min-width:46px;text-align:right}
.tem-num i{font-style:normal;font-weight:600;color:var(--muted);margin-left:1px}
.tem-sw{display:flex;align-items:center;gap:.6rem;padding:.35rem .5rem;border-radius:9px;min-height:38px;cursor:pointer}
.tem-sw:hover{background:var(--bg)}
.tem-sw>span{font-size:.77rem;font-weight:600;color:var(--ink);line-height:1.3}
.tem-sw input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:38px;height:22px;margin:0;border:0;border-radius:99px;background:#cbd5e1;position:relative;cursor:pointer;transition:.18s}
.tem-sw input[type=checkbox]::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.35);transition:.18s}
.tem-sw input[type=checkbox]:checked{background:var(--brand)}
.tem-sw input[type=checkbox]:checked::after{transform:translateX(16px)}
/* Lo distinto de lo publicado se pinta; lo distinto de fábrica lleva un punto ámbar. */
.tem-fila.es-mio,.tem-sw.es-mio,.tem-bloque.es-mio{background:var(--brand-soft)}
.tem-fila.es-fab>.tem-lbl::after,.tem-sw.es-fab>span::after,.tem-bloque.es-fab>.tem-lbl::after{content:'';display:inline-block;width:5px;height:5px;margin-left:.35rem;border-radius:50%;background:#f59e0b;vertical-align:middle}

/* El constructor del cabecero: bloques que se arrastran y se encienden */
.tem-bloque{padding:.35rem .5rem;border-radius:9px}
.tem-bloque>.tem-lbl{display:block;margin-bottom:.35rem}
.tem-orden{display:flex;flex-direction:column;gap:.25rem}
.tem-ord-i{display:flex;align-items:center;gap:.5rem;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:.32rem .5rem;font-size:.76rem;font-weight:600;cursor:grab}
.tem-ord-i:hover{border-color:var(--brand-2)}
.tem-ord-i>span{flex:1}
.tem-ord-i>i:first-child{color:#b6c0d4;font-size:.8rem}
.tem-ord-i.es-off{opacity:.5;cursor:default;border-style:dashed}
.tem-ord-i.es-yendo{opacity:.3}
/* El reparto de la barra superior: una caja por columna y el cajón de los apagados. La caja en la
   que vive el chip es su estado, así que aquí no hay que pintar dos verdades distintas. */
.tem-columnas{display:flex;flex-direction:column;gap:.4rem;padding:.35rem .5rem;border-radius:9px}
.tem-columnas>.tem-lbl{display:block}
.tem-nota{display:block;font-size:.7rem;font-weight:600;color:var(--muted);line-height:1.35;margin-bottom:.3rem}
.tem-col{background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:10px;padding:.35rem .45rem}
.tem-col[data-col="izq"]{border-left:3px solid var(--brand)}
.tem-col[data-col="cen"]{border-left:3px solid var(--brand-2)}
.tem-col[data-col="der"]{border-left:3px solid #b6c0d4}
.tem-col>.tem-lbl{display:block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.3rem}
.tem-col.es-pool{background:transparent;border-style:dashed}
.tem-colist{min-height:30px;padding:.1rem}
.tem-col-i{display:flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:.3rem .45rem;font-size:.75rem;font-weight:600;cursor:grab}
.tem-col-i:hover{border-color:var(--brand-2)}
.tem-col-i>span{flex:1}
.tem-col-i>i:first-child{color:#b6c0d4;font-size:.8rem}
.tem-col-i.es-off{opacity:.5;background:transparent;border-style:dashed}
.tem-col-i.es-yendo{opacity:.3}

/* Cada bloque se enciende con un conmutador, como los demás controles del inspector. */
.tem-ord-sw{flex:none;width:32px;height:19px;padding:0;border:0;border-radius:99px;background:#c4cbe0;position:relative;cursor:pointer;transition:background .18s}
.tem-ord-sw::after{content:'';position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.35);transition:transform .18s}
.tem-ord-sw[aria-checked="true"]{background:var(--brand)}
.tem-ord-sw[aria-checked="true"]::after{transform:translateX(13px)}
.tem-ord-sw:hover{filter:brightness(.94)}

/* La ventana: un iframe que cambia de ancho de verdad, para que respondan sus propias reglas */
.tem-prev{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:.7rem;position:sticky;top:var(--tem-pega)}
.tem-prev-top{display:flex;align-items:center;justify-content:space-between;padding:.1rem .25rem .6rem}
.tem-prev-tit{font-size:.72rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.tem-enl{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--muted);display:grid;place-items:center;font-size:.85rem;cursor:pointer}
.tem-enl:hover{background:var(--brand-soft);color:var(--brand)}
.tem-marco{display:flex;justify-content:center;background:var(--bg);border-radius:14px;padding:.8rem;min-height:520px;overflow-x:auto;position:relative}
/* Cuando la vista previa no se puede abrir, el marco lo dice encima del cuadro: un recuadro blanco
   que no reacciona y no explica nada se lee como «el editor está roto». */
.tem-aviso{position:absolute;inset:.8rem;z-index:2;display:grid;place-items:center;text-align:center;padding:1.6rem;
  border-radius:12px;background:color-mix(in srgb,#f59e0b 14%,var(--card));border:1px solid color-mix(in srgb,#f59e0b 45%,var(--line));
  color:var(--ink);font-size:.85rem;font-weight:600;line-height:1.5}
/* flex:none: si la columna del panel es más angosta que el dispositivo, la ventana se achica
   a su ancho real y el marco se desliza. Un 390px que se muestra a 300px mentiría. */
.tem-marco iframe{flex:none;width:var(--tem-w);min-width:300px;height:calc(100vh - 300px);max-height:860px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 20px 44px -30px rgba(15,23,42,.5);transition:width .25s ease}
/* El celular se enmarca en un bisel: el ancho del marco + 20px deja el viewport exacto que pidió el operador. */
.tem-marco.es-movil iframe{border:10px solid #0b1437;border-radius:34px;width:calc(var(--tem-w) + 20px);min-width:0}
@media(max-width:1250px){
  .tem-cols{grid-template-columns:1fr}
  .tem-insp,.tem-prev{position:static;max-height:none}
  .tem-insp{overflow:visible}
}


/* ============================================================
   Tienda pública (/tienda) y pedidos
   ============================================================ */
.img-prev{flex:none;width:88px;height:88px;border-radius:14px;border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted);font-size:1.4rem;background:var(--bg,#f8fafc);overflow:hidden}
.img-prev.has-img{border-style:solid;background:#fff}
.img-prev img{width:100%;height:100%;object-fit:contain;display:block}

.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.shop-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .16s,box-shadow .16s}
.shop-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(15,23,42,.32)}
.shop-foto{position:relative;display:block;aspect-ratio:1/1;background:#fff}
.shop-foto img{width:100%;height:100%;object-fit:contain;display:block;padding:.7rem}
.shop-sin-foto{display:grid;place-items:center;height:100%;color:#cbd5e1;font-size:2rem;background:repeating-linear-gradient(135deg,#f8fafc,#f8fafc 12px,#f1f5f9 12px,#f1f5f9 24px)}
.shop-agotado{position:absolute;top:.7rem;left:.7rem;background:#ef4444;color:#fff;font-size:.7rem;font-weight:800;padding:.25rem .6rem;border-radius:99px}
.shop-cuerpo{padding:1rem 1.05rem 1.15rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.shop-cat{font-size:.7rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--brand)}
.shop-nom{font-size:.95rem;font-weight:700;line-height:1.35;margin:0}
.shop-desc{font-size:.8rem;color:var(--muted);line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop-pie{margin-top:auto;padding-top:.8rem;display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem}
.shop-precio{font-size:1.12rem;font-weight:800;letter-spacing:-.5px;line-height:1}
.shop-precio small{display:block;font-size:.7rem;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:.2rem}
.shop-mas{display:flex;align-items:center;gap:.35rem}
.shop-stock{font-size:.72rem;font-weight:700;color:#059669}
.shop-stock.bajo{color:#d97706}
.shop-filtros{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:0 0 1.6rem}
.shop-filtros .form-control,.shop-filtros .form-select{max-width:260px}

.ficha{display:grid;grid-template-columns:1.05fr 1fr;gap:2.2rem;align-items:start}
.ficha-foto{background:#fff;border:1px solid var(--line);border-radius:22px;padding:1.4rem;display:grid;place-items:center;aspect-ratio:1/1;box-shadow:var(--shadow)}
.ficha-foto img{max-width:100%;max-height:100%;object-fit:contain}
.ficha-precio{font-size:2rem;font-weight:800;letter-spacing:-1.2px;line-height:1;margin:.6rem 0 .2rem}
.ficha-imp{font-size:.8rem;color:var(--muted)}
.ficha-lista{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.45rem;font-size:.86rem;color:#475569}
.ficha-lista li{display:flex;gap:.5rem;align-items:flex-start}
.ficha-lista i{color:var(--brand);margin-top:.15rem}
.cantidad{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.cantidad button{border:0;background:transparent;width:34px;height:38px;font-size:1.05rem;color:var(--muted);cursor:pointer}
.cantidad input{border:0;text-align:center;width:48px;height:38px;font-weight:700;background:transparent}
.cantidad input::-webkit-outer-spin-button,.cantidad input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cantidad input{-moz-appearance:textfield}

.carrito-tabla{width:100%;border-collapse:collapse}
.carrito-tabla th{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line)}
.carrito-tabla td{padding:.9rem .6rem;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.9rem}
.carrito-tabla .der{text-align:right}
.carrito-foto{width:54px;height:54px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden}
.carrito-foto img{width:100%;height:100%;object-fit:contain}
.resumo{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow);position:sticky;top:92px}
.resumo-fila{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;color:var(--muted);padding:.35rem 0}
.resumo-total{display:flex;justify-content:space-between;gap:1rem;font-size:1.2rem;font-weight:800;letter-spacing:-.5px;margin-top:.6rem;padding-top:.7rem;border-top:1px solid var(--line)}
.resumo .btn{width:100%;margin-top:1rem}
.pedido-vacio{text-align:center;padding:3.4rem 1rem;color:var(--muted)}
.pedido-vacio i{font-size:2.6rem;color:#cbd5e1;display:block;margin-bottom:.8rem}

.gracias{max-width:640px;margin:0 auto;text-align:center;padding:3rem 0 3.6rem}
.gracias-sello{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1.3rem;font-size:2rem;background:rgba(16,185,129,.14);color:#059669}
.gracias h1{font-size:1.7rem;font-weight:800;letter-spacing:-1px;margin:0 0 .6rem}
.gracias p{color:var(--muted);line-height:1.65}
.gracias-datos{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;text-align:left;margin:1.8rem 0}
.gracias-datos div{border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;background:var(--card)}
.gracias-datos span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.gracias-datos b{font-size:.95rem}

@media(max-width:1199.98px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:991.98px){.shop-grid{grid-template-columns:repeat(2,1fr)}.ficha{grid-template-columns:1fr;gap:1.6rem}.resumo{position:static}}
@media(max-width:575.98px){.shop-grid{grid-template-columns:1fr}.gracias-datos{grid-template-columns:1fr}.shop-filtros .form-control,.shop-filtros .form-select{max-width:none}}

/* --- catálogo: banda, filtros, ficha --- */
/* Las pantallas de la tienda van alineadas a la izquierda, no centradas como la landing. */
.land-cab.land-cab-izq{max-width:none;margin:0 0 1.6rem;text-align:left}
.land-cab-izq .land-h2,.land-cab-izq .land-lead{margin-left:0}
.shop-main{padding-bottom:3rem}
.shop-cerrada{max-width:1340px;margin:0 auto;padding:.7rem 1.75rem;background:#fef3c7;color:#92400e;font-size:.85rem;font-weight:600;display:flex;gap:.5rem;align-items:center}
.shop-top{padding-top:2.6rem}
.shop-sec{padding-top:2.4rem}
.shop-band{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;justify-content:center;font-size:.82rem;color:var(--muted);border:1px solid var(--line);background:var(--card);border-radius:16px;padding:.85rem 1.2rem;box-shadow:var(--shadow)}
.shop-band span{display:inline-flex;align-items:center;gap:.4rem}
.shop-band i{color:var(--brand)}
.shop-total{font-size:.8rem;font-weight:700;color:var(--muted);margin-left:auto}
.shop-dest{position:absolute;top:.7rem;right:.7rem;background:var(--brand);color:#fff;font-size:.66rem;font-weight:800;padding:.25rem .6rem;border-radius:99px}
.shop-pag{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2.2rem;font-size:.85rem;font-weight:700;color:var(--muted)}
.shop-migas{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--muted);margin-bottom:1.4rem;flex-wrap:wrap}
.shop-migas a{color:var(--muted);text-decoration:none}.shop-migas a:hover{color:var(--brand)}
.shop-migas i{font-size:.65rem;opacity:.6}
.shop-nom a{color:inherit;text-decoration:none}.shop-nom a:hover{color:var(--brand)}
.shop-codigo{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);background:#f1f5f9;border-radius:8px;padding:.3rem .6rem;margin:.4rem 0 0}
.shop-relato{font-size:.92rem;line-height:1.7;color:#475569;margin:1.3rem 0 0}
/* El desarrollo del producto va debajo de las dos columnas, no apretado junto al precio. */
.shop-descrip{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:1.5rem 1.7rem;margin:1.8rem 0 0}
.shop-descrip-t{font-size:1rem;font-weight:800;color:#0f172a;margin:0 0 .9rem;padding-bottom:.55rem;border-bottom:2px solid var(--brand);display:inline-block}
.shop-descrip-c{font-size:.92rem;line-height:1.75;color:#475569;margin:0}
.shop-compra{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:1.3rem 0 0}
.shop-aviso{display:flex;gap:.5rem;align-items:center;background:#fef3c7;color:#92400e;border-radius:12px;padding:.75rem 1rem;font-size:.85rem;font-weight:600;margin-top:1.2rem}
/* Trato directo desde la ficha: cerrado hasta que alguien lo pide, para no pelear con el
   carrito por la atención. Verde solo en el botón de WhatsApp, que es el único de marca ajena. */
.shop-trato{margin-top:1.1rem;border:1px solid var(--line);border-radius:14px;background:#f8fafc}
.shop-trato>summary{cursor:pointer;list-style:none;padding:.85rem 1.1rem;font-weight:700;font-size:.9rem;color:#0f172a;display:flex;align-items:center;gap:.5rem}
.shop-trato>summary::-webkit-details-marker{display:none}
.shop-trato>summary i{color:#25d366;font-size:1.05rem}
.shop-trato[open]>summary{border-bottom:1px solid var(--line)}
.shop-trato-cuerpo{padding:1.1rem}
.shop-trato-botones{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.btn-wa{background:#25d366;border:1px solid #1eb355;color:#0a3d20;border-radius:12px;font-weight:700}
.btn-wa:hover{background:#1eb355;color:#062b17}
.shop-rel{margin-top:3.4rem}
.shop-rel-t{font-size:1.2rem;margin:0 0 1.2rem}

/* --- carrito y checkout --- */
.shop-carrito,.shop-checkout{display:grid;grid-template-columns:1.6fr 1fr;gap:1.6rem;align-items:start}
.shop-checkout{grid-template-columns:1.25fr 1fr}
.carrito-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:.4rem 1.1rem 1rem;overflow-x:auto}
.carrito-nom{display:block;font-weight:700;color:var(--ink,#0f172a);text-decoration:none;font-size:.92rem}
.carrito-nom:hover{color:var(--brand)}
.carrito-meta{display:block;font-size:.74rem;color:var(--muted);font-weight:400}
.btn-quitar{border:0;background:transparent;color:#cbd5e1;font-size:1.05rem;cursor:pointer;padding:.2rem .35rem;border-radius:8px}
.btn-quitar:hover{color:#ef4444;background:#fef2f2}
.resumo-t{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 .9rem}
.resumo-nota{font-size:.76rem;color:#047857;background:#ecfdf5;border-radius:9px;padding:.45rem .6rem;margin:.3rem 0 .4rem}
.resumo-pie{font-size:.74rem;color:var(--muted);line-height:1.55;margin:.9rem 0 0;display:flex;gap:.4rem;align-items:flex-start}
.resumo-pie i{flex:none;margin-top:.1rem}
.resumo-linea{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.55rem 0;border-bottom:1px dashed var(--line)}
.resumo-linea-t{display:flex;flex-direction:column;font-size:.82rem;min-width:0}
.resumo-linea-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resumo-linea-t span{color:var(--muted);font-size:.75rem}
.resumo-linea-i{font-weight:700;font-size:.85rem}

/* --- cupón de descuento en el resumen --- */
/* El botón pisa .resumo .btn, que lo pone a ancho completo: aquí va al lado del campo. */
.cupon{margin:.9rem 0 0;padding-top:.8rem;border-top:1px dashed var(--line)}
.cupon-t{display:block;font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.4rem}
.cupon-campo{display:flex;gap:.45rem}
.cupon-campo .land-in{flex:1;min-width:0;text-transform:uppercase}
.cupon-campo .btn{flex:none;width:auto;margin:0;padding:.55rem .9rem;font-size:.82rem;border-radius:11px}
.cupon-aviso{font-size:.76rem;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:9px;padding:.4rem .6rem;margin:.5rem 0 0}
.cupon-puesto{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin:.9rem 0 0;padding:.5rem .7rem;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:11px;font-size:.8rem;font-weight:600;color:#047857}
.cupon-puesto form{margin:0}
.cupon-puesto button{background:none;border:0;padding:0;font-size:.76rem;font-weight:700;color:#047857;text-decoration:underline;cursor:pointer}
.resumo-cambiar{font-size:.72rem;font-weight:600;color:var(--brand);text-decoration:underline;margin-left:.3rem}
.land-ayuda{display:block;font-size:.74rem;color:var(--muted);font-weight:500;margin-top:.25rem}

/* --- pedido --- */
.pedido-caja{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);max-width:1040px;margin:0 auto;overflow:hidden;text-align:left}
.pedido-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.4rem 1.6rem;border-bottom:1px solid var(--line);background:#f8fafc}
.pedido-tit{font-size:1.15rem;font-weight:800;margin:.15rem 0 .1rem}
.pedido-fecha{font-size:.78rem;color:var(--muted);margin:0}
.pedido-lado{padding:1.4rem 1.6rem}
.pedido-datos{background:#fbfcfe;border-left:1px solid var(--line)}
.pedido-totales{max-width:340px;margin-left:auto;padding-top:.6rem}
.pedido-nota{font-size:.83rem;color:#475569;background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;margin:1.2rem 0 0}
.gracias-datos .span-2{grid-column:1/-1}
.verif{display:flex;gap:.6rem;justify-content:center;max-width:460px;margin:0 auto}
.verif .land-in{flex:1}

/* --- site de pago simulado (modo 'simulado') --- */
.sim-body{margin:0;background:#0b1437;color:#e2e8f0;font-family:Inter,system-ui,-apple-system,sans-serif;min-height:100vh}
.sim-cinta{background:#f59e0b;color:#3b2606;font-weight:800;font-size:.82rem;text-align:center;padding:.6rem 1rem;letter-spacing:.3px}
.sim-main{max-width:520px;margin:0 auto;padding:2.4rem 1.4rem 3rem}
.sim-cab{display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem}
.sim-logo{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:1.3rem;color:#7dd3fc}
.sim-cab b{display:block;font-size:1.05rem;color:#fff}
.sim-cab small{display:block;font-size:.76rem;color:#8f9bd0}
.sim-card{background:#fff;border-radius:20px;padding:1.6rem;color:#0f172a;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.sim-pedido{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;background:#f1f5f9;border-radius:14px;padding:1rem;font-size:.85rem;margin-bottom:1.2rem}
.sim-pedido span{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;align-self:center}
.sim-pedido b{text-align:right}
.sim-campos{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:.7rem;margin-bottom:1rem}
.sim-nota{font-size:.78rem;color:var(--muted);line-height:1.6;margin:0 0 1.2rem}
.sim-botones{display:grid;gap:.6rem}
.sim-cancel{display:block;text-align:center;margin-top:1.1rem;font-size:.8rem;color:var(--muted)}
.sim-pie{text-align:center;font-size:.74rem;color:#8f9bd0;margin-top:1.4rem}

@media(max-width:991.98px){.shop-carrito,.shop-checkout{grid-template-columns:1fr}.pedido-datos{border-left:0;border-top:1px solid var(--line)}}
@media(max-width:575.98px){.sim-campos{grid-template-columns:1fr}.verif{flex-direction:column}.shop-band{justify-content:flex-start}.shop-total{margin-left:0}}

/* Página escrita desde Sistema → Menús del portal: llega HTML ya limpio de scripts y atributos */
.menu-html{font-size:.92rem;line-height:1.65;color:var(--ink)}
.menu-html>:first-child{margin-top:0}.menu-html>:last-child{margin-bottom:0}
.menu-html p{margin:0 0 .8rem}
.menu-html h2,.menu-html h3,.menu-html h4{margin:.2rem 0 .6rem;font-size:1rem;font-weight:800}
.menu-html ul,.menu-html ol{padding-left:1.3rem;margin:0 0 .8rem}.menu-html li{margin:.2rem 0}
.menu-html a{color:var(--brand);font-weight:600}
.menu-html table{width:100%;border-collapse:collapse;margin:0 0 .8rem}
.menu-html th,.menu-html td{border:1px solid var(--line);padding:.4rem .6rem;font-size:.86rem;text-align:left}
.menu-html code{background:var(--bg);padding:.1rem .35rem;border-radius:6px}
.menu-html pre{background:var(--bg);padding:.7rem .8rem;border-radius:10px;overflow-x:auto;margin:0 0 .8rem}
.menu-html blockquote{border-left:3px solid var(--line);margin:0 0 .8rem;padding:.2rem .8rem;color:var(--muted)}

/* La clave de licencia: se selecciona de un click para copiarla sin escribir a mano */
.lic-clave{font-family:var(--mono,ui-monospace,monospace);font-size:.82rem;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.2rem .45rem;user-select:all;word-break:break-all}

/* ---------- Selección masiva ----------
   La casilla es propia, no la del navegador: en el tema oscuro la nativa se ve blanco sólido y
   rompe el renglón. Con appearance:none el cuadro manda la paleta de la tabla. */
.chk-ui{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.5px solid var(--line);border-radius:5px;background:var(--bg);cursor:pointer;transition:border-color .15s,background .15s;vertical-align:middle;position:relative;flex:none;margin:0}
.chk-ui:hover{border-color:var(--brand-2)}
.chk-ui:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
.chk-ui:checked{background:var(--brand);border-color:var(--brand)}
.chk-ui:checked::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.chk-ui:indeterminate{background:var(--brand);border-color:var(--brand)}
.chk-ui:indeterminate::after{content:"";position:absolute;left:3px;top:7px;width:9px;height:2px;background:#fff;border-radius:2px}
.th-chk,.td-chk{width:40px;text-align:center;padding-left:.7rem!important;padding-right:.1rem!important}
.table-ui tbody tr:has(.tk-chk:checked){background:var(--brand-soft)}
tbody tr.row-out{opacity:0;transform:translateX(-10px);transition:opacity .18s,transform .18s}

/* La barra aparece solo cuando hay algo elegido: con cero selección la pantalla es la de siempre. */
.bulk-bar{position:fixed;left:50%;bottom:26px;transform:translate(-50%,150%);z-index:1045;display:flex;align-items:center;gap:.85rem;
  padding:.55rem .6rem .55rem 1.1rem;border-radius:16px;background:var(--card);border:1px solid var(--line);
  box-shadow:0 22px 44px -14px rgba(2,6,23,.5);opacity:0;max-width:calc(100vw - 24px);
  transition:transform .24s cubic-bezier(.2,.8,.3,1),opacity .24s}
.bulk-bar.on{transform:translate(-50%,0);opacity:1}
.bulk-n{font-size:.85rem;color:var(--muted);white-space:nowrap}
.bulk-n b{color:var(--ink);font-weight:800;font-size:1.02rem;margin-right:.15rem}
.bulk-link{background:none;border:0;padding:0;color:var(--brand);font-weight:600;font-size:.82rem;white-space:nowrap}
.bulk-link:hover{text-decoration:underline}
.bulk-sep{width:1px;height:26px;background:var(--line);flex:none}
.bulk-del{border-radius:11px;font-weight:600;white-space:nowrap}
.bulk-opt{display:flex;gap:.6rem;align-items:flex-start;text-align:left;font-size:.84rem;font-weight:600;color:var(--ink);cursor:pointer;
  margin-top:.95rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.bulk-opt:hover{border-color:var(--brand-2)}
.bulk-opt small{display:block;font-weight:400;color:var(--muted);font-size:.75rem;margin-top:2px;line-height:1.35}
.bulk-opt input{margin-top:1px}
@media (max-width:575.98px){
  .bulk-bar{left:12px;right:12px;bottom:12px;max-width:none;flex-wrap:wrap;justify-content:center;transform:translateY(150%)}
  .bulk-bar.on{transform:translateY(0)}
  .bulk-sep{display:none}
}

/* ---------- Guiones de cierre ----------
   El hilo se dibuja como WhatsApp, no como una tabla: quien vende decide leyendo el orden de las
   burbujas. La copia aparece al pasar encima, pero en pantallas táctiles queda siempre visible
   porque ahí no existe el hover. */
.hilo{display:flex;flex-direction:column;gap:.45rem;padding:.9rem 1rem;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.bub-row{display:flex;align-items:flex-end;justify-content:flex-end;gap:.3rem}
.bub{max-width:82%;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;padding:.5rem .75rem;
  border-radius:14px 14px 5px 14px;font-size:.86rem;line-height:1.45;box-shadow:0 1px 2px rgba(2,6,23,.16)}
.bub-copy{border:0;background:transparent;color:var(--muted);padding:.25rem .3rem;border-radius:8px;opacity:0;transition:opacity .15s,color .15s;font-size:.85rem;line-height:1}
.bub-row:hover .bub-copy,.bub-copy:focus-visible{opacity:1}
.bub-copy:hover{color:var(--brand);background:var(--brand-soft)}
@media (hover:none){.bub-copy{opacity:.75}}

.guion-card.off{opacity:.6}
.guion-clave{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:.88rem;
  background:var(--brand-soft);color:var(--brand)}
.guion-clave-sm{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border-radius:6px;font-size:.68rem;
  background:var(--brand-soft);color:var(--brand);vertical-align:middle}
.guion-med{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;font-size:.78rem;color:var(--muted);padding:.1rem 0 .45rem}
.guion-med b{color:var(--ink)}
.guion-chips{display:flex;gap:.3rem;flex-wrap:wrap}
.guion-chips em{font-style:normal;font-weight:600;font-size:.72rem;padding:.15rem .45rem;border-radius:99px;background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.guion-chips .ok{color:#059669;border-color:#05966933}
.guion-chips .bad{color:#dc2626;border-color:#dc262633}
.guion-chips .rate{color:var(--brand);border-color:var(--brand-soft)}
.guion-bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:.6rem}
.guion-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#10b981,#34d399)}
.guion-nota{font-size:.78rem;color:var(--muted);margin:.7rem 0 0;padding-left:.7rem;border-left:2px solid var(--brand-soft)}