/* ══════════════════════════════════════════════════════════════════════════════ HybsChat — SISTEMA DE DISEÑO ÚNICO v2026.08.25 · portado de hybschat.com (Astro) ────────────────────────────────────────────────────────────────────────────── POR QUÉ EXISTE ESTE ARCHIVO Había DOS sistemas conviviendo en la misma pantalla: custom.css --hybs-* neutros VERDOSOS (#0f1e1a), Open Sans, radio 16 hook dashboard --h-* neutros AZULADOS (#0B1220), Poppins+Inter, radio 18 El portal usaba el primero y el panel de adentro el segundo, así que al entrar se cruzaban dos identidades. Y como custom.css apunta al panel con selectores de ID (`#hybs-dashboard-root .hybs-card`), GANABA por especificidad: el radio 18 del sitio nunca se aplicaba y el botón primario terminaba con texto BLANCO sobre el verde de marca — 2.26:1, ilegible. Acá queda un solo sistema, el del sitio. Los nombres viejos siguen existiendo como alias, así que las 796 líneas de custom.css y las ~1300 de estilo del hook siguen funcionando: apuntan a los mismos nombres, que ahora resuelven a los valores del sitio. ORDEN DE CARGA: este archivo va DESPUÉS de custom.css (ver includes/head.tpl). Es lo que le permite redefinir por cascada sin tocar el archivo viejo. Sacar la línea del head.tpl revierte todo el rediseño de un saque. ══════════════════════════════════════════════════════════════════════════════ */ /* ── Las fuentes del sitio, servidas desde acá ───────────────────────────────── Los mismos .woff2 que sirve hybschat.com, copiados a templates/hybschat/fonts/. Antes el panel las pedía al CDN de Google y el portal usaba Open Sans: dos tipografías distintas en la misma página. Servirlas propias resuelve las dos cosas a la vez y de paso saca un tercero del camino — sin request a Google, sin depender de que ese dominio esté accesible, sin el salto de fuente cuando tarda. Pesan 184 KB en total y solo bajan los rangos que se usan. `font-display:swap` = el texto se lee desde el primer cuadro con la fuente del sistema y cambia cuando llega la definitiva. En un panel de trabajo, leer tarde es peor que ver un cambio de fuente. */ @font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap; src:url(../fonts/inter-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap; src:url(../fonts/inter-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap; src:url(../fonts/poppins-400-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap; src:url(../fonts/poppins-400-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap; src:url(../fonts/poppins-600-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap; src:url(../fonts/poppins-600-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap; src:url(../fonts/poppins-700-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap; src:url(../fonts/poppins-700-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ══════════════════════════════════════════════════════════════════════════════ 1 · EL SISTEMA ══════════════════════════════════════════════════════════════════════════════ */ :root{ /* ── Marca ────────────────────────────────────────────────────────────────── Los tres verdes son los del sitio, sin retocar. */ --h-brand:#00C492; /* el de marca — SUPERFICIES, nunca texto */ --h-brand-hi:#12E2A8; /* el claro, para el tope del gradiente */ --h-brand-lo:#00A97E; /* el oscuro, para bordes y foco */ /* Acá se toma la ÚNICA licencia respecto del sitio. El sitio pone texto blanco sobre el verde (`--on-brand:#fff`): 2.26:1. En una landing que se mira treinta segundos pasa; en un panel donde el ISP trabaja ocho horas, no. Así que: · texto verde sobre claro → --h-brand-ink #007054 6.09:1 · texto sobre el verde → --h-brand-on #04231C 7.38:1 Mismo color de marca, mismo gradiente, texto que se lee. */ --h-brand-ink:#007054; --h-brand-on:#04231C; --h-brand-wash:#E6FAF4; /* el verde al 8%, para fondos de etiqueta */ /* ── Neutros ──────────────────────────────────────────────────────────────── AZULADOS, derivados del fondo del sitio (#0B1220) — no grises neutros y no los verdosos de antes. La razón es práctica: con neutros verdosos todo tira a verde y el verde de marca deja de destacar. Con neutros fríos, el único verde de la pantalla es el de la marca, y ahí sí señala algo. */ --h-ground:#F4F7FB; /* el suelo de la página */ --h-surface:#FFFFFF; /* tarjetas */ --h-surface-2:#EEF3F9; /* cajas hundidas dentro de una tarjeta */ --h-line:#E3EAF3; /* hairline normal */ --h-line-strong:#CBD7E6; /* hairline de campo de formulario */ /* Los tres niveles de tinta. El terciario es #66788F y no el #78899F que había: ese daba 3.57:1 y se usa en etiquetas de 11.5px — abajo del mínimo AA. Este da 4.52:1 y se ve casi igual. */ --h-ink:#0B1220; /* 18.72:1 */ --h-ink-2:#46566E; /* 7.46:1 */ --h-ink-3:#66788F; /* 4.52:1 */ /* ── Acentos secundarios ──────────────────────────────────────────────────── Los del sitio. El valor puro va en superficies; el `-ink` es la versión que se lee sobre blanco. */ --h-cyan:#0EA5E9; --h-cyan-ink:#0369A1; --h-cyan-wash:#E4F4FD; /* 5.93:1 */ --h-violet:#8B7BFF; --h-violet-ink:#5B4FD6; --h-violet-wash:#EFEDFE; /* 5.94:1 */ --h-wa:#25D366; /* WhatsApp */ /* ── Semántica ────────────────────────────────────────────────────────────── El sitio no la define — es una landing, no tiene estados. Se eligió dentro de la misma familia fría para que no se vea pegada de otro lado. */ --h-ok:#007054; --h-ok-wash:#E6FAF4; /* 6.09:1 */ --h-warn:#B45309; --h-warn-wash:#FDF3E3; /* 5.02:1 */ --h-crit:#B3305A; --h-crit-wash:#FCEBF1; /* 6.02:1 */ /* El borde de cada estado. Una etiqueta de estado son TRES valores, no dos: el fondo lavado, el texto y el hilo que los separa del blanco de la tarjeta. Sin el tercero la etiqueta se derrite en el fondo y deja de ser una etiqueta. */ --h-ok-line:rgba(0,169,126,.30); --h-warn-line:rgba(180,83,9,.26); --h-crit-line:rgba(179,48,90,.26); --h-cyan-line:rgba(3,105,161,.24); --h-violet-line:rgba(91,79,214,.24); /* ── Forma ────────────────────────────────────────────────────────────────── Los radios del sitio: 18 en tarjetas, 12 en controles grandes, 8 en campos. */ --h-r-s:8px; --h-r-m:12px; --h-r-l:18px; --h-r-pill:999px; /* Dos sombras superpuestas, no una. Una sombra sola se ve plana y sucia; una corta de contacto más una difusa es como se comporta la luz: el borde se apoya, el cuerpo flota apenas. */ --h-shadow:0 1px 2px rgba(11,18,32,.05), 0 10px 28px -14px rgba(11,18,32,.22); --h-shadow-lift:0 2px 6px rgba(11,18,32,.07), 0 22px 46px -20px rgba(11,18,32,.30); --h-glow:0 8px 30px rgba(0,196,146,.35); /* el halo verde del botón del sitio */ /* ── Ritmo ────────────────────────────────────────────────────────────────── La escala del sitio, tal cual. Que los espacios salgan de una escala corta es la mitad de por qué una interfaz se ve armada y no acumulada. */ --h-s1:8px; --h-s2:14px; --h-s3:20px; --h-s4:28px; --h-s5:40px; --h-s6:66px; /* ── Tipografía ───────────────────────────────────────────────────────────── Poppins es la VOZ (títulos, botones, pestañas); Inter es el CUERPO. Poppins en párrafos cansa: es geométrica y a 13px las letras se confunden entre sí. El fallback es el stack del sistema — si el .woff2 no carga, el panel se ve bien igual, solo pierde carácter. */ --h-disp:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif; --h-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --h-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } /* ══════════════════════════════════════════════════════════════════════════════ 2 · ALIAS — lo viejo sigue funcionando ────────────────────────────────────────────────────────────────────────────── No se reescriben custom.css ni las ~1300 declaraciones de color del hook: se reapunta el nombre que ya usan. Cada variable vieja queda como un puntero al token nuevo, y todo lo que la consumía cambia de color solo. ══════════════════════════════════════════════════════════════════════════════ */ :root{ /* Los --hybs-* del tema (custom.css) */ --hybs-brand:linear-gradient(135deg,var(--h-brand),var(--h-brand-lo)); --hybs-brand-from:var(--h-brand); --hybs-brand-to:var(--h-brand-lo); --hybs-brand-text:var(--h-brand-ink); --hybs-ink:var(--h-ink); --hybs-ink-soft:var(--h-ink-2); --hybs-ink-faint:var(--h-ink-3); --hybs-line:var(--h-line); --hybs-surface:var(--h-surface); --hybs-surface-2:var(--h-surface-2); --hybs-surface-3:var(--h-surface-2); --hybs-r-sm:var(--h-r-s); --hybs-r-md:var(--h-r-m); --hybs-r-lg:var(--h-r-l); --hybs-r-pill:var(--h-r-pill); --hybs-shadow-sm:var(--h-shadow); --hybs-shadow-md:var(--h-shadow); --hybs-shadow-lg:var(--h-shadow-lift); /* La escala --primary-* de Nexus. Redefinirla acá es lo que hace que TODO el portal —facturas, tickets, formularios, alertas— tome el color de marca sin tocar una sola regla del tema. Los pasos salen del verde del sitio. */ --primary-50:#E6FAF4; --primary-100:#CCF5E9; --primary-200:#99EBD3; --primary-300:#5FDFB9; --primary-400:#26D3A2; --primary-500:#00C492; --primary-600:#00A97E; --primary-700:#008D69; --primary-800:#007054; --primary-900:#005B45; --primary-950:#003B2D; --primary:var(--h-brand-lo); --primary-lifted:#008D69; --primary-accented:var(--h-brand-ink); /* Los neutros de Nexus, reapuntados a la familia fría. Sin esto el portal seguiría con los grises Tailwind, que al lado del azul del panel se ven apagados y de otra marca. */ --neutral-50:#F7FAFD; --neutral-100:#EEF3F9; --neutral-200:#E3EAF3; --neutral-300:#CBD7E6; --neutral-400:#9AA9BE; --neutral-500:#66788F; --neutral-600:#46566E; --neutral-700:#33415A; --neutral-800:#1B2740; --neutral-900:#0B1220; --neutral-950:#070B16; --text:var(--h-ink); --text-accented:var(--h-ink-2); --text-lifted:var(--h-ink-3); /* NO deriva de --neutral-400 como en Nexus: ese da 2.85:1 sobre blanco y `.text-muted` aparece 32 veces en las plantillas. Va al nivel de tinta terciaria, que es el más claro que todavía se lee. */ --text-muted:var(--h-ink-3); --border-muted:var(--h-line); --border:var(--h-line-strong); --bg-muted:#F7FAFD; --bg-lifted:var(--h-surface-2); --bg-accented:var(--h-line); --bg-inverted:var(--h-ink); --success:var(--h-ok); --success-lifted:#005B45; --success-accented:#003B2D; --info:var(--h-cyan-ink); --info-lifted:#075985; --info-accented:#0C4A6E; --notice:var(--h-violet-ink); --notice-lifted:#4C40C4; --notice-accented:#3F35A6; --warning:var(--h-warn); --warning-lifted:#92400E; --warning-accented:#78350F; --error:var(--h-crit); --error-lifted:#94254A; --error-accented:#7A1D3C; } /* ══════════════════════════════════════════════════════════════════════════════ 3 · TIPOGRAFÍA DEL PORTAL ────────────────────────────────────────────────────────────────────────────── El portal venía en Open Sans y el panel en Poppins+Inter. Ahora es una sola voz de punta a punta: el ISP entra desde hybschat.com y no cambia nada. ══════════════════════════════════════════════════════════════════════════════ */ body{font-family:var(--h-body);color:var(--h-ink); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} h1,h2,h3,h4,h5, .hybs-sidenav-brandtext,.btn,.nav-link,.panel-title,.card-title{ font-family:var(--h-disp);letter-spacing:-.015em;} /* Los números en columna tienen que alinearse. Sin esto, un importe de $9.90 y uno de $110.00 quedan corridos y la columna deja de leerse de un vistazo. */ td,th,.amount,.hybs-mono,.invoice-total{font-variant-numeric:tabular-nums;} a{color:var(--h-brand-ink);} a:hover{color:#005B45;} /* ══════════════════════════════════════════════════════════════════════════════ 4 · EL MENÚ LATERAL — el suelo del sitio ────────────────────────────────────────────────────────────────────────────── Estaba en verde oscuro (#00473A). Pasa al azul del sitio, que es de donde sale la identidad, y además hace que el verde de marca sea lo ÚNICO verde de la columna: el ícono activo y la barra de posición saltan mucho más sobre azul que sobre otro verde. fondo #0B1220 ← --bg-2 del sitio texto blanco 18.72:1 acento #12E2A8 11.12:1 Sigue siendo una sola variable: para volver al verde, --hybs-nav-solid:#00473A. ══════════════════════════════════════════════════════════════════════════════ */ .hybs-sidenav{ --hybs-nav-solid:#0B1220; --hybs-nav-bg:var(--hybs-nav-solid); --hybs-nav-bg-hover:rgba(0,196,146,.13); --hybs-nav-border:rgba(255,255,255,.09); --hybs-nav-fg:#FFFFFF; --hybs-nav-fg-dim:rgba(255,255,255,.72); /* El degradado sutil que el sitio usa en su fondo: el suelo no es plano, se aclara apenas hacia abajo. A este tamaño casi no se ve, y es justamente por eso que funciona. */ background:linear-gradient(180deg,#070B16,#0B1220 40%,#0E1727); } .hybs-sidenav-icon{color:var(--h-brand-hi);} .hybs-sidenav-divider{background:rgba(255,255,255,.09);} .hybs-sidenav-brand::after{background:linear-gradient(90deg,var(--h-brand-hi),var(--h-brand),transparent);} .hybs-sidenav-item.is-current > .hybs-sidenav-link:not(.hybs-sidenav-toggle), .hybs-sidenav-sublink.is-current{background:rgba(0,196,146,.14);} .hybs-sidenav-item.is-current > .hybs-sidenav-link:not(.hybs-sidenav-toggle)::before, .hybs-sidenav-sublink.is-current::before{background:var(--h-brand-hi);} .hybs-sidenav-item.is-current > .hybs-sidenav-link .hybs-sidenav-icon{color:var(--h-brand-hi);} /* ══════════════════════════════════════════════════════════════════════════════ 5 · LOS CHOQUES — reglas que había que desempatar ────────────────────────────────────────────────────────────────────────────── custom.css apunta al panel con selectores de ID y le ganaba a la capa de tema del hook. Acá se desempata: mismo peso, pero este archivo carga después. ══════════════════════════════════════════════════════════════════════════════ */ /* El botón primario. Era el punto peor: texto BLANCO sobre el verde de marca, 2.26:1. Ahora es el botón del sitio —gradiente vertical, halo verde, luz interior arriba— con la tinta oscura: 7.38:1. */ .btn-primary, .btn-primary:not(:disabled):not(.disabled), #hybs-dashboard-root .hybs-isp-save, #hybs-dashboard-root .hybs-btn-green{ background:linear-gradient(180deg,var(--h-brand-hi),var(--h-brand)); border:0; border-radius:var(--h-r-m); font-family:var(--h-disp); font-weight:600; color:var(--h-brand-on) !important; box-shadow:var(--h-glow), inset 0 1px rgba(255,255,255,.45); transition:transform .18s, box-shadow .18s; } .btn-primary:hover, #hybs-dashboard-root .hybs-isp-save:hover, #hybs-dashboard-root .hybs-btn-green:hover{ background:linear-gradient(180deg,var(--h-brand-hi),var(--h-brand)); color:var(--h-brand-on) !important; transform:translateY(-1px); box-shadow:0 14px 40px rgba(0,196,146,.42), inset 0 1px rgba(255,255,255,.5); opacity:1; } .btn-primary:active, #hybs-dashboard-root .hybs-isp-save:active, #hybs-dashboard-root .hybs-btn-green:active{transform:translateY(0);box-shadow:var(--h-shadow);} /* El radio de tarjeta. custom.css lo forzaba a 12; el del sitio es 18. */ .card,.panel, #hybs-dashboard-root .hybs-card{ border-radius:var(--h-r-l); border-color:var(--h-line); box-shadow:var(--h-shadow); } /* ══════════════════════════════════════════════════════════════════════════════ 6 · LAS FIRMAS DEL SITIO ────────────────────────────────────────────────────────────────────────────── Tres gestos que son de hybschat.com y de nadie más. Se portan tal cual para que el panel se sienta el mismo producto, no un backend genérico atrás de la web. ══════════════════════════════════════════════════════════════════════════════ */ /* ── La píldora con el punto que late ── En el sitio encabeza cada sección. Acá sirve para lo mismo que servía allá: decir de qué se trata lo que viene, en una línea. El punto late solo cuando marca algo VIVO (una sesión conectada, una campaña corriendo); si no, va sin la clase `.ld` y queda quieto. */ .hybs-pill{display:inline-flex;align-items:center;gap:9px;padding:6px 13px; border:1px solid rgba(0,196,146,.30);border-radius:var(--h-r-pill); background:rgba(0,196,146,.10);color:var(--h-brand-ink); font-family:var(--h-disp);font-size:12.5px;font-weight:600;line-height:1.4;} .hybs-pill .ld{width:7px;height:7px;border-radius:50%;flex:none; background:var(--h-brand);box-shadow:0 0 0 4px rgba(0,196,146,.18); animation:hybsLatido 2.4s ease-in-out infinite;} @keyframes hybsLatido{ 0%,100%{box-shadow:0 0 0 0 rgba(0,196,146,.35);} 50% {box-shadow:0 0 0 6px rgba(0,196,146,0);} } /* Variantes para estados que no son «todo bien». */ .hybs-pill.is-warn{border-color:rgba(180,83,9,.28);background:var(--h-warn-wash);color:var(--h-warn);} .hybs-pill.is-warn .ld{background:var(--h-warn);box-shadow:0 0 0 4px rgba(180,83,9,.16);animation:none;} .hybs-pill.is-crit{border-color:rgba(179,48,90,.28);background:var(--h-crit-wash);color:var(--h-crit);} .hybs-pill.is-crit .ld{background:var(--h-crit);box-shadow:0 0 0 4px rgba(179,48,90,.16);animation:none;} .hybs-pill.is-off{border-color:var(--h-line-strong);background:var(--h-surface-2);color:var(--h-ink-3);} .hybs-pill.is-off .ld{background:var(--h-ink-3);box-shadow:none;animation:none;} /* ── El hairline que se enciende arriba de la tarjeta ── Un hilo verde que aparece en el borde superior al pasar el mouse. Es la firma más reconocible del sitio y cuesta cero: no mueve nada de lugar, no cambia el tamaño, solo confirma que la tarjeta responde. */ #hybs-dashboard-root .hybs-card{position:relative;overflow:hidden; transition:border-color .22s, box-shadow .22s;} #hybs-dashboard-root .hybs-card::before{content:"";position:absolute;inset:0 0 auto;height:1px; background:linear-gradient(90deg,transparent,rgba(0,196,146,.55),transparent); opacity:0;transition:opacity .22s;pointer-events:none;} #hybs-dashboard-root .hybs-card:hover::before{opacity:1;} #hybs-dashboard-root .hybs-card:hover{border-color:var(--h-line-strong);box-shadow:var(--h-shadow-lift);} /* ── El chip de ícono ── El cuadrado redondeado con el ícono adentro y el halo verde. En el sitio encabeza cada tarjeta de característica. */ .hybs-ic{display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;flex:none; border:1px solid rgba(0,196,146,.25);border-radius:var(--h-r-m); background:rgba(0,196,146,.10);box-shadow:0 0 24px rgba(0,196,146,.15); color:var(--h-brand-ink);font-size:19px;line-height:1;} /* ══════════════════════════════════════════════════════════════════════════════ 7 · TERMINACIONES ══════════════════════════════════════════════════════════════════════════════ */ /* Foco visible en todo el portal, no solo en el panel. Se navega con teclado más de lo que parece, y el anillo por defecto del navegador se pierde sobre gris. */ :focus-visible{outline:2px solid var(--h-brand-lo);outline-offset:2px;border-radius:6px;} /* Selección de texto en verde de marca, apenas. */ ::selection{background:rgba(0,196,146,.22);color:var(--h-ink);} /* La barra de scroll, en la familia fría. Firefox la toma de `scrollbar-color`; los WebKit del pseudo-elemento. */ *{scrollbar-color:var(--h-line-strong) transparent;} ::-webkit-scrollbar{width:11px;height:11px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--h-line-strong);border-radius:99px; border:3px solid transparent;background-clip:content-box;} ::-webkit-scrollbar-thumb:hover{background:#9AA9BE;background-clip:content-box;} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important;} } /* ══════════════════════════════════════════════════════════════════════════════ 8 · MODO OSCURO — los valores exactos del sitio ────────────────────────────────────────────────────────────────────────────── TODAVÍA NO ESTÁ ENCENDIDO: nada pone el atributo. Queda listo y se prueba con `document.documentElement.dataset.hybsTheme = 'dark'` en la consola. Antes vivía dentro del panel y solo lo alcanzaba a él; acá cubre el portal entero, que es lo mínimo para que encenderlo sea una decisión y no un parche. Falta un interruptor con preferencia guardada — es lo que queda pendiente. ══════════════════════════════════════════════════════════════════════════════ */ [data-hybs-theme="dark"]{ /* ── La escala de Nexus, DADA VUELTA ────────────────────────────────────────── `theme.css` la usa 392 veces y no se puede reescribir: es Bootstrap 4.5 de vendor, 242 KB minificados. Pero tampoco hace falta — invirtiendo la rampa, cada regla que ya decía `var(--neutral-100)` sigue significando lo mismo («un paso más cerca del fondo») y se pinta sola del lado oscuro. El orden se conserva: 50 es lo más cercano al fondo y 950 lo más cercano al texto. Lo único que cambia es dónde queda el fondo. */ --neutral-50:#0F1729; --neutral-100:#131B2D; --neutral-200:#1B2740; --neutral-300:#2A3852; --neutral-400:#4C5D78; --neutral-500:#7D8BA3; --neutral-600:#AAB7CA; --neutral-700:#C7D1E0; --neutral-800:#DDE5F0; --neutral-900:#E8EEF7; --neutral-950:#F4F7FB; --bg:#0F1729; /* superficie de tarjeta, no fondo de página */ --bg-muted:#1B2740; /* `--white` no es «el color blanco»: en Nexus es la superficie clara, y de él cuelga `--text-inverted`, que es el texto que va SOBRE `--bg-inverted`. Como `--bg-inverted` se aclara del lado oscuro (deriva de --neutral-900), este tiene que oscurecerse con él o el par se rompe y el texto desaparece. */ --white:#0F1729; --h-ground:#070B16; --h-surface:#0F1729; --h-surface-2:#131B2D; --h-line:rgba(255,255,255,.09); --h-line-strong:rgba(255,255,255,.14); --h-ink:#E8EEF7; /* 15.32:1 sobre la superficie */ --h-ink-2:#AAB7CA; /* 8.80:1 */ --h-ink-3:#7D8BA3; /* 5.19:1 — sobre fondo oscuro este mismo tono SÍ pasa */ /* Sobre oscuro el verde legible se invierte: el claro es el que se lee. */ --h-brand-ink:#12E2A8; /* 10.61:1 */ --h-brand-wash:rgba(0,196,146,.12); --h-cyan-ink:#53BDEB; --h-cyan-wash:rgba(14,165,233,.14); --h-violet-ink:#A99BFF; --h-violet-wash:rgba(139,123,255,.16); --h-ok:#12E2A8; --h-ok-wash:rgba(0,196,146,.12); --h-warn:#E9A855; --h-warn-wash:rgba(233,168,85,.14); --h-crit:#FF7A93; --h-crit-wash:rgba(255,122,147,.14); --h-shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -16px rgba(0,0,0,.8); --h-shadow-lift:0 2px 8px rgba(0,0,0,.55), 0 26px 54px -22px rgba(0,0,0,.9); } /* ══════════════════════════════════════════════════════════════════════════════ 9 · EL CONTROL DE APARIENCIA ────────────────────────────────────────────────────────────────────────────── Tres segmentos al pie del menú lateral. Vive sobre el fondo oscuro de la columna en los dos modos, así que se pinta con blancos translúcidos y no con tokens: el menú es oscuro siempre. ══════════════════════════════════════════════════════════════════════════════ */ .hybs-tema{display:flex;gap:2px;margin:14px 16px 10px;padding:3px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08); border-radius:var(--h-r-pill);} .hybs-tema-btn{flex:1;padding:6px 0;border:0;background:transparent;cursor:pointer; border-radius:var(--h-r-pill);color:rgba(255,255,255,.55);font-size:12.5px;line-height:1; transition:background .15s,color .15s;} .hybs-tema-btn:hover{color:#fff;background:rgba(255,255,255,.07);} .hybs-tema-btn.is-current{background:rgba(0,196,146,.16);color:var(--h-brand-hi);} .hybs-tema-btn:focus-visible{outline:2px solid var(--h-brand-lo);outline-offset:1px;} /* Sin JS el control no hace nada: se oculta en vez de mentir. Lo muestra hybs-tema.js agregando `is-ready` cuando termina de montarse. Se usa una clase y NO `:has()`: en un navegador que no lo soporta, el selector entero se descarta y el control quedaría oculto para siempre. */ .hybs-tema{visibility:hidden;} .hybs-tema.is-ready{visibility:visible;} /* ══════════════════════════════════════════════════════════════════════════════ 10 · MODO OSCURO — las superficies de Bootstrap ────────────────────────────────────────────────────────────────────────────── Invertir la escala de neutros (sección 8) resuelve las 392 reglas de theme.css que ya usaban tokens. Faltan las otras ~950, que son literales de Bootstrap 4.5: #fff, #f8f9fa, #dee2e6, #212529, #6c757d. NO se reescribe theme.min.css. Son 242 KB de vendor y tocarlos significa mantener un fork de Bootstrap para siempre. En vez de eso se pisan acá las superficies que el portal REALMENTE pinta — la lista salió de contar las clases usadas en los .tpl del tema, no de adivinar: card (109), form-control (181), btn-default (121), alert (37), table (30), list-group-item (20), modal, etc. Todo cuelga de `[data-hybs-theme="dark"]`, que suma un punto de especificidad y por eso le gana a Bootstrap sin un solo `!important`. ══════════════════════════════════════════════════════════════════════════════ */ [data-hybs-theme="dark"] body{background:var(--h-ground);color:var(--h-ink);} /* ── Superficies ── */ [data-hybs-theme="dark"] .card, [data-hybs-theme="dark"] .panel, [data-hybs-theme="dark"] .well, [data-hybs-theme="dark"] .modal-content, [data-hybs-theme="dark"] .dropdown-menu, [data-hybs-theme="dark"] .popover, [data-hybs-theme="dark"] .list-group-item{ background-color:var(--h-surface);color:var(--h-ink);border-color:var(--h-line);} [data-hybs-theme="dark"] .card-header, [data-hybs-theme="dark"] .card-footer, [data-hybs-theme="dark"] .modal-header, [data-hybs-theme="dark"] .modal-footer, [data-hybs-theme="dark"] .panel-heading{ background-color:var(--h-surface-2);border-color:var(--h-line);color:var(--h-ink);} [data-hybs-theme="dark"] .card-title, [data-hybs-theme="dark"] .modal-title, [data-hybs-theme="dark"] .page-header, [data-hybs-theme="dark"] h1,[data-hybs-theme="dark"] h2,[data-hybs-theme="dark"] h3, [data-hybs-theme="dark"] h4,[data-hybs-theme="dark"] h5{color:var(--h-ink);} [data-hybs-theme="dark"] .bg-white, [data-hybs-theme="dark"] .bg-light{background-color:var(--h-surface-2)!important;} [data-hybs-theme="dark"] hr, [data-hybs-theme="dark"] .dropdown-divider{border-color:var(--h-line);} [data-hybs-theme="dark"] .text-muted{color:var(--h-ink-3)!important;} /* ── Formularios ── El fondo va un paso MÁS OSCURO que la tarjeta, no más claro. En oscuro un campo más claro que su contenedor se lee como un bloque encendido; hundido se lee como lo que es, un hueco donde se escribe. */ [data-hybs-theme="dark"] .form-control, [data-hybs-theme="dark"] .custom-select, [data-hybs-theme="dark"] textarea, [data-hybs-theme="dark"] input[type="text"], [data-hybs-theme="dark"] input[type="email"], [data-hybs-theme="dark"] input[type="password"], [data-hybs-theme="dark"] input[type="number"], [data-hybs-theme="dark"] input[type="search"], [data-hybs-theme="dark"] input[type="tel"]{ background-color:var(--h-ground);color:var(--h-ink);border-color:var(--h-line-strong);} [data-hybs-theme="dark"] .form-control:focus, [data-hybs-theme="dark"] .custom-select:focus{ background-color:var(--h-ground);color:var(--h-ink); border-color:var(--h-brand-lo);box-shadow:0 0 0 3px var(--h-brand-wash);} [data-hybs-theme="dark"] .form-control::placeholder{color:var(--h-ink-3);opacity:1;} [data-hybs-theme="dark"] .form-control:disabled, [data-hybs-theme="dark"] .form-control[readonly]{background-color:var(--h-surface-2);color:var(--h-ink-3);} [data-hybs-theme="dark"] .input-group-text{ background-color:var(--h-surface-2);color:var(--h-ink-2);border-color:var(--h-line-strong);} [data-hybs-theme="dark"] .control-label, [data-hybs-theme="dark"] label{color:var(--h-ink-2);} [data-hybs-theme="dark"] input[type="checkbox"], [data-hybs-theme="dark"] input[type="radio"]{accent-color:var(--h-brand-lo);} /* El autocompletado de Chrome pinta un amarillo fijo que ignora `background`. Lo único que lo tapa es una sombra interior del tamaño del campo. */ [data-hybs-theme="dark"] input:-webkit-autofill, [data-hybs-theme="dark"] input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--h-ink); box-shadow:0 0 0 1000px var(--h-ground) inset;} /* ── Botones neutros ── `.btn-default` aparece 121 veces: es el botón secundario de todo el portal. */ [data-hybs-theme="dark"] .btn-default, [data-hybs-theme="dark"] .btn-secondary, [data-hybs-theme="dark"] .btn-light, [data-hybs-theme="dark"] .btn-outline-secondary{ background-color:var(--h-surface-2);color:var(--h-ink);border-color:var(--h-line-strong);} [data-hybs-theme="dark"] .btn-default:hover, [data-hybs-theme="dark"] .btn-secondary:hover, [data-hybs-theme="dark"] .btn-light:hover, [data-hybs-theme="dark"] .btn-outline-secondary:hover{ background-color:var(--h-line);color:var(--h-ink);border-color:var(--h-ink-3);} [data-hybs-theme="dark"] .close{color:var(--h-ink-2);text-shadow:none;opacity:.8;} [data-hybs-theme="dark"] .close:hover{color:var(--h-ink);opacity:1;} /* ── Tablas ── */ [data-hybs-theme="dark"] .table{color:var(--h-ink-2);} [data-hybs-theme="dark"] .table th, [data-hybs-theme="dark"] .table td{border-color:var(--h-line);} [data-hybs-theme="dark"] .table thead th{color:var(--h-ink-3);border-color:var(--h-line-strong);} [data-hybs-theme="dark"] .table-striped tbody tr:nth-of-type(odd){background-color:rgba(255,255,255,.028);} [data-hybs-theme="dark"] .table-hover tbody tr:hover{background-color:rgba(255,255,255,.055);color:var(--h-ink);} [data-hybs-theme="dark"] .total-row{background-color:var(--h-surface-2);color:var(--h-ink);} /* ── Avisos ── Bootstrap los pinta con un pastel clarísimo que en oscuro deslumbra. Van con el lavado del sistema y una barra de color a la izquierda, que es como el panel ya marca los estados. */ [data-hybs-theme="dark"] .alert{border-color:var(--h-line);background-color:var(--h-surface-2); color:var(--h-ink-2);border-left-width:3px;} [data-hybs-theme="dark"] .alert-success{background-color:var(--h-ok-wash);color:var(--h-ok);border-left-color:var(--h-ok);} [data-hybs-theme="dark"] .alert-info{background-color:var(--h-cyan-wash);color:var(--h-cyan-ink);border-left-color:var(--h-cyan-ink);} [data-hybs-theme="dark"] .alert-warning{background-color:var(--h-warn-wash);color:var(--h-warn);border-left-color:var(--h-warn);} [data-hybs-theme="dark"] .alert-danger{background-color:var(--h-crit-wash);color:var(--h-crit);border-left-color:var(--h-crit);} [data-hybs-theme="dark"] .badge-secondary, [data-hybs-theme="dark"] .badge-light, [data-hybs-theme="dark"] .label-default{background-color:var(--h-surface-2);color:var(--h-ink-2);} /* ── Navegación y cabecera ── */ [data-hybs-theme="dark"] .header, [data-hybs-theme="dark"] .topbar, [data-hybs-theme="dark"] .footer{background-color:var(--h-surface);border-color:var(--h-line);color:var(--h-ink-2);} [data-hybs-theme="dark"] .nav-tabs{border-color:var(--h-line);} [data-hybs-theme="dark"] .nav-tabs .nav-link{color:var(--h-ink-2);border-color:transparent;} [data-hybs-theme="dark"] .nav-tabs .nav-link:hover{border-color:var(--h-line);} [data-hybs-theme="dark"] .nav-tabs .nav-link.active{ background-color:var(--h-surface);color:var(--h-brand-ink);border-color:var(--h-line) var(--h-line) var(--h-surface);} [data-hybs-theme="dark"] .breadcrumb{background-color:var(--h-surface-2);color:var(--h-ink-3);} [data-hybs-theme="dark"] .dropdown-item{color:var(--h-ink-2);} [data-hybs-theme="dark"] .dropdown-item:hover, [data-hybs-theme="dark"] .dropdown-item:focus{background-color:var(--h-surface-2);color:var(--h-ink);} [data-hybs-theme="dark"] .modal-backdrop.show{opacity:.7;} /* ── Código ── */ [data-hybs-theme="dark"] code, [data-hybs-theme="dark"] pre, [data-hybs-theme="dark"] kbd{background-color:var(--h-surface-2);color:var(--h-brand-ink);} /* ── El panel propio ── Las tarjetas del dashboard traen `background:#fff` escrito a mano en el hook. Es el único blanco literal que queda ahí y se corrige acá en vez de tocar 61 líneas de PHP. */ [data-hybs-theme="dark"] .hybs-wrap [style*="background:#fff"], [data-hybs-theme="dark"] .hybs-wrap [style*="background: #fff"], [data-hybs-theme="dark"] .hybs-wrap [style*="background:#FFF"]{ background:var(--h-surface)!important;} [data-hybs-theme="dark"] .hybs-mtx th.hybs-mtx-h, [data-hybs-theme="dark"] .hybs-mtx td.hybs-mtx-h, [data-hybs-theme="dark"] .hybs-tmpl-item, [data-hybs-theme="dark"] .hybs-lbl-chip, [data-hybs-theme="dark"] .hybs-modal, [data-hybs-theme="dark"] .hybs-isp-modal-inner, [data-hybs-theme="dark"] .hybs-isp-modal-content, [data-hybs-theme="dark"] .hybs-tabs-more-menu{ background:var(--h-surface);color:var(--h-ink);border-color:var(--h-line);} [data-hybs-theme="dark"] .hybs-btn-outline{background:var(--h-surface-2);} [data-hybs-theme="dark"] .hybs-version-pill{background:var(--h-surface-2);} /* La barra de pestañas del panel la pinta custom.css con blanco literal. */ [data-hybs-theme="dark"] #hybs-dashboard-root .hybs-tabs-nav{background:var(--h-surface-2);border-color:var(--h-line);} [data-hybs-theme="dark"] #hybs-dashboard-root .hybs-tab-btn{color:var(--h-ink-2);} [data-hybs-theme="dark"] #hybs-dashboard-root .hybs-tab-btn:hover{background:rgba(255,255,255,.06);color:var(--h-ink);} [data-hybs-theme="dark"] #hybs-dashboard-root .hybs-tab-btn.active{ background:var(--h-surface);color:var(--h-brand-ink);border-color:var(--h-line);} [data-hybs-theme="dark"] #hybs-dashboard-root .hybs-version-pill:hover{background:var(--h-brand-wash);} /* ── Imágenes ── Los logos y capturas pensados para fondo claro quedan como un recorte encendido. Bajarles el brillo un punto los integra sin desteñirlos. */ [data-hybs-theme="dark"] .hybs-sidenav-brand img{filter:brightness(0) invert(1);} /* ══════════════════════════════════════════════════════════════════════════════ 11 · LOS HUECOS QUE APARECIERON AL PASEAR EL MODO OSCURO ────────────────────────────────────────────────────────────────────────────── La sección 10 salió de contar clases en las plantillas. Faltaba el paso de al lado: cruzar esas clases contra lo que theme.min.css PINTA de claro. Ese cruce dio 19 candidatas en facturas, tickets y perfil; diez eran reales y son estas. Las otras nueve eran falsos positivos — botones de color con texto blanco, que está bien en los dos modos. ══════════════════════════════════════════════════════════════════════════════ */ /* `.btn` a secas trae `color:#212529` de Bootstrap y aparece 21-43 veces por página. Sin variante de color, ese texto casi negro caía sobre el fondo oscuro del botón: invisible. Es el hueco más grande de los diez. */ [data-hybs-theme="dark"] .btn{color:var(--h-ink);} [data-hybs-theme="dark"] .btn:hover{color:var(--h-ink);} /* Los botones que SÍ traen color propio se quedan con su texto blanco: sobre verde, rojo o azul saturado el blanco se lee bien y es lo esperado. */ [data-hybs-theme="dark"] .btn-primary, [data-hybs-theme="dark"] .btn-success, [data-hybs-theme="dark"] .btn-danger, [data-hybs-theme="dark"] .btn-info, [data-hybs-theme="dark"] .btn-warning, [data-hybs-theme="dark"] .btn-dark{color:#fff;} [data-hybs-theme="dark"] .btn-primary{color:var(--h-brand-on);} /* `.table-list` es el listado compartido: LA tabla de facturas y la de tickets. Pintaba `background:#fff` en el thead y en cada celda. */ [data-hybs-theme="dark"] table.table-list thead th{background-color:var(--h-surface-2);color:var(--h-ink-3);} [data-hybs-theme="dark"] .table-list>tbody>tr>td, [data-hybs-theme="dark"] .table-list>tbody>tr{background-color:var(--h-surface);color:var(--h-ink-2);} [data-hybs-theme="dark"] .table-list>tbody>tr:hover>td{background-color:var(--h-surface-2);} /* El editor de respuesta del ticket. Lleva `!important` en el tema, así que hay que igualarlo — es la única regla de toda la capa oscura que lo necesita. */ [data-hybs-theme="dark"] .md-editor>.md-preview, [data-hybs-theme="dark"] .md-editor>textarea.markdown-editor{ background-color:var(--h-ground)!important;color:var(--h-ink);} [data-hybs-theme="dark"] .md-editor, [data-hybs-theme="dark"] .md-editor .md-header{background-color:var(--h-surface-2);border-color:var(--h-line-strong);} [data-hybs-theme="dark"] .markdown-content h1,[data-hybs-theme="dark"] .md-preview h1, [data-hybs-theme="dark"] .markdown-content h2,[data-hybs-theme="dark"] .md-preview h2, [data-hybs-theme="dark"] .markdown-content h3,[data-hybs-theme="dark"] .md-preview h3, [data-hybs-theme="dark"] .markdown-content h4,[data-hybs-theme="dark"] .md-preview h4, [data-hybs-theme="dark"] .markdown-content h5,[data-hybs-theme="dark"] .md-preview h5{color:var(--h-ink);} [data-hybs-theme="dark"] .markdown-content,[data-hybs-theme="dark"] .md-preview{color:var(--h-ink-2);} /* Adjuntar un archivo al ticket. */ [data-hybs-theme="dark"] .custom-file-label{background-color:var(--h-ground);color:var(--h-ink);border-color:var(--h-line-strong);} [data-hybs-theme="dark"] .custom-file-label::after{background-color:var(--h-surface-2);color:var(--h-ink-2);} [data-hybs-theme="dark"] .custom-file-input:disabled~.custom-file-label{background-color:var(--h-surface-2);color:var(--h-ink-3);} /* Listas navegables y pestañas del tema. La de pestañas lleva `!important`. */ [data-hybs-theme="dark"] .list-group-item-action:focus, [data-hybs-theme="dark"] .list-group-item-action:hover{background-color:var(--h-surface-2);color:var(--h-ink);} [data-hybs-theme="dark"] .list-group-item-action:active{background-color:var(--h-line);color:var(--h-ink);} [data-hybs-theme="dark"] .responsive-tabs-sm .nav-item a:hover{background-color:var(--h-surface-2);} [data-hybs-theme="dark"] .responsive-tabs-sm .nav-item a.active{background-color:var(--h-surface)!important;color:var(--h-brand-ink);} /* El ojo que muestra la contraseña, en perfil y seguridad. */ [data-hybs-theme="dark"] .input-group .btn-reveal-pw:hover, [data-hybs-theme="dark"] .input-group .btn-reveal-pw:active{background-color:var(--h-surface-2);color:var(--h-ink);} /* Las tarjetas de la portada del área de cliente. */ [data-hybs-theme="dark"] body .primary-content .client-home-cards .card .card-header .btn, [data-hybs-theme="dark"] body .primary-content .client-home-cards .card .card-footer{background:var(--h-surface-2);} /* El modal de idioma y moneda. */ [data-hybs-theme="dark"] .modal-localisation .item-selector .item:hover{background-color:var(--h-surface-2);color:var(--h-ink);} /* ══════════════════════════════════════════════════════════════════════════════ 12 · LA FACTURA, LA COTIZACIÓN Y LA NOTA ────────────────────────────────────────────────────────────────────────────── Estas tres plantillas tienen propio y NO pasan por includes/head.tpl, así que se habían quedado afuera del rediseño entero: sin las fuentes de la marca, sin tokens, sin modo oscuro. Ahora traen el sistema ellas mismas, cargado después de invoice.min.css (151 KB de Bootstrap) para ganarle por orden. En PANTALLA acompañan el modo elegido. AL IMPRIMIR vuelven a blanco siempre: un documento impreso en oscuro gasta tinta, se lee peor y no es lo que nadie espera de una factura. ══════════════════════════════════════════════════════════════════════════════ */ .invoice-container,.outer-wrapper,.inner-wrapper{font-family:var(--h-body);} .invoice-header,.invoice-container h1,.invoice-container h2,.invoice-container h3{font-family:var(--h-disp);letter-spacing:-.02em;} .invoice-container .total-row,.invoice-container .table td,.invoice-container .table th{font-variant-numeric:tabular-nums;} [data-hybs-theme="dark"] .outer-wrapper, [data-hybs-theme="dark"] .inner-wrapper, [data-hybs-theme="dark"] .invoice-container{background-color:var(--h-surface);color:var(--h-ink);} [data-hybs-theme="dark"] .invoice-header{border-color:var(--h-line);color:var(--h-ink);} [data-hybs-theme="dark"] .invoice-col, [data-hybs-theme="dark"] .transactions-container, [data-hybs-theme="dark"] .payment-btn-container{color:var(--h-ink-2);} [data-hybs-theme="dark"] .invoice-qr-wrapper{background:#fff;padding:6px;border-radius:8px;} [data-hybs-theme="dark"] .small-text{color:var(--h-ink-3);} /* El estado de la factura: en el tema es un bloque de color plano; acá va con el lavado del sistema, que es como el panel marca los estados en todas partes. */ [data-hybs-theme="dark"] .invoice-status.paid{background:var(--h-ok-wash);color:var(--h-ok);} [data-hybs-theme="dark"] .invoice-status.unpaid{background:var(--h-warn-wash);color:var(--h-warn);} [data-hybs-theme="dark"] .invoice-status.cancelled, [data-hybs-theme="dark"] .invoice-status.refunded, [data-hybs-theme="dark"] .invoice-status.draft, [data-hybs-theme="dark"] .invoice-status.collections{background:var(--h-crit-wash);color:var(--h-crit);} @media print{ /* Papel blanco, siempre. Se pisa la raíz entera, no cada elemento: cualquier cosa que herede color vuelve sola al modo claro. */ [data-hybs-theme="dark"]{ --h-ground:#FFFFFF; --h-surface:#FFFFFF; --h-surface-2:#F4F7FB; --h-line:#E3EAF3; --h-line-strong:#CBD7E6; --h-ink:#0B1220; --h-ink-2:#46566E; --h-ink-3:#66788F; --h-brand-ink:#007054; --h-brand-wash:#E6FAF4; --h-ok:#007054; --h-ok-wash:#E6FAF4; --h-warn:#B45309; --h-warn-wash:#FDF3E3; --h-crit:#B3305A; --h-crit-wash:#FCEBF1; } [data-hybs-theme="dark"] body, [data-hybs-theme="dark"] .outer-wrapper, [data-hybs-theme="dark"] .inner-wrapper, [data-hybs-theme="dark"] .invoice-container{background:#fff!important;color:#0B1220!important;} } /* Los dos últimos, encontrados al verificar uno por uno los que el cruce daba por dudosos. `.btn-light` y `.btn-outline-light` se encienden en blanco al pasar el mouse o al quedar deshabilitados — no es ilegible (fondo claro, texto oscuro), pero es un botón blanco brillando en una página oscura. */ [data-hybs-theme="dark"] .btn-outline-light:hover, [data-hybs-theme="dark"] .btn-outline-light:not(:disabled):not(.disabled).active, [data-hybs-theme="dark"] .btn-outline-light:not(:disabled):not(.disabled):active, [data-hybs-theme="dark"] .show>.btn-outline-light.dropdown-toggle{ background-color:var(--h-surface-2);color:var(--h-ink);border-color:var(--h-line-strong);} [data-hybs-theme="dark"] .btn-light.disabled, [data-hybs-theme="dark"] .btn-light:disabled{ background-color:var(--h-surface-2);color:var(--h-ink-3);border-color:var(--h-line);}