1  :root {
  2    /* Colores principales */
  3    --bg-primary: #ffffff;
  4    --bg-card-primary: #ffffff;
  5    --bg-secondary: #fafafa;
  6    --text-color: #333333;
  7    --text-secondary: #666666;
  8    --link-color: #226AF3;
  9    --primary: #226AF3;
 10    --primary-rgb: 34, 106, 243;
 11    --primary-light: #4285F4;
 12    --primary-dark: #1A56CC;
 13    
 14    /* Colores de acento */
 15    --accent: #00C667;
 16    --accent-light: #33D687;
 17    --accent-dark: #009F52;
 18    
 19    /* Colores de estado */
 20    --success: #00C667;
 21    --info: #2196F3;
 22    --warning: #FFA000;
 23    --error: #FF4538;
 24    
 25    /* Elementos de UI */
 26    --shadow-color: rgba(0, 0, 0, 0.06);
 27    --border-color: #EEEEEE;
 28    --border-radius: 8px;
 29    --border-radius-sm: 4px;
 30    --border-radius-lg: 16px;
 31    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
 32    --focus-shadow: 0 0 0 3px rgba(34, 106, 243, 0.3);
 33    
 34    /* Tipografía */
 35    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 36    --font-weight-normal: 400;
 37    --font-weight-medium: 500;
 38    --font-weight-semibold: 600;
 39    --font-weight-bold: 700;
 40    
 41    /* Espaciado */
 42    --space-xs: 0.25rem;
 43    --space-sm: 0.5rem;
 44    --space-md: 1rem;
 45    --space-lg: 1.5rem;
 46    --space-xl: 2rem;
 47    --space-xxl: 3rem;
 48    
 49    /* Layout */
 50    --transition-speed: 0.15s;
 51    --header-height: 64px;
 52    --content-max-width: 1200px;
 53    --search-bar-max-width: 700px;
 54  }
 55  
 56  body {
 57    background-color: var(--bg-primary);
 58    color: var(--text-color);
 59    font-family: var(--font-primary);
 60    transition: background var(--transition-speed), color var(--transition-speed);
 61    margin: 0;
 62    padding: 0;
 63  }
 64  
 65  body.dark {
 66    /* Colores principales en modo oscuro */
 67    --bg-primary: #121212;
 68    --bg-card-primary: #1e1e1e;
 69    --bg-secondary: #181818;
 70    --text-color: #f0f0f0;
 71    --text-secondary: #aaaaaa;
 72    --link-color: #59A7FF;
 73    --primary: #59A7FF;
 74    --primary-rgb: 89, 167, 255;
 75    --primary-light: #7FBCFF;
 76    --primary-dark: #3395FF;
 77    
 78    /* Colores de acento en modo oscuro */
 79    --accent: #00D472;
 80    --accent-light: #33DE8B;
 81    --accent-dark: #00BB63;
 82    
 83    /* Estados en modo oscuro */
 84    --success: #00D472;
 85    --info: #42A5F5;
 86    --warning: #FFB74D;
 87    --error: #FF5F52;
 88    
 89    /* Elementos de UI en modo oscuro */
 90    --shadow-color: rgba(0, 0, 0, 0.3);
 91    --border-color: #333333;
 92    --card-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
 93    --focus-shadow: 0 0 0 3px rgba(89, 167, 255, 0.4);
 94  }
 95  
 96  
 97  /* Estilos de contenedores globales */
 98  .header,
 99  .search-container,
100  .filters-container,
101  .results-container,
102  .theme-customizer {
103    border-radius: var(--border-radius);
104  }
105  
106  /* Estilos generales para el header */
107  .app-header {
108    background: var(--bg-secondary);
109    padding: 1.2rem 2rem;
110    display: flex;
111    align-items: center;
112    justify-content: space-between;
113    border-bottom: 1px solid #ddd;
114    margin-bottom: 1rem;
115  }
116  
117  /* Otros estilos se definen en cada componente */
118  
119  /* Estilos específicos para mapas */
120  .leaflet-container {
121    z-index: 1 !important; /* Asegurar que el mapa esté por debajo del resto de elementos */
122    width: 100% !important;
123    height: 100% !important;
124  }
125  
126  /* Mostrar controles por encima del mapa */
127  .leaflet-top, 
128  .leaflet-bottom {
129    z-index: 40 !important; /* Importante para sobreescribir los estilos de Leaflet */
130  }
131  
132  /* Mostrar popups por encima de los controles */
133  .leaflet-popup {
134    z-index: 45 !important;
135  }
136  
137  /* Estilos para los controles nativos de Leaflet */
138  .leaflet-control-zoom {
139    display: none !important; /* Ocultamos los controles nativos de zoom porque usamos los nuestros */
140  }