.directorio-contenedor {
    max-width: 1100px;
    margin: 0 auto;
    font-family: sans-serif;
    color: #444444;
    font-size: 14px;
}

.directorio-accordion {
    margin-bottom: 48px;
}

.directorio-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
    list-style: none;
    transition: background-color 0.3s ease;
}

.directorio-summary::-webkit-details-marker {
    display: none; 
}

.directorio-accordion:nth-of-type(odd) .directorio-summary {
    background-color: #0C71C3;
    color: #ffffff;
}


.directorio-accordion:nth-of-type(even) .directorio-summary {
    background-color: #D6D6D6; 
    color: #5C5C5C;
}

.summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 16px;
}
/* Icono cerrado (+) */
.summary-icon::before {
    content: '+';
}
/* Icono abierto (-) */
.directorio-accordion[open] .summary-icon::before {
    content: '-';
}

/* Colores de los iconos según si es par o impar */
.directorio-accordion:nth-of-type(odd) .summary-icon {
    background-color: #ffffff;
    color: #0a65ae;
}
.directorio-accordion:nth-of-type(even) .summary-icon {
    background-color: #ffffff;
    color: #666666;
}

/* --- Contenido desplegable --- */
.directorio-contenido {
    background-color: #FFF;
    border: 1px solid #dbdbdb;
    border-top: none; /* Para que parezca unido a la cabecera */
}

/* --- CSS Grid para las columnas --- */
.directorio-tabla-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.grid-sub-cabecera {
    background-color: #f1f5f9;
    text-align: center;
    padding: 12px;
    font-weight: bold;
    color: #444;
    border-bottom: 1px solid #dbdbdb;
}

.grid-fila-persona {
    display: grid;
    /* Ajusta estos valores fr para dar más o menos espacio a cada columna */
    grid-template-columns: 1fr 1fr 0.8fr 1.2fr; 
    gap: 15px;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    align-items: center;
}

.grid-fila-persona:last-child {
    border-bottom: none;
}

.grid-col {
    word-break: break-word; 
}

.grid-col a {
    color: #0a65ae;
    text-decoration: none;
    transition: text-decoration 0.2s;
}

.grid-col a:hover {
    text-decoration: underline;
}

@media (max-width: 800px) {
    .grid-fila-persona {
        grid-template-columns: 1fr; /* Apilar elementos en 1 sola columna */
        text-align: center;
        gap: 8px;
        padding: 20px;
    }
}