/* ============================================================================
   TEMA: MATRIX — código verde fosforado sobre negro. Terminal cyberpunk.
   DARK-ONLY: matrix NO tiene modo claro. El JS fuerza data-theme="dark" cuando
   matrix está activo (index.php, login.php, dashboard.js, temas.js) y el toggle
   de tema se oculta. Toda la identidad vive en el bloque base + dark.
   Fuente: fósforo PÁLIDO (#c6f9d6), legible sobre negro. Headings/accents verde.
   3 verdes guía: #16a34a (profundo) · #22c55e (acción) · #39ff7a (fósforo).
   ============================================================================ */

/* ── BASE — negro + verde, fuente fósforo PÁLIDO (#c6f9d6). Este es el look de
   DARK; LIGHT lo pisa más abajo poniendo la fuente en blanco. ─────────────── */
html[data-abk-variant="matrix"] {
  /* acentos + primary ramp (verde) */
  --abk-accent:            #22c55e;
  --abk-accent-2:          #16a34a;
  --abk-accent-soft:       #39ff7a;
  --abk-accent-glow:       rgba(34,197,94,.45);
  --abk-primary:           #22c55e;
  --abk-primary-2:         #16a34a;
  --abk-primary-3:         #39ff7a;
  --abk-primary-deep:      #16a34a;
  --abk-primary-soft:      #39ff7a;
  --abk-primary-ink:       #03130a;
  --abk-primary-glow:      rgba(34,197,94,.45);

  /* sombras con halo verde */
  --abk-shadow-1:          0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(34,197,94,.14);
  --abk-shadow-2:          0 4px 18px rgba(0,0,0,.30), 0 0 22px rgba(34,197,94,.12);
  --abk-shadow-3:          0 8px 28px rgba(0,0,0,.40), 0 0 30px rgba(34,197,94,.18);
  --abk-shadow-modal:      0 20px 60px rgba(0,0,0,.55), 0 0 80px rgba(34,197,94,.22);

  /* títulos monoespaciados (vibe terminal) */
  --abk-h1-family:         "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", ui-monospace, "Courier New", monospace;
  --abk-h2-family:         var(--abk-h1-family);

  /* superficies NEGRAS (cero azul). !important para blindar del modal-bg/body-bg
     navy (#0f172a) que pisa --abk-surface a misma especificidad y carga después. */
  --abk-bg:                #000000 !important;
  --abk-bg-2:              #000000;
  --abk-bg-shell:          #000000 !important;
  --abk-surface:           #000000 !important;            /* cards: NEGRO plano (cero gris); separa por contorno verde */
  --abk-surface-2:         rgba(34,197,94,.06) !important; /* elevación: verde translúcido sobre negro (no gris) */
  --abk-surface-overlay:   rgba(0,0,0,.88);
  --abk-glass-bg:          rgba(0,0,0,.60);
  --abk-glass-border:      rgba(34,197,94,.25);

  /* --abk-on-primary es "tinta sobre primary" = CLARO. MUCHÍSIMOS módulos (586
     usos) lo usan como COLOR DE TEXTO/foreground asumiendo blanco → debe ser
     CLARO o se vuelven ilegibles (ver_pagos kpi, credencial, configuracion…).
     Lo dejamos en verde-pálido near-white (legible sobre negro, on-theme). El
     (mal)uso como FONDO de tarjeta (inicio) se corrige aparte → --abk-surface. */
  --abk-on-primary:        #d7ffe6;
  --abk-bg-card:           #000000 !important;   /* card bg → negro (estaba indefinido) */
  --abk-border-2:          rgba(34,197,94,.40);  /* borde secundario VERDE visible (tarjetas KPI, separadores) */
  --abk-ok-strong:         #39ff7a;              /* "ok/éxito" → verde neón */

  /* TEXTO — fósforo PÁLIDO (el "casi-blanco" suave del modo cómodo) */
  --abk-text:              #c6f9d6;
  --abk-text-soft:         rgba(198,249,214,.88);  /* +opacidad: legible sobre NEGRO puro */
  --abk-text-muted:        rgba(198,249,214,.72);  /* labels (Nombre/Sexo/RFC…) ya no se pierden */
  --abk-text-heading:      #39ff7a;
  --abk-text-heading-soft: #39ff7a;
  --abk-text-link:         #39ff7a;
  --abk-text-on-shell:     #b9f7c8;

  --abk-border-section:    rgba(34,197,94,.50);
  --abk-border-soft:       rgba(34,197,94,.34);  /* visible: separadores/detalles de módulos */
  --abk-border-strong:     rgba(57,255,122,.65);

  --abk-text-on-primary:   #03130a;
  --abk-input-bg:          #050d08;               /* negro-verde un pelín elevado → el campo se distingue del fondo */
  --abk-input-border:      rgba(57,255,122,.50);  /* borde verde CLARO y visible (igual en dark que en light) */
  --abk-input-text:        #c6f9d6;
  --abk-input-placeholder: rgba(198,249,214,.40);
  --abk-input-border-focus:#22c55e;
  --abk-input-ring:        rgba(34,197,94,.40);

  --header-bg:             linear-gradient(110deg, #000000 0%, #021b0d 35%, #0a3d22 65%, #16a34a 100%) !important;
  --header-border:         rgba(34,197,94,.50) !important;
  --header-shadow:         rgba(34,197,94,.30) !important;
  --sidebar-bg:            #030503 !important;   /* PLANO: negro (sin degradado) */
  --sidebar-hover:         #39ff7a !important;
  --sidebar-icon:          #39ff7a !important;
  --main-bg:               #000000 !important;

  /* categorías → toda la gama en VERDE (los --abk-cat-* eran azul/morado/rosa) */
  --abk-cat-violet:  #39ff7a;
  --abk-cat-blue:    #22c55e;
  --abk-cat-emerald: #39ff7a;
  --abk-cat-pink:    #39ff7a;
  --abk-cat-amber:   #22c55e;
  --abk-cat-slate:   #16a34a;
  --abk-info:        #22c55e;
  --abk-info-strong: #39ff7a;

  /* ESTADOS → sólo VERDE (matrix no usa amarillo/rojo/azul). 3 tonos para
     diferenciar: ok=neón, warn/pending=medio, err/fail=profundo. Quita los
     "colores" de los números (kpi pendientes/fallidos/cancelados). */
  --abk-ok:          #39ff7a; --abk-ok-strong: #39ff7a; --abk-ok-bg: rgba(57,255,122,.15); --abk-ok-glow: rgba(57,255,122,.40);
  --abk-warn:        #22c55e; --abk-warn-strong: #22c55e; --abk-warn-soft: #16a34a; --abk-warn-bg: rgba(34,197,94,.15); --abk-warn-glow: rgba(34,197,94,.40);
  --abk-err:         #16a34a; --abk-err-strong: #16a34a; --abk-err-soft: #16a34a; --abk-err-bg: rgba(22,101,52,.30); --abk-err-glow: rgba(22,101,52,.45);
}

/* ── DARK — el look CÓMODO/legible: fuente fósforo PÁLIDO (#c6f9d6). Hereda el
   texto del bloque BASE (no lo redefine); aquí sólo re-asegura el NEGRO de las
   superficies contra el navy del modal-bg. El neón #39ff7a quedaba ilegible
   sobre negro en módulos → se descartó. ──────────────────────────────────── */
html[data-theme="dark"][data-abk-variant="matrix"] {
  --abk-bg:                #000000 !important;
  --abk-bg-shell:          #000000 !important;
  --abk-surface:           #000000 !important;
  --abk-surface-2:         rgba(34,197,94,.06) !important;
  --abk-input-bg:          #050d08;  /* campo un pelín elevado del fondo negro */
  /* texto: hereda el pálido de base (cómodo). placeholder un poco más visible */
  --abk-input-placeholder: rgba(198,249,214,.40);
}

/* MATRIX es DARK-ONLY: no tiene modo claro. El JS fuerza data-theme="dark"
   cuando matrix está activo y el toggle de tema se oculta. Todo el bloque LIGHT
   fue eliminado a pedido. */
html[data-abk-variant="matrix"] .theme-toggle { display: none !important; }

/* Línea neón bajo el h1 (verde con glow) — ambos modos */
html[data-abk-variant="matrix"] .abk-h1::after,
html[data-abk-variant="matrix"] :where(.main-content, .abk-page) h1::after {
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 45%, #39ff7a 100%);
  box-shadow: 0 0 14px rgba(34,197,94,.65);
  height: 4px;
}

/* Card — NEGRO plano con CONTORNO verde (separa sin gris) */
html[data-abk-variant="matrix"] .abk-card {
  border: 1px solid rgba(34,197,94,.22);
}
/* Card hover — borde + glow verde */
html[data-abk-variant="matrix"] .abk-card:hover {
  border-color: var(--abk-primary);
  box-shadow: var(--abk-shadow-3), 0 0 22px rgba(34,197,94,.28);
}

/* Glow fosforado en títulos (text-shadow neón) — ambos modos */
html[data-abk-variant="matrix"] :where(.main-content, .abk-page) :is(h1, h2),
html[data-abk-variant="matrix"] :where(.main-content, .abk-page) :is([class$="-h1"], [class$="-h2"]),
html[data-abk-variant="matrix"] .abk-h1,
html[data-abk-variant="matrix"] .abk-h2 {
  text-shadow: 0 0 10px rgba(34,197,94,.45), 0 0 2px rgba(57,255,122,.40);
}

/* Scanline sutil sobre el header (líneas de CRT) */
html[data-abk-variant="matrix"] .main-header {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    var(--header-bg);
}

/* ── LOGIN PREMIUM — LLUVIA DE CÓDIGO sobre negro (NO cosmos) ─────────────
   El canvas #abk-matrix-rain (login.php) dibuja las letras verdes cayendo (JS,
   sólo matrix). El propio canvas trae un fondo CSS negro + grid + scanlines:
   esa es la "terminal abstracta" de fallback (sin JS o con reduced-motion).
   Ocultamos TODO el arte de cosmos (orbs, estrellas, anillo) que era de Cosmic
   Blue. El form flota encima como consola. */

#abk-matrix-rain { display: none; }
html[data-abk-variant="matrix"] #abk-matrix-rain {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(34,197,94,.05) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, rgba(34,197,94,.05) 1px, transparent 1px) 0 0 / 26px 100%,
    radial-gradient(1200px 700px at 50% -10%, rgba(34,197,94,.12), transparent 60%),
    #000000;
}

