/*
 * ----------------------------------------
 * Estilos de la Paginación (renderPagination)
 * ----------------------------------------
 */

/* Estilos del contenedor principal de la paginación */
.dp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px; /* Espaciado entre elementos */
    margin-top: 32px;
}

/* Estilos comunes para los botones de flecha (Anterior/Siguiente) */
.dp-pagination-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%; /* Circular */
    background: #fff;
    font-size: 18px;
    
    /* Centrado del ícono */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    
    /* Lógica de la funcionalidad */
    cursor: pointer;
    border: 1px solid #D1D5DB; /* Gris por defecto */
    color: #9CA3AF;
}
.dp-pagination-arrow:hover{
    background: #fff;
    color: #9CA3AF;
    border: 1px solid #BF241D;
}
/* Estilos para el botón de flecha deshabilitado */
.dp-pagination-arrow[disabled] {
    border: 1px solid #E5E7EB;
    color: #D1D5DB;
    cursor: not-allowed;
}

/* Estilos comunes para los botones de número de página */
.dp-pagination-page {
    /* Reseteo */
    background: transparent;
    border: none;
    
    /* Estilos de diseño */
    font-size: 16px;
    font-weight: 500;
    
    /* Se remueve el borde inferior y se ajusta el padding para solo texto */
    padding: 8px 0;
    min-width: 24px;
    text-align: center;
    
    /* Lógica de la funcionalidad */
    cursor: pointer;
    color: #9CA3AF; /* Gris para inactivo */
}
.dp-pagination-page:hover{
    color: #9CA3AF;
    background: transparent;
}
.dp-pagination-page:focus{
    color: #9CA3AF;
    background: transparent;
}
/* Estilos para el botón de número de página activo */
.dp-pagination-page.active {
    color: #BF241D; /* Rojo para activo */
}


/*
 * ----------------------------------------
 * Estilos para entidadCard
 * ----------------------------------------
 */

