/* Extraído de app/views/pages/dashboard.html.erb — NO editar el ERB para estilos. */
/* Orden de concatenación = orden de aparición original (la cascada depende de él). */
/* ══════════════════════════════════════════════════════════════════════════ */
/* Hoja principal (venía en , líneas 11-1562) */
/* ══════════════════════════════════════════════════════════════════════════ */
:root{
--bg:#f0ecf8;--surface:#fff;--surface2:#ede9f5;--border:#d8d0ec;
--purple:#6b21a8;--purple2:#7c3aed;--purple-lt:#ede9f5;--purple-md:#a78bfa;
--sidebar:#4a0e8f;--sidebar2:#3d0b79;--sidebar-active:rgba(255,255,255,.18);
--top1:#4a0e8f;--top2:#6b21a8;--top3:#7c3aed; /* degradado barra superior — controlado por la paleta */
--text1:#1e1333;--text2:#6b5f8a;--text3:#a89fc0;
--red:#ef4444;--red-bg:#fef2f2;--red-text:#991b1b;
--amber:#f59e0b;--amber-bg:#fffbeb;--amber-text:#92400e;
--green:#22c55e;--green-bg:#f0fdf4;--green-text:#166534;
--orange:#f97316;--radius:12px;
--font:'Segoe UI',system-ui,sans-serif;
--sb:220px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);background:var(--bg);color:var(--text1);min-height:100vh;display:flex;}
/* ── SIDEBAR ──────────────────────────────── */
.sidebar{width:var(--sb);height:100vh;background:var(--sidebar);display:flex;flex-direction:column;flex-shrink:0;position:fixed;left:0;top:0;bottom:0;z-index:100;overflow-y:auto;overflow-x:hidden;transition:width .25s ease;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent;}
.sidebar.collapsed{width:0;overflow:hidden;}
.main{transition:margin-left .25s ease;}
.main.expanded{margin-left:0;}
.sb-toggle{position:static;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:6px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;}
.sb-toggle:hover{background:rgba(255,255,255,.25);}
.sb-toggle svg{transition:transform .25s ease;}
.sb-toggle.collapsed-btn svg{transform:rotate(180deg);}
.sb-brand{padding:18px 16px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.12);}
.sb-logo{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.3);}
.sb-logo img{width:38px;height:38px;object-fit:cover;border-radius:50%;}
.sb-brand-text{font-size:13px;font-weight:700;color:#fff;line-height:1.2;}
.sb-brand-sub{font-size:10px;color:rgba(255,255,255,.6);margin-top:1px;}
.sb-menu-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.08em;text-transform:uppercase;padding:16px 16px 6px;}
.sb-item{display:flex;align-items:center;gap:8px;padding:9px 16px;cursor:pointer;color:rgba(255,255,255,.75);font-size:12px;font-weight:500;border-radius:0;transition:.15s;position:relative;}
.sb-item:hover{background:rgba(255,255,255,.1);color:#fff;}
.sb-item.active{background:var(--sidebar-active);color:#fff;font-weight:700;}
.sb-item.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--purple-md);border-radius:0 3px 3px 0;}
.sb-item svg{flex-shrink:0;opacity:.7;}
.sb-item.active svg{opacity:1;}
.sb-arrow{margin-left:auto;transition:.2s;font-size:10px;opacity:.6;}
.sb-sub{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.sb-sub.open{max-height:600px;} /* siempre visible — sin límite restrictivo */
.sb-sub-item{display:flex;align-items:center;gap:6px;padding:7px 16px 7px 36px;cursor:pointer;color:rgba(255,255,255,.6);font-size:12px;transition:.15s;}
.sb-sub-item:hover{color:#fff;background:rgba(255,255,255,.08);}
.sb-sub-item.active{color:#fff;font-weight:600;}
.sb-sub-item::before{content:'·';margin-right:2px;opacity:.5;}
.sb-divider{border:none;border-top:1px solid rgba(255,255,255,.1);margin:8px 0;}
.sb-coming{opacity:.4;cursor:default;pointer-events:none;}
/* ── MAIN ─────────────────────────────────── */
.main{margin-left:var(--sb);flex:1;display:flex;flex-direction:column;min-height:100vh;}
.topbar{background:linear-gradient(135deg,var(--top1) 0%,var(--top2) 60%,var(--top3) 100%);padding:10px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;box-shadow:0 2px 12px rgba(107,33,168,.25);position:sticky;top:0;z-index:50;}
.top-title{font-size:15px;font-weight:700;color:#fff;}
.top-sub{display:none;}
.top-actions{display:flex;align-items:center;gap:10px;}
.pill{font-size:11px;padding:3px 10px;border-radius:20px;font-weight:600;}
.pill-live{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7;}
.pill-err{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;}
.pill-load{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);}
#ts{font-size:11px;color:#c4b5e8;}
.refresh-btn{font-size:12px;padding:5px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);cursor:pointer;color:#fff;transition:.15s;font-weight:500;}
.refresh-btn:hover{background:rgba(255,255,255,.22);}
/* ── Selector de paleta de colores ── */
.palette-wrap{position:relative;display:inline-flex;align-items:center;}
.palette-btn{font-size:14px;width:32px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:20px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);cursor:pointer;color:#fff;transition:.15s;line-height:1;}
.palette-btn:hover{background:rgba(255,255,255,.22);}
.palette-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.25);min-width:236px;padding:8px;z-index:9999;display:none;border:1px solid rgba(0,0,0,.08);}
.palette-dropdown.open{display:block;}
.palette-dd-title{font-size:10px;font-weight:700;color:#6b7280;padding:4px 8px 8px;text-transform:uppercase;letter-spacing:.06em;}
.palette-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12px;color:#1f2233;font-weight:500;transition:background .15s;}
.palette-opt:hover{background:#f1f2f8;}
.palette-opt.active{background:#eef0fb;font-weight:700;}
.palette-opt.active .palette-name::after{content:'✓';margin-left:6px;color:#7c3aed;}
.palette-icon{font-size:15px;width:18px;text-align:center;flex-shrink:0;}
.palette-name{flex:1;}
.palette-swatches{display:flex;gap:3px;flex-shrink:0;}
.palette-sw{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.12);}
.palette-mode{display:flex;gap:4px;background:#f1f2f8;border-radius:8px;padding:3px;margin:0 2px 8px;}
.palette-mode-btn{flex:1;border:none;background:transparent;border-radius:6px;padding:6px 8px;font-size:12px;font-weight:600;color:#5a5f7a;cursor:pointer;transition:.15s;}
.palette-mode-btn:hover{color:#1f2233;}
.palette-mode-btn.active{background:#fff;color:#1f2233;box-shadow:0 1px 3px rgba(0,0,0,.12);}
/* ── Centro de Alertas (campana de notificaciones) ── */
.bell-wrap{position:relative;display:inline-flex;align-items:center;}
.bell-btn{position:relative;font-size:15px;width:32px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:20px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);cursor:pointer;color:#fff;transition:.15s;line-height:1;}
.bell-btn:hover{background:rgba(255,255,255,.22);}
.bell-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:10px;background:#dc2626;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--top2,#4c1d95);}
.bell-panel{position:absolute;top:calc(100% + 8px);right:0;width:400px;max-width:92vw;max-height:min(560px,80vh);display:none;flex-direction:column;background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.28);z-index:9999;overflow:hidden;}
.bell-panel.open{display:flex;}
.bell-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border,#e5e7eb);}
.bell-title{font-size:13px;font-weight:800;color:var(--text1,#1f2233);}
.bell-mark-all{font-size:11px;border:none;background:transparent;color:var(--purple,#7c3aed);cursor:pointer;font-weight:700;}
.bell-mark-all:hover{text-decoration:underline;}
.bell-tabs{display:flex;gap:4px;padding:8px 12px 0;}
.bell-tab{flex:1;border:none;background:var(--surface2,#f1f2f8);color:var(--text2,#5a5f7a);border-radius:8px 8px 0 0;padding:7px;font-size:11px;font-weight:700;cursor:pointer;}
.bell-tab.active{background:var(--purple,#7c3aed);color:#fff;}
.bell-filtros{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 12px;border-bottom:1px solid var(--border,#e5e7eb);}
.bell-inp{width:100%;box-sizing:border-box;font-size:11px;padding:6px 8px;border:1px solid var(--border,#e5e7eb);border-radius:7px;background:var(--surface,#fff);color:var(--text1,#1f2233);}
.bell-inp:first-child{grid-column:1 / -1;}
.bell-list{overflow-y:auto;padding:8px;flex:1;}
.bell-empty{text-align:center;color:var(--text3,#9ca3af);font-size:12px;padding:28px 12px;}
.bell-resumen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--text3,#9ca3af);padding:2px 2px 8px;border-bottom:1px solid var(--border,#e5e7eb);margin-bottom:8px;}
/* Barra de scroll horizontal espejo, encima de una tabla ancha (ver scrollXArriba). */
.scrollx-top{overflow-x:auto;overflow-y:hidden;height:14px;margin-bottom:2px;display:none;}
.scrollx-top>div{height:1px;}
.bell-card{position:relative;border:1px solid var(--border,#e5e7eb);border-left-width:4px;border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--surface,#fff);}
.bell-card.unread{background:var(--surface2,#f7f7fb);}
.bell-card.sev-critica{border-left-color:#dc2626;}
.bell-card.sev-alta{border-left-color:#ea580c;}
.bell-card.sev-media{border-left-color:#ca8a04;}
.bell-card.sev-informativa{border-left-color:#16a34a;}
.bell-card-top{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap;}
.bell-sev-pill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;}
.bell-mod{font-size:10px;color:var(--text3,#9ca3af);font-weight:600;}
.bell-dot{width:8px;height:8px;border-radius:50%;background:#7c3aed;margin-left:auto;flex-shrink:0;}
.bell-card-title{font-size:12.5px;font-weight:700;color:var(--text1,#1f2233);margin:2px 0;}
.bell-card-desc{font-size:11.5px;color:var(--text2,#5a5f7a);line-height:1.45;}
.bell-card-accion{font-size:11px;color:var(--text2,#5a5f7a);margin-top:5px;padding:6px 8px;background:var(--surface2,#f1f2f8);border-radius:6px;}
.bell-card-foot{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
.bell-card-time{font-size:10px;color:var(--text3,#9ca3af);margin-right:auto;}
.bell-act{font-size:11px;border:none;border-radius:6px;padding:5px 10px;cursor:pointer;font-weight:700;}
.bell-act-go{background:var(--purple,#7c3aed);color:#fff;}
.bell-act-read{background:var(--surface2,#eef0fb);color:var(--text2,#5a5f7a);}
.bell-badge-estado{font-size:9px;padding:1px 6px;border-radius:8px;background:var(--surface2,#eef0fb);color:var(--text2,#5a5f7a);font-weight:700;text-transform:uppercase;}
/* ── VIEWS ────────────────────────────────── */
.view{display:none;padding:20px 20px 48px;}
.view.active{display:block;}
.wrap{max-width:1200px;margin:0 auto;}
/* ── FILTROS ──────────────────────────────── */
.filters-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 18px;margin-bottom:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.filters-bar label{font-size:12px;color:var(--text2);font-weight:600;white-space:nowrap;}
.sep{width:1px;height:22px;background:var(--border);flex-shrink:0;}
.filter-select{font-size:12px;padding:5px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text1);cursor:pointer;}
.filter-select:focus{outline:none;border-color:var(--purple-md);}
.clear-btn{font-size:12px;padding:5px 10px;border-radius:8px;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--text3);}
.clear-btn:hover{color:var(--text2);background:var(--surface2);}
.search-btn{font-size:12px;padding:5px 14px;border-radius:20px;border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--text2);display:flex;align-items:center;gap:5px;transition:.15s;white-space:nowrap;}
.search-btn:hover{background:var(--purple-lt);border-color:var(--purple-md);color:var(--purple2);}
/* ── MODALES ──────────────────────────────── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(30,19,51,.5);z-index:200;align-items:center;justify-content:center;}
.modal-bg.show{display:flex;}
.modal{background:var(--surface);border-radius:var(--radius);padding:26px;width:500px;max-width:95vw;box-shadow:0 8px 32px rgba(107,33,168,.2);}
.modal h3{font-size:15px;font-weight:700;color:var(--text1);margin-bottom:14px;}
.modal-input{width:100%;font-size:13px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;color:var(--text1);margin-bottom:8px;}
.modal-input:focus{outline:none;border-color:var(--purple2);}
.modal-hint{font-size:11px;color:var(--text3);margin-bottom:10px;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;}
.modal-close{font-size:12px;padding:6px 14px;border-radius:8px;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--text2);}
.modal-result{margin-top:14px;font-size:12px;color:var(--text2);background:var(--surface2);border-radius:8px;padding:12px 14px;max-height:260px;overflow-y:auto;display:none;border:1px solid var(--border);}
.modal-result.show{display:block;}
.rrow{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);}
.rrow:last-child{border-bottom:none;}
.rkey{color:var(--text3);font-size:11px;}
.rval{font-weight:600;color:var(--text1);word-break:break-all;text-align:right;max-width:65%;font-size:12px;}
.tag-conf{background:var(--red-bg);color:var(--red-text);font-size:10px;padding:2px 8px;border-radius:6px;font-weight:700;}
.tag-prob{background:var(--amber-bg);color:var(--amber-text);font-size:10px;padding:2px 8px;border-radius:6px;}
.tag-ok{background:var(--green-bg);color:var(--green-text);font-size:10px;padding:2px 8px;border-radius:6px;}
.driver-block{padding-bottom:10px;margin-bottom:10px;border-bottom:2px solid var(--border);}
.driver-block:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0;}
/* ── PERIODO ──────────────────────────────── */
.period-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.period-bar label{font-size:12px;color:var(--text2);font-weight:600;}
.pbtn{font-size:12px;padding:5px 14px;border-radius:20px;border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--text2);transition:.15s;}
.pbtn:hover{background:var(--surface2);}
.pbtn.active{background:var(--purple);color:#fff;border-color:var(--purple);}
/* ── SECCIONES Data Interna / Data Cliente (Reporte OPS CV) ──
Clase propia (NO .pbtn) porque setRcvPeriod() limpia el .active de todos
los .pbtn de la vista y borraría la sección seleccionada. */
.sectab{font-size:12px;font-weight:600;padding:6px 16px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);cursor:pointer;color:var(--text2);transition:.15s;}
.sectab:hover{background:var(--surface2);}
.sectab.active{background:#0e7490;color:#fff;border-color:#0e7490;}
.dateinputs{display:flex;gap:6px;align-items:center;}
.dateinputs input{font-size:12px;padding:5px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text1);}
.apply-btn{font-size:12px;padding:5px 14px;border-radius:20px;border:none;background:var(--purple);cursor:pointer;color:#fff;font-weight:500;}
.apply-btn:hover{background:var(--purple2);}
/* ── KPI GRID ─────────────────────────────── */
/* Las KPIs se agrupan en secciones visuales: Volumen | Pilotos | Dinero.
En desktop muestra todas en una fila (7 cols); en medio se acomoda a 3+2+2 vía auto-fit. */
.kpi-grid{display:flex;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.kpi-section{flex:1;min-width:240px;background:var(--surface2);border-radius:var(--radius);padding:10px 12px 12px;}
.kpi-section-title{font-size:10px;font-weight:700;color:var(--text2);letter-spacing:.6px;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:5px;}
.kpi-section-cards{display:grid;gap:8px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 14px;position:relative;overflow:hidden;}
.kpi-label{font-size:11px;color:var(--text2);margin-bottom:6px;line-height:1.35;display:flex;align-items:center;gap:4px;}
.kpi-value{font-size:24px;font-weight:700;line-height:1;}
.kpi-sub{font-size:10px;color:var(--text3);margin-top:4px;line-height:1.3;}
.kpi-accent{position:absolute;bottom:0;left:0;height:3px;width:100%;}
.kpi.danger .kpi-value{color:var(--red);}
.kpi.warn .kpi-value{color:var(--amber);}
.kpi.ok .kpi-value{color:var(--green);}
.kpi.purple .kpi-value{color:var(--purple2);}
/* ── CARDS ────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;}
.card-title{font-size:13px;font-weight:700;color:var(--text1);margin-bottom:16px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:16px;}
/* ── BARRAS ───────────────────────────────── */
.vbar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.vbar-label{font-size:12px;color:var(--text2);width:200px;flex-shrink:0;}
.vbar-track{flex:1;background:var(--surface2);border-radius:4px;height:8px;}
.vbar-fill{height:8px;border-radius:4px;transition:width .6s ease;}
.vbar-val{font-size:12px;font-weight:600;color:var(--text1);width:52px;text-align:right;}
/* ── CIUDADES ─────────────────────────────── */
.ciudad-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.ciudad-name{font-size:12px;color:var(--text2);width:110px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ciudad-track{flex:1;background:var(--surface2);border-radius:3px;height:6px;}
.ciudad-fill{height:6px;border-radius:3px;background:var(--purple-md);transition:width .6s;}
.ciudad-val{font-size:12px;font-weight:600;color:var(--text1);width:32px;text-align:right;}
/* ── FUNNEL ───────────────────────────────── */
.funnel{display:flex;flex-direction:column;gap:7px;align-items:center;}
.funnel-step{border-radius:7px;display:flex;align-items:center;justify-content:space-between;padding:9px 16px;font-size:12px;}
.funnel-n{font-size:18px;font-weight:700;}
/* ── STATS ────────────────────────────────── */
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);}
.stat-row:last-child{border-bottom:none;}
.stat-label{font-size:12px;color:var(--text2);}
.stat-val{font-size:13px;font-weight:600;color:var(--text1);}
/* ── CONDUCTORES ──────────────────────────── */
.drivers-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.driver-card{background:var(--surface2);border-radius:10px;padding:12px 14px;border:1px solid var(--border);}
.driver-rank{font-size:10px;color:var(--text3);margin-bottom:2px;}
.driver-name{font-size:12px;font-weight:700;color:var(--text1);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.driver-badges{display:flex;gap:5px;flex-wrap:wrap;}
.badge-conf{background:var(--red-bg);color:var(--red-text);font-size:10px;padding:2px 7px;border-radius:6px;font-weight:700;}
.badge-prob{background:var(--amber-bg);color:var(--amber-text);font-size:10px;padding:2px 7px;border-radius:6px;}
.driver-id{font-size:10px;color:var(--text3);margin-top:5px;font-family:monospace;}
/* ── WALLET ───────────────────────────────── */
.wallet-section{margin-top:20px;}
.wallet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px;}
.wallet-title{font-size:15px;font-weight:700;color:var(--text1);display:flex;align-items:center;gap:8px;}
.wallet-badge{font-size:11px;background:var(--purple-lt);color:var(--purple2);padding:3px 10px;border-radius:20px;border:1px solid var(--purple-md);font-weight:500;}
.wallet-kpis{display:grid;gap:10px;margin-bottom:14px;}
.wkpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;position:relative;overflow:hidden;}
.wkpi-label{font-size:11px;color:var(--text2);margin-bottom:5px;}
.wkpi-value{font-size:22px;font-weight:700;color:var(--text1);line-height:1;}
.wkpi-sub{font-size:11px;color:var(--text3);margin-top:4px;}
.wkpi.ok .wkpi-value{color:var(--green);}
.wkpi.warn .wkpi-value{color:var(--amber);}
.wkpi.danger .wkpi-value{color:var(--red);}
.wkpi.purple .wkpi-value{color:var(--purple2);}
.wkpi-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;}
.wallet-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.progress-bar-wrap{margin-bottom:10px;}
.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);margin-bottom:4px;}
.progress-track{background:var(--surface2);border-radius:4px;height:10px;}
.progress-fill{height:10px;border-radius:4px;transition:width .6s ease;}
.debt-table{width:100%;border-collapse:collapse;font-size:12px;}
.debt-table th{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;padding:6px 8px;border-bottom:1px solid var(--border);text-align:left;}
.debt-table td{padding:8px;border-bottom:1px solid var(--border);color:var(--text1);}
.debt-table tr:last-child td{border-bottom:none;}
.estado-badge{font-size:10px;padding:2px 7px;border-radius:6px;font-weight:600;}
.estado-al-dia{background:var(--green-bg);color:var(--green-text);}
.estado-parcial{background:var(--amber-bg);color:var(--amber-text);}
.estado-total{background:var(--red-bg);color:var(--red-text);}
.wallet-loading{text-align:center;padding:24px;color:var(--text3);font-size:13px;}
/* ── OVERLAY ──────────────────────────────── */
.overlay{display:none;position:fixed;inset:0;background:rgba(240,236,248,.88);z-index:99;align-items:center;justify-content:center;flex-direction:column;gap:12px;}
.overlay.show{display:flex;}
.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--purple2);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.overlay p{font-size:14px;color:var(--text2);}
/* ── CONVERSOR ────────────────────────────── */
.conv-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.conv-period-info{font-size:12px;color:var(--text2);background:var(--surface2);padding:4px 12px;border-radius:20px;border:1px solid var(--border);}
.rates-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px;}
.rate-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;}
.rate-label{font-size:11px;color:var(--text2);font-weight:600;margin-bottom:6px;}
.rate-input-wrap{display:flex;align-items:center;gap:6px;}
.rate-cur{font-size:12px;font-weight:700;color:var(--purple2);min-width:36px;}
.rate-input{width:100%;font-size:14px;font-weight:600;padding:6px 8px;border:1px solid var(--border);border-radius:8px;color:var(--text1);}
.rate-input:focus{outline:none;border-color:var(--purple-md);}
.rate-hint{font-size:10px;color:var(--text3);margin-top:4px;}
.conv-table-wrap{overflow-x:auto;}
.conv-table{width:100%;border-collapse:collapse;font-size:13px;}
.conv-table th{background:var(--purple);color:#fff;padding:10px 14px;text-align:left;font-size:12px;font-weight:600;}
.conv-table th.right{text-align:right;}
.conv-table td{padding:10px 14px;border-bottom:1px solid var(--border);}
.conv-table td.right{text-align:right;font-weight:600;}
.conv-table tr.total-row td{background:var(--surface2);font-weight:700;font-size:14px;}
.conv-table tr.total-row td.right{color:var(--purple2);}
.conv-table tr:hover td{background:var(--surface2);}
.conv-section-title{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;padding:8px 14px;background:var(--surface2);}
.conv-update-btn{font-size:12px;padding:6px 16px;border-radius:20px;border:none;background:var(--purple);color:#fff;cursor:pointer;font-weight:500;}
.conv-update-btn:hover{background:var(--purple2);}
.coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;color:var(--text3);text-align:center;}
/* ── Vista Bloqueos ── */
.bloqueos-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:18px;}
.bloqueos-tab{padding:9px 20px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text3);border-bottom:2px solid transparent;margin-bottom:-2px;transition:.15s;}
.bloqueos-tab:hover{color:var(--text2);}
.bloqueos-tab.active{color:var(--purple2);border-bottom-color:var(--purple2);}
.bloqueos-panel{display:none;}
.bloqueos-panel.active{display:block;}
.bloqueos-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px;}
.bloqueos-resumen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:18px;}
.bloqueos-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;text-align:center;}
.bloqueos-kpi-val{font-size:22px;font-weight:700;color:var(--text1);}
.bloqueos-kpi-lbl{font-size:11px;color:var(--text3);margin-top:2px;}
.bloqueos-kpi.alerta .bloqueos-kpi-val{color:var(--amber);}
.bloqueos-kpi.ok .bloqueos-kpi-val{color:var(--green);}
.bloqueos-kpi.danger .bloqueos-kpi-val{color:var(--red);}
.bloqueos-kpi.purple .bloqueos-kpi-val{color:var(--purple2);}
.blq-table{width:100%;border-collapse:collapse;font-size:12px;}
.blq-table th{background:var(--purple);color:#fff;padding:9px 12px;text-align:left;font-size:11px;font-weight:600;white-space:nowrap;}
.blq-table td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.blq-table tr:last-child td{border-bottom:none;}
.blq-table tr:hover td{background:var(--surface2);}
.blq-tipo{font-size:10px;padding:2px 7px;border-radius:6px;font-weight:700;}
.blq-tipo.piloto{background:var(--purple-lt);color:var(--purple2);}
.blq-tipo.usuario{background:var(--surface2);color:var(--text2);}
.blq-veredicto{font-size:10px;padding:2px 7px;border-radius:6px;font-weight:700;}
.blq-veredicto.alerta{background:var(--amber-bg);color:var(--amber-text);}
.blq-veredicto.ok{background:var(--green-bg);color:var(--green-text);}
.blq-estado{font-size:10px;padding:2px 7px;border-radius:6px;font-weight:700;}
.blq-estado.bloqueado{background:var(--red-bg);color:var(--red-text);}
.blq-estado.activo{background:var(--green-bg);color:var(--green-text);}
.blq-tipo-blq{font-size:10px;padding:2px 8px;border-radius:6px;font-weight:700;display:inline-block;}
.blq-tipo-blq.EXPULSADO{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5;}
.blq-tipo-blq.SUSPENDIDO{background:#fffbeb;color:#92400e;border:1px solid #fcd34d;}
.blq-tipo-blq.ACTIVO{background:#f0fdf4;color:#166534;}
.blq-filter-bar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.blq-filter-btn{padding:5px 14px;border-radius:20px;border:1px solid var(--border);background:var(--surface);font-size:11px;font-weight:600;cursor:pointer;color:var(--text2);transition:.15s;}
.blq-filter-btn:hover{background:var(--surface2);}
.blq-filter-btn.active{background:var(--purple);color:#fff;border-color:var(--purple);}
.blq-filter-btn.expulsado.active{background:#ef4444;border-color:#ef4444;}
.blq-filter-btn.suspendido.active{background:#f59e0b;border-color:#f59e0b;color:#fff;}
.blq-loading{text-align:center;padding:32px;color:var(--text3);font-size:13px;}
.blq-wrap{overflow-x:auto;}
/* ── Alerta 30 días y sidebar stats ── */
.blq-table tr.alerta-30 td{background:#fef2f2 !important;border-left:3px solid #ef4444;}
.blq-table tr.alerta-30 td:first-child{font-weight:700;}
.blq-alerta-chip{display:inline-flex;align-items:center;gap:4px;background:#fee2e2;color:#991b1b;font-size:10px;padding:2px 7px;border-radius:6px;font-weight:700;margin-left:4px;}
.blq-dias-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;}
.blq-dias-badge.critico{background:#fee2e2;color:#991b1b;}
.blq-dias-badge.normal{background:#f0fdf4;color:#166534;}
.blq-id{font-family:monospace;font-size:11px;word-break:break-all;max-width:200px;}
.blq-motivo{font-size:11px;color:var(--text1);max-width:260px;}
.blq-motivo.sin-motivo{color:var(--text3);font-style:italic;}
/* ── Tabla de Bloqueos (v3.3.137) ──────────────────────────────────────────
El original de Monitoreo venía en gris/amarillo de Excel. Acá va con la
paleta del portal: morado corporativo para los encabezados, y el amarillo
de las bandas de gravedad reemplazado por los badges de LEVE/GRAVE, que es
lo que esa banda significaba. */
.tb-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:14px;}
.tb-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;}
.tb-kpi-num{font-size:24px;font-weight:700;color:var(--text1);line-height:1.1;}
.tb-kpi-lbl{font-size:11px;color:var(--text2);margin-top:4px;line-height:1.45;font-weight:600;}
.tb-kpi-lbl span{color:var(--text3);font-weight:500;}
.tb-kpi-total{background:linear-gradient(135deg,var(--purple) 0%,var(--purple2) 100%);border-color:transparent;}
.tb-kpi-total .tb-kpi-num{color:#fff;}
.tb-kpi-total .tb-kpi-lbl{color:rgba(255,255,255,.92);}
.tb-kpi-total .tb-kpi-lbl span{color:rgba(255,255,255,.72);}
.tb-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.tb-buscar{flex:1;min-width:220px;padding:7px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:12px;background:var(--surface);color:var(--text1);outline:none;}
.tb-buscar:focus{border-color:var(--purple-md);}
.tb-check{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;}
.tb-grupo{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:14px;}
.tb-grupo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 16px;background:linear-gradient(90deg,var(--sidebar) 0%,var(--purple) 55%,var(--purple2) 100%);color:#fff;}
.tb-grupo-nombre{font-size:12.5px;font-weight:700;letter-spacing:.02em;}
.tb-grupo-sub{font-size:10.5px;color:rgba(255,255,255,.75);margin-top:2px;}
.tb-grupo-cifra{text-align:right;line-height:1.25;}
.tb-grupo-cifra strong{font-size:17px;font-weight:700;}
.tb-grupo-cifra span{display:block;font-size:10.5px;color:rgba(255,255,255,.75);}
.tb-table{width:100%;border-collapse:collapse;font-size:12px;}
.tb-table th{background:var(--surface2);color:var(--text2);padding:8px 10px;text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);white-space:nowrap;}
.tb-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top;}
.tb-table tr:last-child td{border-bottom:none;}
.tb-table tr:hover td{background:var(--purple-lt);}
/* Una falta sin bloqueos en el período sigue siendo parte del reglamento: se
atenúa, no se esconde — que esté en cero es justamente el dato. */
.tb-table tr.tb-cero td{opacity:.55;}
.tb-n{font-weight:700;color:var(--text3);font-size:11px;}
.tb-msg{color:var(--text1);line-height:1.45;min-width:260px;}
.tb-area{font-size:10.5px;font-weight:700;color:var(--purple);letter-spacing:.02em;}
.tb-vacio{color:var(--text3);}
.tb-sinmapeo{display:inline-block;margin-left:6px;background:var(--surface2);color:var(--text3);font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:5px;text-transform:uppercase;letter-spacing:.03em;cursor:help;}
.tb-grav{display:inline-block;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:6px;letter-spacing:.03em;}
.tb-grav.leve{background:var(--amber-bg);color:var(--amber-text);border:1px solid #fcd34d;}
.tb-grav.grave{background:var(--red-bg);color:var(--red-text);border:1px solid #fca5a5;}
.tb-sanc{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:6px;line-height:1.35;}
.tb-sanc.dias{background:var(--surface2);color:var(--text2);}
.tb-sanc.expulsion{background:var(--red-bg);color:var(--red-text);border:1px solid #fca5a5;}
.tb-sanc.indefinido{background:var(--purple-lt);color:var(--purple);border:1px solid var(--purple-md);}
.tb-sanc.invitaciones{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;font-size:9.5px;cursor:help;}
.tb-conteo{white-space:nowrap;}
.tb-conteo-num{display:flex;align-items:baseline;gap:6px;}
.tb-conteo-num strong{font-size:15px;font-weight:700;color:var(--text1);}
.tb-conteo-num span{font-size:11px;font-weight:600;color:var(--purple2);}
.tb-bar{height:5px;background:var(--surface2);border-radius:3px;margin-top:5px;overflow:hidden;}
.tb-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--purple) 0%,var(--purple2) 100%);border-radius:3px;}
.tb-fuera{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);padding:14px 16px;margin-top:4px;}
.tb-fuera-titulo{font-size:11.5px;font-weight:700;color:var(--text2);margin-bottom:10px;}
.tb-fuera-bloque{font-size:11px;color:var(--text3);margin-bottom:10px;line-height:1.5;}
.tb-fuera-bloque strong{color:var(--text2);}
.tb-fuera-item{display:flex;align-items:baseline;gap:10px;padding:4px 0;border-bottom:1px solid var(--border);}
.tb-fuera-item:last-child{border-bottom:none;}
.tb-fuera-item span{flex:1;color:var(--text1);font-size:11.5px;}
.tb-fuera-item em{flex:1.4;font-style:normal;color:var(--text3);font-size:10.5px;}
.tb-fuera-item b{color:var(--text2);font-size:11.5px;white-space:nowrap;}
/* Sidebar stats */
.blq-layout{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;}
.blq-stats-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;position:sticky;top:20px;}
.blq-stats-title{font-size:13px;font-weight:700;color:var(--text1);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.blq-stats-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:10px;}
.blq-stats-tab{font-size:11px;padding:5px 10px;cursor:pointer;color:var(--text3);border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:600;transition:.15s;}
.blq-stats-tab.active{color:var(--purple2);border-bottom-color:var(--purple2);}
.blq-stats-section{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin:8px 0 4px;}
.blq-bar-row{display:flex;align-items:center;gap:6px;margin-bottom:5px;}
.blq-bar-label{font-size:11px;color:var(--text2);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.blq-bar-track{width:70px;flex-shrink:0;background:var(--surface2);border-radius:3px;height:6px;}
.blq-bar-fill{height:6px;border-radius:3px;background:var(--purple-md);}
.blq-bar-count{font-size:10px;font-weight:700;color:var(--text2);width:28px;text-align:right;flex-shrink:0;}
.blq-bar-pct{font-size:10px;color:var(--text3);width:30px;text-align:right;flex-shrink:0;}
@media(max-width:1100px){.blq-layout{grid-template-columns:1fr;}}
.coming-soon .icon{font-size:48px;margin-bottom:16px;opacity:.4;}
.coming-soon h2{font-size:20px;font-weight:700;color:var(--text2);margin-bottom:8px;}
.coming-soon p{font-size:14px;max-width:360px;}
/* ── Admin panel tabs (separados de bloqueos-panel) ── */
.admin-panel{display:none;}
.admin-panel.admin-panel-active{display:block;}
/* Scrollbar sidebar nativa y discreta */
.sidebar::-webkit-scrollbar{width:6px;}
.sidebar::-webkit-scrollbar-track{background:rgba(0,0,0,.1);}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:10px;}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5);}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:900px){.kpi-grid,.grid-3,.drivers-grid{grid-template-columns:repeat(2,1fr);}.grid-2{grid-template-columns:1fr;}.sidebar{width:180px;}. main{margin-left:180px;}}
@media(max-width:600px){.sidebar{display:none;}.main{margin-left:0;}}
/* ── Reconocimiento Facial (aislado) ── */
.rf-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;}
.rf-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;position:relative;overflow:hidden;}
.rf-kpi-val{font-size:24px;font-weight:700;line-height:1;}
.rf-kpi-lbl{font-size:11px;color:var(--text3);margin-top:4px;}
.rf-kpi-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;}
.rf-kpi.alerta .rf-kpi-val{color:#ef4444;}
.rf-kpi.revisar .rf-kpi-val{color:#f59e0b;}
.rf-kpi.posible .rf-kpi-val{color:#7c3aed;}
.rf-kpi.info .rf-kpi-val{color:#22c55e;}
.rf-badge{font-size:10px;padding:2px 8px;border-radius:6px;font-weight:700;display:inline-block;}
.rf-badge.FOTO_DUPLICADA{background:#1e1333;color:#fff;border:1px solid #7c3aed;}
.rf-badge.ALERTA {background:#fef2f2;color:#991b1b;}
.rf-badge.REVISAR {background:#fffbeb;color:#92400e;}
.rf-badge.POSIBLE {background:var(--surface2);color:#6b21a8;}
.rf-table{width:100%;border-collapse:collapse;font-size:12px;}
.rf-table th{background:var(--purple);color:#fff;padding:9px 12px;text-align:left;font-size:11px;font-weight:600;}
.rf-table td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.rf-table tr:hover td{background:var(--surface2);}
.rf-thumb{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--border);vertical-align:middle;}
.rf-user{display:flex;align-items:center;gap:8px;}
.rf-user-name{font-weight:600;font-size:12px;}
.rf-user-id{font-family:monospace;font-size:10px;color:var(--text3);}
.rf-setup{background:var(--surface);border:2px dashed var(--border);border-radius:var(--radius);padding:32px;text-align:center;}
.rf-setup h3{font-size:15px;font-weight:700;color:var(--text2);margin-bottom:8px;}
.rf-setup p{font-size:13px;color:var(--text3);max-width:560px;margin:0 auto 16px;}
.rf-code{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px 16px;font-family:monospace;font-size:11px;text-align:left;color:var(--text2);line-height:1.8;}
.rf-loading{text-align:center;padding:32px;color:var(--text3);font-size:13px;}
/* ══ LOGIN ══ */
#login-screen{position:fixed;inset:0;background:linear-gradient(135deg,#1e1333 0%,#4a0e8f 60%,#7c3aed 100%);display:flex;align-items:center;justify-content:center;z-index:9999;}
.login-card{background:#fff;border-radius:16px;padding:40px 44px;width:380px;box-shadow:0 24px 64px rgba(0,0,0,.35);}
.login-logo{text-align:center;margin-bottom:28px;}
.login-logo img,.login-logo .logo-text{display:block;margin:0 auto;}
.login-logo .logo-text{font-size:26px;font-weight:800;color:#6b21a8;letter-spacing:-1px;}
.login-logo .logo-sub{font-size:12px;color:#9ca3af;margin-top:2px;}
.login-field{margin-bottom:16px;}
.login-field label{font-size:12px;font-weight:600;color:#374151;display:block;margin-bottom:6px;}
.login-field input{width:100%;border:1.5px solid #e5e7eb;border-radius:8px;padding:10px 14px;font-size:14px;outline:none;box-sizing:border-box;transition:.15s;}
.login-field input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.12);}
.login-btn{width:100%;background:linear-gradient(135deg,#6b21a8,#7c3aed);color:#fff;border:none;border-radius:8px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;margin-top:8px;transition:.15s;}
.login-btn:hover{opacity:.9;}
.login-error{color:#ef4444;font-size:12px;text-align:center;margin-top:8px;min-height:18px;}
/* ══ HOME ══ */
#view-home .home-hero{text-align:center;padding:48px 16px 32px;position:relative;}
#view-home .home-hero h1{font-size:26px;font-weight:800;color:var(--text1);}
#view-home .home-hero p{font-size:13px;color:var(--text3);margin-top:6px;}
/* ── Robot 3D Spline en Home (sigue el mouse) + logo Picap en el pecho ──
El contenido del home se estrecha a la izquierda y el robot vive fijo a
la derecha. En pantallas angostas el robot se oculta y el contenido vuelve
a ocupar todo el ancho, así no se rompe nada en móvil/tablet. */
#view-home.active{position:relative;}
#view-home.active > .wrap{
width:58%;
max-width:760px;
margin-left:0;
margin-right:auto;
}
#spline-home-bg{
position:fixed;
right:0;
top:52px; /* debajo del topbar */
width:42%;
height:calc(100vh - 52px);
z-index:0;
pointer-events:none; /* events-target="global" mantiene la mirada activa */
opacity:0;
transition:opacity 1.4s ease;
display:none; /* switchView lo muestra solo en home */
}
#spline-home-bg.loaded{opacity:1;}
/* v3.3.80: overlay COMPACTO en la esquina inferior DERECHA del viewport
(donde el viewer renderiza el badge 'Built with Spline'). 220x55 px. */
#hide-spline-badge{
position:fixed;
right:0;
bottom:0;
width:220px;
height:55px;
background:var(--bg);
z-index:9999;
pointer-events:none;
}
/* Logo Picap grabado sobre el torso del robot */
#picap-logo-overlay{
position:fixed;
right:0;
top:52px;
width:42%;
height:calc(100vh - 52px);
z-index:2;
pointer-events:none;
display:none;
}
#picap-logo-chest{
position:absolute;
left:50%;
top:48%;
transform:translate(-50%,-50%);
width:130px;
opacity:0;
transition:opacity 1.8s ease;
/* Relieve grabado en el metal: luz arriba, sombra abajo */
filter:
drop-shadow(0 -1px 0 rgba(255,255,255,.55))
drop-shadow(0 1.5px 1px rgba(0,0,0,.6))
drop-shadow(0 0 5px rgba(0,0,0,.3));
}
#picap-logo-chest.visible{opacity:0.95;}
@media(max-width:1100px){
#view-home.active > .wrap{width:100%;max-width:1200px;margin:0 auto;}
#spline-home-bg,#picap-logo-overlay{display:none !important;}
}
/* El robot 3D reemplaza a la animación Pibox del banner de bienvenida:
ocultamos la moto. Además quitamos la "caja" morada del banner (degradado,
sombra, halo y burbuja) y dejamos solo el texto en color de la paleta sobre
el fondo claro. */
.welcome-moto-stage{display:none !important;}
.welcome-banner{
background:none !important;
box-shadow:none !important;
border-radius:0 !important;
min-height:0 !important;
padding:12px 0 4px !important;
overflow:visible !important;
}
.welcome-banner::before{display:none !important;} /* halo decorativo */
.welcome-bubble{display:none !important;} /* burbuja "¡Bienvenido!" */
.welcome-banner{text-align:center !important;} /* texto centrado en la columna */
.welcome-banner h1{color:var(--purple) !important;justify-content:center !important;} /* título morado, centrado */
.welcome-banner p{color:var(--text2) !important;} /* subtítulo morado tenue */
/* Tarjeta de bienvenida con mascota animada */
.welcome-banner{
position:relative;
margin:24px auto 4px;
max-width:820px;
background:linear-gradient(135deg,#6b21a8 0%,#7c3aed 50%,#9333ea 100%);
border-radius:22px;
/* v3.0.3: padding-left=290px deja espacio para la animación pibox (260px
wide en left:14) que se difumina suavemente hacia el texto. */
padding:24px 28px 24px 290px;
color:#fff;
box-shadow:0 14px 38px rgba(108,33,168,.28),0 4px 12px rgba(124,58,237,.18);
/* v3.0.5: visible para que la burbuja "¡Bienvenido!" pueda asomarse arriba.
El mask de la animación vive en .welcome-moto-stage que tiene su propio
overflow:hidden, así que el banner no necesita restringir overflow. */
overflow:visible;
min-height:180px;
display:flex;
align-items:center;
text-align:left;
}
/* v3.0.4: mascota Pibox con HALO SUAVE detrás de la moto.
Issue v3.0.3: el cuerpo del piloto y manubrio son #7c3aed, IGUAL que el
gradient medio del banner → se confunden y la moto parece incompleta.
Fix: halo oscuro radial localizado solo donde está la moto (~30% izq),
manteniendo el resto transparente para que el portal y el borde derecho
sigan fundiendo con el banner. */
.welcome-moto-stage{
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
width:260px;
height:170px;
z-index:2;
background:radial-gradient(ellipse 70% 75% at 30% 55%,
rgba(15,11,46,.55) 0%,
rgba(30,27,75,.30) 45%,
transparent 85%);
pointer-events:none;
border-radius:18px;
overflow:hidden;
-webkit-mask-image:linear-gradient(to right, #000 82%, transparent 100%);
mask-image:linear-gradient(to right, #000 82%, transparent 100%);
filter:drop-shadow(0 0 14px rgba(167,139,250,.35));
}
.welcome-moto-stage .moto-anim-wrap{
width:260px;height:170px;
position:absolute;inset:0;
background:transparent;
border-radius:0;
}
.welcome-moto-stage .moto-road-lines span{background:rgba(255,255,255,.4);}
.welcome-moto-stage .moto-spark{box-shadow:0 0 12px rgba(251,191,36,.85);}
@media (max-width:720px){
.welcome-banner{padding:170px 22px 22px 22px;text-align:center;}
.welcome-banner h1{justify-content:center;}
.welcome-moto-stage{
left:50%;top:12px;transform:translateX(-50%);
width:240px;height:150px;
-webkit-mask-image:linear-gradient(to bottom, #000 82%, transparent 100%);
mask-image:linear-gradient(to bottom, #000 82%, transparent 100%);
}
.welcome-moto-stage .moto-anim-wrap{width:240px;height:150px;}
}
.welcome-banner::before{
/* halo decorativo */
content:'';position:absolute;inset:-2px;border-radius:24px;
background:linear-gradient(135deg,#a78bfa55,transparent 60%);
pointer-events:none;
}
.welcome-banner h1{
font-size:28px;font-weight:800;color:#fff;margin:0;
display:flex;align-items:center;gap:12px;flex-wrap:wrap;line-height:1.2;
}
.welcome-banner p{
font-size:14px;color:#e9d5ff;margin-top:6px;line-height:1.5;
}
.welcome-banner .wave{
display:inline-block;font-size:30px;transform-origin:70% 70%;
animation:welcome-wave 2.4s ease-in-out infinite;
}
@keyframes welcome-wave{
0%,60%,100%{transform:rotate(0deg);}
10% {transform:rotate(14deg);}
20% {transform:rotate(-8deg);}
30% {transform:rotate(14deg);}
40% {transform:rotate(-4deg);}
50% {transform:rotate(10deg);}
}
/* Halo decorativo y pedestal de la mascota (efecto 3D).
La mascota sale ligeramente del marco y tiene reflejo, sombra y pulso. */
.welcome-mascot-stage{
position:absolute;
left:8px;
top:50%;
transform:translateY(-50%);
width:140px;height:140px;
z-index:2;
pointer-events:none;
}
/* Halo difuso detrás del avatar (luz suave) */
.welcome-mascot-stage::before{
content:'';
position:absolute;inset:6px;
border-radius:50%;
background:radial-gradient(circle at 35% 30%,
rgba(255,255,255,.55) 0%,
rgba(255,255,255,.18) 35%,
transparent 70%);
filter:blur(2px);
animation:welcome-halo 3.6s ease-in-out infinite;
z-index:1;
}
/* Sombra de "pedestal" debajo del avatar */
.welcome-mascot-stage::after{
content:'';
position:absolute;
bottom:-4px;left:50%;
width:74%;height:14px;
transform:translateX(-50%);
background:radial-gradient(ellipse,
rgba(0,0,0,.35) 0%,
rgba(0,0,0,.18) 45%,
transparent 75%);
border-radius:50%;
filter:blur(2px);
animation:welcome-shadow 3.2s ease-in-out infinite;
z-index:0;
}
@keyframes welcome-halo{
0%,100%{opacity:.7;transform:scale(1);}
50% {opacity:1; transform:scale(1.08);}
}
@keyframes welcome-shadow{
0%,100%{transform:translateX(-50%) scaleX(1); opacity:.6;}
50% {transform:translateX(-50%) scaleX(.78); opacity:.35;}
}
/* Mascota circular: aloja el SVG del avatar (ANIMAL_SVGS) */
.welcome-mascot{
position:absolute;
inset:13px;
border-radius:50%;
background:linear-gradient(160deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 55%, rgba(0,0,0,.10) 100%);
display:flex;align-items:center;justify-content:center;
overflow:visible; /* permitimos drop-shadow del SVG fuera del círculo */
box-shadow:
inset 0 -10px 18px rgba(0,0,0,.20), /* sombra interior abajo (volumen) */
inset 0 8px 14px rgba(255,255,255,.30), /* luz interior arriba */
0 14px 30px rgba(0,0,0,.30), /* sombra externa */
0 0 0 3px rgba(255,255,255,.85); /* aro blanco */
animation:welcome-bob 3.4s ease-in-out infinite;
z-index:2;
}
/* Reflejo de luz superior tipo "lente brillante" */
.welcome-mascot::before{
content:'';
position:absolute;inset:0;
border-radius:50%;
background:linear-gradient(160deg, rgba(255,255,255,.35) 0%, transparent 45%);
pointer-events:none;
z-index:3;
}
.welcome-mascot svg{
width:106%; /* el avatar sale un poquito del marco — efecto 3D */
height:106%;
display:block;
margin:-3%;
filter:
drop-shadow(0 6px 8px rgba(0,0,0,.35))
drop-shadow(0 2px 0 rgba(0,0,0,.18))
saturate(1.15)
contrast(1.05);
animation:welcome-pulse 2.6s ease-in-out infinite;
position:relative;
z-index:2;
}
@keyframes welcome-pulse{
0%,100%{transform:scale(1) rotate(-2deg);}
50% {transform:scale(1.06) rotate(2deg);}
}
@keyframes welcome-bob{
0%,100%{transform:translateY(0) rotate(-2deg);}
50% {transform:translateY(-6px) rotate(2deg);}
}
/* Burbuja de diálogo encima de la mascota */
.welcome-bubble{
position:absolute;
left:14px;
top:-22px;
background:#fff;
color:#5a2bb8;
font-size:12px;
font-weight:700;
padding:6px 14px;
border-radius:14px;
box-shadow:0 6px 14px rgba(0,0,0,.10);
white-space:nowrap;
z-index:3;
animation:welcome-bubble 2.4s ease-in-out infinite;
}
.welcome-bubble::after{
content:'';position:absolute;left:24px;bottom:-7px;
width:0;height:0;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-top:8px solid #fff;
filter:drop-shadow(0 2px 1px rgba(0,0,0,.05));
}
@keyframes welcome-bubble{
0%,100%{transform:translateY(0) scale(1);}
50% {transform:translateY(-3px) scale(1.04);}
}
/* Responsive: en móvil la mascota va arriba y el banner pasa a centrado */
@media(max-width:680px){
.welcome-banner{padding:130px 22px 24px;text-align:center;flex-direction:column;align-items:center;}
.welcome-banner h1{justify-content:center;font-size:22px;}
.welcome-mascot-stage{left:50%;top:8px;transform:translateX(-50%);width:110px;height:110px;}
.welcome-bubble{left:50%;top:-12px;transform:translateX(-50%);}
.welcome-bubble::after{left:50%;transform:translateX(-50%);}
}
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:16px;}
.home-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;cursor:pointer;transition:.15s;position:relative;overflow:hidden;}
.home-card:hover{border-color:var(--purple2);box-shadow:0 4px 16px rgba(124,58,237,.12);}
.home-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;}
.home-card.mon::before{background:#7c3aed;}
.home-card.fin::before{background:#f59e0b;}
.home-card.sac::before{background:#22c55e;}
.home-card.pib::before{background:#ef4444;}
.home-card-icon{font-size:28px;margin-bottom:8px;}
.home-card-title{font-size:14px;font-weight:700;color:var(--text1);margin-bottom:4px;}
.home-card-desc{font-size:12px;color:var(--text3);}
.home-card-items{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px;}
.home-chip{font-size:10px;padding:2px 8px;border-radius:10px;background:var(--surface2);color:var(--text2);}
/* ══ ESTADÍSTICA BLOQUEOS ══ */
.eb-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;}
.eb-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;position:relative;overflow:hidden;}
.eb-kpi-val{font-size:26px;font-weight:700;color:var(--text1);}
.eb-kpi-sub{font-size:11px;color:var(--text3);margin-top:2px;}
.eb-kpi-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;}
.eb-section{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin:18px 0 8px;}
.eb-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.eb-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;}
.eb-box-title{font-size:12px;font-weight:700;color:var(--text2);margin-bottom:10px;}
.eb-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.eb-bar-label{font-size:12px;color:var(--text2);width:110px;flex-shrink:0;}
.eb-bar-track{flex:1;background:var(--surface2);border-radius:4px;height:8px;}
.eb-bar-fill{height:8px;border-radius:4px;}
.eb-bar-val{font-size:11px;font-weight:700;color:var(--text2);width:50px;text-align:right;flex-shrink:0;}
.eb-table{width:100%;border-collapse:collapse;font-size:12px;}
.eb-table th{background:var(--purple);color:#fff;padding:9px 12px;text-align:left;font-size:11px;font-weight:600;}
.eb-table td{padding:8px 12px;border-bottom:1px solid var(--border);}
.eb-table tr:hover td{background:var(--surface2);}
.eb-pct{font-size:10px;color:var(--text3);margin-left:4px;}
/* ── Módulo Pagos TC/Promo ── */
.pag-tab{padding:9px 22px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text3);border-bottom:2px solid transparent;margin-bottom:-2px;transition:.15s;}
.pag-tab:hover{color:var(--text2);}
.pag-tab.active{color:var(--purple2);border-bottom-color:var(--purple2);}
.pag-panel{display:none;}
.pag-panel.active{display:block;}
.pag-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;}
.pag-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;position:relative;overflow:hidden;}
.pag-kpi-val{font-size:26px;font-weight:700;color:var(--text1);line-height:1;}
.pag-kpi-lbl{font-size:11px;color:var(--text3);margin-top:3px;}
.pag-kpi-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;}
.pag-kpi.ok .pag-kpi-val{color:var(--green);}
.pag-kpi.mp .pag-kpi-val{color:var(--amber);}
.pag-kpi.fr .pag-kpi-val{color:var(--red);}
.pag-kpi.pu .pag-kpi-val{color:var(--purple2);}
.pag-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.pag-duo-table{width:100%;border-collapse:collapse;font-size:11px;}
.pag-duo-table th{background:var(--purple);color:#fff;padding:8px 10px;text-align:left;font-size:10px;font-weight:600;white-space:nowrap;}
.pag-duo-table td{padding:7px 10px;border-bottom:1px solid var(--border);font-family:monospace;font-size:10px;}
.pag-duo-table tr:hover td{background:var(--surface2);}
.pag-duo-table tr:last-child td{border-bottom:none;}
.pag-verdct{font-size:10px;padding:2px 7px;border-radius:5px;font-weight:700;}
.pag-verdct.ok{background:var(--green-bg);color:var(--green-text);}
.pag-verdct.mp{background:var(--amber-bg);color:var(--amber-text);}
.pag-verdct.fr{background:var(--red-bg);color:var(--red-text);}
.pag-vbar{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.pag-vbar-label{font-size:12px;color:var(--text2);width:150px;flex-shrink:0;}
.pag-vbar-track{flex:1;background:var(--surface2);border-radius:3px;height:7px;}
.pag-vbar-fill{height:7px;border-radius:3px;}
.pag-vbar-val{font-size:11px;font-weight:700;color:var(--text2);width:55px;text-align:right;}
@media(max-width:900px){.pag-kpis{grid-template-columns:repeat(2,1fr);}.pag-grid-2{grid-template-columns:1fr;}}
/* ── Filtro ID en bloqueos ── */
.blq-search-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.blq-search-input{flex:1;min-width:200px;max-width:340px;padding:7px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:12px;font-family:monospace;color:var(--text1);background:var(--surface);outline:none;transition:.15s;}
.blq-search-input:focus{border-color:var(--purple2);box-shadow:0 0 0 3px rgba(124,58,237,.1);}
.blq-search-clear{font-size:11px;padding:5px 10px;border-radius:7px;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--text3);}
.blq-search-clear:hover{color:var(--red);border-color:var(--red);}
.blq-search-label{font-size:11px;font-weight:600;color:var(--text3);white-space:nowrap;}
.blq-search-type{font-size:11px;padding:5px 8px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text2);cursor:pointer;}
/* ── Módulo Servicios Estafa ── */
.est-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:18px;}
.est-tab{padding:9px 22px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text3);border-bottom:2px solid transparent;margin-bottom:-2px;transition:.15s;}
.est-tab:hover{color:var(--text2);}
.est-tab.active{color:var(--red);border-bottom-color:var(--red);}
.est-panel{display:none;}
.est-panel.active{display:block;}
.est-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;}
.est-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;position:relative;overflow:hidden;}
.est-kpi-val{font-size:26px;font-weight:700;line-height:1;color:var(--text1);}
.est-kpi-lbl{font-size:11px;color:var(--text3);margin-top:3px;}
.est-kpi-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;}
.est-kpi.danger .est-kpi-val{color:var(--red);}
.est-kpi.warn .est-kpi-val{color:var(--amber);}
.est-kpi.ok .est-kpi-val{color:var(--green);}
.est-kpi.pu .est-kpi-val{color:var(--purple2);}
.est-badge{display:inline-block;font-size:10px;padding:2px 8px;border-radius:5px;font-weight:700;white-space:nowrap;}
.est-badge.ESTAFA{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5;}
.est-badge.POSIBLE_ESTAFA{background:#fffbeb;color:#92400e;border:1px solid #fcd34d;}
.est-badge.OK{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;}
.est-kw{display:inline-block;font-size:9px;padding:1px 6px;border-radius:4px;background:#fee2e2;color:#991b1b;margin:1px;border:1px solid #fca5a5;font-family:monospace;}
.est-kw.posible{background:#fef9c3;color:#854d0e;border-color:#fde047;}
.est-table{width:100%;border-collapse:collapse;font-size:11px;}
.est-table th{background:var(--red);color:#fff;padding:9px 12px;text-align:left;font-size:10px;font-weight:600;white-space:nowrap;}
.est-table td{padding:7px 12px;border-bottom:1px solid var(--border);vertical-align:top;}
.est-table tr:hover td{background:var(--surface2);}
.est-table tr.row-estafa td{border-left:3px solid var(--red);}
.est-table tr.row-posible td{border-left:3px solid var(--amber);}
.est-indicaciones{font-size:10px;color:var(--text2);max-width:300px;line-height:1.4;word-break:break-word;}
.est-vbar{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.est-vbar-lbl{font-size:12px;color:var(--text2);width:130px;flex-shrink:0;}
.est-vbar-track{flex:1;background:var(--surface2);border-radius:3px;height:8px;}
.est-vbar-fill{height:8px;border-radius:3px;}
.est-vbar-val{font-size:11px;font-weight:700;color:var(--text2);width:70px;text-align:right;flex-shrink:0;}
.est-search-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.est-search-input{flex:1;min-width:200px;max-width:320px;padding:7px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:12px;font-family:monospace;outline:none;transition:.15s;}
.est-search-input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.1);}
.est-search-sel{font-size:11px;padding:6px 8px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text2);}
/* ── Módulo Validación de Recaudos ── */
.rec-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:18px;}
.rec-tab{padding:9px 22px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text3);border-bottom:2px solid transparent;margin-bottom:-2px;transition:.15s;}
.rec-tab:hover{color:var(--text2);}
.rec-tab.active{color:var(--purple2);border-bottom-color:var(--purple2);}
.rec-panel{display:none;}
.rec-panel.active{display:block;}
.rec-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;}
.rec-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;position:relative;overflow:hidden;}
.rec-kpi-val{font-size:24px;font-weight:700;line-height:1;color:var(--text1);}
.rec-kpi-sub{font-size:11px;color:var(--text3);margin-top:2px;}
.rec-kpi-monto{font-size:13px;font-weight:600;margin-top:6px;}
.rec-kpi-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;}
.rec-kpi.ok .rec-kpi-val{color:var(--green);}
.rec-kpi.danger .rec-kpi-val{color:var(--red);}
.rec-kpi.warn .rec-kpi-val{color:var(--amber);}
.rec-kpi.pu .rec-kpi-val{color:var(--purple2);}
.rec-badge{display:inline-block;font-size:10px;padding:2px 8px;border-radius:5px;font-weight:700;white-space:nowrap;}
.rec-badge.Correcto{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;}
.rec-badge.Pagado_demas{background:#fffbeb;color:#92400e;border:1px solid #fcd34d;}
.rec-badge.Debe_dinero{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5;}
.rec-badge.Revisar{background:var(--surface2);color:#6b21a8;border:1px solid #a78bfa;}
.rec-table{width:100%;border-collapse:collapse;font-size:11px;}
.rec-table th{background:var(--purple);color:#fff;padding:9px 12px;text-align:left;font-size:10px;font-weight:600;white-space:nowrap;}
.rec-table th.right{text-align:right;}
.rec-table td{padding:7px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.rec-table td.right{text-align:right;font-weight:600;}
.rec-table tr:hover td{background:var(--surface2);}
.rec-table tr.row-demas td{border-left:3px solid var(--amber);}
.rec-table tr.row-deuda td{border-left:3px solid var(--red);}
.rec-table tr.row-revisar td{border-left:3px solid var(--purple2);}
/* v3.9: tabla detallada de recaudos — IDs completos sin truncado.
Suma de colgroup: 88+88+120+220+260+280+160+60+110+110+110+110+120+120 = 1956px */
.rec-detail-table{font-size:12px;table-layout:fixed;width:100%;min-width:1960px;}
.rec-detail-table th{padding:10px 8px;font-size:11px;}
.rec-detail-table td{padding:10px 8px;vertical-align:middle;}
.rec-detail-table tr:hover td{background:#FAF9FF;}
.rec-search-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.rec-search-input{flex:1;min-width:180px;max-width:300px;padding:7px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:12px;font-family:monospace;outline:none;transition:.15s;}
.rec-search-input:focus{border-color:var(--purple2);box-shadow:0 0 0 3px rgba(124,58,237,.1);}
.rec-sel{font-size:11px;padding:6px 8px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text2);}
.rec-vbar{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.rec-vbar-lbl{font-size:12px;color:var(--text2);width:140px;flex-shrink:0;}
.rec-vbar-track{flex:1;background:var(--surface2);border-radius:3px;height:8px;}
.rec-vbar-fill{height:8px;border-radius:3px;}
.rec-vbar-val{font-size:11px;font-weight:700;color:var(--text2);width:80px;text-align:right;flex-shrink:0;}
@media(max-width:900px){.rec-kpis{grid-template-columns:repeat(2,1fr);}}
/* ── Módulo Auditorías Pibox Comercial ── */
/* v3.3.152 — La fila de tabs ENVUELVE. Era display:flex sin wrap y con siete
pestañas (Comisiones ×2, Créditos ×2, Sin Tarifas ×2 y Comerciales) se
desbordaba: la última quedaba corrida contra el borde derecho, separada del
resto y como si no perteneciera al grupo.
El padding baja de 18px a 14px para que entren más por fila, y el row-gap
separa las dos líneas — sin él, la fila de arriba se pega a la de abajo. */
.aud-tabs{display:flex;flex-wrap:wrap;gap:0 0;row-gap:2px;border-bottom:2px solid var(--border);margin-bottom:18px;}
.aud-tab{padding:9px 14px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text3);border-bottom:2px solid transparent;margin-bottom:-2px;transition:.15s;white-space:nowrap;}
.aud-tab:hover{color:var(--text2);}
.aud-tab.active{color:var(--purple2);border-bottom-color:var(--purple2);}
.aud-panel{display:none;}
.aud-panel.active{display:block;}
.aud-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;}
.aud-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;position:relative;overflow:hidden;}
.aud-kpi-val{font-size:26px;font-weight:700;line-height:1;color:var(--text1);}
.aud-kpi-lbl{font-size:11px;color:var(--text3);margin-top:3px;}
.aud-kpi-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;}
.aud-kpi.ok .aud-kpi-val{color:var(--green);}
.aud-kpi.danger .aud-kpi-val{color:var(--red);}
.aud-kpi.warn .aud-kpi-val{color:var(--amber);}
.aud-kpi.pu .aud-kpi-val{color:var(--purple2);}
.aud-badge{display:inline-block;font-size:10px;padding:2px 7px;border-radius:5px;font-weight:700;margin:1px;white-space:nowrap;}
.aud-badge.ok{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;}
.aud-badge.err{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5;}
.aud-badge.warn{background:#fffbeb;color:#92400e;border:1px solid #fcd34d;}
.aud-badge.info{background:var(--surface2);color:#6b21a8;border:1px solid #a78bfa;}
.aud-table{width:100%;border-collapse:collapse;font-size:11px;}
.aud-table th{background:var(--purple);color:#fff;padding:9px 10px;text-align:left;font-size:10px;font-weight:600;white-space:nowrap;}
.aud-table th.right{text-align:right;}
.aud-table td{padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
.aud-table td.right{text-align:right;}
.aud-table td.mono{font-family:monospace;font-size:10px;}
.aud-table tr:hover td{background:var(--surface2);}
.aud-table tr.row-err td{border-left:3px solid #ef4444;}
.aud-table tr.row-warn td{border-left:3px solid #f59e0b;}
.aud-table tr.row-info td{border-left:3px solid #a78bfa;}
/* v3.3.149 — Botones de estado de tarifa (Clientes Sin Tarifas).
`.pbtn.active` pinta todo de morado, y acá el color ES la información:
rojo = sin tarifa, ámbar = en NULL, verde = ok. Sin esto, los tres botones
encendidos se ven idénticos y se pierde de un vistazo qué se está mirando. */
.aud-clase-btn{font-weight:600;}
.aud-clase-btn[data-clase="sin_tarifa"].active{background:#ef4444;border-color:#dc2626;color:#fff;}
.aud-clase-btn[data-clase="null"].active{background:#f59e0b;border-color:#d97706;color:#fff;}
.aud-clase-btn[data-clase="ok"].active{background:#22c55e;border-color:#16a34a;color:#fff;}
.aud-clase-btn:not(.active){opacity:.55;}
/* v3.3.152 — Botones de clase del submódulo Tarifas. Clase PROPIA y no
.aud-clase-btn a propósito: toggleClaseSinTarifa() lee
`document.querySelectorAll('.aud-clase-btn.active')` sin acotar al contenedor,
así que compartir la clase haría que tocar un botón de Tarifas reescribiera
el estado de Clientes Sin Tarifas (y al revés). */
.aud-tclase-btn{font-weight:600;}
.aud-tclase-btn[data-clase="tarifa_baja"].active{background:#ef4444;border-color:#dc2626;color:#fff;}
.aud-tclase-btn[data-clase="revisar_paquete"].active{background:#f59e0b;border-color:#d97706;color:#fff;}
.aud-tclase-btn[data-clase="ok"].active{background:#22c55e;border-color:#16a34a;color:#fff;}
.aud-tclase-btn[data-clase="sin_referencia"].active{background:#64748b;border-color:#475569;color:#fff;}
.aud-tclase-btn:not(.active){opacity:.55;}
.aud-search-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.aud-search-input{flex:1;min-width:160px;max-width:280px;padding:6px 10px;border:1.5px solid var(--border);border-radius:8px;font-size:12px;font-family:monospace;outline:none;transition:.15s;}
.aud-search-input:focus{border-color:var(--purple2);box-shadow:0 0 0 3px rgba(124,58,237,.1);}
.aud-sel{font-size:11px;padding:5px 8px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text2);}
.aud-kam-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.aud-kam-name{font-size:11px;color:var(--text2);width:180px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aud-kam-track{flex:1;background:var(--surface2);border-radius:3px;height:7px;}
.aud-kam-fill{height:7px;border-radius:3px;}
.aud-kam-val{font-size:10px;font-weight:700;color:var(--text2);width:70px;text-align:right;flex-shrink:0;}
.aud-anti-test-chip{font-size:10px;background:#fef9c3;color:#854d0e;border:1px solid #fde047;padding:2px 8px;border-radius:10px;font-weight:600;}
@media(max-width:900px){.aud-kpis{grid-template-columns:repeat(2,1fr);}}
/* ── Toggle contraseña (ojito) ── */
.pw-wrap{position:relative;}
.pw-wrap input{width:100%;padding-right:40px;box-sizing:border-box;}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);
cursor:pointer;background:none;border:none;padding:4px;
color:#9ca3af;transition:color .15s;display:flex;align-items:center;}
.pw-eye:hover{color:#6b21a8;}
.pw-eye svg{width:18px;height:18px;pointer-events:none;}
/* ── Home 4 cards principales ── */
.home-main-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px;max-width:880px;margin-left:auto;margin-right:auto;}
.home-main-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;}
.home-main-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(107,33,168,.15);}
.home-main-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;}
.hmc-mon::before{background:linear-gradient(90deg,#7c3aed,#a78bfa);}
.hmc-blq::before{background:linear-gradient(90deg,#22c55e,#86efac);}
.hmc-fin::before{background:linear-gradient(90deg,#f59e0b,#fcd34d);}
.hmc-pib::before{background:linear-gradient(90deg,#ef4444,#fca5a5);}
.hcard-icon{font-size:34px;margin-bottom:10px;}
.hcard-title{font-size:18px;font-weight:800;color:var(--text1);margin-bottom:5px;}
.hcard-desc{font-size:12px;color:var(--text3);margin-bottom:12px;line-height:1.5;}
.hcard-chips{display:flex;flex-wrap:wrap;gap:5px;}
.hcard-chips span{font-size:10px;padding:2px 9px;border-radius:9px;background:var(--surface2);color:var(--text2);font-weight:500;}
@media(max-width:700px){.home-main-grid{grid-template-columns:1fr;}}
/* ── Auditorías: mejoras UI ── */
.aud-double-period{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:4px;}
.aud-period-box{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;flex:1;min-width:260px;}
.aud-period-box-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:5px;}
.aud-period-box.primary .aud-period-box-label{color:var(--purple2);}
.aud-period-box.secondary .aud-period-box-label{color:var(--amber);}
.aud-export-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;
background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;
border:none;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;
transition:opacity .15s;margin-left:auto;white-space:nowrap;}
.aud-export-btn:hover{opacity:.88;}
.aud-export-btn svg{width:14px;height:14px;}
.aud-id-cell{font-family:monospace;font-size:9.5px;line-height:1.55;word-break:break-all;max-width:180px;}
.aud-id-cell .aud-id-label{font-size:8px;color:var(--text3);font-family:inherit;display:block;margin-bottom:1px;}
.aud-id-cell .aud-id-val{color:var(--text1);cursor:pointer;}
.aud-id-cell .aud-id-val:hover{color:var(--purple2);text-decoration:underline;}
/* ── Botón Exportar Excel — todos los módulos ── */
.btn-export-xl{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;
background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none;
border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;
transition:opacity .15s;white-space:nowrap;text-decoration:none;}
.btn-export-xl:hover{opacity:.86;}
.btn-export-xl svg{width:14px;height:14px;flex-shrink:0;}
.btn-export-xl:disabled{opacity:.5;cursor:not-allowed;}
.export-bar{display:flex;justify-content:flex-end;margin-bottom:10px;gap:8px;}
/* ── Panel de usuario (dropdown topbar) ── */
.user-menu-wrap{position:relative;display:inline-flex;align-items:center;}
.user-avatar-btn{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:4px 12px 4px 6px;
cursor:pointer;color:#fff;font-size:11px;font-weight:600;transition:background .2s;}
.user-avatar-btn:hover{background:rgba(255,255,255,.22);}
.user-avatar-circle{width:26px;height:26px;border-radius:50%;background:var(--purple2);
display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
color:#fff;flex-shrink:0;border:2px solid rgba(255,255,255,.4);}
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;
border-radius:12px;box-shadow:0 8px 32px rgba(107,33,168,.18);min-width:230px;
padding:6px;z-index:9999;display:none;border:1px solid rgba(107,33,168,.1);}
.user-dropdown.open{display:block;}
.user-dd-header{padding:12px 14px 10px;border-bottom:1px solid var(--border);margin-bottom:4px;}
.user-dd-avatar{width:40px;height:40px;border-radius:50%;background:var(--purple2);
display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;
color:#fff;margin:0 auto 8px;border:2px solid var(--purple1);}
.user-dd-name{text-align:center;font-size:13px;font-weight:700;color:var(--text1);}
.user-dd-email{text-align:center;font-size:11px;color:var(--text3);margin-top:2px;word-break:break-all;}
.user-dd-role{text-align:center;margin-top:6px;}
.user-dd-role span{background:var(--purple1);color:#fff;border-radius:6px;
padding:2px 10px;font-size:10px;font-weight:700;}
.user-dd-item{display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:8px;
cursor:pointer;font-size:12px;color:var(--text1);font-weight:500;transition:background .15s;}
.user-dd-item:hover{background:var(--surface2);color:var(--purple1);}
.user-dd-item.danger{color:#dc2626;}
.user-dd-item.danger:hover{background:#fef2f2;}
.user-dd-sep{height:1px;background:var(--border);margin:4px 0;}
/* ── Home módulo cards con hover submenu (estilo imagen) ── */
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
gap:18px;margin-top:20px;}
.module-card{position:relative;background:var(--surface);border-radius:14px;
border:1.5px solid var(--border);padding:22px 14px 18px;text-align:center;
cursor:pointer;transition:all .22s;box-shadow:0 2px 10px rgba(107,33,168,.06);}
.module-card:hover{border-color:var(--purple1);box-shadow:0 6px 24px rgba(107,33,168,.14);
transform:translateY(-3px);}
.module-card-icon{font-size:32px;margin-bottom:10px;display:block;}
.module-card-title{font-size:12px;font-weight:700;color:var(--text1);margin-bottom:4px;}
.module-card-desc{font-size:10px;color:var(--text3);line-height:1.4;}
.module-card-badge{position:absolute;top:8px;right:10px;font-size:9px;background:var(--purple1);
color:#fff;border-radius:8px;padding:1px 7px;font-weight:700;}
.module-card-badge.coming{background:#e0d7f5;color:var(--purple1);}
/* Submenu hover */
.module-submenu{position:absolute;top:0;left:calc(100% + 10px);background:var(--surface);
border-radius:12px;box-shadow:0 8px 28px rgba(107,33,168,.18);min-width:170px;
padding:8px;z-index:999;display:none;border:1.5px solid rgba(107,33,168,.15);
text-align:left;}
/* module-submenu desactivado — submenús integrados en sidebar */
.module-card:hover .module-submenu{display:none;}
.module-submenu-title{font-size:9px;font-weight:700;color:var(--text3);
padding:4px 10px 8px;text-transform:uppercase;letter-spacing:.5px;}
.module-submenu-item{display:flex;align-items:center;gap:7px;padding:7px 10px;
border-radius:8px;font-size:11px;color:var(--text1);font-weight:500;
transition:background .15s;white-space:nowrap;}
.module-submenu-item:hover{background:var(--surface2);color:var(--purple1);}
.module-submenu-item.disabled{opacity:.45;cursor:default;pointer-events:none;}
/* Ajustar para las cards del lado derecho */
.module-card:last-child .module-submenu,
.module-card:nth-last-child(-n+3) .module-submenu{left:auto;right:calc(100% + 10px);}
/* ── Botón Volver dentro de módulos ── */
.btn-back{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;
background:rgba(107,33,168,.08);border:1.5px solid rgba(107,33,168,.2);
border-radius:8px;color:var(--purple1);font-size:11px;font-weight:700;
cursor:pointer;transition:all .15s;margin-bottom:14px;}
.btn-back:hover{background:var(--purple1);color:#fff;}
/* ── Panel admin mejorado ── */
.admin-user-card{display:flex;align-items:center;gap:12px;background:var(--surface);
border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;
transition:box-shadow .15s;}
.admin-user-card:hover{box-shadow:0 3px 14px rgba(107,33,168,.1);}
.admin-user-avatar{width:36px;height:36px;border-radius:50%;background:var(--purple2);
display:flex;align-items:center;justify-content:center;font-size:14px;
font-weight:800;color:#fff;flex-shrink:0;}
.admin-user-info{flex:1;min-width:0;}
.admin-user-name{font-size:12px;font-weight:700;color:var(--text1);}
.admin-user-email{font-size:10px;color:var(--text3);margin-top:1px;}
.admin-user-role{font-size:9px;background:var(--surface2);color:var(--purple1);
border-radius:5px;padding:1px 8px;font-weight:700;display:inline-block;margin-top:3px;}
.admin-user-actions{display:flex;gap:5px;flex-shrink:0;}
.admin-btn-edit{padding:4px 10px;background:rgba(107,33,168,.1);border:none;
border-radius:6px;color:var(--purple1);font-size:10px;font-weight:700;cursor:pointer;transition:all .15s;}
.admin-btn-edit:hover{background:var(--purple1);color:#fff;}
.admin-btn-delete{padding:4px 10px;background:rgba(220,38,38,.08);border:none;
border-radius:6px;color:#dc2626;font-size:10px;font-weight:700;cursor:pointer;transition:all .15s;}
.admin-btn-delete:hover{background:#dc2626;color:#fff;}
/* ── Vista Perfil ── */
.perfil-header{background:linear-gradient(135deg,#1e1b4b 0%,#3b0764 50%,#1e1b4b 100%);border-radius:16px;padding:16px 28px;display:flex;align-items:center;gap:24px;margin-bottom:16px;position:relative;overflow:hidden;color:#fff;}
.perfil-header::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(167,139,250,.25),transparent);border-radius:50%;}
.perfil-header::after{content:'';position:absolute;bottom:-20px;left:-20px;width:80px;height:80px;background:radial-gradient(circle,rgba(245,158,11,.15),transparent);border-radius:50%;}
.perfil-hero-img{flex-shrink:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));position:relative;}
/* ── Animación de la moto con portal mágico ── */
/* La moto recorre de izquierda a derecha, llega al portal, "entra" (se
encoge y desaparece), el portal pulsa, y luego la moto reaparece desde
la izquierda. Loop infinito. */
.moto-anim-wrap{position:relative;width:220px;height:160px;overflow:hidden;border-radius:14px;}
.moto-anim-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(76,29,149,.0) 0%,rgba(76,29,149,.0) 70%,rgba(167,139,250,.15) 100%);}
/* Carretera con líneas animadas */
.moto-road-lines{position:absolute;left:0;right:0;bottom:18px;height:3px;display:flex;gap:14px;animation:moto-road 1.5s linear infinite;}
.moto-road-lines span{flex:0 0 18px;height:3px;background:rgba(167,139,250,.5);border-radius:2px;}
@keyframes moto-road{from{transform:translateX(0)}to{transform:translateX(-32px)}}
/* La moto: 8s en total — sale, recorre, entra al portal, desaparece, reaparece */
.moto-svg{position:absolute;left:0;top:0;width:140px;height:120px;animation:moto-recorrido 8s ease-in-out infinite;}
@keyframes moto-recorrido{
0% { transform:translate(-150px,30px) scale(1); opacity:0; }
10% { transform:translate(-30px,30px) scale(1); opacity:1; }
45% { transform:translate(15px,28px) scale(1); opacity:1; }
60% { transform:translate(45px,30px) scale(.9); opacity:1; }
72% { transform:translate(70px,32px) scale(.55) rotate(8deg); opacity:.7; }
80% { transform:translate(85px,32px) scale(.15) rotate(20deg); opacity:0; }
85% { transform:translate(-150px,30px) scale(1); opacity:0; }
100% { transform:translate(-150px,30px) scale(1); opacity:0; }
}
/* Portal mágico — pulso global. Los anillos internos se animan vía SMIL
dentro del SVG, no por CSS, para que el origen de
rotación sea exactamente el centro del círculo y no se desalinee. */
.moto-portal{position:absolute;right:14px;top:38px;width:64px;height:64px;animation:portal-pulse 2s ease-in-out infinite;}
@keyframes portal-pulse{
0%,100% { transform:scale(.92); }
50% { transform:scale(1.08); }
}
/* Partículas brillando alrededor del portal */
.moto-spark{position:absolute;border-radius:50%;background:#fbbf24;box-shadow:0 0 8px #fbbf24;}
.moto-spark.s1{right:8px;top:32px;width:5px;height:5px;animation:spark-1 1.6s ease-in-out infinite;}
.moto-spark.s2{right:62px;top:30px;width:4px;height:4px;animation:spark-2 1.4s ease-in-out infinite .3s;}
.moto-spark.s3{right:30px;top:90px;width:3px;height:3px;animation:spark-3 1.8s ease-in-out infinite .6s;}
.moto-spark.s4{right:50px;top:22px;width:3px;height:3px;animation:spark-1 2s ease-in-out infinite .8s;}
@keyframes spark-1{0%,100%{opacity:0;transform:translate(0,0) scale(.5)}50%{opacity:1;transform:translate(-6px,-4px) scale(1)}}
@keyframes spark-2{0%,100%{opacity:0;transform:translate(0,0) scale(.5)}50%{opacity:1;transform:translate(8px,4px) scale(1)}}
@keyframes spark-3{0%,100%{opacity:0;transform:translate(0,0) scale(.5)}50%{opacity:1;transform:translate(-4px,-8px) scale(1)}}
/* Speed lines que aparecen cuando la moto entra al portal */
.moto-speed-burst{position:absolute;right:88px;top:48px;width:32px;height:32px;opacity:0;animation:speed-burst 8s ease-in-out infinite;}
@keyframes speed-burst{
0%,55%,100% { opacity:0; transform:scale(.5); }
65%,75% { opacity:.9; transform:scale(1.4); }
}
/* Caja del paquete que vuela hacia el portal — sale de la moto, hace
un arco y se "entrega" entrando al portal antes de que la moto siga */
.moto-package{position:absolute;left:50px;top:62px;width:24px;height:24px;opacity:0;animation:package-fly 8s ease-in-out infinite;pointer-events:none;}
@keyframes package-fly{
0%, 50%, 100% { opacity:0; transform:translate(0,0) rotate(0) scale(1); }
/* Sale de la caja de la moto */
56% { opacity:1; transform:translate(10px,-6px) rotate(40deg) scale(1); }
/* Sube en arco hacia el portal */
64% { opacity:1; transform:translate(60px,-30px) rotate(180deg) scale(1); }
/* Llega al portal y empieza a encogerse */
70% { opacity:1; transform:translate(110px,-18px) rotate(320deg) scale(.85); }
/* Entra al portal: se encoge y desaparece */
76% { opacity:0; transform:translate(125px,-10px) rotate(420deg) scale(.1); }
}
.perfil-hero-info{display:flex;flex-direction:column;gap:2px;color:#fff;min-width:0;}
/* v3.0.3: foto del usuario AGRUPADA junto al info (no flotando al extremo).
El perfil-header usa display:flex con gap:24px; orden actual es
[moto] [info] [foto], todos alineados a la izquierda gracias a que
ningún elemento tiene flex:1. */
.perfil-hero-foto{
flex-shrink:0;
width:96px;height:96px;border-radius:50%;
overflow:hidden;
border:3px solid rgba(255,255,255,.4);
box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.15);
background:rgba(255,255,255,.05);
position:relative;z-index:2;
align-self:center;
}
.perfil-hero-foto img,
.perfil-hero-foto svg{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
@media (max-width:720px){
.perfil-hero-foto{width:72px;height:72px;}
}
.perfil-header .perfil-name{color:#fff!important;font-size:20px;font-weight:700;}
.perfil-header .perfil-email{color:rgba(255,255,255,.75)!important;font-size:12px;}
.perfil-header .perfil-role-badge{background:rgba(255,255,255,.15);color:#fff!important;border:1px solid rgba(255,255,255,.3);padding:3px 14px;border-radius:20px;font-size:11px;font-weight:600;display:inline-block;width:fit-content;}
.perfil-avatar{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.2);
display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;
color:#fff;margin:0 auto 12px;border:3px solid rgba(255,255,255,.4);}
.perfil-name{font-size:18px;font-weight:800;margin-bottom:4px;}
.perfil-email{font-size:12px;opacity:.8;margin-bottom:10px;}
.perfil-role-badge{display:inline-block;background:rgba(255,255,255,.2);
border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:3px 14px;
font-size:11px;font-weight:700;}
.perfil-section{background:var(--surface);border-radius:12px;border:1.5px solid var(--border);
padding:16px;margin-bottom:14px;}
.perfil-section-title{font-size:12px;font-weight:700;color:var(--text3);
text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;
display:flex;align-items:center;gap:6px;}
.perfil-module-item{display:flex;align-items:center;gap:9px;padding:7px 0;
border-bottom:1px solid #f5f3fa;font-size:12px;color:var(--text1);}
.perfil-module-item:last-child{border-bottom:none;}
.perfil-module-dot{width:8px;height:8px;border-radius:50%;background:var(--purple1);flex-shrink:0;}
/* ── Home: 4 módulos grandes estilo dashboard ── */
.home-modules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:24px;}
@media(max-width:900px){.home-modules-grid{grid-template-columns:1fr;}}
.home-module-card{background:var(--surface);border-radius:18px;border:2px solid var(--border);
padding:28px 24px;cursor:pointer;transition:all .22s;
box-shadow:0 4px 18px rgba(107,33,168,.07);}
.home-module-card:hover{border-color:var(--purple1);transform:translateY(-4px);
box-shadow:0 10px 32px rgba(107,33,168,.16);}
.home-module-card-top{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
/* v3.3.26: logos PNG limpios — sin contenedor coloreado, sin border ni
tinte. El logo ya tiene su propio diseño visual, solo lo mostramos
centrado y al tamaño que respire. */
.home-module-card-icon{width:84px;height:84px;display:flex;
align-items:center;justify-content:center;flex-shrink:0;
background:transparent;border:none;padding:0;}
.home-module-card-icon img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.home-module-card-name{font-size:18px;font-weight:800;color:var(--text1);}
.home-module-card-count{font-size:11px;color:var(--text3);margin-top:2px;}
.home-module-options{display:flex;flex-direction:column;gap:8px;}
.home-module-option{display:flex;align-items:center;gap:10px;padding:9px 12px;
border-radius:9px;background:var(--surface2);color:var(--text1);font-size:12px;
font-weight:600;transition:all .15s;border:1px solid transparent;}
.home-module-option:hover{background:var(--surface);border-color:var(--purple1);color:var(--purple1);}
.home-module-option-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0;}
.home-module-option-label{flex:1;}
.home-module-option-arrow{font-size:10px;opacity:.4;margin-left:auto;}
.home-module-card-footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
font-size:10px;color:var(--text3);display:flex;align-items:center;gap:4px;}
/* ── Sidebar: item-wrap para hover expand ── */
.sb-item-wrap{position:relative;}
/* ══════════════════════════════════════════════════════════
SIDEBAR 2.0: Icon-only + Hover Flyout + Collapsible
Se agrega sobre las variables existentes
══════════════════════════════════════════════════════════ */
/* Ancho del sidebar: icono solo */
:root {
--sb2-icon-w: 64px;
--sb2-expand-w: 210px;
}
/* ── Contenedor principal ── */
.sidebar {
width: var(--sb2-icon-w) !important;
height: 100vh;
background: var(--sidebar);
display: flex;
flex-direction: column;
position: fixed;
left: 0; top: 0; bottom: 0;
z-index: 200;
overflow: visible !important; /* CLAVE: para que flyout salga fuera */
transition: width .25s cubic-bezier(.4,0,.2,1);
}
/* Modo expandido */
.sidebar.sb2-expanded {
width: var(--sb2-expand-w) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* ── Main: ajuste de margen ── */
.main {
margin-left: var(--sb2-icon-w) !important;
transition: margin-left .25s cubic-bezier(.4,0,.2,1) !important;
}
.sidebar.sb2-expanded ~ .main {
margin-left: var(--sb2-expand-w) !important;
}
/* ── Header del sidebar ── */
.sb2-header {
display: flex;
align-items: center;
padding: 10px 8px;
gap: 6px;
flex-shrink: 0;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.sb2-brand {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
overflow: hidden;
flex: 1;
}
.sb2-logo-img {
width: 32px; height: 32px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid rgba(255,255,255,.3);
}
.sb2-brand-name {
font-size: 12px; font-weight: 800;
color: #fff; white-space: nowrap;
line-height: 1.2;
opacity: 0;
width: 0;
overflow: hidden;
transition: opacity .2s, width .2s;
}
.sb2-brand-name small {
font-size: 10px; font-weight: 400;
color: rgba(255,255,255,.5);
display: block;
}
.sidebar.sb2-expanded .sb2-brand-name {
opacity: 1; width: auto;
}
/* Botón toggle */
.sb2-toggle-btn {
width: 26px; height: 26px;
border-radius: 7px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.15);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background .15s;
}
.sb2-toggle-btn:hover { background: rgba(255,255,255,.22); }
.sb2-toggle-btn svg { transition: transform .25s; }
.sidebar.sb2-expanded .sb2-toggle-btn svg { transform: rotate(180deg); }
/* ── Ítem del sidebar ── */
.sb2-item {
position: relative; /* para anclar el flyout */
}
/* ── Ícono (visible siempre) ── */
.sb2-icon {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
justify-content: center;
color: rgba(255,255,255,.7);
cursor: default;
border-left: 3px solid transparent;
transition: all .15s;
}
.sb2-icon:hover,
.sb2-item:hover > .sb2-icon {
background: rgba(255,255,255,.1);
color: #fff;
border-left-color: rgba(255,255,255,.4);
}
.sb2-icon svg { flex-shrink: 0; opacity: .75; }
.sb2-icon:hover svg,
.sb2-item:hover > .sb2-icon svg { opacity: 1; }
/* Texto label (visible solo en expandido) */
.sb2-label {
font-size: 12px; font-weight: 500;
white-space: nowrap;
opacity: 0;
width: 0; overflow: hidden;
transition: opacity .2s, width .2s;
color: rgba(255,255,255,.85);
}
.sidebar.sb2-expanded .sb2-label {
opacity: 1; width: auto;
}
.sidebar.sb2-expanded .sb2-icon {
justify-content: flex-start;
padding: 10px 14px;
cursor: pointer; /* v3.13: en modo expandido el icono es clickeable */
}
/* sobreescribir disabled: aun en expandido los disabled no son clickeables */
.sidebar.sb2-expanded .sb2-disabled .sb2-icon { cursor: default; }
/* ── FLYOUT: aparece al hover sobre el ítem ── */
.sb2-flyout {
position: absolute;
left: var(--sb2-icon-w);
top: 0;
min-width: 190px;
background: #1a0b36;
border: 1px solid rgba(255,255,255,.12);
border-left: 3px solid #7c3aed;
border-radius: 0 12px 12px 0;
box-shadow: 8px 4px 28px rgba(0,0,0,.45);
padding: 6px 0 8px;
z-index: 9999;
/* Por defecto: oculto */
pointer-events: none;
opacity: 0;
transform: translateX(-6px);
transition: opacity .18s ease, transform .18s ease;
}
/* Mostrar flyout al hover — SOLO cuando sidebar está colapsado */
.sidebar:not(.sb2-expanded) .sb2-item:hover > .sb2-flyout {
opacity: 1;
pointer-events: all;
transform: translateX(0);
}
/* En modo expandido: no mostrar flyout (el label ya es visible) */
.sidebar.sb2-expanded .sb2-flyout {
display: none !important;
}
.fly-title {
font-size: 10px; font-weight: 800;
text-transform: uppercase; letter-spacing: .06em;
color: #a78bfa;
padding: 4px 14px 8px;
border-bottom: 1px solid rgba(255,255,255,.08);
margin-bottom: 4px;
}
.fly-link {
display: flex; align-items: center; gap: 8px;
padding: 8px 14px;
color: rgba(255,255,255,.82);
font-size: 12px; font-weight: 500;
cursor: pointer;
transition: all .12s;
}
.fly-link:hover {
background: rgba(255,255,255,.1);
color: #fff;
padding-left: 20px;
}
.fly-link span { font-size: 15px; width: 20px; flex-shrink: 0; text-align: center; }
.fly-disabled {
opacity: .3; cursor: default; pointer-events: none;
font-style: italic;
}
/* ── Disabled item ── */
.sb2-disabled { opacity: .4; }
.sb2-disabled .sb2-icon { cursor: default; pointer-events: none; }
/* ── Usuario pie ── */
.sb2-user {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 8px;
cursor: pointer;
border-top: 1px solid rgba(255,255,255,.1);
transition: background .15s;
flex-shrink: 0;
overflow: hidden;
}
.sb2-user:hover { background: rgba(255,255,255,.08); }
.sb2-user-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: #7c3aed;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800; color: #fff;
flex-shrink: 0;
border: 2px solid rgba(255,255,255,.25);
}
.sb2-user-name {
font-size: 11px; font-weight: 600;
color: rgba(255,255,255,.85);
}
.animal-picker{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;margin-top:12px;}
.animal-picker-title{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:12px;}
.animal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px;}
.animal-opt{cursor:pointer;border-radius:50%;border:3px solid transparent;transition:all .2s;width:60px;height:60px;display:flex;align-items:center;justify-content:center;}
.animal-opt:hover{border-color:var(--purple2);transform:scale(1.08);}
.animal-opt.selected{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(167,139,250,.4);}
.animal-opt svg{width:54px;height:54px;border-radius:50%;}
.animal-picker-btn-wrap{display:flex;justify-content:flex-end;}
/* v3.0: card de foto de perfil (reemplaza al animal-picker) */
.foto-perfil-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;margin-top:14px;}
.foto-perfil-title{font-size:14px;font-weight:800;color:var(--text2);margin-bottom:14px;display:flex;align-items:center;gap:6px;}
.foto-perfil-body{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.foto-perfil-preview{
flex-shrink:0;width:140px;height:140px;border-radius:50%;
background:#f3f0ff;border:3px dashed #a78bfa;
display:flex;align-items:center;justify-content:center;overflow:hidden;
cursor:pointer;transition:.2s;position:relative;
}
.foto-perfil-preview:hover{border-color:#7c3aed;background:#ede9fe;transform:scale(1.02);}
.foto-perfil-preview img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.foto-perfil-preview::after{
content:'📷 Cambiar';position:absolute;bottom:0;left:0;right:0;
background:rgba(124,58,237,.92);color:#fff;font-size:11px;font-weight:700;
padding:6px 0;text-align:center;opacity:0;transition:opacity .2s;
}
.foto-perfil-preview:hover::after{opacity:1;}
.foto-perfil-controls{flex:1;min-width:240px;}
.foto-perfil-help{font-size:13px;color:var(--text2);line-height:1.5;margin-bottom:12px;}
.foto-perfil-btns{display:flex;gap:8px;flex-wrap:wrap;}
.user-dd-avatar-img{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.3);}
.dd-animal-wrap{width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
/* ────────────────────────────────────────────────────────────────────
v3.1: VIEW INFORMES — centro de reportes operativos
──────────────────────────────────────────────────────────────────── */
.informes-hero{
display:flex;align-items:center;gap:18px;
background:linear-gradient(135deg,#1e1b4b 0%,#3b0764 60%,#1e1b4b 100%);
border-radius:18px;padding:22px 26px;margin-bottom:22px;color:#fff;
box-shadow:0 12px 32px rgba(76,29,149,.25);
position:relative;overflow:hidden;
}
.informes-hero::before{
content:'';position:absolute;right:-40px;top:-40px;width:160px;height:160px;
background:radial-gradient(circle,rgba(167,139,250,.25),transparent 70%);border-radius:50%;
pointer-events:none;
}
.informes-hero-icon{font-size:38px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));}
.informes-hero-title{font-size:22px;font-weight:800;margin:0;line-height:1.2;}
.informes-hero-desc{font-size:13px;color:rgba(255,255,255,.78);margin:4px 0 0;line-height:1.45;}
.informes-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px;
}
.inf-card{
background:var(--surface);border-radius:16px;border:2px solid var(--border);
padding:18px 18px 16px;transition:.2s;position:relative;cursor:pointer;
box-shadow:0 2px 6px rgba(76,29,149,.05);
}
.inf-card:hover{border-color:var(--purple2);transform:translateY(-3px);
box-shadow:0 8px 18px rgba(124,58,237,.16);}
.inf-card-leaf{display:flex;flex-direction:column;gap:6px;min-height:170px;}
.inf-card-leaf .inf-card-icon-wrap{
width:50px;height:50px;border-radius:12px;display:flex;align-items:center;
justify-content:center;font-size:24px;color:#fff;margin-bottom:8px;
box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.inf-card-name{font-size:16px;font-weight:800;color:var(--text1);}
.inf-card-desc{font-size:12px;color:var(--text3);margin-top:2px;line-height:1.4;}
.inf-card-badge{
align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.5px;
padding:3px 10px;border-radius:10px;text-transform:uppercase;margin-top:auto;
}
.inf-badge-ok{background:#dcfce7;color:#15803d;}
.inf-badge-soon{background:#fef3c7;color:#92400e;}
.inf-card-group{cursor:default;}
.inf-card-group:hover{transform:none;}
.inf-card-group .inf-card-top{
display:flex;align-items:center;gap:12px;margin-bottom:14px;
padding-bottom:12px;border-bottom:1px dashed #e8e0f7;
}
.inf-card-group .inf-card-icon-wrap{
width:50px;height:50px;border-radius:12px;display:flex;align-items:center;
justify-content:center;font-size:24px;color:#fff;flex-shrink:0;
box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.inf-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;}
.inf-mini{
display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;
background:#faf5ff;border:1px solid #ede9fe;cursor:pointer;transition:.15s;
font-size:13px;font-weight:600;color:var(--text2);
}
.inf-mini:hover{background:#ede9fe;border-color:var(--purple2);color:var(--purple);transform:translateX(2px);}
.inf-mini-icon{font-size:16px;flex-shrink:0;}
.inf-mini-label{flex:1;}
.inf-mini-arrow{color:var(--text3);font-size:18px;font-weight:700;}
.inf-mini:hover .inf-mini-arrow{color:var(--purple);}
/* ══════════════════════════════════════════════════════════════════════════ */
/* Bloque en (líneas 4413-4476) */
/* ══════════════════════════════════════════════════════════════════════════ */
.rg-area-btn {
padding:4px 10px;border-radius:6px;border:1px solid var(--border);
background:var(--bg);font-size:11px;font-weight:600;cursor:pointer;
color:var(--text2);transition:all .15s;
}
.rg-area-btn:hover { background:#f5f3ff; }
.rg-area-btn.active {
background:var(--c, #5a2bb8); color:#fff; border-color:var(--c, #5a2bb8);
}
.rg-card {
background:var(--surface);border:1px solid var(--border);border-radius:14px;
padding:0;overflow:hidden;display:flex;flex-direction:column;
transition:transform .15s, box-shadow .15s;
}
.rg-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.rg-card-header {
padding:12px 16px;display:flex;align-items:center;gap:10px;color:#fff;
}
.rg-card-icon { font-size:22px; }
.rg-card-title { font-size:13px;font-weight:700;flex:1; }
.rg-card-body { padding:12px 16px;flex:1;display:flex;flex-direction:column;gap:10px; }
.rg-kpi {
display:flex;justify-content:space-between;align-items:baseline;
padding:6px 0;border-bottom:1px dashed var(--border);
}
.rg-kpi:last-child { border-bottom:none; }
.rg-kpi-label { font-size:11px;color:var(--text3); }
.rg-kpi-value { font-size:18px;font-weight:800;color:var(--text1); }
.rg-kpi-value.alert { color:#dc2626; }
.rg-kpi-value.warn { color:#ca8a04; }
.rg-tip {
background:#fffbeb;border-left:3px solid #f59e0b;border-radius:0 6px 6px 0;
padding:8px 10px;font-size:11px;color:#78350f;line-height:1.5;
}
.rg-card-footer {
padding:8px 16px;border-top:1px solid var(--border);background:#fafafa;
display:flex;justify-content:flex-end;
}
.rg-detalle-btn {
background:transparent;border:none;color:#5a2bb8;font-size:12px;font-weight:700;
cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s;
}
.rg-detalle-btn:hover { background:#ede9fe; }
.rg-area-titulo {
display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;
color:var(--text1);margin:18px 0 10px;padding-bottom:8px;
border-bottom:2px solid var(--border);
}
.rg-area-badge {
font-size:10px;font-weight:700;padding:2px 10px;border-radius:6px;
color:#fff;
}
.rg-grid-modulos {
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;
}
.rg-globales {
background:linear-gradient(135deg, var(--c1,#5a2bb8), var(--c2,#7c3aed));
color:#fff;border-radius:12px;padding:14px 18px;
}
.rg-globales-label { font-size:11px;font-weight:600;opacity:.9; }
.rg-globales-value { font-size:24px;font-weight:800;margin-top:4px; }
.rg-globales-sub { font-size:10px;opacity:.85;margin-top:2px; }
/* ══════════════════════════════════════════════════════════════════════════ */
/* Bloque en (líneas 5692-5695) */
/* ══════════════════════════════════════════════════════════════════════════ */
.cco-tab-active { color:#6b21a8;border-bottom-color:#6b21a8 !important; }
.cco-tab:hover { color:#6b21a8; }
/* ══════════════════════════════════════════════════════════════════════════ */
/* Bloque en (líneas 20884-20989) */
/* ══════════════════════════════════════════════════════════════════════════ */
/* v3.3.108: FAB debajo del header (espacio blanco), no encima del avatar */
#asistente-fab{position:fixed;right:24px;top:80px;width:44px;height:44px;border-radius:50%;
background:linear-gradient(135deg,#7c3aed 0%,#a78bfa 50%,#c4b5fd 100%);color:#fff;display:flex;
align-items:center;justify-content:center;font-size:22px;cursor:pointer;
box-shadow:0 4px 14px rgba(124,58,237,.45), 0 2px 6px rgba(0,0,0,.12);
z-index:2147483646;border:2px solid rgba(255,255,255,.4);
transition:all .25s cubic-bezier(.16,1,.3,1);}
#asistente-fab:hover{transform:scale(1.08);
box-shadow:0 8px 22px rgba(124,58,237,.55), 0 4px 10px rgba(0,0,0,.15);}
#asistente-fab.active{background:linear-gradient(135deg,#475569,#64748b);transform:rotate(90deg);}
#asistente-panel{position:fixed;right:24px;top:134px;width:400px;max-width:calc(100vw - 48px);
height:560px;max-height:calc(100vh - 160px);
background:rgba(255,255,255,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(0,0,0,.06);border-radius:22px;
box-shadow:0 24px 60px rgba(15,23,42,.18), 0 0 0 1px rgba(255,255,255,.5) inset;
z-index:2147483647;display:flex;flex-direction:column;overflow:hidden;
animation:asisteSlide .3s cubic-bezier(.16,1,.3,1);}
@keyframes asisteSlide{from{opacity:0;transform:translateY(-16px) scale(.96);}to{opacity:1;transform:none;}}
#asistente-panel[hidden]{display:none;}
.asi-head{background:linear-gradient(135deg,#6b21a8 0%,#7c3aed 60%,#a78bfa 100%);color:#fff;
padding:18px 20px;display:flex;align-items:center;gap:14px;position:relative;}
.asi-head::after{content:'';position:absolute;inset:0;
background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.15),transparent 50%);pointer-events:none;}
.asi-head-avatar{width:42px;height:42px;border-radius:50%;
background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.1));
display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
border:2px solid rgba(255,255,255,.35);box-shadow:0 4px 12px rgba(0,0,0,.1);}
.asi-head-meta{flex:1;min-width:0;position:relative;z-index:1;}
.asi-head-title{font-weight:700;font-size:15px;letter-spacing:-.01em;}
.asi-head-sub{font-size:11px;opacity:.88;margin-top:2px;font-weight:500;}
.asi-close{background:rgba(255,255,255,.18);color:#fff;border:none;width:30px;height:30px;
border-radius:50%;cursor:pointer;font-size:18px;line-height:1;position:relative;z-index:1;
transition:all .15s;display:flex;align-items:center;justify-content:center;}
.asi-close:hover{background:rgba(255,255,255,.32);transform:rotate(90deg);}
#asi-messages{flex:1;overflow-y:auto;padding:18px 16px 8px;display:flex;flex-direction:column;gap:12px;
background:linear-gradient(180deg,#faf8ff 0%,#f5f1fb 100%);}
#asi-messages::-webkit-scrollbar{width:6px;}
#asi-messages::-webkit-scrollbar-track{background:transparent;}
#asi-messages::-webkit-scrollbar-thumb{background:#d8d0ec;border-radius:3px;}
.asi-msg{padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.5;max-width:86%;
word-wrap:break-word;animation:asiMsgIn .25s ease;}
@keyframes asiMsgIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.asi-msg.bot{background:#fff;border:1px solid rgba(167,139,250,.18);
align-self:flex-start;border-bottom-left-radius:6px;color:#1e1333;
box-shadow:0 2px 10px rgba(107,33,168,.06);}
.asi-msg.user{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;
align-self:flex-end;border-bottom-right-radius:6px;
box-shadow:0 4px 12px rgba(124,58,237,.25);}
.asi-msg.bot b{color:#6b21a8;font-weight:700;}
.asi-msg-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.asi-msg-action{background:linear-gradient(135deg,#6b21a8,#7c3aed);color:#fff;border:none;
padding:7px 14px;border-radius:12px;font-size:12px;font-weight:600;cursor:pointer;
transition:all .15s;box-shadow:0 2px 8px rgba(107,33,168,.25);}
.asi-msg-action:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(107,33,168,.35);}
.asi-quick{padding:10px 12px 8px;border-top:1px solid rgba(0,0,0,.06);
background:rgba(255,255,255,.7);display:flex;gap:7px;overflow-x:auto;flex-wrap:nowrap;
scrollbar-width:thin;}
.asi-quick::-webkit-scrollbar{height:4px;}
.asi-quick::-webkit-scrollbar-thumb{background:#d8d0ec;border-radius:2px;}
.asi-quick-btn{background:#fff;color:#6b21a8;border:1px solid rgba(167,139,250,.3);
padding:7px 13px;border-radius:14px;font-size:12px;font-weight:500;cursor:pointer;
white-space:nowrap;flex-shrink:0;transition:all .15s;}
.asi-quick-btn:hover{background:#6b21a8;color:#fff;border-color:#6b21a8;transform:translateY(-1px);
box-shadow:0 3px 10px rgba(107,33,168,.25);}
.asi-input{display:flex;gap:8px;padding:12px 14px 14px;border-top:1px solid rgba(0,0,0,.06);
background:#fff;}
.asi-input input{flex:1;padding:11px 16px;border:1.5px solid #e5dff0;border-radius:22px;
font-size:13.5px;outline:none;background:#fafafa;color:#1e1333;transition:all .15s;}
.asi-input input:focus{border-color:#7c3aed;background:#fff;box-shadow:0 0 0 3px rgba(124,58,237,.12);}
.asi-input input::placeholder{color:#94889e;}
.asi-input button{background:linear-gradient(135deg,#6b21a8,#7c3aed);color:#fff;border:none;
width:42px;height:42px;border-radius:50%;font-size:18px;cursor:pointer;flex-shrink:0;
transition:all .15s;box-shadow:0 4px 12px rgba(107,33,168,.3);
display:flex;align-items:center;justify-content:center;}
.asi-input button:hover{transform:translateY(-1px) scale(1.05);box-shadow:0 6px 16px rgba(107,33,168,.4);}
.asi-typing{display:inline-flex;gap:4px;align-items:center;padding:2px 0;}
.asi-typing span{width:7px;height:7px;border-radius:50%;
background:linear-gradient(135deg,#7c3aed,#a78bfa);animation:asiBlink 1.4s infinite;}
.asi-typing span:nth-child(2){animation-delay:.2s;}
.asi-typing span:nth-child(3){animation-delay:.4s;}
@keyframes asiBlink{0%,80%,100%{opacity:.3;transform:scale(.7);}40%{opacity:1;transform:scale(1.1);}}
@media (max-width:520px){
#asistente-panel{right:8px;left:8px;width:auto;top:130px;height:calc(100vh - 150px);}
#asistente-fab{right:14px;top:76px;width:40px;height:40px;font-size:20px;}
}
/* Dark mode (si el portal lo tiene activado) */
@media (prefers-color-scheme:dark){
#asistente-panel{background:rgba(30,19,51,.95);border-color:rgba(255,255,255,.08);}
#asi-messages{background:linear-gradient(180deg,#1e1333 0%,#251b3d 100%);}
.asi-msg.bot{background:rgba(255,255,255,.06);border-color:rgba(167,139,250,.15);color:#e5dff0;}
.asi-msg.bot b{color:#c4b5fd;}
.asi-quick{background:rgba(30,19,51,.5);border-top-color:rgba(255,255,255,.06);}
.asi-quick-btn{background:rgba(255,255,255,.05);color:#c4b5fd;border-color:rgba(167,139,250,.2);}
.asi-input{background:rgba(30,19,51,.7);border-top-color:rgba(255,255,255,.06);}
.asi-input input{background:rgba(255,255,255,.05);color:#e5dff0;border-color:rgba(167,139,250,.2);}
}
/* ── Barra de scroll horizontal duplicada (.scrollx-top): que se VEA ───────
En macOS los scrollbars son overlay: se dibujan solo mientras alguien
scrollea, así que la barra de arriba quedaba invisible y no había manera de
saber que la tabla se podía correr a la derecha. Declarar ::-webkit-scrollbar
la saca del modo overlay y la deja siempre a la vista.
Aplica a todas las tablas anchas que ya usan el patrón (Conducta
Inapropiada, alertas por creación de servicios). */
.scrollx-top{scrollbar-width:thin;scrollbar-color:#94a3b8 var(--surface2);}
.scrollx-top::-webkit-scrollbar{height:12px;}
.scrollx-top::-webkit-scrollbar-track{background:var(--surface2);border-radius:6px;}
.scrollx-top::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:6px;border:2px solid var(--surface2);}
.scrollx-top::-webkit-scrollbar-thumb:hover{background:#64748b;}
/* ══════════════════════════════════════════════════════════════════════════
v3.4 — ÍCONOS «SEÑAL»
Los glifos del portal (sidebar, flyouts, tarjetillas del home, fichas de
Informes y mini-módulos) son SVG en línea de tres capas: cuerpo macizo al
16% de currentColor, contorno heredado y un acento en color de señal que
marca el evento que ese módulo vigila. El acento es lo único que se anima:
un solo gesto de ~600 ms al pasar el mouse. Reemplaza los emoji, que no se
podían recolorear y cambiaban de dibujo según el sistema operativo.
══════════════════════════════════════════════════════════════════════════ */
.pi-ic, .pi-em { display: block; flex-shrink: 0; }
/* El cuerpo y el contorno heredan el color del contenedor y se atenúan con él;
el acento no, por eso el SVG va sin opacity propia. */
.sb2-icon .pi-ic { opacity: 1; }
.fly-link span, .home-module-option-icon, .inf-mini-icon {
display: inline-flex; align-items: center; justify-content: center;
}
.inf-card-icon-wrap .pi-ic { margin: 0; }
.home-module-card-icon .pi-em { width: 84px; height: 84px; }
.informes-hero-icon { display: flex; align-items: center; filter: none; }
/* Banderines: una bandera monocroma no se lee, así que van planas. */
.pi-flag {
width: 18px; height: 12px; border-radius: 3px; display: inline-block;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); flex-shrink: 0;
}
/* ── Los trece gestos ── */
.pi-ic .pi-ac, .pi-em .pi-ac { transform-box: fill-box; transform-origin: 50% 50%; }
.pi-g-tilt .pi-ac { transform-origin: 50% 6%; }
.pi-g-rise .pi-ac { transform-origin: 50% 100%; }
.pi-g-open .pi-ac { transform-origin: 18% 100%; }
.pi-g-drop .pi-ac { transform-origin: 50% 0%; }
.pi-g-draw .pi-ac { stroke-dasharray: 90; }
@keyframes pi-pop{0%{transform:scale(1)}45%{transform:scale(1.34) rotate(-5deg)}100%{transform:scale(1)}}
@keyframes pi-pulse{0%,100%{transform:scale(1);opacity:1}40%{transform:scale(1.22);opacity:.55}}
@keyframes pi-slide{0%,100%{transform:translateX(0)}45%{transform:translateX(3.2px)}}
@keyframes pi-drop{0%{transform:translateY(-5px);opacity:0}60%{transform:translateY(1.2px);opacity:1}100%{transform:translateY(0)}}
@keyframes pi-rise{0%{transform:scaleY(.25)}70%{transform:scaleY(1.12)}100%{transform:scaleY(1)}}
@keyframes pi-tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-18deg)}65%{transform:rotate(11deg)}}
@keyframes pi-open{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-2.4px) rotate(14deg)}}
@keyframes pi-sweep{0%,100%{transform:translate(0,0)}45%{transform:translate(-2.6px,-2.6px)}}
@keyframes pi-flip{0%{transform:scaleX(1)}50%{transform:scaleX(.12)}100%{transform:scaleX(1)}}
@keyframes pi-draw{0%{stroke-dashoffset:90}100%{stroke-dashoffset:0}}
@keyframes pi-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes pi-scan{0%,100%{transform:translateY(-4px);opacity:.35}50%{transform:translateY(4px);opacity:1}}
@keyframes pi-beat{0%,100%{transform:scale(1)}30%{transform:scale(1.26)}55%{transform:scale(.94)}}
.sb2-item:hover .pi-g-pop .pi-ac,
.fly-link:hover .pi-g-pop .pi-ac,
.home-module-option:hover .pi-g-pop .pi-ac,
.inf-card:hover .pi-g-pop .pi-ac,
.inf-mini:hover .pi-g-pop .pi-ac,
.home-module-card:hover .pi-g-pop .pi-ac,
.informes-hero:hover .pi-g-pop .pi-ac {
animation: pi-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}
.sb2-item:hover .pi-g-pulse .pi-ac,
.fly-link:hover .pi-g-pulse .pi-ac,
.home-module-option:hover .pi-g-pulse .pi-ac,
.inf-card:hover .pi-g-pulse .pi-ac,
.inf-mini:hover .pi-g-pulse .pi-ac,
.home-module-card:hover .pi-g-pulse .pi-ac,
.informes-hero:hover .pi-g-pulse .pi-ac {
animation: pi-pulse .75s ease-in-out both;
}
.sb2-item:hover .pi-g-slide .pi-ac,
.fly-link:hover .pi-g-slide .pi-ac,
.home-module-option:hover .pi-g-slide .pi-ac,
.inf-card:hover .pi-g-slide .pi-ac,
.inf-mini:hover .pi-g-slide .pi-ac,
.home-module-card:hover .pi-g-slide .pi-ac,
.informes-hero:hover .pi-g-slide .pi-ac {
animation: pi-slide .6s ease-in-out both;
}
.sb2-item:hover .pi-g-drop .pi-ac,
.fly-link:hover .pi-g-drop .pi-ac,
.home-module-option:hover .pi-g-drop .pi-ac,
.inf-card:hover .pi-g-drop .pi-ac,
.inf-mini:hover .pi-g-drop .pi-ac,
.home-module-card:hover .pi-g-drop .pi-ac,
.informes-hero:hover .pi-g-drop .pi-ac {
animation: pi-drop .6s cubic-bezier(.34,1.56,.64,1) both;
}
.sb2-item:hover .pi-g-rise .pi-ac,
.fly-link:hover .pi-g-rise .pi-ac,
.home-module-option:hover .pi-g-rise .pi-ac,
.inf-card:hover .pi-g-rise .pi-ac,
.inf-mini:hover .pi-g-rise .pi-ac,
.home-module-card:hover .pi-g-rise .pi-ac,
.informes-hero:hover .pi-g-rise .pi-ac {
animation: pi-rise .6s cubic-bezier(.34,1.56,.64,1) both;
}
.sb2-item:hover .pi-g-tilt .pi-ac,
.fly-link:hover .pi-g-tilt .pi-ac,
.home-module-option:hover .pi-g-tilt .pi-ac,
.inf-card:hover .pi-g-tilt .pi-ac,
.inf-mini:hover .pi-g-tilt .pi-ac,
.home-module-card:hover .pi-g-tilt .pi-ac,
.informes-hero:hover .pi-g-tilt .pi-ac {
animation: pi-tilt .6s ease-in-out both;
}
.sb2-item:hover .pi-g-open .pi-ac,
.fly-link:hover .pi-g-open .pi-ac,
.home-module-option:hover .pi-g-open .pi-ac,
.inf-card:hover .pi-g-open .pi-ac,
.inf-mini:hover .pi-g-open .pi-ac,
.home-module-card:hover .pi-g-open .pi-ac,
.informes-hero:hover .pi-g-open .pi-ac {
animation: pi-open .6s ease-in-out both;
}
.sb2-item:hover .pi-g-sweep .pi-ac,
.fly-link:hover .pi-g-sweep .pi-ac,
.home-module-option:hover .pi-g-sweep .pi-ac,
.inf-card:hover .pi-g-sweep .pi-ac,
.inf-mini:hover .pi-g-sweep .pi-ac,
.home-module-card:hover .pi-g-sweep .pi-ac,
.informes-hero:hover .pi-g-sweep .pi-ac {
animation: pi-sweep .6s ease-in-out both;
}
.sb2-item:hover .pi-g-flip .pi-ac,
.fly-link:hover .pi-g-flip .pi-ac,
.home-module-option:hover .pi-g-flip .pi-ac,
.inf-card:hover .pi-g-flip .pi-ac,
.inf-mini:hover .pi-g-flip .pi-ac,
.home-module-card:hover .pi-g-flip .pi-ac,
.informes-hero:hover .pi-g-flip .pi-ac {
animation: pi-flip .7s ease-in-out both;
}
.sb2-item:hover .pi-g-draw .pi-ac,
.fly-link:hover .pi-g-draw .pi-ac,
.home-module-option:hover .pi-g-draw .pi-ac,
.inf-card:hover .pi-g-draw .pi-ac,
.inf-mini:hover .pi-g-draw .pi-ac,
.home-module-card:hover .pi-g-draw .pi-ac,
.informes-hero:hover .pi-g-draw .pi-ac {
animation: pi-draw .85s ease-in-out both;
}
.sb2-item:hover .pi-g-spin .pi-ac,
.fly-link:hover .pi-g-spin .pi-ac,
.home-module-option:hover .pi-g-spin .pi-ac,
.inf-card:hover .pi-g-spin .pi-ac,
.inf-mini:hover .pi-g-spin .pi-ac,
.home-module-card:hover .pi-g-spin .pi-ac,
.informes-hero:hover .pi-g-spin .pi-ac {
animation: pi-spin .9s cubic-bezier(.5,0,.2,1) both;
}
.sb2-item:hover .pi-g-scan .pi-ac,
.fly-link:hover .pi-g-scan .pi-ac,
.home-module-option:hover .pi-g-scan .pi-ac,
.inf-card:hover .pi-g-scan .pi-ac,
.inf-mini:hover .pi-g-scan .pi-ac,
.home-module-card:hover .pi-g-scan .pi-ac,
.informes-hero:hover .pi-g-scan .pi-ac {
animation: pi-scan 1.1s ease-in-out both;
}
.sb2-item:hover .pi-g-beat .pi-ac,
.fly-link:hover .pi-g-beat .pi-ac,
.home-module-option:hover .pi-g-beat .pi-ac,
.inf-card:hover .pi-g-beat .pi-ac,
.inf-mini:hover .pi-g-beat .pi-ac,
.home-module-card:hover .pi-g-beat .pi-ac,
.informes-hero:hover .pi-g-beat .pi-ac {
animation: pi-beat .6s ease-in-out both;
}
@media (prefers-reduced-motion: reduce) {
.pi-ic .pi-ac, .pi-em .pi-ac { animation: none !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
Editor rico del campo "Mensaje" de los modales de Enviar por email.
El