/* ============================================================================
 * variables.css — Sistema de temas y tokens de diseño
 * ----------------------------------------------------------------------------
 * Define todos los tokens de diseño como custom properties en :root y los
 * sobrescribe por tema mediante [data-tema="..."] en el elemento <html>.
 *
 * Temas disponibles:
 *   - claro     : fondo blanco, texto oscuro (Tema por defecto)
 *   - oscuro    : fondo oscuro, texto claro
 *   - auto      : hereda de prefers-color-scheme (light/dark)
 *   - bosque    : verde bosque (#2d5a3d)
 *   - atardecer : naranja atardecer (#c2410c)
 *   - oceano    : azul océano (#0e7490)
 *
 * Botones convencionales (innegociable):
 *   - Verde con letras blancas: respuestas positivas, guardado, aceptar
 *   - Rojo con letras blancas: borrado, respuestas negativas, cancelar
 * ============================================================================ */

:root {
  /* ---- Tipografía base ---- */
  --font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base: 100%; /* 1 rem = 16 px; el slider de config escala esto */
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.5rem;
  --line-height-base: 1.5;

  /* ---- Espaciado (escala 4px) ---- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */

  /* ---- Radios de borde ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---- Sombras ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-fab: 0 4px 12px rgba(0, 0, 0, 0.25);

  /* ---- Z-index (escala) ---- */
  --z-mapa: 1;
  --z-controles-mapa: 500;
  --z-barra-superior: 600;
  --z-barra-inferior: 600;
  --z-banner-cookies: 700;
  --z-boton-instalar: 800;
  --z-toast: 900;
  --z-modal-fondo: 1200;
  --z-modal: 1201;

  /* ---- Tamaños de mapa y elementos ---- */
  --altura-barra-superior: 56px;
  --altura-barra-inferior: 90px;
  --altura-panel-stats: auto;
  --altura-panel-elevacion: 180px;
  --ancho-panel-historico: 280px;
  --ancho-panel-sombra: 300px;
  --altura-fab: 56px;
  --tamano-icono: 24px;

  /* ---- Transiciones ---- */
  --transicion-rapida: 120ms ease-out;
  --transicion-media: 240ms ease-out;
  --transicion-lenta: 400ms ease-out;

  /* ---- Botones convencionales (innegociable) ---- */
  --boton-positivo-fondo: #16a34a;
  --boton-positivo-texto: #ffffff;
  --boton-positivo-hover: #15803d;
  --boton-negativo-fondo: #dc2626;
  --boton-negativo-texto: #ffffff;
  --boton-negativo-hover: #b91c1c;

  /* ---- Colores de la SOMBRA (constante en todos los temas) ---- */
  --color-usuario: #2563eb;     /* Azul ruta del usuario */
  --color-usuario-claro: #60a5fa;
  --color-sombra: #ef4444;      /* Rojo del pin de destino, es la "sombra" */
  --color-sombra-claro: #f87171;
  --color-grabando: #dc2626;    /* Rojo de REC */
}

/* ----------------------------------------------------------------------------
 * TEMA CLARO (por defecto)
 * ---------------------------------------------------------------------------- */
:root,
[data-tema="claro"] {
  --color-fondo: #f1f5f9;
  --color-fondo-2: #ffffff;
  --color-fondo-3: #f8fafc;
  --color-texto: #0f172a;
  --color-texto-2: #475569;
  --color-texto-3: #94a3b8;
  --color-borde: #cbd5e1;
  --color-borde-2: #e2e8f0;
  --color-acento: #2563eb;
  --color-acento-texto: #ffffff;
  --color-acento-claro: #dbeafe;
  --color-acento-hover: #1d4ed8;
  --color-panel: #ffffff;
  --color-panel-borde: #e2e8f0;
  --color-sombra-texto: rgba(0, 0, 0, 0.06);
  --color-toggle-off: #cbd5e1;
  --color-fondo-mapa: #e2e8f0;
  --color-fondo-input: #ffffff;
  --color-texto-input: #0f172a;
  --color-borde-input: #cbd5e1;
  --color-hover-lista: #f1f5f9;
  --color-seleccion-lista: #dbeafe;
  --color-fondo-modal-fondo: rgba(15, 23, 42, 0.55);
}

