/* ==========================================================================
NeaTech — tema hijo "neatech-native" (padre: twenty-one)
Hoja única del tema. La carga header.tpl con un /css/custom.css con {assetExists}. Sería
el camino "oficial", pero en 9.0.8 el PADRE ya trae su propio css/custom.css
(148 líneas: `html { font-size: 14px }` más una paleta de variables :root).
assetExists resuelve una sola ruta y gana el hijo, así que un custom.css
nuestro SOMBREARÍA al del padre: se perdería el font-size base (todo el
portal crece ~14%) y quedarían sin definir sus tokens. Con otro nombre, el
custom.css del padre sigue cargando y esta hoja se suma encima. En 8.13.x el
padre no tiene custom.css y el resultado es el mismo.
REGLAS DURAS DE ESTE ARCHIVO
1. Unidades en px, no rem: el mide 14px en 9.0.8 y 16px en 8.13.x.
Un rem no significa lo mismo en las dos versiones.
2. Prohibido filter, backdrop-filter, transform, perspective, will-change y
contain:paint sobre html, body, #header, .navbar, .main-navbar-wrapper,
#main-body y .primary-content. Cualquiera de esos convierte al elemento en
containing block y rompe TODOS los position:fixed de la página: el rail,
el overlay de carga, el botón de volver al admin y el desplegable de
países del teléfono en mobile. Es exactamente cómo se rompió el menú móvil
del tema anterior en 2026-05.
3. Nada de dark mode por inversión (filter: invert). Rompe banderas, captcha,
logos de tarjetas y logos de terceros.
4. !important sólo donde el padre o Bootstrap ya lo usan. Cada caso va
comentado con el motivo.
5. Los textos y clases nt-* de la portada son contrato con el hook
ntc_english_ui.php. Ver homepage.tpl.
CONTRASTE (WCAG 2.1, calculado, no estimado)
#F5F2ED / #0F0E0D = 17.27:1 #DED8CC / #0F0E0D = 13.59:1
#A6A099 / #0F0E0D = 7.45:1 #9C9790 / #0F0E0D = 6.65:1
#F15A29 / #0F0E0D = 5.73:1 #F15A29 / #1B1918 = 5.20:1
#6E6962 / #0F0E0D = 3.54:1 -> NO alcanza para texto (sólo bordes/adornos)
#FFFFFF / #F15A29 = 3.37:1 -> NO alcanza: por eso el botón primario lleva
texto carbón (#0F0E0D / #F15A29 = 5.73:1).
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
/* ==========================================================================
1. TOKENS
========================================================================== */
:root {
/* Superficies */
--nt-bg: #0F0E0D;
--nt-bg-alt: #14120F;
--nt-surface: #1B1918;
--nt-surface-2: #221F20;
--nt-surface-3: #2A2725;
/* Líneas. Alfa claro sobre fondo oscuro: nunca rgba(0,0,0,X), que sobre
oscuro oscurece todavía más y hace desaparecer el borde. */
--nt-line: rgba(245, 242, 237, .10);
--nt-line-strong: rgba(245, 242, 237, .20);
/* Texto */
--nt-text: #F5F2ED;
--nt-text-2: #DED8CC;
--nt-muted: #A6A099;
--nt-muted-2: #9C9790;
--nt-faint: #6E6962; /* 3.54:1 — sólo bordes y adornos, nunca texto */
/* Marca */
--nt-accent: #F15A29;
--nt-accent-dark: #C8431B;
--nt-accent-light: #F4784F; /* 7.02:1 sobre el fondo: el hover legible */
--nt-accent-soft: rgba(241, 90, 41, .13);
--nt-accent-line: rgba(241, 90, 41, .35);
--nt-on-accent: #0F0E0D;
/* Estado. Verificados sobre #0F0E0D: 8.10 / 9.98 / 6.95 / 7.30 */
--nt-ok: #36C055;
--nt-warn: #E8B23A;
--nt-danger: #FF6B6B;
--nt-info: #63B3ED;
--nt-radius: 8px;
--nt-radius-lg: 12px;
--nt-rail: 260px;
--nt-topbar-h: 44px;
--nt-font: 'Outfit', 'Segoe UI', Roboto, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
--nt-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
/* Alias que consumen los formularios de pedido propios
(templates/orderforms/neatech-*-native/products.tpl usa
var(--brand-primary, #F15A29)). Definirlos acá hace que un cambio de
paleta se propague a las vidrieras en vez de quedar en su fallback. */
--brand-primary: #F15A29;
--brand-primary-darker: #C8431B;
--brand-primary-lighter: #F4784F;
--brand-secondary: #C8431B;
}
/* ==========================================================================
2. BASE
========================================================================== */
html {
-webkit-text-size-adjust: 100%;
/* Sin esto el navegador sigue dibujando en claro lo que no controla el
CSS: el desplegable nativo de los , las barras de scroll del
sistema y los controles de fecha. */
color-scheme: dark;
}
/* Autocompletado de Chromium: pinta el campo de un amarillo/blanco propio con
!important desde el user-agent, y no se puede pisar con background-color.
El truco del box-shadow interior es la única forma de taparlo. Se ve en el
login y en el registro, que es donde el navegador siempre autocompleta. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: var(--nt-text);
-webkit-box-shadow: 0 0 0 1000px var(--nt-surface-2) inset;
caret-color: var(--nt-text);
/* la transición larguísima evita el parpadeo claro del primer frame */
transition: background-color 9999s ease-in-out 0s;
}
/* El relleno del autofill y el aro de foco son LA MISMA propiedad: en Blink
-webkit-box-shadow es un alias de box-shadow, no una capa aparte. Y como
`input:-webkit-autofill:focus` vale (0,2,1) —un tipo y dos pseudo-clases—
le gana a `.form-control:focus-visible` (0,2,0): el relleno le borraba el
aro al campo autocompletado, justo en el login, que es donde el navegador
siempre autocompleta. Hay que reponer las dos capas en UNA declaracion, con
el relleno primero.
OJO: esta regla tambien vale (0,2,1), o sea que EMPATA con el bloque de
arriba y gana por orden. Tiene que quedar siempre despues de aquel. */
input:-webkit-autofill:focus-visible,
textarea:-webkit-autofill:focus-visible,
select:-webkit-autofill:focus-visible {
-webkit-box-shadow: 0 0 0 1000px var(--nt-surface-2) inset,
0 0 0 2px var(--nt-bg),
0 0 0 4px var(--nt-accent);
box-shadow: 0 0 0 1000px var(--nt-surface-2) inset,
0 0 0 2px var(--nt-bg),
0 0 0 4px var(--nt-accent);
}
/* En el registro pasa exactamente al reves: ahi
`#registration .form-control:focus-visible` (1,2,0) le gana al bloque de
autofill (0,2,1), asi que se conserva el aro pero se pierde el relleno y
vuelve a asomar el fondo de autofill de Chromium mientras el campo esta
enfocado. Con (1,2,1) quedan bien los dos lados. */
#registration input:-webkit-autofill:focus-visible,
#registration textarea:-webkit-autofill:focus-visible,
#registration select:-webkit-autofill:focus-visible {
-webkit-box-shadow: 0 0 0 1000px var(--nt-surface-2) inset,
0 0 0 2px var(--nt-bg),
0 0 0 4px var(--nt-accent);
box-shadow: 0 0 0 1000px var(--nt-surface-2) inset,
0 0 0 2px var(--nt-bg),
0 0 0 4px var(--nt-accent);
}
body,
body.primary-bg-color {
/* .primary-bg-color (0,1,0) es lo que pinta el body en Twenty-One; pisar
sólo `body` (0,0,1) no alcanza. */
background-color: var(--nt-bg);
color: var(--nt-text-2);
font-family: var(--nt-font);
}
.secondary-bg-color {
background-color: var(--nt-bg-alt);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: var(--nt-text);
font-weight: 700;
}
a {
color: var(--nt-accent);
}
/* El hover NO puede ir al naranja oscuro: #C8431B sobre carbón da 3.06:1 y
reprueba AA justo cuando el usuario apunta al enlace. Se aclara en vez de
oscurecer: #F4784F sobre #0F0E0D da 7.02:1. */
a:hover,
a:focus {
color: var(--nt-accent-light);
}
hr {
border-top-color: var(--nt-line);
}
code, kbd, pre, samp {
font-family: var(--nt-mono);
}
code {
color: var(--nt-accent);
background-color: var(--nt-accent-soft);
padding: 2px 5px;
border-radius: 4px;
}
pre {
color: var(--nt-text-2);
background-color: var(--nt-surface);
border: 1px solid var(--nt-line);
border-radius: var(--nt-radius);
padding: 14px 16px;
}
::selection {
background-color: var(--nt-accent);
color: var(--nt-on-accent);
}
/* Barra de scroll: sin esto queda una franja blanca en Chromium sobre un
portal negro. */
* {
scrollbar-color: var(--nt-surface-3) var(--nt-bg);
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--nt-bg);
}
::-webkit-scrollbar-thumb {
background: var(--nt-surface-3);
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--nt-faint);
}
/* --- Foco -----------------------------------------------------------------
Twenty-One pone `.form-control:focus { box-shadow: none }`, así que el foco
visible hay que reconstruirlo. El anillo es doble a propósito: un aro carbón
pegado al elemento y un aro naranja afuera. Así se ve tanto sobre el fondo
oscuro como sobre un botón naranja, donde un aro naranja solo sería
invisible. El `outline: transparent` no es decorativo: es lo que hace que el
foco siga existiendo en modo alto contraste de Windows, donde los box-shadow
se descartan. */
:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--nt-bg), 0 0 0 4px var(--nt-accent);
border-radius: 3px;
}
.btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible,
a:focus-visible {
box-shadow: 0 0 0 2px var(--nt-bg), 0 0 0 4px var(--nt-accent);
}
/* Navegación con mouse: no se dibuja el anillo, pero NUNCA outline:none a
secas, que dejaría al teclado sin foco en navegadores sin :focus-visible. */
:focus:not(:focus-visible) {
outline: none;
}
/* El padre apaga el anillo de TODOS los botones del header con
`header.header .btn:focus { box-shadow: none }` (0,3,1), que le gana al
(0,2,0) de arriba. Sin esto no muestran foco por teclado ni el carrito, ni
el buscador, ni la hamburguesa, ni el botón de notificaciones. Se iguala la
especificidad y se gana por orden de carga. */
header.header .btn:focus-visible,
header.header .nav-link:focus-visible,
header.header a:focus-visible {
box-shadow: 0 0 0 2px var(--nt-bg), 0 0 0 4px var(--nt-accent);
outline: 2px solid transparent;
outline-offset: 2px;
}
/* La paginacion: el padre hace `.page-link:focus { outline: 0; box-shadow:
halo azul }` (0,2,0). Aparece al pie de cada listado del area de cliente. */
.page-link:focus-visible {
box-shadow: 0 0 0 2px var(--nt-bg), 0 0 0 4px var(--nt-accent);
outline: 2px solid transparent;
outline-offset: 2px;
}
/* El buscador de dominios de la portada apaga el foco con
`.home-domain-search .input-group-wrapper .form-control:focus` (0,4,0). */
.home-domain-search .input-group-wrapper .form-control:focus-visible {
box-shadow: 0 0 0 2px var(--nt-bg), 0 0 0 4px var(--nt-accent);
}
/* El carrito apaga el foco COMPLETO con
`#order-standard_cart .form-control:focus` (1,2,0), y ADEMAS su hoja carga
DESPUES que esta: con la misma especificidad perderiamos igual. Por eso va
prefijado con `body`, que lo lleva a (1,2,1). Sin esto, todo el paso de
configuracion y checkout se recorre a ciegas con el teclado. */
body #order-standard_cart .form-control:focus-visible,
body #order-standard_cart .field:focus-visible,
body #order-standard_cart .custom-select:focus-visible {
border-color: var(--nt-accent);
box-shadow: 0 0 0 2px var(--nt-bg), 0 0 0 4px var(--nt-accent);
outline: 2px solid transparent;
outline-offset: 2px;
}
/* Alto contraste de Windows. En forced-colors el navegador DESCARTA los
box-shadow y respeta el outline, pero un outline transparent sigue siendo
transparente: sin este bloque no queda NINGÚN indicador de foco en todo el
portal para quien usa ese modo. Se pide un color del sistema y no uno
propio, porque en forced-colors los colores de autor se ignoran. */
@media (forced-colors: active) {
:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible,
header.header .btn:focus-visible,
header.header a:focus-visible,
a:focus-visible,
.page-link:focus-visible,
#registration .form-control:focus-visible,
#registration .custom-select:focus-visible,
body #order-standard_cart .form-control:focus-visible,
body #order-standard_cart .field:focus-visible,
.custom-control-input:focus-visible ~ .custom-control-label::before {
outline: 3px solid Highlight;
outline-offset: 2px;
}
}
/* Sólo el borde. El anillo lo pone la regla de :focus-visible de arriba y NO
se repite acá: las dos valen (0,2,0), así que la de más abajo gana, y con un
box-shadow acá el campo enfocado terminaba con un resplandor naranja al 22%
de opacidad (≈1.9:1 contra el fondo) en lugar del anillo. Reprobaba el 3:1
que pide WCAG 1.4.11 para el indicador de foco. Se detectó tabulando de
verdad: llamar a .focus() por script no activa :focus-visible y el problema
no se ve. */
.form-control:focus {
border-color: var(--nt-accent);
}
/* ==========================================================================
3. SHELL — rail de escritorio, topbar y header móvil
El marcado es el nativo de Twenty-One. Acá sólo se reacomoda con CSS: no hay
una sola etiqueta movida en header.tpl para armar el rail.
========================================================================== */
#header.header {
background-color: var(--nt-surface);
border-color: var(--nt-line);
}
#header .navbar {
background-color: transparent;
}
#header .navbar a,
#header .navbar-nav .nav-link,
#header .toolbar .nav-link {
color: var(--nt-text-2);
}
#header .navbar a:hover,
#header .navbar-nav .nav-link:hover,
#header .toolbar .nav-link:hover {
/* El padre manda estos a #666, que sobre carbón se apaga justo al pasar el
mouse. */
color: var(--nt-accent);
}
#header .navbar-nav .nav-link.active,
#header .navbar-nav .show > .nav-link {
color: var(--nt-accent);
}
/* El padre pinta el ítem activo del desplegable con
`header.header .dropdown-item.active { background-color:#ccc }` (0,3,0),
que le gana al `.dropdown-item.active` (0,2,0) de la sección 4: sin esto
queda gris claro con texto claro encima. */
header.header .dropdown-item.active,
header.header .dropdown-item:active {
background-color: var(--nt-accent);
color: var(--nt-on-accent);
}
#header .navbar-brand {
color: var(--nt-text);
}
/* El tope de alto va FUERA del media query del rail a propósito: el logo de
respaldo tiene 2107x592 px de tamaño intrínseco y, sin esto, en mobile
(donde no hay rail) el navegador lo dibuja a todo lo que le permita el
contenedor. */
#header .navbar-brand img,
#header .navbar-brand .logo-img {
max-width: 100%;
max-height: 44px;
width: auto;
height: auto;
}
/* El marco visible del buscador lo dibuja el ENVOLTORIO:
`header.header .search { border: 1px solid #e5e5e5 }` (0,2,1), y a los
controles de adentro el padre les pone `border: 0` (0,3,1). O sea que
pintar el borde del .form-control no se ve, y queda un rectángulo gris
claro sobre el carbón. Con el id el selector vale (1,1,0) y gana. */
#header .search {
border-color: var(--nt-line);
}
#header .search:focus-within {
border-color: var(--nt-accent);
}
#header .search .form-control {
background-color: rgba(245, 242, 237, .05);
color: var(--nt-text);
}
#header .search .btn,
#header .search .btn-default {
background-color: transparent;
color: var(--nt-muted);
}
#header .search .btn:hover {
color: var(--nt-accent);
}
/* El topbar del padre YA es oscuro; sólo se ajusta el tono y se le da una
línea de separación. */
#header .topbar {
background-color: var(--nt-bg);
border-bottom: 1px solid var(--nt-line);
}
#header .topbar .btn,
#header .topbar .input-group-text {
color: var(--nt-text-2);
}
#header .topbar .btn:hover {
color: var(--nt-accent);
}
/* --- Rail izquierdo, sólo escritorio ---------------------------------------
Por debajo de 1200px no se aplica NADA de esto: queda el header apilado
nativo de Twenty-One con su hamburguesa y su #mainNavbar colapsable, que es
marcado y JS del core sin tocar. */
@media (min-width: 1200px) {
body.nt-shell {
padding-left: var(--nt-rail);
}
body.nt-shell.nt-logged-in {
padding-top: var(--nt-topbar-h);
}
#header.header {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--nt-rail);
z-index: 1030;
display: flex;
flex-direction: column;
border-right: 1px solid var(--nt-line);
/* overflow visible a propósito: el scroll va en el bloque del menú, no
acá, para no arriesgar el recorte del topbar fijo. */
overflow: visible;
}
#header .topbar {
position: fixed;
top: 0;
left: var(--nt-rail);
right: 0;
height: var(--nt-topbar-h);
z-index: 1029;
display: flex;
align-items: center;
}
#header .topbar > .container {
max-width: none;
width: 100%;
padding: 0 18px;
}
#header .topbar .btn {
padding: 4px 10px;
font-size: 13px;
}
/* Los dos .navbar del header pasan a ser filas del rail. */
#header > .navbar {
padding: 0;
display: block;
}
#header > .navbar > .container {
max-width: none;
width: 100%;
padding: 0 16px;
display: flex;
flex-direction: column;
align-items: stretch;
}
#header > .navbar.navbar-light {
flex: 0 0 auto;
padding-top: 14px;
}
#header > .main-navbar-wrapper {
flex: 1 1 auto;
min-height: 0; /* imprescindible para que el hijo flex pueda achicarse */
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 12px;
}
/* Marca arriba del todo, centrada. Los `!important` responden a las
utilidades mr-3 / ml-auto / ml-3 de Bootstrap, que ya vienen con
!important y de otro modo ganan. */
#header .navbar-brand {
margin: 0 0 14px !important;
padding: 0;
text-align: center;
}
#header .navbar-brand img {
max-height: 64px;
max-width: 100%;
object-fit: contain;
}
/* El lockup claro se muestra completo, sin recortar nombre ni bajada. */
#header .navbar-brand .nt-logo-fallback {
width: 224px;
height: auto;
max-height: 64px;
object-fit: contain;
}
/* Input y botón tienen espacio propio: nunca se superponen. */
#header .form-inline {
width: 100%;
margin: 0 0 12px !important;
}
#header .form-inline .input-group.search {
position: relative;
width: 100%;
flex-wrap: nowrap;
}
#header .form-inline .input-group.search .form-control {
width: 0;
min-width: 0;
flex: 1 1 0;
height: 42px;
padding: 8px 10px;
font-size: 14px;
border-radius: var(--nt-radius);
}
#header .form-inline .input-group.search .input-group-prepend {
position: static;
flex: 0 0 42px;
order: 2;
margin: 0;
}
#header .form-inline .input-group.search .input-group-prepend .btn {
width: 42px;
height: 100%;
padding: 0 8px;
border: 0;
background: transparent;
}
#header .toolbar {
flex-direction: column;
align-items: stretch;
margin-bottom: 10px;
}
#header .toolbar .nav-item {
margin: 0 !important;
}
#header .toolbar .cart-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 6px;
border: 1px solid var(--nt-line);
border-radius: var(--nt-radius);
}
/* Menú vertical. La especificidad va con #header por delante para ganarle
a `.navbar-expand-xl .navbar-nav { flex-direction: row }` de Bootstrap. */
#header .navbar-expand-xl .navbar-collapse,
#header #mainNavbar {
flex-direction: column;
align-items: stretch;
width: 100%;
}
#header .navbar-expand-xl .navbar-nav,
#header #mainNavbar .navbar-nav {
flex-direction: column;
width: 100% !important; /* El priority-nav nativo añade w-auto. */
margin: 0 !important; /* contra mr-auto / ml-auto */
}
#header #mainNavbar .nav-item,
#header #mainNavbar .navbar-nav > li {
width: 100%;
}
#header #mainNavbar .nav-link,
#header #mainNavbar .navbar-nav > li > a {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 10px 12px;
border-radius: var(--nt-radius);
font-size: 16px;
line-height: 1.4;
text-align: left;
word-break: break-word;
hyphens: auto;
}
#header #mainNavbar .nav-link:hover,
#header #mainNavbar .navbar-nav > li > a:hover {
background-color: rgba(245, 242, 237, .05);
}
#header #mainNavbar .nav-link i,
#header #mainNavbar .nav-link .fas,
#header #mainNavbar .nav-link .far,
#header #mainNavbar .nav-link .fal,
#header #mainNavbar .nav-link .fad {
font-size: 17px;
}
/* Los submenús se despliegan EN FLUJO dentro del rail, no como flotante.
Un flyout absoluto puede salir del rail y recortarse con su scroll.
En flujo se mantiene dentro y el toggle sigue
siendo el de Bootstrap, sin JS propio.
Bootstrap 4 ya usa posicionamiento estático para dropdowns dentro de un
.navbar, así que estos !important son cinturón y tiradores por si algún
módulo fuerza Popper. */
#header #mainNavbar .dropdown-menu {
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
float: none;
width: 100%;
/* El ancho mínimo nativo no debe forzar desbordes dentro del rail. */
min-width: 0;
margin: 0 0 4px;
padding: 2px 0 6px;
border: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
/* WHMCS 9 pone dropdown-item tanto en li como en a: padding una sola vez. */
#header #mainNavbar .dropdown-menu > li {
padding: 0;
}
#header #mainNavbar .dropdown-menu a {
display: block;
white-space: normal;
padding: 8px 12px !important; /* Contra px-2 / py-0 nativos. */
min-height: 40px;
font-size: 15px;
line-height: 1.4;
text-align: left;
color: var(--nt-text-2);
border-radius: 6px;
}
#header #mainNavbar .dropdown-item:hover,
#header #mainNavbar .dropdown-item:focus {
background-color: rgba(245, 242, 237, .06);
color: var(--nt-text);
}
#header #mainNavbar .dropdown-divider {
border-top-color: var(--nt-line);
}
}
/* ==========================================================================
4. BOOTSTRAP 4 — superficies claras que hay que repintar
Sin esto quedan islas blancas sobre la página negra, o texto oscuro sobre
oscuro. El orden sigue el inventario del tema.
========================================================================== */
/* --- Tarjetas -------------------------------------------------------------
card-header y card-footer usan rgba(0,0,0,.03): sobre fondo oscuro eso
oscurece MÁS en vez de destacar, así que hay que invertir el alfa. */
.card {
background-color: var(--nt-surface);
border-color: var(--nt-line);
color: var(--nt-text-2);
}
.card-header,
.card-footer {
background-color: rgba(245, 242, 237, .04);
border-color: var(--nt-line);
color: var(--nt-text);
}
.card-title,
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
color: var(--nt-text);
}
/* Alias que usan los bloques de MarketConnect */
.mc-promo-manage,
.mc-promo-login {
background-color: var(--nt-surface);
border-color: var(--nt-line);
color: var(--nt-text-2);
}
/* --- Modales --------------------------------------------------------------
El borde rgba(0,0,0,.2) de Bootstrap desaparece sobre negro y el modal se
funde con su propio backdrop. */
.modal-content {
background-color: var(--nt-surface);
border: 1px solid var(--nt-line-strong);
color: var(--nt-text-2);
}
.modal .modal-header,
.modal .modal-footer {
/* 0,2,0 para ganarle a la cabecera gris que agrega el propio tema */
background-color: rgba(245, 242, 237, .04);
border-color: var(--nt-line);
}
.modal-title {
color: var(--nt-text);
}
.modal-backdrop.show {
opacity: .72;
}
/* El botón de cerrar es negro con text-shadow blanco: invisible sobre oscuro.
El tema sólo arregla el que está dentro de .modal-header. */
.close {
color: var(--nt-text);
text-shadow: none;
opacity: .7;
}
.close:hover,
.close:focus {
color: var(--nt-accent);
opacity: 1;
}
/* OJO: no se redeclara .modal-localisation .modal-body. Su fondo es una imagen
con ruta relativa (../img/worldmap.png) que se resolvería contra ESTE
archivo y daría 404. Ese modal ya es oscuro de fábrica. */
.modal-localisation .item-selector .item {
color: var(--nt-text-2);
border-color: var(--nt-line);
}
.modal-localisation .item-selector .item.active {
color: var(--nt-on-accent);
background-color: var(--nt-accent);
border-color: var(--nt-accent);
}
/* --- Desplegables ---------------------------------------------------------
Cubre el navbar secundario, el menú de acciones de cada servicio y el
bootstrap-multiselect del buscador de dominios (que ES un .dropdown-menu). */
.dropdown-menu {
background-color: var(--nt-surface-2);
border-color: var(--nt-line-strong);
color: var(--nt-text-2);
box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}
.dropdown-item {
color: var(--nt-text-2);
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: rgba(245, 242, 237, .07);
color: var(--nt-text);
}
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--nt-accent);
color: var(--nt-on-accent);
}
.dropdown-divider {
border-top-color: var(--nt-line);
}
.dropdown-header {
color: var(--nt-muted-2);
}
/* --- Listas ---------------------------------------------------------------
El menú lateral entero del área de cliente depende de esto. */
.list-group-item {
background-color: var(--nt-surface);
border-color: var(--nt-line);
color: var(--nt-text-2);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
background-color: rgba(245, 242, 237, .06);
color: var(--nt-text);
}
.list-group-item.active {
background-color: var(--nt-accent);
border-color: var(--nt-accent);
color: var(--nt-on-accent);
}
.list-group-item .badge,
.list-group-item .badge-light {
background-color: rgba(245, 242, 237, .12);
color: var(--nt-text);
}
/* --- Tablas ---------------------------------------------------------------
.table-list es la clase real de casi todos los listados del área de cliente
y tiene más especificidad que .table: pisar sólo .table deja todo blanco. */
.table {
color: var(--nt-text-2);
}
.table th,
.table td {
border-color: var(--nt-line);
}
.table thead th {
border-bottom-color: var(--nt-line-strong);
color: var(--nt-text);
}
.table .thead-light th {
background-color: rgba(245, 242, 237, .05);
border-color: var(--nt-line);
color: var(--nt-text);
}
.table-bordered,
.table-bordered th,
.table-bordered td {
border-color: var(--nt-line);
}
/* Las rayas y el hover usan negro translúcido: hay que invertir el alfa, no
sólo recolorear. */
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(245, 242, 237, .03);
}
.table-hover tbody tr:hover {
background-color: rgba(245, 242, 237, .06);
color: var(--nt-text);
}
table.table-list thead th {
background-color: rgba(245, 242, 237, .05);
border-color: var(--nt-line);
color: var(--nt-text);
}
.table-list > tbody > tr > td {
background-color: transparent;
border-color: var(--nt-line);
color: var(--nt-text-2);
}
.table-list > tbody > tr:hover > td {
background-color: rgba(245, 242, 237, .06);
}
/* --- DataTables -----------------------------------------------------------
TRAMPA: el rayado y el hover de DataTables NO se hacen con background-color
sino con box-shadow inset. Pisar el background no saca el tinte claro. */
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
background-color: transparent;
box-shadow: inset 0 0 0 9999px rgba(245, 242, 237, .03);
}
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
background-color: transparent;
box-shadow: inset 0 0 0 9999px rgba(245, 242, 237, .06);
}
/* `.dataTables_wrapper table.table-list { border: 1px solid #ddd }` (0,2,1)
dibuja un marco claro alrededor de CADA listado del área de cliente. */
.dataTables_wrapper table.table-list {
border-color: var(--nt-line);
}
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
background-color: rgba(245, 242, 237, .05);
color: var(--nt-text);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
background-color: var(--nt-surface-2);
border: 1px solid var(--nt-line);
color: var(--nt-text);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
color: var(--nt-muted);
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
border-bottom-color: var(--nt-line);
}
/* --- Formularios ----------------------------------------------------------
El :focus del padre vuelve a poner #fff, por eso el fondo se repite acá.
OJO: para :focus NO se declara border-color. Si se declarara, pisaría el
borde naranja de la regla de foco de la sección 2 (viene antes en el
archivo) y un campo enfocado quedaría igual que uno sin foco. */
.form-control {
background-color: var(--nt-surface-2);
border-color: var(--nt-line-strong);
color: var(--nt-text);
}
.form-control:focus {
background-color: var(--nt-surface-2);
color: var(--nt-text);
}
.form-control::placeholder {
color: var(--nt-muted-2);
opacity: 1;
}
.form-control:disabled,
.form-control[readonly] {
background-color: rgba(245, 242, 237, .05);
color: var(--nt-muted);
}
.form-control-plaintext {
color: var(--nt-text-2);
}
label,
.col-form-label {
color: var(--nt-text-2);
}
.form-text,
small.text-muted {
color: var(--nt-muted) !important; /* .text-muted de Bootstrap trae !important */
}
/* La flecha de .custom-select viene como data-URI con fill oscuro DENTRO del
shorthand `background`: cambiar sólo background-color la deja invisible. Hay
que reescribir el shorthand entero. */
.custom-select {
background: var(--nt-surface-2) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23DED8CC' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 12px center/8px 10px no-repeat;
border-color: var(--nt-line-strong);
color: var(--nt-text);
}
.custom-select:disabled {
background-color: rgba(245, 242, 237, .05);
color: var(--nt-muted);
}
/* Adjuntos de ticket. El ::after es el botón "Browse" y es el que se olvida. */
.custom-file-label {
background-color: var(--nt-surface-2);
border-color: var(--nt-line-strong);
color: var(--nt-text);
}
.custom-file-label::after {
background-color: var(--nt-surface-3);
border-left: 1px solid var(--nt-line);
color: var(--nt-text-2);
}
.input-group-text {
background-color: var(--nt-surface-3);
border-color: var(--nt-line-strong);
color: var(--nt-text-2);
}
/* Checkbox y radio sin marcar: sobre fondo oscuro son cuadrados blancos. */
.custom-control-label::before {
background-color: var(--nt-surface-2);
border-color: var(--nt-line-strong);
}
.custom-control-input:checked ~ .custom-control-label::before {
background-color: var(--nt-accent);
border-color: var(--nt-accent);
}
.custom-control-input:focus-visible ~ .custom-control-label::before {
box-shadow: 0 0 0 2px var(--nt-bg), 0 0 0 4px var(--nt-accent);
}
/* Con el MOUSE, Bootstrap deja su halo azul de fábrica (#007bff) sobre un
tema naranja. Se apaga sólo el caso no-teclado: el de teclado ya está
cubierto por la regla de arriba. */
.custom-control-input:focus:not(:focus-visible) ~ .custom-control-label::before {
box-shadow: none;
}
.custom-control-label {
color: var(--nt-text-2);
}
/* Validación. Los campos inválidos conservan el fondo de .form-control, que ya
está pisado arriba; lo que falta es el color del mensaje y del borde. */
.is-invalid,
.was-validated .form-control:invalid,
.has-error .form-control {
border-color: var(--nt-danger);
}
.invalid-feedback,
.help-block.text-danger,
.has-error .help-block {
color: var(--nt-danger);
}
.is-valid,
.was-validated .form-control:valid {
border-color: var(--nt-ok);
}
.valid-feedback {
color: var(--nt-ok);
}
/* --- Botones --------------------------------------------------------------
.btn hereda color #212529 del reset: en reposo el texto queda oscuro. */
.btn {
color: var(--nt-text-2);
border-radius: var(--nt-radius);
}
.btn:hover {
color: var(--nt-text);
}
/* El botón primario lleva texto carbón, no blanco. Blanco sobre #F15A29 da
3.37:1 y reprueba AA para texto normal (el tamaño de estos botones es 16px,
por debajo del umbral de "texto grande"). Carbón sobre el mismo naranja da
5.73:1. Es el único cambio deliberado de la identidad visual actual. */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
background-color: var(--nt-accent);
border-color: var(--nt-accent);
color: var(--nt-on-accent);
font-weight: 600;
}
/* Los :not() de la regla de arriba la llevan a (0,3,0), así que un
`.btn-primary:hover` pelado (0,2,0) PIERDE y el hover queda muerto en todo
el portal: pasar el mouse por cualquier CTA no cambiaba nada. Hay que
repetir los mismos :not() acá para llegar a (0,4,0). */
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:not(:disabled):not(.disabled):active {
background-color: var(--nt-accent-dark);
border-color: var(--nt-accent-dark);
color: #FFFFFF; /* sobre #C8431B el blanco sí pasa: 4.91:1 */
}
/* Bootstrap trae `.btn-primary.disabled, .btn-primary:disabled` con el azul
compilado del padre. Y OJO con la especificidad: el escudo
`:not(:disabled):not(.disabled)` de la regla base vale (0,3,0), así que un
`.btn-primary.disabled` (0,2,0) pierde contra ella. Se iguala a (0,3,0)
repitiendo el patrón, y se baja la opacidad para que un botón deshabilitado
no se vea igual que uno activo. */
.btn-primary.disabled:not(:focus),
.btn-primary:disabled:not(:focus) {
background-color: var(--nt-accent);
border-color: var(--nt-accent);
color: var(--nt-on-accent);
opacity: .5;
}
/* .btn-default es una clase del propio tema, no de Bootstrap 4. Es el botón
más repetido del chrome. Su estado disabled lleva !important en el padre. */
.btn-default,
.btn-light {
background-color: var(--nt-surface-3);
border-color: var(--nt-line-strong);
color: var(--nt-text-2);
}
.btn-default:hover,
.btn-light:hover {
background-color: var(--nt-surface-2);
border-color: var(--nt-accent-line);
color: var(--nt-text);
}
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active {
background-color: var(--nt-surface-2);
border-color: var(--nt-accent-line);
color: var(--nt-text);
}
.btn-default.disabled,
.btn-default:disabled {
background-color: var(--nt-surface) !important; /* el padre usa !important */
color: var(--nt-muted-2) !important;
border-color: var(--nt-line) !important;
}
.btn-outline-primary {
border-color: var(--nt-accent);
color: var(--nt-accent);
}
.btn-outline-primary:hover {
background-color: var(--nt-accent);
border-color: var(--nt-accent);
color: var(--nt-on-accent);
}
.btn-secondary {
background-color: var(--nt-surface-3);
border-color: var(--nt-line-strong);
color: var(--nt-text);
}
.btn-link {
color: var(--nt-accent);
}
/* --- Avisos ---------------------------------------------------------------
Las 8 variantes son fondos pálidos con texto oscuro: quedan como recuadros
blancos sobre la página negra. Se rehacen como fondo tintado + texto claro.
NO se ocultan: el brief prohíbe esconder avisos de facturas, verificación,
alertas y permisos, y son justamente estos. */
.alert {
border-width: 1px;
border-left-width: 3px;
border-radius: var(--nt-radius);
background-color: var(--nt-surface);
border-color: var(--nt-line);
color: var(--nt-text-2);
}
.alert-heading {
color: var(--nt-text);
}
.alert .alert-link,
.alert .alert-link:hover,
.alert .alert-link:focus {
color: var(--nt-text);
text-decoration: underline;
}
.alert-success {
background-color: rgba(54, 192, 85, .10);
border-color: rgba(54, 192, 85, .45);
color: var(--nt-ok);
}
.alert-info,
.alert-primary {
background-color: rgba(99, 179, 237, .10);
border-color: rgba(99, 179, 237, .45);
color: var(--nt-info);
}
.alert-warning {
background-color: rgba(232, 178, 58, .10);
border-color: rgba(232, 178, 58, .45);
color: var(--nt-warn);
}
.alert-danger {
background-color: rgba(255, 107, 107, .10);
border-color: rgba(255, 107, 107, .45);
color: var(--nt-danger);
}
.alert-secondary,
.alert-light,
.alert-dark {
background-color: var(--nt-surface-2);
border-color: var(--nt-line-strong);
color: var(--nt-text-2);
}
/* --- Insignias y chips de estado ------------------------------------------
Los 25 .status-* del tema son fondos sólidos con texto blanco y tres de
ellos son negro puro, que sobre carbón se funden con la fila. En vez de
reasignar 25 colores (y arriesgar el significado semántico de cada estado),
se les agrega un aro claro: el color sigue siendo el mismo y el chip se ve. */
.badge-light {
background-color: rgba(245, 242, 237, .12);
color: var(--nt-text);
}
/* El aro tiene que separar el chip de la fila incluso cuando el chip es negro
puro (.status-fraud, .status-lost, .status-dead). Con alfa .22 daba 1.44:1
contra el negro y no se veía; con .45 llega a ~3.9:1 y cumple el 3:1 que
pide WCAG 1.4.11 para componentes de interfaz. */
.label {
box-shadow: inset 0 0 0 1px rgba(245, 242, 237, .45);
}
/* --- Navegación por pestañas ---------------------------------------------- */
.nav-tabs {
border-bottom-color: var(--nt-line);
}
/* Algunos módulos usan los anchors Bootstrap 3 sin .nav-link. Mantener fondo
y texto juntos evita blanco sobre blanco al heredar hover/active del padre. */
body .nav-tabs > li > a,
body .nav-tabs .nav-link {
background-color: var(--nt-surface-2);
color: var(--nt-muted);
}
body .nav-tabs > li > a:hover,
body .nav-tabs > li > a:focus,
body .nav-tabs .nav-link:hover,
body .nav-tabs .nav-link:focus {
background-color: var(--nt-surface-3);
border-color: transparent transparent var(--nt-line-strong);
color: var(--nt-text);
}
/* El truco del padre es un border-bottom blanco para "fundir" la pestaña con
el panel: hay que replicarlo con el color del panel oscuro o queda una línea
blanca cruzando. */
body .nav-tabs > li.active > a,
body .nav-tabs > li.active > a:hover,
body .nav-tabs > li.active > a:focus,
body .nav-tabs .nav-link.active,
body .nav-tabs .nav-link.active:hover,
body .nav-tabs .nav-link.active:focus,
body .nav-tabs .nav-item.show .nav-link {
background-color: var(--nt-surface);
border-color: var(--nt-line) var(--nt-line) var(--nt-surface);
color: var(--nt-text);
}
.tab-content {
color: var(--nt-text-2);
}
/* --- Paginación -----------------------------------------------------------
El padre agrega `.pagination > li > a { color:#444 }` (0,1,2), que le gana a
un .page-link plano: hay que pisar ese selector también. */
.page-link,
.pagination > li > a,
.pagination > li > span {
background-color: var(--nt-surface-2);
border-color: var(--nt-line);
color: var(--nt-text-2);
}
.page-link:hover,
.pagination > li > a:hover {
background-color: var(--nt-surface-3);
border-color: var(--nt-line-strong);
color: var(--nt-text);
}
.page-item.active .page-link {
background-color: var(--nt-accent);
border-color: var(--nt-accent);
color: var(--nt-on-accent);
}
.page-item.disabled .page-link {
background-color: var(--nt-surface);
border-color: var(--nt-line);
color: var(--nt-faint);
}
/* --- Migas de pan ---------------------------------------------------------
Son DOS fondos claros apilados: la barra del tema y el .breadcrumb de
Bootstrap. Hay que pisar los dos o queda una franja gris arriba. */
.master-breadcrumb {
background-color: var(--nt-bg-alt);
border-bottom: 1px solid var(--nt-line);
}
.breadcrumb {
background-color: transparent;
}
.breadcrumb-item a {
color: var(--nt-muted);
}
.breadcrumb-item a:hover {
color: var(--nt-accent);
}
.breadcrumb-item.active {
color: var(--nt-text-2);
}
.breadcrumb-item + .breadcrumb-item::before {
color: var(--nt-faint);
}
/* --- Popovers y tooltips --------------------------------------------------
El popover está ACTIVO en el topbar (notificaciones de cuenta). Sus flechas
se dibujan con border-color #fff en pseudo-elementos: sin pisar los cuatro
::after queda un triángulo blanco colgando de un popover oscuro. */
.popover {
background-color: var(--nt-surface-2);
border-color: var(--nt-line-strong);
color: var(--nt-text-2);
box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}
.popover-header {
background-color: rgba(245, 242, 237, .05);
border-bottom-color: var(--nt-line);
color: var(--nt-text);
}
.popover-body {
color: var(--nt-text-2);
}
.bs-popover-top > .arrow::after,
.bs-popover-auto[x-placement^="top"] > .arrow::after {
border-top-color: var(--nt-surface-2);
}
.bs-popover-right > .arrow::after,
.bs-popover-auto[x-placement^="right"] > .arrow::after {
border-right-color: var(--nt-surface-2);
}
.bs-popover-bottom > .arrow::after,
.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
border-bottom-color: var(--nt-surface-2);
}
.bs-popover-left > .arrow::after,
.bs-popover-auto[x-placement^="left"] > .arrow::after {
border-left-color: var(--nt-surface-2);
}
.bs-popover-top > .arrow::before,
.bs-popover-auto[x-placement^="top"] > .arrow::before {
border-top-color: var(--nt-line-strong);
}
.bs-popover-right > .arrow::before,
.bs-popover-auto[x-placement^="right"] > .arrow::before {
border-right-color: var(--nt-line-strong);
}
.bs-popover-bottom > .arrow::before,
.bs-popover-auto[x-placement^="bottom"] > .arrow::before {
border-bottom-color: var(--nt-line-strong);
}
.bs-popover-left > .arrow::before,
.bs-popover-auto[x-placement^="left"] > .arrow::before {
border-left-color: var(--nt-line-strong);
}
.bs-popover-bottom .popover-header::before {
border-bottom-color: rgba(245, 242, 237, .05);
}
/* El popover de notificaciones del topbar tiene sus propios grises. El
contenido se mueve ahí desde #accountNotificationsContent, así que el
selector que importa es el del popover, no .client-alerts. */
.popover-user-notifications .client-alerts li a,
.popover-user-notifications li a {
color: var(--nt-text-2);
}
.popover-user-notifications .client-alerts li a:hover,
.popover-user-notifications li a:hover {
background-color: rgba(245, 242, 237, .06);
color: var(--nt-text);
}
.popover-user-notifications .client-alerts li + li,
.popover-user-notifications li + li {
border-top-color: var(--nt-line);
}
/* CASO INVERTIDO: el tooltip ya es oscuro sobre claro, así que sobre una
página casi negra desaparece. Acá hay que ACLARARLO. */
.tooltip-inner {
background-color: var(--nt-text);
color: var(--nt-bg);
}
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
border-top-color: var(--nt-text);
}
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
border-right-color: var(--nt-text);
}
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
border-bottom-color: var(--nt-text);
}
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
border-left-color: var(--nt-text);
}
/* --- Barras de progreso, jumbotron, toast --------------------------------- */
.progress {
background-color: rgba(245, 242, 237, .08);
}
.jumbotron {
background-color: var(--nt-surface);
color: var(--nt-text-2);
}
.toast,
.toast-header {
background-color: var(--nt-surface-2);
border-color: var(--nt-line);
color: var(--nt-text-2);
}
/* --- Utilidades de color --------------------------------------------------
Las utilidades de Bootstrap ya traen !important, así que sólo se les gana
con !important. `.bg-default` no existe en ninguna hoja pese a estar en el
marcado: se cubre acá para que esas cajas no caigan al blanco de .card. */
.bg-white,
.bg-light,
.bg-default {
background-color: var(--nt-surface) !important;
}
.text-dark,
.text-body {
color: var(--nt-text-2) !important;
}
.text-muted,
.text-black-50 {
color: var(--nt-muted) !important;
}
.text-white-50 {
color: var(--nt-muted-2) !important;
}
.border,
.border-top,
.border-right,
.border-bottom,
.border-left {
border-color: var(--nt-line) !important;
}
/* ==========================================================================
5. TWENTY-ONE — chrome propio y área de cliente
========================================================================== */
/* Botón flotante de volver al admin: siete declaraciones !important en el
padre, así que hay que responder igual. Además es position:fixed, o sea el
primer damnificado si alguien mete un filter en un ancestro. */
.btn-return-to-admin {
background-color: var(--nt-accent) !important;
border-color: var(--nt-accent) !important;
color: var(--nt-on-accent) !important;
}
/* #fullpage-overlay ya es oscuro de fábrica, pero el padre le pone z-index
1000 y este tema pone el rail en 1030: sin subirlo, el velo de carga cubre
todo MENOS el rail, que queda encendido y clickeable mientras
WHMCS procesa. Va por debajo del modal (1050). También sirve de canario: si
alguna vez aparece pegado al contenido en vez de cubrir la pantalla, hay un
filter o un transform en algún ancestro. */
#fullpage-overlay {
z-index: 1040;
}
/* Aviso de verificación de mail y de usuario. La clase real del padre es
`.verification-banner` (fondo #f9f9f9, borde inferior #eee, texto #333):
sin esto queda una franja casi blanca cruzando arriba del contenido. Se
oscurece manteniendo el peso visual; NO se oculta, es un aviso. */
.verification-banner {
background-color: var(--nt-surface-2);
border-bottom-color: var(--nt-line);
color: var(--nt-text-2);
}
.verification-banner .text {
color: var(--nt-text-2);
}
.verification-banner .fas,
.verification-banner .fal,
.verification-banner .far {
color: var(--nt-accent);
}
/* Tiles de la home del cliente: es lo primero que se ve al entrar a
clientarea.php. La clase real del padre es `.tiles .tile` (fondo #f8f8f8,
borde derecho #ccc); `.client-home-tiles` no existe en Twenty-One. */
.tiles .tile {
background-color: var(--nt-surface);
border-right-color: var(--nt-line);
color: var(--nt-text-2);
}
.tiles .tile:hover {
background-color: var(--nt-surface-2);
}
.tiles .tile i,
.tiles .tile:hover i {
color: var(--nt-accent);
}
.tiles .tile .title,
.tiles .tile .stat {
color: var(--nt-text);
}
.tiles .tile .highlight {
color: var(--nt-accent);
}
/* .card-header NO va acá: tiene su propia regla más abajo, con !important
porque el padre la fuerza. Declararla en los dos lados dejaba esta primera
declaración muerta y confundía a quien viniera a editar. */
.client-home-cards .card {
background-color: var(--nt-surface);
border-color: var(--nt-line);
color: var(--nt-text-2);
}
.client-home-cards .card-header {
background-color: rgba(245, 242, 237, .04) !important; /* el padre lo fuerza */
color: var(--nt-text) !important;
}
/* El padre dibuja el separador con `border-bottom`, no con `border-top`:
recolorear `border-color` a secas dejaba las líneas #ddd a la vista. */
.client-home-cards .card .list-group-item {
border-color: var(--nt-line) !important;
border-bottom-color: var(--nt-line) !important;
}
/* Botones de acción de la portada nativa (bloque heredado de homepage.tpl).
El hover del padre va a #444 y sobre oscuro apaga el texto justo al pasar el
mouse: se lo manda al naranja. Los .card-accent-* son un border-top de color
que sobrevive perfectamente al fondo oscuro, así que se conservan. */
.action-icon-btns a {
background-color: var(--nt-surface);
border-color: var(--nt-line);
color: var(--nt-text-2);
}
.action-icon-btns a:hover {
background-color: var(--nt-surface-2);
color: var(--nt-accent);
}
/* El padre colorea el ícono con `.action-icon-btns a .ico-container i`
(0,2,2): hay que igualar los tres niveles o el ícono queda gris claro. */
.action-icon-btns a .ico-container,
.action-icon-btns a .ico-container i,
.action-icon-btns a:hover .ico-container,
.action-icon-btns a:hover .ico-container i {
background-color: transparent;
color: var(--nt-accent);
}
/* Buscador de dominios de la portada: el envoltorio blanco es grande y está
arriba de todo. El .multiselect del panel avanzado es un .btn de
bootstrap-multiselect y hereda el color oscuro de .btn. */
/* La caja blanca del buscador de dominios de la portada no es
`.home-domain-search` sino su envoltorio `.input-group-wrapper`
(fondo #fff, borde #ced4da). Es lo primero que se ve arriba del hero. */
.home-domain-search .input-group-wrapper {
background-color: var(--nt-surface-2);
border-color: var(--nt-line-strong);
}
.home-domain-search .input-group-wrapper .form-control {
background-color: transparent;
color: var(--nt-text);
}
.home-domain-search h2,
.home-domain-search label {
color: var(--nt-text);
}
.multiselect-container {
background-color: var(--nt-surface-2);
border-color: var(--nt-line-strong);
}
.featured-tld,
.domain-pricing thead th,
.domain-pricing tbody td {
background-color: var(--nt-surface);
border-color: var(--nt-line);
color: var(--nt-text-2);
/* el box-shadow rgba(0,0,0,.1) del padre es invisible sobre negro */
box-shadow: none;
}
/* Tickets. `.markdown-content h1..h4 { color:#333 }` es texto oscuro sobre
oscuro en TODA respuesta que use encabezados. */
.markdown-content,
.markdown-content p,
.markdown-content li {
color: var(--nt-text-2);
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
color: var(--nt-text);
}
.markdown-content table th,
.markdown-content table td {
border-color: var(--nt-line);
}
.markdown-content blockquote {
border-left-color: var(--nt-accent-line);
color: var(--nt-muted);
}
/* Editor de respuesta de tickets (bootstrap-markdown).
Los selectores son los REALES del padre, verificados en su theme.css:
.md-editor > textarea.markdown-editor, .md-editor > .md-preview (0,2,1)
.md-editor > .btn-toolbar (0,2,0)
los tres con `background-color: #fff !important`. Como el padre usa
!important hay que responder con !important Y con la misma especificidad:
un `.md-editor > textarea` (0,1,1) PIERDE contra (0,2,1), y el resultado es
que el cliente escribe texto casi blanco sobre fondo blanco sin ver lo que
tipea. Las clases .md-header y .md-footer no existen en Twenty-One. */
.md-editor {
border-color: var(--nt-line) !important;
}
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
background-color: var(--nt-surface-2) !important;
border-top-color: var(--nt-line) !important;
border-bottom-color: var(--nt-line) !important;
color: var(--nt-text) !important;
}
.md-editor > .btn-toolbar {
background-color: var(--nt-surface-3) !important;
}
.md-editor > .btn-toolbar .btn {
color: var(--nt-text-2) !important;
}
/* Registro y perfil: #registration tiene especificidad 0,2,0 y le gana a
cualquier .form-control global, así que hay que escribirlo con el prefijo. */
#registration .form-control,
#registration .custom-select {
background-color: var(--nt-surface-2);
border-color: var(--nt-line-strong);
color: var(--nt-text);
}
#registration label,
#registration .control-label {
color: var(--nt-text-2);
}
/* El padre apaga el foco con `#registration .form-control:focus` (1,2,0), que
le gana a `.form-control:focus-visible` (0,2,0): sin esto, en TODO el
formulario de registro no hay anillo de foco por teclado. */
#registration .form-control:focus-visible,
#registration .custom-select:focus-visible {
border-color: var(--nt-accent);
box-shadow: 0 0 0 2px var(--nt-bg), 0 0 0 4px var(--nt-accent);
}
/* Chip blanco que monta sobre la línea divisoria del formulario: si no se le
cambia el fondo al color de la página, queda una etiqueta blanca flotando. */
#registration .sub-heading span,
.sub-heading span {
background-color: var(--nt-bg);
color: var(--nt-text);
}
/* 2FA. El padre lo califica como `.twofa-setup .backup-code` (0,2,0), con
fondo #efefef y texto #444: un `.backup-code` pelado (0,1,0) pierde y queda
gris sobre gris. Y es justo el código que el cliente tiene que leer y
copiar para no quedarse afuera de su cuenta. */
.twofa-setup .backup-code {
background-color: var(--nt-surface-3);
border: 1px solid var(--nt-line-strong);
color: var(--nt-text);
font-family: var(--nt-mono);
}
.twofa-module {
border-color: var(--nt-line);
}
.twofa-module:hover {
border-color: var(--nt-accent-line);
}
/* Pago y facturación. Los cuatro nombres que tenía acá antes eran inventados;
estos son los del theme.css del padre. `div.credit-card` va con el tipo
porque así lo califica el padre (0,1,1) y un `.credit-card` pelado pierde. */
div.credit-card {
background-color: var(--nt-surface);
border-color: var(--nt-line);
color: var(--nt-text-2);
}
.invoice-summary-table td.total-row {
background-color: var(--nt-surface-2);
color: var(--nt-text);
}
tr.masspay-invoice-detail td,
tr.masspay-total td {
background-color: transparent;
color: var(--nt-text-2);
}
/* Los logos de tarjeta son colores de marca de terceros: no se recolorean. Se
les pone un chip claro atrás para que no desaparezcan sobre carbón. */
.logo-visa,
.logo-mastercard,
.logo-amex,
.logo-discover {
background-color: #FFFFFF;
border-radius: 4px;
padding: 2px 4px;
}
/* Detalle de producto: .product-details-tab-container es blanco y ocupa el
100% del ancho en la página más visitada después de clientarea.php. */
/* El padre califica con el tipo: `div.product-details-tab-container` (0,1,1).
Un `.product-details-tab-container` pelado (0,1,0) PIERDE, y el panel de
detalle de cada servicio queda blanco a todo el ancho. Es la página más
visitada después de clientarea.php. */
div.product-details-tab-container {
background-color: var(--nt-surface);
border-color: var(--nt-line);
color: var(--nt-text-2);
}
/* Anuncios: el padre pinta cada artículo con #f5f5f5 y borde izquierdo #ccc. */
.announcements .announcement article {
background-color: var(--nt-surface);
border-left-color: var(--nt-accent);
color: var(--nt-text-2);
}
/* Base de conocimientos: el hover del padre pinta #f5f5f5, así que pasar el
mouse por una categoría o un artículo lo volvía ilegible. */
.kb-category a:hover,
.kb-article-item:hover {
background-color: var(--nt-surface-2);
color: var(--nt-text);
}
.kb-article-item small {
color: var(--nt-muted);
}
/* Upgrade y downgrade de servicios: las tarjetas de producto son #fff. */
.upgrade .products .product,
.upgrade .product-to-be-upgraded {
background-color: var(--nt-surface);
color: var(--nt-text-2);
}
/* MarketConnect: los colores de marca de terceros NO se tocan, sólo el fondo
de la caja para que el texto de marca siga siendo legible. */
.promo-container,
.promo-banner {
background-color: var(--nt-surface);
border-color: var(--nt-line);
}
/* Barra lateral del área de cliente. El padre declara `border-color: #f5f5f5`
en el MISMO selector (0,2,0): si acá sólo se declara el fondo, quedan
líneas casi blancas separando cada ítem. */
.sidebar .list-group-item {
background-color: var(--nt-surface);
border-color: var(--nt-line);
}
/* El badge de conteo lo pinta el padre con (0,3,0), blanco sobre #666: hay
que igualar los tres niveles o queda una pastilla blanca en cada ítem. */
.sidebar .list-group-item .badge {
background-color: rgba(245, 242, 237, .12);
color: var(--nt-text);
}
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover {
background-color: var(--nt-accent);
border-color: var(--nt-accent);
color: var(--nt-on-accent);
}
.sidebar .panel,
.sidebar .card {
background-color: var(--nt-surface);
border-color: var(--nt-line);
}
/* Las tarjetas de las vidrieras propias (nt-vidriera, nt-cat, nt-conect en
templates/orderforms/neatech-*-native/) son elementos que NO fijan color
de texto: sin esto heredan el naranja de `a` de la sección 2 y el nombre y
la descripción de cada producto salen naranjas. Es una regresión que causa
ESTE archivo, así que se arregla acá y no en el frente del coordinador. */
.nt-vidriera a:not(.btn),
.nt-cat a:not(.btn),
.nt-conect a:not(.btn) {
color: var(--nt-text);
}
/* Formularios de pedido nativos (standard_cart y los hijos propios). El
interior del carrito tiene su propia hoja que carga DESPUÉS de ésta y usa
#order-standard_cart (0,2,0): ver la limitación documentada en el README.
Estas reglas cubren sólo lo que sí alcanza desde acá. */
/* Con prefijo `body`, igual que el resto del bloque del carrito: la hoja de
standard_cart carga DESPUES que esta, asi que con la misma especificidad
estas cinco reglas estaban muertas. */
body #order-standard_cart .cart-body,
body #order-standard_cart .cart-sidebar,
body #order-standard_cart .section-body {
color: var(--nt-text-2);
}
body #order-standard_cart .header-lined,
body #order-standard_cart .section-title {
color: var(--nt-text);
border-color: var(--nt-line);
}
/* ==========================================================================
5b. COBERTURA VERIFICADA CONTRA EL theme.css DEL PADRE
Todo lo de acá salió de extraer del theme.css de Twenty-One 9.0.8 cada regla
con fondo claro o texto oscuro y comparar contra lo que el tema ya cubría.
No hay ni un selector supuesto: cada uno existe en el archivo del padre, con
la especificidad que se indica cuando importa.
========================================================================== */
/* Buscador de CADA listado con DataTables. El padre lo pinta con
`.dataTables_wrapper .dataTables_filter label .form-control` (0,3,1) y con un
shorthand `background` que trae el #fff Y el PNG de la lupa: cambiar sólo
background-color no alcanza. El PNG se conserva; su ruta relativa sube tres
niveles, igual desde la hoja del padre que desde ésta, así que sigue
resolviendo. Sin esto el cliente escribe en blanco sobre blanco. */
.dataTables_wrapper .dataTables_filter label .form-control {
/* El PNG del padre es una lupa oscura pensada para fondo blanco: sobre el
campo oscuro no se veria. Se reemplaza por un SVG en data-URI del color
del texto apagado, asi no depende de ningun archivo ni de la ruta
relativa, que cambia segun desde donde se resuelva la hoja. */
background: var(--nt-surface-2) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239C9790' stroke-width='1.6'%3e%3ccircle cx='7' cy='7' r='4.5'/%3e%3cpath d='M10.5 10.5 L14 14' stroke-linecap='round'/%3e%3c/svg%3e") no-repeat 12px center;
background-size: 16px 16px;
border-color: var(--nt-line-strong);
color: var(--nt-text);
}
/* Tablas dentro de markdown: respuestas de ticket, anuncios y artículos de la
base de conocimientos. Fondo #fff y cabecera #f8f8f8. */
.md-preview table,
.markdown-content table {
background-color: var(--nt-surface);
border-color: var(--nt-line);
}
.md-preview table > thead > tr > th,
.markdown-content table > thead > tr > th {
background-color: rgba(245, 242, 237, .05);
border-color: var(--nt-line);
color: var(--nt-text);
}
.md-preview table > tbody > tr > td,
.markdown-content table > tbody > tr > td {
border-color: var(--nt-line);
}
/* La solapa Preview del editor de tickets: el tema ya cubría .markdown-content
pero no .md-preview, que es la misma pantalla con otra clase. */
.md-preview h1,
.md-preview h2,
.md-preview h3,
.md-preview h4,
.md-preview h5,
.md-preview h6 {
color: var(--nt-text);
}
.md-preview,
.md-preview p,
.md-preview li {
color: var(--nt-text-2);
}
/* El bloque de código ya es oscuro (#444 con texto #f8f8f8): sólo se alinea. */
.md-preview pre,
.markdown-content pre {
background-color: var(--nt-surface-3);
color: var(--nt-text);
}
/* Vista de un ticket */
.view-ticket .posted-by {
background-color: var(--nt-surface-2);
color: var(--nt-muted);
}
.view-ticket .attachment-list li figure {
background-color: var(--nt-surface-2);
color: var(--nt-muted);
}
.ticketfeedbackstaffcont {
background-color: var(--nt-surface-2);
color: var(--nt-text-2);
}
/* El ojito de ver la contraseña, en login y en cambio de clave: al pasar el
mouse el padre lo manda a fondo blanco. */
.input-group .btn-reveal-pw:hover,
.input-group .btn-reveal-pw:active,
.input-group .btn-reveal-pw:focus {
background-color: var(--nt-surface-3);
border-color: var(--nt-line-strong);
color: var(--nt-accent);
}
/* Solapas de dominio del store */
.store-order-container .store-domain-tabs li a {
background-color: var(--nt-surface-2);
border-bottom-color: var(--nt-line);
color: var(--nt-text-2);
}
.store-order-container .store-domain-tabs li.active a {
background-color: var(--nt-surface);
color: var(--nt-text);
}
/* Solapas responsive: por debajo de 768px el padre las convierte en un bloque
blanco con un conector, también blanco. */
.responsive-tabs-sm {
background: var(--nt-surface);
border-color: var(--nt-line);
}
.responsive-tabs-sm .nav-item a.active {
background-color: var(--nt-surface-2) !important; /* el padre usa !important */
color: var(--nt-text) !important;
}
.responsive-tabs-sm-connector .channel {
background: var(--nt-surface);
border-right-color: var(--nt-line);
}
/* Formulario de registro: el padre agrupa `.field` JUNTO con `.form-control`
en el mismo selector, así que cubrir sólo `.form-control` deja los `.field`
en blanco. Y los estados disabled/readonly van con selector de atributo. */
#registration .field {
background-color: var(--nt-surface-2);
border-color: var(--nt-line-strong);
color: var(--nt-text);
}
#registration .field[disabled],
#registration .field[readonly],
#registration .form-control[disabled],
#registration .form-control[readonly] {
background-color: rgba(245, 242, 237, .05);
color: var(--nt-muted);
}
/* Tarjeta de crédito: el logo de Discover es un color de marca de terceros y
NO se recolorea. El chip claro de atrás necesita (0,1,2) para ganarle a
`div.credit-card .logo-discover`. */
div.credit-card .logo-visa,
div.credit-card .logo-mastercard,
div.credit-card .logo-amex,
div.credit-card .logo-discover {
background-color: #FFFFFF;
border-radius: 4px;
padding: 2px 4px;
}
/* Ícono grande del detalle de producto */
div.product-details div.product-icon {
background-color: var(--nt-surface-2);
color: var(--nt-accent);
}
/* Precios de dominios y TLD destacados */
.featured-tld .price {
background-color: var(--nt-surface-2);
color: var(--nt-text-2);
}
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-xs-4,
.domain-pricing .tld-pricing-header .col-sm-4,
.domain-pricing .tld-pricing-header div:nth-child(odd) {
background-color: var(--nt-surface-2);
color: var(--nt-text-2);
}
/* Lista de características de la página de upgrade */
.upgrade .products .product ul li span {
color: var(--nt-text-2);
}
/* Resaltado de términos buscados. El padre usa el `.mark` de Bootstrap
(#fcf8e3). `.highlight` y `.search-highlight` eran nombres supuestos. */
mark,
.mark {
background-color: rgba(232, 178, 58, .25);
color: var(--nt-text);
}
/* Popover de notificaciones: el hover del padre es (0,2,2) y le ganaba al
(0,2,1) que tenía el tema. */
.popover-user-notifications ul li a:hover {
background-color: rgba(245, 242, 237, .06);
color: var(--nt-text);
}
.sidebar .list-group-item > i.far.fa-circle {
color: var(--nt-muted);
}
/* Botón de las tarjetas de la portada del cliente: el padre lo manda a #000 en
hover, y la cabecera ahora es oscura. */
.client-home-cards .card-header .btn:hover {
color: var(--nt-accent);
}
/* Botón por defecto deshabilitado: el padre usa selectores de atributo con
!important, que valen (0,3,0) y le ganan a la regla de disabled de arriba. */
.btn-default[disabled]:hover,
.btn-default[disabled]:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default:hover,
fieldset[disabled] .btn-default:focus {
background-color: var(--nt-surface) !important;
border-color: var(--nt-line) !important;
color: var(--nt-muted-2) !important;
}
/* Chips de estado: además del aro, los que el padre pinta de negro puro
(.status-fraud, .status-lost, .status-dead y sus equivalentes de producto)
se levantan apenas para despegarlos de la fila sin perder el significado. */
.label.status-fraud,
.label.status-lost,
.label.status-dead,
.product-status-fraud {
background-color: var(--nt-surface-3);
color: var(--nt-text);
}
.product-status-terminated,
.product-status-cancelled,
.requestor-type-authorizeduser,
.requestor-type-subaccount,
.requestor-type-guest {
box-shadow: inset 0 0 0 1px rgba(245, 242, 237, .45);
}
/* La columna por la que esta ordenado el listado: el padre le deja la cabecera
en #f6f6f6, asi que en CADA tabla hay siempre una celda clara con el texto
crema del tema encima. */
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
background-color: rgba(245, 242, 237, .08);
color: var(--nt-text);
}
/* Etiquetas del panel avanzado del buscador de dominios de la portada (#333) */
.home-domain-search .input-group-wrapper .advanced-input label {
color: var(--nt-text-2);
}
/* "Ver mas" deshabilitado en la tarjeta de servicios de la portada del cliente */
div[menuitemname="active products/services"] .btn-view-more.disabled {
color: var(--nt-muted);
}
/* Promo de terceros: los colores de marca NO se tocan, solo lo que quedaria
ilegible sobre el fondo oscuro de la caja. */
.promo-banner.ox a {
color: var(--nt-text-2);
}
/* Estados de .btn-default que el padre define con combinaciones de clases y de
fieldset[disabled], todos con fondo claro. */
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default,
.open > .dropdown-toggle.btn-default:hover,
.open > .dropdown-toggle.btn-default:focus,
fieldset[disabled] .btn-default.focus {
background-color: var(--nt-surface-2);
border-color: var(--nt-line-strong);
color: var(--nt-text);
}
/* ==========================================================================
5c. INTERIOR DEL CARRITO Y DEL CHECKOUT
La hoja del carrito (orderforms/standard_cart/css/) carga DESPUES que ésta,
así que con la misma especificidad perderíamos por orden. Todo este bloque
va prefijado con `body`, que suma un elemento y deja los selectores en
(1,N+1,M): estrictamente por encima de los del carrito.
========================================================================== */
body #order-standard_cart .products .product {
background: var(--nt-surface);
}
body #order-standard_cart .products .product header {
background: rgba(245, 242, 237, .05);
border-color: var(--nt-line);
}
body #order-standard_cart .products .product header span {
color: var(--nt-text);
}
body .nav-tabs > li > a:focus-visible,
body .nav-tabs .nav-link:focus-visible {
outline: 2px solid var(--nt-accent);
outline-offset: -3px;
}
/* Vidrieras 1.0.2: sólo selección de productos; checkout y datos intactos.
Vence al CSS standard_cart y al