/* Tema Oscuro - Appunty */
@import 'theme-config.css';

[data-theme="dark"] {
    /* Colores Principales / Acento (Appunty Blue - High Perf) */
    --primary: #5897F2;
    /* Poco más brillante para fondo negro */
    --primary-hover: #1E6FDB;
    --primary-dark: var(--primary-hover);
    --primary-light: rgba(88, 151, 242, 0.2);
    --primary-fade: color-mix(in srgb, var(--primary) 14%, transparent);
    --secondary: #64D2FF;
    /* Cyan brillante complementario */
    --chart-primary: #5897F2;

    --text-main: var(--text-primary);
    --text-light: var(--text-secondary);
    --bg-page: var(--background-main);
    --bg-card: var(--background-card);
    --divider: var(--border-color);
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    --transition: var(--transition-normal);

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-m: var(--radius-md);
    --radius-l: var(--radius-lg);

    /* Fondos - Deep Premium (Agradable y Minimal) */
    --background-chrome: #0D1117;
    /* Barra lateral oscuro profundo */
    --background-main: #0F1218;
    /* Fondo principal casi negro pero con matiz frío */
    --background-card: #1A1E26;
    /* Tarjeta: gris azulado muy oscuro y elegante */
    --background-element: #262B36;
    /* Elementos: distinción sutil */

    /* Colores de Texto */
    --text-primary: #EDF2F7;
    /* Blanco lila suave */
    --text-secondary: #94A3B8;
    /* Gris azulado para textos secundarios */

    /* Sombras - Deep Atmosphere */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25);
    --shadow-soft: var(--shadow-card);
    --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.4);

    /* Estados de Elementos */
    --element-hover: #2D3340;
    --element-active: #363D4D;
    --element-disabled: #1A1E26;

    /* Bordes - Gris azulado sutil */
    --border-color: #2D3545;
    --border-focus: #5897F2;

    /* Inputs y Formularios */
    --input-background: #1C1C1E;
    --input-border: #38383A;
    --input-text: #F5F5F7;
    --input-placeholder: #636366;

    /* Botones */
    --button-primary: #5897F2;
    /* En dark mode, el azul destaca mejor que negro */
    --button-primary-hover: #7DADF8;
    --button-secondary: #2C2C2E;
    --button-secondary-hover: #3A3A3C;

    /* Notificaciones y Estados */
    --notification-info-bg: color-mix(in srgb, var(--info) 18%, transparent);
    --notification-success-bg: color-mix(in srgb, var(--success) 18%, transparent);
    --notification-warning-bg: color-mix(in srgb, var(--warning) 18%, transparent);
    --notification-error-bg: color-mix(in srgb, var(--error) 18%, transparent);
}

/* Ajuste visual para overlay en tema oscuro */
[data-theme="dark"] .loading-overlay {
    background: rgba(0, 0, 0, 0.7);
}