/* ============================================
   VARIABLES GLOBALES LUUPIGO 2024
   Archivo: assets/css/variables.css
   ✅ Única fuente de verdad - Cargar PRIMERO
   ✅ Orquestado para: mapa.css + menu_animals.css + pwa.css + resto del sistema
   ============================================ */

:root {
  /* ======================
     COLORES DE MARCA
     ====================== */
  --color-brand: #5b67f2;               /* Azul violeta Luupigo */
  --color-brand-dark: #4a54d1;
  --color-brand-light: #7c85f7;
  --color-brand-gradient: linear-gradient(135deg, #5b67f2, #8b5cf6);

  /* ======================
     COLORES POR TIPO DE REPORTE
     ====================== */
  --color-lost: #ff6b6b;               /* Rojo - Animal perdido */
  --color-lost-dark: #e05555;
  --color-lost-light: #ff8e8e;

  --color-found: #1dd1a1;              /* Verde - Animal encontrado */
  --color-found-dark: #17a589;
  --color-found-light: #2de0b0;

  --color-adoption: #9b59b6;           /* Púrpura - En adopción */
  --color-adoption-dark: #8e44ad;
  --color-adoption-light: #b57edc;

  /* ======================
     COLORES SEMÁNTICOS
     ====================== */
  --color-success: #10b981;
  --color-success-dark: #059669;
  --color-success-light: #a7f3d0;

  --color-warning: #f59e0b;
  --color-warning-dark: #d97706;
  --color-warning-light: #fde68a;

  --color-error: #ef4444;
  --color-error-dark: #dc2626;
  --color-error-light: #fecaca;

  --color-info: #06b6d4;
  --color-info-dark: #0891b2;
  --color-info-light: #a5f3fc;

  /* ======================
     ESCALA DE GRISES
     ====================== */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  /* ======================
     TEXTOS (CANÓNICO)
     ====================== */
  --text-primary: var(--color-gray-800);
  --text-secondary: var(--color-gray-600);
  --text-light: var(--color-gray-500);
  --text-muted: var(--color-gray-400);
  --text-white: #ffffff;

  /* ======================
     FONDOS (CANÓNICO)
     ====================== */
  --bg-primary: #ffffff;
  --bg-secondary: var(--color-gray-50);
  --bg-tertiary: var(--color-gray-100);
  --bg-dark: var(--color-gray-900);
  --bg-darker: #000000;

  /* ======================
     OVERLAYS Y BACKDROPS
     ====================== */
  --bg-overlay: rgba(15, 23, 42, 0.7);
  --bg-overlay-light: rgba(255, 255, 255, 0.8);
  --bg-overlay-dark: rgba(0, 0, 0, 0.85);

  /* ======================
     BORDES
     ====================== */
  --border-color: var(--color-gray-200);
  --border-color-light: var(--color-gray-100);
  --border-color-dark: var(--color-gray-300);

  /* ======================
     RADIOS (CANÓNICO)
     ====================== */
  --radius-none: 0;
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-3xl: 2rem;      /* 32px */
  --radius-full: 9999px;

  /* ======================
     SOMBRAS (CANÓNICO)
     ====================== */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* ======================
     SOMBRAS CON COLOR
     ====================== */
  --shadow-primary: 0 0 0 3px rgba(91, 103, 242, 0.2);
  --shadow-success: 0 0 0 3px rgba(16, 185, 129, 0.2);
  --shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.2);
  --shadow-warning: 0 0 0 3px rgba(245, 158, 11, 0.2);

  /* ======================
     TRANSICIONES (CANÓNICO)
     ====================== */
  --transition-fast: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ======================
     TIPOGRAFÍA
     ====================== */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-family-heading: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* ======================
     ESPACIADO (4px grid)
     ====================== */
  --space-0: 0;
  --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 */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ======================
     TAMAÑOS DE COMPONENTES
     ====================== */
  --touch-target-min: 44px;
  --input-height: 48px;
  --button-height: 52px;
  --header-height: 64px;
  --footer-height: 72px;
  --sidebar-width: 280px;

  /* ======================
     APP SHELL / MAPA / PWA (BASE)
     ====================== */
  --luu-bottom-bar-height: 86px;
  --luu-fab-size: 86px;
  --luu-chip-height: 46px;
  --luu-panel-radius: 28px;

  --luu-glass-bg: rgba(255, 255, 255, 0.84);
  --luu-glass-bg-strong: rgba(255, 255, 255, 0.92);
  --luu-glass-border: rgba(255, 255, 255, 0.48);
  --luu-glass-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);

  --luu-app-surface: linear-gradient(180deg, rgba(10, 20, 48, 0.94), rgba(30, 64, 175, 0.96));
  --luu-app-surface-border: rgba(255, 255, 255, 0.12);
  --luu-app-surface-shadow: 0 -14px 40px rgba(10, 20, 48, 0.42);

  --luu-fab-gradient: linear-gradient(135deg, #5b67f2, #8b5cf6);
  --luu-fab-shadow:
    0 18px 40px rgba(59, 130, 246, 0.42),
    0 0 0 8px rgba(99, 102, 241, 0.10),
    0 0 36px rgba(139, 92, 246, 0.28);

  --luu-chip-bg: rgba(255, 255, 255, 0.88);
  --luu-chip-bg-active: linear-gradient(135deg, #5b67f2, #7c5cff);
  --luu-chip-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);

  --luu-map-control-bg: rgba(255, 255, 255, 0.88);
  --luu-map-control-border: rgba(255, 255, 255, 0.52);
  --luu-map-control-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);

  /* ======================
     Z-INDEX (Sistema jerárquico)
     ====================== */
  --z-hidden: -1;
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  --z-max: 9999;

  /* ======================
     MAPA / UI SCALE
     ====================== */
  --luu-map-ui-scale: 1;

  /* ======================
     BREAKPOINTS RESPONSIVE
     ====================== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ======================================================
     COMPATIBILIDAD (LEGACY) — NO TOCAR
     Mantiene funcionando: alertas.css + ficha_animal.css
     ====================================================== */

  /* --- alertas.css (nombres antiguos) --- */
  --color-secundario: var(--color-brand);
  --color-peligro: var(--color-error);
  --color-exito: var(--color-success);
  --color-advertencia: var(--color-warning);

  --fondo-claro: var(--bg-primary);

  --color-texto: var(--text-primary);
  --color-texto-claro: var(--text-secondary);
  --color-texto-muy-claro: var(--text-muted);
  --color-texto-blanco: var(--text-white);

  --border-radius-sm: var(--radius-md);
  --border-radius-md: var(--radius-lg);
  --border-radius-lg: var(--radius-xl);

  --transition-normal: var(--transition);

  --z-index-low: var(--z-dropdown);
  --z-index-high: var(--z-toast);
  --z-index-highest: var(--z-max);

  /* --- ficha_animal.css (nombres usados en ese módulo) --- */
  --primary-color: var(--color-brand);
  --primary-dark: var(--color-brand-dark);
  --secondary-color: #8b5cf6; /* 2º color del gradiente */

  --success-color: var(--color-success);
  --success-dark: var(--color-success-dark);
  --warning-color: var(--color-warning);
  --warning-dark: var(--color-warning-dark);
  --danger-color: var(--color-error);
  --danger-dark: var(--color-error-dark);
  --info-color: var(--color-info);

  --bg-color: var(--bg-primary);
  --bg-modal: var(--bg-overlay-dark);

  /* OJO: ficha usa estos nombres legacy; los mantenemos sin autorreferencias */
  --border-light: var(--border-color-light);
  --border-dark: var(--border-color-dark);

  --border-radius: var(--radius-lg);
  --border-radius-sm: var(--radius-md);
  --border-radius-lg: var(--radius-xl);

  /* Sombras "ficha" legacy */
  --shadow-xl: var(--shadow-2xl);

  /* Espaciados "ficha" */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 25px;
  --spacing-xxl: 30px;

  /* Triangulación (colores específicos del módulo) */
  --luu-green-strong: #00C851;
  --luu-green: #20c997;
  --luu-yellow: #ffc107;
  --luu-orange: #fd7e14;
  --luu-red: #dc3545;
  --luu-indigo: #6f42c1;

  --luu-panel-bg: rgba(255, 255, 255, 0.96);
  --luu-blur: 6px;
}

