/* === RESET Y BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Sistema de iconos SVG inline */
.icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.icon-sm { width: 1rem; height: 1rem; }
.icon-lg { width: 2rem; height: 2rem; }

.icon-shield-check { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232C5282'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3e%3c/svg%3e"); }
.icon-clipboard-list { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232C5282'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01'/%3e%3c/svg%3e"); }
.icon-users { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232C5282'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a4 4 0 11-8 0 4 4 0 018 0z'/%3e%3c/svg%3e"); }
.icon-bell { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232C5282'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9'/%3e%3c/svg%3e"); }
.icon-check-circle { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F855A'%3e%3cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z' clip-rule='evenodd'/%3e%3c/svg%3e"); }
.icon-exclamation-triangle { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D69E2E'%3e%3cpath fill-rule='evenodd' d='M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z' clip-rule='evenodd'/%3e%3c/svg%3e"); }
.icon-x-circle { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E53E3E'%3e%3cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z' clip-rule='evenodd'/%3e%3c/svg%3e"); }
.icon-academic-cap { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232C5282'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 14l9-5-9-5-9 5 9 5z'/%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 14l6.16-3.422a12.083 12.083 0 0 1 .665 6.479A11.952 11.952 0 0 0 12 20.055a11.952 11.952 0 0 0-6.824-2.998 12.078 12.078 0 0 1 .665-6.479L12 14z'/%3e%3c/svg%3e"); }
.icon-book-open { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232C5282'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253'/%3e%3c/svg%3e"); }
.icon-calendar { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232C5282'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3e%3c/svg%3e"); }

:root {
    /* Paleta de Colores - Opción 1: Azul Corporativo */
    --color-primario: #2C3E50;
    --color-secundario: #3498DB;
    --color-texto: #34495E;
    --color-fondo: #ECF0F1;
    --color-superficie: #FFFFFF; /* Para tarjetas, modales, etc. */
    --color-borde: #BDC3C7;
    --color-acento: #1ABC9C; /* Verde azulado para éxito/confirmación */
    --color-peligro: #E74C3C; /* Rojo para errores/eliminación */
    --color-advertencia: #F39C12; /* Naranja para advertencias */
    --color-blanco: #FFFFFF;
    --color-gris-claro: #F8F9FA;
    --color-gris-oscuro: #6C757D;

    /* Fuentes */
    --fuente-principal: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

body {
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.6;
    min-height: 100vh;
}

/* === UTILITY CLASSES === */
.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  stroke: currentColor;
}

/* === HEADER === */
header {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    margin-bottom: 30px;
}

header h1 {
    color: var(--color-blanco);
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}

.logout-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: var(--color-peligro);
    color: var(--color-blanco);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1001;
}

.logout-btn:hover {
    transform: translateY(-2px);
    background-color: #c0392b; /* Oscurecer peligro */
}

/* === MAIN CONTAINER === */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* === DASHBOARD === */
.dashboard-section {
    background-color: var(--color-superficie);
    color: var(--color-texto);
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.dashboard-section h3 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 600;
    color: var(--color-primario);
}

/* === ESTADÍSTICAS === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--color-superficie);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease;
    border: 1px solid var(--color-borde);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.stat-icon {
    font-size: 3rem;
    color: var(--color-secundario);
    opacity: 0.9;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 5px;
}

.stat-label {
    font-size: 1rem;
    color: var(--color-gris-oscuro);
    font-weight: 500;
}

/* === GRÁFICOS === */
.dashboard-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

.chart-container {
    background: var(--color-superficie);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid var(--color-borde);
}

.chart-container h4 {
    margin-bottom: 15px;
    font-size: 1.1rem;
    text-align: center;
    color: var(--color-primario);
}

#chart-semanal {
    width: 100%;
    height: 200px;
    background: var(--color-gris-claro);
    border-radius: 10px;
}

.chart-tipos {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tipo-bar {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tipo-label {
    min-width: 60px;
    font-weight: 600;
    font-size: 0.9rem;
}

.tipo-progress {
    flex: 1;
    height: 20px;
    background: var(--color-fondo);
    border-radius: 10px;
    overflow: hidden;
}

.tipo-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
}

.tipo-i { background: var(--color-acento); }
.tipo-ii { background: var(--color-advertencia); }
.tipo-iii { background: var(--color-peligro); }

.tipo-count {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
}

/* === ACCIONES RÁPIDAS === */
.quick-actions h4 {
    margin-bottom: 20px;
    text-align: center;
    color: var(--color-primario);
    font-size: 1.3rem;
}

.quick-actions-horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

.quick-action-btn {
    padding: 15px 20px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--color-superficie);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    text-align: center;
}

.quick-action-btn:hover {
    background: var(--color-fondo);
    transform: translateY(-2px);
}

.quick-action-btn.primary {
    background-color: var(--color-acento);
    color: var(--color-blanco);
    border-color: var(--color-acento);
}

.quick-action-btn.primary:hover {
    background-color: #16a085; /* Oscurecer acento */
    border-color: #16a085;
}

/* === FORMULARIO === */
#formulario-registro {
    background: white;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--color-fondo);
}

.form-header h3 {
    color: var(--color-primario);
    font-size: 1.8rem;
    font-weight: 600;
}

.form-actions-top {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    min-width: 140px;
}

.action-btn .btn-icon {
    font-size: 20px;
}

.btn-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
}

.btn-title {
    font-weight: 600;
    font-size: 14px;
}

.btn-subtitle {
    font-size: 11px;
    opacity: 0.8;
}

.template-btn {
    background-color: var(--color-secundario);
    color: var(--color-blanco);
}

.duplicate-btn {
    background-color: var(--color-advertencia);
    color: var(--color-blanco);
}

.draft-btn {
    background-color: var(--color-gris-oscuro);
    color: var(--color-blanco);
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* === SECCIONES DEL FORMULARIO === */
.form-section {
    background: var(--color-gris-claro);
    border: 1px solid var(--color-borde);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.form-section:hover {
    border-color: var(--color-secundario);
}

.section-title {
    color: var(--color-texto);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title i {
    color: var(--color-secundario);
    font-size: 1.1rem; /* Ligeramente más pequeño que el texto */
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-weight: 600;
    color: var(--color-texto);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 15px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: var(--color-superficie);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

/* === BÚSQUEDA DE ESTUDIANTES === */
.estudiante-input-container {
    position: relative;
}

.estudiante-search {
    width: 100%;
}

.estudiantes-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.estudiante-suggestion {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-fondo);
    transition: background-color 0.2s ease;
}

.estudiante-suggestion:hover {
    background-color: var(--color-fondo);
}

.estudiante-suggestion.selected {
    background-color: var(--color-secundario);
    color: var(--color-blanco);
}

/* === EVIDENCIAS === */
.evidencias-upload-area {
    border: 2px dashed var(--color-borde);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background: #fafafa;
}

.evidencias-upload-area:hover {
    border-color: var(--color-secundario);
    background-color: var(--color-gris-claro);
}

.upload-icon {
    font-size: 4rem;
    color: var(--color-gris-oscuro);
    margin-bottom: 15px;
}

.upload-placeholder p {
    font-weight: 600;
    color: var(--color-texto);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.upload-placeholder small {
    color: var(--color-gris-oscuro);
    display: block;
    margin-top: 5px;
}

.evidencias-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.evidencia-item {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-borde);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.evidencia-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.evidencia-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--color-peligro);
    color: var(--color-blanco);
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === FIRMAS === */
.firmas-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
}

.firma-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-superficie);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--color-borde);
}

.firma-box label {
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--color-texto);
}

canvas {
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    cursor: crosshair;
    width: 100%;
    height: 150px;
    background: var(--color-gris-claro);
}

.limpiar-firma {
    margin-top: 15px;
    padding: 8px 20px;
    background-color: var(--color-gris-oscuro);
    color: var(--color-blanco);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.limpiar-firma:hover {
    background-color: var(--color-texto);
    transform: translateY(-1px);
}

.firma-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
    width: 100%;
}

.btn-save-signature {
    padding: 10px 15px;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.btn-save-signature:hover {
    background: linear-gradient(135deg, #218838, #1bb492);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.btn-save-signature:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
}

@media (max-width: 768px) {
    .firma-buttons {
        flex-direction: column;
        gap: 8px;
    }
    
    .btn-save-signature {
        font-size: 12px;
        padding: 8px 12px;
    }
}

/* === BOTONES PRINCIPALES === */
.form-actions {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    padding-top: 25px;
    border-top: 2px solid var(--color-fondo);
    justify-content: center;
    align-items: baseline;
}

.btn-primary, .btn-secondary {
    padding: 0 35px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    min-width: 180px;
    justify-content: center;
    height: 54px;
    box-sizing: border-box;
}

.btn-primary {
    background-color: var(--color-acento);
    color: var(--color-blanco);
}

.btn-primary:hover {
    background-color: #16a085; /* Oscurecer acento */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(22, 160, 133, 0.3);
}

.btn-secondary {
    background-color: var(--color-gris-oscuro);
    color: var(--color-blanco);
}

.btn-secondary:hover {
    background-color: var(--color-texto);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.btn-success {
    padding: 14px 25px;
    background-color: var(--color-acento);
    color: var(--color-blanco);
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(26, 188, 156, 0.3);
}

.btn-success:hover {
    background-color: #16a085; /* Oscurecer acento */
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(26, 188, 156, 0.4);
}

.btn-danger {
    padding: 14px 25px;
    background-color: var(--color-peligro);
    color: var(--color-blanco);
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.btn-danger:hover {
    background-color: #c0392b; /* Oscurecer peligro */
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(231, 76, 60, 0.4);
}

/* === HISTORIAL === */
#historial-faltas {
    background: var(--color-superficie);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

#historial-faltas h3 {
    color: var(--color-primario);
    margin-bottom: 30px;
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
}

/* === FILTROS === */
.search-filters-container {
    background: var(--color-gris-claro);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid var(--color-borde);
}

.search-box {
    position: relative;
    margin-bottom: 20px;
}

.search-input {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.filters-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}

.filter-select,
.filter-date {
    padding: 10px 15px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font-size: 14px;
    background: var(--color-superficie);
    min-width: 140px;
    transition: all 0.3s ease;
}

.filter-select:focus,
.filter-date:focus {
    outline: none;
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

#limpiar-filtros {
    padding: 8px 15px;
    font-size: 12px;
    min-width: 80px;
    max-width: 90px;
}

.quick-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.quick-filter-btn {
    padding: 8px 16px;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-texto);
}

.quick-filter-btn:hover,
.quick-filter-btn.active {
    background: var(--color-secundario);
    color: var(--color-blanco);
    border-color: var(--color-secundario);
}

/* === TABLA === */
#tabla-historial {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#tabla-historial thead {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}

#tabla-historial th {
    padding: 18px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
}

#tabla-historial td {
    padding: 15px;
    border-bottom: 1px solid var(--color-fondo);
    font-size: 14px;
    vertical-align: middle;
}

#tabla-historial tbody tr {
    transition: background-color 0.2s ease;
}

#tabla-historial tbody tr:hover {
    background-color: var(--color-gris-claro);
}

.ver-detalles-btn {
    padding: 8px 16px;
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
}

.ver-detalles-btn:hover {
    background-color: #2980b9; /* Oscurecer secundario */
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.4);
}

