/* =========================================
   CALENDARIO MENSUAL
========================================= */

.calendario-mes {
    background-color: var(--blanco);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 20px 25px 25px;
    width: 100%;
}

.calendario-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.calendario-cabecera h3 {
    font-size: 1.2rem;
    color: var(--negro);
    margin: 0;
}

.calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendario-dia-semana {
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    padding: 8px 0;
    border-bottom: 2px solid var(--gris-claro);
    margin-bottom: 6px;
}

.calendario-celda {
    position: relative;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--negro);
    background-color: var(--gris-claro);
    transition: all 0.15s ease;
    cursor: pointer;
}

a.calendario-celda:hover {
    background-color: var(--azul);
    color: var(--blanco);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 159, 227, 0.3);
}

.calendario-celda.vacia {
    background-color: transparent;
    cursor: default;
}

.calendario-celda.fin-de-semana {
    background-color: transparent;
    color: #ccc;
    font-weight: 400;
}

.calendario-celda.hoy {
    background-color: var(--amarillo);
    color: var(--negro);
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--negro) inset;
}

a.calendario-celda.hoy:hover {
    background-color: var(--amarillo);
    color: var(--negro);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(242, 214, 0, 0.5), 0 0 0 2px var(--negro) inset;
}




/* =========================================
   TABLA DE PROFESORES
========================================= */

.tabla-profesores {
    background-color: var(--blanco);
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 20px;
}

.fila-cabecera {
    display: grid;
    grid-template-columns: 100px 1fr 160px;
    gap: 15px;
    padding: 14px 22px;
    background-color: var(--gris-claro);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777;
    font-weight: 700;
}

.fila-profesor {
    display: grid;
    grid-template-columns: 100px 1fr 160px;
    gap: 15px;
    padding: 12px 22px;
    text-decoration: none;
    color: var(--negro);
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s ease, padding-left 0.15s ease;
}

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

.fila-profesor:hover {
    background-color: #f7fbff;
    padding-left: 26px;
}

.col-abrev {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--azul);
    background-color: rgba(0, 159, 227, 0.1);
    padding: 3px 9px;
    border-radius: 5px;
    text-align: center;
    justify-self: start;
    min-width: 50px;
}

.col-nombre {
    font-weight: 500;
    font-size: 0.95rem;
}

.col-depto {
    font-size: 0.85rem;
    color: #888;
    text-align: right;
}

/* Variante para los inactivos */
.tabla-inactivos {
    opacity: 0.7;
}

.tabla-inactivos .fila-profesor:hover {
    opacity: 1;
}

.tabla-inactivos .col-abrev {
    color: #888;
    background-color: var(--gris-claro);
}

/* =========================================
   TABLA DE AUSENCIAS
========================================= */

.tabla-ausencias {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--blanco);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    margin-top: 15px;
}

.tabla-ausencias thead {
    background-color: var(--gris-claro);
}

.tabla-ausencias th {
    text-align: left;
    padding: 12px 15px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    font-weight: 600;
}

.tabla-ausencias td {
    padding: 12px 15px;
    font-size: 0.9rem;
    border-top: 1px solid #eee;
    vertical-align: middle;
}

.tabla-ausencias tr:hover {
    background-color: #fafafa;
}

.tabla-ausencias .abrev {
    font-weight: 700;
    background-color: var(--gris-claro);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-right: 6px;
}

.tabla-ausencias .depto {
    font-size: 0.78rem;
    color: #999;
    margin-top: 2px;
}

.btn-borrar {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    padding: 4px;
}

.btn-borrar:hover {
    opacity: 1;
}




/* Layout con sidebar a la izquierda */
.layout-con-sidebar {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 160px);
}

/* Sidebar */
.sidebar {
    width: 240px;
    flex-shrink: 0;
    background-color: var(--blanco);
    border-right: 1px solid #e0e0e0;
    padding: 25px 20px;
    min-height: 100%;
}

.sidebar-nav h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gris-claro);
}

.sidebar-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-link {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: var(--negro);
    font-weight: 500;
    border-radius: 6px;
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
}

.sidebar-link:hover {
    background-color: var(--gris-claro);
    border-left-color: var(--azul);
    color: var(--azul);
}

