/* ============================================================
   CONFIGURACIÓN GENERAL
   ============================================================ */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f4f6f9;
    color: #202124;
}

.contenedor {
    width: 94%;
    max-width: 1250px;
    margin: 35px auto 50px;
}


/* ============================================================
   ENCABEZADO
   ============================================================ */

h1 {
    text-align: center;
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: #202124;
}



/* ============================================================
   TARJETA DEL RELOJ
   ============================================================ */

.tarjeta-reloj {
    width: 100%;
    max-width: 650px;
    margin: 25px auto 40px;
    padding: 25px 35px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;

    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fafc 100%
    );

    border: 1px solid #e5e7eb;
    border-radius: 24px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);

    position: relative;
    overflow: hidden;
}

.tarjeta-reloj::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        #3478f6,
        #6c5ce7
    );
}

.reloj-icono {
    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;
    background: #eef4ff;

    font-size: 32px;

    box-shadow:
        0 5px 15px rgba(52, 120, 246, 0.12);

    flex-shrink: 0;
}

.reloj-contenido {
    text-align: left;
}

.reloj-titulo {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #6b7280;
    margin-bottom: 3px;
}

#reloj {
    font-size: 58px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: 3px;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

#fecha {
    margin-top: 8px;
    font-size: 17px;
    font-weight: 600;
    color: #6b7280;
}


/* ============================================================
   GRID DE EMPLEADOS
   ============================================================ */

.empleados {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(270px, 1fr));

    gap: 22px;
}


/* ============================================================
   TARJETA DE EMPLEADO
   ============================================================ */

.empleado {
    position: relative;

    background: #ffffff;

    border: 2px solid #e5e7eb;
    border-radius: 20px;

    padding: 24px 22px 22px;

    text-align: center;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;

    overflow: hidden;
}

.empleado::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: #d1d5db;
}

.empleado:hover {
    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.10);
}


/* ============================================================
   NOMBRE
   ============================================================ */

.empleado h2 {
    margin: 4px 0 18px;

    font-size: 16px;
    font-weight: 700;

    color: #1f2937;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.indicador-estado {
    flex: 0 0 auto;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.indicador-completo {
    color: #0d6efd;
}

.indicador-pendiente {
    color: #16803c;
}

.indicador-novedad {
    color: #c62828;
}

.cargo-empleado {
    margin: -13px 0 14px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}


/* ============================================================
   ESTADO
   ============================================================ */

.estado {
    display: inline-block;

    padding: 6px 14px;

    border-radius: 30px;

    background: #f1f3f5;
    color: #6b7280;

    font-size: 12px;
    font-weight: 700;

    margin-bottom: 12px;
}


/* ============================================================
   HORA DE INGRESO
   ============================================================ */

.hora,
.hora-salida {
    display: block;
    width: 100%;

    margin: 6px 0;
    padding: 7px 10px;

    border-radius: 6px;

    background: #f1f3f5;

    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;

    transition: 0.2s ease;
}

.hora[hidden],
.hora-salida[hidden] {
    display: none !important;
}

.hora {
    color: #374151;
}


/* ============================================================
   TARJETA PRESENTE
   ============================================================ */

.empleado.marcado {
    border-color: #34c759;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f0fff4 100%
    );
}

.empleado.marcado::before {
    background: #34c759;
}

.empleado.marcado .estado {
    background: #d9fbe3;
    color: #16803c;
}

.empleado.marcado .hora {
    color: #16803c;
    font-weight: 700;
}


/* ============================================================
   TARJETA CON NOVEDAD
   ============================================================ */

.empleado.con-novedad {
    border-color: #ff5c5c;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fff2f2 100%
    );
}

.empleado.con-novedad::before {
    background: #ff4d4d;
}

.empleado.con-novedad .estado {
    background: #ffe0e0;
    color: #c62828;
}

.empleado.con-novedad .hora {
    color: #c62828;
}


/* ============================================================
   SELECT DE NOVEDAD
   ============================================================ */

.novedad {
    width: 100%;

    padding: 9px 11px;

    border: 1px solid #d9dde3;
    border-radius: 10px;

    background: #f9fafb;
    color: #374151;

    font-size: 12px;

    outline: none;
    cursor: pointer;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.novedad:hover {
    border-color: #aeb4bd;
}

.novedad:focus {
    border-color: #4f8cff;

    box-shadow:
        0 0 0 3px rgba(
            79,
            140,
            255,
            0.15
        );
}
.novedad:disabled { cursor: not-allowed; opacity: .62; }

.empleado.con-novedad .novedad {
    text-align: center;
    text-align-last: center;
}


/* ============================================================
   HORAS DE ASISTENCIA
   ============================================================ */

.hora-salida {
    color: #6c757d;
}

.empleado.con-salida {
    border-color: #0d6efd;
}

.empleado.con-salida::before {
    background: #0d6efd;
}

.empleado.con-salida .hora-salida {
    background: #e7f1ff;
    color: #0d6efd;
    font-weight: 700;
}

.turno-empleado {
    display: inline-block;
    margin: 8px 0 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 11px;
    font-weight: 600;
}

.empleado.salida-anticipada,
.empleado.salida-anticipada.marcado,
.empleado.salida-anticipada.con-salida,
.empleado.salida-anticipada.con-novedad {
    border-color: #f28c28;
    box-shadow: 0 0 0 2px rgba(242, 140, 40, 0.18), 0 5px 15px rgba(0, 0, 0, 0.06);
}

.empleado.salida-anticipada::before {
    background: #f28c28;
}


/* ============================================================
   BOTONES DE ASISTENCIA
   ============================================================ */

.botones-asistencia {
    display: flex;

    width: 100%;

    gap: 8px;

    margin-top: 12px;
}


/*
   IMPORTANTE:
   Los dos botones utilizan exactamente la misma distribución.
   flex: 1 hace que ambos tengan el mismo ancho.
*/

.btn-ingreso,
.btn-salida {
    flex: 1 1 0;

    min-width: 0;
    width: 0;

    padding: 10px 6px;

    border: none;
    border-radius: 7px;

    color: white;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}


/* ============================================================
   BOTÓN INGRESO
   ============================================================ */

.btn-ingreso {
    background: #198754;
}

.btn-ingreso:hover:not(:disabled) {
    background: #157347;

    transform: translateY(-1px);
}

.btn-ingreso:active:not(:disabled) {
    transform: scale(0.98);
}

.btn-ingreso:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}


