/* Cabecera de página y estructura app-shell. */
/* --- Cabecera de página (título, ayuda y controles) --- */
.page-header{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
    padding-bottom:22px;
    border-bottom:1px solid var(--camiral-arena);
}

.page-etiqueta{
    margin:0 0 6px;
    font-size:0.65rem;
    font-weight:600;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--camiral-dorado);
}

.page-header h1{
    margin:0 0 8px;
    font-family:var(--fuente-serif);
    font-size:2rem;
    font-weight:500;
    color:var(--camiral-verde);
}

.page-ayuda{
    margin:0;
    color:var(--camiral-texto-suave);
    font-size:0.9rem;
    font-weight:300;
}

.page-controles{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:12px;
}

.selector-anio-grupo{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    min-width:220px;
}

.selector-anio-grupo[hidden]{
    display:none !important;
}

.selector-anio-nav{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
}

.selector-anio-flecha{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 36px;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid var(--camiral-arena);
    background:var(--camiral-blanco);
    color:var(--camiral-verde);
    font-size:1.35rem;
    line-height:1;
    cursor:pointer;
    transition:background 0.2s ease, border-color 0.2s ease;
}

.selector-anio-flecha:hover:not(:disabled){
    background:var(--camiral-crema);
    border-color:var(--camiral-verde);
}

.selector-anio-flecha:disabled{
    opacity:0.35;
    cursor:not-allowed;
}

.selector-anio-nav select{
    flex:1 1 auto;
    min-width:0;
    width:auto;
    min-height:36px;
    padding:8px 12px;
}

.panel-contenido{
    background:var(--camiral-blanco);
    border:1px solid var(--camiral-arena);
    padding:24px;
}

.estado-vacio{
    margin:0;
    padding:28px 0;
    color:var(--camiral-texto-suave);
    font-size:0.92rem;
    font-weight:300;
}

.app{
    min-height:100vh;
    padding:0 24px 40px;
    max-width:1440px;
    margin:0 auto;
}

.app-header{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:28px 0 24px;
    border-bottom:1px solid var(--camiral-arena);
    margin-bottom:32px;
}

.app-nav{
    display:flex;
    gap:16px;
}

.app-nav-link{
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--camiral-verde);
    text-decoration:none;
    padding:10px 0;
    border-bottom:2px solid transparent;
}

.app-nav-link:hover{
    border-bottom-color:var(--camiral-dorado);
}

.app-marca{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.app-marca-nombre{
    font-family:var(--fuente-serif);
    font-size:2rem;
    font-weight:600;
    letter-spacing:0.04em;
    color:var(--camiral-verde);
    line-height:1;
}

.app-marca-sub{
    font-size:0.75rem;
    font-weight:500;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--camiral-texto-suave);
}

.toolbar-grupo{
    display:flex;
    align-items:center;
    gap:12px;
}

.toolbar-grupo label{
    font-size:0.75rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--camiral-texto-suave);
}

.toolbar-grupo input{
    width:110px;
    padding:10px 14px;
    border:1px solid var(--camiral-arena);
    border-radius:0;
    background:var(--camiral-blanco);
    font-family:var(--fuente-sans);
    font-size:0.95rem;
    color:var(--camiral-texto);
}

.toolbar-grupo input:focus{
    outline:2px solid var(--camiral-dorado);
    outline-offset:2px;
}

.toolbar-grupo:has(select){
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
}

.toolbar-grupo:has(select) label{
    font-size:0.72rem;
    letter-spacing:0.1em;
}

.toolbar-grupo select,
.form-grupo select,
.selector-empleado select,
.puesto-editor-select{
    padding:11px 14px;
    border:1px solid var(--camiral-arena);
    border-radius:0;
    background-color:var(--camiral-blanco);
    font-family:var(--fuente-sans);
    font-size:0.92rem;
    color:var(--camiral-texto);
    cursor:pointer;
    line-height:1.35;
}

.toolbar-grupo select{
    min-width:200px;
    width:auto;
}

.form-grupo select,
.selector-empleado select{
    width:100%;
}

.puesto-editor-select{
    width:100%;
    padding:10px 12px;
    font-size:0.88rem;
}

.toolbar-grupo select:focus,
.form-grupo select:focus,
.selector-empleado select:focus,
.puesto-editor-select:focus{
    outline:2px solid var(--camiral-dorado);
    outline-offset:2px;
}

.toolbar-grupo select:disabled,
.form-grupo select:disabled,
.selector-empleado select:disabled,
.puesto-editor-select:disabled{
    background:var(--camiral-crema);
    color:var(--camiral-texto-suave);
    cursor:not-allowed;
}

.panel-semanas{
    background:var(--camiral-blanco);
    border:1px solid var(--camiral-arena);
    padding:32px;
}

.panel-semanas-cabecera{
    margin-bottom:28px;
    padding-bottom:20px;
    border-bottom:1px solid var(--camiral-arena);
}

.panel-semanas-cabecera h1{
    margin:0 0 8px;
    font-family:var(--fuente-serif);
    font-size:2rem;
    font-weight:500;
    color:var(--camiral-verde);
}

.panel-semanas-ayuda{
    margin:0;
    color:var(--camiral-texto-suave);
    font-size:0.9rem;
    font-weight:300;
}