/* === MODAL === */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(44, 62, 80, 0.7); /* Usar primario con opacidad */
    backdrop-filter: blur(5px);
}

.modal-content {
    background: var(--color-superficie);
    margin: 2% auto;
    padding: 40px;
    border: none;
    width: 90%;
    max-width: 900px;
    max-height: 95vh;
    overflow-y: auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    position: absolute;
    top: 20px;
    right: 25px;
}

.close-button:hover {
    color: var(--color-peligro);
}

#modal-body p {
    margin: 15px 0;
    padding: 15px;
    background: var(--color-gris-claro);
    border-radius: 8px;
    border-left: 4px solid var(--color-secundario);
}

#modal-body strong {
    color: var(--color-texto);
    font-weight: 600;
}

.firmas-detalle-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 2px solid var(--color-fondo);
}

.firma-detalle-box {
    text-align: center;
    background: var(--color-gris-claro);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--color-borde);
}

.firma-detalle-box p {
    margin: 0 0 15px 0;
    font-weight: 600;
    color: var(--color-texto);
    background: none;
    border: none;
    padding: 0;
}

.firma-detalle-box img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: var(--color-superficie);
}

/* === PLANTILLAS MODAL === */
.plantilla-item {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.plantilla-item:hover {
    border-color: var(--color-secundario);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.plantilla-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.plantilla-nombre {
    font-weight: 600;
    color: var(--color-primario);
    font-size: 1.1rem;
}

.plantilla-tipo {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-blanco);
}

.plantilla-tipo.tipo-i { background: var(--color-acento); }
.plantilla-tipo.tipo-ii { background: var(--color-advertencia); color: var(--color-blanco); }
.plantilla-tipo.tipo-iii { background: var(--color-peligro); }

.plantilla-detalle {
    color: var(--color-gris-oscuro);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    main {
        padding: 0 15px;
    }
    
    .dashboard-charts {
        grid-template-columns: 1fr;
    }
    
    .quick-actions-horizontal {
        grid-template-columns: 1fr;
    }
    
    .form-header {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }
    
    .form-actions-top {
        justify-content: center;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .firmas-container {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .filters-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-select,
    .filter-date {
        min-width: auto;
        width: 100%;
    }
    
    .firmas-detalle-container {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95%;
        padding: 25px;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.5rem;
    }
    
    .logout-btn {
        position: static;
        margin-top: 15px;
        width: 100%;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .action-btn {
        min-width: auto;
        flex: 1;
    }
    
    .btn-subtitle {
        display: none;
    }
    
    #tabla-historial {
        font-size: 12px;
    }
    
    #tabla-historial th,
    #tabla-historial td {
        padding: 10px 8px;
    }
}

/* === LOGIN PAGE === */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primario);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.login-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
    animation: float 20s infinite linear;
}

