:root {
    --panaria-beige: #d8cbbd;
    --panaria-crema: #f4efe9;
    --panaria-marron: #4a3a31;
    --panaria-marron-claro: #7a6658;
    --panaria-gris: #ebe7e2;
    --panaria-blanco: #ffffff;
    --panaria-dorado: #c9a86a;
    --panaria-texto: #2f2925;
}


* {
    box-sizing: border-box;
}


body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color:
        var(--panaria-texto);

    min-height:
        100vh;
}


/* =====================================
   FONDOS
===================================== */

.pagina-inicio {

    background:

        linear-gradient(
            rgba(244,239,233,0.48),
            rgba(244,239,233,0.48)
        ),

        url("fondo-principal.png");

    background-size:
        cover;

    background-position:
        center;

    background-attachment:
        fixed;
}


.pagina-horarios {

    background:

        linear-gradient(
            rgba(244,239,233,0.58),
            rgba(244,239,233,0.58)
        ),

        url("fondo-horarios.png");

    background-size:
        cover;

    background-position:
        center;

    background-attachment:
        fixed;
}


/* =====================================
   PORTADA
===================================== */

.contenedor {

    max-width:
        420px;

    margin:
        0 auto;

    padding:
        30px 20px;
}


.encabezado {

    text-align:
        center;

    margin-bottom:
        30px;
}


.encabezado h1 {

    margin:
        0;

    font-size:
        34px;

    color:
        var(--panaria-marron);
}


.encabezado p {

    color:
        var(--panaria-marron-claro);
}


.tarjeta {

    background:
        rgba(255,255,255,0.93);

    padding:
        22px;

    margin-bottom:
        18px;

    border-radius:
        16px;

    box-shadow:
        0 5px 16px
        rgba(74,58,49,0.15);

    backdrop-filter:
        blur(5px);
}


.tarjeta a {

    text-decoration:
        none;
}


.tarjeta h2 {

    color:
        var(--panaria-marron);
}


.resumen {

    color:
        var(--panaria-marron-claro);
}


/* =====================================
   BOTÓN GENERAL
===================================== */

.boton {

    width:
        100%;

    padding:
        14px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--panaria-marron);

    color:
        white;

    font-size:
        16px;

    cursor:
        pointer;

    transition:
        0.2s;
}


.boton:hover {

    background:
        var(--panaria-marron-claro);

    transform:
        translateY(-2px);
}


/* =====================================
   PÁGINA CALENDARIO
===================================== */

.pagina-calendario {

    width:
        100%;

    max-width:
        1900px;

    margin:
        auto;

    padding:
        24px;
}


/* =====================================
   CABECERA CALENDARIO
===================================== */

.encabezado-calendario {

    margin-bottom:
        22px;

    text-align:
        center;
}


.encabezado-calendario h1 {

    margin:
        0 0 18px;

    font-size:
        34px;

    color:
        var(--panaria-marron);
}


.selector-mes {

    display:
        grid;

    grid-template-columns:
        180px
        1fr
        180px;

    align-items:
        center;

    gap:
        20px;
}


.selector-mes h2 {

    margin:
        0;

    font-size:
        28px;

    color:
        var(--panaria-marron);
}


.selector-mes p {

    margin:
        5px 0 0;

    color:
        var(--panaria-marron-claro);
}


.boton-mes {

    padding:
        12px;

    border:
        none;

    border-radius:
        10px;

    background:
        rgba(255,255,255,0.94);

    color:
        var(--panaria-marron);

    font-weight:
        bold;

    cursor:
        pointer;

    box-shadow:
        0 4px 12px
        rgba(74,58,49,0.12);
}


.boton-mes:hover {

    background:
        var(--panaria-beige);
}


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

.calendario-mensual {

    width:
        100%;

    overflow-x:
        auto;
}


/* CABECERA LUN-DOM */

.cabecera-dias {

    display:
        grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap:
        8px;

    min-width:
        1350px;

    margin-bottom:
        8px;
}


.cabecera-dias div {

    padding:
        11px;

    border-radius:
        10px;

    background:
        var(--panaria-marron);

    color:
        white;

    text-align:
        center;

    font-size:
        12px;

    font-weight:
        bold;
}


/* =====================================
   SEMANA
===================================== */

.semana {

    min-width:
        1350px;

    margin-bottom:
        22px;

    padding:
        10px;

    border-radius:
        16px;

    background:
        rgba(255,255,255,0.45);

    box-shadow:
        0 5px 18px
        rgba(74,58,49,0.10);

    backdrop-filter:
        blur(5px);
}


.dias-semana {

    display:
        grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap:
        8px;
}


/* =====================================
   DÍA
===================================== */

.dia {

    min-width:
        0;

    min-height:
        245px;

    padding:
        9px;

    border-radius:
        11px;

    background:
        rgba(255,255,255,0.95);

    border:
        1px solid
        rgba(74,58,49,0.10);

    cursor:
        pointer;

    transition:
        0.2s;
}


.dia:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--panaria-dorado);

    box-shadow:
        0 7px 16px
        rgba(74,58,49,0.17);
}


.dia.otro-mes {

    opacity:
        0.38;
}


.dia.otro-mes:hover {

    opacity:
        0.75;
}


.dia.hoy {

    border:
        3px solid
        var(--panaria-dorado);

    box-shadow:
        0 4px 14px
        rgba(201,168,106,0.35);
}


.dia.bloqueado {

    background:
        rgba(240,235,230,0.96);
}


/* =====================================
   CABECERA DÍA
===================================== */

.dia-cabecera {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        6px;

    padding-bottom:
        5px;

    border-bottom:
        1px solid
        var(--panaria-beige);
}


.dia-cabecera span {

    font-size:
        10px;

    font-weight:
        bold;

    color:
        var(--panaria-marron-claro);
}


.dia-cabecera strong {

    font-size:
        20px;

    color:
        var(--panaria-marron);
}


.marca-hoy,
.marca-cerrado {

    margin-bottom:
        5px;

    padding:
        3px;

    border-radius:
        5px;

    text-align:
        center;

    font-size:
        8px;

    font-weight:
        bold;
}


.marca-hoy {

    background:
        var(--panaria-dorado);

    color:
        white;
}


.marca-cerrado {

    background:
        var(--panaria-marron);

    color:
        white;
}


/* =====================================
   HORARIO MINI
===================================== */

.turno-mini {

    margin-top:
        6px;

    padding:
        6px;

    border-radius:
        7px;
}


.manana-mini {

    background:
        #f4e8d8;
}


.tarde-mini {

    background:
        #e3dbd3;
}


.titulo-turno-mini {

    margin-bottom:
        4px;

    font-size:
        9px;

    font-weight:
        bold;

    color:
        var(--panaria-marron);
}


.zona-mini {

    margin-bottom:
        5px;
}


.zona-mini b {

    display:
        block;

    margin-bottom:
        2px;

    font-size:
        8px;

    color:
        var(--panaria-marron-claro);
}


.persona-mini {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        3px;

    font-size:
        9px;
}


.persona-mini span {

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.persona-mini small {

    white-space:
        nowrap;

    font-size:
        8px;

    color:
        #666;
}


.sin-asignar {

    font-size:
        9px;

    color:
        #aaa;
}


.sin-horario {

    padding:
        25px 5px;

    text-align:
        center;

    color:
        #999;

    font-size:
        10px;
}


/* =====================================
   LIBRANZAS
===================================== */

.libranzas {

    margin-top:
        9px;

    padding:
        9px 12px;

    border-radius:
        10px;

    background:
        rgba(244,239,233,0.96);
}


.titulo-libranzas {

    margin-bottom:
        7px;

    font-size:
        11px;

    font-weight:
        bold;

    color:
        var(--panaria-marron);
}


.lista-libranzas {

    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap:
        5px 14px;
}


.libranza-item {

    display:
        flex;

    gap:
        6px;

    font-size:
        9px;
}


.libranza-item strong {

    color:
        var(--panaria-marron);
}


.libranza-item span {

    color:
        var(--panaria-marron-claro);
}


.libranzas-pendientes {

    grid-column:
        1 / -1;

    font-size:
        10px;

    color:
        var(--panaria-marron-claro);
}


/* =====================================
   MODAL
===================================== */

.gestion-empleados {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--panaria-marron);
}

.aplicar-otros-dias {
    margin: 7px 0 4px 3px;
    color: #7a6658;
    font-size: 12px;
}

.aplicar-otros-dias summary {
    width: fit-content;
    cursor: pointer;
    font-weight: 600;
}

.opciones-dias {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.opcion-dia {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 7px;
    border: 1px solid var(--panaria-beige);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    white-space: nowrap;
}

.opcion-dia input {
    width: auto;
    margin: 0;
}

.opcion-dia:has(input:checked) {
    background: #f1dfc6;
    border-color: var(--panaria-marron-claro);
}

.gestion-empleados select,
.gestion-empleados input[type="text"] {
    padding: 8px;
    border: 1px solid var(--panaria-beige);
    border-radius: 7px;
    background: white;
}

.gestion-empleados button {
    padding: 8px 11px;
    border: 0;
    border-radius: 7px;
    background: var(--panaria-crema);
    color: var(--panaria-marron);
    cursor: pointer;
}

.panel-empleados {
    flex-basis: 100%;
    padding: 10px;
    border-radius: 8px;
    background: #f4e8d8;
}

.panel-empleados[hidden] {
    display: none;
}

.panel-empleados p {
    margin: 0 0 9px;
    font-weight: bold;
}

.panel-empleados form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.lista-eliminar-empleados label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 140px;
    cursor: pointer;
}

.modal-fondo {

    position:
        fixed;

    inset:
        0;

    z-index:
        10000;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        20px;

    background:
        rgba(30,24,20,0.65);

    backdrop-filter:
        blur(5px);
}


.modal {

    width:
        min(1100px, 100%);

    max-height:
        94vh;

    overflow-y:
        auto;

    padding:
        22px;

    border-radius:
        18px;

    background:
        var(--panaria-crema);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.30);
}


.modal-cabecera {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        18px;
}


.modal-cabecera h2 {

    margin:
        0;

    color:
        var(--panaria-marron);

    text-transform:
        capitalize;
}


.modal-cabecera p {

    margin:
        5px 0;

    color:
        var(--panaria-marron-claro);
}


.modal-cerrar {

    flex:
        0 0 40px;

    width:
        40px;

    height:
        40px;

    border:
        none;

    border-radius:
        50%;

    background:
        var(--panaria-marron);

    color:
        white;

    font-size:
        24px;

    cursor:
        pointer;
}


/* =====================================
   EDITOR
===================================== */

.turnos-editor {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        16px;
}


.turno-editor {

    padding:
        15px;

    border-radius:
        14px;
}


.manana-editor {

    background:
        #f2e7d8;
}


.tarde-editor {

    background:
        #ded6ce;
}


.turno-editor h3 {

    margin-top:
        0;

    color:
        var(--panaria-marron);
}


.zona-editor {

    margin-top:
        12px;

    padding:
        12px;

    border-radius:
        10px;

    background:
        rgba(255,255,255,0.90);
}


.zona-editor-titulo {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        8px;
}


.zona-editor-titulo h4 {

    margin:
        0;

    color:
        var(--panaria-marron);
}


.añadir-persona {

    padding:
        6px 10px;

    border:
        none;

    border-radius:
        7px;

    background:
        var(--panaria-crema);

    color:
        var(--panaria-marron);

    cursor:
        pointer;
}