/* Estilos para el contenedor de la tarjeta de entidad */
.card-institucional {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    border: 1px solid #f3f4f6;
    padding: 16px;
    height: 100%;
    
    /* Estilos ya existentes que son de Tailwind pero se repiten como base */
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Estilos para el título de la tarjeta de entidad */
.card-institucional h2 {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    color: #1f2937;
    text-align: center;
    margin-bottom: 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenedor de la información de contacto */
.card-institucional-contact-info {
    width: 100%;
    text-align: left;
    margin-bottom: 24px;
}

/* Estilo común para cada línea de información de contacto (dirección, correo, teléfono, web) */
.card-institucional-info-item {
    display: flex;
    align-items: center;
    color: #4b5563; /* Gris oscuro */
    font-size: 0.875rem; /* 14px */
    word-break: break-all!important;
}

/* Ajuste de margen superior para los elementos de contacto subsiguientes */
.card-institucional-contact-info .card-institucional-info-item + .card-institucional-info-item {
    margin-top: 4px;
}

/* Estilo para los íconos dentro de la información de contacto */
.card-institucional-info-item svg {
    width: 16px;
    height: 16px;
    color: #BF241D; /* Rojo */
    margin-right: 8px;
    flex-shrink: 0;
}

/* Estilo del botón "Más información" */
.card-institucional-button {
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #c93b33; /* Rojo más oscuro */
    color: white;
    font-weight: 600;
    border-radius: 9999px;
    text-decoration: none!important;
    text-align: center;
    font-size: 0.875rem; /* 14px */
    display: block;
    margin-top: auto;
    cursor: pointer;
}
.card-institucional-button:hover{
    background-color: #c93b33!important; /* Rojo más oscuro */
    color: white!important;
}
/*
 * ----------------------------------------
 * Estilos para funcionarioCard
 * ----------------------------------------
 */

/* Estilos para el contenedor de la tarjeta de persona */
.card-persona {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    border: 1px solid #f3f4f6;
    padding: 16px;
    
    /* Estilos ya existentes que son de Tailwind pero se repiten como base */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Estilos para el contenedor de la foto */
.card-persona-photo-container {
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Circular */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
}

/* Estilo para la imagen de la foto */
.card-persona-photo-container img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

/* Estilo para el placeholder de la foto */
.card-persona-photo-placeholder {
    background-color: #BF241D; /* Rojo */
}

/* Contenedor de nombre y cargo */
.card-persona-header {
    width: 100%;
    margin-bottom: 12px;
}

/* Estilo para el nombre */
.card-persona-header h2 {
    font-size: 1rem; /* 16px */
    font-weight: 600;
    color: #1f2937;
    text-align: left;
    margin: 0;
}

/* Estilo para el cargo */
.card-persona-header p {
    color: #6b7280; /* Gris */
    font-size: 0.875rem; /* 14px */
    text-align: left;
    margin: 0;
}

/* Contenedor de la información de contacto (correo, teléfono) */
.card-persona-contact-info {
    width: 100%;
    text-align: left;
    margin-bottom: 16px;
}

/* Estilo común para cada línea de información de contacto (correo, teléfono) */
.card-persona-info-item {
    display: flex;
    align-items: center;
    color: #4b5563; /* Gris oscuro */
}

/* Ajuste de margen superior para el elemento de contacto subsiguiente */
.card-persona-contact-info .card-persona-info-item + .card-persona-info-item {
    margin-top: 4px;
}

/* Estilo para los íconos dentro de la información de contacto */
.card-persona-info-item svg {
    width: 16px;
    height: 16px;
    color: #BF241D; /* Rojo */
    margin-right: 8px;
    flex-shrink: 0;
}

/* Estilo para el texto de la información de contacto */
.card-persona-info-item span {
    font-size: 15px;
}

/* Estilo del botón "Ver hoja de vida" */
.card-persona-button {
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #BF241D; /* Rojo */
    color: white;
    font-weight: 600;
    border-radius: 9999px;
    text-decoration: none!important;
    text-align: center;
    font-size: 0.875rem; /* 14px */
    display: block;
    cursor: pointer;
}
.card-persona-button:hover {
  color: white;
}
/* ----------------------------------------------------
 * ESTILOS MEJORADOS PARA EL FILTRO (filter_directorio)
 * ---------------------------------------------------- */

/* 1. Contenedor principal: Recrea flex-col sm:flex-row space-y-4 sm:space-x-4 p-4 */
.dp-filter-container {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    padding: 16px;          
    gap: 16px; /* Espaciado vertical en móvil */
}

/* Media Query: sm breakpoint (640px) */
@media (min-width: 640px) {
    .dp-filter-container {
        flex-direction: row; 
        gap: 16px; /* Espaciado horizontal en desktop */
    }
}

/* 2. Contenedor de Input/Select (relative, w-full, flex-grow/flex-grow-0) */
.dp-filter-item {
    position: relative; 
    width: 100%;        /* w-full */
    flex-grow: 1;       /* Asegura que el input crezca */
}

/* 3. Estilos Comunes para Input y Select */
.dp-input-base {
    /* Estilos de bordes y texto */
    border: 1px solid #D1D5DB; 
    color: #4B5563;            
    background-color: white;   
    outline: none;             
    padding: 0; /* Lo ajustamos en las clases específicas */
    box-sizing: border-box;    
}

/* 4. Input de Búsqueda (w-full h-12 py-2 pl-4 pr-10 border-gray-300 rounded-full) */
.dp-search-input {
    width: 100%;
    height: 48px; /* h-12 */
    /* Padding para texto y dejar espacio al ícono */
    padding-top: 8px; /* py-2 */
    padding-bottom: 8px; /* py-2 */
    padding-left: 16px; /* pl-4 */
    padding-right: 40px; /* pr-10 */
    border-radius: 20px!important; /* Estilo de borde del input, más redondeado que 'full' */
}

/* 5. Select (w-full h-9 py-2 pl-4 pr-10 border-gray-300 rounded-full appearance-none) */
.dp-filter-select {
    width: 100%;
    height: 36px; /* h-9 */
    /* Padding para texto y dejar espacio al ícono */
    padding-top: 4px; /* Un poco menos de padding vertical que el input */
    padding-bottom: 4px;
    padding-left: 16px; /* pl-4 */
    padding-right: 40px; /* pr-10 */
    border-radius: 9999px; /* rounded-full */
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
}

/* 6. Íconos dentro del Input/Select (absolute, right-3, top-1/2, -translate-y-1/2) */
.dp-icon-base {
    position: absolute;       
    top: 50%;                 
    transform: translateY(-50%);
    color: #9CA3AF;           
}

.dp-icon-search {
    right: 12px;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 9px;
}

.dp-icon-dropdown {
    right: 12px; /* right-3 */
    height: 16px; /* h-4 */
    width: 16px;  /* w-4 */
    position: absolute;
    top: 9px;
}

/* 7. Foco: Asegura el estilo de foco de Tailwind (focus:ring-red-600 focus:border-red-600) */
.dp-input-base:focus {
    border-color: #BF241D; 
    /* Simulación de focus ring */
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.5); 
}

/* 8. Botón de Búsqueda (w-full sm:w-28 h-9 bg-red-700 text-white font-semibold py-2 px-4 rounded-full shadow-lg) */
.dp-search-button {
    background-color: #bf241d; 
    color: white;              
    font-weight: 600;          
    height: 36px; /* h-9 */
    padding: 0 16px; /* py-2 px-4 */
    border: none;
    border-radius: 9999px;     
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 
    cursor: pointer;
    box-sizing: border-box; 
    font-size: 16px;
    width: 100%; /* w-full (mobile first) */
    flex-shrink: 0;
}
.dp-search-button:hover{
    background-color: #bf241d; 
    color: white;   
}
.dp-search-button:focus{
    background-color: #bf241d; 
    color: white;   
}
.dp-search {
  border-radius: 22px;
}
@media (min-width: 640px) {
    .dp-search-button {
        width: 112px; /* sm:w-28 (112px) */
    }
}


/*
 * ----------------------------------------
 * Estilos para shortcode: grid-directorio-publico
 * ----------------------------------------
 */

/* Clase para aplicar el media query que cambia la disposición del grid en tablet */
/* (Estilo copiado de la etiqueta <style> inline) */
.dp-grid{
    display: grid;
    grid-gap: 32px;
}
@media (max-width: 768px) {
    .dp-grid-responsive {
        /* Dos columnas en tablet */
        grid-template-columns: repeat(1, 1fr) !important;
    }
}