@keyframes float {
    0% { transform: translateX(-50px) translateY(-50px); }
    100% { transform: translateX(50px) translateY(50px); }
}

.login-card {
    background: var(--color-superficie);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    padding: 50px 40px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 450px;
    text-align: center;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255,255,255,0.2);
}

.login-header {
    margin-bottom: 40px;
}

.login-logo {
    font-size: 4rem;
    margin-bottom: 20px;
    display: inline-block;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.login-card h2 {
    color: var(--color-primario);
    margin-bottom: 10px;
    font-size: 2.2rem;
    font-weight: 700;
    background: none;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-subtitle {
    color: var(--color-gris-oscuro);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.input-group {
    position: relative;
}

.login-input {
    width: 100%;
    padding: 18px 50px 18px 20px;
    border: 1px solid var(--color-borde);
    border-radius: 15px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: var(--color-gris-claro);
    box-sizing: border-box;
}

.login-input:focus {
    outline: none;
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    background: var(--color-superficie);
    transform: translateY(-2px);
}

.input-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--color-gris-oscuro);
    transition: color 0.3s ease;
}

.login-input:focus + .input-icon {
    color: var(--color-secundario);
}

.login-btn {
    padding: 18px 30px;
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    border: none;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.login-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.login-btn:hover::before {
    left: 100%;
}

.login-btn:hover {
    background-color: #2980b9; /* Oscurecer secundario */
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

.btn-text {
    font-weight: 600;
}

.btn-arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.login-btn:hover .btn-arrow {
    transform: translateX(5px);
}

.login-error {
    background-color: rgba(231, 76, 60, 0.1);
    color: var(--color-peligro);
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid var(--color-peligro);
    margin-top: 20px;
    font-size: 14px;
    font-weight: 500;
}

.login-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--color-borde);
}

.login-footer p {
    color: var(--color-gris-oscuro);
    font-size: 0.9rem;
    margin: 0;
}

/* === COORDINACIÓN PAGE === */
.coordinacion-header {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    padding: 0;
    border-radius: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}


.coordinacion-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: float 15s infinite linear;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    position: relative;
    z-index: 1;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    position: relative;
    z-index: 1;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-icon {
    font-size: 3.5rem;
    animation: pulse 2s infinite;
}

.coordinacion-header h1 {
    font-size: 2.2rem;
    margin: 0;
    font-weight: 700;
}

.header-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin: 5px 0 0 0;
    font-weight: 400;
}

.coordinacion-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.coord-stat-card {
    background: var(--color-superficie);
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 5px solid var(--color-secundario);
    position: relative;
    overflow: hidden;
}

.coord-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(52, 152, 219, 0.05);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.coord-stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(52, 152, 219, 0.15);
}

.coord-stat-card:hover::before {
    opacity: 1;
}

.coord-stat-card.pending { border-left-color: var(--color-advertencia); }
.coord-stat-card.in-rectoria { border-left-color: var(--color-primario); }
.coord-stat-card.resolved { border-left-color: var(--color-acento); }
.coord-stat-card.tipo-grave { border-left-color: var(--color-peligro); }

.coord-stat-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    color: var(--color-secundario);
    display: block;
}

.coord-stat-content {
    position: relative;
    z-index: 1;
}

.coord-stat-number {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-primario);
}

.coord-stat-label {
    font-size: 1rem;
    color: var(--color-gris-oscuro);
    font-weight: 500;
}

.coord-stat-arrow {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.5rem;
    color: var(--color-secundario);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.coord-stat-card:hover .coord-stat-arrow {
    transform: translateX(5px);
    opacity: 1;
}

.coordinacion-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.coord-action-card {
    background: var(--color-superficie);
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.coord-action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.1), transparent);
    transition: left 0.5s;
}

.coord-action-card:hover::before {
    left: 100%;
}

.coord-action-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.coord-action-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    color: var(--color-secundario);
    display: block;
    transition: transform 0.3s ease;
}

.coord-action-card:hover .coord-action-icon {
    transform: scale(1.1);
}

.coord-action-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-primario);
    margin-bottom: 12px;
}

.coord-action-desc {
    color: var(--color-gris-oscuro);
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

.coord-btn {
    padding: 14px 30px;
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    position: relative;
    overflow: hidden;
}

.coord-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.coord-btn:hover::before {
    left: 100%;
}

.coord-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(52, 152, 219, 0.4);
}