/* ----------------------------------------------------------------------------
 * TEMA OSCURO
 * ---------------------------------------------------------------------------- */
[data-tema="oscuro"] {
  --color-fondo: #0f172a;
  --color-fondo-2: #1e293b;
  --color-fondo-3: #334155;
  --color-texto: #f1f5f9;
  --color-texto-2: #cbd5e1;
  --color-texto-3: #64748b;
  --color-borde: #334155;
  --color-borde-2: #475569;
  --color-acento: #3b82f6;
  --color-acento-texto: #ffffff;
  --color-acento-claro: #1e3a8a;
  --color-acento-hover: #60a5fa;
  --color-panel: #1e293b;
  --color-panel-borde: #334155;
  --color-sombra-texto: rgba(0, 0, 0, 0.4);
  --color-toggle-off: #475569;
  --color-fondo-mapa: #1e293b;
  --color-fondo-input: #0f172a;
  --color-texto-input: #f1f5f9;
  --color-borde-input: #475569;
  --color-hover-lista: #334155;
  --color-seleccion-lista: #1e3a8a;
  --color-fondo-modal-fondo: rgba(0, 0, 0, 0.7);
}

/* ----------------------------------------------------------------------------
 * TEMA AUTOMÁTICO (sigue prefers-color-scheme del sistema)
 * ---------------------------------------------------------------------------- */
[data-tema="auto"] {
  --color-fondo: #f1f5f9;
  --color-fondo-2: #ffffff;
  --color-fondo-3: #f8fafc;
  --color-texto: #0f172a;
  --color-texto-2: #475569;
  --color-texto-3: #94a3b8;
  --color-borde: #cbd5e1;
  --color-borde-2: #e2e8f0;
  --color-acento: #2563eb;
  --color-acento-texto: #ffffff;
  --color-acento-claro: #dbeafe;
  --color-acento-hover: #1d4ed8;
  --color-panel: #ffffff;
  --color-panel-borde: #e2e8f0;
  --color-sombra-texto: rgba(0, 0, 0, 0.06);
  --color-toggle-off: #cbd5e1;
  --color-fondo-mapa: #e2e8f0;
  --color-fondo-input: #ffffff;
  --color-texto-input: #0f172a;
  --color-borde-input: #cbd5e1;
  --color-hover-lista: #f1f5f9;
  --color-seleccion-lista: #dbeafe;
  --color-fondo-modal-fondo: rgba(15, 23, 42, 0.55);
}

@media (prefers-color-scheme: dark) {
  [data-tema="auto"] {
    --color-fondo: #0f172a;
    --color-fondo-2: #1e293b;
    --color-fondo-3: #334155;
    --color-texto: #f1f5f9;
    --color-texto-2: #cbd5e1;
    --color-texto-3: #64748b;
    --color-borde: #334155;
    --color-borde-2: #475569;
    --color-acento: #3b82f6;
    --color-acento-texto: #ffffff;
    --color-acento-claro: #1e3a8a;
    --color-acento-hover: #60a5fa;
    --color-panel: #1e293b;
    --color-panel-borde: #334155;
    --color-sombra-texto: rgba(0, 0, 0, 0.4);
    --color-toggle-off: #475569;
    --color-fondo-mapa: #1e293b;
    --color-fondo-input: #0f172a;
    --color-texto-input: #f1f5f9;
    --color-borde-input: #475569;
    --color-hover-lista: #334155;
    --color-seleccion-lista: #1e3a8a;
    --color-fondo-modal-fondo: rgba(0, 0, 0, 0.7);
  }
}

/* ----------------------------------------------------------------------------
 * TEMA BOSQUE (verde bosque #2d5a3d)
 * ---------------------------------------------------------------------------- */
[data-tema="bosque"] {
  --color-fondo: #ecfdf5;
  --color-fondo-2: #ffffff;
  --color-fondo-3: #f0fdf4;
  --color-texto: #14532d;
  --color-texto-2: #166534;
  --color-texto-3: #4ade80;
  --color-borde: #86efac;
  --color-borde-2: #bbf7d0;
  --color-acento: #2d5a3d;
  --color-acento-texto: #ffffff;
  --color-acento-claro: #d1fae5;
  --color-acento-hover: #166534;
  --color-panel: #ffffff;
  --color-panel-borde: #bbf7d0;
  --color-sombra-texto: rgba(45, 90, 61, 0.08);
  --color-toggle-off: #86efac;
  --color-fondo-mapa: #d1fae5;
  --color-fondo-input: #ffffff;
  --color-texto-input: #14532d;
  --color-borde-input: #86efac;
  --color-hover-lista: #f0fdf4;
  --color-seleccion-lista: #d1fae5;
  --color-fondo-modal-fondo: rgba(20, 83, 45, 0.5);
  --boton-positivo-fondo: #166534;
  --boton-positivo-hover: #14532d;
}

/* ----------------------------------------------------------------------------
 * TEMA ATARDECER (naranja atardecer #c2410c)
 * ---------------------------------------------------------------------------- */
[data-tema="atardecer"] {
  --color-fondo: #fff7ed;
  --color-fondo-2: #ffffff;
  --color-fondo-3: #fffbeb;
  --color-texto: #7c2d12;
  --color-texto-2: #9a3412;
  --color-texto-3: #fb923c;
  --color-borde: #fdba74;
  --color-borde-2: #fed7aa;
  --color-acento: #c2410c;
  --color-acento-texto: #ffffff;
  --color-acento-claro: #ffedd5;
  --color-acento-hover: #9a3412;
  --color-panel: #ffffff;
  --color-panel-borde: #fed7aa;
  --color-sombra-texto: rgba(194, 65, 12, 0.08);
  --color-toggle-off: #fdba74;
  --color-fondo-mapa: #ffedd5;
  --color-fondo-input: #ffffff;
  --color-texto-input: #7c2d12;
  --color-borde-input: #fdba74;
  --color-hover-lista: #fff7ed;
  --color-seleccion-lista: #ffedd5;
  --color-fondo-modal-fondo: rgba(124, 45, 18, 0.5);
}

/* ----------------------------------------------------------------------------
 * TEMA OCÉANO (azul océano #0e7490)
 * ---------------------------------------------------------------------------- */
[data-tema="oceano"] {
  --color-fondo: #ecfeff;
  --color-fondo-2: #ffffff;
  --color-fondo-3: #f0f9ff;
  --color-texto: #0c4a6e;
  --color-texto-2: #075985;
  --color-texto-3: #38bdf8;
  --color-borde: #7dd3fc;
  --color-borde-2: #bae6fd;
  --color-acento: #0e7490;
  --color-acento-texto: #ffffff;
  --color-acento-claro: #cffafe;
  --color-acento-hover: #155e75;
  --color-panel: #ffffff;
  --color-panel-borde: #bae6fd;
  --color-sombra-texto: rgba(14, 116, 144, 0.08);
  --color-toggle-off: #7dd3fc;
  --color-fondo-mapa: #cffafe;
  --color-fondo-input: #ffffff;
  --color-texto-input: #0c4a6e;
  --color-borde-input: #7dd3fc;
  --color-hover-lista: #f0f9ff;
  --color-seleccion-lista: #cffafe;
  --color-fondo-modal-fondo: rgba(12, 74, 110, 0.5);
}

/* ----------------------------------------------------------------------------
 * VARIABLES DINÁMICAS (controladas por JS desde el panel de configuración)
 * ----------------------------------------------------------------------------
 * Se aplican al <html> directamente:
 *   --font-family-aplicada: familia tipográfica seleccionada
 *   --font-size-aplicada: tamaño base seleccionado (en %)
 * ---------------------------------------------------------------------------- */
html {
  --font-family-aplicada: var(--font-family);
  --font-size-aplicada: var(--font-size-base);
}