/* ======================
   TIPOGRAFÍA BASE GLOBAL (no conflictiva)
   ====================== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-size: 1rem;
  line-height: 1.55;
}

/* ======================
   VARIABLES RESPONSIVE (solo tokens)
   ====================== */
@media (max-width: 480px) {
  :root {
    --luu-pad: 14px;
    --luu-panel-side-gap: 10px;
    --luu-panel-bottom-gap: 12px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --luu-panel-side-gap: 12px;
    --luu-panel-bottom-gap: 14px;
  }
}

/* ======================
   PWA MODE — TOKENS + SAFE AREA
   ====================== */
body.pwa-mode {
  --luu-safe-top: env(safe-area-inset-top, 0px);
  --luu-safe-bottom: env(safe-area-inset-bottom, 0px);
  --luu-safe-left: env(safe-area-inset-left, 0px);
  --luu-safe-right: env(safe-area-inset-right, 0px);

  padding-top: var(--luu-safe-top);
  padding-bottom: var(--luu-safe-bottom);
  padding-left: var(--luu-safe-left);
  padding-right: var(--luu-safe-right);
}

/* ======================
   🆕 TOKENS PREMIUM 2025 (sin machacar canónicos)
   ====================== */
:root {
  /* Marca refinada (nuevas variables, no sobrescribe) */
  --luu-premium-brand: #2f80ff;
  --luu-premium-brand-dark: #1f64ff;
  --luu-premium-brand-light: #66b4ff;
  --luu-premium-brand-gradient: linear-gradient(135deg, #66b4ff 0%, #2f80ff 58%, #1f64ff 100%);

  /* Acento secundario */
  --luu-premium-accent: #8f7cff;
  --luu-premium-accent-light: #b996ff;

  /* Radios premium (opcionales, no tocan los canónicos) */
  --luu-premium-radius-sm: 0.75rem;   /* 12px */
  --luu-premium-radius-md: 1rem;      /* 16px */
  --luu-premium-radius-lg: 1.375rem;  /* 22px */
  --luu-premium-radius-xl: 1.75rem;   /* 28px */
  --luu-premium-radius-2xl: 2rem;     /* 32px */

  /* Sombras premium */
  --luu-premium-shadow-sm: 0 6px 12px rgba(15, 23, 42, 0.08);
  --luu-premium-shadow: 0 10px 20px rgba(15, 23, 42, 0.10);
  --luu-premium-shadow-md: 0 14px 28px rgba(15, 23, 42, 0.12);
  --luu-premium-shadow-lg: 0 18px 34px rgba(15, 23, 42, 0.16);
  --luu-premium-shadow-xl: 0 24px 42px rgba(15, 23, 42, 0.20);
  --luu-premium-shadow-2xl: 0 30px 56px rgba(15, 23, 42, 0.26);

  /* Glass premium */
  --luu-premium-glass-bg: rgba(255, 255, 255, 0.18);
  --luu-premium-glass-bg-strong: rgba(255, 255, 255, 0.26);
  --luu-premium-glass-border: rgba(255, 255, 255, 0.22);
  --luu-premium-glass-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);

  /* Surface app premium */
  --luu-premium-surface:
    linear-gradient(
      180deg,
      rgba(7, 22, 52, 0.88) 0%,
      rgba(10, 31, 72, 0.82) 58%,
      rgba(11, 39, 86, 0.76) 100%
    );

  --luu-premium-surface-border: rgba(255, 255, 255, 0.14);
  --luu-premium-surface-shadow:
    0 18px 40px rgba(3, 10, 29, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* FAB premium */
  --luu-premium-fab-gradient:
    radial-gradient(circle at 50% 18%, #84ecff 0%, #45cfff 16%, #2f80ff 48%, #1849a9 100%);

  --luu-premium-fab-shadow:
    0 20px 36px rgba(25, 102, 255, 0.28),
    0 8px 18px rgba(0, 0, 0, 0.18),
    inset 0 2px 10px rgba(255, 255, 255, 0.22),
    0 0 0 8px rgba(54, 157, 255, 0.06);

  /* Chips premium */
  --luu-premium-chip-bg:
    linear-gradient(
      180deg,
      rgba(27, 71, 145, 0.92) 0%,
      rgba(15, 43, 89, 0.96) 100%
    );

  --luu-premium-chip-bg-active:
    linear-gradient(
      180deg,
      #66b4ff 0%,
      #2f80ff 58%,
      #1f64ff 100%
    );

  --luu-premium-chip-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(4, 13, 34, 0.24);

  /* Controles de mapa premium */
  --luu-premium-map-control-bg: rgba(255, 255, 255, 0.86);
  --luu-premium-map-control-border: rgba(255, 255, 255, 0.46);
  --luu-premium-map-control-shadow:
    0 12px 28px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);

  /* Bottom bar premium */
  --luu-premium-bottom-bar-height: 92px;
  --luu-premium-fab-size: 88px;
  --luu-premium-panel-radius: 28px;
}

/* ======================
   PWA MODE — refinado premium (solo tokens)
   ====================== */
body.pwa-mode {
  --luu-premium-radius-lg: 1.375rem;
  --luu-premium-radius-xl: 1.75rem;
  --luu-premium-radius-2xl: 2rem;

  --luu-premium-shadow-lg: 0 18px 34px rgba(15, 23, 42, 0.18);
  --luu-premium-shadow-xl: 0 26px 46px rgba(15, 23, 42, 0.22);
  --luu-premium-shadow-2xl: 0 30px 60px rgba(15, 23, 42, 0.28);
}

/* ======================
   MODO OSCURO (mantiene compatibilidad)
   ====================== */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-light: #94a3b8;
    --text-muted: #64748b;

    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;

    --border-color: #334155;
    --border-color-light: #475569;
    --border-color-dark: #1e293b;

    --bg-overlay: rgba(0, 0, 0, 0.8);
    --bg-overlay-light: rgba(30, 41, 59, 0.8);
    --bg-overlay-dark: rgba(0, 0, 0, 0.88);

    --fondo-claro: var(--bg-primary);
  }
}

/* ======================
   ACCESIBILIDAD
   ====================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: none;
    --transition: none;
    --transition-slow: none;
    --transition-bounce: none;
  }
}

@media (prefers-contrast: high) {
  :root {
    --color-brand: #0000ff;
    --color-success: #008000;
    --color-error: #ff0000;
    --color-warning: #ffa500;

    --border-color: currentColor;
  }
}

/* ======================
   ANIMACIONES BASE
   ====================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* ======================
   CLASES DE UTILIDAD GLOBALES
   ====================== */
.oculto { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }