/* ============================================================ redesign.css — Sistema de diseño "Confianza Fiscal" Portado del mock mock/admin-redesign-motion.html (tema claro + oscuro, superficies sólidas, acento teal, capa de craft: motion + focus + skeleton). Fuente ÚNICA de verdad del nuevo look. Se carga al final del . ============================================================ */ :root{ --bg:#F3F5F8; --surface:#FFFFFF; --surface-2:#FAFBFC; --border:#E6E9EF; --border-strong:#D6DCE5; --text:#0F1B2D; --text-2:#3C4757; --text-3:#5A6678; --accent:#0D7C66; --accent-2:#0A5A49; --accent-soft:#E1F3EE; --accent-ring:rgba(13,124,102,.30); --amber-bg:#FBF0D6; --amber-tx:#875706; --amber-dot:#C98A12; --blue-bg:#E5EEFB; --blue-tx:#1A52A8; --blue-dot:#2f73d6; --green-bg:#DFF2E9; --green-tx:#0A6A50; --green-dot:#15a87b; --red-bg:#FCE8E5; --red-tx:#AE2E1D; --red-dot:#dc4a36; --violet-bg:#ECEAFB; --violet-tx:#4A3FA0; --slate-bg:#EDF0F4; --slate-tx:#586577; --slate-dot:#97a2b2; --sk1:#EAEEF3; --sk2:#F4F7FA; --shadow:0 1px 2px rgba(16,27,45,.04), 0 6px 18px rgba(16,27,45,.05); --shadow-lg:0 18px 55px rgba(16,27,45,.20); --ease-out:cubic-bezier(0.23, 1, 0.32, 1); } html.dark{ --bg:#0A111E; --surface:#121B2C; --surface-2:#0E1626; --border:#21304A; --border-strong:#2C3C58; --text:#E9EDF4; --text-2:#9BA7B9; --text-3:#6B7891; --accent:#2ED3A6; --accent-2:#7DE6C9; --accent-soft:#10362C; --accent-ring:rgba(46,211,166,.32); --amber-bg:#382A0F; --amber-tx:#F0C470; --amber-dot:#E0A94A; --blue-bg:#13294A; --blue-tx:#9DBEF2; --blue-dot:#5b8de8; --green-bg:#0F3328; --green-tx:#74D9B4; --green-dot:#2cc999; --red-bg:#3A1A16; --red-tx:#F09A8B; --red-dot:#e0644f; --violet-bg:#231E45; --violet-tx:#B7AEF0; --slate-bg:#1A2538; --slate-tx:#9BA7B9; --slate-dot:#5d6a82; --sk1:#18233A; --sk2:#202D48; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4); --shadow-lg:0 18px 55px rgba(0,0,0,.6); } /* Alias de tokens legacy → adaptativos (claro/oscuro). Hace que TODO el markup viejo (admin-styles + utilidades) respete el tema sin reescribirlo. */ :root{ --background:var(--bg); --surface-container:var(--surface-2); --surface-container-low:var(--surface-2); --surface-container-high:var(--surface-2); --on-surface:var(--text); --on-background:var(--text); --primary:var(--accent); --outline:var(--border-strong); --t2-border:var(--border); --t2-border-strong:var(--border-strong); --t2-text-2:var(--text-2); --t2-accent:var(--accent); --t2-ring:var(--accent-ring); } /* Base */ body.rx{margin:0;background:var(--bg)!important;color:var(--text)!important;font-family:Manrope,sans-serif;-webkit-font-smoothing:antialiased;transition:background .25s ease,color .25s ease} .rx .mono{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums} .rx .num{font-variant-numeric:tabular-nums} .rx .material-symbols-rounded,.rx .material-symbols-outlined{line-height:1;vertical-align:middle} /* Componentes */ .rx .card{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)} .rx .chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:8px;white-space:nowrap} .rx .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0} .rx .rnav{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--text-2);font-weight:600;font-size:14px;cursor:pointer;transition:background .15s ease,color .15s ease} .rx .rnav:hover{background:var(--surface-2);color:var(--text)} .rx .rnav.active{background:var(--accent-soft);color:var(--accent-2)} .rx .rbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;font-size:13px;padding:9px 14px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:transform .14s var(--ease-out),background .15s ease,filter .15s ease} .rx .rbtn:active{transform:scale(.97)} .rx .rbtn-sm{padding:7px 11px;font-size:12px;border-radius:9px} .rx .rbtn-primary{background:var(--accent);color:#fff} html.dark .rx .rbtn-primary{color:#06231c} .rx .rbtn-primary:hover{filter:brightness(1.06)} .rx .rbtn-ghost{background:var(--surface);border-color:var(--border-strong);color:var(--text)} .rx .rbtn-ghost:hover{background:var(--surface-2)} .rx .tr td{border-top:1px solid var(--border);padding:14px 14px;vertical-align:top} .rx .tr{transition:background .15s ease} .rx .tr:hover{background:var(--surface-2)} .rx .ico-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;color:var(--text-2);cursor:pointer;background:transparent;border:0;transition:background .14s ease,transform .14s var(--ease-out),color .14s ease} .rx .ico-btn:hover{background:var(--surface-2);color:var(--text)} .rx .ico-btn:active{transform:scale(.92)} .rx a:focus-visible,.rx button:focus-visible,.rx input:focus-visible,.rx select:focus-visible,.rx .tr:focus-visible,.rx [tabindex]:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);border-radius:9px} .rx .fld-tag{flex-shrink:0;width:46px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 0;border-radius:7px} .rx .rinput{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:8px 11px;color:var(--text);font-size:13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease} .rx .rinput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)} .rx .seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px;flex-wrap:wrap} .rx .seg button{border:0;background:transparent;color:var(--text-2);font-weight:600;font-size:12.5px;padding:5px 11px;border-radius:7px;cursor:pointer;transition:background .15s ease,color .15s ease} .rx .seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)} .rx .amt{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:12px;padding:1.5px 0;color:var(--text-2)} .rx .amt .v{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;color:var(--text);font-weight:500;text-align:right} .rx .amt input.v{background:transparent;border:0;border-bottom:1px solid transparent;width:96px;outline:none} .rx .amt input.v:focus{border-bottom-color:var(--accent)} .rx .amt-total{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:4px;padding-top:5px;border-top:1px dashed var(--border-strong);font-size:12.5px;font-weight:700;color:var(--text)} .rx .amt-total .v{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;font-size:13.5px} .rx .warn{display:flex;align-items:flex-start;gap:5px;font-size:11px;font-weight:600;line-height:1.3;margin-top:6px} .rx .ready{display:inline-flex;align-items:center;gap:7px;margin-top:7px;font-size:11px;color:var(--text-3);font-weight:600} .rx .ready i,.rx .ready .material-symbols-outlined{font-size:14px} .rx .mini-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:6px} .rx .selbox{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:8px 11px;font-size:12.5px;font-weight:600;color:var(--text);width:100%} .rx select.selbox{appearance:auto} /* Modal: entrada origen-centro + scrim */ .rx .scrim{opacity:0;pointer-events:none;transition:opacity .16s ease} .rx .scrim.open{opacity:1;pointer-events:auto} .rx .scrim .modalcard{transform:scale(.955);opacity:0;transition:transform .22s var(--ease-out),opacity .18s var(--ease-out)} .rx .scrim.open .modalcard{transform:scale(1);opacity:1} /* Skeleton (la tabla NO se anima en cada render para no parpadear al actualizar datos) */ .rx .sk{background:linear-gradient(90deg,var(--sk1) 25%,var(--sk2) 37%,var(--sk1) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:6px;display:block} @keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}} /* Chips de estado semánticos (helpers) */ .rx .chip-amber{background:var(--amber-bg);color:var(--amber-tx)} .rx .dot-amber{background:var(--amber-dot)} .rx .chip-blue{background:var(--blue-bg);color:var(--blue-tx)} .rx .dot-blue{background:var(--blue-dot)} .rx .chip-green{background:var(--green-bg);color:var(--green-tx)} .rx .dot-green{background:var(--green-dot)} .rx .chip-red{background:var(--red-bg);color:var(--red-tx)} .rx .dot-red{background:var(--red-dot)} .rx .chip-slate{background:var(--slate-bg);color:var(--slate-tx)} .rx .dot-slate{background:var(--slate-dot)} .rx .tag-accent{background:var(--accent-soft);color:var(--accent-2)} .rx .tag-amber{background:var(--amber-bg);color:var(--amber-tx)} .rx .tag-blue{background:var(--blue-bg);color:var(--blue-tx)} .rx .tag-green{background:var(--green-bg);color:var(--green-tx)} .rx .tag-violet{background:var(--violet-bg);color:var(--violet-tx)} .rx .tag-slate{background:var(--slate-bg);color:var(--slate-tx)} .rx .tx-2{color:var(--text-2)} .rx .tx-3{color:var(--text-3)} .rx .tx-accent{color:var(--accent-2)} .rx .tx-amber{color:var(--amber-tx)} .rx .tx-blue{color:var(--blue-tx)} .rx .tx-green{color:var(--green-tx)} .rx .tx-red{color:var(--red-tx)} /* Tabla "libro contable" (#adminTable) — gana por especificidad de id */ .rx .ds-table-container{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:14px!important;box-shadow:var(--shadow)} .rx #adminTable{border-collapse:collapse;width:100%} .rx #adminTable thead tr{background:transparent} .rx #adminTable th{color:var(--text-3)!important;text-transform:none!important;letter-spacing:.01em!important;font-weight:600!important;font-size:11.5px!important;padding:12px 14px!important;border-bottom:1px solid var(--border)!important;text-align:left} .rx #adminTable td{border-top:1px solid var(--border)!important;border-bottom:0!important;padding:14px 14px!important;vertical-align:top!important;color:var(--text)!important;font-size:13px!important;background:transparent!important} .rx #adminTable tbody tr:hover{background:var(--surface-2)} /* ════════════════════════════════════════════════════════════════ COMPAT: remapea el markup viejo (clases .ds-*/.glass-* + utilidades inline Tailwind) a los tokens ADAPTATIVOS del mock, para que TODO el app (shell, header, sidebar, métricas, modales, login, móvil) respete tema claro/oscuro y use las superficies del mock sin reescribir markup. ════════════════════════════════════════════════════════════════ */ /* Superficies */ .rx .glass-panel,.rx .glass-card,.rx .glass,.rx .glass-surface{background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid var(--border)!important;box-shadow:var(--shadow)} .rx [class*="backdrop-blur"]{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .rx [class*="bg-[#060d20]"],.rx [class*="bg-[#0b1326]"],.rx [class*="bg-[#070e22]"],.rx [class*="bg-[#05102a]"]{background-color:var(--bg)!important} .rx [class*="bg-[#091328]"],.rx [class*="bg-[#0f1930]"],.rx [class*="bg-[#0c162e]"],.rx [class*="bg-[#101a33]"]{background-color:var(--surface)!important} .rx [class*="bg-[#141f38]"],.rx [class*="bg-[#16223d]"]{background-color:var(--surface-2)!important} .rx [class*="bg-white/"]{background-color:var(--surface-2)!important} /* NO tocar bg-black/* : son los scrims/fondos de los modales (deben oscurecer el fondo) */ /* Bordes */ .rx [class*="border-white/"],.rx [class*="border-[#1a2540]"],.rx [class*="border-[#2d3a52]"],.rx [class*="border-[#1e2b48]"]{border-color:var(--border)!important} /* Texto base → adaptativo */ .rx [class*="text-[#dee5ff]"],.rx .text-white,.rx .text-gray-100,.rx .text-gray-200,.rx .text-slate-100,.rx .text-slate-200{color:var(--text)!important} .rx .text-gray-300,.rx .text-gray-400,.rx .text-slate-300,.rx .text-slate-400,.rx [class*="text-[#86948a]"],.rx [class*="text-[#9aa]"]{color:var(--text-2)!important} .rx .text-gray-500,.rx .text-gray-600,.rx .text-slate-500,.rx .text-slate-600{color:var(--text-3)!important} /* Acentos heredados → identidad */ .rx .text-cyan-400,.rx .text-cyan-300,.rx .text-cyan-200,.rx [class*="text-[#c1fffe]"]{color:var(--accent-2)!important} .rx .text-emerald-400,.rx .text-emerald-300,.rx .text-green-400{color:var(--green-tx)!important} .rx .text-blue-300,.rx .text-blue-400{color:var(--blue-tx)!important} .rx .text-amber-400,.rx .text-yellow-400,.rx .text-orange-400,.rx .text-orange-300{color:var(--amber-tx)!important} .rx .text-red-300,.rx .text-red-400,.rx .text-red-500{color:var(--red-tx)!important} .rx .text-purple-400,.rx .text-purple-300,.rx .text-violet-400{color:var(--violet-tx)!important} /* Inputs / selects */ .rx .ds-input,.rx .portal-input{background:var(--surface-2)!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:9px} .rx .ds-input:focus,.rx .portal-input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-ring)!important;outline:none} .rx .ds-input::placeholder{color:var(--text-3)!important} .rx select.ds-input option,.rx select.selbox option{background:var(--surface)!important;color:var(--text)!important} /* Botones */ .rx .ds-btn-primary{background:var(--accent)!important;color:#fff!important;border:0!important;border-radius:10px;box-shadow:var(--shadow);transition:transform .14s var(--ease-out),filter .15s ease} html.dark .rx .ds-btn-primary{color:#06231c!important} .rx .ds-btn-primary:hover{filter:brightness(1.06)} .rx .ds-btn-primary:active,.rx .ds-btn-success:active,.rx .ds-btn-warning:active{transform:scale(.97)} .rx .ds-btn-success{background:var(--accent)!important;color:#fff!important;border:0!important;border-radius:10px;box-shadow:var(--shadow)} html.dark .rx .ds-btn-success{color:#06231c!important} .rx .ds-btn-warning{background:var(--amber-bg)!important;color:var(--amber-tx)!important;border:1px solid var(--amber-dot)!important;border-radius:10px} .rx .ds-btn-danger{background:var(--red-bg)!important;color:var(--red-tx)!important;border:1px solid var(--red-dot)!important;border-radius:10px} .rx .ds-btn-ghost,.rx .ds-btn-secondary{background:var(--surface)!important;border:1px solid var(--border-strong)!important;color:var(--text)!important;border-radius:10px} /* Badges → chips del mock */ .rx .ds-badge{text-transform:none!important;border-radius:8px!important;font-weight:600;letter-spacing:0!important} .rx .ds-badge-success{background:var(--green-bg)!important;color:var(--green-tx)!important;border-color:transparent!important} .rx .ds-badge-pending,.rx .ds-badge-warning{background:var(--amber-bg)!important;color:var(--amber-tx)!important;border-color:transparent!important} .rx .ds-badge-neutral{background:var(--slate-bg)!important;color:var(--slate-tx)!important;border-color:transparent!important} .rx .ds-badge-error,.rx .ds-badge-danger{background:var(--red-bg)!important;color:var(--red-tx)!important;border-color:transparent!important} .rx .ds-badge-info{background:var(--blue-bg)!important;color:var(--blue-tx)!important;border-color:transparent!important} /* Iconos / currency / scrollbar */ .rx .icon-btn{background:transparent!important;border:0!important;color:var(--text-2)!important;border-radius:9px;transition:background .14s ease,transform .14s var(--ease-out)} .rx .icon-btn:hover{background:var(--surface-2)!important;color:var(--text)!important} .rx .icon-btn:active{transform:scale(.92)} .rx .currency-input{color:var(--text)!important;background:transparent!important;border:0!important;font-variant-numeric:tabular-nums;text-align:right} .rx ::-webkit-scrollbar-thumb{background:var(--border-strong)} /* Nav lateral activo */ .rx .nav-active,.rx [class*="bg-cyan-500/"],.rx [class*="bg-emerald-500/"]{background:var(--accent-soft)!important;color:var(--accent-2)!important} /* Gradientes neón → teal sólido */ .rx [class*="from-cyan"],.rx [class*="to-cyan"],.rx [class*="from-emerald"],.rx [class*="via-cyan"]{background-image:none!important} /* Login / MFA / auth → superficies y acento del mock */ .rx #loginSection,.rx #mfaSection,.rx #forgotSection,.rx #forgotPasswordSection,.rx #resetSection{background:radial-gradient(circle at 50% 0%,var(--surface-2),var(--bg) 75%)!important} .rx .bg-cyan-400,.rx .bg-cyan-300,.rx [class*="hover:bg-cyan-3"]{background-color:var(--accent)!important} .rx [class*="text-[#060d20]"]{color:#fff!important} html.dark .rx [class*="text-[#060d20]"]{color:#06231c!important} .rx svg.neon-glow > g{stroke:var(--accent)!important} .rx [class*="shadow-cyan-400/"],.rx [class*="shadow-cyan-500/"]{box-shadow:var(--shadow)!important} .rx [class*="bg-[#141f38]"]{background-color:var(--surface-2)!important} .rx .neon-glow{filter:none!important} /* Login/MFA: inputs siempre adaptativos al tema (incluido autofill del navegador) */ .rx #loginSection input,.rx #mfaSection input,.rx #forgotSection input,.rx #resetSection input{background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--border)!important} .rx #loginSection input::placeholder,.rx #mfaSection input::placeholder{color:var(--text-3)!important} .rx input:-webkit-autofill,.rx input:-webkit-autofill:hover,.rx input:-webkit-autofill:focus,.rx input:-webkit-autofill:active{-webkit-text-fill-color:var(--text)!important;-webkit-box-shadow:0 0 0 1000px var(--surface-2) inset!important;caret-color:var(--text)!important;transition:background-color 9999s ease-in-out 0s} /* Selector de empresa estilo "pill" del mock (icono + nombre + chevron) */ .rx .company-pill{position:relative;display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;padding:6px 28px 6px 10px;transition:background .15s ease,border-color .15s ease} .rx .company-pill:hover{background:var(--surface-2)} .rx .company-pill:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)} .rx .company-pill .ico-lead{color:var(--accent);font-size:18px;flex-shrink:0;pointer-events:none;z-index:1} .rx .company-pill .ico-trail{color:var(--text-3);font-size:18px;flex-shrink:0;pointer-events:none;position:absolute;right:9px;top:50%;transform:translateY(-50%)} .rx .company-pill select{appearance:none;-webkit-appearance:none;background:transparent!important;border:0!important;outline:none;color:var(--text)!important;font-weight:700;font-size:13px;cursor:pointer;padding:0!important;margin:0;max-width:180px;box-shadow:none!important;text-transform:none!important;letter-spacing:normal!important;min-width:0;flex:1} .rx .company-pill select:focus{box-shadow:none!important} .rx .company-pill select option{background:var(--surface)!important;color:var(--text)!important;font-weight:600} .rx .rbtn:disabled,.rx .rbtn[disabled]{opacity:.45;cursor:not-allowed;filter:none!important} /* Botón de subir cuando aún no hay empresa activa (sigue clicable: avisa al pulsar) */ .rx .rbtn.needs-company{opacity:.6} /* Pulso de atención sobre el selector global del sidebar */ .rx .pulse-attn{animation:pulseAttn 1.4s var(--ease-out)} @keyframes pulseAttn{0%,100%{box-shadow:0 0 0 0 var(--accent-ring)}30%{box-shadow:0 0 0 5px var(--accent-ring)}} /* Resaltado de facturas recién creadas */ .rx #adminTable tr.row-new td{animation:rowNewFlash 2.8s var(--ease-out) 1} @keyframes rowNewFlash{0%{background:var(--accent-soft)}65%{background:var(--accent-soft)}100%{background:transparent}} /* Toasts adaptativos al tema (evita texto claro sobre fondo claro) */ .rx .toast-item{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-left:4px solid var(--accent)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:var(--shadow)!important} .rx .toast-error{border-left-color:var(--red-dot)!important} .rx .toast-info{border-left-color:var(--accent)!important} /* Modal de factura: X de cerrar en la extrema derecha del modal */ .rx #docModal .glass-card{position:relative} .rx #closeModalBtn{position:absolute!important;top:14px;right:14px;z-index:30} .rx #splitEditPane > div:first-child{padding-right:46px} /* Reportes (modal): en desktop deja el sidebar descubierto y clicable (para "Operaciones") */ @media (min-width:1024px){ .rx #reportModal{left:18rem} } @media (prefers-reduced-motion: reduce){ .rx *{animation-duration:.001ms!important;transition-duration:.001ms!important} .rx #adminTable tr{animation:none!important} } /* ════════════════════════════════════════════════════════════════ PORTAL DE CLIENTES — remaps específicos (clases propias del portal) a los mismos tokens del admin, para identidad consistente claro/oscuro. ════════════════════════════════════════════════════════════════ */ /* Fondos hex del portal → tokens */ .rx [class*="bg-[#0b1326]"],.rx [class*="bg-[#0f1930]"],.rx [class*="bg-[#070e22]"]{background-color:var(--bg)!important} /* Superficies (vidrio → sólidas) */ .rx .glass,.rx .glass-card,.rx .glass-surface{background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid var(--border)!important;box-shadow:var(--shadow)!important} /* Marco de la app (sidebar / header / bottom-nav) — superficies oscuras → tokens */ .rx #sidebar,.rx #appHeader,.rx #bottomNav{background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:var(--border)!important} .rx #sidebar{border-right:1px solid var(--border)!important} .rx #appHeader{border-bottom:1px solid var(--border)!important} .rx #bottomNav{border-top:1px solid var(--border)!important} /* Tarjetas de actividad reciente */ .rx .data-row{background:var(--surface-2)!important;border:1px solid var(--border)!important} .rx .data-row:hover{background:var(--surface)!important;border-color:var(--accent)!important} /* Dropzone de subida */ .rx [id*="dropzone"],.rx [class*="dropzone"],.rx #uploadZone{background:var(--surface-2)!important;border-color:var(--border-strong)!important} /* Navegación lateral + inferior */ .rx .nav-item{color:var(--text-2)!important;border-radius:10px;transition:background .15s ease,color .15s ease} .rx .nav-item:hover{background:var(--surface-2)!important;color:var(--text)!important} .rx .nav-item.active{background:var(--accent-soft)!important;color:var(--accent-2)!important} .rx .nav-item.active .material-symbols-outlined{color:var(--accent-2)!important} .rx .bnav-item{color:var(--text-3)!important} .rx .bnav-item.active{color:var(--accent-2)!important} .rx .bnav-item.active .material-symbols-outlined{color:var(--accent-2)!important} /* Botón primario (gradiente emerald → teal sólido) */ .rx .btn-primary{background:var(--accent)!important;background-image:none!important;color:#fff!important;border:0!important;box-shadow:var(--shadow)!important} html.dark .rx .btn-primary{color:#06231c!important} .rx .btn-primary:hover{filter:brightness(1.06)} /* Inputs */ .rx .portal-input,.rx .ds-input{background:var(--surface-2)!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:9px} .rx .portal-input:focus,.rx .ds-input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-ring)!important;outline:none} .rx .portal-input::placeholder{color:var(--text-3)!important} /* Filas de datos / tabla */ .rx .data-row{border-color:var(--border)!important;transition:background .15s ease} .rx .data-row:hover{background:var(--surface-2)!important} /* Barras de progreso (uso/cuota) */ .rx .progress-fill{background:var(--accent)!important;background-image:none!important} .rx [class*="bg-[#141f38]"]{background-color:var(--surface-2)!important} /* Badges de estado del portal → chips semánticos */ .rx .badge-ok{background:var(--green-bg)!important;color:var(--green-tx)!important} .rx .badge-proc{background:var(--blue-bg)!important;color:var(--blue-tx)!important} .rx .badge-pend{background:var(--amber-bg)!important;color:var(--amber-tx)!important} .rx .badge-read{background:var(--violet-bg)!important;color:var(--violet-tx)!important} .rx .badge-dup,.rx .badge-err,.rx .badge-error{background:var(--red-bg)!important;color:var(--red-tx)!important} /* Acento emerald inline (#4edea3) → teal. OJO: el navegador serializa el inline a rgb(78, 222, 163), y los selectores de atributo comparan contra ESA forma. */ .rx [style*="color:#4edea3"],.rx [style*="color: #4edea3"],.rx [style*="color: rgb(78, 222, 163)"]{color:var(--accent-2)!important} .rx [style*="background:#4edea3"],.rx [style*="background: #4edea3"],.rx [style*="background: rgb(78, 222, 163)"]{background:var(--accent)!important;background-image:none!important;color:#fff!important;box-shadow:var(--shadow)!important} html.dark .rx [style*="background: rgb(78, 222, 163)"]{color:#06231c!important} .rx #loginBtn:hover,.rx #changePasswordBtn:hover{background:var(--accent)!important;background-image:none!important;filter:brightness(1.06)} .rx [style*="border-left: 3px solid #4edea3"],.rx [style*="border-left: 3px solid rgb(78, 222, 163)"]{border-left-color:var(--accent)!important} .rx [style*="from-[#4edea3]"],.rx [class*="from-emerald"],.rx [class*="to-emerald"]{background-image:none!important} /* Login del portal: fondo radial → tokens; inputs adaptativos (incl. autofill) */ .rx #loginSection,.rx #resetSection,.rx #changePasswordSection{background:radial-gradient(circle at 50% 0%,var(--surface-2),var(--bg) 75%)!important} .rx #loginSection input,.rx #resetSection input{background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--border)!important} .rx [style*="color:#003824"],.rx [style*="color: rgb(0, 56, 36)"]{color:#fff!important} html.dark .rx [style*="color:#003824"],html.dark .rx [style*="color: rgb(0, 56, 36)"]{color:#06231c!important} /* ── EL FONDO AZUL: #ambient (fixed #0b1326 a pantalla completa, z-0) → token del tema ── */ .rx #ambient{background:var(--bg)!important} html.dark .rx #ambient{background:radial-gradient(ellipse 60% 50% at 15% 10%,rgba(46,211,166,.06) 0%,transparent 100%),var(--bg)!important} .rx #ambient::after{opacity:.5} /* ── JERARQUÍA DE TEXTO: colores claros (para fondo oscuro) → tokens del tema ── OJO: el navegador serializa el inline a rgb(...), así matchean los selectores. */ .rx [style*="color:#dae2fd"],.rx [style*="color: #dae2fd"],.rx [style*="color: rgb(218, 226, 253)"]{color:var(--text)!important} /* #dae2fd (primario) */ .rx [style*="color:#86948a"],.rx [style*="color: #86948a"],.rx [style*="color:rgba(134,148,138"],.rx [style*="color: rgb(134, 148, 138)"],.rx [style*="color: rgba(134, 148, 138"]{color:var(--text-2)!important} /* #86948a (muteado) */ .rx [style*="color: rgb(190, 198, 224)"]{color:var(--text-2)!important} /* #bec6e0 */ .rx .section-label{color:var(--accent-2)!important} /* etiquetas de sección → teal */ .rx .data-row{color:var(--text)!important} /* nombres de proveedor (actividad/historial) */ .rx [style*="color:#dee5ff"],.rx [style*="color:#bec6e0"]{color:var(--text-2)!important} /* Inputs del portal (historial/config) con color claro fijo → texto del tema */ .rx #appSection input,.rx #appSection textarea{color:var(--text)!important} .rx #appSection input::placeholder{color:var(--text-3)!important} /* Toast del portal (regla propia con !important) */ .rx #toastContainer > div{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-left:3px solid var(--accent)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:var(--shadow)!important}