/* Mata el arte de cosmos en el login matrix (era de Cosmic Blue) */
html[data-abk-variant="matrix"] .abk-orbs,
html[data-abk-variant="matrix"] .abk-login-cosmos,
html[data-abk-variant="matrix"] .abk-login-art-stars,
html[data-abk-variant="matrix"] .abk-login-art-stars-big,
html[data-abk-variant="matrix"] .abk-login-art-stars-drift,
html[data-abk-variant="matrix"] .abk-login-art-orb,
html[data-abk-variant="matrix"] .abk-login-art-ring,
html[data-abk-variant="matrix"] .abk-login-art-grid,
html[data-abk-variant="matrix"] .abk-glass-stars { display: none !important; }

/* Panel de arte (modo split): transparente para dejar ver la lluvia */
html[data-abk-variant="matrix"] .abk-login-art { background: transparent !important; }
html[data-abk-variant="matrix"] .abk-login-art-content { position: relative; z-index: 2; }
html[data-abk-variant="matrix"] .abk-login-art-glyph {
  color: #39ff7a;
  text-shadow: 0 0 18px rgba(34,197,94,.75), 0 0 4px rgba(57,255,122,.65);
  font-family: ui-monospace, "Courier New", monospace;
}
html[data-abk-variant="matrix"] .abk-login-art-title {
  color: #d6ffe3;   /* near-white en LIGHT; en DARK se vuelve verde (override abajo) */
  text-shadow: 0 0 12px rgba(34,197,94,.50);
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: 1.5px;
}
html[data-abk-variant="matrix"] .abk-login-art-tagline { color: rgba(134,239,172,.85); }

/* Form = consola negra translúcida, por ENCIMA de la lluvia (z-index) */
html[data-abk-variant="matrix"] .container { position: relative; z-index: 2; background: transparent !important; }
html[data-abk-variant="matrix"] .login-box {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(4,16,10,.90) 0%, rgba(2,12,8,.93) 100%);
  border: 1px solid rgba(34,197,94,.40);
  box-shadow: 0 24px 60px rgba(0,0,0,.65), 0 0 44px rgba(34,197,94,.22), inset 0 0 0 1px rgba(34,197,94,.08);
  backdrop-filter: blur(2px);
}
html[data-abk-variant="matrix"] .login-box h2 {
  color: #39ff7a;
  font-family: ui-monospace, "Courier New", monospace;
  text-shadow: 0 0 10px rgba(34,197,94,.45);
}
html[data-abk-variant="matrix"] .welcome-text { color: rgba(134,239,172,.85); }
html[data-abk-variant="matrix"] .forgot-password { color: #39ff7a; }

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD FULL MATRIX — chrome 100% negro/verde (sin morado ni cian).
   ════════════════════════════════════════════════════════════════════════ */

/* Sidebar — ítem ACTIVO: PLANO, negro con contorno verde (sin degradado). */
html[data-abk-variant="matrix"] .sidebar ul li.active {
  background: rgba(34,197,94,.08) !important;
  border-left: 3px solid #22c55e !important;
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.35) !important;
  color: #39ff7a !important;
}
html[data-abk-variant="matrix"] .sidebar ul li.active svg { stroke: #39ff7a !important; }

/* Submenú abierto: chevron + texto VERDE */
html[data-abk-variant="matrix"] .sidebar .menu-item.has-submenu.open > .submenu-toggle,
html[data-abk-variant="matrix"] .sidebar .menu-item.has-submenu.open > .submenu-toggle .chevron {
  color: #39ff7a !important;
}
/* Scrollbar del sidebar en verde */
html[data-abk-variant="matrix"] .sidebar-inner::-webkit-scrollbar-thumb { background: rgba(34,197,94,.28); }
html[data-abk-variant="matrix"] .sidebar-inner::-webkit-scrollbar-thumb:hover { background: rgba(34,197,94,.48); }

/* SIN ICONOS fuera del menú izquierdo (los del sidebar SÍ se conservan) */
html[data-abk-variant="matrix"] .main-content .abk-h-icon,
html[data-abk-variant="matrix"] .main-content [class$="-h1-icon"],
html[data-abk-variant="matrix"] .main-content [class*="-h-icon"] { display: none !important; }

/* TOPBAR — status-strip + pills estilo Matrix: negro + SÓLO verde */
html[data-abk-variant="matrix"] .status-strip {
  background: linear-gradient(110deg, #000000 0%, #021b0d 55%, #052e16 100%) !important;
  border-bottom: 1px solid rgba(34,197,94,.40) !important;
}
html[data-abk-variant="matrix"] .svc-indicator {
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.22);
}
html[data-abk-variant="matrix"] .svc-indicator.svc-clickable:hover { background: rgba(34,197,94,.18); }
html[data-abk-variant="matrix"] .svc-name { color: #39ff7a; }
/* Pulso VERDE para "no configurado / no producción" (foquito pulsante en verde) */
@keyframes mtx-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.50); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0);  }
}
@keyframes mtx-pulse-dot {
  0%, 100% { box-shadow: 0 0 6px rgba(34,197,94,.55);  opacity: 1;   }
  50%      { box-shadow: 0 0 11px rgba(57,255,122,.95); opacity: .7; }
}
html[data-abk-variant="matrix"] .svc-dot.ok   { background: #39ff7a; box-shadow: 0 0 8px rgba(57,255,122,.65); }
html[data-abk-variant="matrix"] .svc-dot.fail { background: #22c55e; animation: mtx-pulse-dot 1.5s ease-in-out infinite !important; }
html[data-abk-variant="matrix"] .svc-badge.badge-ok,
html[data-abk-variant="matrix"] .svc-badge.badge-prod {
  background: rgba(34,197,94,.20); color: #39ff7a;
}
html[data-abk-variant="matrix"] .svc-badge.badge-fail,
html[data-abk-variant="matrix"] .svc-badge.badge-sandbox {
  background: rgba(22,101,52,.28) !important; color: #39ff7a !important;
  animation: mtx-pulse-ring 1.6s ease-in-out infinite !important;
}
html[data-abk-variant="matrix"] .svc-badge.badge-fail::before {
  background: #22c55e !important;
  animation: mtx-pulse-dot 1.4s ease-in-out infinite !important;
}

/* Botones del topbar (Tema / Dark mode / picker): hover verde */
html[data-abk-variant="matrix"] .abk-variant-btn:hover,
html[data-abk-variant="matrix"] .theme-toggle:hover {
  background: rgba(34,197,94,.16) !important;
  border-color: rgba(34,197,94,.42) !important;
}

/* Canvas del dashboard: NEGRO puro (card y full) en ambos modos */
html[data-abk-variant="matrix"] body.layout,
html[data-abk-variant="matrix"] body { background: #000000 !important; }
html[data-abk-variant="matrix"] .main-content { background: #000000 !important; }

/* Frame del logo (escudo): placa de TERMINAL matrix — negro + rejilla verde
   sutil + scanlines CRT + glow superior. (Antes era un degradado verde olivo
   diagonal que se veía "militar/camuflaje".) */
html[data-abk-variant="matrix"] .sidebar-brand--needs-frame {
  background:
    radial-gradient(120% 75% at 50% 0%, rgba(57,255,122,.16), transparent 62%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(34,197,94,.07) 1px, transparent 1px) 0 0 / 100% 14px,
    linear-gradient(90deg, rgba(34,197,94,.07) 1px, transparent 1px) 0 0 / 14px 100%,
    #000000 !important;
  border-color: rgba(34,197,94,.45) !important;
  box-shadow:
    inset 0 0 18px rgba(34,197,94,.12),
    0 0 22px rgba(34,197,94,.18) !important;
}

/* Login art: línea decorativa bajo el tagline → verde */
html[data-abk-variant="matrix"] .abk-login-art-content::after {
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 50%, #39ff7a 100%) !important;
  box-shadow: 0 0 16px rgba(34,197,94,.55), 0 0 28px rgba(57,255,122,.30) !important;
}

/* Sidebar HOVER: PLANO (sin degradado) — leve tinte + borde verde */
html[data-abk-variant="matrix"] .sidebar ul li:hover,
html[data-abk-variant="matrix"] .sidebar ul li.menu-external > a:hover {
  background: rgba(34,197,94,.07) !important;
  border-left-color: #22c55e !important;
}
html[data-abk-variant="matrix"] .sidebar ul li:hover svg {
  stroke: var(--sidebar-icon) !important;
  filter: drop-shadow(0 0 6px rgba(57,255,122,.50)) !important;
}
html[data-abk-variant="matrix"] .sidebar ul li:hover {
  text-shadow: 0 0 12px rgba(57,255,122,.35) !important;
}

/* Sidebar: mata morado del ::before (glow) y pinta ::after + sombra en verde */
html[data-abk-variant="matrix"] .sidebar {
  box-shadow: inset -1px 0 0 rgba(34,197,94,.18) !important;
}
html[data-abk-variant="matrix"] .sidebar::before { display: none !important; }
html[data-abk-variant="matrix"] .sidebar::after {
  background: linear-gradient(180deg, transparent 0%, rgba(34,197,94,.40) 50%, transparent 100%) !important;
}

/* Pill de roles del topbar (.svc-role-select / "VISTA ADMINISTRADO") → verde */
html[data-abk-variant="matrix"] .svc-role-select {
  background: rgba(34,197,94,.10) !important;
  color: #39ff7a !important;
  border-color: rgba(34,197,94,.30) !important;
}
html[data-abk-variant="matrix"] .svc-role-select:hover {
  background: rgba(34,197,94,.18) !important;
  border-color: rgba(34,197,94,.45) !important;
}
html[data-abk-variant="matrix"] .svc-role-select option { background: #000000; color: var(--abk-text); }

/* ── Login inputs (matrix): borde/hover/focus VERDE + autofill sin amarillo.
   Color/placeholder tokenizados → se vuelven neón en DARK automáticamente. */
html[data-abk-variant="matrix"] .login-box input,
html[data-abk-variant="matrix"] body.abk-login-bg-split .login-box input {
  background: #03110a !important;
  border-color: rgba(34,197,94,.30) !important;
  color: var(--abk-input-text) !important;
  font-family: ui-monospace, "Courier New", monospace;
}
html[data-abk-variant="matrix"] .login-box input:hover {
  border-color: rgba(34,197,94,.50) !important;
}
html[data-abk-variant="matrix"] .login-box input:focus,
html[data-abk-variant="matrix"] body.abk-login-bg-split .login-box input:focus {
  border-color: #22c55e !important;
  background: #04140a !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.28), 0 0 18px rgba(34,197,94,.25) !important;
}
html[data-abk-variant="matrix"] .login-box input::placeholder { color: var(--abk-input-placeholder) !important; }
/* AUTOFILL del navegador: mata el fondo amarillo → campo negro + texto verde */
html[data-abk-variant="matrix"] .login-box input:-webkit-autofill,
html[data-abk-variant="matrix"] .login-box input:-webkit-autofill:hover,
html[data-abk-variant="matrix"] .login-box input:-webkit-autofill:focus,
html[data-abk-variant="matrix"] .login-box input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--abk-input-text) !important;
  -webkit-box-shadow: 0 0 0 1000px #03110a inset !important;
  box-shadow: 0 0 0 1000px #03110a inset !important;
  caret-color: var(--abk-input-text) !important;
  border-color: rgba(34,197,94,.30) !important;
  transition: background-color 99999s ease-in-out 0s !important;
}

/* ── Sidebar: TEXTO en reposo VERDE (mata el #f7f3ff blanco-lavanda y cualquier
   morado heredados del tema base). Los iconos ya van verdes vía --sidebar-icon.
   var(--abk-text) → fósforo pálido en LIGHT, neón en DARK. !important porque la
   regla base html[data-theme="dark"] .sidebar ul li empata en especificidad. */
html[data-abk-variant="matrix"] .sidebar ul li,
html[data-abk-variant="matrix"] .sidebar ul li.menu-external > a,
html[data-abk-variant="matrix"] .sidebar .submenu-toggle,
html[data-abk-variant="matrix"] .sidebar .menu-item.has-submenu > .submenu-toggle,
html[data-abk-variant="matrix"] .sidebar .menu-item.has-submenu > .submenu-toggle .chevron,
html[data-abk-variant="matrix"] .sidebar .menu-group-title,
html[data-abk-variant="matrix"] .sidebar .submenu a {
  color: var(--abk-text) !important;
  opacity: 1;
}
/* Flecha de colapsar (‹) del sidebar → verde (no morado) */
html[data-abk-variant="matrix"] .toggle-btn,
html[data-abk-variant="matrix"] .toggle-btn svg {
  color: var(--sidebar-icon) !important;
  stroke: var(--sidebar-icon) !important;
}

/* Links VISITADOS del contenido no se vuelven morados (default del navegador) */
html[data-abk-variant="matrix"] .main-content a:visited {
  color: var(--abk-text-link) !important;
}

/* ── CAMPOS de formulario en módulos: SIEMPRE visibles (igual en dark que en
   light), borde verde claro + fondo levemente elevado. Va bajo #mod-scope (ID,
   especificidad 1,x,x) → gana al override legacy `html[data-theme="dark"]
   .main-content input[type]` que los dejaba con borde blanco invisible. ───── */
html[data-abk-variant="matrix"] #mod-scope input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-abk-variant="matrix"] #mod-scope select,
html[data-abk-variant="matrix"] #mod-scope textarea {
  background: var(--abk-input-bg) !important;
  border: 1.5px solid var(--abk-input-border) !important;
  color: var(--abk-text) !important;
}
html[data-abk-variant="matrix"] #mod-scope input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
html[data-abk-variant="matrix"] #mod-scope select:focus,
html[data-abk-variant="matrix"] #mod-scope textarea:focus {
  border-color: #39ff7a !important;
  background: #07140b !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.22) !important;
}
html[data-abk-variant="matrix"] #mod-scope input::placeholder,
html[data-abk-variant="matrix"] #mod-scope textarea::placeholder {
  color: var(--abk-input-placeholder) !important;
}

/* ── Headers de tabla de módulos: muchos rellenan con var(--abk-primary-3)
   (NEÓN) + texto claro → light-sobre-neón = ILEGIBLE. Forzamos verde OSCURO
   uniforme + texto del tema (legible). #mod-scope th = ID, gana. ──────────── */
html[data-abk-variant="matrix"] #mod-scope thead th,
html[data-abk-variant="matrix"] #mod-scope table th {
  background: #0a3d22 !important;          /* verde profundo, no neón */
  color: var(--abk-text-heading) !important;
  border-bottom: 1px solid rgba(57,255,122,.30) !important;
}

/* ── Botón de login → VERDE. El default (styles.css) es morado
   (#a855f7→#6d28d9→#4338ca) y carga DESPUÉS → necesita !important. Incluye el
   modo split. ─────────────────────────────────────────────────────────────── */
html[data-abk-variant="matrix"] .login-box button,
html[data-abk-variant="matrix"] body.abk-login-bg-split .login-box button {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 60%, #39ff7a 100%) !important;
  color: #03130a !important;
  box-shadow: 0 8px 30px rgba(34,197,94,.45), 0 0 0 1px rgba(57,255,122,.12) inset !important;
}
html[data-abk-variant="matrix"] .login-box button:hover {
  box-shadow: 0 10px 34px rgba(34,197,94,.55), 0 0 26px rgba(57,255,122,.30) !important;
}

