/* ============================================================
   ERP Premium Themes — Paletas curadas profesionales
   Cada tema tiene: fondo, panel, borde, texto, acento
   ============================================================ */

/* Transición suave al cambiar tema */
*, *::before, *::after {
    transition: background-color 0.35s ease, border-color 0.35s ease, color 0.2s ease, box-shadow 0.35s ease;
}

/* ============================================================
   OSCUROS
   ============================================================ */

/* 1. Midnight (Azul oscuro profundo — corporativo premium) */
html.theme-midnight,
html.theme-dark-blue {
    --bg-base:    #080d1a;   /* casi negro con tinte azul */
    --bg-panel:   #0d1526;   /* azul noche */
    --border-soft: #1e2d4a;  /* azul acero */
    --text-main:  #e8eef8;   /* blanco cálido */
    --text-muted: #6a85b0;   /* azul grisáceo */

    --primary-400: #5b9cf6;
    --primary-500: #3a7de8;
    --primary-600: #2560c4;

    --accent-glow: rgba(58, 125, 232, 0.25);
    --shadow-premium:    0 8px 24px -4px rgba(0, 0, 0, 0.6), 0 2px 8px -2px rgba(0,0,0,0.4);
    --shadow-premium-lg: 0 20px 40px -8px rgba(0, 0, 0, 0.7), 0 8px 16px -4px rgba(0,0,0,0.5);
}

/* 2. Obsidian (Gris carbón neutral — ejecutivo) */
html.theme-obsidian {
    --bg-base:    #111214;
    --bg-panel:   #1a1c1f;
    --border-soft: #2c2f34;
    --text-main:  #e9eaec;
    --text-muted: #7a7e88;

    --primary-400: #7c9fe8;
    --primary-500: #5b80d0;
    --primary-600: #4265b8;

    --accent-glow: rgba(91, 128, 208, 0.2);
    --shadow-premium:    0 8px 24px -4px rgba(0, 0, 0, 0.7);
    --shadow-premium-lg: 0 20px 40px -8px rgba(0, 0, 0, 0.8);
}

/* 3. Violet Night (Púrpura oscuro — moderno tech) */
html.theme-violet-night {
    --bg-base:    #0e0b1a;
    --bg-panel:   #16112b;
    --border-soft: #2b2050;
    --text-main:  #ece8ff;
    --text-muted: #8073c0;

    --primary-400: #a991f7;
    --primary-500: #8b68f0;
    --primary-600: #7048e0;

    --accent-glow: rgba(139, 104, 240, 0.25);
    --shadow-premium:    0 8px 24px -4px rgba(30, 0, 60, 0.6);
    --shadow-premium-lg: 0 20px 40px -8px rgba(30, 0, 60, 0.75);
}

/* 4. Forest (Verde oscuro — financiero/salud) */
html.theme-forest {
    --bg-base:    #060f0a;
    --bg-panel:   #0a1a10;
    --border-soft: #143320;
    --text-main:  #e6f4ec;
    --text-muted: #5a8f6a;

    --primary-400: #4ade80;
    --primary-500: #22c55e;
    --primary-600: #16a34a;

    --accent-glow: rgba(34, 197, 94, 0.2);
    --shadow-premium:    0 8px 24px -4px rgba(0, 20, 5, 0.7);
    --shadow-premium-lg: 0 20px 40px -8px rgba(0, 20, 5, 0.8);
}

/* 5. Crimson (Rojo oscuro — premium / luxury) */
html.theme-crimson {
    --bg-base:    #0f0608;
    --bg-panel:   #1a0b0f;
    --border-soft: #33101a;
    --text-main:  #f7e8ea;
    --text-muted: #a06070;

    --primary-400: #f87171;
    --primary-500: #ef4444;
    --primary-600: #dc2626;

    --accent-glow: rgba(239, 68, 68, 0.2);
    --shadow-premium:    0 8px 24px -4px rgba(30, 0, 10, 0.7);
    --shadow-premium-lg: 0 20px 40px -8px rgba(30, 0, 10, 0.8);
}

/* ============================================================
   CLAROS — Profesionales de alta contraste
   ============================================================ */