.sidebar-link.activo {
    background-color: rgba(0, 159, 227, 0.1);
    border-left-color: var(--azul);
    color: var(--azul);
    font-weight: 600;
}

/* Contenido principal a la derecha del sidebar */
.contenido-con-sidebar {
    flex: 1;
    padding: 40px 50px;
}

.contenido-con-sidebar h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--negro);
}

.contenido-con-sidebar>p {
    color: #555;
    margin-bottom: 30px;
}

/* Placeholder calendario */
.calendario-placeholder {
    background-color: var(--blanco);
    border-radius: 12px;
    padding: 60px 40px;
    text-align: center;
    color: #888;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* =========================================
   GUARDIAS DE HOY
========================================= */

.barra-dia {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 20px 0 10px;
}

.navegacion-fecha {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-color: var(--blanco);
    border: 1px solid #ddd;
    color: var(--negro);
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-flecha:hover {
    background-color: var(--azul);
    color: var(--blanco);
    border-color: var(--azul);
}

.form-fecha input[type="date"] {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
}

.form-fecha input[type="date"]:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
}

.btn-hoy {
    padding: 8px 16px;
    border-radius: 8px;
    background-color: var(--gris-claro);
    color: var(--negro);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.btn-hoy:hover {
    background-color: var(--azul);
    color: var(--blanco);
}

/* Selector de turno */
.selector-turno {
    display: inline-flex;
    background-color: var(--blanco);
    border-radius: 10px;
    border: 1px solid #ddd;
    overflow: hidden;
}

.btn-turno {
    padding: 10px 22px;
    text-decoration: none;
    color: var(--negro);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.btn-turno:hover {
    background-color: var(--gris-claro);
}

.btn-turno.activo {
    background-color: var(--azul);
    color: var(--blanco);
}

.texto-fecha {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 25px;
    text-transform: capitalize;
}

/* Tabla de guardias por hora */
.tabla-guardias {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bloque-hora {
    background-color: var(--blanco);
    border-radius: 10px;
    padding: 18px 22px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    border-left: 5px solid var(--azul);
}

.bloque-hora-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gris-claro);
}

.etiqueta-hora {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--azul);
    background-color: rgba(0, 159, 227, 0.1);
    padding: 4px 12px;
    border-radius: 6px;
}

.contador {
    font-size: 0.85rem;
    color: #888;
}

.lista-guardias {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fila-guardia {
    display: grid;
    grid-template-columns: 60px 1fr 100px 90px;
    gap: 15px;
    align-items: center;
    padding: 8px 0;
    font-size: 0.95rem;
    border-bottom: 1px dashed #eee;
}

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

.fila-guardia .abrev {
    font-weight: 700;
    color: var(--negro);
    background-color: var(--gris-claro);
    padding: 3px 8px;
    border-radius: 4px;
    text-align: center;
    font-size: 0.85rem;
}

.fila-guardia .nombre {
    color: var(--negro);
    font-weight: 500;
}

.fila-guardia .depto {
    color: #888;
    font-size: 0.85rem;
}

.fila-guardia .puntos {
    text-align: right;
    font-weight: 600;
    color: var(--azul);
    font-size: 0.9rem;
}

.sin-guardias {
    color: #999;
    font-style: italic;
    font-size: 0.9rem;
    padding: 8px 0;
}

/* Alerta informativa */
.alerta-info {
    background-color: #e8f4fd;
    color: #1a5c85;
    border-left: 5px solid var(--azul);
}

/* =========================================
   TABLA A CUBRIR / CUBRE / CONFIRMACIÓN
========================================= */

.tabla-cubrir {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cabecera-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr 200px;
    gap: 25px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    font-weight: 600;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gris-claro);
}

.fila-cubrir {
    display: grid;
    grid-template-columns: 1fr 1fr 200px;
    gap: 25px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}

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

.col-confirmacion {
    display: flex;
    align-items: center;
}

.col-confirmacion .select-puntos {
    width: 100%;
}

.sin-confirmacion {
    color: #ccc;
    font-size: 1.2rem;
}


/* =========================================
   FICHA DE PROFESOR
========================================= */

.volver {
    display: inline-block;
    color: #888;
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.volver:hover {
    color: var(--azul);
}

.ficha-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    background-color: var(--blanco);
    padding: 22px 28px;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    border-left: 5px solid var(--azul);
    margin-bottom: 20px;
}

.ficha-identidad h2 {
    margin: 5px 0 3px;
    font-size: 1.5rem;
    color: var(--negro);
}

.ficha-abrev {
    font-weight: 700;
    background-color: rgba(0, 159, 227, 0.1);
    color: var(--azul);
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 0.85rem;
}

.ficha-depto {
    color: #888;
    font-size: 0.9rem;
    margin: 0;
}

.ficha-badges {
    display: flex;
    gap: 8px;
}

.badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-activo {
    background-color: #e6f7ec;
    color: #1a7f3c;
}

.badge-inactivo {
    background-color: #f5f5f5;
    color: #888;
}

.badge-sustituto {
    background-color: #fff4e0;
    color: #b86b00;
}

.titulo-seccion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 35px;
    margin-bottom: 15px;
    font-size: 1.15rem;
    color: var(--negro);
    border-bottom: 2px solid var(--gris-claro);
    padding-bottom: 8px;
}

