/* Barra lateral y menú móvil. */
/* --- Barra lateral (menú de navegación) --- */
:root{
    --sidebar-transicion:0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar{
    display:flex;
    flex-direction:column;
    background:var(--camiral-verde-oscuro);
    color:var(--camiral-blanco);
    padding:12px 0 28px;
    position:sticky;
    top:0;
    align-self:start;
    min-height:100vh;
    height:auto;
    overflow:hidden;
    border-right:3px solid var(--camiral-dorado);
    box-shadow:6px 0 20px -2px rgba(21, 43, 38, 0.28);
    z-index:2;
    user-select:none;
    -webkit-user-select:none;
}

.sidebar-marca{
    padding:0 24px 28px;
    border-bottom:1px solid rgba(255,255,255,0.12);
    margin-bottom:20px;
}

.sidebar-cabecera{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:10px;
    padding:36px 14px 10px;
    border-bottom:1px solid rgba(255,255,255,0.12);
    margin-bottom:14px;
    overflow:hidden;
    transition:
        padding var(--sidebar-transicion),
        margin var(--sidebar-transicion),
        border-color var(--sidebar-transicion);
}

body.sidebar-cerrada .sidebar-cabecera{
    padding:44px 8px 10px;
    margin-bottom:0;
    border-bottom-color:transparent;
}

.sidebar-cabecera .sidebar-marca{
    flex:0 1 auto;
    min-width:0;
    padding:0;
    border-bottom:none;
    margin-bottom:0;
}

.sidebar-control{
    position:absolute;
    top:12px;
    right:12px;
    bottom:auto;
    left:auto;
    z-index:3;
    display:flex;
    justify-content:flex-end;
    padding:0;
    transform:none;
    transition:
        top var(--sidebar-transicion),
        right var(--sidebar-transicion),
        left var(--sidebar-transicion),
        transform var(--sidebar-transicion);
}

body.sidebar-cerrada .sidebar-control{
    top:12px;
    right:auto;
    left:50%;
    transform:translateX(-50%);
}

.sidebar-cerrar{
    flex-shrink:0;
    width:2rem;
    height:2rem;
    margin-top:2px;
    border:1px solid rgba(255,255,255,0.25);
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.82);
    font-size:1.35rem;
    line-height:1;
    cursor:pointer;
    transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sidebar-cerrar:hover{
    background:rgba(255,255,255,0.12);
    border-color:rgba(255,255,255,0.45);
    color:var(--camiral-blanco);
}

.sidebar-contenido{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    min-width:0;
    width:100%;
    overflow:hidden;
}

.sidebar-nav,
.sidebar-usuario,
.sidebar-pie,
.sidebar-marca-plataforma,
.sidebar-marca-wordmark{
    transition:
        opacity var(--sidebar-transicion),
        visibility var(--sidebar-transicion),
        max-height var(--sidebar-transicion),
        margin var(--sidebar-transicion);
}

.sidebar-marca-plataforma,
.sidebar-marca-wordmark{
    max-height:6rem;
    overflow:hidden;
}

body.sidebar-cerrada .sidebar-nav,
body.sidebar-cerrada .sidebar-usuario,
body.sidebar-cerrada .sidebar-pie{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

body.sidebar-cerrada .sidebar-marca-plataforma,
body.sidebar-cerrada .sidebar-marca-wordmark{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    max-height:0;
    margin:0;
}

a.sidebar-marca,
a.sidebar-mobile-marca{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    color:inherit;
    transition:color 0.15s ease;
}

a.sidebar-marca{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    gap:4px;
    padding:0;
    text-align:center;
}

.sidebar-marca-icono,
.sidebar-mobile-marca-icono{
    flex-shrink:0;
    width:71px;
    height:96px;
    margin-top:0;
    object-fit:contain;
    filter:none;
    transition:
        width var(--sidebar-transicion),
        height var(--sidebar-transicion);
}

body.sidebar-cerrada .sidebar-marca-icono{
    width:53px;
    height:72px;
}

.sidebar-mobile-marca-icono{
    width:60px;
    height:60px;
}

.sidebar-marca-plataforma,
.sidebar-mobile-marca-plataforma{
    display:block;
    margin:-6px 0 0;
    font-family:var(--fuente-serif);
    font-size:1.15rem;
    font-weight:500;
    color:var(--camiral-dorado);
    line-height:1.15;
}

.sidebar-marca-plataforma{
    margin:-2px 0 0;
    font-family:var(--fuente-gimmie-marca);
    font-size:2.5rem;
    font-weight:600;
    line-height:1;
}

.sidebar-marca-wordmark,
.sidebar-mobile-marca-wordmark{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    max-width:138px;
    margin:0 auto;
    padding:0 2px;
    overflow:visible;
    color:var(--camiral-blanco);
}

.sidebar-marca-wordmark-svg,
.sidebar-mobile-marca-wordmark-svg{
    display:block;
    width:100%;
    height:auto;
    margin:0 auto;
}

.sidebar-control-icono{
    display:none !important;
}


.sidebar-marca-nombre{
    display:none;
}

.sidebar-marca-sub{
    display:none;
}

.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:0 12px;
}

.sidebar-seccion{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:calc(100% - 24px);
    margin:18px 12px 8px;
    padding:0;
    border:none;
    background:transparent;
    font-family:var(--fuente-sans);
    font-size:0.9rem;
    font-weight:600;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--camiral-dorado);
    cursor:pointer;
    text-align:left;
    transition:color 0.15s ease;
}

