/* common-page-styles.css */

/* Sección 1: Estilos Generales de Página (Basados en confirmar-citaciones.html) */
.filter-section {
    background-color: #f4f6f9;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.filter-section h3 {
    margin-top: 0;
    color: #555;
    font-size: 1.2em;
}

.filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.filter-group {
    display: flex;
    flex-direction: column;
    min-width: 180px;
}

.filter-group label {
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.filter-group select,
.filter-group input[type="date"] {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.filter-btn {
    background-color: #1976d2; /* Azul de confirmar-citaciones */
    color: white;
    border: none;
    padding: 9px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s;
    margin-top: 22px; /* Para alinear con los inputs de fecha si están en la misma fila */
}

.filter-btn:hover {
    background-color: #1565c0;
}

.citaciones-table { /* Nombre de clase genérico para tablas de resultados */
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background: #fff; /* Fondo blanco para la tabla */
}

.citaciones-table th {
    background-color: #FF6600; /* Naranja corporativo para encabezados */
    color: white;
    text-align: left;
    padding: 12px 15px;
    font-size: 14px; /* Consistencia */
    font-weight: 600; /* Consistencia */
}

.citaciones-table td {
    border-bottom: 1px solid #eee; /* Línea divisoria más sutil */
    padding: 12px 15px;
    font-size: 13px; /* Reducir tamaño de fuente para mejor ajuste */
}

.citaciones-table tr:nth-child(even) { /* Estilo zebra opcional, puede ser útil */
    background-color: #f9f9f9; 
}

.citaciones-table tr:hover {
    background-color: #f1f1f1; /* Un hover un poco más notable */
}

/* Estilos para botones de acción dentro de la tabla (ej. confirmar citación) */
.confirmacion-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.confirmacion-btn:hover {
    background-color: #388E3C;
}

.confirmacion-btn:disabled {
    background-color: #9E9E9E;
    cursor: not-allowed;
}

/* Estilos para estados (ej. estado de citación) */
.estado-confirmado {
    color: #4CAF50;
    font-weight: 600;
}

.estado-pendiente {
    color: #FF6600;
    font-weight: 600;
}

.sin-resultados {
    text-align: center;
    padding: 30px;
    font-style: italic;
    color: #777;
}

.loading {
    text-align: center;
    padding: 20px;
}

/* Media queries de confirmar-citaciones.html */
@media (max-width: 768px) {
    .filter-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        width: 100%;
        min-width: unset;
    }
    
    .citaciones-table th, 
    .citaciones-table td {
        padding: 8px 10px;
        font-size: 14px;
    }
}

/* Sección 2: Estilos de Paginación (De historial-alumnos.css) */
.paginacion-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    margin-top: 20px;
    gap: 5px; /* Espacio reducido entre botones */
}

.paginacion-btn,
.paginacion-arrow {
    background-color: #fff;
    color: #FF6600;
    border: 1px solid #FF6600;
    margin: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.paginacion-btn.activo,
.paginacion-btn:disabled,
.paginacion-arrow:disabled {
    background-color: #FF6600;
    color: white;
    border-color: #FF6600;
    cursor: default;
}

.paginacion-btn:not(:disabled):not(.activo):hover,
.paginacion-arrow:not(:disabled):hover {
    background-color: #ffe5cc;
    border-color: #E55500;
    color: #E55500;
}

.paginacion-ellipsis {
    padding: 0 6px;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    height: 36px;
    border-radius: 50%;
    width: 36px;
    justify-content: center;
}

/* Ajustes para que las flechas no tengan fondo diferente al estar deshabilitadas */
.paginacion-arrow:disabled {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #6c757d;
}

/* Media query para paginación si es necesario (tomada de historial-alumnos.css si existía para paginación) */
/* @media (max-width: 480px) {
    .paginacion-btn, .paginacion-arrow {
        padding: 6px 8px;
        font-size: 12px;
        min-width: 30px;
        height: 30px;
    }
    .paginacion-ellipsis {
        padding: 6px 4px;
        height: 30px;
    }
} */
/* Nota: El .results-table original de historial-alumnos.css tenía más especificidad (ej. .results-table table). 
   Si la tabla de historial no toma bien los estilos de .citaciones-table, podríamos necesitar
   añadir '.results-table table' a las reglas de .citaciones-table o duplicarlas con ese selector.
   Por ahora, se asume que la clase .citaciones-table aplicada directamente a la <table> será suficiente.
*/