.subtitulo-turno {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

/* Totales de guardias */
.totales-guardias {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.total-box {
    background-color: var(--blanco);
    border-radius: 10px;
    padding: 16px 22px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.total-num {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--azul);
    line-height: 1;
}

.total-lbl {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-top: 4px;
}

.detalle-guardias {
    margin-top: 15px;
    background-color: var(--blanco);
    border-radius: 10px;
    padding: 12px 20px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.detalle-guardias summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--azul);
}

/* Tabla simple (para guardias realizadas) */
.tabla-simple {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.tabla-simple th {
    text-align: left;
    padding: 10px 12px;
    font-size: 0.78rem;
    text-transform: uppercase;
    color: #888;
    border-bottom: 2px solid var(--gris-claro);
}

.tabla-simple td {
    padding: 10px 12px;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
}

/* Tabla de horario */
.tabla-horario-wrapper {
    overflow-x: auto;
    background-color: var(--blanco);
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    padding: 5px;
    margin-bottom: 15px;
}

.tabla-horario {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    table-layout: fixed;
    /* ← CLAVE */
}

.tabla-horario th {
    padding: 10px 8px;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #888;
    background-color: var(--gris-claro);
    text-align: center;
}

.tabla-horario th:first-child {
    width: 50px;
}

.tabla-horario td {
    padding: 8px 6px;
    text-align: center;
    border: 1px solid #f0f0f0;
    font-size: 0.82rem;
    vertical-align: middle;
    min-height: 40px;
}

.tabla-horario td .vacio {
    color: #ddd;
}

.tabla-horario td .celda-g {
    display: inline-block;
    background-color: var(--amarillo);
    color: var(--negro);
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 0.85rem;
}

.tabla-horario td .celda-dgo {
    display: inline-block;
    background-color: rgba(230, 0, 126, 0.08);
    color: var(--negro);
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 0.78rem;
    line-height: 1.2;
}

.tabla-horario td .celda-dgo small {
    color: #888;
    font-size: 0.7rem;
}

/* Botones pequeños (ausencias y sustituto) */
.btn-mini {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    background-color: var(--gris-claro);
    color: var(--negro);
    text-decoration: none;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-mini:hover {
    background-color: var(--azul);
    color: var(--blanco);
}

.btn-mini-primario {
    background-color: var(--azul);
    color: var(--blanco);
}

.btn-mini-primario:hover {
    background-color: #0080b8;
}

.btn-mini-peligro {
    background-color: rgba(230, 0, 126, 0.1);
    color: var(--rosa);
}

.btn-mini-peligro:hover {
    background-color: var(--rosa);
    color: var(--blanco);
}

.form-sust-inline {
    margin-top: 10px;
    padding: 12px;
    background-color: var(--gris-claro);
    border-radius: 8px;
    font-size: 0.85rem;
}

.form-sust-inline label {
    display: block;
    margin-bottom: 6px;
    cursor: pointer;
}

.form-sust-inline select,
.form-sust-inline input[type="text"] {
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85rem;
}

.form-sust-inline input[type="radio"] {
    margin-right: 6px;
}

.form-sust-inline button {
    margin-top: 6px;
}

/* =========================================
   FILTRO DE AUSENCIAS
========================================= */

.form-filtro-ausencias {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    background-color: var(--blanco);
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
}

.form-filtro-ausencias label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--negro);
}

.form-filtro-ausencias select {
    flex: 1;
    min-width: 250px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    background-color: var(--blanco);
}

.form-filtro-ausencias select:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
}