.filas-editor {

    display:
        grid;

    gap:
        7px;
}


.fila-editor {

    display:
        grid;

    grid-template-columns:
        1.5fr 1fr 1fr 36px;

    gap:
        7px;
}


.fila-editor select,
.fila-editor input {

    min-width:
        0;

    width:
        100%;

    padding:
        9px;

    border:
        1px solid
        var(--panaria-beige);

    border-radius:
        7px;

    background:
        white;
}


.quitar-persona {

    border:
        none;

    border-radius:
        7px;

    background:
        var(--panaria-gris);

    color:
        var(--panaria-marron);

    font-size:
        20px;

    cursor:
        pointer;
}


.modal-acciones {

    display:
        flex;

    justify-content:
        flex-end;

    margin-top:
        18px;
}


.boton-guardar {

    padding:
        12px 20px;

    border:
        none;

    border-radius:
        9px;

    background:
        var(--panaria-marron);

    color:
        white;

    font-weight:
        bold;

    cursor:
        pointer;
}


/* =====================================
   VOLVER
===================================== */

.acciones-horarios {

    width:
        min(420px, 100%);

    margin:
        26px auto 0;
}


.acciones-horarios a {

    text-decoration:
        none;
}


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

@media (max-width: 900px) {

    .selector-mes {

        grid-template-columns:
            1fr;
    }


    .lista-libranzas {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .turnos-editor {

        grid-template-columns:
            1fr;
    }
}
/* =====================================
   CABECERA DE CADA SEMANA
===================================== */

.cabecera-semana {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    margin-bottom: 10px;

    padding:
        8px 10px;

    border-radius:
        9px;

    background:
        rgba(244, 239, 233, 0.94);
}


.datos-semana {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    color:
        var(--panaria-marron);

    font-size:
        11px;
}


.estado-semana {
    padding:
        4px 7px;

    border-radius:
        6px;

    font-size:
        9px;

    font-weight:
        bold;
}


.estado-semana.cerrada {
    background:
        var(--panaria-marron);

    color:
        white;
}


.estado-semana.desbloqueada {
    background:
        var(--panaria-dorado);

    color:
        white;
}


/* =====================================
   ACCIONES DE SEMANA
===================================== */

.acciones-semana {
    display: flex;

    gap: 7px;

    flex-wrap: wrap;

    justify-content: flex-end;
}


.boton-desbloquear-semana,
.boton-bloquear-semana,
.boton-eliminar-semana {
    padding:
        7px 10px;

    border:
        none;

    border-radius:
        7px;

    cursor:
        pointer;

    font-size:
        10px;

    font-weight:
        bold;

    transition:
        0.2s;
}


.boton-desbloquear-semana {
    background:
        var(--panaria-dorado);

    color:
        white;
}


.boton-desbloquear-semana:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 3px 8px
        rgba(0,0,0,0.15);
}


.boton-bloquear-semana {
    background:
        var(--panaria-beige);

    color:
        var(--panaria-marron);
}


.boton-eliminar-semana {
    background:
        #7b4942;

    color:
        white;
}


.boton-eliminar-semana:hover {
    background:
        #633a35;

    transform:
        translateY(-1px);
}


/* =====================================
   SEMANA CERRADA
===================================== */

.semana-cerrada {
    border:
        1px solid
        rgba(74,58,49,0.20);
}


/* =====================================
   BOTÓN ELIMINAR DÍA
===================================== */

.boton-eliminar-dia {
    padding:
        12px 20px;

    border:
        none;

    border-radius:
        9px;

    background:
        #7b4942;

    color:
        white;

    font-weight:
        bold;

    cursor:
        pointer;

    transition:
        0.2s;
}


.boton-eliminar-dia:hover {
    background:
        #633a35;

    transform:
        translateY(-1px);
}


/* =====================================
   ACCIONES DEL MODAL
===================================== */

.modal-acciones {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    margin-top:
        18px;
}


/* =====================================
   MÓVIL
===================================== */

@media (max-width: 700px) {

    .cabecera-semana {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .acciones-semana {
        justify-content:
            stretch;
    }


    .acciones-semana button {
        flex:
            1;
    }


    .modal-acciones {
        flex-direction:
            column-reverse;
    }


    .modal-acciones button {
        width:
            100%;
    }
}
/* =========================================================
   PANARIA APP - ADAPTACIÓN RESPONSIVE PARA MÓVIL
   Semana completa con desplazamiento horizontal
   PEGAR TODO ESTE BLOQUE AL FINAL DE estilos.css
   ========================================================= */


/* =========================================================
   AJUSTES GENERALES
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------------------
       CONTENEDOR GENERAL
       ----------------------------------------------------- */

    .contenedor,
    .pagina-calendario,
    #contenido-horarios {
        width: 100%;
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       ENCABEZADO
       ----------------------------------------------------- */

    .encabezado,
    .encabezado-calendario {
        width: 100%;
        box-sizing: border-box;
    }

    .encabezado-calendario {
        padding-left: 5px;
        padding-right: 5px;
    }


    /* -----------------------------------------------------
       SELECTOR DE MES
       ----------------------------------------------------- */

    .selector-mes {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-sizing: border-box;
    }

    #titulo-mes {
        flex: 1;
        min-width: 0;
        text-align: center;
        font-size: 1.15rem;
    }

    .boton-mes,
    #mes-anterior,
    #mes-siguiente {
        flex-shrink: 0;
        min-width: 42px;
        min-height: 42px;
    }


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

    /*
       El calendario NO se encoge.

       Conservamos los 7 días completos y permitimos
       deslizar horizontalmente con el dedo.
    */

    #calendario {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        padding-bottom: 10px;

        scrollbar-width: thin;

        box-sizing: border-box;
    }


    /*
       Incluimos varios nombres porque estas clases
       aparecen en las distintas partes del calendario.
    */

    .calendario-semanal,
    .calendario-mensual,
    .semana,
    .dias-semana {
        min-width: 1050px;
    }


    /* -----------------------------------------------------
       COLUMNAS DE LOS DÍAS
       ----------------------------------------------------- */

    .dia,
    .dia-calendario {
        min-width: 140px;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       TURNOS
       ----------------------------------------------------- */

    .bloque-turno {
        width: 100%;
        box-sizing: border-box;
    }

    .manana,
    .tarde {
        width: 100%;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       EMPLEADOS DEL CALENDARIO
       ----------------------------------------------------- */

    .fila-empleado {
        width: 100%;
        box-sizing: border-box;
    }

    .zona-trabajo,
    .zona-trabajo.sala,
    .zona-trabajo.cocina {
        width: 100%;
        box-sizing: border-box;
    }


    /* =====================================================
       BOTONES GENERALES
       ===================================================== */

    .boton,
    .boton-secundario,
    .boton-anadir,
    .boton-quitar {
        min-height: 42px;
        touch-action: manipulation;
    }


    .acciones-horarios {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        box-sizing: border-box;
    }

    .acciones-horarios .boton {
        flex: 1 1 auto;
    }


    /* =====================================================
       VENTANA / MODAL PARA EDITAR HORARIO
       ===================================================== */

    .modal-fondo {
        padding: 10px;
        box-sizing: border-box;

        align-items: flex-start;

        overflow-y: auto;
    }

    .modal {
        width: 100%;
        max-width: 100%;

        max-height: calc(100vh - 20px);

        margin: 10px auto;

        padding: 15px;

        overflow-y: auto;
        overflow-x: hidden;

        box-sizing: border-box;

        -webkit-overflow-scrolling: touch;
    }


    #modal-editor {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }


    /* =====================================================
       EDITOR DE HORARIOS
       ===================================================== */

    /*
       En ordenador Mañana y Tarde pueden estar
       una al lado de otra.

       En móvil las colocamos:

       MAÑANA
       ↓
       TARDE
    */

    .turno-editor {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 14px;
        box-sizing: border-box;
    }


    .zona-editor {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }


    .fila-editor {
        width: 100%;

        display: flex;
        flex-wrap: wrap;

        align-items: center;

        gap: 6px;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       INPUTS
       ----------------------------------------------------- */

    .fila-editor input,
    .fila-editor select,
    .modal input,
    .modal select {
        max-width: 100%;
        min-height: 42px;

        font-size: 16px;

        box-sizing: border-box;
    }


    /*
       16px evita que algunos móviles hagan
       zoom automático al pulsar un input.
    */

    .fila-editor input[type="time"] {
        flex: 1 1 110px;
        min-width: 100px;
    }


    /* -----------------------------------------------------
       BOTONES + / -
       ----------------------------------------------------- */

    .añadir-persona,
    .quitar-persona {
        min-width: 42px;
        min-height: 42px;

        display: flex;

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

        touch-action: manipulation;
    }


    /* =====================================================
       SELECTOR
       "APLICAR ESTE HORARIO A MÁS DÍAS"
       ===================================================== */

    /*
       LUN MAR MIÉR JUEV VIE SÁB DOM
       permanecen en una sola fila.
    */

    .selector-dias,
    .dias-aplicar,
    .selector-dias-semana {
        width: 100%;

        display: flex;

        flex-wrap: nowrap;

        gap: 4px;

        overflow-x: auto;

        padding-bottom: 5px;

        -webkit-overflow-scrolling: touch;

        box-sizing: border-box;
    }


    .selector-dias button,
    .dias-aplicar button,
    .selector-dias-semana button {
        flex: 1 0 auto;

        min-width: 42px;

        padding-left: 6px;
        padding-right: 6px;

        font-size: 0.75rem;

        white-space: nowrap;
    }


    /* =====================================================
       BOTONES GUARDAR / ELIMINAR
       ===================================================== */

    #guardar-dia,
    #eliminar-dia {
        width: 100%;
        min-height: 46px;

        margin-top: 8px;
    }


    /* =====================================================
       TARJETAS
       ===================================================== */

    .tarjeta {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }

}


/* =========================================================
   MÓVILES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 400px) {

    .contenedor,
    .pagina-calendario,
    #contenido-horarios {
        padding-left: 6px;
        padding-right: 6px;
    }


    #titulo-mes {
        font-size: 1rem;
    }


    .modal {
        padding: 12px;
    }


    .selector-dias button,
    .dias-aplicar button,
    .selector-dias-semana button {
        min-width: 39px;
        padding-left: 4px;
        padding-right: 4px;
        font-size: 0.7rem;
    }

}
/* =========================================================
   PANARIA APP - NOTAS POR DÍA
   PEGAR AL FINAL DE estilos.css
   ========================================================= */


/* =====================================
   NOTA EN EL EDITOR
===================================== */

.nota-editor {
    margin-top: 22px;
    padding: 18px;

    border-radius: 14px;

    background: #fff7ea;

    border: 1px solid rgba(160, 105, 40, 0.22);

    box-sizing: border-box;
}


.nota-editor-cabecera {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;
}


.nota-editor-cabecera h3 {
    margin: 0;
}


.nota-editor-cabecera small {
    opacity: 0.65;
}


.nota-dia-campo {
    width: 100%;

    min-height: 110px;

    resize: vertical;

    padding: 12px;

    border: 1px solid rgba(0, 0, 0, 0.15);

    border-radius: 10px;

    font-family: inherit;

    font-size: 15px;

    line-height: 1.5;

    box-sizing: border-box;

    outline: none;
}


.nota-dia-campo:focus {
    border-color: rgba(150, 90, 20, 0.65);

    box-shadow: 0 0 0 3px rgba(150, 90, 20, 0.08);
}


/* =====================================
   NOTA EN SEMANA CERRADA
===================================== */

.nota-editor-lectura {
    background: #f5f3ef;
}


.nota-solo-lectura {
    margin-top: 10px;

    padding: 12px;

    border-radius: 10px;

    background: white;

    line-height: 1.5;

    white-space: normal;

    word-break: break-word;
}


/* =====================================
   NOTA VISIBLE EN EL CALENDARIO
===================================== */

.nota-dia-resumen {
    margin-top: 10px;

    padding: 10px;

    border-radius: 10px;

    background: #fff4db;

    border-left: 4px solid #c89445;

    box-sizing: border-box;
}


.nota-dia-titulo {
    margin-bottom: 5px;

    font-weight: 700;

    font-size: 0.85rem;
}


.nota-dia-texto {
    font-size: 0.82rem;

    line-height: 1.35;

    word-break: break-word;
}


/* =====================================
   NOTAS EN MÓVIL
===================================== */

@media (max-width: 650px) {

    .nota-editor {
        padding: 14px;

        margin-top: 16px;
    }


    .nota-dia-campo {
        min-height: 100px;

        font-size: 16px;
    }


    .nota-dia-resumen {
        padding: 8px;
    }
}
/* =========================================================
   PANARIA APP - BOTÓN VER NOTA
   PEGAR AL FINAL DE estilos.css
   ========================================================= */


/* =====================================
   BOTÓN PEQUEÑO EN EL DÍA
===================================== */

.boton-ver-nota {

    margin-top: 8px;

    padding: 5px 9px;

    border: 1px solid rgba(160, 105, 40, 0.30);

    border-radius: 8px;

    background: #fff4db;

    font-family: inherit;

    font-size: 0.75rem;

    font-weight: 600;

    cursor: pointer;

    width: auto;

    max-width: 100%;

    box-sizing: border-box;
}


.boton-ver-nota:hover {

    transform: translateY(-1px);

}


/* =====================================
   VENTANA RÁPIDA DE NOTA
===================================== */

.nota-rapida-fondo {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 15px;

}


.nota-rapida-modal {

    width: min(430px, 100%);

    max-height: 80vh;

    overflow-y: auto;

    padding: 20px;

    border-radius: 16px;

    background: white;

    box-sizing: border-box;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.22);

}


