/* --------------------------------------------- */
/*      1. Light Mode (tema claro)               */
/* --------------------------------------------- */
/* --------------------------------------------- */
/*      Light Mode (tema claro, no puro blanco) */
/* --------------------------------------------- */
:root {
    /* Fondos */
    --color-background: #E3F2FD;
    --color-background-op: #E3F2FDE0;
    /* azul muy pálido */
    --color-surface: #BBDEFB;
    /* paneles ligeramente más intensos */
    --color-card-background: #F0F8FF;
    /* AliceBlue, casi blanco pero con matiz */
    /* Texto */
    --color-text-primary: #000000;
    /* azul oscuro */
    --color-text-secondary: #1565C0;
    /* azul medio */
    --color-text-disabled: #82B1FF;
    /* azul claro */
    /* Bordes y líneas */
    --color-border: #90CAF9;
    /* azul pastel */
    /* Inputs y selects */
    --color-input-bg: #FFFFFF;
    /* blanco puro para máxima legibilidad dentro del input */
    --color-input-text: var(--color-text-primary);
    --color-input-border: #64B5F6;
    --color-input-placeholder: #90CAF9;
    /* Botón primario (azul vivo) */
    --color-btn-primary-bg: #1976D2A0;
    /* semitransparente */
    --color-btn-primary-text: #FFFFFF;
    --color-btn-primary-border: #1976D2;
    --color-btn-primary-hover-bg: #1565C0A0;
    --color-btn-primary-disabled: #90A4AE;
    /* Botón secundario (azul cielo) */
    --color-btn-secondary-bg: #64B5F6A0;
    --color-btn-secondary-text: #0D47A1;
    --color-btn-secondary-border: #64B5F6;
    --color-btn-secondary-hover-bg: #42A5F5A0;
    --color-btn-secondary-disabled: #B3E5FC;
    /* Links */
    --color-link: #0D47A1;
    --color-link-hover: #1565C0;
    /* Progress Bar */
    --color-progress-track-bg: #BBDEFB;
    --color-progress-fill: #1976D2;
    --color-update-app-1: rgba(0,0,0, 0);
    --color-update-app-2: rgba(0,0,0, 0.8);
}



/* --------------------------------------------- */
/*      2. Dark Mode (tema oscuro)               */
/* --------------------------------------------- */
[data-theme="dark"] {
    --color-background: #1C1B1A;
    --color-background-op: #1C1B1AE0;
    /* gris muy oscuro con matiz cálido */
    --color-surface: #2C2A29;
    --color-card-background: #383634;
    --color-text-primary: #EDEAE3;
    /* crema claro */
    --color-text-secondary: #C0BEB7;
    --color-text-disabled: #77726C;
    --color-border: #4A4845;
    /* Inputs y selects */
    --color-input-bg: #2C2A29;
    --color-input-text: var(--color-text-primary);
    --color-input-border: #55504C;
    --color-input-placeholder: #888481;
    /* Botón primario (rojo Lotería) */
    --color-btn-primary-bg: #C0392B80;
    --color-btn-primary-text: #FFFFFF;
    --color-btn-primary-border: #C0392B;
    --color-btn-primary-hover-bg: #A93226A0;
    --color-btn-primary-disabled: #444444;
    /* Botón secundario (amarillo dorado) */
    --color-btn-secondary-bg: #F1C40F80;
    --color-btn-secondary-text: #1C1B1A;
    --color-btn-secondary-border: #F1C40F;
    --color-btn-secondary-hover-bg: #D4AC0DA0;
    --color-btn-secondary-disabled: #55504C;
    /* Links */
    --color-link: #85C1E9;
    --color-link-hover: #5DADE2;
    /* Progress Bar */
    --color-progress-track-bg: #44403D;
    --color-progress-fill: #C0392B;
    --color-update-app-1: rgba(255,255,200, 0);
    --color-update-app-2: rgba(255,255,200, 0.8);    
}