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

[data-theme="cyber"] {
    /* Tokens de RebootCodes */
    --primary:      #00d4ff;
    --primary-dark: #00a7cc;
    --primary-dim:  rgba(0, 212, 255, .18);
    --primary-rgb:  0, 212, 255;

    --bg-base:     #0a0e1a;
    --bg-surface:  #0f1628;
    --bg-elevated: #131d35;
    --bg-sidebar:  #090d1a;

    --text-primary:   #edf2f7;
    --text-secondary: #a8b8cc;
    --text-inverse:   #06101f;

    --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(0, 212, 255, .08);
    --sidebar-bg:   var(--bg-sidebar);
    --navbar-bg:    var(--bg-surface);
    --input-bg:     #0a0e1a;
    --overlay:      rgba(0, 0, 0, .75);

    --border:        rgba(0, 212, 255, .12);
    --border-strong: rgba(0, 212, 255, .34);

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

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

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

    --danger:  #ef4444;
    --warning: #f59e0b;
    /* En RebootCodes, "info" en cyber es violeta (acompaña al cian primario)
       en vez del azul del resto de paletas. Se respeta esa decisión. */
    --info:    #7c3aed;

    --success: #10b981;

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

    --gradient-accent: linear-gradient(135deg, #00d4ff 0%, #00a7cc 100%);
    --shadow-accent:   0 6px 24px rgba(0, 212, 255, .40);
}

[data-theme="cyber"]::-webkit-scrollbar-thumb,
[data-theme="cyber"] ::-webkit-scrollbar-thumb {
    background: #7c3aed;
}

/* Modo claro: el cian de esta paleta se pensó para fondo oscuro y se pierde
   sobre blanco (poco contraste, se ve "lavado"). Se sustituye por una
   versión sólida y más oscura del mismo color, 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="cyber"][data-mode="light"] {
    --primary:      #0e7490;
    --primary-dark: #155e75;
    --primary-dim:  rgba(14, 116, 144, .12);
    --primary-rgb:  14, 116, 144;

    --accent:       var(--primary);
    --accent-hover: var(--primary-dark);
    --accent-light: var(--primary-dim);
    --accent-rgb:   var(--primary-rgb);
    /* Texto sobre el acento: el #06101f del modo oscuro sobre este teal
       queda en ~3.6:1; en blanco, ~5.4:1 (como en clásico claro). */
    --text-inverse: #ffffff;

    /* El violeta de "info" en cyber ya es un color sólido y normal; solo se
       oscurece un punto para que combine con el resto de tonos del modo claro. */
    --info: #6d28d9;

    --gradient-accent: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
    --shadow-accent:   0 6px 24px rgba(14, 116, 144, .25);
}

/* --- Toques de caracter: el glow cian 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="cyber"] .sidebar-header .avatar {
    box-shadow: 0 0 18px var(--primary-dim);
}

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

[data-theme="cyber"] .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 cyber quedarian con el tinte de otro color. Se recalculan
   a partir del color real de la paleta. */
[data-theme="cyber"] {
    --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="cyber"] .btn.btn-icon.btn-danger,
[data-theme="cyber"] .btn.btn-icon.btn-warning,
[data-theme="cyber"] .btn.btn-icon.btn-success {
    border: 1px solid transparent;
    box-shadow: none;
}
[data-theme="cyber"] .btn.btn-icon.btn-danger:hover:not(:disabled),
[data-theme="cyber"] .btn.btn-icon.btn-warning:hover:not(:disabled),
[data-theme="cyber"] .btn.btn-icon.btn-success:hover:not(:disabled) {
    transform: none;
    box-shadow: none;
}

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

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

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

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