/* ========================================
   RAINIFY - SISTEMA DE TEMAS (Light/Dark)
   Versión: 1.0
   Fecha: Enero 2026
   ======================================== */

/* ==========================================
   TEMA OSCURO (Default - Deep Space Dark)
   ========================================== */

:root,
body.dark-mode {
    /* Paleta Rural Refinada */
    --primary-green: #34d399;
    --primary-blue: #3b82f6;
    --accent-ochre: #d97706;
    --rain-blue: #60a5fa;

    /* Colores Sistema (Deep Space Dark) */
    --bg-dark: #020617;
    --bg-card: rgba(15, 23, 42, 0.6);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Glassmorphism Refinado */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(20px);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.82);

    /* Backgrounds específicos */
    --nav-bg: rgba(15, 23, 42, 0.8);
    --popup-bg: rgba(15, 23, 42, 0.98);
    --popup-border: rgba(59, 130, 246, 0.3);
    
    /* Mapa */
    --map-bg: #111827;
    --map-filter: brightness(1.3) contrast(1.1);
    --map-overlay-visible: block;
    
    /* Gradientes radiales del fondo */
    --bg-gradient-1: radial-gradient(circle at 0% 0%, rgba(52, 211, 153, 0.05) 0%, transparent 50%);
    --bg-gradient-2: radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
    
    /* Sombras de elevación (más oscuras) */
    --elevation-1: 
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
    
    --elevation-2: 
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    
    --elevation-3: 
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    
    --elevation-4: 
        0 16px 48px rgba(0, 0, 0, 0.6),
        0 8px 16px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    
    /* Efectos glow */
    --glow-green: 0 0 20px rgba(52, 211, 153, 0.4);
    --glow-blue: 0 0 20px rgba(59, 130, 246, 0.4);
    --glow-orange: 0 0 20px rgba(217, 119, 6, 0.4);
}

/* ==========================================
   TEMA CLARO (Light Mode Suave)
   ========================================== */

body.light-mode {
    /* Paleta Rural Refinada - Ajustada para Light */
    --primary-green: #059669;  /* Verde más oscuro para contraste */
    --primary-blue: #2563eb;   /* Azul más oscuro */
    --accent-ochre: #d97706;   /* Se mantiene igual */
    --rain-blue: #3b82f6;      /* Azul más oscuro */

    /* Colores Sistema (Light - Gris muy claro, no blanco puro) */
    --bg-dark: #f8fafc;        /* Gris muy claro (casi blanco) */
    --bg-card: rgba(255, 255, 255, 0.8);  /* Blanco con transparencia */
    --text-primary: #0f172a;   /* Gris muy oscuro (casi negro) */
    --text-secondary: #475569; /* Gris medio-oscuro */
    --text-muted: #94a3b8;     /* Gris medio */

    /* Glassmorphism Refinado - Invertido */
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-blur: blur(20px);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);

    /* Backgrounds específicos */
    --nav-bg: rgba(255, 255, 255, 0.85);
    --popup-bg: rgba(255, 255, 255, 0.98);
    --popup-border: rgba(59, 130, 246, 0.2);
    
    /* Mapa */
    --map-bg: #e2e8f0;
    --map-filter: brightness(1.0) contrast(1.0) saturate(0.95);
    --map-overlay-visible: none;
    
    /* Gradientes radiales del fondo - Más sutiles */
    --bg-gradient-1: radial-gradient(circle at 0% 0%, rgba(52, 211, 153, 0.03) 0%, transparent 50%);
    --bg-gradient-2: radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.03) 0%, transparent 50%);
    
    /* Sombras de elevación (más suaves) */
    --elevation-1: 
        0 2px 8px rgba(0, 0, 0, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.06);
    
    --elevation-2: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(0, 0, 0, 0.02);
    
    --elevation-3: 
        0 12px 32px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(0, 0, 0, 0.03);
    
    --elevation-4: 
        0 16px 48px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(0, 0, 0, 0.04);
    
    /* Efectos glow - Más sutiles */
    --glow-green: 0 0 15px rgba(5, 150, 105, 0.3);
    --glow-blue: 0 0 15px rgba(37, 99, 235, 0.3);
    --glow-orange: 0 0 15px rgba(217, 119, 6, 0.3);
}

/* ==========================================
   APLICACIÓN DE TEMAS EN ELEMENTOS CLAVE
   ========================================== */

/* Body con gradientes */
.app-container {
    background-image: var(--bg-gradient-1), var(--bg-gradient-2);
}

/* Bottom Navigation */
.bottom-nav {
    background: var(--nav-bg);
    border: 1px solid var(--glass-border);
}

/* Leaflet Container */
.leaflet-container {
    background: var(--map-bg) !important;
}

/* Leaflet Tiles Filter */
.leaflet-tile-pane {
    filter: var(--map-filter);
}

/* Map Blue Overlay (solo en dark mode) */
#map-blue-overlay {
    display: var(--map-overlay-visible);
}

/* Popups de Leaflet */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--popup-bg) !important;
    border: 1px solid var(--popup-border);
}

/* ==========================================
   TRANSICIÓN SUAVE ENTRE TEMAS
   ========================================== */

body,
.app-container,
.bottom-nav,
.glass-panel,
.card-premium,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.fab-add-spot {
    transition: 
        background-color 0.4s ease,
        background 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

/* Transición del mapa (tiles) */
.leaflet-tile-pane {
    transition: filter 0.6s ease;
}

/* ==========================================
   TOGGLE BUTTON DE TEMA
   ========================================== */

.fab-theme-toggle {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    box-shadow: var(--elevation-2);
}

.fab-theme-toggle:active {
    transform: scale(0.95);
}

/* Icono del sol (light mode) */
.fa-sun {
    color: #f59e0b;
}

/* Icono de luna (dark mode) */
.fa-moon {
    color: #3b82f6;
}

/* ==========================================
   AJUSTES ESPECÍFICOS PARA LIGHT MODE
   ========================================== */

/* Textos más oscuros en light mode para legibilidad */
body.light-mode .post-username,
body.light-mode .post-mm {
    color: var(--text-primary);
}

/* Nav items en light mode */
body.light-mode .nav-item {
    color: var(--text-muted);
}

body.light-mode .nav-item.active {
    color: var(--text-primary);
}

body.light-mode .nav-item.active i {
    color: var(--primary-green);
}

/* Ajustar opacidad de elementos en light mode */
body.light-mode .post-time,
body.light-mode .post-spot-name {
    opacity: 0.7;
}

/* ==========================================
   PREFERENCIA DEL SISTEMA (Opcional)
   ========================================== */