*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} :root{ --pu:#4C10D2;--pu2:#1E0759;--pu3:#2d0a8f;--tu:#98EEDC;--fu:#DE93FF; --wh:#fff;--bg:#080118;--card:rgba(30,7,89,0.8); --border:rgba(76,16,210,0.45);--border2:rgba(152,238,220,0.2); --green:#4ade80;--yellow:#fbbf24;--orange:#fb923c;--red:#f87171;--gray:#6b7280; --gr:#4ade80;--ye:#fbbf24;--or:#fb923c;--rd:#f87171; --r:14px;--p:14px; /* Sidebar/menú inferior (rediseño, global — vive FUERA de .rd-scope, ver más abajo para el resto de tokens --rd-*). Paleta clara por defecto; el toggle de tema (☀️/🌙 en el topbar, ver toggleTheme() en index.html) agrega/quita [data-theme] en — sin elección manual, cae al prefers-color-scheme real del navegador (ver los dos bloques oscuros más abajo, MISMOS valores que la variante oscura de .rd-scope para que sidebar y contenido combinen). */ --nav-surface:#ffffff;--nav-surface-2:#eee7fa;--nav-border:#dcd0f2; --nav-text:#20162f;--nav-text-muted:#6c5e88;--nav-brand:#6d28d9; --nav-shadow:0 1px 2px rgba(32,22,47,.06), 0 8px 24px -12px rgba(76,29,149,.18); /* Fondo de toda la app (Tanda 3): mismo valor que --rd-bg para que el armazón (header/sidebar/fondo) y el contenido sean UNA sola superficie, en vez de tarjetas claras flotando sobre el degradado oscuro viejo. */ --app-bg:#f5f2fb; --app-ring:rgba(109,40,217,.18); --hdr-h:56px; } @media (prefers-color-scheme: dark){ html:not([data-theme]){ --nav-surface:#1e1638; --nav-surface-2:#271d47; --nav-border:#3a2d63; --nav-text:#f1ecfb; --nav-text-muted:#ac9cd0; --nav-brand:#a78bfa; --nav-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5); --app-bg:#160f26; --app-ring:rgba(167,139,250,.28); } } html[data-theme="dark"]{ --nav-surface:#1e1638; --nav-surface-2:#271d47; --nav-border:#3a2d63; --nav-text:#f1ecfb; --nav-text-muted:#ac9cd0; --nav-brand:#a78bfa; --nav-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5); --app-bg:#160f26; --app-ring:rgba(167,139,250,.28); } html{scroll-behavior:smooth} body{font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--app-bg);color:var(--nav-text);min-height:100vh;overflow-x:hidden; -webkit-font-smoothing:antialiased} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--nav-border);border-radius:8px} ::-webkit-scrollbar-thumb:hover{background:var(--nav-text-muted)} /* ─ HEADER (Tanda 3: misma superficie clara/oscura que el sidebar; el degradado morado viejo se retiró para que el armazón sea uno solo) ─ */ .hdr{background:var(--nav-surface);color:var(--nav-text); min-height:var(--hdr-h);padding:8px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px; border-bottom:1px solid var(--nav-border);position:sticky;top:0;z-index:200; font-family:"IBM Plex Sans",sans-serif} .logo-w{display:flex;align-items:center;gap:9px} .logo-svg{width:32px;height:32px;flex-shrink:0} .logo-tx{font-family:"Sora",sans-serif;font-size:19px;font-weight:800;letter-spacing:2px;color:var(--nav-text)} .logo-tx em{color:var(--nav-brand);font-style:normal} .hdr-r{text-align:right;line-height:1.35} .hdr-date{font-size:.72rem;color:var(--nav-text);font-weight:600} .hdr-date::first-letter{text-transform:uppercase} .hdr-sub{font-size:.7rem;color:var(--nav-text-muted)} .hbtn{background:var(--nav-surface-2);border:1px solid var(--nav-border);color:var(--nav-text); width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:15px;flex-shrink:0; display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s} .hbtn:hover{border-color:var(--nav-brand);background:var(--nav-surface)} .hbtn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-ring)} @media (max-width:480px){ .hdr{padding:8px 12px} .hdr-date{display:none}.hdr-sub{font-size:.66rem} .hbtn{width:32px;height:32px} } /* ─ BDAY BANNER ─ */ .bday{background:var(--nav-surface); border:1px solid var(--nav-border);border-left:4px solid var(--nav-brand);border-radius:12px; margin:12px 22px 0;padding:11px 14px;box-shadow:var(--nav-shadow); display:none;align-items:center;gap:10px} .bday.show{display:flex} .bday-info{flex:1;min-width:0} .bday-name{font-size:13px;font-weight:700;color:var(--nav-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bday-sub{font-size:11px;color:var(--nav-text-muted)} .bday-btn{padding:8px 14px;background:var(--nav-brand);color:#fff;border:none; border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0} /* ─ EDITLOCK BANNER (Modo Solo Lectura) ─ */ .editlock{background:linear-gradient(135deg,rgba(251,191,36,0.14),rgba(217,119,6,0.12)); border:1px solid rgba(251,191,36,0.4);border-radius:12px; margin:8px var(--p);padding:11px 14px; display:none;align-items:center;gap:10px;flex-wrap:wrap} .editlock-info{flex:1;min-width:160px} .editlock-title{font-size:13px;font-weight:800;color:var(--yellow);display:flex;align-items:center;gap:4px} .editlock-sub{font-size:11px;color:rgba(255,255,255,0.55);margin-top:2px} .editlock input{width:auto;min-width:130px;max-width:160px;padding:8px 10px;font-size:12px} .editlock-btn{padding:8px 14px;background:var(--yellow);color:#3a2600;border:none; border-radius:9px;font-size:12px;font-weight:800;cursor:pointer;flex-shrink:0;white-space:nowrap} /* ─ NAV ─ */ .nav{padding:8px var(--p) 0;overflow-x:auto;display:flex;gap:5px;scrollbar-width:none} .nav::-webkit-scrollbar{display:none} .nb{padding:8px 14px;border-radius:20px;border:1.5px solid var(--border); background:rgba(30,7,89,0.45);color:rgba(255,255,255,0.6);font-size:11.5px; font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap;flex-shrink:0} .nb.on{background:var(--pu);border-color:var(--tu);color:#fff} .nb:hover:not(.on){border-color:var(--fu);color:var(--fu)} /* ─ MAIN ─ */ .main{padding:18px 22px 90px} @media (max-width:600px){.main{padding:12px 12px 90px}} .sec{display:none}.sec.on{display:block} .tab-c{display:none}.tab-c.on{display:block} /* ─ CARDS ─ */ .card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:var(--p);margin-bottom:11px;backdrop-filter:blur(6px)} .card2{background:rgba(152,238,220,0.04);border:1px solid var(--border2);border-radius:var(--r);padding:var(--p);margin-bottom:11px} .ct{font-size:11.5px;font-weight:700;color:var(--fu);text-transform:uppercase;letter-spacing:.9px;margin-bottom:11px;display:flex;align-items:center;gap:6px} /* ─ GRIDS ─ */ .g2{display:grid;grid-template-columns:1fr 1fr;gap:9px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} @media(max-width:580px){.g4{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}} @media(max-width:380px){.g2{grid-template-columns:1fr}} /* ─ KPI ─ */ .kpi{background:rgba(14,3,46,0.9);border:1px solid var(--border);border-radius:12px;padding:13px 10px;text-align:center} .kv{font-size:19px;font-weight:800;color:var(--tu);line-height:1.1} .kv.fu{color:var(--fu)}.kv.gr{color:var(--green)}.kv.ye{color:var(--yellow)} .kl{font-size:10px;color:rgba(255,255,255,0.48);margin-top:3px;line-height:1.3} .ks{font-size:9.5px;color:rgba(152,238,220,0.55);margin-top:2px} /* ─ FORMS ─ */ label{font-size:12px;color:rgba(255,255,255,0.58);display:block;margin-bottom:4px;font-weight:500} input,select,textarea{width:100%;padding:10px 12px;background:rgba(76,16,210,0.1); border:1.5px solid var(--border);border-radius:9px;color:#fff;font-size:14px; outline:none;transition:border .18s;-webkit-appearance:none;appearance:none} input:focus,select:focus,textarea:focus{border-color:var(--tu);background:rgba(76,16,210,0.18)} input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 3px var(--app-ring)} select option{background:#1E0759;color:#fff} textarea{resize:vertical;min-height:65px} .fr{margin-bottom:11px} .fg{display:grid;grid-template-columns:1fr 1fr;gap:9px} @media(max-width:440px){.fg{grid-template-columns:1fr}} /* ─ BUTTONS ─ */ .btn{padding:11px 18px;border-radius:10px;border:none;font-size:13px;font-weight:700; cursor:pointer;transition:all .18s;display:inline-flex;align-items:center; gap:6px;justify-content:center;width:100%} .bp{background:linear-gradient(135deg,#4C10D2,#6520e8);color:#fff} .bp:hover{background:linear-gradient(135deg,#5a1ef0,#7530f8);transform:translateY(-1px)} .btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-ring)} .btn:active{transform:translateY(0) scale(.99)} .bs{background:linear-gradient(135deg,#0a6b51,#18a07a);color:#fff} .bw{background:linear-gradient(135deg,#8b25b5,#b83ce0);color:#fff} .bd{background:linear-gradient(135deg,#881717,#c01f1f);color:#fff} .bo{background:transparent;border:1.5px solid var(--border);color:rgba(255,255,255,0.65)} .bsm{padding:7px 13px;font-size:11px;border-radius:8px;width:auto} .br{display:flex;gap:8px;margin-top:11px} .br .btn{flex:1} /* ─ RESULT BOX ─ */ .rb{background:rgba(152,238,220,0.05);border:1px solid var(--border2);border-radius:11px;padding:13px} .rr{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.05)} .rr:last-child{border:none;padding-bottom:0} .rl{font-size:12px;color:rgba(255,255,255,0.5)} .rv{font-size:13px;font-weight:700;color:var(--tu)} .rv.fu{color:var(--fu)}.rv.gr{color:var(--green)}.rv.rd{color:var(--red)} /* ─ BADGES ─ */ .badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:11px;font-size:11px;font-weight:700;gap:3px} .b-pt{background:rgba(94,234,212,0.18);color:#5eead4;border:1px solid rgba(94,234,212,0.35)} .b-go{background:rgba(251,191,36,0.18);color:#fbbf24;border:1px solid rgba(251,191,36,0.35)} .b-si{background:rgba(148,163,184,0.18);color:#94a3b8;border:1px solid rgba(148,163,184,0.35)} .b-br{background:rgba(217,119,6,0.18);color:#d97706;border:1px solid rgba(217,119,6,0.35)} .b-nu{background:rgba(107,114,128,0.22);color:#9ca3af;border:1px solid rgba(107,114,128,0.35)} /* ─ DOTS ─ */ .dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0} .dg{background:var(--green);box-shadow:0 0 6px var(--green)} .dy{background:var(--yellow);box-shadow:0 0 6px var(--yellow)} .do{background:var(--orange);box-shadow:0 0 6px var(--orange)} .dr{background:var(--red);box-shadow:0 0 6px var(--red)} .dk{background:var(--gray)} /* ─ LIST ROWS ─ */ .lr{display:flex;align-items:center;gap:8px;padding:10px 12px; background:rgba(76,16,210,0.08);border:1px solid rgba(76,16,210,0.22); border-radius:10px;margin-bottom:7px;cursor:pointer;transition:all .18s} .lr:hover{border-color:var(--border2);background:rgba(152,238,220,0.04)} .lr-l{flex:1;min-width:0} .lr-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lr-sub{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px} .lr-r{text-align:right;flex-shrink:0} .lr-amt{font-size:14px;font-weight:800;color:var(--tu)} .lr-d{font-size:10px;color:rgba(255,255,255,0.33);margin-top:2px} /* ─ PAR BARS ─ */ .par-w{display:flex;align-items:center;gap:8px;margin-bottom:7px} .par-lb{font-size:11px;color:rgba(255,255,255,0.5);min-width:74px} .par-tr{flex:1;background:rgba(76,16,210,0.18);border-radius:4px;height:11px;overflow:hidden} .par-fi{height:100%;border-radius:4px;display:flex;align-items:center;padding-left:4px;font-size:9px;font-weight:700;color:#fff;transition:width .7s} /* ─ CHART WRAP ─ */ .cw{position:relative;height:190px;width:100%;margin-top:8px} .cw.lg{height:230px}.cw.xl{height:260px} /* ─ INNER TABS ─ */ .itabs{display:flex;gap:5px;margin-bottom:11px;flex-wrap:wrap} .itab{padding:7px 14px;font-size:11.5px;font-weight:600;cursor:pointer;border-radius:8px; color:rgba(255,255,255,0.48);border:1.5px solid transparent;background:rgba(76,16,210,0.1);transition:all .18s} .itab.on{background:rgba(76,16,210,0.45);color:#fff;border-color:var(--border)} /* ─ MODAL ─ */ /* Rediseño (Tanda 2): los modales (dyn-modal/m-cli/m-loan/m-ticket) viven FUERA de cualquier .sec, así que .rd-scope nunca los alcanza — se reusan los tokens --nav-* (mismos que el sidebar, ya con variante clara/ oscura vía el toggle ☀️/🌙 y el prefers-color-scheme automático) en vez de crear un juego de tokens nuevo. Esto reestiliza TODO lo que se abre en el modal compartido (editar cliente/crédito, Configuración, Usuarios, Sorteo, Inversionistas, Gastos/Capital), no solo Configuración. */ .mbg{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:300; display:none;align-items:flex-end;justify-content:center} .mbg.open{display:flex} @media(min-width:600px){.mbg{align-items:center}} .modal{background:var(--nav-surface);color:var(--nav-text); border:1px solid var(--nav-border);border-radius:20px 20px 0 0; width:100%;max-width:550px;max-height:92vh;overflow-y:auto;padding:18px var(--p) 28px} @media(min-width:600px){.modal{border-radius:20px;max-height:88vh}} .mttl{font-size:15px;font-weight:800;color:var(--nav-brand);margin-bottom:14px; display:flex;align-items:center;justify-content:space-between} .mcl{background:var(--nav-surface-2);border:1px solid var(--nav-border); color:var(--nav-text-muted);width:28px;height:28px;border-radius:50%; cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;border:none} .modal label{color:var(--nav-text-muted);} .modal input, .modal select, .modal textarea{ background:var(--nav-surface-2);border-color:var(--nav-border);color:var(--nav-text); } .modal select option{background:var(--nav-surface);color:var(--nav-text);} .modal input:focus, .modal select:focus, .modal textarea:focus{border-color:var(--nav-brand);background:var(--nav-surface);} .modal .card, .modal .card2{background:var(--nav-surface-2);border-color:var(--nav-border);} .modal .ct{color:var(--nav-text);} .modal .rb{background:var(--nav-surface-2);border-color:var(--nav-border);} .modal .rr{border-bottom-color:var(--nav-border);} .modal .rl{color:var(--nav-text-muted);} .modal .rv{color:var(--nav-text);} .modal .rv.gr{color:var(--green);} .modal .rv.fu{color:var(--fu);} .modal .rv.rd{color:var(--red);} .modal .metric-note{color:var(--nav-text-muted);} .modal .stitle{color:var(--nav-text);} .modal .ctbl th{background:var(--nav-surface-2); color:var(--nav-text-muted); font-weight:700;} .modal .ctbl td{border-bottom-color:var(--nav-border); color:var(--nav-text);} .modal .ava{background:var(--nav-surface-2); color:var(--nav-brand);} /* ─ TICKET ─ */ .ticket{background:#fff;color:#111;border-radius:11px;padding:16px;font-size:11.5px;line-height:1.85} .th{text-align:center;border-bottom:2px dashed #4C10D2;padding-bottom:9px;margin-bottom:9px} .t-logo{font-size:19px;font-weight:900;color:#4C10D2;letter-spacing:3px} .t-sub{font-size:9px;color:#555;margin-top:2px} .trow{display:flex;justify-content:space-between;padding:1.5px 0} .tsep{border:none;border-top:1px dashed #bbb;margin:6px 0} .t-total{font-weight:800;color:#4C10D2;font-size:13px} /* ─ AI MSGS ─ */ .ai{border-radius:0 11px 11px 0;padding:11px 13px;margin-bottom:9px;font-size:12px;line-height:1.7;color:rgba(255,255,255,0.85)} .ai-al{background:rgba(239,68,68,0.07);border-left:3px solid #ef4444} .ai-ok{background:rgba(152,238,220,0.05);border-left:3px solid var(--tu)} .ai-pr{background:rgba(222,147,255,0.05);border-left:3px solid var(--fu)} .ai-in{background:rgba(76,16,210,0.12);border-left:3px solid var(--pu)} .ai strong{font-size:13px;display:block;margin-bottom:4px} /* ─ CRONO TABLE ─ */ .ctbl{width:100%;border-collapse:collapse;font-size:11px} .ctbl th{background:rgba(76,16,210,0.4);padding:7px 7px;text-align:left;font-size:10px;color:rgba(255,255,255,0.65)} .ctbl td{padding:5px 7px;border-bottom:1px solid rgba(255,255,255,0.05)} .ctbl tr:hover td{background:rgba(76,16,210,0.1)} /* ─ SCORE TABLE ─ */ .stbl{width:100%;border-collapse:collapse;font-size:12px} .stbl th{padding:8px 9px;text-align:left;font-size:10.5px;color:rgba(255,255,255,0.48);border-bottom:1px solid var(--border)} .stbl td{padding:8px 9px;border-bottom:1px solid rgba(255,255,255,0.04)} .stbl tr:hover td{background:rgba(76,16,210,0.1)} /* ─ LIQUIDITY ─ */ .lrow{display:flex;justify-content:space-between;align-items:center; padding:8px 11px;background:rgba(14,3,46,0.7);border-radius:8px;margin-bottom:6px} .ll{font-size:12px;color:rgba(255,255,255,0.52)} .lv{font-size:14px;font-weight:800} .le{color:var(--tu)}.li{color:var(--fu)}.lg2{color:var(--green)}.lo{color:var(--red)}.ln{color:var(--yellow)} /* ─ PROG BAR ─ */ .prog{background:rgba(76,16,210,0.18);border-radius:4px;height:5px;overflow:hidden;margin-top:5px} .prog-f{height:100%;border-radius:4px;transition:width .5s} /* ─ AVATAR ─ */ .ava{width:40px;height:40px;border-radius:50%;background:rgba(76,16,210,0.45); display:flex;align-items:center;justify-content:center;font-weight:800; color:var(--tu);flex-shrink:0;font-size:14px} /* ─ EMPTY ─ */ .empty{text-align:center;padding:26px 16px;color:rgba(255,255,255,0.28);font-size:13px; border:1px dashed var(--nav-border);border-radius:12px} .empty-ico{font-size:30px;margin-bottom:8px;opacity:.8} /* ─ TOAST ─ */ .toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%); background:var(--nav-text);color:var(--nav-surface);padding:11px 18px;border-radius:12px; font-size:13px;font-weight:600;border:none;z-index:500; display:none;white-space:normal;max-width:88vw;text-align:center; box-shadow:0 10px 30px -8px rgba(0,0,0,.45);font-family:"IBM Plex Sans",sans-serif} /* ─ FAB (Tanda 3: en escritorio es una píldora con texto — se entiende a la primera qué hace; en móvil vuelve al círculo "+" clásico) ─ */ .fab{position:fixed;bottom:22px;right:22px;height:48px;padding:0 18px 0 14px; background:linear-gradient(135deg,var(--pu),#6520e8);border:none; border-radius:999px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;z-index:150; box-shadow:0 8px 22px -6px rgba(76,16,210,.65);display:flex;align-items:center;gap:8px; justify-content:center;transition:transform .18s,box-shadow .18s;font-family:"IBM Plex Sans",sans-serif;white-space:nowrap} .fab::before{content:"＋";font-size:22px;line-height:1;font-weight:400} .fab:hover{transform:translateY(-2px);box-shadow:0 12px 26px -6px rgba(76,16,210,.7)} .fab:focus-visible{outline:none;box-shadow:0 0 0 4px var(--app-ring)} @media (max-width:600px){ .fab{width:52px;height:52px;padding:0;border-radius:50%;font-size:0} .fab::before{font-size:26px} } /* ─ PERIOD SELECTOR ─ */ .period-btn{padding:5px 11px;border-radius:14px;border:1.5px solid var(--bdr);background:rgba(28,6,84,.4);color:rgba(255,255,255,.55);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap} .period-btn.on{background:var(--pu);border-color:var(--tu);color:#fff} .period-btn:hover:not(.on){border-color:var(--fu);color:var(--fu)} /* ─ SEARCH ─ */ .sw{position:relative;margin-bottom:11px} .sw input{padding-left:36px} .si{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:15px;color:rgba(255,255,255,0.38)} /* ─ ACTION GRID ─ */ .ag{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px} /* ─ SECTION TITLE ─ */ .stitle{font-size:14px;font-weight:800;margin-bottom:12px;color:var(--wh);display:flex;align-items:center;gap:8px} /* ─ EXPORT ROW ─ */ .exprow{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap} .exprow .btn{flex:1;min-width:120px} /* ─ COBRANZA COMPAT ─ */ .lr-n{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lr-s{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px} .empty-i{font-size:30px;margin-bottom:7px;display:block} .dg{background:var(--green);box-shadow:0 0 5px var(--green)} .dy{background:var(--yellow);box-shadow:0 0 5px var(--yellow)} .do{background:var(--orange);box-shadow:0 0 5px var(--orange)} .dr{background:var(--red);box-shadow:0 0 5px var(--red)} .dk{background:var(--gray)} /* ─ ANALÍTICA PRO ─ */ .metric-note{font-size:10px;color:rgba(255,255,255,.35);margin-top:8px;line-height:1.5;font-style:italic} .kpi-mini{background:rgba(14,3,46,.85);border:1px solid var(--bdr);border-radius:10px;padding:11px 8px;text-align:center} .kpi-mini .kv{font-size:16px} .age-row{display:flex;align-items:center;gap:8px;margin-bottom:7px} .age-lbl{font-size:11px;color:rgba(255,255,255,.5);min-width:110px} .age-track{flex:1;background:rgba(76,16,210,.18);border-radius:4px;height:12px;overflow:hidden} .age-fill{height:100%;border-radius:4px;display:flex;align-items:center;padding-left:5px;font-size:9px;font-weight:700;color:#fff;transition:width .6s;background:linear-gradient(90deg,var(--pu),var(--fu))} .val-highlight{background:rgba(152,238,220,.08);border:1px solid var(--bdr2);border-radius:10px;padding:14px;text-align:center;margin-bottom:8px} .val-highlight .vv{font-size:22px;font-weight:900;color:var(--tu)} .val-highlight .vl{font-size:11px;color:rgba(255,255,255,.5);margin-top:4px} /* ─ LOCK SCREEN (LOGIN / SETUP) ─ */ .lock-screen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center; padding:20px;background:radial-gradient(ellipse at 20% 0%,rgba(76,16,210,.35),transparent 55%), radial-gradient(ellipse at 80% 100%,rgba(152,238,220,.12),transparent 55%), linear-gradient(150deg,#1E0759 0%,#080118 70%); transition:opacity .3s,visibility .3s} .lock-screen.hidden{opacity:0;visibility:hidden;pointer-events:none} .lock-card{width:100%;max-width:340px;background:rgba(28,6,84,.9);border:1px solid var(--bdr2); border-radius:18px;padding:26px 22px;backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.5); text-align:center} .lock-title{font-size:24px;font-weight:900;letter-spacing:2px;color:#fff;margin-bottom:2px} .lock-title em{color:var(--tu);font-style:normal} .lock-sub{font-size:11px;color:rgba(222,147,255,.7);margin-bottom:18px} .lock-view .fr{text-align:left} .lock-msg{font-size:12.5px;color:rgba(255,255,255,.65);margin-bottom:14px;line-height:1.5} .lock-note{font-size:10px;color:rgba(255,255,255,.35);margin-top:14px;line-height:1.6} .lock-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#f87171; font-size:11.5px;font-weight:600;padding:8px 10px;border-radius:8px;margin-bottom:10px} /* Migración a MySQL en curso: aviso en pantallas cuyas acciones de guardado todavía no persisten en la base de datos (ver public/js/store.js). */ .migracion-nota{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.35);color:var(--ye); font-size:11px;font-weight:600;padding:8px 10px;border-radius:8px;margin-top:8px} /* ─ REGISTRO DE ACTIVIDAD — primera pieza del sistema de diseño nuevo (Sora + IBM Plex Sans), escapada bajo .ra-* con sus propios custom properties para no chocar con el tema oscuro del resto de la app todavía sin rediseñar. El resto de pantallas se migran después, en el orden acordado (Dashboard → Clientes/Créditos/Cobranza → resto). */ .ra-panel{ --ra-surface:#ffffff; --ra-surface-2:#eee7fa; --ra-border:#dcd0f2; --ra-text:#20162f; --ra-text-muted:#6c5e88; --ra-brand:#6d28d9; --ra-radius:14px; --ra-shadow:0 1px 2px rgba(32,22,47,.06), 0 8px 24px -12px rgba(76,29,149,.18); background:var(--ra-surface); border:1px solid var(--ra-border); border-radius:var(--ra-radius); box-shadow:var(--ra-shadow); overflow:hidden; font-family:"IBM Plex Sans",sans-serif; color:var(--ra-text); margin-top:11px; } .ra-panel-head{padding:14px 16px 10px; display:flex; align-items:baseline; justify-content:space-between; gap:10px;} .ra-panel-head h3{font-family:"Sora",sans-serif; font-size:.92rem; font-weight:700; margin:0;} .ra-panel-head .ra-hint{font-size:.7rem; color:var(--ra-text-muted);} .ra-panel-body{padding:4px 16px 16px;} .ra-list{display:flex; flex-direction:column;} .ra-item{display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-bottom:1px dashed var(--ra-border);} .ra-item:last-child{border-bottom:none;} .ra-avatar{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:700; color:#fff; background:var(--ra-brand); } .ra-avatar.sys{background:var(--ra-surface-2); color:var(--ra-text-muted); font-size:.9rem;} .ra-main{flex:1 1 auto; min-width:0;} .ra-line{display:flex; align-items:baseline; gap:5px; flex-wrap:wrap;} .ra-actor{font-weight:700; font-size:.82rem;} .ra-role{font-size:.7rem; color:var(--ra-text-muted);} .ra-action{font-size:.8rem; color:var(--ra-text-muted); margin-top:2px; line-height:1.4;} .ra-action b{color:var(--ra-text); font-weight:600;} .ra-time{ flex:0 0 auto; font-size:.68rem; color:var(--ra-text-muted); white-space:nowrap; padding-top:2px; font-variant-numeric:tabular-nums; } .ra-empty{font-size:.82rem; color:var(--ra-text-muted); padding:16px; text-align:center;} /* ══════════════════════════════════════════════════════════════════════ REDISEÑO — Dashboard (paso 1 del orden acordado: Dashboard, Clientes, Creditos, Cobranza, resto). Sistema de diseno nuevo (Sora + IBM Plex Sans, paleta clara con soporte oscuro) aplicado SOBRE el contenido y widgets reales que ya existen (incluye los graficos Chart.js — ver chartColores()/chartFont() en index.html), sin quitar ni ocultar ningun widget. Escapado bajo .rd-scope para no tocar ninguna otra pantalla todavia sin rediseñar (que sigue con el tema oscuro viejo) — mismas clases globales (.card, .kpi, .badge, etc.), solo reestilizadas cuando viven dentro del Dashboard. ══════════════════════════════════════════════════════════════════════ */ .rd-scope{ --rd-bg:#f5f2fb; --rd-surface:#ffffff; --rd-surface-2:#eee7fa; --rd-border:#dcd0f2; --rd-text:#20162f; --rd-text-muted:#6c5e88; --rd-brand:#6d28d9; --rd-brand-ink:#ffffff; --rd-brand-2:#4c1d95; --rd-gold:#a9700c; --rd-gold-soft:#f6e6c8; --rd-success:#187a53; --rd-success-soft:#dcf3e7; --rd-warning:#a3690a; --rd-warning-soft:#f7e8cf; --rd-danger:#b0203f; --rd-danger-soft:#f9dde3; --rd-platino:#3a5a9c; --rd-platino-soft:#e4ebfa; --rd-plata:#5b6472; --rd-plata-soft:#e7eaef; --rd-bronce:#8a5a2e; --rd-bronce-soft:#f3e2cf; --rd-radius:14px; --rd-shadow:0 1px 2px rgba(32,22,47,.06), 0 8px 24px -12px rgba(76,29,149,.18); container-type:inline-size; /* Tanda 3: el fondo lo pone ahora el (--app-bg, mismo valor), así que la pantalla ya no es una "tarjeta grande" flotando: es la página. */ background:transparent; padding:0; border-radius:0; margin:0 auto; max-width:1240px; color:var(--rd-text); } /* Oscuro: si el usuario NUNCA tocó el toggle (☀️/🌙 en el topbar), cae al prefers-color-scheme real del navegador — esto es justo lo que causaba que la app se viera distinta entre navegadores (cada uno reporta su propia preferencia de sistema). Con el toggle, fuerza este mismo bloque sin importar el navegador/SO. */ @media (prefers-color-scheme: dark){ html:not([data-theme]) .rd-scope{ --rd-bg:#160f26; --rd-surface:#1e1638; --rd-surface-2:#271d47; --rd-border:#3a2d63; --rd-text:#f1ecfb; --rd-text-muted:#ac9cd0; --rd-brand:#a78bfa; --rd-brand-ink:#1a1030; --rd-brand-2:#8457f0; --rd-gold:#e3ac47; --rd-gold-soft:#3a2c13; --rd-success:#49c78a; --rd-success-soft:#123324; --rd-warning:#e3b04a; --rd-warning-soft:#3a2b10; --rd-danger:#f0637f; --rd-danger-soft:#3a1420; --rd-platino:#8fb3f2; --rd-platino-soft:#1c2c47; --rd-plata:#c3cbd6; --rd-plata-soft:#2b3038; --rd-bronce:#e0a868; --rd-bronce-soft:#3d2a15; } } html[data-theme="dark"] .rd-scope{ --rd-bg:#160f26; --rd-surface:#1e1638; --rd-surface-2:#271d47; --rd-border:#3a2d63; --rd-text:#f1ecfb; --rd-text-muted:#ac9cd0; --rd-brand:#a78bfa; --rd-brand-ink:#1a1030; --rd-brand-2:#8457f0; --rd-gold:#e3ac47; --rd-gold-soft:#3a2c13; --rd-success:#49c78a; --rd-success-soft:#123324; --rd-warning:#e3b04a; --rd-warning-soft:#3a2b10; --rd-danger:#f0637f; --rd-danger-soft:#3a1420; --rd-platino:#8fb3f2; --rd-platino-soft:#1c2c47; --rd-plata:#c3cbd6; --rd-plata-soft:#2b3038; --rd-bronce:#e0a868; --rd-bronce-soft:#3d2a15; } .rd-scope, .rd-scope input, .rd-scope select, .rd-scope textarea{ font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; } .rd-scope .ra-panel{ --ra-surface:var(--rd-surface); --ra-surface-2:var(--rd-surface-2); --ra-border:var(--rd-border); --ra-text:var(--rd-text); --ra-text-muted:var(--rd-text-muted); --ra-brand:var(--rd-brand); margin-top:0; } /* -- paneles (.card/.card2 -> mismo contenedor visual que .panel del mockup) -- */ .rd-scope .card, .rd-scope .card2{ background:var(--rd-surface); border:1px solid var(--rd-border); border-radius:var(--rd-radius); box-shadow:var(--rd-shadow); padding:14px 16px 16px; backdrop-filter:none; color:var(--rd-text); } .rd-scope .ct{ font-family:"Sora",sans-serif; font-size:.92rem; font-weight:700; color:var(--rd-text); text-transform:none; letter-spacing:0; margin-bottom:12px; } /* -- periodo selector -- */ .rd-scope .period-btn{ font-family:"IBM Plex Sans",sans-serif; font-size:.74rem; font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid var(--rd-border); background:var(--rd-surface); color:var(--rd-text-muted); } .rd-scope .period-btn.on{background:var(--rd-brand); color:var(--rd-brand-ink); border-color:var(--rd-brand);} .rd-scope > div > span{color:var(--rd-text-muted) !important;} /* -- stat cards (.kpi -> .stat-card del mockup) -- */ .rd-scope .kpi, .rd-scope .kpi-mini{ background:var(--rd-surface); border:1px solid var(--rd-border); border-radius:var(--rd-radius); padding:14px 12px 12px; box-shadow:var(--rd-shadow); text-align:left; position:relative; overflow:hidden; } .rd-scope .kpi::before, .rd-scope .kpi-mini::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--rd-brand); } .rd-scope .kv{font-family:"Sora",sans-serif; font-weight:800; font-size:1.3rem; color:var(--rd-text); font-variant-numeric:tabular-nums;} .rd-scope .kv.fu{color:var(--rd-brand-2);} .rd-scope .kv.gr{color:var(--rd-success);} .rd-scope .kv.ye{color:var(--rd-gold);} .rd-scope .kl{font-size:.68rem; color:var(--rd-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-top:6px;} .rd-scope .ks{font-size:.7rem; color:var(--rd-text-muted); margin-top:2px;} /* -- grids: mismos breakpoints de colapso que el mockup (.stat-grid) -- */ @container (max-width:900px){ .rd-scope .g4{grid-template-columns:repeat(2,1fr);} .rd-scope .g2{grid-template-columns:1fr;} } @container (max-width:480px){ .rd-scope .g4, .rd-scope .g3{grid-template-columns:repeat(2,1fr); gap:9px;} .rd-scope .kpi, .rd-scope .kpi-mini{padding:11px 10px 10px;} .rd-scope .kv{font-size:1.05rem;} } /* -- badges de scoring (.badge/.b-* -> .pill del mockup, mismos colores por rango) -- */ .rd-scope .badge{border-radius:999px; font-weight:700; border:none;} .rd-scope .b-pt{background:var(--rd-platino-soft); color:var(--rd-platino);} .rd-scope .b-go{background:var(--rd-gold-soft); color:var(--rd-gold);} .rd-scope .b-si{background:var(--rd-plata-soft); color:var(--rd-plata);} .rd-scope .b-br{background:var(--rd-bronce-soft); color:var(--rd-bronce);} .rd-scope .b-nu{background:var(--rd-surface-2); color:var(--rd-text-muted);} /* -- barras PAR (Cartera en mora por tramo) -- */ .rd-scope .par-lb{color:var(--rd-text-muted); font-weight:600;} .rd-scope .par-tr{background:var(--rd-surface-2);} .rd-scope .par-fi{color:#fff;} /* -- filas de lista (Top Clientes) -- */ .rd-scope .lr{background:var(--rd-surface-2); border:1px solid var(--rd-border); border-radius:12px; padding:11px 14px;} .rd-scope .lr:hover{border-color:var(--rd-brand); background:var(--rd-surface); box-shadow:var(--rd-shadow);} .rd-scope .lr-name{color:var(--rd-text);} .rd-scope .lr-sub, .rd-scope .lr-d{color:var(--rd-text-muted);} .rd-scope .lr-amt{color:var(--rd-brand);} /* -- filas de Liquidez Instantanea de Caja (.lrow/.ll) -- antes tenian un fondo oscuro FIJO (rgba(14,3,46,.7), sin relacion a --rd-*) que por pura coincidencia dejaba legible el texto atenuado de .ll en los dos temas — funcionaba, pero si alguien tocaba .lrow sin saber esto se rompia en silencio. Atado a los tokens de tema como el resto. -- */ .rd-scope .lrow{background:var(--rd-surface-2); border:1px solid var(--rd-border);} .rd-scope .ll{color:var(--rd-text-muted);} /* -- caja de resultado (Cuanto le puedo prestar) -- */ .rd-scope .rb{background:var(--rd-surface-2); border:1px solid var(--rd-border);} .rd-scope .rr{border-bottom:1px dashed var(--rd-border);} .rd-scope .rl{color:var(--rd-text-muted);} .rd-scope .rv{color:var(--rd-text);} .rd-scope .rv.gr{color:var(--rd-success);} .rd-scope .rv.rd{color:var(--rd-danger);} .rd-scope .rv.fu{color:var(--rd-brand-2);} /* -- inputs/selects sobre paneles claros -- */ .rd-scope label{color:var(--rd-text-muted);} .rd-scope input, .rd-scope select, .rd-scope textarea{ background:var(--rd-bg); border:1.5px solid var(--rd-border); color:var(--rd-text); } .rd-scope select option{background:var(--rd-surface); color:var(--rd-text);} .rd-scope input:focus, .rd-scope select:focus{border-color:var(--rd-brand); background:var(--rd-surface);} /* -- metric-note -- */ .rd-scope .metric-note{color:var(--rd-text-muted); font-style:normal;} /* -- tabla de clasificacion crediticia (.stbl -> .dtable + tarjetas < 480px) -- */ .rd-scope .stbl{font-size:.83rem;} .rd-scope .stbl th{ color:var(--rd-text-muted); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--rd-border); font-weight:700; } .rd-scope .stbl td{border-bottom:1px solid var(--rd-border); color:var(--rd-text);} .rd-scope .stbl tr:hover td{background:var(--rd-surface-2);} @container (max-width:480px){ .rd-scope .stbl thead{display:none;} .rd-scope .stbl, .rd-scope .stbl tbody, .rd-scope .stbl tr, .rd-scope .stbl td{display:block; width:100%;} .rd-scope .stbl tr{ margin-bottom:10px; border:1px solid var(--rd-border); border-radius:11px; padding:4px 12px; background:var(--rd-surface); box-shadow:var(--rd-shadow); } .rd-scope .stbl td{display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:none; gap:10px;} .rd-scope .stbl td:not(:last-child){border-bottom:1px dashed var(--rd-border);} .rd-scope .stbl td::before{content:attr(data-label); font-weight:600; color:var(--rd-text-muted); font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; flex:0 0 auto;} } /* -- graficos Chart.js: fondo/borde del contenedor, el color interno de cada grafico se configura en JS (ver chartColores()/chartFont()) -- */ .rd-scope .cw{background:transparent;} /* -- titulo de pantalla (Clientes/Creditos/Cobranza/Registrar) -- */ .rd-scope .stitle{font-family:"Sora",sans-serif; font-size:1.25rem; font-weight:800; color:var(--rd-text); letter-spacing:-.01em; margin-bottom:14px;} /* -- buscador (Clientes) -- */ .rd-scope .si{color:var(--rd-text-muted);} /* -- pestañas internas (Registrar/Creditos, mismo pill que .period-btn) -- */ .rd-scope .itab{ font-family:"IBM Plex Sans",sans-serif; border-radius:9px; border:1px solid var(--rd-border); background:var(--rd-surface); color:var(--rd-text-muted); } .rd-scope .itab.on{background:var(--rd-brand); color:var(--rd-brand-ink); border-color:var(--rd-brand);} /* -- avatar circular (iniciales de cliente) -- */ .rd-scope .ava{background:var(--rd-surface-2); color:var(--rd-brand-2);} /* -- estado vacio -- */ .rd-scope .empty{color:var(--rd-text-muted); border-color:var(--rd-border); background:var(--rd-surface-2);} /* -- tabla cronograma de cuotas (Registrar/Creditos, mismo tratamiento que .stbl) -- */ .rd-scope .ctbl th{background:var(--rd-surface-2); color:var(--rd-text-muted); font-weight:700;} .rd-scope .ctbl td{border-bottom:1px solid var(--rd-border); color:var(--rd-text);} .rd-scope .ctbl tr:hover td{background:var(--rd-surface-2);} /* -- filas de Cobranza con nombres de clase abreviados (lr-n/lr-s/lr-a, nunca tuvieron CSS propio — heredaban el blanco del body a secas; con fondo claro nuevo hay que darles el mismo tratamiento que lr-name/lr-sub/lr-amt -- */ .rd-scope .lr-n{font-size:13px; font-weight:600; color:var(--rd-text);} .rd-scope .lr-s{font-size:11px; color:var(--rd-text-muted); margin-top:2px;} .rd-scope .lr-a{font-size:14px; font-weight:800; color:var(--rd-brand-2);} /* ── Tanda 2 (Usuarios/Sorteo/Analítica Pro/Gerencial/Copiloto IA/ Configuración/Calculadora/Inversionistas) ── */ /* -- mensajes del Copiloto IA (.ai-*): base tenía texto blanco 85% fijo, pensado para el fondo oscuro viejo -- */ .rd-scope .ai{color:var(--rd-text);} /* -- Valorización de la Empresa / FCF (Analítica Pro) -- */ .rd-scope .val-highlight{background:var(--rd-surface-2); border-color:var(--rd-border);} .rd-scope .val-highlight .vv{color:var(--rd-brand-2);} .rd-scope .val-highlight .vl{color:var(--rd-text-muted);} /* -- boton outline (.bo): color fijo blanco 65%, pensado para fondo oscuro viejo — con tarjeta clara nueva quedaba casi invisible (ej. "Backup JSON"/"Exportar CSV" del Dashboard, "Desactivar"/"Resetear Clave" de Usuarios). Mismo problema dentro de los modales, que ahora usan --nav-*. */ .rd-scope .bo{color:var(--rd-text-muted); border-color:var(--rd-border);} .modal .bo{color:var(--nav-text-muted); border-color:var(--nav-border);} /* -- etiqueta de fila en "Créditos por Valor de Cuota"/"Grupo de Edad" (Analítica Pro) — sin fondo propio, a diferencia de .ll (que sí tiene .lrow oscuro detrás y por eso no necesita este arreglo) -- */ .rd-scope .age-lbl{color:var(--rd-text-muted);} /* ══════════════════════════════════════════════════════════════════════ SIDEBAR — reemplaza la barra horizontal de 12 pestañas (.nav/.nb, ya retirada del HTML). Global (fuera de .rd-scope): la navegación tiene que verse igual sin importar en qué pantalla estés, aunque el CONTENIDO de esa pantalla todavía no esté rediseñado. Mockup: https://claude.ai/code/artifact/629404f7-d18e-4768-bf44-896e8446a2f3 Responsive: sidebar oculto <900px, menú inferior de 5 ítems <900px — mismo breakpoint que el sidebar a propósito, para que uno aparezca exactamente donde el otro desaparece (antes el menú inferior solo aparecía <480px, dejando un hueco 481-900px sin nav visible; cerrado, ver PENDIENTES_MIGRACION.md). ══════════════════════════════════════════════════════════════════════ */ .app-shell{display:flex; align-items:flex-start; min-height:calc(100vh - var(--hdr-h));} .sidebar{ width:224px; flex:0 0 auto; background:var(--nav-surface); border-right:1px solid var(--nav-border); padding:14px 12px 20px; position:sticky; top:var(--hdr-h); align-self:flex-start; max-height:calc(100vh - var(--hdr-h)); min-height:calc(100vh - var(--hdr-h)); overflow-y:auto; font-family:"IBM Plex Sans",sans-serif; } .sidebar nav{display:flex; flex-direction:column; gap:2px;} /* Tanda 3: etiquetas de grupo (Operación / Análisis / Administración) para que las 12 entradas se lean como 3 bloques y no como una lista plana. */ .sidebar .nav-group{ font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--nav-text-muted); padding:14px 10px 6px; opacity:.85; } .sidebar .nav-group:first-child{padding-top:2px;} .sidebar .nav-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; font-size:.86rem; font-weight:500; color:var(--nav-text-muted); white-space:nowrap; cursor:pointer; position:relative; transition:background .15s,color .15s; } .sidebar .nav-item:hover{background:var(--nav-surface-2); color:var(--nav-text);} .sidebar .nav-item.on{background:var(--nav-surface-2); color:var(--nav-brand); font-weight:700;} .sidebar .nav-item.on::before{ content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--nav-brand); } .sidebar .nav-item .ic{width:20px; text-align:center; flex:0 0 auto; font-size:1rem;} .main{flex:1 1 auto; min-width:0;} @media (max-width:900px){ .sidebar{display:none;} } /* -- menú inferior (<900px, mismo corte que .sidebar arriba) -- */ .bottom-nav{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:250; justify-content:space-around; align-items:center; background:var(--nav-surface); border-top:1px solid var(--nav-border); padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px)); font-family:"IBM Plex Sans",sans-serif; } .bottom-nav .bn-item{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:.62rem; color:var(--nav-text-muted); font-weight:600; flex:1 1 0; cursor:pointer; } .bottom-nav .bn-item{padding:4px 0; border-radius:10px;} .bottom-nav .bn-item.on{color:var(--nav-brand);} .bottom-nav .bn-item.on .bn-ic{background:var(--nav-surface-2); border-radius:10px;} .bottom-nav .bn-ic{font-size:1.1rem; padding:2px 12px; line-height:1.3;} .mas-panel{ display:none; position:fixed; left:10px; right:10px; bottom:0; z-index:249; background:var(--nav-surface); border:1px solid var(--nav-border); border-radius:14px 14px 0 0; box-shadow:var(--nav-shadow); padding:10px; flex-direction:column; gap:6px; max-height:70vh; overflow-y:auto; } .mas-panel.open{display:flex;} .mas-panel .mas-row{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; font-size:.86rem; font-weight:600; color:var(--nav-text); cursor:pointer; } .mas-panel .mas-row:hover{background:var(--nav-surface-2);} .mas-panel .mas-row .arrow{margin-left:auto; color:var(--nav-text-muted); font-weight:400;} @media (max-width:900px){ .bottom-nav{display:flex;} .main{padding-bottom:74px;} .fab{bottom:82px;} .mas-panel{bottom:64px;} } /* ══════════════════════════════════════════════════════════════════════ TANDA 3 — pulido global de UX (armazón unificado + dashboard en bloques). Sin cambios de comportamiento: solo CSS y envoltorios

en el Dashboard (los IDs que usan las funciones render*() no se tocaron). ══════════════════════════════════════════════════════════════════════ */ /* -- modales: misma tipografía que el resto -- */ .modal{font-family:"IBM Plex Sans",sans-serif; box-shadow:0 24px 60px -20px rgba(0,0,0,.5);} .modal .mttl{font-family:"Sora",sans-serif; font-size:1.05rem;} .mbg{background:rgba(20,12,40,.62); backdrop-filter:blur(3px);} /* -- bloques plegables del Dashboard (.dash-group) -- Un

nativo por bloque: sin JS para abrir/cerrar, accesible con teclado, y el contenido sigue en el DOM aunque esté plegado. El estado se recuerda en localStorage (ver dashGroupsInit() en index.html). */ .dash-group{margin-bottom:12px;} .dash-group > summary{ list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:10px; background:var(--rd-surface); border:1px solid var(--rd-border); border-radius:var(--rd-radius); box-shadow:var(--rd-shadow); font-family:"Sora",sans-serif; font-weight:700; font-size:.95rem; color:var(--rd-text); transition:border-color .15s; } .dash-group > summary::-webkit-details-marker{display:none;} .dash-group > summary:hover{border-color:var(--rd-brand);} .dash-group > summary:focus-visible{outline:none; box-shadow:0 0 0 3px var(--app-ring);} .dash-group > summary .dg-ic{ width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--rd-surface-2); font-size:1rem; flex:0 0 auto; } .dash-group > summary .dg-sub{font-family:"IBM Plex Sans",sans-serif; font-weight:500; font-size:.76rem; color:var(--rd-text-muted); margin-left:2px;} .dash-group > summary .dg-chev{ margin-left:auto; color:var(--rd-text-muted); font-size:.72rem; font-weight:600; font-family:"IBM Plex Sans",sans-serif; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } .dash-group > summary .dg-chev::after{content:"▾"; font-size:.9rem; transition:transform .2s;} .dash-group:not([open]) > summary .dg-chev::after{transform:rotate(-90deg);} .dash-group:not([open]) > summary{margin-bottom:0;} .dash-group:not([open]) > summary .dg-chev .abrir{display:inline;} .dash-group:not([open]) > summary .dg-chev .cerrar{display:none;} .dash-group[open] > summary .dg-chev .abrir{display:none;} .dash-group[open] > summary .dg-chev .cerrar{display:inline;} @container (max-width:480px){ .dash-group > summary .dg-sub{display:none;} .dash-group > summary .dg-chev span{display:none !important;} } /* -- grids: los hijos de una grilla tienen min-width:auto por defecto, así que un