/* Estilos personalizados para la tabla responsiva en móviles */
@media (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block; /* Hace que los elementos de la tabla se comporten como bloques */
    }
    thead tr {
        /* Oculta los encabezados de la tabla en móvil */
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    tr {
        /* Estilo para cada fila en móvil (ahora se ve como una tarjeta) */
        border: 1px solid #e2e8f0; /* border-gray-200 */
        margin-bottom: 0.75rem; /* mb-3 */
        border-radius: 0.5rem; /* rounded-lg */
        overflow: hidden; /* Asegura que los bordes redondeados se apliquen correctamente */
    }
    td {
        /* Estilo para cada celda en móvil */
        border: none; /* Elimina los bordes internos de las celdas */
        border-bottom: 1px solid #e2e8f0; /* Añade un borde inferior para separar las "filas" dentro de la tarjeta */
        position: relative;
        padding-left: 50%; /* Deja espacio para la etiqueta */
        text-align: right; /* Alinea el contenido a la derecha */
        padding-top: 0.5rem; /* py-2 */
        padding-bottom: 0.5rem; /* py-2 */
        padding-right: 1.5rem; /* px-6 */
    }
    td:last-child {
        border-bottom: 0; /* Elimina el borde inferior de la última celda */
    }
    td:before {
        /* Crea una pseudo-clase para la etiqueta de cada celda en móvil */
        position: absolute;
        top: 0;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #4a5568; /* text-gray-700 */
        padding-top: 0.5rem; /* py-2 */
    }
    /* Etiquetas para las celdas en móvil (el contenido de 'content' es la etiqueta) */
    td:nth-of-type(1):before { content: "Folio:"; }
    td:nth-of-type(2):before { content: "Categoría:"; }
    td:nth-of-type(3):before { content: "Delito:"; }
    td:nth-of-type(4):before { content: "Descripción:"; }
    td:nth-of-type(5):before { content: "Ubicación:"; }
    td:nth-of-type(6):before { content: "Fecha/Hora Incidente:"; }
    td:nth-of-type(7):before { content: "Reportado El:"; }
}
/* Estilo para el contenedor del mapa */
#map-container {
    height: 600px; /* Altura fija para el mapa */
    width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Estilos para el tooltip del mapa */
.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}
.legend {
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}