/* === GESTIÓN DE FALTAS === */
.management-widget {
    background: var(--color-superficie);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid var(--color-borde);
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 3px solid var(--color-secundario);
    background: linear-gradient(135deg, var(--color-gris-claro) 0%, var(--color-superficie) 100%);
    margin: -30px -30px 30px -30px;
    padding: 25px 30px;
    border-radius: 20px 20px 0 0;
}

.widget-header h3 {
    color: var(--color-primario);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.widget-actions {
    display: flex;
    gap: 15px;
}

.action-btn {
    padding: 10px 20px;
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}

/* === ACCIONES MASIVAS === */
.bulk-actions-panel {
    background: var(--color-gris-claro);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid var(--color-borde);
}

.bulk-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.bulk-header span {
    font-weight: 600;
    color: var(--color-texto);
}

.bulk-header button {
    padding: 6px 12px;
    background: var(--color-gris-oscuro);
    color: var(--color-blanco);
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bulk-header button:hover {
    background: var(--color-texto);
    transform: translateY(-1px);
}

.bulk-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.bulk-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.bulk-btn.danger {
    background-color: var(--color-peligro);
    color: var(--color-blanco);
}

.bulk-btn.primary {
    background-color: var(--color-secundario);
    color: var(--color-blanco);
}

.bulk-btn.secondary {
    background-color: var(--color-gris-oscuro);
    color: var(--color-blanco);
}

.bulk-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* === FILTROS AVANZADOS === */
.advanced-filters {
    background: linear-gradient(135deg, var(--color-gris-claro) 0%, #f8f9fa 100%);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    border: 2px solid var(--color-borde);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.search-enhancement {
    margin-bottom: 20px;
}

.smart-search {
    margin-bottom: 15px;
}

.smart-search label {
    display: block;
    font-weight: 600;
    color: var(--color-texto);
    margin-bottom: 8px;
}

#busqueda-inteligente {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
}

#busqueda-inteligente:focus {
    outline: none;
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.search-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-tag {
    padding: 6px 15px;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-texto);
}

.filter-tag:hover,
.filter-tag.active {
    background: var(--color-secundario);
    color: var(--color-blanco);
    border-color: var(--color-secundario);
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    font-weight: 600;
    color: var(--color-texto);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.filter-group input,
.filter-group select {
    padding: 10px 12px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: var(--color-superficie);
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.filter-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.btn-filter {
    padding: 12px 25px;
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-clear {
    padding: 12px 25px;
    background-color: var(--color-gris-oscuro);
    color: var(--color-blanco);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-filter:hover,
.btn-clear:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* === TABLA DE GESTIÓN === */
.table-container {
    background: var(--color-superficie);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    border: 1px solid var(--color-borde);
}

#tabla-gestion-faltas {
    width: 100%;
    border-collapse: collapse;
}

#tabla-gestion-faltas thead {
    background: linear-gradient(135deg, var(--color-primario) 0%, #1f2b38 100%);
    color: var(--color-blanco);
}

#tabla-gestion-faltas th {
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

#tabla-gestion-faltas td {
    padding: 12px;
    border-bottom: 1px solid var(--color-fondo);
    font-size: 0.9rem;
    vertical-align: middle;
}

#tabla-gestion-faltas tbody tr {
    transition: background-color 0.2s ease;
}

#tabla-gestion-faltas tbody tr:hover {
    background-color: var(--color-gris-claro);
}

#tabla-gestion-faltas tbody tr:last-child td {
    border-bottom: none;
}

/* === BOTONES DE ACCIÓN EN TABLA === */
.acciones-container {
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.acciones-container .btn-secondary {
    padding: 4px 8px;
    font-size: 0.7rem;
    border-radius: 4px;
    min-width: auto;
}

#tabla-faltas {
    table-layout: fixed;
}

#tabla-faltas th:nth-child(1) { width: 12%; text-align: center; } /* Tipo */
#tabla-faltas th:nth-child(2) { width: 10%; text-align: center; } /* Numeral */
#tabla-faltas th:nth-child(3) { width: 45%; text-align: center; } /* Descripción */
#tabla-faltas th:nth-child(4) { width: 13%; text-align: center; } /* Estado */
#tabla-faltas th:nth-child(5) { width: 20%; text-align: center; } /* Acciones */

#tabla-faltas td:nth-child(1) { text-align: center; } /* Tipo */
#tabla-faltas td:nth-child(2) { text-align: center; } /* Numeral */
#tabla-faltas td:nth-child(3) { text-align: left; } /* Descripción */
#tabla-faltas td:nth-child(4) { text-align: center; } /* Estado */
#tabla-faltas td:nth-child(5) { text-align: center; } /* Acciones */

.gestionar-btn {
    padding: 6px 12px;
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 5px;
    box-shadow: 0 1px 4px rgba(52, 152, 219, 0.2);
}

.gestionar-btn:hover {
    background-color: #2980b9; /* Oscurecer secundario */
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.enviar-rectoria-btn {
    padding: 6px 12px;
    background-color: var(--color-primario);
    color: var(--color-blanco);
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 5px;
    box-shadow: 0 1px 4px rgba(44, 62, 80, 0.2);
}

.enviar-rectoria-btn:hover {
    background-color: #1f2b38; /* Oscurecer primario */
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.3);
}

.ver-detalles-btn {
    padding: 6px 12px;
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(52, 152, 219, 0.2);
}