.nota-rapida-cabecera {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;

}


.nota-rapida-cabecera h3 {

    margin: 0 0 4px 0;

}


.nota-rapida-cabecera small {

    opacity: 0.65;

}


.nota-rapida-cerrar {

    width: 36px;

    height: 36px;

    flex-shrink: 0;

    border: none;

    border-radius: 50%;

    background: #eee;

    font-size: 22px;

    cursor: pointer;

}


.nota-rapida-texto {

    padding: 14px;

    border-radius: 10px;

    background: #fff7ea;

    line-height: 1.5;

    word-break: break-word;

}


/* =====================================
   MÓVIL
===================================== */

@media (max-width: 650px) {

    .boton-ver-nota {

        font-size: 0.72rem;

        padding: 5px 7px;

    }


    .nota-rapida-modal {

        padding: 16px;

    }

}
/* =========================================================
   PANARIA APP - VACACIONES
========================================================= */


/* =====================================
   CONTROLES
===================================== */

.controles-vacaciones {
    margin-bottom: 18px;
}


.selector-anio-vacaciones {
    display: flex;
    align-items: center;
    gap: 10px;
}


.selector-anio-vacaciones label {
    font-weight: 700;
}


.selector-anio-vacaciones select {
    min-width: 110px;
    padding: 9px 12px;
    border-radius: 10px;
}


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

.resumen-general-vacaciones {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(120px, 1fr));

    gap: 12px;

    margin-bottom: 20px;
}


.resumen-vacaciones-item {
    padding: 16px;

    border-radius: 14px;

    background: white;

    display: flex;
    flex-direction: column;

    gap: 5px;

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


.resumen-vacaciones-item span {
    font-size: 0.82rem;
    opacity: 0.7;
}


.resumen-vacaciones-item strong {
    font-size: 1.5rem;
}


.resumen-vacaciones-item.destacado {
    background: #fff4db;
}


/* =====================================
   FICHAS DE EMPLEADOS
===================================== */

.lista-vacaciones {
    display: grid;

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

    gap: 15px;

    margin-top: 18px;
}


.ficha-vacaciones {
    width: 100%;

    padding: 18px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    border-radius: 16px;

    background: white;

    text-align: left;

    font-family: inherit;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;

    box-sizing: border-box;
}


.ficha-vacaciones:hover {
    transform: translateY(-2px);

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


.ficha-vacaciones-cabecera {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;
}


.ficha-vacaciones-cabecera strong {
    font-size: 1.05rem;
}


.ficha-vacaciones-cabecera span {
    font-size: 0.78rem;
    opacity: 0.65;
}


.ficha-pendientes {
    display: flex;

    align-items: baseline;

    gap: 7px;

    margin-bottom: 10px;
}


.ficha-pendientes strong {
    font-size: 2rem;
}


.ficha-pendientes span {
    font-size: 0.9rem;
}


.ficha-vacaciones-info {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 12px;

    font-size: 0.78rem;
}


.ficha-vacaciones-info span {
    padding: 5px 8px;

    border-radius: 8px;

    background: #f4f4f4;
}


.barra-vacaciones {
    width: 100%;

    height: 7px;

    margin:
        8px
        0;

    overflow: hidden;

    border-radius: 999px;

    background: #eeeeee;
}


.barra-vacaciones-progreso {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #d9a95d,
            #b88032
        );

    border-radius: 999px;
}


.ficha-vacaciones small {
    opacity: 0.65;
}


/* =====================================
   MODAL EMPLEADO
===================================== */

.modal-vacaciones-fondo {
    overflow-y: auto;

    padding: 20px;

    align-items: flex-start;
}


.modal-vacaciones {
    width: min(
        1100px,
        100%
    );

    margin:
        20px
        auto;

    padding: 24px;

    border-radius: 20px;

    background: #faf9f7;

    box-sizing: border-box;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.22);
}


.cabecera-ficha-vacaciones {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.cabecera-ficha-vacaciones h2 {
    margin:
        10px
        0
        2px;
}


.cabecera-ficha-vacaciones p {
    margin: 0;
    opacity: 0.65;
}


.volver-ficha-vacaciones {
    border: none;

    background: transparent;

    padding: 0;

    font-family: inherit;

    cursor: pointer;
}


.cerrar-ficha-vacaciones {
    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    font-size: 24px;

    cursor: pointer;
}


/* =====================================
   ESTADÍSTICAS INDIVIDUALES
===================================== */

.estadisticas-empleado-vacaciones {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            1fr
        );

    gap: 10px;

    margin-bottom: 22px;
}