/* 6. Ivory (Blanco marfil suave — oficina clásica) */
html.theme-ivory {
    --bg-base:    #f5f5f0;
    --bg-panel:   #ffffff;
    --border-soft: #ddddd5;
    --text-main:  #1a1a18;
    --text-muted: #7a7a72;

    --primary-400: #5b87d8;
    --primary-500: #3a65bf;
    --primary-600: #2848a0;

    --accent-glow: rgba(58, 101, 191, 0.12);
    --shadow-premium:    0 2px 16px rgba(26, 26, 24, 0.08), 0 1px 4px rgba(26,26,24,0.06);
    --shadow-premium-lg: 0 8px 32px rgba(26, 26, 24, 0.10), 0 4px 12px rgba(26,26,24,0.07);
}

/* 7. Arctic (Azul glaciar — tecnológico limpio) */
html.theme-arctic {
    --bg-base:    #eef4fc;
    --bg-panel:   #ffffff;
    --border-soft: #c8ddf5;
    --text-main:  #0d2340;
    --text-muted: #4a6e96;

    --primary-400: #3a8fe8;
    --primary-500: #1a70d4;
    --primary-600: #0d55ad;

    --accent-glow: rgba(26, 112, 212, 0.12);
    --shadow-premium:    0 2px 16px rgba(13, 35, 64, 0.08);
    --shadow-premium-lg: 0 8px 32px rgba(13, 35, 64, 0.10);
}

/* 8. Sage (Verde salvia — ambiente natural) */
html.theme-sage {
    --bg-base:    #eef5f0;
    --bg-panel:   #ffffff;
    --border-soft: #c2dcc7;
    --text-main:  #0f2414;
    --text-muted: #4a7a58;

    --primary-400: #34b86a;
    --primary-500: #1a9950;
    --primary-600: #0d7a3c;

    --accent-glow: rgba(26, 153, 80, 0.12);
    --shadow-premium:    0 2px 16px rgba(15, 36, 20, 0.07);
    --shadow-premium-lg: 0 8px 32px rgba(15, 36, 20, 0.09);
}

/* 9. Sand (Beige dorado — cálido y premium) */
html.theme-sand {
    --bg-base:    #faf7f0;
    --bg-panel:   #ffffff;
    --border-soft: #e8dfc8;
    --text-main:  #2c2010;
    --text-muted: #8a7460;

    --primary-400: #d4963a;
    --primary-500: #b87820;
    --primary-600: #966010;

    --accent-glow: rgba(184, 120, 32, 0.12);
    --shadow-premium:    0 2px 16px rgba(44, 32, 16, 0.07);
    --shadow-premium-lg: 0 8px 32px rgba(44, 32, 16, 0.09);
}

/* ============================================================
   GLOBALES
   ============================================================ */

body {
    background-color: var(--bg-base);
    color: var(--text-main);
}

/* Inputs siguen el tema activo */
input, select, textarea {
    background-color: var(--bg-panel) !important;
    color: var(--text-main) !important;
    border-color: var(--border-soft) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 2px var(--accent-glow, rgba(58, 125, 232, 0.2)) !important;
}

/* Glassmorphism — se adapta a cualquier tema */
.glass-panel {
    background-color: color-mix(in srgb, var(--bg-panel) 72%, transparent) !important;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid color-mix(in srgb, var(--border-soft) 55%, transparent) !important;
}

.glass-panel-hover:hover {
    background-color: color-mix(in srgb, var(--bg-panel) 88%, transparent) !important;
}

/* Sombra de acento primario (glow) */
.shadow-accent {
    box-shadow: 0 0 20px var(--accent-glow, rgba(58, 125, 232, 0.2));
}

/* Sombra premium por tema */
.shadow-premium {
    box-shadow: var(--shadow-premium);
}
.shadow-premium-lg {
    box-shadow: var(--shadow-premium-lg);
}

/* ============================================================
   OPTIMIZACIONES MÓVILES Y PWA (iOS Safari / Android Chrome)
   ============================================================ */

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

html, body {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
}

/* Soporte para scroll horizontal táctil sin scrollbar visible */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

/* Contenedor seguro para iPhones con Home Indicator y Notch */
.safe-area-bottom {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
}
.safe-area-top {
    padding-top: max(env(safe-area-inset-top, 0px), 12px);
}

/* Barra de navegación inferior móvil */
.mobile-bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 6px);
    background-color: color-mix(in srgb, var(--bg-panel) 88%, transparent) !important;
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border-top: 1px solid color-mix(in srgb, var(--border-soft) 60%, transparent);
}

/* Modales protegidos contra teclado táctil */
.modal-body-scroll {
    max-height: calc(85vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}