.ver-detalles-btn:hover {
    background-color: #2980b9; /* Oscurecer secundario */
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.eliminar-btn {
    padding: 6px 12px;
    background-color: var(--color-peligro);
    color: var(--color-blanco);
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(231, 76, 60, 0.2);
}

.eliminar-btn:hover {
    background-color: #c0392b; /* Oscurecer peligro */
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

/* === ESTADOS EN TABLA === */
.estado-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.estado-pendiente {
    background-color: rgba(243, 156, 18, 0.1);
    color: #d35400;
    border: 1px solid rgba(243, 156, 18, 0.2);
}

.estado-gestionada {
    background-color: rgba(26, 188, 156, 0.1);
    color: #16a085;
    border: 1px solid rgba(26, 188, 156, 0.2);
}

.estado-rectoria {
    background-color: rgba(44, 62, 80, 0.1);
    color: var(--color-primario);
    border: 1px solid rgba(44, 62, 80, 0.2);
}

.estado-resuelta {
    background-color: rgba(52, 152, 219, 0.1);
    color: #2980b9;
    border: 1px solid rgba(52, 152, 219, 0.2);
}

/* === WIDGET DE REPORTES === */
.report-widget {
    background: var(--color-superficie);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.report-widget h3 {
    color: var(--color-primario);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 25px;
    text-align: center;
}

.report-filters {
    display: flex;
    gap: 20px;
    align-items: end;
    margin-bottom: 25px;
    flex-wrap: wrap;
    justify-content: center;
}

.report-filters > div {
    display: flex;
    flex-direction: column;
}

.report-filters label {
    font-weight: 600;
    color: var(--color-texto);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.report-filters input {
    padding: 10px 12px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.report-filters input:focus {
    outline: none;
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

#generar-informe-btn,
.export-btn {
    padding: 12px 20px;
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

#generar-informe-btn:hover,
.export-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}

.report-preview {
    background: var(--color-gris-claro);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--color-borde);
}

#informe-titulo {
    color: var(--color-primario);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#tabla-informe {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

#tabla-informe thead {
    background-color: var(--color-texto);
    color: var(--color-blanco);
}

#tabla-informe th {
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
}

#tabla-informe td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--color-borde);
    text-align: center;
    font-size: 0.8rem;
}

#tabla-informe tbody tr:nth-child(even) {
    background-color: var(--color-gris-claro);
}

/* === RECTORÍA PAGE === */
.rectoria-header {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    padding: 0;
    border-radius: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.rectoria-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 25px 25px;
    animation: float 20s infinite linear;
}

.rectoria-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    position: relative;
    z-index: 1;
}

.rectoria-header .header-title {
    display: flex;
    align-items: center;
    gap: 20px;
}

.rectoria-header .header-icon {
    font-size: 3.5rem;
    animation: pulse 2s infinite;
}

.rectoria-header h1 {
    font-size: 2.2rem;
    margin: 0;
    font-weight: 700;
}

.rectoria-header .header-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin: 5px 0 0 0;
    font-weight: 400;
}

/* === WIDGETS DE RECTORÍA === */
.management-widget,
.document-widget,
.history-widget {
    background: var(--color-superficie);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-left: 5px solid var(--color-primario);
}

.management-widget h3,
.document-widget h3,
.history-widget h3 {
    color: var(--color-primario);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* === FILTROS DE BÚSQUEDA === */
.search-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

#buscador-rectoria,
#filtro-grado-rectoria {
    padding: 10px 15px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: var(--color-superficie);
}

#buscador-rectoria:focus,
#filtro-grado-rectoria:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.2);
}

/* === TABLAS DE RECTORÍA === */
#tabla-pendientes-rectoria,
#tabla-historial-documentos {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#tabla-pendientes-rectoria thead,
#tabla-historial-documentos thead {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}

#tabla-pendientes-rectoria th,
#tabla-historial-documentos th {
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

#tabla-pendientes-rectoria td,
#tabla-historial-documentos td {
    padding: 12px;
    border-bottom: 1px solid var(--color-fondo);
    font-size: 0.9rem;
    vertical-align: middle;
}

#tabla-pendientes-rectoria tbody tr,
#tabla-historial-documentos tbody tr {
    transition: background-color 0.2s ease;
}

#tabla-pendientes-rectoria tbody tr:hover,
#tabla-historial-documentos tbody tr:hover {
    background-color: var(--color-gris-claro);
}

/* === BOTONES DE RECTORÍA === */


/* === BOTONES DE ACCIONES EN TABLA RECTORÍA === */
.acciones-rectoria {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
    align-items: center;
    padding: 2px;
    min-width: 140px;
}

.btn-rectoria {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    white-space: nowrap;
    width: 60px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.seleccionar-caso-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    white-space: nowrap;
    width: 60px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    box-shadow: 0 1px 3px rgba(52, 152, 219, 0.3);
}

.seleccionar-caso-btn:hover {
    background-color: #2980b9; /* Oscurecer secundario */
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.4);
}

.recurso-btn {
    background-color: var(--color-advertencia);
    color: var(--color-blanco);
    box-shadow: 0 1px 3px rgba(243, 156, 18, 0.3);
}

.recurso-btn:hover {
    background-color: #d35400; /* Oscurecer advertencia */
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(243, 156, 18, 0.4);
}

.eliminar-rectoria-btn {
    background-color: var(--color-peligro);
    color: var(--color-blanco);
    box-shadow: 0 1px 3px rgba(231, 76, 60, 0.3);
}

.eliminar-rectoria-btn:hover {
    background-color: #c0392b; /* Oscurecer peligro */
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.4);
}

/* === ICONOS EN BOTONES === */
.btn-rectoria .btn-icon {
    font-size: 0.8rem;
    margin-right: 2px;
}

.btn-rectoria .btn-text {
    font-size: 0.65rem;
    font-weight: 600;
}

/* === ORGANIZACIÓN DE COLUMNAS === */
#tabla-pendientes-rectoria th:nth-child(1),
#tabla-pendientes-rectoria td:nth-child(1) { width: 12%; } /* Fecha */
#tabla-pendientes-rectoria th:nth-child(2),
#tabla-pendientes-rectoria td:nth-child(2) { width: 20%; } /* Estudiante */
#tabla-pendientes-rectoria th:nth-child(3),
#tabla-pendientes-rectoria td:nth-child(3) { width: 8%; } /* Grado */
#tabla-pendientes-rectoria th:nth-child(4),
#tabla-pendientes-rectoria td:nth-child(4) { width: 12%; } /* Resolución */
#tabla-pendientes-rectoria th:nth-child(5),
#tabla-pendientes-rectoria td:nth-child(5) { width: 10%; } /* Días */
#tabla-pendientes-rectoria th:nth-child(6),
#tabla-pendientes-rectoria td:nth-child(6) { width: 15%; } /* Estado Recurso */
#tabla-pendientes-rectoria th:nth-child(7),
#tabla-pendientes-rectoria td:nth-child(7) { width: 23%; } /* Acciones */

#tabla-pendientes-rectoria {
    table-layout: fixed;
}

#tabla-pendientes-rectoria th,
#tabla-pendientes-rectoria td {
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === ENCABEZADO TABLA CASOS PENDIENTES === */
.table-container {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-top: 20px;
}