/* =========================================
   FORMULARIOS Y ALERTAS
========================================= */

.form-importar {
    background-color: var(--blanco);
    border-radius: 12px;
    padding: 30px 35px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    max-width: 640px;
    margin-top: 20px;
}

.form-importar fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.form-importar legend {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--azul);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gris-claro);
    width: 100%;
}

.campo {
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
}

.campo label {
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--negro);
}

.campo input[type="text"],
.campo input[type="date"],
.campo input[type="file"],
.campo select,
.campo textarea {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    background-color: var(--blanco);
}

.campo input[type="text"]:focus,
.campo input[type="date"]:focus,
.campo input[type="file"]:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
}

.campo textarea {
    resize: vertical;
    min-height: 70px;
}

.campo small {
    color: #777;
    margin-top: 4px;
    font-size: 0.85rem;
}

.campo code {
    background-color: var(--gris-claro);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85rem;
}

.campo-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
}

.campo-fila .campo {
    margin-bottom: 0;
}

.form-actions {
    margin-top: 10px;
}

.btn-primario {
    background-color: var(--azul);
    color: var(--blanco);
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-primario:hover {
    background-color: #0080b8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 159, 227, 0.3);
}

/* ===== Alertas ===== */

.alerta {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 500;
}

.alerta-ok {
    background-color: #e6f7ec;
    color: #1a7f3c;
    border-left: 5px solid #2ecc71;
}

.alerta-error {
    background-color: #fdecea;
    color: #b71c1c;
    border-left: 5px solid #e74c3c;
}

/* ===== Resumen / errores de importación ===== */

.resumen-import,
.errores-import {
    background-color: var(--blanco);
    border-radius: 12px;
    padding: 20px 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    max-width: 640px;
}

.resumen-import h3,
.errores-import h3 {
    margin-bottom: 12px;
    color: var(--azul);
    font-size: 1.1rem;
}

.resumen-import ul,
.errores-import ul {
    list-style: none;
    padding: 0;
}

.resumen-import li,
.errores-import li {
    padding: 6px 0;
    border-bottom: 1px solid var(--gris-claro);
    font-size: 0.95rem;
}

.resumen-import li:last-child,
.errores-import li:last-child {
    border-bottom: none;
}

.errores-import h3 {
    color: #b71c1c;
}

.errores-import li {
    color: #7a1c1c;
    font-size: 0.9rem;
}

/* =========================================
   BUSCADOR DE PROFESORES
========================================= */

.form-busqueda {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 20px 0 10px;
    flex-wrap: wrap;
}

.form-busqueda input[type="text"] {
    flex: 1;
    min-width: 220px;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    background-color: var(--blanco);
}

.form-busqueda input[type="text"]:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
}