/* ============================================================
   INGRESO REGISTRADO
   ============================================================ */

.btn-ingreso.registrado {
    background: #6c757d;

    cursor: default;
}

.btn-ingreso.registrado:hover {
    background: #6c757d;

    transform: none;
    box-shadow: none;
}


/* ============================================================
   BOTÓN SALIDA
   ============================================================ */

.btn-salida {
    background: #0d6efd;
}

.btn-salida:hover:not(:disabled) {
    background: #0b5ed7;

    transform: translateY(-1px);
}

.btn-salida:active:not(:disabled) {
    transform: scale(0.98);
}

.btn-salida:disabled {
    background: #adb5bd;

    cursor: not-allowed;
    opacity: 0.8;
}


/* ============================================================
   SALIDA REGISTRADA
   ============================================================ */

.btn-salida.registrado {
    background: #3478d9;

    cursor: default;
}

.btn-salida.registrado:hover {
    background: #3478d9;

    transform: none;
    box-shadow: none;
}


/* ============================================================
   MENSAJES
   ============================================================ */

.mensaje {
    margin: 22px auto 0;

    padding: 16px 18px;

    max-width: 600px;

    border-radius: 12px;

    text-align: center;

    font-size: 15px;
    line-height: 1.5;
}

.mensaje.error {
    background: #fff0f0;
    color: #b42318;

    border: 1px solid #ffcccc;
}

.mensaje.exitoso {
    background: #ecfdf3;
    color: #18794e;

    border: 1px solid #b7ebc6;
}


/* ============================================================
   TABLA
   ============================================================ */

#tabla-registros {
    margin-top: 35px;

    overflow-x: auto;
}

#tabla-registros h2 {
    text-align: center;

    margin-bottom: 18px;

    font-size: 22px;
}

table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    overflow: hidden;

    background: white;

    border-radius: 14px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.06);
}

th {
    padding: 14px;

    background: #202124;
    color: white;

    font-size: 14px;
    font-weight: 700;
}

td {
    padding: 13px;

    border-bottom: 1px solid #eceff1;

    text-align: center;

    font-size: 14px;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background: #f8fafc;
}


/* ============================================================
   NAVEGACIÓN SUPERIOR
   ============================================================ */