.estadisticas-empleado-vacaciones > div {
    padding: 14px;

    border-radius: 13px;

    background: white;

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.estadisticas-empleado-vacaciones span {
    font-size: 0.78rem;
    opacity: 0.7;
}


.estadisticas-empleado-vacaciones strong {
    font-size: 1.6rem;
}


.estadisticas-empleado-vacaciones
.pendientes-empleado {
    background: #fff1ce;
}


/* =====================================
   SECCIONES
===================================== */

.seccion-vacaciones {
    margin-top: 18px;

    padding: 20px;

    border-radius: 16px;

    background: white;
}


.seccion-vacaciones h3 {
    margin-top: 0;
}


.seccion-vacaciones-cabecera {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;
}


.seccion-vacaciones-cabecera p {
    margin-bottom: 0;
    opacity: 0.65;
}


.editar-dias-asignados {
    display: flex;

    gap: 8px;
}


.editar-dias-asignados input {
    width: 80px;

    padding: 8px;

    border-radius: 9px;

    border:
        1px solid
        rgba(0, 0, 0, 0.15);
}


/* =====================================
   AÑADIR PERIODO
===================================== */

.formulario-periodo-vacaciones {
    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    gap: 12px;

    margin-top: 15px;
}


.formulario-periodo-vacaciones label {
    display: flex;

    flex-direction: column;

    gap: 5px;

    font-size: 0.82rem;
}


.formulario-periodo-vacaciones input,
.registrar-dia-devuelto input {
    min-height: 40px;

    padding: 7px 10px;

    border-radius: 9px;

    border:
        1px solid
        rgba(0, 0, 0, 0.15);

    box-sizing: border-box;
}


/* =====================================
   CALENDARIO ANUAL
===================================== */

.calendario-anual-vacaciones {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 16px;

    margin-top: 15px;
}


.mes-vacaciones {
    padding: 12px;

    border:
        1px solid
        rgba(0, 0, 0, 0.08);

    border-radius: 12px;
}


.mes-vacaciones h4 {
    margin:
        0
        0
        10px;

    text-align: center;
}


.cabecera-mes-vacaciones,
.dias-mes-vacaciones {
    display: grid;

    grid-template-columns:
        repeat(
            7,
            1fr
        );

    gap: 3px;
}


.cabecera-mes-vacaciones {
    margin-bottom: 5px;
}


.cabecera-mes-vacaciones span {
    text-align: center;

    font-size: 0.65rem;

    font-weight: 700;

    opacity: 0.55;
}


.dia-calendario-vacaciones,
.dia-vacio-vacaciones {
    aspect-ratio: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 0.72rem;
}


.vacacion-disfrutada {
    background: #d9a95d;

    font-weight: 700;
}


.vacacion-programada {
    background: #f8dfad;

    font-weight: 700;
}


.vacacion-devuelta {
    background: #e5e5e5;

    text-decoration: line-through;

    font-weight: 700;
}


/* =====================================
   LEYENDA
===================================== */

.leyenda-vacaciones {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    font-size: 0.78rem;
}


.leyenda-vacaciones span {
    display: flex;

    align-items: center;

    gap: 5px;
}


.leyenda-vacaciones i {
    width: 12px;

    height: 12px;

    display: inline-block;

    border-radius: 50%;
}


.leyenda-disfrutada {
    background: #d9a95d;
}


.leyenda-programada {
    background: #f8dfad;
}


.leyenda-devuelta {
    background: #e5e5e5;
}


/* =====================================
   HISTORIAL
===================================== */

.historial-vacaciones {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.historial-vacaciones-item {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    padding: 12px;

    border-radius: 10px;

    background: #f7f7f7;
}


.historial-vacaciones-item > div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.historial-vacaciones-item span {
    font-size: 0.8rem;

    opacity: 0.7;
}


.eliminar-periodo-vacaciones {
    border: none;

    background: transparent;

    cursor: pointer;

    font-family: inherit;

    font-size: 0.78rem;

    opacity: 0.65;
}


.historial-vacaciones-item.devuelto {
    background: #f0f0f0;
}


.sin-vacaciones {
    padding: 15px;

    text-align: center;

    opacity: 0.65;
}


/* =====================================
   DÍA DEVUELTO
===================================== */

.registrar-dia-devuelto {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 12px;
}


/* =====================================
   VOLVER INICIO
===================================== */

.acciones-pagina-vacaciones {
    margin-top: 20px;
}


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

@media (
    max-width: 800px
) {

    .resumen-general-vacaciones {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .estadisticas-empleado-vacaciones {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .calendario-anual-vacaciones {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .seccion-vacaciones-cabecera {

        flex-direction: column;

        align-items: stretch;

    }

}


@media (
    max-width: 520px
) {

    .modal-vacaciones-fondo {

        padding: 8px;

    }


    .modal-vacaciones {

        padding: 14px;

        border-radius: 14px;

    }


    .lista-vacaciones {

        grid-template-columns:
            1fr;

    }


    .resumen-general-vacaciones {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .calendario-anual-vacaciones {

        grid-template-columns:
            1fr;

    }


    .formulario-periodo-vacaciones {

        flex-direction: column;

        align-items: stretch;

    }


    .formulario-periodo-vacaciones input {

        width: 100%;

    }


    .editar-dias-asignados {

        width: 100%;

    }


    .editar-dias-asignados input {

        flex: 1;

    }


    .historial-vacaciones-item {

        align-items: flex-start;

    }

}/* =========================================================
   VACACIONES - DISEÑO HORIZONTAL
========================================================= */


/* =====================================
   RESUMEN: SOLO EMPLEADOS
===================================== */

.resumen-general-vacaciones {
    display: flex;
    justify-content: flex-start;

    margin-bottom: 18px;
}


.resumen-solo-empleados {
    width: 130px;
    min-width: 130px;
}


/* =====================================
   FICHAS EN HORIZONTAL
===================================== */

.lista-vacaciones {
    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    gap: 14px;

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding:
        5px
        3px
        15px;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;
}


/* Cada empleada ocupa una ficha compacta */

.ficha-vacaciones {
    flex:
        0
        0
        285px;

    width: 285px;

    min-width: 285px;

    margin: 0;
}


/* Barra de desplazamiento discreta */

.lista-vacaciones::-webkit-scrollbar {
    height: 7px;
}


.lista-vacaciones::-webkit-scrollbar-track {
    background: transparent;
}


.lista-vacaciones::-webkit-scrollbar-thumb {
    background:
        rgba(0, 0, 0, 0.16);

    border-radius: 999px;
}


/* =====================================
   PANTALLAS GRANDES
===================================== */

@media (min-width: 1200px) {

    .ficha-vacaciones {
        flex-basis: 300px;

        width: 300px;

        min-width: 300px;
    }

}


/* =====================================
   MÓVIL
===================================== */

@media (max-width: 650px) {

    .ficha-vacaciones {
        flex-basis: 260px;

        width: 260px;

        min-width: 260px;
    }


    .resumen-solo-empleados {
        width: 115px;

        min-width: 115px;
    }

}/* =========================================================
   VACACIONES - APROVECHAR TODO EL ANCHO
   FICHAS EN FILAS DE IZQUIERDA A DERECHA
========================================================= */


/* =====================================
   CONTENEDOR GENERAL DE VACACIONES
===================================== */

.pagina-vacaciones .contenedor {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding-left: 30px;
    padding-right: 30px;

    box-sizing: border-box;
}


/* =====================================
   CONTROLES SUPERIORES
===================================== */

.pagina-vacaciones .controles-vacaciones {
    width: 100%;
    max-width: none;

    box-sizing: border-box;
}


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

.pagina-vacaciones .resumen-general-vacaciones {
    width: 100%;

    display: flex;

    justify-content: flex-start;

    box-sizing: border-box;
}


/* =====================================
   TARJETA GRANDE DE EMPLEADOS
===================================== */

.pagina-vacaciones .tarjeta {
    width: 100%;
    max-width: none;

    box-sizing: border-box;
}


/* =====================================
   LISTA DE EMPLEADOS
   YA NO ES CARRUSEL
===================================== */

.pagina-vacaciones .lista-vacaciones {
    width: 100%;

    display: grid;

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

    gap: 18px;

    overflow: visible;

    padding: 10px 0 5px;

    box-sizing: border-box;
}


/* =====================================
   FICHA INDIVIDUAL
===================================== */

.pagina-vacaciones .ficha-vacaciones {
    width: 100%;

    min-width: 0;

    max-width: none;

    flex: none;

    box-sizing: border-box;
}


/* =====================================
   PANTALLAS GRANDES
===================================== */

@media (min-width: 1200px) {

    .pagina-vacaciones .lista-vacaciones {

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

    }

}


/* =====================================
   PANTALLAS MUY GRANDES
===================================== */

@media (min-width: 1500px) {

    .pagina-vacaciones .lista-vacaciones {

        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );

    }

}


/* =====================================
   TABLET
===================================== */

@media (max-width: 900px) {

    .pagina-vacaciones .lista-vacaciones {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


/* =====================================
   MÓVIL
===================================== */

@media (max-width: 600px) {

    .pagina-vacaciones .contenedor {

        padding-left: 10px;
        padding-right: 10px;

    }


    .pagina-vacaciones .lista-vacaciones {

        grid-template-columns:
            1fr;

    }

}/* =========================================================
   PANARIA - PORTADA MÁS ANCHA Y EN REJILLA
========================================================= */


/* Contenedor principal de la portada */

.pagina-inicio .contenedor {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding-left: 30px;
    padding-right: 30px;

    box-sizing: border-box;
}


/* Encabezado centrado */

.pagina-inicio .encabezado {
    width: 100%;

    text-align: center;

    margin-bottom: 25px;
}


/* Convertimos las tarjetas principales en rejilla */

.pagina-inicio .contenedor {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 22px;
}


/* El encabezado ocupa toda la fila */

.pagina-inicio .encabezado {
    grid-column:
        1 / -1;
}


/* Todas las tarjetas ocupan su celda */

.pagina-inicio .tarjeta {
    width: 100%;
    max-width: none;

    min-height: 180px;

    padding: 24px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
}


/* Botones abajo y a todo lo ancho */

.pagina-inicio .tarjeta .boton {
    width: 100%;
}


/* Los enlaces también deben ocupar todo */

.pagina-inicio .tarjeta a {
    width: 100%;
    display: block;
}


/* =====================================
   PANTALLAS GRANDES
===================================== */

@media (min-width: 1300px) {

    .pagina-inicio .contenedor {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


/* =====================================
   TABLET
===================================== */

@media (max-width: 900px) {

    .pagina-inicio .contenedor {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        padding-left: 20px;
        padding-right: 20px;
    }

}


/* =====================================
   MÓVIL
===================================== */

@media (max-width: 600px) {

    .pagina-inicio .contenedor {
        grid-template-columns:
            1fr;

        padding-left: 10px;
        padding-right: 10px;
    }

}/* =========================================================
   PORTADA - TÍTULO PANARIA MÁS VISIBLE
========================================================= */

.pagina-inicio .encabezado {
    text-align: center;
    padding: 20px 10px 28px;
}


/* PANARIA */

.pagina-inicio .encabezado h1 {
    margin: 0;

    font-size: clamp(42px, 4vw, 64px);

    font-weight: 800;

    letter-spacing: -1.5px;

    color: #4b3429;

    line-height: 1;

    text-shadow:
        0 2px 8px rgba(255, 255, 255, 0.45);
}


/* GESTIÓN INTERNA */

.pagina-inicio .encabezado p {
    margin: 10px 0 0;

    font-size: clamp(18px, 1.6vw, 24px);

    font-weight: 600;

    letter-spacing: 0.5px;

    color: #684b3c;

    text-shadow:
        0 1px 5px rgba(255, 255, 255, 0.55);
}


/* Móvil */

@media (max-width: 600px) {

    .pagina-inicio .encabezado {
        padding-top: 15px;
        padding-bottom: 20px;
    }

    .pagina-inicio .encabezado h1 {
        font-size: 40px;
    }

    .pagina-inicio .encabezado p {
        font-size: 18px;
    }
}/* =========================================================
   VACACIONES EN LIBRANZAS
========================================================= */

.vacaciones-semana-empleado {
    display: inline-block;

    margin-top: 3px;

    padding: 3px 7px;

    border-radius: 7px;

    background: #fff0c9;

    color: #684b32;

    font-weight: 700;

    font-size: 0.78rem;
}/* =========================================================
   PANARIA APP - PEDIDOS
========================================================= */


/* =====================================
   CONTENEDOR GENERAL
===================================== */

.pagina-pedidos .contenedor {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding-left: 30px;
    padding-right: 30px;

    box-sizing: border-box;
}


/* =====================================
   CABECERA
===================================== */

.encabezado-pedidos {
    text-align: center;

    margin-bottom: 25px;
}


.encabezado-pedidos h1 {
    margin-bottom: 6px;

    font-size: clamp(36px, 4vw, 54px);

    color: #4b3429;
}


.encabezado-pedidos p {
    margin: 0;

    font-size: 18px;

    font-weight: 600;

    color: #684b3c;
}


/* =====================================
   MENÚ DE MÓDULOS
===================================== */

.menu-pedidos {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 18px;

    margin-bottom: 25px;
}


/* =====================================
   TARJETAS
===================================== */

.tarjeta-modulo-pedidos {
    width: 100%;

    min-height: 210px;

    padding: 22px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.92);

    text-align: left;

    font-family: inherit;

    cursor: pointer;

    box-sizing: border-box;

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


.tarjeta-modulo-pedidos:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.10);

    border-color:
        rgba(170, 110, 40, 0.28);
}


.tarjeta-modulo-pedidos h2 {
    margin:
        8px
        0;

    font-size: 1.25rem;

    color: #4b3429;
}


.tarjeta-modulo-pedidos p {
    margin:
        0
        0
        16px;

    line-height: 1.45;

    color: #5f5f5f;
}


.tarjeta-modulo-pedidos span {
    font-size: 0.85rem;

    font-weight: 700;

    color: #8f622f;
}


/* =====================================
   ICONOS
===================================== */

.icono-modulo-pedidos {
    font-size: 30px;

    line-height: 1;
}


/* =====================================
   ZONA DINÁMICA
===================================== */

.contenido-pedidos {
    width: 100%;

    margin-top: 20px;

    box-sizing: border-box;
}


/* =====================================
   BOTÓN VOLVER
===================================== */

.acciones-pagina-pedidos {
    margin-top: 25px;
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 950px) {

    .menu-pedidos {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* =====================================
   MÓVIL
===================================== */

@media (max-width: 600px) {

    .pagina-pedidos .contenedor {
        padding-left: 10px;
        padding-right: 10px;
    }


    .menu-pedidos {
        grid-template-columns:
            1fr;
    }


    .tarjeta-modulo-pedidos {
        min-height: 0;
    }

}/* =========================================================
   PEDIDOS - FALTANTES
========================================================= */


/* =====================================
   PANEL
===================================== */

.panel-pedidos {
    width: 100%;

    margin-top: 20px;

    padding: 24px;

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    box-sizing: border-box;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.07);
}


.cabecera-panel-pedidos {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.cabecera-panel-pedidos h2 {
    margin:
        0
        0
        5px;

    color: #4b3429;
}


.cabecera-panel-pedidos p {
    margin: 0;

    opacity: 0.72;
}


.contador-faltantes {
    flex-shrink: 0;

    padding:
        7px
        11px;

    border-radius: 999px;

    background: #fff0cd;

    color: #684b32;

    font-size: 0.8rem;

    font-weight: 700;
}


/* =====================================
   FORMULARIO
===================================== */

.formulario-faltante {
    display: grid;

    grid-template-columns:
        1fr
        1.4fr
        1fr
        auto;

    gap: 12px;

    align-items: end;

    padding: 18px;

    border-radius: 14px;

    background: #f8f6f2;
}


.campo-pedido {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.campo-pedido label {
    font-size: 0.8rem;

    font-weight: 700;

    color: #5d4538;
}


.campo-pedido select {
    width: 100%;

    min-height: 44px;

    padding:
        8px
        10px;

    border:
        1px solid
        rgba(0, 0, 0, 0.15);

    border-radius: 9px;

    background: white;

    font-family: inherit;

    box-sizing: border-box;
}


.boton-anadir-faltante {
    min-height: 44px;

    white-space: nowrap;
}


/* =====================================
   PRODUCTO NUEVO
===================================== */

.anadir-producto-catalogo {
    margin-top: 12px;

    padding: 12px;

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            0.6
        );
}


.anadir-producto-catalogo summary {
    cursor: pointer;

    font-size: 0.84rem;

    font-weight: 700;

    color: #795739;
}


.formulario-producto-nuevo {
    display: flex;

    gap: 10px;

    margin-top: 12px;
}


.formulario-producto-nuevo input {
    flex: 1;

    min-height: 42px;

    padding:
        8px
        11px;

    border:
        1px solid
        rgba(0, 0, 0, 0.15);

    border-radius: 9px;

    font-family: inherit;

    box-sizing: border-box;
}


/* =====================================
   LISTA
===================================== */

.cabecera-lista-faltantes {
    margin-top: 25px;
}


.cabecera-lista-faltantes h3 {
    margin-bottom: 12px;

    color: #4b3429;
}


.lista-faltantes {
    display: grid;

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

    gap: 12px;
}


/* =====================================
   PRODUCTO FALTANTE
===================================== */

.item-faltante {
    padding: 15px;

    border:
        1px solid
        rgba(0, 0, 0, 0.08);

    border-radius: 13px;

    background: white;
}


.faltante-principal {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;
}


.faltante-principal > div {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}


.nombre-producto-faltante {
    font-size: 1rem;

    color: #443027;
}


.estado-faltante {
    display: inline-block;

    padding:
        4px
        7px;

    border-radius: 7px;

    font-size: 0.72rem;

    font-weight: 700;
}


.estado-poco {
    background: #fff1c8;

    color: #765218;
}


.estado-agotado {
    background: #f4dddd;

    color: #803434;
}


.estado-urgente {
    background: #e8caca;

    color: #762626;
}


.eliminar-faltante {
    border: none;

    background: transparent;

    font-family: inherit;

    font-size: 0.75rem;

    opacity: 0.55;

    cursor: pointer;
}


.eliminar-faltante:hover {
    opacity: 1;
}


/* =====================================
   INFORMACIÓN DEL REGISTRO
===================================== */

.datos-faltante {
    display: flex;

    flex-wrap: wrap;

    gap:
        6px
        12px;

    margin-top: 11px;

    padding-top: 10px;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.06);
}


.datos-faltante span {
    font-size: 0.75rem;

    color: #686868;
}


/* =====================================
   VACÍO
===================================== */

.sin-faltantes {
    padding: 30px;

    border-radius: 12px;

    background: #f7f7f7;

    text-align: center;

    opacity: 0.65;
}


/* =====================================
   MÓDULOS PENDIENTES
===================================== */

.modulo-en-construccion {
    text-align: center;

    padding:
        45px
        20px;
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 950px) {

    .formulario-faltante {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }

}


/* =====================================
   MÓVIL
===================================== */

@media (max-width: 600px) {

    .panel-pedidos {
        padding: 14px;
    }


    .cabecera-panel-pedidos {
        flex-direction: column;
    }


    .formulario-faltante {
        grid-template-columns:
            1fr;
    }


    .formulario-producto-nuevo {
        flex-direction: column;
    }


    .lista-faltantes {
        grid-template-columns:
            1fr;
    }

}/* =========================================================
   PEDIDOS - PEDIDO SEMANAL
========================================================= */

.bloque-usuario-pedido {
    max-width: 420px;

    margin-bottom: 22px;

    padding: 16px;

    border-radius: 12px;

    background: #f8f6f2;

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.bloque-usuario-pedido label {
    font-size: 0.8rem;

    font-weight: 700;

    color: #5d4538;
}


.bloque-usuario-pedido select {
    width: 100%;

    min-height: 44px;

    padding: 8px 10px;

    border: 1px solid rgba(0, 0, 0, 0.15);

    border-radius: 9px;

    background: white;

    font-family: inherit;
}


.lista-pedido-semanal {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.item-pedido-semanal {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 16px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    border-radius: 13px;

    background: white;
}


.selector-producto-pedido {
    display: flex;

    align-items: center;

    gap: 12px;

    flex: 1;

    cursor: pointer;
}


.selector-producto-pedido input {
    width: 20px;

    height: 20px;
}


.selector-producto-pedido span {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.selector-producto-pedido strong {
    color: #443027;

    font-size: 1rem;
}


.selector-producto-pedido small {
    color: #777;

    font-size: 0.75rem;
}


.cantidad-pedido {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.cantidad-pedido label {
    font-size: 0.72rem;

    font-weight: 700;

    color: #5d4538;
}


.cantidad-pedido input {
    width: 90px;

    min-height: 42px;

    padding: 7px 8px;

    border: 1px solid rgba(0, 0, 0, 0.15);

    border-radius: 8px;

    font-family: inherit;

    box-sizing: border-box;
}


.acciones-pedido-semanal {
    display: flex;

    justify-content: flex-end;

    margin-top: 20px;
}


@media (max-width: 600px) {

    .item-pedido-semanal {
        align-items: flex-start;

        flex-direction: column;
    }


    .cantidad-pedido {
        width: 100%;
    }


    .cantidad-pedido input {
        width: 100%;
    }


    .acciones-pedido-semanal .boton {
        width: 100%;
    }

}/* =========================================================
   PEDIDOS REALIZADOS
========================================================= */

.separador-pedidos {
    width: 100%;
    height: 1px;

    margin: 35px 0 25px;

    background:
        rgba(0, 0, 0, 0.10);
}


.titulo-bloque-pedido {
    margin-bottom: 16px;
}


.titulo-bloque-pedido h3 {
    margin: 0;

    color: #4b3429;

    font-size: 1.15rem;
}


/* =====================================
   HISTORIAL
===================================== */

.historial-pedidos {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


/* =====================================
   TARJETA PEDIDO
===================================== */

.tarjeta-pedido-realizado {
    padding: 18px;

    border:
        1px solid
        rgba(0, 0, 0, 0.08);

    border-radius: 14px;

    background: white;
}


.cabecera-pedido-realizado {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 15px;
}


.numero-pedido {
    display: block;

    margin-bottom: 7px;

    font-size: 1.05rem;

    color: #443027;
}


/* =====================================
   INFORMACIÓN
===================================== */

.datos-pedido-realizado {
    display: flex;

    flex-wrap: wrap;

    gap: 6px 12px;
}


.datos-pedido-realizado span {
    font-size: 0.76rem;

    color: #777;
}


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

.estado-pedido-realizado {
    flex-shrink: 0;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 0.75rem;

    font-weight: 700;
}


.pedido-pendiente {
    background: #fff0c9;

    color: #74501d;
}


.pedido-recibido {
    background: #dcefdc;

    color: #326232;
}


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

.resumen-productos-pedido {
    margin-top: 13px;

    font-size: 0.8rem;

    color: #666;
}


/* =====================================
   DETALLE
===================================== */

.detalle-pedido-realizado {
    display: grid;

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

    gap: 8px;

    margin-top: 15px;

    padding-top: 15px;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.07);
}


.oculto-pedido {
    display: none;
}


.producto-pedido-realizado {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    padding: 9px 11px;

    border-radius: 9px;

    background: #f7f5f1;
}


.producto-pedido-realizado strong {
    color: #4b3429;

    font-size: 0.82rem;
}


.producto-pedido-realizado span {
    font-size: 0.78rem;

    color: #666;
}


/* =====================================
   BOTONES
===================================== */

.acciones-pedido-realizado {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 16px;
}


.boton-secundario-pedido,
.boton-recibir-pedido,
.boton-borrar-pedido {
    padding: 8px 12px;

    border: none;

    border-radius: 8px;

    font-family: inherit;

    font-size: 0.78rem;

    font-weight: 700;

    cursor: pointer;
}


.boton-secundario-pedido {
    background: #eeeae4;

    color: #59483e;
}


.boton-recibir-pedido {
    background: #dcefdc;

    color: #326232;
}


.boton-borrar-pedido {
    background: #f1dddd;

    color: #7a3434;
}


/* =====================================
   MÓVIL
===================================== */

@media (max-width: 600px) {

    .cabecera-pedido-realizado {
        flex-direction: column;
    }


    .acciones-pedido-realizado {
        flex-direction: column;
    }


    .acciones-pedido-realizado button {
        width: 100%;
    }


    .detalle-pedido-realizado {
        grid-template-columns: 1fr;
    }

}/* =========================================================
   FALTANTES AGRUPADOS POR EMPLEADO
========================================================= */

.lista-faltantes {
    display: grid;

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

    gap: 16px;
}


/* =====================================
   GRUPO DEL EMPLEADO
===================================== */

.grupo-faltantes-empleado {
    overflow: hidden;

    border:
        1px solid
        rgba(0, 0, 0, 0.09);

    border-radius: 14px;

    background: #ffffff;
}


/* =====================================
   CABECERA EMPLEADO
===================================== */

.cabecera-grupo-faltantes {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding:
        13px
        15px;

    background: #f6f2ed;

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.07);
}


.cabecera-grupo-faltantes > div {
    display: flex;

    align-items: center;

    gap: 7px;
}


.cabecera-grupo-faltantes strong {
    font-size: 1rem;

    color: #4b3429;
}


.icono-empleado-faltantes {
    font-size: 0.9rem;
}


.contador-empleado-faltantes {
    padding:
        4px
        8px;

    border-radius: 999px;

    background: #ffffff;

    color: #70503b;

    font-size: 0.72rem;

    font-weight: 700;
}


/* =====================================
   LISTA PRODUCTOS
===================================== */

.productos-empleado-faltantes {
    display: flex;

    flex-direction: column;
}


/* =====================================
   PRODUCTO
===================================== */

.producto-empleado-faltante {
    padding:
        12px
        15px;

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.06);
}


.producto-empleado-faltante:last-child {
    border-bottom: none;
}


.producto-empleado-superior {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;
}


.producto-empleado-superior > div {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


/* =====================================
   FECHA
===================================== */

.fecha-producto-faltante {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 7px;
}


.fecha-producto-faltante span {
    font-size: 0.72rem;

    color: #777;
}


/* =====================================
   MÓVIL
===================================== */

@media (max-width: 600px) {

    .lista-faltantes {
        grid-template-columns: 1fr;
    }

}/* =========================================================
   FALTANTES - BUSCADOR Y CATEGORÍAS
========================================================= */

.formulario-faltante-mejorado {
    grid-template-columns:
        1fr
        1fr
        1.4fr
        1.4fr
        1fr
        auto;
}


/* =====================================
   BUSCADOR
===================================== */

.campo-buscador-producto input {
    width: 100%;

    min-height: 44px;

    padding: 8px 11px;

    border:
        1px solid
        rgba(0, 0, 0, 0.15);

    border-radius: 9px;

    background: white;

    font-family: inherit;

    box-sizing: border-box;
}


.campo-buscador-producto input:focus {
    outline: none;

    border-color:
        rgba(143, 98, 47, 0.55);

    box-shadow:
        0 0 0 3px
        rgba(143, 98, 47, 0.08);
}


/* =====================================
   CATEGORÍA EN PRODUCTO
===================================== */

.categoria-producto-faltante {
    display: inline-block;

    padding: 3px 7px;

    border-radius: 7px;

    background: #eeeae4;

    color: #665548;

    font-size: 0.68rem;

    font-weight: 700;
}


/* =====================================
   AÑADIR PRODUCTO NUEVO
===================================== */

.formulario-producto-nuevo-categorias {
    display: grid;

    grid-template-columns:
        minmax(220px, 1fr)
        minmax(180px, 260px)
        auto;

    gap: 10px;
}


.formulario-producto-nuevo-categorias select {
    min-height: 42px;

    padding: 8px 10px;

    border:
        1px solid
        rgba(0, 0, 0, 0.15);

    border-radius: 9px;

    background: white;

    font-family: inherit;
}


/* =====================================
   CATEGORÍA EN DETALLE DEL PEDIDO
===================================== */

.producto-pedido-realizado > div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.categoria-detalle-pedido {
    font-size: 0.67rem;

    color: #888;
}


/* =====================================
   PANTALLAS MEDIAS
===================================== */

@media (max-width: 1200px) {

    .formulario-faltante-mejorado {

        grid-template-columns:
            repeat(
                3,
                1fr
            );

    }

}


/* =====================================
   TABLET
===================================== */

@media (max-width: 850px) {

    .formulario-faltante-mejorado {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .formulario-producto-nuevo-categorias {

        grid-template-columns:
            1fr
            1fr;

    }


    .formulario-producto-nuevo-categorias .boton {

        grid-column:
            1 / -1;

    }

}


/* =====================================
   MÓVIL
===================================== */

@media (max-width: 600px) {

    .formulario-faltante-mejorado {

        grid-template-columns:
            1fr;

    }


    .formulario-producto-nuevo-categorias {

        grid-template-columns:
            1fr;

    }


    .formulario-producto-nuevo-categorias .boton {

        grid-column:
            auto;

    }

}/* =========================================================
   FALTANTES - CANTIDAD RESTANTE + GESTIÓN CATÁLOGO
========================================================= */


/* =====================================
   FORMULARIO PRINCIPAL
===================================== */

.formulario-faltante-mejorado {
    grid-template-columns:
        1fr
        1fr
        1.25fr
        1.35fr
        0.9fr
        0.8fr
        auto;
}


/* =====================================
   INPUT DE CANTIDAD
===================================== */

.campo-pedido input[type="number"] {
    width: 100%;

    min-height: 44px;

    padding:
        8px
        10px;

    border:
        1px solid
        rgba(0, 0, 0, 0.15);

    border-radius: 9px;

    background: white;

    font-family: inherit;

    box-sizing: border-box;
}


/* =====================================
   CANTIDAD VISIBLE EN FALTANTES
===================================== */

.cantidad-restante-visible {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding:
        3px
        7px;

    border-radius: 7px;

    background: #eef2e8;

    color: #536243;

    font-size: 0.72rem;
}


.cantidad-restante-visible strong {
    color: #405036;
}


/* =====================================
   GESTIONAR CATÁLOGO
===================================== */

.gestionar-catalogo-pedidos {
    margin-top: 10px;

    padding: 12px;

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            0.6
        );
}


.gestionar-catalogo-pedidos summary {
    cursor: pointer;

    font-size: 0.84rem;

    font-weight: 700;

    color: #795739;
}


/* =====================================
   ELIMINAR PRODUCTO
===================================== */

.formulario-eliminar-producto {
    display: grid;

    grid-template-columns:
        1fr
        auto;

    gap: 10px;

    margin-top: 12px;
}


.formulario-eliminar-producto select {
    min-height: 42px;

    padding:
        8px
        10px;

    border:
        1px solid
        rgba(0, 0, 0, 0.15);

    border-radius: 9px;

    background: white;

    font-family: inherit;
}


.boton-eliminar-producto-catalogo {
    min-height: 42px;

    padding:
        8px
        14px;

    border: none;

    border-radius: 9px;

    background: #f1dddd;

    color: #7a3434;

    font-family: inherit;

    font-weight: 700;

    cursor: pointer;
}


.boton-eliminar-producto-catalogo:hover {
    background: #eacccc;
}


/* =====================================
   PANTALLAS MEDIAS
===================================== */

@media (max-width: 1250px) {

    .formulario-faltante-mejorado {

        grid-template-columns:
            repeat(
                3,
                1fr
            );

    }

}


/* =====================================
   TABLET
===================================== */

@media (max-width: 850px) {

    .formulario-faltante-mejorado {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }

}


/* =====================================
   MÓVIL
===================================== */

@media (max-width: 600px) {

    .formulario-faltante-mejorado {

        grid-template-columns:
            1fr;

    }


    .formulario-eliminar-producto {

        grid-template-columns:
            1fr;

    }


    .boton-eliminar-producto-catalogo {

        width: 100%;

    }

}/* =========================================================
   ALBARANES
========================================================= */

.formulario-albaran {
    display: grid;

    grid-template-columns:
        1fr
        1.3fr
        0.7fr
        1.5fr
        auto;

    gap: 12px;

    align-items: end;

    padding: 18px;

    border-radius: 14px;

    background: #f8f6f2;
}


/* =====================================
   ARCHIVO
===================================== */

.campo-archivo-albaran input {
    width: 100%;

    min-height: 44px;

    padding: 7px;

    border:
        1px solid
        rgba(0, 0, 0, 0.15);

    border-radius: 9px;

    background: white;

    box-sizing: border-box;
}


/* =====================================
   AVISO
===================================== */

.aviso-albaranes-local {
    margin-top: 12px;

    padding: 10px 12px;

    border-radius: 9px;

    background: #fff3cf;

    color: #6f5529;

    font-size: 0.77rem;
}


/* =====================================
   LISTA
===================================== */

.lista-albaranes {
    display: grid;

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

    gap: 15px;
}


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

.tarjeta-albaran {
    padding: 16px;

    border:
        1px solid
        rgba(0, 0, 0, 0.08);

    border-radius: 14px;

    background: white;
}


.cabecera-tarjeta-albaran {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 12px;
}


.cabecera-tarjeta-albaran strong {
    color: #473228;
}


/* =====================================
   DATOS
===================================== */

.datos-albaran {
    display: flex;

    flex-wrap: wrap;

    gap: 6px 10px;

    margin-top: 7px;
}


.datos-albaran span {
    font-size: 0.72rem;

    color: #777;
}


.tipo-albaran {
    flex-shrink: 0;

    padding: 4px 8px;

    border-radius: 999px;

    background: #eeeae4;

    color: #675548;

    font-size: 0.68rem;

    font-weight: 700;
}


/* =====================================
   PEDIDO ASOCIADO
===================================== */

.pedido-asociado-albaran {
    margin-top: 12px;

    padding: 8px 10px;

    border-radius: 8px;

    background: #edf4e8;

    color: #536445;

    font-size: 0.76rem;
}


.pedido-asociado-albaran.sin-asociar {
    background: #f2f2f2;

    color: #777;
}


/* =====================================
   PREVISUALIZACIÓN
===================================== */

.preview-albaran {
    width: 100%;

    height: 180px;

    margin-top: 12px;

    overflow: hidden;

    border-radius: 10px;

    background: #eee;
}


.preview-albaran img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* =====================================
   BOTONES
===================================== */

.acciones-albaran {
    display: flex;

    gap: 8px;

    margin-top: 14px;
}


.boton-ver-albaran,
.boton-borrar-albaran {
    padding: 8px 12px;

    border: none;

    border-radius: 8px;

    font-family: inherit;

    font-size: 0.76rem;

    font-weight: 700;

    cursor: pointer;
}


.boton-ver-albaran {
    background: #eeeae4;

    color: #59483e;
}


.boton-borrar-albaran {
    background: #f1dddd;

    color: #7a3434;
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 1100px) {

    .formulario-albaran {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }

}


/* =====================================
   MÓVIL
===================================== */

@media (max-width: 600px) {

    .formulario-albaran {

        grid-template-columns:
            1fr;

    }


    .lista-albaranes {

        grid-template-columns:
            1fr;

    }


    .acciones-albaran {

        flex-direction: column;

    }


    .acciones-albaran button {

        width: 100%;

    }

}/* =========================================================
   COMPRAS EXTERNAS
========================================================= */

.formulario-compra-externa {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.5fr;

    gap: 12px;

    padding: 18px;

    border-radius: 14px;

    background: #f8f6f2;
}


.formulario-compra-externa input {
    width: 100%;

    min-height: 44px;

    padding: 8px 10px;

    border:
        1px solid
        rgba(0, 0, 0, 0.15);

    border-radius: 9px;

    box-sizing: border-box;

    font-family: inherit;
}


/* =========================================================
   PRODUCTOS DE LA COMPRA
========================================================= */

.bloque-productos-compra {
    margin-top: 20px;
}


.bloque-productos-compra h3 {
    color: #4b3429;

    margin-bottom: 12px;
}


.formulario-producto-compra {
    display: grid;

    grid-template-columns:
        1fr
        1.3fr
        1.5fr
        0.6fr
        auto;

    gap: 10px;

    align-items: end;

    padding: 15px;

    border-radius: 12px;

    background: #f8f6f2;
}


.formulario-producto-compra input {
    width: 100%;

    min-height: 44px;

    padding: 8px 10px;

    border:
        1px solid
        rgba(0, 0, 0, 0.15);

    border-radius: 9px;

    box-sizing: border-box;

    font-family: inherit;
}


/* =========================================================
   PRODUCTOS AÑADIDOS
========================================================= */

.productos-compra-actual {
    display: grid;

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

    gap: 10px;

    margin-top: 12px;
}


.sin-productos-compra {
    padding: 18px;

    border-radius: 10px;

    background: #f5f5f5;

    color: #777;

    font-size: 0.8rem;

    text-align: center;
}


.producto-compra-actual {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    padding: 12px;

    border:
        1px solid
        rgba(0, 0, 0, 0.08);

    border-radius: 10px;

    background: white;
}


.producto-compra-actual > div:first-child {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.producto-compra-actual strong {
    color: #473228;
}


.producto-compra-actual span {
    font-size: 0.72rem;

    color: #777;
}


.producto-compra-cantidad {
    display: flex;

    align-items: center;

    gap: 8px;
}


.producto-compra-cantidad > span {
    padding: 4px 7px;

    border-radius: 7px;

    background: #eeeae4;

    font-weight: 700;

    color: #5f4b3e;
}


.producto-compra-cantidad button {
    border: none;

    background: transparent;

    color: #8b4949;

    font-family: inherit;

    cursor: pointer;
}


/* =========================================================
   DATOS FINALES
========================================================= */

.datos-finales-compra {
    display: grid;

    grid-template-columns:
        0.8fr
        1.5fr
        auto;

    gap: 12px;

    align-items: end;

    margin-top: 20px;

    padding: 18px;

    border-radius: 14px;

    background: #f8f6f2;
}


.datos-finales-compra input {
    width: 100%;

    min-height: 44px;

    padding: 8px 10px;

    border:
        1px solid
        rgba(0, 0, 0, 0.15);

    border-radius: 9px;

    background: white;

    box-sizing: border-box;

    font-family: inherit;
}


/* =========================================================
   HISTORIAL
========================================================= */

.lista-compras-externas {
    display: grid;

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

    gap: 14px;
}


.tarjeta-compra-externa {
    padding: 16px;

    border:
        1px solid
        rgba(0, 0, 0, 0.08);

    border-radius: 14px;

    background: white;
}


.cabecera-compra-externa {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 12px;
}


.tienda-compra-externa {
    font-size: 1.05rem;

    color: #473228;
}


.datos-compra-externa {
    display: flex;

    flex-wrap: wrap;

    gap: 6px 10px;

    margin-top: 6px;
}


.datos-compra-externa span {
    font-size: 0.72rem;

    color: #777;
}


.importe-compra-externa {
    flex-shrink: 0;

    padding: 6px 9px;

    border-radius: 9px;

    background: #e8f0e1;

    color: #4f633f;

    font-size: 0.82rem;

    font-weight: 700;
}


.motivo-compra-externa {
    margin-top: 10px;

    padding: 8px 10px;

    border-radius: 8px;

    background: #f8f6f2;

    color: #6d625b;

    font-size: 0.76rem;
}


.resumen-compra-externa {
    margin-top: 12px;

    color: #777;

    font-size: 0.78rem;
}


/* =========================================================
   DETALLE
========================================================= */

.detalle-compra-externa {
    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-top: 12px;

    padding-top: 12px;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.07);
}


.detalle-compra-externa.oculto-pedido {
    display: none;
}


.producto-historial-compra {
    display: flex;

    justify-content: space-between;

    gap: 12px;

    padding: 8px 10px;

    border-radius: 8px;

    background: #f7f5f1;
}


.producto-historial-compra > div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.producto-historial-compra strong {
    color: #4b3429;

    font-size: 0.82rem;
}


.producto-historial-compra small {
    color: #888;
}


.producto-historial-compra > span {
    font-weight: 700;

    color: #5e554f;
}


/* =========================================================
   BOTONES
========================================================= */

.acciones-compra-externa {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 14px;
}


.boton-ver-detalle-compra,
.boton-ver-ticket,
.boton-borrar-compra {
    padding: 8px 11px;

    border: none;

    border-radius: 8px;

    font-family: inherit;

    font-size: 0.76rem;

    font-weight: 700;

    cursor: pointer;
}


.boton-ver-detalle-compra {
    background: #eeeae4;

    color: #59483e;
}


.boton-ver-ticket {
    background: #e4ecf2;

    color: #3f5d72;
}


.boton-borrar-compra {
    background: #f1dddd;

    color: #7a3434;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .formulario-producto-compra {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .datos-finales-compra {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

    .formulario-compra-externa,
    .formulario-producto-compra,
    .datos-finales-compra {
        grid-template-columns: 1fr;
    }


    .productos-compra-actual,
    .lista-compras-externas {
        grid-template-columns: 1fr;
    }


    .acciones-compra-externa {
        flex-direction: column;
    }


    .acciones-compra-externa button {
        width: 100%;
    }

}/* =========================================================
   HISTORIAL Y ESTADÍSTICAS
========================================================= */


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

.resumen-estadisticas {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-bottom: 30px;
}


.tarjeta-estadistica {
    display: flex;

    flex-direction: column;

    gap: 7px;

    min-height: 95px;

    padding: 16px;

    border-radius: 13px;

    background: #f8f6f2;

    box-sizing: border-box;
}


.tarjeta-estadistica span {
    color: #786b62;

    font-size: 0.74rem;

    font-weight: 700;
}


.tarjeta-estadistica strong {
    margin-top: auto;

    color: #473228;

    font-size: 1.5rem;
}


/* =====================================
   SECCIONES
===================================== */

.seccion-estadisticas {
    margin-top: 30px;
}


.seccion-estadisticas > h3,
.titulo-historial-estadisticas h3 {
    margin:
        0
        0
        15px;

    color: #4b3429;
}


.titulo-historial-estadisticas p {
    margin:
        -8px
        0
        15px;

    color: #777;

    font-size: 0.78rem;
}


/* =====================================
   GRID
===================================== */

.grid-estadisticas {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 16px;
}


/* =====================================
   BLOQUES
===================================== */

.bloque-estadistica {
    padding: 18px;

    border:
        1px solid
        rgba(0, 0, 0, 0.07);

    border-radius: 14px;

    background: white;
}


.bloque-estadistica h4 {
    margin:
        0
        0
        16px;

    color: #4b3429;

    font-size: 0.95rem;
}


/* =====================================
   RANKINGS
===================================== */

.lista-ranking-estadistica {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


.fila-ranking-estadistica {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.ranking-superior {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    font-size: 0.78rem;

    color: #62564f;
}


.ranking-superior > strong {
    flex-shrink: 0;

    color: #49362d;
}


.ranking-superior small {
    font-weight: 500;

    color: #888;
}


/* =====================================
   BARRAS
===================================== */

.barra-estadistica {
    width: 100%;

    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: #eeeae5;
}


.relleno-barra-estadistica {
    height: 100%;

    border-radius: 999px;

    background: #a87b52;

    transition:
        width 0.3s ease;
}


/* =====================================
   DÍA POR PRODUCTO
===================================== */

.lista-dia-producto {
    display: flex;

    flex-direction: column;
}


.fila-dia-producto {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding:
        9px
        0;

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.06);

    font-size: 0.8rem;
}


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


.fila-dia-producto span {
    color: #62564f;
}


.fila-dia-producto strong {
    color: #4b3429;
}


/* =====================================
   SIN DATOS
===================================== */

.sin-datos-estadistica {
    padding: 22px;

    border-radius: 10px;

    background: #f7f7f7;

    text-align: center;

    color: #888;

    font-size: 0.78rem;
}


/* =====================================
   HISTORIAL FALTANTES
===================================== */

.historial-faltantes-completo {
    display: grid;

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

    gap: 11px;
}


.fila-historial-faltante {
    padding: 13px;

    border:
        1px solid
        rgba(0, 0, 0, 0.07);

    border-radius: 11px;

    background: white;
}


.historial-faltante-principal {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;
}


.historial-faltante-principal > div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.historial-faltante-principal strong {
    color: #473228;
}


.historial-faltante-principal > div > span {
    color: #888;

    font-size: 0.68rem;
}


/* =====================================
   RESULTADO
===================================== */

.resultado-historial-faltante {
    flex-shrink: 0;

    padding:
        4px
        7px;

    border-radius: 7px;

    font-size: 0.67rem;

    font-weight: 700;
}


.resultado-pedido {
    background: #e4efde;

    color: #49623c;
}


.resultado-eliminado {
    background: #f0e5e5;

    color: #7d5555;
}


/* =====================================
   DATOS HISTORIAL
===================================== */

.datos-historial-faltante {
    display: flex;

    flex-wrap: wrap;

    gap:
        5px
        10px;

    margin-top: 9px;

    padding-top: 8px;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.05);
}


.datos-historial-faltante span {
    color: #777;

    font-size: 0.7rem;
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 1150px) {

    .resumen-estadisticas {

        grid-template-columns:
            repeat(
                3,
                1fr
            );

    }

}


/* =====================================
   MÓVIL / TABLET PEQUEÑA
===================================== */

@media (max-width: 750px) {

    .grid-estadisticas {

        grid-template-columns:
            1fr;

    }


    .resumen-estadisticas {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }

}


/* =====================================
   MÓVIL
===================================== */

@media (max-width: 500px) {

    .resumen-estadisticas {

        grid-template-columns:
            1fr;

    }


    .historial-faltantes-completo {

        grid-template-columns:
            1fr;

    }

}/* =========================================================
   VACACIONES - MEJORA VISUAL
   MÁS COLOR, VIDA Y PROFUNDIDAD
========================================================= */


/* =========================================================
   FONDO GENERAL DE LA PÁGINA
========================================================= */

.pagina-vacaciones {
    background:
        linear-gradient(
            180deg,
            #fbf8f4 0%,
            #f5efe8 100%
        );
}


/* =========================================================
   TARJETA GRANDE DE EMPLEADOS
========================================================= */

.pagina-vacaciones .tarjeta {
    background:
        rgba(255, 253, 249, 0.96);

    border:
        1px solid
        rgba(90, 64, 50, 0.08);

    box-shadow:
        0 12px 35px
        rgba(90, 64, 50, 0.08);
}


/* =========================================================
   TÍTULO EMPLEADOS
========================================================= */

.pagina-vacaciones
.titulo-lista-vacaciones h2 {

    color:
        #5a4032;

    font-size:
        1.65rem;

    margin-bottom:
        6px;
}


.pagina-vacaciones
.titulo-lista-vacaciones p {

    color:
        #75675f;
}


/* =========================================================
   FICHA DE CADA EMPLEADO
========================================================= */

.pagina-vacaciones
.ficha-vacaciones {

    position:
        relative;

    overflow:
        hidden;

    padding:
        20px;

    border:
        1px solid
        rgba(90, 64, 50, 0.10);

    border-radius:
        18px;

    background:
        linear-gradient(
            180deg,
            #fffdfa 0%,
            #fffaf4 100%
        );

    box-shadow:
        0 6px 18px
        rgba(90, 64, 50, 0.06);

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


/* Línea superior decorativa */

.pagina-vacaciones
.ficha-vacaciones::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        5px;

    background:
        linear-gradient(
            90deg,
            #5a4032,
            #c89d56
        );
}


/* Hover */

.pagina-vacaciones
.ficha-vacaciones:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(200, 157, 86, 0.45);

    box-shadow:
        0 15px 32px
        rgba(90, 64, 50, 0.14);
}


/* =========================================================
   CABECERA DE LA FICHA
========================================================= */

.pagina-vacaciones
.ficha-vacaciones-cabecera strong {

    color:
        #4d382e;

    font-size:
        1.08rem;
}


.pagina-vacaciones
.ficha-vacaciones-cabecera span {

    color:
        #9a7440;

    font-weight:
        600;

    opacity:
        1;
}


/* =========================================================
   DÍAS PENDIENTES
========================================================= */

.pagina-vacaciones
.ficha-pendientes strong {

    font-size:
        2.15rem;

    color:
        #b78337;

    line-height:
        1;
}


.pagina-vacaciones
.ficha-pendientes span {

    color:
        #5f514a;

    font-weight:
        500;
}


/* =========================================================
   ETIQUETAS
========================================================= */

.pagina-vacaciones
.ficha-vacaciones-info span {

    padding:
        6px 9px;

    border-radius:
        999px;

    font-weight:
        600;
}


/* Disfrutados */

.pagina-vacaciones
.ficha-vacaciones-info span:nth-child(1) {

    background:
        #e5f3e8;

    color:
        #3d6f48;
}


/* Programados */

.pagina-vacaciones
.ficha-vacaciones-info span:nth-child(2) {

    background:
        #e7effb;

    color:
        #47698c;
}


/* Devueltos */

.pagina-vacaciones
.ficha-vacaciones-info span:nth-child(3) {

    background:
        #f6ead8;

    color:
        #8d6735;
}


/* =========================================================
   BARRA DE PROGRESO
========================================================= */

.pagina-vacaciones
.barra-vacaciones {

    height:
        9px;

    margin:
        12px
        0
        10px;

    background:
        #eee6dd;

    box-shadow:
        inset
        0 1px 3px
        rgba(0, 0, 0, 0.08);
}


.pagina-vacaciones
.barra-vacaciones-progreso {

    background:
        linear-gradient(
            90deg,
            #d5aa60,
            #b97c2f
        );

    box-shadow:
        0 0 10px
        rgba(185, 124, 47, 0.28);

    transition:
        width 0.35s ease;
}


/* =========================================================
   TEXTO INFERIOR
========================================================= */

.pagina-vacaciones
.ficha-vacaciones small {

    color:
        #776a63;

    opacity:
        1;
}


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

.pagina-vacaciones
.resumen-solo-empleados {

    background:
        linear-gradient(
            135deg,
            #fffaf3,
            #f5e8d7
        );

    border:
        1px solid
        rgba(200, 157, 86, 0.22);

    box-shadow:
        0 6px 16px
        rgba(90, 64, 50, 0.08);
}


.pagina-vacaciones
.resumen-solo-empleados span {

    color:
        #79655a;

    opacity:
        1;
}


.pagina-vacaciones
.resumen-solo-empleados strong {

    color:
        #b78337;
}


/* =========================================================
   SELECTOR DEL AÑO
========================================================= */

.pagina-vacaciones
.selector-anio-vacaciones select {

    border:
        1px solid
        rgba(90, 64, 50, 0.18);

    border-radius:
        10px;

    background:
        #fffdf9;

    color:
        #4d382e;

    font-weight:
        600;
}


/* =========================================================
   BOTÓN VOLVER
========================================================= */

.pagina-vacaciones
.acciones-pagina-vacaciones
.boton {

    background:
        linear-gradient(
            90deg,
            #5a4032,
            #6c4d3d
        );

    box-shadow:
        0 6px 18px
        rgba(90, 64, 50, 0.16);
}


.pagina-vacaciones
.acciones-pagina-vacaciones
.boton:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 24px
        rgba(90, 64, 50, 0.22);
}/* =========================================================
   FIX MÓVIL - SCROLL COMPLETO DEL CALENDARIO
   ========================================================= */

@media (max-width: 650px) {

    body.pagina-horarios {
        overflow-x: hidden;
    }

    .pagina-calendario {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    #calendario {
        display: block;

        width: 100%;
        max-width: 100%;

        overflow-x: auto !important;
        overflow-y: visible;

        -webkit-overflow-scrolling: touch;

        touch-action: pan-x pan-y;

        padding-bottom: 15px;
    }

    .cabecera-dias,
    .semana {
        width: 1350px !important;
        min-width: 1350px !important;
        max-width: none !important;
    }

    .dias-semana {
        width: 100%;
        min-width: 0 !important;

        grid-template-columns:
            repeat(7, minmax(0, 1fr));
    }

}/* =========================================================
   FIX DEFINITIVO MÓVIL VERTICAL
   SCROLL HORIZONTAL POR SEMANA
   ========================================================= */

@media (max-width: 650px) {

    /* El calendario general ya no será el que haga scroll */
    #calendario {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden !important;
        overflow-y: visible;
    }


    /* =====================================
       CABECERA LUN - DOM
       ===================================== */

    .cabecera-dias {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        display: grid;

        grid-template-columns:
            repeat(7, 165px);

        overflow-x: auto !important;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        touch-action: pan-x;

        padding-bottom: 6px;
    }


    /* =====================================
       CADA SEMANA
       ===================================== */

    .semana {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        overflow: visible;
    }


    /* =====================================
       DÍAS DE LA SEMANA
       ===================================== */

    .dias-semana {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        display: grid;

        grid-template-columns:
            repeat(7, 165px) !important;

        gap: 8px;

        overflow-x: auto !important;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        touch-action: pan-x;

        padding-bottom: 12px;
    }


    /* Cada día mantiene un tamaño cómodo */
    .dia {
        width: 165px;
        min-width: 165px !important;
    }

}/* =========================================================
   VACACIONES - SELECCIÓN VISUAL DE FECHAS
   ========================================================= */

.dia-calendario-vacaciones {
    cursor: pointer;

    user-select: none;

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


/* Día sobre el que pasamos con ratón */

@media (hover: hover) {

    .dia-calendario-vacaciones:hover {

        transform:
            scale(1.12);

        background:
            #f4ead9;

    }

}


/* Rango que todavía vamos a añadir */

.dia-calendario-vacaciones.seleccion-vacaciones {

    background:
        #d8b36e !important;

    color:
        #ffffff !important;

    font-weight:
        800;

    border-radius:
        8px;

    box-shadow:
        inset 0 0 0 1px
        rgba(91, 58, 30, 0.14);

}


/* Primer y último día */

.dia-calendario-vacaciones.seleccion-vacaciones-extremo {

    background:
        #6b4c3a !important;

    color:
        white !important;

    transform:
        scale(1.08);

}


/* =========================================================
   PANEL DE SELECCIÓN
   ========================================================= */

.selector-visual-vacaciones {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin:
        14px 0 18px;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(107, 76, 58, 0.14);

    border-radius:
        14px;

    background:
        #fff8ed;

}


.texto-seleccion-vacaciones {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.texto-seleccion-vacaciones strong {

    color:
        #4b3429;

    font-size:
        0.95rem;

}


.texto-seleccion-vacaciones span {

    color:
        #77675c;

    font-size:
        0.82rem;

}


#limpiar-seleccion-vacaciones {

    flex-shrink:
        0;

    padding:
        9px 13px;

    border:
        1px solid
        rgba(107, 76, 58, 0.18);

    border-radius:
        9px;

    background:
        white;

    color:
        #654737;

    font-family:
        inherit;

    font-weight:
        700;

    cursor:
        pointer;

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 650px) {

    .selector-visual-vacaciones {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    #limpiar-seleccion-vacaciones {

        width:
            100%;

        min-height:
            44px;

    }

}/* =========================================================
   ICONOS DE LA PORTADA
   ========================================================= */

.titulo-tarjeta-portada {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

}


.icono-portada {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    flex-shrink:
        0;

    border-radius:
        12px;

    background:
        #f4eadc;

    font-size:
        24px;

    box-shadow:
        inset 0 0 0 1px
        rgba(90, 60, 40, 0.08);

}/* =========================================================
   PORTADA - TARJETAS CENTRADAS
   ========================================================= */

.pagina-inicio .contenedor {

    width: 100%;

    max-width: 1300px;

    margin: 0 auto;

    padding:
        30px
        24px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(260px, 1fr));

    gap:
        24px;

    align-items:
        stretch;
}


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

.pagina-inicio .encabezado {

    grid-column:
        1 / -1;

    text-align:
        center;

    margin-bottom:
        20px;
}


/* =====================================
   BOTÓN CERRAR SESIÓN
   ===================================== */

.pagina-inicio .contenedor > div:nth-child(2) {

    grid-column:
        1 / -1;

    display:
        flex !important;

    justify-content:
        flex-end !important;

    margin-bottom:
        0 !important;
}


#boton-cerrar-sesion {

    width:
        auto !important;

    padding:
        9px 14px !important;

    font-size:
        14px;

    border-radius:
        9px;
}


/* =====================================
   TARJETAS
   ===================================== */

.pagina-inicio .tarjeta {

    width:
        100%;

    margin:
        0;

    min-height:
        230px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;
}


/* =====================================
   MÓVIL
   ===================================== */

@media (max-width: 800px) {

    .pagina-inicio .contenedor {

        grid-template-columns:
            1fr;

        max-width:
            520px;

        padding:
            20px
            14px;

    }


    .pagina-inicio .encabezado {

        grid-column:
            1;

    }


    .pagina-inicio .contenedor > div:nth-child(2) {

        grid-column:
            1;

    }


    .pagina-inicio .tarjeta {

        min-height:
            auto;

    }

}/* =========================================================
   PORTADA - USUARIO Y RESUMEN DE HOY
   ========================================================= */


/* =====================================
   USUARIO
   ===================================== */

.barra-usuario-inicio {

    grid-column:
        1 / -1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        14px 18px;

    border-radius:
        16px;

    background:
        rgba(255, 255, 255, 0.88);

    backdrop-filter:
        blur(8px);

    box-shadow:
        0 5px 16px
        rgba(74,58,49,0.10);

}


.saludo-usuario {

    margin:
        0;

    color:
        #4b3429;

    font-size:
        1.2rem;

    font-weight:
        800;

}


.datos-usuario-inicio {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        4px;

    color:
        #78665a;

    font-size:
        0.85rem;

}


#rol-usuario {

    font-weight:
        700;

}


.separador-usuario {

    opacity:
        0.45;

}


.boton-cerrar-sesion-inicio {

    flex-shrink:
        0;

    padding:
        9px 14px;

    border:
        none;

    border-radius:
        9px;

    background:
        #4b3429;

    color:
        white;

    font-family:
        inherit;

    font-size:
        0.85rem;

    font-weight:
        700;

    cursor:
        pointer;

}


/* =====================================
   RESUMEN DE HOY
   ===================================== */

.resumen-hoy-inicio {

    grid-column:
        1 / -1;

    margin-top:
        8px;

    padding:
        22px;

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, 0.91);

    backdrop-filter:
        blur(8px);

    box-shadow:
        0 5px 18px
        rgba(74,58,49,0.12);

}


.cabecera-resumen-hoy {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        16px;

    margin-bottom:
        18px;

}


.etiqueta-resumen-hoy {

    display:
        block;

    margin-bottom:
        4px;

    color:
        #a27b4e;

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        1.4px;

}


.cabecera-resumen-hoy h2 {

    margin:
        0;

    color:
        #4b3429;

    font-size:
        1.5rem;

}


.fecha-resumen {

    color:
        #77675c;

    font-size:
        0.82rem;

    font-weight:
        600;

}


/* =====================================
   DATOS DEL RESUMEN
   ===================================== */

.grid-resumen-hoy {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        12px;

}


.dato-resumen-hoy {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-width:
        0;

    padding:
        15px;

    border:
        1px solid
        rgba(75, 52, 41, 0.08);

    border-radius:
        14px;

    background:
        #faf7f3;

}


.icono-resumen-hoy {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    flex-shrink:
        0;

    border-radius:
        11px;

    background:
        #f2e7d8;

    font-size:
        21px;

}


.dato-resumen-hoy div {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

}


.dato-resumen-hoy strong {

    color:
        #4b3429;

    font-size:
        1.35rem;

}


.dato-resumen-hoy div span {

    color:
        #76685f;

    font-size:
        0.75rem;

    line-height:
        1.25;

}


/* =====================================
   TABLET
   ===================================== */

@media (max-width: 950px) {

    .grid-resumen-hoy {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


/* =====================================
   MÓVIL
   ===================================== */

@media (max-width: 600px) {

    .barra-usuario-inicio {

        align-items:
            flex-start;

    }


    .saludo-usuario {

        font-size:
            1rem;

    }


    .datos-usuario-inicio {

        flex-wrap:
            wrap;

    }


    .boton-cerrar-sesion-inicio {

        padding:
            8px 10px;

        font-size:
            0.75rem;

    }


    .cabecera-resumen-hoy {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            4px;

    }


    .grid-resumen-hoy {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            8px;

    }


    .dato-resumen-hoy {

        padding:
            11px;

        gap:
            8px;

    }


    .icono-resumen-hoy {

        width:
            36px;

        height:
            36px;

        font-size:
            18px;

    }


    .dato-resumen-hoy strong {

        font-size:
            1.1rem;

    }


    .dato-resumen-hoy div span {

        font-size:
            0.68rem;

    }

}/* =========================================================
   RESUMEN INICIO - 3 BLOQUES
   ========================================================= */

.resumen-hoy-tres {

    grid-template-columns:
        1.4fr 1fr 1fr;
}


.dato-resumen-principal {

    min-width:
        0;
}


#nombres-turno-actual {

    margin-top:
        3px;

    line-height:
        1.35;
}


@media (max-width: 800px) {

    .resumen-hoy-tres {

        grid-template-columns:
            1fr;

    }

}