/* =============================================================
   PALETAS DEL MODO OSCURO — POS
   Tres combinaciones seleccionables desde el panel de apariencia
   (vistas/modulos/apariencia.php). Se eligen con el atributo
   data-dark en <html>; el modo claro no se toca.

       <html data-theme="dark" data-dark="cobalto|carbon|onix">

   Se carga DESPUES de dark-mode.css: cada bloque lleva dos
   atributos, asi que gana por especificidad al bloque
   [data-theme="dark"] generico de aquel archivo, que queda como
   valor de respaldo si este CSS no llegara a cargar.

   Contraste medido con WCAG 2.1 sobre las cuatro superficies de
   cada paleta (pagina, tarjeta, elevada y menu lateral):
   texto principal >= 14:1 (AAA), secundario >= 5.2:1, apagado
   >= 4:1 y todos los acentos >= 4.5:1. Ninguna combinacion baja
   de esos minimos; el script que lo comprueba esta descrito en
   docs/TEMAS-oscuros.md.

   Al agregar una paleta nueva hay que tocar cuatro sitios:
   este archivo, la lista de apariencia.php, la validacion de
   apariencia.js y el anti-FOUC de plantilla.php.
   ============================================================= */

/* =============================================================
   1) COBALTO — azul marino profundo
   Tomada del tablero de ROI por almacen que sirvio de referencia:
   superficies azuladas, dos halos radiales muy suaves en el fondo
   y tarjetas con un degradado apenas perceptible. Es la que se
   aplica si nunca se ha elegido ninguna.
   ============================================================= */