.navegacion-superior {
    width: 92%;
    max-width: 1200px;

    margin: 20px auto 0;

    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-resumen {
    display: inline-block;

    padding: 10px 20px;

    background: #222;
    color: white;

    border-radius: 10px;

    text-decoration: none;

    font-weight: 600;

    transition: 0.2s;
}

.btn-resumen:hover {
    opacity: 0.85;
}


/* ============================================================
   RESUMEN
   ============================================================ */

.contenedor-resumen {
    width: 92%;
    max-width: 1200px;

    margin: 40px auto;
}

.encabezado-resumen {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 25px;
}

.acciones-encabezado-resumen { display: flex; gap: 10px; }

.encabezado-resumen h1 {
    margin: 0;
}

.encabezado-resumen p {
    margin-top: 6px;

    color: #777;
}


/* ============================================================
   BOTONES DEL RESUMEN
   ============================================================ */

.btn-volver,
.btn-filtrar,
.btn-limpiar,
.btn-exportar-excel {
    display: inline-block;

    padding: 10px 18px;

    border-radius: 10px;

    text-decoration: none;

    font-weight: 600;

    border: none;

    cursor: pointer;
}

.btn-volver {
    background: #eee;
    color: #222;
}

.btn-filtrar {
    background: #222;
    color: white;
}

.btn-limpiar {
    background: #eee;
    color: #222;
}

.btn-exportar-excel { background: #198754; color: #fff; }
.btn-exportar-excel:hover { background: #157347; }


/* ============================================================
   FILTRO DE FECHAS
   ============================================================ */

.filtro-fechas {
    background: white;

    border-radius: 14px;

    padding: 20px;

    margin-bottom: 25px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.08);
}

.ayuda-filtro {
    margin: 0 0 16px;
    color: #6b7280;
    font-size: 14px;
}

.filtro-fechas form {
    display: flex;

    align-items: end;

    gap: 18px;

    flex-wrap: wrap;
}

.campo-fecha {
    display: flex;

    flex-direction: column;

    gap: 6px;
}

.campo-fecha label {
    font-size: 14px;
    font-weight: 600;
}

.campo-fecha input {
    padding: 10px 12px;

    border: 1px solid #ddd;

    border-radius: 8px;

    font-size: 14px;
}

.campo-busqueda {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    gap: 6px;
}

.campo-busqueda label {
    font-size: 14px;
    font-weight: 600;
}

.campo-busqueda input {
    min-height: 39px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.campo-orden {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    gap: 6px;
}

.campo-orden label {
    font-size: 14px;
    font-weight: 600;
}

.campo-orden select {
    min-height: 39px;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
}

.acciones-filtro {
    display: flex;

    gap: 10px;
}

.resumen-totales {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 25px;
}

.tarjeta-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    color: #4b5563;
}

.tarjeta-total strong {
    color: #202124;
    font-size: 24px;
}

.total-presente strong {
    color: #16803c;
}

.total-novedad strong {
    color: #c62828;
}

.total-horas-extra strong { color: #f28c28; }
.total-horas-pendientes strong { color: #c62828; }
.totales-empleado-horas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-left: auto; font-size: 13px; }

@media (max-width: 900px) {
    .resumen-totales { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .totales-empleado-horas { width: 100%; margin-left: 0; }
}


/* ============================================================
   BLOQUE DE EMPLEADO - RESUMEN
   ============================================================ */

.bloque-empleado {
    background: white;

    border-radius: 14px;

    padding: 20px;

    margin-bottom: 25px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.08);
}

.titulo-empleado {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 15px;
}

.titulo-empleado h2 {
    margin: 0;
}

.identidad-empleado { display: grid; gap: 3px; }
.cargo-resumen { color: #64748b; font-size: 13px; font-weight: 600; }

.cantidad-registros {
    background: #f1f1f1;

    padding: 5px 10px;

    border-radius: 20px;

    font-size: 13px;

    color: #666;
}

.tabla-contenedor {
    overflow-x: auto;
}

.bloque-empleado table {
    width: 100%;

    border-collapse: collapse;
}

.bloque-empleado th,
.bloque-empleado td {
    padding: 11px 14px;

    text-align: left;

    border-bottom: 1px solid #eee;
}

.bloque-empleado th {
    font-weight: 600;
}


/* ============================================================
   ESTADOS DEL RESUMEN
   ============================================================ */

.estado-presente {
    color: #16803c;

    font-weight: 600;
}

.estado-ausente {
    color: #c62828;

    font-weight: 600;
}

.estado-programado { color: #a16207; font-weight: 700; }
.bloque-empleado table tr.fila-fecha-pasada td { background-color: #e8f5e9; }
.btn-eliminar-programacion, .btn-limpiar-asistencias { padding: 6px 9px; border: 0; border-radius: 7px; background: #fee2e2; color: #b91c1c; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.btn-eliminar-programacion:hover, .btn-limpiar-asistencias:hover { background: #fecaca; }
.aviso-programacion-resumen { margin: 0 0 16px; padding: 11px 14px; border-radius: 9px; background: #ecfdf5; color: #166534; font-weight: 600; }

.sin-registros-empleado {
    padding: 15px;

    background: #f8f8f8;

    border-radius: 8px;

    color: #777;

    text-align: center;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {

    .contenedor {
        width: 92%;

        margin-top: 25px;
    }

    h1 {
        font-size: 27px;
    }


    .empleados {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .empleado {
        padding: 21px 18px;
    }
}


@media (max-width: 600px) {
    .contenedor-resumen {
        width: 94%;
        margin: 22px auto;
    }

    .encabezado-resumen {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .encabezado-resumen h1 {
        text-align: left;
        font-size: 24px;
    }

    .encabezado-resumen p {
        margin-bottom: 0;
    }

    .filtro-fechas {
        padding: 14px;
    }

    .filtro-fechas form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .campo-fecha {
        min-width: 0;
    }

    .campo-fecha input {
        width: 100%;
        min-width: 0;
        padding: 9px 6px;
        font-size: 13px;
    }

    .campo-busqueda {
        grid-column: 1 / -1;
    }

    .campo-busqueda input {
        width: 100%;
    }

    .acciones-filtro {
        grid-column: 1 / -1;
    }

    .acciones-filtro > * {
        flex: 1;
        text-align: center;
        padding: 10px 8px;
        font-size: 14px;
    }

    .resumen-totales {
        gap: 8px;
    }

    .tarjeta-total {
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 12px 6px;
        text-align: center;
        font-size: 12px;
    }

    .tarjeta-total strong {
        font-size: 21px;
    }

    .bloque-empleado {
        padding: 14px;
    }

    .titulo-empleado {
        align-items: flex-start;
        gap: 8px;
    }

    .titulo-empleado h2 {
        font-size: 18px;
    }

    .cantidad-registros {
        flex: 0 0 auto;
        font-size: 11px;
    }

    .tabla-contenedor {
        overflow: visible;
    }

    .bloque-empleado table {
        display: block;
        width: 100%;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .bloque-empleado thead {
        display: none;
    }

    .bloque-empleado tbody {
        display: grid;
        gap: 10px;
    }

    .bloque-empleado tbody tr {
        display: block;
        padding: 5px 8px;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
    }

    .bloque-empleado tbody td {
        display: grid;
        grid-template-columns: minmax(95px, 0.8fr) minmax(0, 1.2fr);
        gap: 8px;
        padding: 8px 2px;
        border-bottom: 1px solid #eee;
        text-align: left;
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .bloque-empleado tbody td::before {
        content: attr(data-label);
        color: #6b7280;
        font-weight: 600;
    }

    .bloque-empleado tbody td:last-child {
        border-bottom: 0;
    }
}


@media (max-width: 600px) {

    .empleado {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "nombre nombre"
            "cargo cargo"
            "estado estado"
            "ingreso salida"
            "novedad novedad"
            "acciones acciones";
        gap: 8px 10px;
        padding: 16px 14px 14px;
        border-radius: 14px;
        text-align: left;
    }

    .empleado.con-novedad {
        grid-template-areas:
            "nombre nombre"
            "cargo cargo"
            "estado estado"
            "novedad novedad"
            "acciones acciones";
    }

    .empleado h2 {
        grid-area: nombre;
        justify-content: flex-start;
        margin: 2px 0 0;
        font-size: 18px;
    }

    .empleado .cargo-empleado {
        grid-area: cargo;
        margin: -4px 0 0;
    }

    .empleado .estado {
        grid-area: estado;
        justify-self: start;
        margin: 0;
    }

    .empleado .hora {
        grid-area: ingreso;
    }

    .empleado .hora-salida {
        grid-area: salida;
    }

    .empleado .hora,
    .empleado .hora-salida {
        margin: 0;
        padding: 7px 6px;
        font-size: 12px;
        white-space: nowrap;
    }

    .empleado .novedad {
        grid-area: novedad;
    }

    .empleado .botones-asistencia {
        grid-area: acciones;
        margin-top: 0;
    }

    .empleado.con-novedad .botones-asistencia {
        grid-area: acciones;
        align-self: end;
    }

    .tarjeta-reloj {
        padding: 22px;

        gap: 16px;

        border-radius: 20px;
    }

    .reloj-icono {
        width: 52px;
        height: 52px;

        font-size: 25px;

        border-radius: 15px;
    }

    #reloj {
        font-size: 42px;

        letter-spacing: 2px;
    }

    #fecha {
        font-size: 15px;
    }

    .reloj-titulo {
        font-size: 11px;

        letter-spacing: 1.5px;
    }
}


@media (max-width: 500px) {

    .botones-asistencia {
        gap: 8px;
    }

    .btn-ingreso,
    .btn-salida {
        flex: 1 1 0;

        width: 0;

        font-size: 11px;
        padding: 10px 4px;
    }
}


@media (min-width: 1200px) {

    .empleados {
        grid-template-columns:
            repeat(3, 1fr);
    }
}
.contenedor-ajustes { width: 92%; max-width: 1200px; margin: 32px auto; }
.encabezado-ajustes { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.encabezado-ajustes h1 { margin: 0; }
.encabezado-ajustes p { color: #777; margin: 6px 0 0; }
.acciones-ajustes { display: flex; gap: 10px; }
.btn-ajustes, .btn-ajustes-secundario { display: inline-block; border: 0; border-radius: 9px; padding: 9px 14px; text-decoration: none; font-weight: 600; cursor: pointer; }
.btn-ajustes { background: #222; color: white; }
.btn-ajustes-secundario { background: #e9eef5; color: #26364a; }
.pestanas-ajustes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 5px; border-radius: 11px; background: #e9eef5; width: fit-content; max-width: 100%; }
.pestana-ajustes { padding: 9px 18px; border-radius: 8px; color: #425166; font-weight: 700; text-decoration: none; }
.pestana-ajustes.activa { background: #fff; color: #17365d; box-shadow: 0 2px 6px rgba(15,23,42,.1); }
.mensaje-ajustes { margin: 0 0 18px; padding: 12px 15px; border-radius: 9px; background: #e8f5e9; color: #246b32; }
.mensaje-ajustes-error { background: #fff0f0; color: #a61b1b; }
.info-general-ajustes, .panel-ajustes { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 18px 18px; margin-bottom: 18px; }
.info-general-ajustes h2, .panel-ajustes h2 { margin: 0 0 8px; }
.info-general-ajustes p { margin: 0; color: #596579; }
.ajustes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.ajustes-grid .panel-ajustes { min-width: 0; margin: 0; }
.ajustes-grid .panel-usuarios-app { grid-column: 1 / -1; }
.form-nuevo-ajuste { display: flex; gap: 8px; margin: 14px 0 18px; }
.form-nuevo-ajuste input, .form-nuevo-ajuste select, .fila-ajuste input, .fila-ajuste select { min-width: 0; width: 100%; padding: 9px 10px; border: 1px solid #cbd2dc; border-radius: 7px; font: inherit; background: #fff; }
.lista-ajustes { display: grid; gap: 10px; max-height: 420px; overflow-y: auto; align-content: start; }
.fila-ajuste { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px; border: 1px solid #edf0f3; border-radius: 9px; }
.form-editar-ajuste { display: flex; align-items: center; gap: 8px; }
.campos-empleado-ajuste { display: grid; grid-template-columns: 1fr 0.8fr; gap: 8px; flex: 1; }
.estado-ajuste { color: #64748b; font-size: 12px; white-space: nowrap; }
.estado-ajuste.inactivo { color: #a33; }
.acciones-fila-ajuste { display: flex; align-items: center; gap: 6px; }
.btn-eliminar-empleado { width: 36px; height: 36px; border: 0; border-radius: 8px; background: #c62828; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.btn-eliminar-empleado:hover { background: #a61b1b; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.acciones-encabezado-resumen { display: flex; gap: 10px; }
@media (max-width: 760px) { .ajustes-grid { grid-template-columns: 1fr; } .encabezado-ajustes { align-items: flex-start; flex-direction: column; } }
@media (max-width: 480px) { .form-nuevo-ajuste { flex-direction: column; } .campos-empleado-ajuste { grid-template-columns: 1fr; } .fila-ajuste { grid-template-columns: 1fr auto; } .form-editar-ajuste { grid-column: 1 / -1; } .estado-ajuste { grid-column: 1; } .acciones-fila-ajuste { grid-column: 2; grid-row: 2; } }

/* Cuentas de acceso de la aplicación */
.panel-usuarios-app { margin-top: 0; }
.panel-usuarios-app .form-nuevo-usuario { grid-template-columns: minmax(140px, 1.1fr) minmax(120px, 1fr) minmax(210px, 1.5fr) minmax(120px, .8fr) 92px auto; align-items: center; }
.ayuda-usuarios-app { margin: 0 0 14px; color: #64748b; }
.form-nuevo-usuario { display: grid; grid-template-columns: 1fr 1fr 1.2fr 0.8fr auto; gap: 8px; margin: 12px 0 16px; }
.form-nuevo-usuario .btn-ajustes { white-space: nowrap; }
.form-nuevo-usuario input, .form-nuevo-usuario select, .tabla-usuarios-ajustes input, .tabla-usuarios-ajustes select { min-width: 0; width: 100%; padding: 8px 9px; border: 1px solid #cbd2dc; border-radius: 7px; font: inherit; background: #fff; }
.tabla-usuarios-contenedor { max-height: 360px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 9px; }
.tabla-usuarios-ajustes { width: 100%; border-collapse: collapse; min-width: 930px; background: #fff; }
.tabla-usuarios-ajustes th, .tabla-usuarios-ajustes td { padding: 10px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: middle; font-size: 13px; }
.tabla-usuarios-ajustes th { position: sticky; top: 0; z-index: 1; padding: 14px; background: #202124; color: #fff; font-size: 14px; font-weight: 700; }
.tabla-usuarios-ajustes :disabled { cursor: not-allowed; opacity: .55; }
.tabla-usuarios-ajustes tbody tr:last-child td { border-bottom: 0; }
.acciones-usuario-app { display: flex; align-items: center; gap: 6px; }
@media (max-width: 1000px) { .panel-usuarios-app .form-nuevo-usuario { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .panel-usuarios-app .form-nuevo-usuario { grid-template-columns: 1fr; } }

/* Inicio de sesión */
.fondo-login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.fondo-login { background: linear-gradient(90deg, rgba(8, 29, 20, .56), rgba(8, 29, 20, .18)), url("https://images.unsplash.com/photo-1655130944329-b3a63166f6b5?auto=format&fit=crop&w=1800&q=85") center/cover fixed no-repeat; }
.contenedor-login { width: 100%; max-width: 430px; }
.tarjeta-login { background: #fff; border-radius: 16px; padding: 30px; box-shadow: 0 8px 28px rgba(0,0,0,.1); }
.tarjeta-login h1 { margin: 0 0 8px; font-size: 26px; }
.descripcion-login { margin: 0 0 22px; color: #64748b; line-height: 1.5; }
.tarjeta-login form { display: grid; gap: 10px; }
.tarjeta-login label { margin-top: 5px; font-weight: 600; }
.tarjeta-login input { width: 100%; padding: 11px 12px; border: 1px solid #cbd2dc; border-radius: 8px; font: inherit; }
.tarjeta-login .campo-password { position: relative; width: 100%; }
.tarjeta-login .campo-password input { box-sizing: border-box; padding-right: 46px; }
.alternar-password { position: absolute; top: 50%; right: 7px; display: grid; place-items: center; width: 34px; height: 34px; padding: 6px; transform: translateY(-50%); border: 0; border-radius: 6px; background: transparent; color: #64748b; cursor: pointer; }
.alternar-password:hover { background: #eef2f7; color: #1f2937; }
.alternar-password:focus-visible { outline: 2px solid #2d6b9f; outline-offset: 1px; }
.alternar-password svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alternar-password .icono-ojo-cerrado { display: none; }
.alternar-password[aria-pressed="true"] .icono-ojo-abierto { display: none; }
.alternar-password[aria-pressed="true"] .icono-ojo-cerrado { display: block; }
.cargador-login { position: fixed; inset: 0; z-index: 10000; display: none; place-items: center; padding: 24px; background: rgba(12, 27, 45, .64); backdrop-filter: blur(7px); }
.cargador-login.visible { display: grid; }
.contenido-cargador-login { display: grid; justify-items: center; gap: 8px; min-width: 230px; padding: 30px 36px; border: 1px solid rgba(255,255,255,.72); border-radius: 22px; background: linear-gradient(145deg, #fff, #edf6ff); box-shadow: 0 24px 70px rgba(0,0,0,.28); color: #1d2b3a; text-align: center; }
.animacion-carga-login { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 5px; }
.aro-login { position: absolute; display: block; border-radius: 50%; }
.aro-login-externo { inset: 2px; border: 5px solid #dbeafe; border-top-color: #1769aa; border-right-color: #48a9d8; animation: girar-login 1.2s linear infinite; }
.aro-login-interno { inset: 14px; border: 3px solid #c9e4f5; border-bottom-color: #f59e0b; border-left-color: #f59e0b; animation: girar-login 1.7s linear infinite reverse; }
.punto-login { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 12px rgba(245,158,11,.65); }
.punto-login-uno { top: 5px; right: 25px; }
.punto-login-dos { bottom: 11px; left: 14px; width: 6px; height: 6px; background: #48a9d8; box-shadow: 0 0 10px rgba(72,169,216,.8); }
.centro-login { z-index: 1; color: #245b91; font-size: 17px; letter-spacing: 1px; }
.contenido-cargador-login p { margin: 4px 0 0; font-size: 17px; font-weight: 750; }
.contenido-cargador-login > span { color: #64748b; font-size: 13px; }
@keyframes girar-login { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aro-login-externo, .aro-login-interno { animation-duration: 4s; } }
.btn-login { margin-top: 10px; border: 0; border-radius: 9px; padding: 12px; color: #fff; background: #222; font: inherit; font-weight: 700; cursor: pointer; }
.error-login { padding: 11px 13px; border-radius: 8px; background: #fff0f0; color: #a61b1b; }
.usuario-sesion { align-self: center; color: #475569; font-size: 13px; font-weight: 600; }
.form-cerrar-sesion { margin: 0; }
.btn-cerrar-sesion { display: inline-block; padding: 9px 14px; border: 0; border-radius: 9px; background: #e9eef5; color: #26364a; font: inherit; font-weight: 600; cursor: pointer; }
@media (max-width: 700px) { .acciones-encabezado-resumen { flex-wrap: wrap; } .usuario-sesion { flex-basis: 100%; } }

/* Identidad del usuario y navegación */
.grupo-sesion-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tarjeta-usuario-sesion { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 150px; padding: 8px 13px; border: 1px solid #dce3ec; border-radius: 10px; background: #fff; box-shadow: 0 2px 7px rgba(15,23,42,.06); text-align: right; }
.tarjeta-usuario-sesion strong { color: #1f2937; font-size: 14px; }
.tarjeta-usuario-sesion span { color: #64748b; font-size: 12px; }
.tarjeta-usuario-sesion .icono-perfil { font-size: 25px; line-height: 1; }
.botones-nav { display: flex; align-items: center; gap: 9px; }
.acciones-ajustes { justify-content: flex-end; }

/* Título de la aplicación en acceso */
.contenedor-login { max-width: 520px; }
.tarjeta-login { padding: 28px; }
.marca-login { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 14px; }
.simbolo-login { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 15px; background: linear-gradient(140deg,#17365d,#2d6b9f); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: 1px; }
.empresa-login { margin: 0 0 4px; color: #54708f; font-size: 12px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.marca-login h1 { margin: 0; color: #1d2b3a; font-size: 21px; line-height: 1.2; }
.separador-login { height: 1px; margin: 22px 0 18px; background: #e5eaf0; }
.tarjeta-login > h2 { margin: 0 0 8px; color: #1d2b3a; font-size: 22px; }
@media (max-width: 600px) {
    .tarjeta-login { padding: 22px; }
    .marca-login { grid-template-columns: 46px minmax(0,1fr); gap: 11px; }
    .simbolo-login { width: 46px; height: 46px; border-radius: 12px; font-size: 14px; }
    .marca-login h1 { font-size: 18px; }
    .botones-nav { flex-wrap: wrap; justify-content: flex-end; }
    .acciones-ajustes { width: 100%; }
}

/* Ajuste visible del encabezado de acceso y la tarjeta de usuario */
.encabezado-login { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 14px; margin: 0 0 18px; padding: 0 4px; }
.contenedor-login { padding: 22px; border: 1px solid rgba(255,255,255,.8); border-radius: 22px; background: rgba(255,255,255,.7); box-shadow: 0 22px 70px rgba(0,0,0,.28); }
.encabezado-login { color: #1d2b3a; text-shadow: none; }
.encabezado-login h1 { color: #1d2b3a; }
.encabezado-login .empresa-login { color: #54708f; }
.tarjeta-login { box-shadow: 0 12px 35px rgba(12,31,24,.2); }
.encabezado-login h1 { margin: 0; color: #1d2b3a; font-size: 24px; line-height: 1.18; }
.encabezado-login .empresa-login { color: #54708f; }
.tarjeta-usuario-sesion { min-width: 205px; padding: 10px 14px; border: 1px solid #a9c8e8; border-radius: 12px; background: linear-gradient(135deg,#fff 0%,#eef6ff 100%); box-shadow: 0 4px 12px rgba(30,64,100,.12); }
.tarjeta-usuario-sesion strong { font-size: 15px; }
.tarjeta-usuario-sesion .rol-sesion { margin-top: 3px; padding: 3px 9px; border-radius: 20px; background: #dcecff; color: #245b91; font-size: 11px; font-weight: 700; }
.tarjeta-usuario-sesion { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; }
.tarjeta-usuario-sesion .form-cerrar-sesion { margin-left: auto; }
.tarjeta-usuario-sesion .btn-cerrar-sesion { padding: 7px 11px; white-space: nowrap; }
.icono-perfil { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #dcecff; font-size: 30px; line-height: 1; }
.datos-usuario-sesion { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 3px; }
.tarjeta-usuario-sesion-admin { min-width: 300px; }
.tarjeta-usuario-sesion-admin .datos-usuario-sesion { flex: 1 1 auto; }
.form-vista-rol { display: grid; width: 100%; gap: 3px; margin: 3px 0 0; }
.form-vista-rol label { color: #526174; font-size: 10px; font-weight: 700; }
.form-vista-rol select { width: 100%; min-width: 0; padding: 4px 7px; border: 1px solid #cbd2dc; border-radius: 6px; background: #fff; color: #26364a; font: inherit; font-size: 11px; }
.aviso-rol-vista { color: #9a5b00 !important; font-size: 10px !important; font-weight: 700; }
@media (max-width: 700px) { .tarjeta-usuario-sesion-admin { min-width: min(100%, 300px); } }
.fondo-login { place-items: start center; padding-top: clamp(28px, 7vh, 64px); }
@media (max-width: 600px) { .fondo-login { padding-top: 28px; } }
@media (max-width: 600px) {
    .encabezado-login { grid-template-columns: 46px minmax(0,1fr); gap: 11px; }
    .encabezado-login h1 { font-size: 19px; }
    .tarjeta-usuario-sesion { min-width: 175px; }
}

.tarjeta-usuario-sesion .rol-sesion, .tarjeta-usuario-sesion .btn-cerrar-sesion { box-sizing: border-box; width: 112px; text-align: center; }
.tarjeta-usuario-sesion .btn-cerrar-sesion { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; box-shadow: 0 2px 5px rgba(234, 88, 12, .22); }
.tarjeta-usuario-sesion .btn-cerrar-sesion:hover { background: linear-gradient(135deg, #ea8a08, #c2410c); }
.tarjeta-usuario-sesion .btn-cerrar-sesion:focus-visible { outline: 2px solid #9a3412; outline-offset: 2px; }
.panel-limpiar-asistencias > p { color: #596579; }
.panel-limpiar-asistencias .rango-asistencias { font-weight: 700; color: #374151; }
.form-limpiar-asistencias { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 18px; }
.campos-rango-asistencias { display: grid; grid-template-columns: repeat(2, minmax(180px, 260px)); gap: 12px; grid-column: 1 / -1; }
.campos-rango-asistencias label { display: grid; gap: 5px; color: #374151; font-weight: 600; }
.campos-rango-asistencias input { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #cbd2dc; border-radius: 8px; font: inherit; }
.confirmar-limpieza-asistencias { display: flex; align-items: flex-start; gap: 8px; color: #7f1d1d; }
@media (max-width: 760px) {
    .form-limpiar-asistencias { grid-template-columns: 1fr; }
    .campos-rango-asistencias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-limpiar-asistencias .btn-limpiar-asistencias { justify-self: start; }
}
@media (max-width: 480px) { .campos-rango-asistencias { grid-template-columns: 1fr; } }
.panel-nuevo-turno { margin: 0 0 24px; }
.form-turno { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form-turno label { display: grid; align-content: start; gap: 6px; color: #374151; font-size: 13px; font-weight: 700; }
.form-turno [hidden] { display: none !important; }
.form-turno input { box-sizing: border-box; width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #cbd2dc; border-radius: 7px; background: #fff; font: inherit; font-size: 14px; }
.form-turno .checkbox-turno-continuo { display: flex; grid-column: 1 / -1; align-items: center; gap: 9px; }
.form-turno .checkbox-turno-continuo input { width: 18px; height: 18px; min-width: 18px; margin: 0; padding: 0; accent-color: #245b91; }
.form-turno button { justify-self: start; align-self: end; }
.ayuda-turno { grid-column: 1 / -1; margin: 0; color: #64748b; font-size: 13px; }
.seccion-turnos-configurados > h2 { margin: 0 0 12px; color: #1f2937; }
.grid-turnos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.tarjeta-turno-configuracion { min-width: 0; margin: 0; }
.encabezado-tarjeta-turno { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.resumen-horario-turno { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid #d7e5f4; border-radius: 10px; background: linear-gradient(135deg, #f8fbff, #eaf3fc); }
.encabezado-tarjeta-turno h3 { overflow-wrap: anywhere; margin: 0 0 5px; color: #1f2937; }
.resumen-horario-turno p { margin: 0; color: #245b91; font-size: 16px; font-weight: 800; letter-spacing: .3px; }
.etiqueta-turno-continuo { display: inline-block; margin-top: 7px; padding: 3px 8px; border-radius: 20px; background: #dcecff; color: #245b91; font-size: 11px; font-weight: 700; }
.tarjeta-turno-configuracion .form-turno { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acciones-turno { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.acciones-turno form { margin: 0; }
.sin-turnos { padding: 18px; border-radius: 10px; background: #fff; color: #64748b; }
.tabla-asignacion-contenedor { overflow-x: auto; }
.tabla-asignacion-turnos { width: 100%; min-width: 620px; border-collapse: collapse; background: #fff; }
.tabla-asignacion-turnos th, .tabla-asignacion-turnos td { padding: 11px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; }
.tabla-asignacion-turnos th { background: #202124; color: #fff; font-size: 14px; font-weight: 700; }
.tabla-asignacion-turnos select { min-width: 190px; width: 100%; padding: 9px 10px; border: 1px solid #cbd2dc; border-radius: 7px; background: #fff; font: inherit; }
.tabla-asignacion-turnos form { margin: 0; }
.rango-asignacion-turnos { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 18px; }
.rango-asignacion-turnos label { display: grid; gap: 5px; color: #374151; font-weight: 600; }
.rango-asignacion-turnos input { min-width: 170px; padding: 9px 10px; border: 1px solid #cbd2dc; border-radius: 7px; font: inherit; }
.campo-nombre-programacion { display: grid; max-width: 520px; gap: 5px; margin: 12px 0; color: #374151; font-weight: 600; }
.campo-nombre-programacion input { padding: 9px 10px; border: 1px solid #cbd2dc; border-radius: 7px; font: inherit; }
.lista-programaciones-turno { display: grid; gap: 10px; max-height: 500px; overflow-y: auto; align-content: start; padding: 2px 8px 2px 2px; }
.fila-programacion-turno { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.fila-programacion-turno h3 { margin: 0; color: #1f2937; }
.fila-programacion-turno p { margin: 4px 0; color: #475569; }
.fila-programacion-turno small, .nombres-programacion-turno { color: #64748b; }
.fila-programacion-turno form { margin: 0; }
@media (max-width: 600px) { .fila-programacion-turno { align-items: flex-start; flex-direction: column; } }
.guardar-asignaciones-turnos { margin-top: 16px; }
.aviso-sin-turnos { padding: 12px 14px; border-radius: 8px; background: #fff7e6; color: #80550b; }
.aviso-sin-turnos a { color: #245b91; font-weight: 700; }
.nota-turno-mixto { display: block; margin-top: 5px; color: #7a5b16; font-size: 11px; }
.distribucion-asignacion-turnos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr); gap: 20px; align-items: stretch; }
.lista-asignacion-turnos { min-width: 0; }
.resumen-asignacion-turnos { display: grid; align-content: start; gap: 10px; min-height: 0; max-height: 1130px; box-sizing: border-box; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; overflow-y: auto; }
.resumen-asignacion-turnos > h2 { margin: 0 0 2px; font-size: 19px; }
.tarjeta-resumen-asignacion { padding: 13px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.tarjeta-resumen-asignacion > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tarjeta-resumen-asignacion h3 { margin: 0; color: #1f2937; font-size: 15px; }
.tarjeta-resumen-asignacion header p { margin: 4px 0 0; color: #526174; font-size: 12px; font-weight: 600; }
.cantidad-asignados { color: #245b91; font-size: 12px; white-space: nowrap; }
.tarjeta-resumen-asignacion ul { display: grid; gap: 5px; margin: 10px 0 0; padding-left: 19px; color: #374151; font-size: 13px; }
.tarjeta-resumen-asignacion li small { display: block; color: #64748b; font-size: 11px; }
.sin-empleados-turno, .sin-turnos-resumen { margin: 9px 0 0; color: #64748b; font-size: 13px; }
.tarjeta-resumen-asignacion.sin-turno { border-color: #f2ddb0; background: #fffaf0; }
.campo-turno-sabado { margin: 14px 0; }
.campo-turno-sabado select { box-sizing: border-box; width: 100%; max-width: 520px; padding: 9px 10px; border: 1px solid #cbd2dc; border-radius: 7px; background: #fff; font: inherit; }
.campo-turno-sabado small, .ayuda-resumen-rango { color: #64748b; font-size: 12px; }
.ayuda-resumen-rango { margin: 0 0 4px; }
.subpestanas-asignacion { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; padding: 5px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.subpestanas-asignacion a { padding: 9px 14px; border-radius: 7px; color: #475569; font-size: 14px; font-weight: 700; text-decoration: none; }
.subpestanas-asignacion a.activa { background: #245b91; color: #fff; }
.controles-programacion-turnos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.controles-programacion-turnos > .campo-nombre-programacion { grid-column: span 2; max-width: none; margin: 0; }
.controles-programacion-turnos .rango-asignacion-turnos { display: contents; }
.controles-programacion-turnos > label, .controles-programacion-turnos .rango-asignacion-turnos > label { display: grid; gap: 5px; color: #374151; font-size: 13px; font-weight: 600; }
.controles-programacion-turnos input, .controles-programacion-turnos select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid #cbd2dc; border-radius: 7px; background: #fff; font: inherit; }
.controles-programacion-turnos .campo-turno-sabado { grid-column: span 3; margin: 0; }
.controles-programacion-turnos #filtrar-resumen-rango { grid-column: 4; align-self: end; min-height: 40px; }
.panel-festivos-integrado { margin-top: 0; }
.tabla-resumen-fechas-contenedor { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.tabla-resumen-fechas { width: 100%; min-width: 500px; border-collapse: collapse; }
.tabla-resumen-fechas th, .tabla-resumen-fechas td { padding: 8px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; font-size: 12px; }
.tabla-resumen-fechas th { position: sticky; top: 0; background: #f8fafc; color: #475569; }
.tabla-resumen-fechas tr:last-child td { border-bottom: 0; }
.panel-festivos { margin-top: 18px; }
.encabezado-festivos { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.encabezado-festivos h2 { margin: 0 0 5px; }
.encabezado-festivos p { margin: 0; color: #64748b; }
.form-anio-festivos, .form-nuevo-festivo { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.form-anio-festivos label, .form-nuevo-festivo label { display: grid; gap: 5px; color: #475569; font-size: 13px; font-weight: 600; }
.form-anio-festivos input, .form-nuevo-festivo input { box-sizing: border-box; min-width: 150px; padding: 9px 10px; border: 1px solid #cbd2dc; border-radius: 7px; background: #fff; font: inherit; }
.form-nuevo-festivo { margin-bottom: 18px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.form-nuevo-festivo label:nth-child(2) { flex: 1; }
.form-nuevo-festivo label:nth-child(2) input { width: 100%; }
.tabla-festivos { min-width: 560px; }
.tabla-festivos td:last-child { max-width: none; color: inherit; }
.tabla-festivos td form { margin: 0; }
.btn-eliminar-festivo { border: 0; border-radius: 6px; padding: 7px 10px; background: #fee2e2; color: #991b1b; font: inherit; cursor: pointer; }
.sin-festivos { padding: 16px; color: #64748b; }
@media (max-width: 650px) { .encabezado-festivos { align-items: stretch; flex-direction: column; } .form-nuevo-festivo { align-items: stretch; flex-direction: column; } .form-nuevo-festivo label:nth-child(2) { width: 100%; } }
@media (max-width: 600px) { .controles-programacion-turnos { grid-template-columns: 1fr; } .controles-programacion-turnos > .campo-nombre-programacion, .controles-programacion-turnos .campo-turno-sabado { grid-column: 1; } .controles-programacion-turnos #filtrar-resumen-rango { grid-column: 1; width: 100%; } }
@media (max-width: 980px) { .distribucion-asignacion-turnos { grid-template-columns: 1fr; } .resumen-asignacion-turnos { min-height: 0; max-height: 520px; } }
.horas-extra { color: #f28c28; font-weight: 700; white-space: nowrap; }
.horas-pendientes { color: #c62828; font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) { .grid-turnos { grid-template-columns: 1fr; } .form-turno { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .form-turno, .tarjeta-turno-configuracion .form-turno { grid-template-columns: 1fr; } .ayuda-turno { grid-column: 1; } }

/* Navegación centrada debajo de la tarjeta de sesión en inicio y resumen. */
.navegacion-superior .grupo-sesion-nav,
.encabezado-resumen .grupo-sesion-nav { flex-direction: row; align-items: center; gap: 12px; }
.encabezado-ajustes .grupo-sesion-nav { flex-direction: row; align-items: center; gap: 12px; }
.navegacion-superior .botones-nav,
.encabezado-resumen .acciones-encabezado-resumen,
.encabezado-ajustes .botones-nav { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 7px; }
.encabezado-resumen { flex-direction: row; align-items: center; gap: 16px; }
.encabezado-resumen > .grupo-sesion-nav { order: 0; align-self: center; }
.encabezado-resumen > div:first-child { order: 0; align-self: center; }
.encabezado-resumen .acciones-encabezado-resumen { justify-content: flex-end; }
.encabezado-ajustes { flex-direction: row; align-items: center; gap: 16px; }
.encabezado-ajustes > .acciones-ajustes { order: 0; align-self: center; }
.encabezado-ajustes > div:first-child { order: 0; align-self: center; }
@media (max-width: 760px) {
    .encabezado-resumen, .encabezado-ajustes { flex-direction: column; align-items: stretch; gap: 12px; }
    .encabezado-resumen > .grupo-sesion-nav, .encabezado-ajustes > .acciones-ajustes { order: 0; align-self: flex-end; }
    .encabezado-resumen > div:first-child, .encabezado-ajustes > div:first-child { order: 0; align-self: flex-start; }
    .navegacion-superior .grupo-sesion-nav, .encabezado-resumen .grupo-sesion-nav, .encabezado-ajustes .grupo-sesion-nav { flex-direction: column; align-items: flex-end; }
}
@media (max-width: 700px) { .navegacion-superior .grupo-sesion-nav { flex-direction: column; align-items: flex-end; } }
.form-cambiar-turno-resumen { display: flex; align-items: center; gap: 6px; margin: 0; }
.form-cambiar-turno-resumen select { box-sizing: border-box; min-width: 80px; width: 90px; max-width: 90px; padding: 7px 6px; border: 1px solid #cbd2dc; border-radius: 7px; background: #fff; color: #26364a; font: inherit; font-size: 12px; }
.btn-guardar-turno-resumen { flex: 0 0 auto; padding: 7px 9px; border: 0; border-radius: 7px; background: #202124; color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.btn-guardar-turno-resumen:hover { background: #3c4043; }
.btn-guardar-turno-resumen:disabled, .btn-eliminar-programacion:disabled { opacity: .55; cursor: not-allowed; }
.btn-guardar-turno-resumen:disabled:hover { background: #202124; }
.icono-diskette { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aviso-solo-lectura { margin: 0 0 18px; padding: 11px 14px; border: 1px solid #f0d28b; border-radius: 8px; background: #fff8e6; color: #76520a; font-weight: 600; }

/* Enlaces principales a la izquierda de la tarjeta de sesión. */
.navegacion-superior .grupo-sesion-nav,
.encabezado-resumen .grupo-sesion-nav,
.encabezado-ajustes .grupo-sesion-nav {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.navegacion-superior .botones-nav,
.encabezado-ajustes .botones-nav,
.encabezado-resumen .acciones-encabezado-resumen {
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
@media (max-width: 760px) {
    .navegacion-superior .grupo-sesion-nav,
    .encabezado-resumen .grupo-sesion-nav,
    .encabezado-ajustes .grupo-sesion-nav {
        flex-direction: column;
        align-items: flex-start;
    }
    .navegacion-superior .botones-nav,
    .encabezado-ajustes .botones-nav,
    .encabezado-resumen .acciones-encabezado-resumen {
        order: -1;
        justify-content: flex-start;
    }
}
.navegacion-superior .grupo-sesion-nav {
    flex-direction: column;
    align-items: flex-end;
}
.navegacion-superior .botones-nav {
    order: 0;
    flex-direction: row;
    justify-content: flex-end;
}
.perfil-invitado-ajustes form:not(.form-cerrar-sesion) input:not([type="hidden"]),
.perfil-invitado-ajustes form:not(.form-cerrar-sesion) button,
.perfil-invitado-ajustes form:not(.form-cerrar-sesion) textarea { cursor: not-allowed; opacity: .55; }
.panel-logs { margin-top: 18px; }
.filtros-logs { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)) auto; align-items: end; gap: 12px; }
.filtros-logs label { display: grid; gap: 6px; color: #475569; font-size: 13px; font-weight: 600; }
.filtros-logs input, .filtros-logs select { box-sizing: border-box; width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #cbd2dc; border-radius: 7px; background: #fff; font: inherit; }
.acciones-filtro-logs { display: flex; align-items: center; gap: 8px; }
.total-logs { margin: 18px 0 10px; color: #64748b; font-size: 13px; }
.tabla-logs-contenedor { max-height: 65vh; overflow: auto; border: 1px solid #e2e8f0; border-radius: 9px; }
.tabla-logs { width: 100%; border-collapse: collapse; min-width: 850px; }
.tabla-logs th, .tabla-logs td { padding: 10px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; font-size: 13px; }
.tabla-logs th { position: sticky; top: 0; background: #f8fafc; color: #475569; z-index: 1; }
.tabla-logs td:last-child { max-width: 420px; overflow-wrap: anywhere; color: #64748b; }
.tipo-log { display: inline-block; padding: 3px 8px; border-radius: 20px; background: #eaf2fb; color: #245b91; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sin-logs { padding: 24px !important; text-align: center !important; color: #64748b; }
@media (max-width: 1000px) { .filtros-logs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .filtros-logs { grid-template-columns: 1fr; } .acciones-filtro-logs { flex-wrap: wrap; } }

.tabla-resumen-turno-contenedor {
    margin-top: 8px;
    overflow-x: auto;
}

.tabla-resumen-turno {
    width: 100%;
    min-width: 300px;
    border-collapse: collapse;
    background: #fff;
}

.tabla-resumen-turno th,
.tabla-resumen-turno td {
    padding: 7px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
    font-size: 12px;
}

.tabla-resumen-turno th {
    background: #f8fafc;
    color: #475569;
}

.rango-turno-resumen {
    display: block;
    white-space: nowrap;
    color: #64748b;
}