#tabla-pendientes-rectoria thead th {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    padding: 15px 12px;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
}

#tabla-pendientes-rectoria tbody td {
    padding: 12px;
    text-align: center;
    vertical-align: middle;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-fondo);
}

#tabla-pendientes-rectoria tbody tr:last-child td {
    border-bottom: none;
}

#tabla-pendientes-rectoria tbody tr:hover {
    background-color: rgba(44, 62, 80, 0.05);
}

.btn-primary {
    padding: 14px 25px;
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.btn-primary:hover {
    background-color: #2980b9; /* Oscurecer secundario */
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(52, 152, 219, 0.4);
}

.btn-secondary {
    padding: 14px 25px; /* Ajustado para consistencia */
    background-color: var(--color-gris-oscuro);
    color: var(--color-blanco);
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
}

.btn-secondary:hover {
    background-color: var(--color-texto);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(108, 117, 125, 0.3);
}

.btn-success {
    padding: 14px 25px;
    background-color: var(--color-acento);
    color: var(--color-blanco);
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(26, 188, 156, 0.3);
}

.btn-success:hover {
    background-color: #16a085; /* Oscurecer acento */
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(26, 188, 156, 0.4);
}

.btn-danger {
    padding: 14px 25px;
    background-color: var(--color-peligro);
    color: var(--color-blanco);
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.btn-danger:hover {
    background-color: #c0392b; /* Oscurecer peligro */
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(231, 76, 60, 0.4);
}

/* === MENSAJES DE ACUDIENTES EN COORDINACIÓN === */
.mensajes-filtros {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 2px solid #e9ecef;
}

.mensajes-container {
    max-height: 500px;
    overflow-y: auto;
}

.mensaje-item {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius:  12px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.mensaje-item.no-leido {
    background: linear-gradient(135deg, #e7f3ff 0%, #f0f8ff 100%);
    border-color: #007bff;
    box-shadow: 0 3px 10px rgba(0, 123, 255, 0.1);
}

.mensaje-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.mensaje-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mensaje-remitente {
    font-weight: 600;
    color: #2c3e50;
    font-size: 1rem;
}

.mensaje-fecha {
    color: #6c757d;
    font-size: 0.85rem;
}

.mensaje-asunto {
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.mensaje-preview {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 15px;
}

.mensaje-acciones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.mensaje-acciones button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
    transform: translateY(-1px);
}

/* Modal para mensaje completo */
.mensaje-completo {
    margin: 20px 0;
}

.campo-mensaje {
    margin-bottom: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
}

.mensaje-contenido {
    margin-top: 10px;
    padding: 15px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    white-space: pre-wrap;
    line-height: 1.5;
}

.modal-acciones {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}

.notifications-section {
    background: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    transition: background-color 0.3s ease;
}

.notification-item:hover {
    background: #f8f9fa;
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    flex-shrink: 0;
}

.notification-icon.alta { background: #dc3545; }
.notification-icon.media { background: #ffc107; }
.notification-icon.baja { background: #28a745; }

.notification-content {
    flex: 1;
}

.notification-title {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.notification-text {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.notification-time {
    color: #adb5bd;
    font-size: 0.8rem;
}

.notification-badge {
    width: 12px;
    height: 12px;
    background: #007bff;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.acudiente-btn {
    padding: 12px 25px;
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.acudiente-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.3);
}

/* === HISTORIAL RECTORÍA MODAL === */
.historial-rectoria-modal {
    max-width: 1000px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-subtitle {
    color: #6c757d;
    font-size: 1rem;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 500;
}

.historial-container {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px;
}

.estudiante-rectoria-item {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.estudiante-rectoria-item:hover {
    border-color: #6f42c1;
    box-shadow: 0 5px 15px rgba(111, 66, 193, 0.2);
    transform: translateY(-2px);
}

.estudiante-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
}

.estudiante-info h4 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 1.3rem;
    font-weight: 600;
}

.estudiante-detalles {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.estudiante-detalles .grado {
    background: #e7f3ff;
    color: #0056b3;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.estudiante-detalles .total-faltas {
    background: #fff3cd;
    color: #856404;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.estudiante-detalles .tipo-grave {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
}

.estudiante-detalles .tipo-grave.tipo-i {
    background: #28a745;
}

.estudiante-detalles .tipo-grave.tipo-ii {
    background: #ffc107;
    color: #212529;
}

.estudiante-detalles .tipo-grave.tipo-iii {
    background: #dc3545;
}

.envio-info {
    text-align: right;
    color: #6c757d;
    font-size: 0.9rem;
}

.fecha-envio {
    font-weight: 600;
    margin-bottom: 5px;
}

.enviado-por {
    font-style: italic;
}

.faltas-detalle h5 {
    color: #495057;
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-weight: 600;
}

.faltas-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.falta-item-rectoria {
    display: flex;
    gap: 15px;
    background: white;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.falta-item-rectoria:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

.falta-numero {
    font-weight: 700;
    color: #6f42c1;
    font-size: 1rem;
    min-width: 20px;
}

.falta-contenido {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.falta-fecha {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
}

.falta-tipo {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: flex-start;
}

.falta-tipo.tipo-i {
    background: #d4edda;
    color: #155724;
}

.falta-tipo.tipo-ii {
    background: #fff3cd;
    color: #856404;
}

.falta-tipo.tipo-iii {
    background: #f8d7da;
    color: #721c24;
}

.falta-descripcion {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.4;
}

.falta-docente {
    color: #495057;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Scrollbar personalizado para el historial */
.historial-container::-webkit-scrollbar {
    width: 8px;
}

.historial-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.historial-container::-webkit-scrollbar-thumb {
    background: #6f42c1;
    border-radius: 10px;
}

.historial-container::-webkit-scrollbar-thumb:hover {
    background: #5a32a3;
}

/* === SETUP WIZARD === */
.setup-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    padding: 40px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 600px;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255,255,255,0.2);
}

.setup-header {
    text-align: center;
    margin-bottom: 40px;
}

.setup-logo {
    font-size: 4rem;
    margin-bottom: 20px;
    display: inline-block;
    animation: pulse 2s infinite;
}

.setup-card h2 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.setup-subtitle {
    color: #6c757d;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

.setup-form {
    position: relative;
}

.setup-step {
    display: none;
    animation: fadeIn 0.3s ease;
}

.setup-step.active {
    display: block;
}

.setup-step h3 {
    color: #495057;
    margin-bottom: 25px;
    font-size: 1.3rem;
    font-weight: 600;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
}

.section-label {
    display: block;
    font-weight: 600;
    color: #495057;
    margin-bottom: 20px;
    font-size: 1rem;
}

.grados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    justify-content: center;
}

.checkbox-label:hover {
    background: #e7f3ff;
    border-color: #007bff;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
    transform: scale(1.2);
}

.checkbox-label input[type="checkbox"]:checked + span,
.checkbox-label:has(input[type="checkbox"]:checked) {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.step-actions {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    margin-top: 30px;
}

.step-actions .btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    padding: 15px 25px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.step-actions .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 25px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.step-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

.setup-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.setup-footer p {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0;
}

.setup-footer a {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
}

.setup-footer a:hover {
    text-decoration: underline;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === ESTILOS ESPECÍFICOS PARA MODAL DE RESOLUCIÓN === */
#resolucion-modal .modal-content {
    max-height: 90vh !important;
    height: auto !important;
    overflow-y: auto !important;
}

#resolucion-modal h2 {
    background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-secundario) 100%);
    color: var(--color-blanco);
    padding: 20px 30px;
    margin: -40px -40px 30px -40px;
    border-radius: 20px 20px 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.info-estudiante-gestion {
    background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 100%);
    border: 2px solid var(--color-secundario);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1);
}

.resumen-faltas-container {
    background: var(--color-gris-claro);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    border-left: 4px solid var(--color-advertencia);
}

.evidencias-container {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid var(--color-borde);
}

.dias-calculados {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 2px solid #28a745;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
    font-size: 1.1rem;
    color: #155724;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.1);
}

#resolucion-modal .form-actions {
    background: linear-gradient(135deg, var(--color-gris-claro) 0%, #f8f9fa 100%);
    border-top: 3px solid var(--color-secundario);
    margin: 30px -40px -40px -40px;
    padding: 25px 40px;
    border-radius: 0 0 20px 20px;
    text-align: center;
}

#resolucion-modal .form-actions button {
    background: linear-gradient(135deg, var(--color-acento) 0%, #16a085 100%);
    color: var(--color-blanco);
    border: none;
    padding: 15px 40px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(26, 188, 156, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

#resolucion-modal .form-actions button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 188, 156, 0.4);
    background: linear-gradient(135deg, #16a085 0%, #138d75 100%);
}
#resolucion-modal input[type="text"],
#resolucion-modal input[type="number"],
#resolucion-modal input[type="date"] {
    font-size: 16px !important;
    padding: 12px 16px;
    height: 48px;
    box-sizing: border-box;
    border: 2px solid var(--color-borde);
    border-radius: 8px;
    transition: all 0.3s ease;
}

#resolucion-modal input:focus {
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    outline: none;
}

#resolucion-modal textarea {
    font-size: 16px !important;
    padding: 12px 16px;
    min-height: 100px;
    box-sizing: border-box;
}

#resolucion-modal textarea:not(#trabajo-formativo) {
    height: 48px !important;
    min-height: 48px !important;
}

#resolucion-modal textarea {
    font-size: 16px !important;
    line-height: 1.5;
    min-height: 120px;
    width: 100%;
    box-sizing: border-box;
}

#resolucion-modal label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primario);
    margin-bottom: 8px;
    display: block;
}

/* Campos específicos del modal */
#nombre-acudiente,
#reso-numero,
#dias-suspension,
#fecha-inicio-suspension,
#fecha-fin-suspension,
#nombre-estudiante-gestion,
#grado-estudiante-gestion,
#total-faltas-pendientes {
    font-size: 16px !important;
    padding: 12px 16px !important;
    height: 48px !important;
    box-sizing: border-box !important;
}

#trabajo-formativo {
    font-size: 16px !important;
    padding: 14px 16px !important;
}

/* Campo de trabajo formativo - ancho completo */
#trabajo-formativo {
    width: 100% !important;
    grid-column: 1 / -1 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Estilos específicos para coord-gestion-faltas.html */
#resolucion-modal .info-estudiante-gestion input,
#resolucion-modal .form-grid input,
#resolucion-modal .form-grid select,
#resolucion-modal input[readonly],
#nombre-estudiante-gestion {
    height: 48px !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    min-height: 48px !important;
}