[data-theme="dark"][data-dark="cobalto"] {
    --bg-page: #0d1016;
    --bg-card: #171c26;
    --bg-elevated: #1c2230;
    --bg-sidebar: #12161f;
    --bg-hover: rgba(255, 255, 255, 0.05);

    --text-primary: #eef2f8;
    --text-secondary: #9aa7bb;
    --text-muted: #7a8699;

    --border-color: #252c3a;
    --border-strong: #2f3849;
    --grid-line: rgba(255, 255, 255, 0.06);
    --track-bg: #1c2230;

    --accent: #4f8cff;
    --accent-rgb: 79, 140, 255;

    /* Acentos de las tarjetas KPI y los graficos */
    --acc-teal: #22d3ee;
    --acc-blue: #4f8cff;
    --acc-purple: #a78bfa;
    --acc-red: #ef4444;
    --acc-amber: #f59e0b;
    --acc-violet: #818cf8;
    --acc-green: #22c55e;

    /* Fondo de pagina y de tarjeta con relieve, como el tablero de referencia */
    --bg-page-image:
        radial-gradient(1100px 520px at 12% -8%, #1b2740 0%, transparent 60%),
        radial-gradient(900px 480px at 92% 0%, #241d3d 0%, transparent 58%);
    --bg-card-image: linear-gradient(160deg, #171c26, #12161f);

    --chart-bar: #4f8cff;
    --chart-line: #f59e0b;
    --chart-tick: #7a8699;
    --chart-tooltip-bg: #0a0d13;
    --chart-tooltip-text: #eef2f8;
}

/* =============================================================
   2) CARBON — gris azulado neutro
   La paleta oscura de GitHub, la referencia mas repetida cuando
   se habla de modo oscuro bien resuelto: superficies frias muy
   oscuras, azul reservado para lo navegable y verde/rojo/ambar
   solo para estados. El menu lateral casi negro marca la
   separacion con el contenido sin necesidad de bordes.
   ============================================================= */
[data-theme="dark"][data-dark="carbon"] {
    --bg-page: #0d1117;
    --bg-card: #161b22;
    --bg-elevated: #21262d;
    --bg-sidebar: #010409;
    --bg-hover: rgba(255, 255, 255, 0.06);

    --text-primary: #e6edf3;
    --text-secondary: #9198a1;
    --text-muted: #7d8590;

    --border-color: #30363d;
    --border-strong: #3d444d;
    --grid-line: rgba(255, 255, 255, 0.07);
    --track-bg: #21262d;

    --accent: #4493f8;
    --accent-rgb: 68, 147, 248;

    --acc-teal: #39c5cf;
    --acc-blue: #4493f8;
    --acc-purple: #a371f7;
    --acc-red: #f85149;
    --acc-amber: #d29922;
    --acc-violet: #8b7ff0;
    --acc-green: #3fb950;

    --bg-page-image: none;
    --bg-card-image: none;

    --chart-bar: #4493f8;
    --chart-line: #d29922;
    --chart-tick: #7d8590;
    --chart-tooltip-bg: #21262d;
    --chart-tooltip-text: #e6edf3;
}

/* =============================================================
   3) ONIX — casi negro neutro
   El registro de Linear y Vercel: gris verdadero sin tinte de
   color, escalones de elevacion muy juntos, bordes translucidos
   en vez de lineas solidas y un unico acento indigo. Es la mas
   contrastada de las tres y la que menos cansa en pantallas OLED.
   ============================================================= */
[data-theme="dark"][data-dark="onix"] {
    --bg-page: #0f1011;
    --bg-card: #191a1b;
    --bg-elevated: #232427;
    --bg-sidebar: #08090a;
    --bg-hover: rgba(255, 255, 255, 0.055);

    --text-primary: #f7f8f8;
    --text-secondary: #b4b8bf;
    --text-muted: #8a8f98;

    --border-color: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --grid-line: rgba(255, 255, 255, 0.06);
    --track-bg: #232427;

    --accent: #8b8fff;
    --accent-rgb: 139, 143, 255;

    --acc-teal: #2dd4bf;
    --acc-blue: #8b8fff;
    --acc-purple: #c4b5fd;
    --acc-red: #f87171;
    --acc-amber: #fbbf24;
    --acc-violet: #a5b4fc;
    --acc-green: #4ade80;

    --bg-page-image: none;
    --bg-card-image: none;

    --chart-bar: #8b8fff;
    --chart-line: #fbbf24;
    --chart-tick: #8a8f98;
    --chart-tooltip-bg: #232427;
    --chart-tooltip-text: #f7f8f8;
}

/* =============================================================
   LO QUE LAS PALETAS PINTAN
   Reglas comunes a las tres. Todo sale de las variables de
   arriba, asi que agregar una paleta no obliga a tocar nada de
   aqui.
   ============================================================= */

/* Halos del fondo (solo Cobalto los define; las otras dos ponen none) */
[data-theme="dark"] body {
    background-image: var(--bg-page-image, none);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
[data-theme="dark"] .page-wrapper {
    background-color: transparent;
}
/* El degradado del fondo tiene que verse tambien donde el contenido no llega */
[data-theme="dark"] #main-wrapper {
    background-color: transparent;
}

/* Relieve de las tarjetas (solo Cobalto lo define) */
[data-theme="dark"] .card {
    background-image: var(--bg-card-image, none);
}

/* Menu lateral: cada paleta elige su propio escalon */
[data-theme="dark"] #main-wrapper .left-sidebar,
[data-theme="dark"] #main-wrapper .left-sidebar[data-sidebarbg],
[data-theme="dark"] #main-wrapper .left-sidebar[data-sidebarbg] ul,
[data-theme="dark"] #main-wrapper .scroll-sidebar,
[data-theme="dark"] #main-wrapper .sidebar-nav,
[data-theme="dark"] #main-wrapper .sidebar-nav ul {
    background: var(--bg-sidebar, #191c22) !important;
}

/* Barra superior: separada por una linea del color del borde de la paleta */
[data-theme="dark"] #main-wrapper .topbar {
    border-bottom: 1px solid var(--border-color);
}

/* El pie de pagina de la plantilla es blanco fijo y el modo oscuro nunca lo cubrio: en pantallas
   con poco contenido se veia una franja blanca abajo. Ahora deja ver el fondo de la paleta. */
[data-theme="dark"] .footer {
    background: transparent;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
}

/* El preloader tapa la pantalla en blanco mientras carga; en oscuro es un fogonazo. */
[data-theme="dark"] .preloader {
    background-color: var(--bg-page);
}

/* Estados de hover y seleccion del menu */
[data-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover,
[data-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover i {
    background-color: var(--bg-hover, rgba(255, 255, 255, 0.06));
}
[data-theme="dark"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
[data-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link.active,
[data-theme="dark"] .sidebar-nav ul .sidebar-item > .sidebar-link.active {
    background-color: var(--bg-hover, rgba(255, 255, 255, 0.08));
    box-shadow: inset 3px 0 0 var(--accent);
}

/* Enlaces y foco: el acento de la paleta */
[data-theme="dark"] .breadcrumb-item a,
[data-theme="dark"] a.link,
[data-theme="dark"] .page-wrapper a:not(.btn):not(.dropdown-item):not(.nav-link):not(.sidebar-link):not(.page-link) {
    color: var(--accent);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.15rem rgba(var(--accent-rgb, 106, 176, 243), 0.25);
}

/* Acentos de las tarjetas KPI del tablero */
[data-theme="dark"] .theme-scope-dashboard .card.bg-success .round { background-color: rgba(255, 255, 255, .06); }
[data-theme="dark"] .theme-scope-dashboard .card.bg-success .round i { color: var(--acc-teal) !important; }
[data-theme="dark"] .theme-scope-dashboard .card.bg-info .round { background-color: rgba(255, 255, 255, .06); }
[data-theme="dark"] .theme-scope-dashboard .card.bg-info .round i { color: var(--acc-blue) !important; }
[data-theme="dark"] .theme-scope-dashboard .card.kpi-purple .round { background-color: rgba(255, 255, 255, .06); }
[data-theme="dark"] .theme-scope-dashboard .card.kpi-purple .round i { color: var(--acc-purple) !important; }
[data-theme="dark"] .theme-scope-dashboard .card.bg-danger .round { background-color: rgba(255, 255, 255, .06); }
[data-theme="dark"] .theme-scope-dashboard .card.bg-danger .round i { color: var(--acc-red) !important; }
[data-theme="dark"] .theme-scope-dashboard .card.bg-warning .round { background-color: rgba(255, 255, 255, .06); }
[data-theme="dark"] .theme-scope-dashboard .card.bg-warning .round i { color: var(--acc-amber) !important; }
[data-theme="dark"] .theme-scope-dashboard .card.bg-primary .round { background-color: rgba(255, 255, 255, .06); }
[data-theme="dark"] .theme-scope-dashboard .card.bg-primary .round i { color: var(--acc-violet) !important; }

/* Botones solidos de Bootstrap: que el primario siga al acento de la paleta */
[data-theme="dark"] .btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #0b0d10;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus,
[data-theme="dark"] .btn-primary:active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #0b0d10;
    filter: brightness(1.1);
}
[data-theme="dark"] .btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
}
[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #0b0d10;
}

/* Barras de desplazamiento a juego */
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-strong, #2f3849);
    border-radius: 9px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); background-clip: padding-box; }
[data-theme="dark"] * { scrollbar-color: var(--border-strong, #2f3849) transparent; }

/* =============================================================
   MUESTRAS DEL PANEL DE APARIENCIA
   Cada opcion es una miniatura del tema: menu lateral, tarjeta y
   punto de acento, pintados con los colores reales de la paleta
   para que se elija viendo, no leyendo el nombre.
   ============================================================= */
.ap-temas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ap-tema { position: relative; }
.ap-tema input { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; }

/* style.css maquilla TODO `input[type=radio] + label` como un radio de Material: lo vuelve
   inline-block de 16px de alto, le mete 26px de sangria y le dibuja un circulo con :before y
   :after. Aqui se anula por completo; hacen falta tres atributos para ganarle en especificidad. */
.ap-tema input[type="radio"] + label,
.ap-tema input[type="radio"]:checked + label,
.ap-tema input[type="radio"]:not(:checked) + label {
    display: block;
    position: relative;
    height: auto;
    line-height: normal;
    padding: 0;
    margin: 0;
    font-size: inherit;
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: rgba(0, 0, 0, .05) 0 9px 17.5px;
    transition: transform .1s ease-in, border-color .1s ease-in;
}
.ap-tema input[type="radio"] + label::before,
.ap-tema input[type="radio"] + label::after,
.ap-tema input[type="radio"]:checked + label::before,
.ap-tema input[type="radio"]:checked + label::after,
.ap-tema input[type="radio"]:not(:checked) + label::before,
.ap-tema input[type="radio"]:not(:checked) + label::after {
    content: none;
    display: none;
    border: 0;
    animation: none;
}
.ap-tema input[type="radio"] + label:hover { transform: scale(1.04); }
.ap-tema input[type="radio"]:checked + label { border-color: var(--ap-primario); }
.ap-tema .ap-mini {
    display: flex;
    height: 46px;
    position: relative;
}
.ap-tema .ap-mini .ap-side { width: 30%; }
.ap-tema .ap-mini .ap-body { width: 70%; display: flex; align-items: center; justify-content: center; }
.ap-tema .ap-mini .ap-chip {
    width: 60%;
    height: 12px;
    border-radius: 3px;
}
.ap-tema .ap-mini .ap-punto {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.ap-tema .ap-nom {
    display: block;
    padding: 6px 4px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}
.ap-tema input[type="radio"]:checked + label .ap-nom { color: var(--text-primary); }

/* Los colores de cada miniatura son los de su propia paleta, no los del tema activo */
.ap-mini-cobalto .ap-side { background: #12161f; }
.ap-mini-cobalto .ap-body { background: #0d1016; }
.ap-mini-cobalto .ap-chip { background: #171c26; border: 1px solid #252c3a; }
.ap-mini-cobalto .ap-punto { background: #4f8cff; }

.ap-mini-carbon .ap-side { background: #010409; }
.ap-mini-carbon .ap-body { background: #0d1117; }
.ap-mini-carbon .ap-chip { background: #161b22; border: 1px solid #30363d; }
.ap-mini-carbon .ap-punto { background: #4493f8; }

.ap-mini-onix .ap-side { background: #08090a; }
.ap-mini-onix .ap-body { background: #0f1011; }
.ap-mini-onix .ap-chip { background: #191a1b; border: 1px solid #2a2b2e; }
.ap-mini-onix .ap-punto { background: #8b8fff; }