/* Reset and Base Styles */
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       body {
           font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
           background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
           min-height: 100vh;
           padding: 20px;
       }
       .dashboard {
           max-width: 1600px;
           margin: 0 auto;
       }
       /* Header */
       .dashboard-header {
           text-align: center;
           margin-bottom: 30px;
           color: white;
       }
       .dashboard-header h1 {
           font-size: 2.5rem;
           margin-bottom: 10px;
           text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
       }
       .dashboard-header p {
           font-size: 1.1rem;
           opacity: 0.9;
       }
       /* KPIs Cards */
       .kpi-container {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 25px;
           margin-bottom: 40px;
       }
       .kpi-card {
           background: rgba(255, 255, 255, 0.95);
           border-radius: 15px;
           padding: 25px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
           transition: all 0.3s ease;
           position: relative;
           overflow: hidden;
       }
       .kpi-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
       }
       .kpi-card::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 5px;
       }
       .kpi-card:nth-child(1)::before { background: linear-gradient(90deg, #FF6B6B, #FF8E53); }
       .kpi-card:nth-child(2)::before { background: linear-gradient(90deg, #4ECDC4, #44A08D); }
       .kpi-card:nth-child(3)::before { background: linear-gradient(90deg, #FFD166, #FF9E6D); }
       .kpi-icon { font-size: 2.5rem; margin-bottom: 15px; }
       .kpi-card:nth-child(1) .kpi-icon { color: #FF6B6B; }
       .kpi-card:nth-child(2) .kpi-icon { color: #4ECDC4; }
       .kpi-card:nth-child(3) .kpi-icon { color: #FFD166; }
       .kpi-title {
           font-size: 1rem;
           color: #666;
           text-transform: uppercase;
           letter-spacing: 1px;
           margin-bottom: 10px;
           font-weight: 600;
       }
       .kpi-value {
           font-size: 2.8rem;
           font-weight: 700;
           color: #2D3436;
           margin-bottom: 5px;
       }
       /* Controles de filtro */
       .controls-container {
           background: rgba(255, 255, 255, 0.95);
           border-radius: 15px;
           padding: 25px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
           margin-bottom: 30px;
       }
       .filtro-titulo {
           color: #2D3436;
           margin-bottom: 20px;
           font-size: 1.3rem;
           display: flex;
           align-items: center;
           gap: 10px;
       }
       .filtro-grid {
           display: grid;
           grid-template-columns: 1fr 1fr auto;
           gap: 20px;
           align-items: end;
       }
       .form-group {
           margin-bottom: 0;
       }
       .form-label {
           display: block;
           margin-bottom: 8px;
           color: #555;
           font-weight: 600;
       }
       .form-select {
           width: 100%;
           padding: 12px 15px;
           border: 2px solid #e0e0e0;
           border-radius: 8px;
           font-size: 16px;
           background: white;
           color: #333;
           transition: all 0.3s;
       }
       .form-select:focus {
           outline: none;
           border-color: #667eea;
           box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
       }
       .btn {
           padding: 12px 30px;
           border: none;
           border-radius: 8px;
           font-size: 16px;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.3s;
           display: inline-flex;
           align-items: center;
           gap: 8px;
       }
       .btn-primary {
           background: linear-gradient(135deg, #667eea, #764ba2);
           color: white;
       }
       .btn-primary:hover {
           transform: translateY(-2px);
           box-shadow: 0 7px 14px rgba(102, 126, 234, 0.4);
       }
       .btn-secondary {
           background: #6c757d;
           color: white;
       }
       .btn-secondary:hover {
           background: #5a6268;
           transform: translateY(-2px);
       }
       .btn-info {
           background: #17a2b8;
           color: white;
       }
       .btn-info:hover {
           background: #138496;
           transform: translateY(-2px);
       }
       .btn-group {
           display: flex;
           gap: 10px;
       }
       
       /* Mapa Container */
       .map-container {
           background: rgba(255, 255, 255, 0.95);
           border-radius: 15px;
           padding: 25px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
           margin-bottom: 30px;
           position: relative;
       }
       .map-container h2 {
           color: #2D3436;
           margin-bottom: 20px;
           font-size: 1.5rem;
           display: flex;
           align-items: center;
           gap: 10px;
       }
       /* Tabla Container */
       .table-container {
           background: rgba(255, 255, 255, 0.95);
           border-radius: 15px;
           padding: 25px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
           margin-bottom: 30px;
       }
       .table-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 20px;
       }
       .table-header h2 {
           color: #2D3436;
           font-size: 1.5rem;
           display: flex;
           align-items: center;
           gap: 10px;
       }
       .table-actions {
           display: flex;
           gap: 10px;
       }
       /* Footer */
       .dashboard-footer {
           text-align: center;
           color: rgba(255, 255, 255, 0.7);
           font-size: 0.9rem;
           padding: 20px;
       }
       /* Responsive */
       @media (max-width: 1200px) {
           .kpi-container { grid-template-columns: repeat(2, 1fr); }
           .filtro-grid { grid-template-columns: 1fr; }
       }
       @media (max-width: 768px) {
           .kpi-container { grid-template-columns: 1fr; }
           .kpi-value { font-size: 2.2rem; }
           #map-wrapper { height: 450px; }
           .table-header { flex-direction: column; gap: 15px; }
           .table-actions { width: 100%; justify-content: center; }
           .filtro-grid { grid-template-columns: 1fr; }
           .btn-group { flex-wrap: wrap; }
       }
   .leaflet-popup-content {
       margin: 0;
       padding: 0;
       border-radius: 10px;
       overflow: hidden;
   }
   
   .leaflet-popup-content-wrapper {
       padding: 0;
       border-radius: 10px;
       overflow: hidden;
       box-shadow: 0 10px 30px rgba(0,0,0,0.2);
   }
   
   .leaflet-popup-tip {
       background: linear-gradient(135deg, #667eea, #764ba2);
   }
   
   /* Estilos para tooltips */
   .leaflet-tooltip {
       background: rgba(255, 255, 255, 0.95);
       border: none;
       border-radius: 8px;
       box-shadow: 0 4px 15px rgba(0,0,0,0.1);
       padding: 0;
       overflow: hidden;
   }
   
   .leaflet-tooltip-top:before {
       border-top-color: rgba(255, 255, 255, 0.95);
   }
   
   /* Scrollbars personalizados */
   .leaflet-popup-content div::-webkit-scrollbar {
       width: 6px;
   }
   
   .leaflet-popup-content div::-webkit-scrollbar-track {
       background: #f1f1f1;
       border-radius: 3px;
   }
   
   .leaflet-popup-content div::-webkit-scrollbar-thumb {
       background: #667eea;
       border-radius: 3px;
   }
   
   .leaflet-popup-content div::-webkit-scrollbar-thumb:hover {
       background: #764ba2;
   }