#grado-estudiante-gestion,
#total-faltas-pendientes {
    height: 48px !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

/* === MENU ADMINISTRATIVO === */
.admin-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.admin-menu-card {
    background: var(--color-superficie);
    border: 2px solid var(--color-borde);
    border-radius: 15px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.admin-menu-card:hover {
    border-color: var(--color-secundario);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.15);
}

.admin-menu-card .icon {
    color: var(--color-secundario);
    font-size: 3rem;
    flex-shrink: 0;
}

.menu-content {
    flex: 1;
}

.menu-content h4 {
    color: var(--color-primario);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.menu-content p {
    color: var(--color-gris-oscuro);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.4;
}

.menu-arrow {
    font-size: 1.5rem;
    color: var(--color-secundario);
    transition: transform 0.3s ease;
}

.admin-menu-card:hover .menu-arrow {
    transform: translateX(5px);
}

/* === HEADER BUTTONS SPACING === */
.header-buttons {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.btn-with-icon {
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.btn-with-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.header-buttons .btn-secondary {
    margin-top: 40px;
    padding: 10px 20px;
    min-width: 120px;
    height: 40px;
    box-sizing: border-box;
}

.logout-btn {
    height: 40px;
    box-sizing: border-box;
}

/* === RESPONSIVE ADICIONAL === */
@media (max-width: 768px) {
    .login-card {
        padding: 40px 25px;
        margin: 10px;
    }
    
    .login-card h2 {
        font-size: 1.8rem;
    }
    
    .login-logo {
        font-size: 3rem;
    }
    
    .login-input {
        padding: 16px 45px 16px 18px;
        font-size: 16px;
    }
    
    .login-btn {
        padding: 16px 25px;
    }
    
    .coordinacion-stats,
    .coordinacion-actions,
    .rectoria-dashboard,
    .acudiente-stats {
        grid-template-columns: 1fr;
    }
    
    .header-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .header-title {
        flex-direction: column;
        gap: 15px;
    }
    
    .management-widget {
        padding: 20px;
    }
    
    .widget-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .widget-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .filter-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .filter-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .bulk-buttons {
        flex-direction: column;
    }
    
    .bulk-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .report-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    #tabla-gestion-faltas,
    #tabla-informe {
        font-size: 0.7rem;
    }
    
    #tabla-gestion-faltas th,
    #tabla-gestion-faltas td,
    #tabla-informe th,
    #tabla-informe td {
        padding: 8px 6px;
    }
    
    .gestionar-btn,
    .enviar-rectoria-btn,
    .ver-detalles-btn,
    .eliminar-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
        margin: 2px;
        display: block;
        width: 100%;
        margin-bottom: 4px;
    }
    
    .rector-metrics {
        grid-template-columns: 1fr;
    }
    
    .rectoria-header .header-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .rectoria-header .header-title {
        flex-direction: column;
        gap: 15px;
    }
    
    .document-actions {
        grid-template-columns: 1fr;
    }
    
    .search-filters {
        flex-direction: column;
    }
    
    #buscador-rectoria,
    #filtro-grado-rectoria {
        width: 100%;
    }
    
    #tabla-pendientes-rectoria,
    #tabla-historial-documentos {
        font-size: 0.75rem;
    }
    
    #tabla-pendientes-rectoria th,
    #tabla-pendientes-rectoria td,
    #tabla-historial-documentos th,
    #tabla-historial-documentos td {
        padding: 8px 4px;
    }
    
    #tabla-pendientes-rectoria thead th {
        font-size: 0.7rem;
        padding: 12px 4px;
    }
    
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger {
        padding: 12px 20px;
        font-size: 0.9rem;
        justify-content: center;
    }
    
    .acciones-rectoria {
        flex-direction: column;
        gap: 2px;
        min-width: 100px;
    }
    
    .btn-rectoria {
        padding: 6px 8px;
        font-size: 0.6rem;
        min-width: auto;
        flex: none;
    }
    
    .btn-rectoria .btn-text {
        font-size: 0.6rem;
    }
    
    .btn-rectoria .btn-icon {
        font-size: 0.7rem;
        margin-right: 1px;
    }
    
    #tabla-pendientes-rectoria th:nth-child(7),
    #tabla-pendientes-rectoria td:nth-child(7) {
        width: 30%; /* Más espacio para acciones en móvil */
    }
    
    .student-info-header {
        flex-direction: column;
        text-align: center;
    }
    
    .notification-item {
        flex-direction: column;
        text-align: center;
    }
    
    /* Historial Rectoría Modal - Responsive */
    .historial-rectoria-modal {
        max-width: 95%;
        max-height: 90vh;
    }
    
    .estudiante-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .estudiante-detalles {
        justify-content: center;
    }
    
    .envio-info {
        text-align: center;
    }
    
    .falta-item-rectoria {
        flex-direction: column;
        gap: 10px;
    }
    
    .falta-numero {
        align-self: flex-start;
    }
    
    /* Setup Wizard - Responsive */
    .setup-card {
        padding: 30px 20px;
        margin: 10px;
    }
    
    .setup-logo {
        font-size: 3rem;
    }
    
    .setup-card h2 {
        font-size: 1.6rem;
    }
    
    .grados-grid {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        gap: 10px;
    }
    
    .checkbox-label {
        padding: 10px 8px;
        font-size: 0.9rem;
    }
    
    .step-actions {
        flex-direction: column;
    }
    
    .step-actions .btn-primary,
    .step-actions .btn-secondary {
        width: 100%;
        padding: 12px 20px;
    }
}
/* === TABLA USUARIOS MEJORADA === */
#tabla-usuarios {
    table-layout: fixed;
    width: 100%;
}

