/**
 * IRP Patrimonial - Variables CSS
 * Sistema de diseño para la plataforma operacional del TFM
 */

:root {
  /* ========================================
     COLORES PRIMARIOS (Marca)
     ======================================== */
  --primary: #D4A244;
  --primary-dark: #A87922;
  --primary-light: #E7BE68;
  --primary-alpha: rgba(212, 162, 68, 0.30);
  
  /* ========================================
     COLORES SECUNDARIOS
     ======================================== */
  --secondary: #161714;
  --secondary-light: #1C1D1A;
  --secondary-dark: #0E0F0D;
  
  /* ========================================
     FONDOS (Jerarquía de oscuros)
     ======================================== */
  --bg-darker: #0E0F0D;   /* Fondo base de la aplicación */
  --bg-dark: #161714;     /* Headers, toolbars, status bar */
  --bg-panel: #1C1D1A;    /* Cuerpo de paneles, modales */
  --bg-input: #232420;    /* Inputs, botones secundarios */
  --bg-hover: #34352F;    /* Estado hover */
  
  /* ========================================
     TEXTO
     ======================================== */
  --text-primary: #F0EDE6;    /* Títulos, contenido importante */
  --text-secondary: #C4BFB5;  /* Labels, texto descriptivo */
  --text-muted: #8A857C;      /* Deshabilitado, hints */
  
  /* ========================================
     ESTADOS SEMÁNTICOS
     ======================================== */
  --success: #62AC7A;
  --warning: #D48A44;
  --danger: #D46A62;
  --info: #62A8D4;
  
  /* ========================================
     SOMBRAS
     ======================================== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  
  /* ========================================
     BORDES
     ======================================== */
  --border-color: #34352F;
  --border-radius: 6px;
  --border-radius-lg: 12px;
  
  /* ========================================
     TRANSICIONES
     ======================================== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  
  /* ========================================
     DIMENSIONES
     ======================================== */
  --header-height: 50px;
  --toolbar-height: 44px;
  --statusbar-height: 28px;
  --panel-width: 280px;
  --panel-width-mobile: 100%;
  
  /* ========================================
     Z-INDEX LAYERS
     ======================================== */
  --z-map: 1;
  --z-panels: 100;
  --z-toolbar: 200;
  --z-header: 300;
  --z-statusbar: 300;
  --z-dropdown: 500;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-splash: 3000;
  
  /* ========================================
     COLORES PARA DIBUJO
     ======================================== */
  --color-waypoint: #62A8D4;
  --color-line: #D46A62;
  --color-polyline: #D48A44;
  --color-polygon: #62AC7A;
  --color-preview: #ffff00;
  --color-grid: rgba(180,180,180,0.5);
  --color-grid-label-bg: rgba(0, 0, 0, 0.85);
  
  /* ========================================
     COLORES DE MEDICIÓN
     ======================================== */
  --color-measure: #62A8D4;
  --color-area: #AA82CC;
  --color-buffer: #D4A244;
  
  /* ========================================
     GEOLOCALIZACIÓN
     ======================================== */
  --color-gps: #4caf50;
  --color-gps-accuracy: rgba(76, 175, 80, 0.2);
}

/* ========================================
   COLORES DE LÍMITES POLÍTICOS
   ======================================== */
:root {
  --color-departamentos: #1f3b73;
  --color-provincias: #3f6cc9;
  --color-distritos: #7bb6f4;
}