/* ── CHAT WIDGET — paleta propia (--cw-*) NO theme-aware. Se define en el ID
   #abk-chat-widget (1,0,0) → el override DEBE incluir el ID. Negro/verde. ── */
html[data-abk-variant="matrix"] #abk-chat-widget,
html[data-abk-variant="matrix"] {
  --cw-primary:      #39ff7a;   /* chat en verde NEÓN (no manzana) */
  --cw-primary-2:    #16a34a;
  --cw-accent:       #39ff7a;
  --cw-surface:      #000000;
  --cw-surface-2:    rgba(34,197,94,.06);   /* verde translúcido, no gris */
  --cw-text:         #c6f9d6;   /* DARK (default): fósforo pálido legible */
  --cw-text-soft:    rgba(198,249,214,.88);
  --cw-text-muted:   rgba(198,249,214,.72);
  --cw-text-heading: #39ff7a;
  --cw-border:       rgba(57,255,122,.30);
  --cw-border-soft:  rgba(57,255,122,.16);
  --cw-msg-bg:       rgba(34,197,94,.05);
}

/* Burbuja + ventanas del chat: NEGRO con borde/acentos verde NEÓN.
   Varias ventanas usan #ffffff hardcodeado (no --cw-surface) → forzamos negro. */
html[data-abk-variant="matrix"] .abk-chat-bubble {
  background: linear-gradient(135deg, #16a34a 0%, #39ff7a 100%) !important;
  box-shadow: 0 6px 20px rgba(57,255,122,.45), 0 0 26px rgba(57,255,122,.25) !important;
}
html[data-abk-variant="matrix"] .abk-chat-inbox-panel,
html[data-abk-variant="matrix"] .abk-chat-inbox-panel:not([hidden]),
html[data-abk-variant="matrix"] .abk-chat-popup,
html[data-abk-variant="matrix"] .abk-chat-popup-body,
html[data-abk-variant="matrix"] .abk-chat-search-header {
  background: #000000 !important;
  border-color: rgba(57,255,122,.22) !important;
  color: var(--cw-text) !important;
}
html[data-abk-variant="matrix"] .abk-chat-search-author,
html[data-abk-variant="matrix"] .abk-chat-search-conv { color: var(--cw-text) !important; }
/* Botón "+" añadir docs: negro con icono/borde verde */
html[data-abk-variant="matrix"] .abk-chat-popup-attach {
  background: #000000 !important;
  border-color: rgba(57,255,122,.30) !important;
  color: #39ff7a !important;
}