#tabla-usuarios th:nth-child(1) { width: 25%; } /* Nombre */
#tabla-usuarios th:nth-child(2) { width: 25%; } /* Email */
#tabla-usuarios th:nth-child(3) { width: 12%; } /* Rol */
#tabla-usuarios th:nth-child(4) { width: 18%; } /* Estudiante */
#tabla-usuarios th:nth-child(5) { width: 10%; } /* Estado */
#tabla-usuarios th:nth-child(6) { width: 10%; } /* Acciones */

#tabla-usuarios th,
#tabla-usuarios td {
    padding: 15px 12px;
    text-align: left;
    word-wrap: break-word;
    overflow: hidden;
}

#tabla-usuarios th:nth-child(3),
#tabla-usuarios th:nth-child(5),
#tabla-usuarios th:nth-child(6),
#tabla-usuarios td:nth-child(3),
#tabla-usuarios td:nth-child(5),
#tabla-usuarios td:nth-child(6) {
    text-align: center;
}
/* === BOTONES DE TABLA === */
.btn-table {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    margin: 2px;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    min-width: 60px;
    text-align: center;
}

.btn-table.btn-edit {
    background-color: var(--color-secundario);
    color: white;
}

.btn-table.btn-delete {
    background-color: var(--color-peligro);
    color: white;
}

.btn-table.btn-view {
    background-color: var(--color-acento);
    color: white;
}

.btn-table:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#tabla-usuarios td:nth-child(6) {
    white-space: nowrap;
    overflow: visible;
}
/* === TABLA USUARIOS SIN COLUMNA ESTUDIANTE === */
#tabla-usuarios th:nth-child(1) { width: 35%; } /* Nombre */
#tabla-usuarios th:nth-child(2) { width: 35%; } /* Email */
#tabla-usuarios th:nth-child(3) { width: 15%; } /* Rol */
#tabla-usuarios th:nth-child(4) { width: 10%; } /* Estado */
#tabla-usuarios th:nth-child(5) { width: 15%; } /* Acciones */

#tabla-usuarios th:nth-child(3),
#tabla-usuarios th:nth-child(4),
#tabla-usuarios th:nth-child(5),
#tabla-usuarios td:nth-child(3),
#tabla-usuarios td:nth-child(4),
#tabla-usuarios td:nth-child(5) {
    text-align: center;
}

#tabla-usuarios td:nth-child(5) {
    white-space: nowrap;
    overflow: visible;
}