.sidebar-seccion:hover,
.sidebar-seccion:focus-visible{
    color:#d4b386;
    outline:none;
}

.sidebar-seccion-icono{
    flex-shrink:0;
    width:7px;
    height:7px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);
    transition:transform 0.28s ease;
}

.sidebar-grupo.colapsado .sidebar-seccion-icono{
    transform:rotate(-45deg);
}

.sidebar-grupo-items{
    display:grid;
    grid-template-rows:1fr;
    transition:grid-template-rows 0.28s ease;
}

.sidebar-grupo.colapsado .sidebar-grupo-items{
    grid-template-rows:0fr;
}

.sidebar-grupo-items-inner{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-height:0;
    overflow:hidden;
}

.sidebar-grupo-items-inner .sidebar-link{
    opacity:1;
    transform:translateY(0);
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        opacity 0.22s ease,
        transform 0.28s ease;
}

.sidebar-grupo.colapsado .sidebar-grupo-items-inner .sidebar-link{
    opacity:0;
    transform:translateY(-4px);
}

.sidebar-link{
    display:block;
    padding:11px 14px;
    color:rgba(255,255,255,0.82);
    text-decoration:none;
    font-size:0.85rem;
    font-weight:500;
    letter-spacing:0.04em;
    border-left:3px solid transparent;
    transition:background 0.15s ease, border-color 0.15s ease;
}

.sidebar-link:hover{
    background:rgba(255,255,255,0.08);
    color:var(--camiral-blanco);
}

.sidebar-link.activo{
    background:rgba(255,255,255,0.1);
    border-left-color:var(--camiral-dorado);
    color:var(--camiral-blanco);
}

.sidebar-usuario{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin:0 24px 18px;
    padding:12px 14px;
    background:rgba(255,255,255,0.06);
    border-left:3px solid var(--camiral-dorado);
}

.sidebar-usuario-texto{
    flex:1 1 auto;
    min-width:0;
}

.sidebar-usuario-nombre{
    display:block;
    font-size:0.82rem;
    font-weight:500;
    color:var(--camiral-blanco);
}

.sidebar-usuario-rol{
    display:block;
    margin-top:4px;
    font-size:0.62rem;
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.55);
}

.sidebar-usuario-novedades{
    position:relative;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:2.25rem;
    height:2.25rem;
    margin-top:2px;
    border:none;
    background:transparent;
    color:var(--camiral-dorado);
    text-decoration:none;
    transition:color 0.15s ease, opacity 0.15s ease;
}

.sidebar-usuario-novedades:hover{
    color:var(--camiral-blanco);
    opacity:0.92;
}

.sidebar-usuario-novedades.activo{
    color:var(--camiral-dorado);
}

.sidebar-usuario-novedades--pendientes{
    color:var(--camiral-dorado);
}

.sidebar-usuario-novedades--pendientes:hover{
    color:var(--camiral-blanco);
}

.sidebar-usuario-novedades-icono{
    display:flex;
    align-items:center;
    justify-content:center;
}

