/* --- styles/style-theme-prefers-color-scheme-dark.css --- */

/* =========================================================
   1. MODO SISTEMA OPERATIVO (Automático / Base OSCURA)
   ========================================================= */
@media (prefers-color-scheme: dark) {
    :root {   
        --color-bg: #111;
        --color-card-bg: rgba(255, 255, 255, 0.02);
        --color-mask-gradient: rgba(17, 17, 17, 0.4);
        --color-primary: #00E5FF;
        --color-text: #eee;
        --color-card-border: #ababab; 
        --color-card-border-disabled: #666; 
        --color-border-placeholder: #555; 
        --color-header-bg: #222;
        --color-header-text: #fff;
        --color-footer-text: #fff;
        
        --color-primary-bg: rgba(0, 229, 255, 0.1); /* 10% de tu --color-primary #00E5FF */
        
        --color-danger: #ff8080; /* Contraste 7.7:1 */
        --color-danger-bg: rgba(255, 128, 128, 0.1);
        
        --color-success: #61e07b; /* Contraste 8.4:1 */
        --color-success-bg: rgba(97, 224, 123, 0.1);
        
        --color-fire: #FF931E; /* Contraste 8.5:1 (Mantenemos el original) */
        
        --color-details-action-item-hover: rgba(255, 255, 255, 0.05);
        --shadow-opacity: 0.8;

        --color-text-muted: #ababab;
        --color-shadow-primary: rgba(0, 123, 255, 0.4); 
        --color-shadow-disabled: rgba(170, 170, 170, 0.8);
        --color-shadow-modal: rgba(0, 0, 0, 0.7); 
        --color-toast-bg: #222;
        --color-toast-text: #fff;

        /* ⭐️ CORRECCIÓN: Amarillo brillante para Obras en Modo Oscuro ⭐️ */
        --color-icon-obras: #FFC107; /* Amarillo Brillante */

        --color-logo-static: #ababab;
        --color-logo-dynamic: var(--color-icon-obras);

        /* ⭐️ Variables añadidas para el control dinámico del filtro SVG (Dark Mode) ⭐️ */
        --shadow-color-hex: #888888;

        --color-a11y-selected-text: #000000;
        --color-a11y-slider-track: #555;
        --color-a11y-slider-labels: var(--color-text-muted);

        color-scheme: dark;
        background-color: var(--color-bg);
        color: var(--color-text);
    }
}

/* =========================================================
   2. MODO MANUAL (Seleccionado en Modal A11y)
   ========================================================= */
body[data-theme="dark"] {
    --color-bg: #111;
    --color-card-bg: rgba(255, 255, 255, 0.02);
    --color-mask-gradient: rgba(17, 17, 17, 0.4);
    --color-primary: #00E5FF;
    --color-text: #eee;
    --color-card-border: #ababab; 
    --color-card-border-disabled: #666; 
    --color-border-placeholder: #555; 
    --color-header-bg: #222;
    --color-header-text: #fff;
    --color-footer-text: #fff;
    
    --color-primary-bg: rgba(0, 229, 255, 0.1); /* 10% de tu --color-primary #00E5FF */
        
    --color-danger: #ff8080; /* Contraste 7.7:1 */
    --color-danger-bg: rgba(255, 128, 128, 0.1);
    
    --color-success: #61e07b; /* Contraste 8.4:1 */
    --color-success-bg: rgba(97, 224, 123, 0.1);
    
    --color-fire: #FF931E; /* Contraste 8.5:1 (Mantenemos el original) */
    
    --color-details-action-item-hover: rgba(255, 255, 255, 0.05);
    --shadow-opacity: 0.8;

    --color-text-muted: #ababab;
    --color-shadow-primary: rgba(0, 123, 255, 0.4); 
    --color-shadow-disabled: rgba(170, 170, 170, 0.8);
    --color-shadow-modal: rgba(0, 0, 0, 0.7); 
    --color-toast-bg: #222;
    --color-toast-text: #fff;

    --color-icon-obras: #FFC107; 

    --color-logo-static: #ababab;
    --color-logo-dynamic: var(--color-icon-obras);

    --shadow-color-hex: #888888;

    --color-a11y-selected-text: #000000;
    --color-a11y-slider-track: #555;
    --color-a11y-slider-labels: var(--color-text-muted);

    /* Forzamos el esquema nativo de componentes (scrollbars, etc.) */
    color-scheme: dark;
    background-color: var(--color-bg);
    color: var(--color-text);
}
/* --- styles/style-theme-prefers-color-scheme-dark.css --- */