/* =====================================================================
 * Paleta «matrix» — portada de RebootCodes (verde #00C853 sobre negro).
 *
 * Todo aquí vive bajo [data-theme="matrix"], así que este archivo es
 * inerte cuando la paleta activa es «clasico» o «cyber».
 *
 * Orden obligatorio: los bloques que dependan del modo usan el selector
 * doble [data-theme="matrix"][data-mode="..."], porque a igual
 * especificidad ganaría el orden de aparición y matrix en claro
 * heredaría los colores claros del clásico.
 * ===================================================================== */

[data-theme="matrix"] {
    /* Tokens de RebootCodes */
    --primary:      #00C853;
    --primary-dark: #00A844;
    --primary-dim:  rgba(0, 200, 83, .20);
    --primary-rgb:  0, 200, 83;

    --bg-base:     #0D0D0D;
    --bg-surface:  #141414;
    --bg-elevated: #1A1A1A;
    --bg-sidebar:  #0F0F0F;

    --text-primary:   #E8E8E8;
    --text-secondary: #9E9E9E;
    --text-inverse:   #0D0D0D;

    --font-ui: 'Rajdhani', system-ui, sans-serif;

    /* Alias: las clases actuales de RebootStream heredan por aquí */
    --accent:       var(--primary);
    --accent-hover: var(--primary-dark);
    --accent-light: var(--primary-dim);
    --accent-rgb:   var(--primary-rgb);

    --bg:           var(--bg-base);
    --bg-card:      var(--bg-surface);
    --bg-hover:     rgba(255, 255, 255, .04);
    --sidebar-bg:   var(--bg-sidebar);
    --navbar-bg:    var(--bg-surface);
    --input-bg:     #101010;
    --overlay:      rgba(0, 0, 0, .75);

    --border:        rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .22);

    --text:       var(--text-primary);
    --text-muted: #a8a8a8;
    --text-soft:  var(--text-secondary);

    --heading-color: var(--text-primary);
    --text-accent:   var(--primary);

    --font: var(--font-ui);

    --danger:  #F44336;
    --warning: #FF9800;
    --info:    #29B6F6;

    /* Desviación deliberada del tema original: en matrix, --success y
       --primary son el mismo verde y los badges de exito se volverian
       indistinguibles de los botones primarios (conviven en la tienda y
       en el listado de cuentas). --success se queda en su verde propio. */
    --success: #10b981;

    --purple: #a78bfa;
    --pink:   #f472b6;

    --gradient-accent: linear-gradient(135deg, #00C853 0%, #00A844 100%);
    --shadow-accent:   0 6px 24px rgba(0, 200, 83, .40);
}

[data-theme="matrix"]::-webkit-scrollbar-thumb,
[data-theme="matrix"] ::-webkit-scrollbar-thumb {
    background: var(--primary);
}

/* Modo claro: el verde y el celeste de esta paleta se pensaron para fondo
   oscuro y se ven demasiado brillantes/lavados sobre blanco. Se sustituyen
   por versiones sólidas y más oscuras, sin tocar --bg/--text/--border: esos
   ya los resuelve el modo claro base de style.css, que gana por
   especificidad ([data-theme] solo vs :root[data-mode="light"]). */
[data-theme="matrix"][data-mode="light"] {
    --primary:      #00A844;
    --primary-dark: #00802f;
    --primary-dim:  rgba(0, 168, 68, .12);
    --primary-rgb:  0, 168, 68;

    --accent:       var(--primary);
    --accent-hover: var(--primary-dark);
    --accent-light: var(--primary-dim);
    --accent-rgb:   var(--primary-rgb);

    --info: #0284c7;

    --gradient-accent: linear-gradient(135deg, #00A844 0%, #00802f 100%);
    --shadow-accent:   0 6px 24px rgba(0, 168, 68, .25);
}

/* --- Toques de caracter: el glow verde de RebootCodes en los puntos de
   mas presencia visual (logo, item activo, boton primario). El resto de
   componentes ya se recolorea solo via las variables de arriba. --- */
[data-theme="matrix"] .sidebar-header .avatar {
    box-shadow: 0 0 18px var(--primary-dim);
}

[data-theme="matrix"] .sidebar-nav a.active::before {
    box-shadow: 2px 0 12px rgba(var(--primary-rgb), .65);
}

[data-theme="matrix"] .btn-primary:hover:not(:disabled) {
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), .45);
}

/* Los "-bg" del clasico son fijos (no siguen a --danger/--warning/etc.),
   asi que en matrix quedarian con el tinte de otro color. Se recalculan
   a partir del color real de la paleta. */
[data-theme="matrix"] {
    --success-bg: color-mix(in srgb, var(--success) 14%, transparent);
    --danger-bg:  color-mix(in srgb, var(--danger)  14%, transparent);
    --warning-bg: color-mix(in srgb, var(--warning) 14%, transparent);
    --info-bg:    color-mix(in srgb, var(--info)    14%, transparent);
}

/* --- Botones de accion en tablas: RebootCodes los pinta como pastilla
   tenue (icono de color sobre fondo tintado), no solidos con sombra de
   color como el clasico. Se aplica solo a la combinacion .btn-icon, asi
   que ningun boton de texto normal (Guardar, Comprar...) cambia. --- */
[data-theme="matrix"] .btn.btn-icon.btn-danger,
[data-theme="matrix"] .btn.btn-icon.btn-warning,
[data-theme="matrix"] .btn.btn-icon.btn-success {
    border: 1px solid transparent;
    box-shadow: none;
}
[data-theme="matrix"] .btn.btn-icon.btn-danger:hover:not(:disabled),
[data-theme="matrix"] .btn.btn-icon.btn-warning:hover:not(:disabled),
[data-theme="matrix"] .btn.btn-icon.btn-success:hover:not(:disabled) {
    transform: none;
    box-shadow: none;
}

[data-theme="matrix"] .btn.btn-icon.btn-danger {
    background: var(--danger-bg);
    color: var(--danger);
}
[data-theme="matrix"] .btn.btn-icon.btn-danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--danger) 28%, transparent);
    color: var(--danger);
}

[data-theme="matrix"] .btn.btn-icon.btn-warning {
    background: var(--warning-bg);
    color: var(--warning);
}
[data-theme="matrix"] .btn.btn-icon.btn-warning:hover:not(:disabled) {
    background: color-mix(in srgb, var(--warning) 28%, transparent);
    color: var(--warning);
}

[data-theme="matrix"] .btn.btn-icon.btn-success {
    background: var(--success-bg);
    color: var(--success);
}
[data-theme="matrix"] .btn.btn-icon.btn-success:hover:not(:disabled) {
    background: color-mix(in srgb, var(--success) 28%, transparent);
    color: var(--success);
}

[data-theme="matrix"] .btn.btn-icon.btn-secondary {
    background: var(--bg-hover);
    border-color: transparent;
}
[data-theme="matrix"] .btn.btn-icon.btn-secondary:hover:not(:disabled) {
    background: var(--accent-light);
    color: var(--accent);
    border-color: transparent;
}