.sidebar-usuario-novedades-icono svg{
    width:1.05rem;
    height:1.05rem;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.sidebar-usuario-novedades-badge{
    position:absolute;
    top:-5px;
    right:-6px;
    min-width:1.05rem;
    padding:1px 4px;
    border:1px solid var(--camiral-dorado);
    border-radius:999px;
    background:transparent;
    color:var(--camiral-dorado);
    font-size:0.52rem;
    font-weight:700;
    line-height:1.25;
    text-align:center;
    letter-spacing:0;
}

.sidebar-usuario-novedades-badge[hidden]{
    display:none;
}

.sidebar-pie{
    margin-top:auto;
    padding:20px 24px 0;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.sidebar-cambiar-password,
.sidebar-logout{
    width:100%;
    padding:10px 14px;
    border:1px solid rgba(255,255,255,0.25);
    background:transparent;
    color:rgba(255,255,255,0.82);
    font-family:var(--fuente-sans);
    font-size:0.72rem;
    font-weight:500;
    letter-spacing:0.08em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background 0.15s ease, border-color 0.15s ease;
}

.sidebar-cambiar-password:hover,
.sidebar-logout:hover{
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.45);
    color:var(--camiral-blanco);
}

.sidebar-contenido-inner{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
}

.app-main{
    padding:32px 36px 48px;
    overflow:auto;
    min-width:0;
}

/* Barra desplegable del menú en móvil */
.sidebar-mobile-bar{
    display:none;
}

/* --- Responsive: pantallas estrechas --- */
@media (max-width: 900px){
    body.sidebar-cerrada .app-shell{
        grid-template-columns:1fr;
    }

    body.sidebar-cerrada .sidebar-nav,
    body.sidebar-cerrada .sidebar-usuario,
    body.sidebar-cerrada .sidebar-pie,
    body.sidebar-cerrada .sidebar-marca-plataforma,
    body.sidebar-cerrada .sidebar-marca-wordmark{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        max-height:none;
    }

    body.sidebar-cerrada .sidebar-cabecera{
        padding:36px 14px 10px;
        margin-bottom:14px;
        border-bottom-color:rgba(255,255,255,0.12);
    }

    body.sidebar-cerrada .sidebar-marca-icono{
        width:71px;
        height:96px;
    }

    body.sidebar-cerrada .sidebar{
        padding:0;
    }

    .sidebar-riel{
        display:none !important;
    }

    .sidebar-control{
        display:none;
    }

    .sidebar-cerrar{
        display:none;
    }

    .app-shell{
        grid-template-columns:1fr;
    }

    .sidebar-mobile-bar{
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
        align-items:center;
        gap:12px;
        padding:12px 16px;
        background:var(--camiral-verde-oscuro);
        border-bottom:1px solid rgba(255,255,255,0.12);
    }

    .sidebar-toggle{
        justify-self:start;
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:8px 12px;
        border:1px solid rgba(255,255,255,0.25);
        background:rgba(255,255,255,0.06);
        color:var(--camiral-blanco);
        font-family:var(--fuente-sans);
        font-size:0.72rem;
        font-weight:600;
        letter-spacing:0.08em;
        text-transform:uppercase;
        cursor:pointer;
        transition:background 0.15s ease, border-color 0.15s ease;
    }

    .sidebar-toggle:hover{
        background:rgba(255,255,255,0.12);
        border-color:rgba(255,255,255,0.45);
    }

    .sidebar-toggle-icon{
        display:block;
        width:8px;
        height:8px;
        border-right:2px solid currentColor;
        border-bottom:2px solid currentColor;
        transform:rotate(45deg);
        transition:transform 0.2s ease;
    }

    body.sidebar-abierta .sidebar-toggle-icon{
        transform:rotate(-135deg);
    }

    .sidebar-mobile-logo{
        justify-self:center;
        display:flex;
        align-items:center;
        text-decoration:none;
        color:inherit;
    }

    .sidebar-mobile-logo-icono{
        display:block;
        width:47px;
        height:64px;
        object-fit:contain;
        filter:none;
    }

    .sidebar-mobile-camiral{
        justify-self:end;
        display:flex;
        align-items:center;
        text-decoration:none;
        color:inherit;
        max-width:118px;
    }

    .sidebar-mobile-camiral .sidebar-mobile-marca-wordmark{
        width:100%;
        max-width:118px;
        margin:0;
    }

    .sidebar-contenido-inner .sidebar-cabecera{
        display:none;
    }

    .sidebar-mobile-marca-plataforma{
        display:none;
    }

    .sidebar{
        position:sticky;
        top:0;
        z-index:1000;
        width:100%;
        height:auto;
        min-height:0;
        align-self:start;
        padding:0;
        overflow:hidden;
        transition:max-height 0.28s ease;
        border-right:none;
        border-bottom:3px solid var(--camiral-dorado);
        box-shadow:0 6px 20px -2px rgba(21, 43, 38, 0.28);
    }

    .sidebar-contenido{
        overflow:visible;
    }

    .sidebar-contenido-inner .sidebar-marca,
    .sidebar-contenido-inner .sidebar-cabecera{
        padding:14px 20px 16px;
        margin-bottom:12px;
    }

    .sidebar-contenido-inner .sidebar-usuario{
        margin-top:0;
    }

    .sidebar-contenido-inner .sidebar-pie{
        margin-top:0;
        padding-bottom:20px;
    }

    .app-main{
        padding:20px 16px 32px;
    }

    .page-header{
        gap:14px;
    }

    .horario-layout{
        flex-direction:column;
    }

    #resultado{
        width:100%;
    }

    .panel-empleados-semana{
        flex:1 1 auto;
        width:100%;
        position:static;
    }

    .panel-empleados-lista{
        max-height:none;
    }
}

@media (prefers-reduced-motion: reduce){
    :root{
        --sidebar-transicion:0.01ms;
    }

    .app-shell{
        transition:none !important;
    }
}