.text {
  font-size:11px;

  color:#FF0000;
}
.parpadea {
  
  animation-name: parpadeo;
  animation-duration: 0.9s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 0.9s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@keyframes parpadeo {  
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}





/* -----------------------------------------------------------
   1. BOTÓN PRINCIPAL DE BÚSQUEDA (Lupa)
----------------------------------------------------------- */
.leaflet-control-geosearch {
    position: relative;
}
.leaflet-control-geosearch a.leaflet-bar-part-single {
    display: flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; font-size: 0 !important; line-height: 0 !important; text-indent: -9999px !important; overflow: hidden !important; background-color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-size: 15px 15px !important; background-position: center !important; text-decoration: none !important; border-bottom: 1px solid #ccc !important;  transition: all 0.2s ease !important;
}
.leaflet-control-geosearch a.leaflet-bar-part-single:hover {
    background-color: #f4f4f4 !important;
}
.leaflet-control-geosearch a.leaflet-bar-part-single::before,
.leaflet-control-geosearch a.leaflet-bar-part-single::after {
    display: none !important;
    content: none !important;
}
.leaflet-control-geosearch.active a.leaflet-bar-part-single {
    background-color: #eef6fc !important; box-shadow: inset 0 0 5px rgba(0, 112, 180, 0.2) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230070b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
}

/* -----------------------------------------------------------
   2. CAJA DEL FORMULARIO Y INPUT
----------------------------------------------------------- */
.leaflet-control-geosearch form {
    display: none; position: absolute; top: 0; left: 30px; height: 30px; background: rgba(255, 255, 255, 0.98); border-radius: 0 4px 4px 0; box-shadow: 2px 1px 5px rgba(0,0,0,0.15); z-index: -1;
}
.leaflet-control-geosearch.active form {
    display: flex; align-items: center; /* Centra los elementos verticalmente */
}
.leaflet-control-geosearch form input {
    height: 30px !important; min-width: 220px; border: none !important; padding: 0 10px !important; font-size: 13px !important; font-family: "Segoe UI", Arial, sans-serif !important; color: #333 !important; outline: none !important; background: transparent !important;
}

/* -----------------------------------------------------------
   3. LA "X" PARA CERRAR/LIMPIAR (Sin bordes negros)
----------------------------------------------------------- */
.leaflet-control-geosearch form .reset {
    display: flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; background-color: transparent !important; border: none !important; color: transparent !important; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
    background-size: 14px 14px !important; background-repeat: no-repeat !important; background-position: center !important; opacity: 0.7; transition: all 0.2s ease !important;
}
.leaflet-control-geosearch form .reset:hover {
    opacity: 1; background-color: #ffeded !important; border-radius: 0 4px 4px 0 !important;
}
/* Ocultar la capa de resultados si quieres que solo funcione dando "Enter" */
.leaflet-control-geosearch .results {
    background: white; border-radius: 0 0 4px 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}


/* -----------------------------------------------------------
   ESTILOS PARA POPUPS PROFESIONALES (WMS) - VERSIÓN ESPACIADA
----------------------------------------------------------- */

/* Anular el padding por defecto de Leaflet */
.custom-modern-popup .leaflet-popup-content-wrapper {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 8px; /* Bordes más suaves */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.custom-modern-popup .leaflet-popup-content {
    margin: 0 !important;
    width: auto !important;
    min-width: 320px !important; 
    line-height: 1.5;
}

/* Contenedor principal */
.info-popup-container {
    font-family: "Segoe UI", Arial, sans-serif;
    color: #333;
    width: 320px;
    min-width: 320px !important;
    min-height: 150px !important;
    height: auto;
    display: flex;
    flex-direction: column;
    background-color: #f4f7f9;
}

/* Cabecera principal oscura */
.info-popup-header {
    background-color: #0070b4; /* Azul institucional */
    color: white;
    padding: 12px 16px; /* Más espacio de respiración */
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Cuerpo con scroll */
.info-popup-body.scrollable-body {
    flex-grow: 1; /* Si el usuario estira el popup, esta área se expande */
    overflow-y: auto;
    padding: 8px 0;
    background-color: #f4f7f9;
    
    /* Quitamos el max-height fijo que teníamos antes para que el usuario controle el alto */
    max-height: 300px;
}

/* DISEÑO DE CADA TARJETA DE CAPA INDIVIDUAL */
.info-popup-section {
    background-color: white;
    margin: 0 12px 10px 12px; /* Margen exterior: separa la tarjeta de los bordes del popup */
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04); /* Sombra elegante para separar visualmente */
}

.info-popup-section:last-child {
    margin-bottom: 6px; /* Menos margen al final */
}

/* Título de cada capa */
.info-popup-section-header {
    background-color: #eef6fc; /* Fondo azul clarito */
    color: #0070b4;
    padding: 10px 14px; /* Excelente espaciado */
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #d9eaf7;
    border-radius: 6px 6px 0 0;
}

/* Diseño de la tabla de datos */
.info-popup-table {
    width: 100%;
    border-collapse: collapse;
}

.info-popup-table th {
    text-align: left;
    padding: 10px 14px; /* Espaciado generoso a la izquierda */
    color: #777;
    font-weight: 500;
    font-size: 13px;
    width: 45%;
    border-bottom: 1px solid #f0f0f0;
}

.info-popup-table td {
    text-align: right;
    padding: 10px 14px; /* Espaciado generoso a la derecha */
    font-weight: 700;
    font-size: 13px;
    color: #2c3e50;
    border-bottom: 1px solid #f0f0f0;
}

/* Quitar línea divisoria al último elemento de la tabla */
.info-popup-table tr:last-child th,
.info-popup-table tr:last-child td {
    border-bottom: none;
}

/* Color y tamaño de los iconos de cada fila */
.info-popup-table i {
    color: #0070b4;
    width: 16px;
    text-align: center;
    margin-right: 4px;
}