.btn-secundario {
    display: inline-block;
    padding: 10px 18px;
    background-color: var(--gris-claro);
    color: var(--negro);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.btn-secundario:hover {
    background-color: #e0e0e0;
}

.contador-resultados {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.titulo-seccion-inactivos {
    margin-top: 40px;
    margin-bottom: 8px;
    font-size: 1.1rem;
    color: #666;
}

.texto-ayuda {
    color: #888;
    font-size: 0.85rem;
    margin-bottom: 15px;
}

/* =========================================
   AVISO DE AUSENCIAS VENCIDAS
========================================= */

.aviso-vencidas {
    background-color: #fff8e6;
    border-left: 5px solid var(--amarillo);
    border-radius: 10px;
    padding: 20px 25px;
    margin-bottom: 25px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.aviso-vencidas h3 {
    color: #a06800;
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.aviso-vencidas>p {
    color: #7a5200;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.aviso-vencida {
    background-color: var(--blanco);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.aviso-vencida:last-child {
    margin-bottom: 0;
}

.aviso-info {
    font-size: 0.9rem;
    color: var(--negro);
}

.aviso-fechas {
    color: #888;
}

.aviso-sust {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: #555;
}

.aviso-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.form-extender {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.form-extender input[type="date"] {
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85rem;
}

/* Detalle de extender en la tabla */
.acciones-fila {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.detalle-extender {
    display: inline-block;
    position: relative;
}

.detalle-extender summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

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

.detalle-extender[open] {
    display: block;
}

.detalle-extender form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
    padding: 10px;
    background-color: var(--gris-claro);
    border-radius: 8px;
}

/* =========================================
   ADMIN - TARJETAS
========================================= */

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

.admin-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background-color: var(--blanco);
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    border-left: 5px solid var(--azul);
    text-decoration: none;
    color: var(--negro);
    transition: all 0.2s ease;
}

.admin-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 159, 227, 0.15);
}

.admin-card-icono {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.admin-card-texto h3 {
    margin: 0 0 6px;
    font-size: 1.1rem;
    color: var(--azul);
}

.admin-card-texto p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
}

.admin-card-peligro {
    border-left-color: var(--rosa);
}

.admin-card-peligro:hover {
    box-shadow: 0 8px 22px rgba(230, 0, 126, 0.15);
}

.admin-card-peligro .admin-card-texto h3 {
    color: var(--rosa);
}

/* =========================================
   SELECTOR DE PROFESOR (admin_horario)
========================================= */

.form-selector-profesor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 10px;
    background-color: var(--blanco);
    padding: 14px 20px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
}

.form-selector-profesor label {
    font-weight: 600;
    color: var(--negro);
}

.form-selector-profesor select {
    flex: 1;
    min-width: 260px;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    background-color: var(--blanco);
}

.form-selector-profesor select:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
}

/* =========================================
   TABLA DE HORARIO EDITABLE
========================================= */

.tabla-horario-editable td.celda-editable {
    position: relative;
    min-height: 44px;
    height: 44px;
    padding: 4px 6px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.tabla-horario-editable td.celda-editable .accion-celda {
    border: none;
    cursor: pointer;
    background: transparent;
    font-family: inherit;
    border-radius: 5px;
    transition: all 0.15s ease;
    line-height: 1;
}

/* Botón "+" cuando la celda está vacía */
.tabla-horario-editable td.celda-editable .accion-add {
    color: #ccc;
    font-size: 1.2rem;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tabla-horario-editable td.celda-editable:hover .accion-add {
    color: var(--azul);
    background-color: rgba(0, 159, 227, 0.1);
}

/* Botón "✕" cuando hay una G */
.tabla-horario-editable td.celda-editable .accion-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    color: #b71c1c;
    background-color: rgba(230, 0, 126, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.tabla-horario-editable td.celda-editable:hover .accion-del {
    opacity: 1;
}

.tabla-horario-editable td.celda-editable .accion-del:hover {
    background-color: var(--rosa);
    color: var(--blanco);
}

/* Candado para celdas DGO */
.tabla-horario-editable td.celda-editable .candado {
    display: block;
    font-size: 0.65rem;
    opacity: 0.35;
    margin-top: 2px;
}

/* Feedback visual */
.tabla-horario-editable td.flash-ok {
    background-color: #e6f7ec !important;
    box-shadow: 0 0 0 2px #2ecc71 inset;
}

.tabla-horario-editable td.flash-error {
    background-color: #fdecea !important;
    box-shadow: 0 0 0 2px #e74c3c inset;
}

/* Botón deshabilitado */
.tabla-horario-editable td.celda-editable .accion-celda:disabled {
    opacity: 0.3;
    cursor: wait;
}

/* =========================================
   BOTÓN IMPRIMIR PARTE
========================================= */

.btn-imprimir-parte {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background-color: var(--negro);
    color: var(--blanco);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-imprimir-parte:hover {
    background-color: var(--azul);
}

/* =========================================
   PARTE DE GUARDIAS
========================================= */

.parte-body {
    background-color: #f0f0f0;
    padding: 30px 20px 60px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #000;
}

.parte-acciones {
    max-width: 900px;
    margin: 0 auto 20px;
    text-align: center;
}

.parte-acciones .btn-primario,
.parte-acciones .btn-secundario {
    display: inline-block;
    margin: 0 5px;
}

.parte-hoja {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px 35px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.parte-cabecera {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    border-bottom: 2px solid #000;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.parte-logo-izq img {
    height: 70px;
    width: auto;
}

.parte-logo-der img {
    height: 70px;
    width: 200px;
}

.parte-titulo {
    text-align: center;
}

.parte-titulo h1 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.parte-titulo h2 {
    margin: 4px 0;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.parte-titulo .parte-fecha {
    margin: 4px 0 0;
    font-size: 0.95rem;
}

.parte-titulo .parte-curso {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: #555;
}

/* ---- Tabla del parte ---- */

.parte-tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.parte-tabla th,
.parte-tabla td {
    border: 1px solid #000;
    padding: 10px 6px;
    font-size: 0.85rem;
    vertical-align: top;
    height: 42px;
}

/* Columna Sesión: fondo gris y centrado */
.parte-tabla td.parte-sesion {
    background-color: #fafafa;
    text-align: center;
    vertical-align: middle;
    /* Por defecto, sin líneas horizontales */
    border-top: none;
    border-bottom: none;
}

/* La PRIMERA fila del tramo: SÍ tiene border-top */
.parte-tabla tr.fila-primera-tramo td.parte-sesion {
    border-top: 1px solid #000;
}

/* La ÚLTIMA fila del tramo: SÍ tiene border-bottom */
.parte-tabla tr.fila-ultima-tramo td.parte-sesion {
    border-bottom: 1px solid #000;
}

/* Franjas horarias en la celda de sesión */
.parte-sesion-codigo {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.parte-sesion-hora {
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
    color: #555;
    line-height: 1.2;
}

/* =========================================
   IMPRESIÓN
========================================= */

@media print {
    @page {
        size: A4 portrait;
        margin: 12mm;
    }

    .parte-acciones {
        display: none !important;
    }

    body.parte-body {
        background-color: #fff;
        padding: 0;
        margin: 0;
    }

    .parte-hoja {
        max-width: 100%;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
    }

    .parte-tabla {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: fixed;
    }

    .parte-tabla th,
    .parte-tabla td {
        border: 1px solid #000 !important;
    }

 /* Columna Sesión: sin líneas horizontales por defecto */
.parte-tabla td.parte-sesion {
    border-top: none !important;
    border-bottom: none !important;
}

/* Primera fila del tramo: sí border-top */
.parte-tabla tr.fila-primera-tramo td.parte-sesion {
    border-top: 1px solid #000 !important;
}

/* Última fila del tramo: sí border-bottom */
.parte-tabla tr.fila-ultima-tramo td.parte-sesion {
    border-bottom: 1px solid #000 !important;
}

    /* Repetir cabecera en cada página */
    .parte-tabla thead {
        display: table-header-group;
    }

    /* Evitar que una fila se parta entre dos páginas */
    .parte-tabla tr {
        page-break-inside: avoid;
    }

    /* Fondos */
    .parte-tabla th {
        background-color: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .parte-sesion {
        background-color: #fafafa !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .parte-tabla th,
    .parte-tabla td {
        color: #000 !important;
    }
}
/* =========================================
   TABLA ACTIVAR/DESACTIVAR PROFESORES
========================================= */

.fila-estado {
    display: grid;
    grid-template-columns: 90px 1fr 160px 180px 120px;
    gap: 15px;
    align-items: center;
}

.fila-cabecera.fila-estado {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777;
    font-weight: 700;
}

.fila-estado .badge {
    margin-right: 4px;
}

/* =========================================
   SISTEMA DE PUNTOS - SELECT EN GUARDIAS HOY
========================================= */

.cubre-fila {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.cubre-fila .form-asignar {
    flex: 1;
    min-width: 180px;
}

.select-puntos {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--blanco);
}

.select-puntos.pts-pendiente {
    border-color: #ddd;
    color: #888;
}

.select-puntos.pts-verde {
    border-color: #2ecc71;
    color: #1a7f3c;
    background-color: #e6f7ec;
}

.select-puntos.pts-amarillo {
    border-color: #f2d600;
    color: #a06800;
    background-color: #fff8e6;
}

.select-puntos.pts-rojo {
    border-color: #e74c3c;
    color: #b71c1c;
    background-color: #fdecea;
}

.select-puntos.pts-negro {
    border-color: #000;
    color: #fff;
    background-color: #333;
}

.select-puntos.flash-ok {
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.4);
}

/* =========================================
   BADGES DE PUNTOS EN PROFESOR.PHP
========================================= */

.badge-puntos {
    display: inline-block;
    min-width: 30px;
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.8rem;
    text-align: center;
}

.badge-pendiente {
    background-color: #f5f5f5;
    color: #888;
}

.badge-verde {
    background-color: #e6f7ec;
    color: #1a7f3c;
}

.badge-amarillo {
    background-color: #fff8e6;
    color: #a06800;
}

.badge-rojo {
    background-color: #fdecea;
    color: #b71c1c;
}

.badge-negro {
    background-color: #333;
    color: #fff;
}

/* =========================================
   INDICADORES DEL CALENDARIO
========================================= */

.cal-indicador {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2;
}

.cal-ind-ok {
    color: #2ecc71 !important;
}

.cal-ind-pendiente {
    color: #e67e22 !important;
}


/* =========================================
   SITUACIÓN ACTUAL EN FICHA DE PROFESOR
========================================= */

.situacion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}

.situacion-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--blanco);
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    border-left: 5px solid #ccc;
    font-size: 0.9rem;
    color: var(--negro);
    flex-wrap: nowrap;   /* ← evita que se parta en dos líneas */
}

.situacion-card > div {
    flex: 1;              /* ← el texto ocupa el espacio restante */
    min-width: 0;         /* ← permite que se ajuste bien */
}

.situacion-icono {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.situacion-card strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.situacion-icono {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.situacion-naranja { border-left-color: #e67e22; }
.situacion-azul    { border-left-color: var(--azul); }
.situacion-rojo    { border-left-color: #e74c3c; }
.situacion-negro   { border-left-color: #333; }
.situacion-gris    { border-left-color: #bbb; }

/* =========================================
   CREAR AUSENCIA RÁPIDA DESDE GUARDIAS HOY
========================================= */

.bloque-hora-acciones {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-add-ausencia {
    background-color: rgba(0, 159, 227, 0.1);
    color: var(--azul);
    font-weight: 700;
}

.btn-add-ausencia:hover {
    background-color: var(--azul);
    color: var(--blanco);
}

.sin-ausencias {
    color: #999;
    font-style: italic;
    font-size: 0.9rem;
    padding: 6px 0;
}

.form-ausencia-rapida {
    margin-top: 12px;
    padding: 12px;
    background-color: var(--gris-claro);
    border-radius: 8px;
    font-size: 0.85rem;
}

.form-ausencia-rapida label {
    display: block;
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 4px;
}

.form-ausencia-rapida select,
.form-ausencia-rapida input[type="text"] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.form-ausencia-botones {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* =========================================
   LOGIN
========================================= */

.login-body {
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.login-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 40px 45px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-logo img {
    width: 100px;
    height: auto;
    margin-bottom: 15px;
}

.login-card h1 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--negro);
}

.login-sub {
    color: #888;
    font-size: 0.9rem;
    margin: 5px 0 25px;
}

.login-form {
    text-align: left;
}

.login-form .campo {
    margin-bottom: 18px;
}

.login-form .campo label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--negro);
}

.login-form .campo input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}

.login-form .campo input:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
}

.login-form .form-actions {
    text-align: center;
    margin-top: 10px;
}

.login-form .btn-primario {
    width: 100%;
}

/* =========================================
   BLOQUES DE DÍA EN GUARDIAS PENDIENTES
========================================= */

.bloque-dia-pendiente {
    background-color: var(--blanco);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 20px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    border-left: 5px solid var(--amarillo);
}

.bloque-dia-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gris-claro);
}

.bloque-dia-cabecera h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--negro);
}

/* =========================================
   USUARIO EN EL HEADER
========================================= */

.header-usuario {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    padding-right: 20px;
}

.header-user-nombre {
    font-weight: 600;
    color: var(--negro);
    font-size: 0.9rem;
}

.header-logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--negro);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.header-logout:hover {
    background-color: rgba(255, 255, 255, 0.3);
}