/* =========================================================
   UI Kit — design system de la pasada UI/UX (F0)
   Scaffolding de página + componentes compartidos de Components/
   (PageHeader, StatCard, StatusChip, EmptyState, BulkActionBar).
   REGLA: aquí NO se definen colores nuevos; solo se consumen las
   variables de app-theme.css (única fuente de verdad de color).
   ========================================================= */

/* -------------------------------------------------------
   1. Scaffolding de página
   .page envuelve el contenido de cada página: padding
   consistente, columna con gap y entrada animada escalonada.
   ------------------------------------------------------- */
.page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 10px 90px; /* hueco inferior para la bulk-bar flotante */
    max-width: 1900px;
    width: 100%;
    margin: 0 auto;
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.page > * {
    animation: fade-up .32s ease-out backwards;
}

.page > *:nth-child(2) {
    animation-delay: .05s;
}

.page > *:nth-child(3) {
    animation-delay: .10s;
}

.page > *:nth-child(4) {
    animation-delay: .15s;
}

.page > *:nth-child(n+5) {
    animation-delay: .20s;
}

@media (prefers-reduced-motion: reduce) {
    .page > * {
        animation: none;
    }
}

/* El contenido de la app respira sobre fondo alterno; las cards
   blancas (grids, formularios) destacan encima. */
.rz-body {
    background: var(--color-bg-alt);
    /* Reserva siempre el hueco de la barra de scroll vertical: evita que la página cambie de ancho
       al pasar de "con datos" (con scroll) a "sin datos" (sin scroll). */
    scrollbar-gutter: stable;
    padding: 0px !important;
}

/* -------------------------------------------------------
   2. PageHeader — título + eyebrow (sección) + acciones
   ------------------------------------------------------- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--color-primary);
    margin: 0 0 3px;
}

.page-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--color-text);
    margin: 0;
    line-height: 1.2;
}

.page-subtitle {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 4px 0 0;
    max-width: 720px;
}

.page-header .page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.page-header .page-actions .page-header-action-button {
    min-height: 40px;
    border-radius: 10px;
    padding-inline: 12px;
}

.page-header .page-actions .page-header-action-button.icon-only {
    width: 40px;
    min-width: 40px;
    padding-inline: 0;
    justify-content: center;
}

/* -------------------------------------------------------
   3. Stat strip — tira de KPIs (clicables como filtros)
   ------------------------------------------------------- */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 12px;
}

.stat-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 13px 16px 13px 19px;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

/* Barra de acento por tono (identidad sin teñir el dato) */
.stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-neutral-light);
}

.stat-card.tone-primary::before {
    background: var(--color-primary);
}

.stat-card.tone-success::before {
    background: var(--color-success);
}

.stat-card.tone-warning::before {
    background: var(--color-warning);
}

.stat-card.tone-danger::before {
    background: var(--color-danger);
}

.stat-card.tone-pending::before {
    background: var(--color-pending);
}

.stat-card.clickable {
    cursor: pointer;
}

.stat-card.clickable:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.stat-card.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary) inset, var(--shadow-sm);
    background: var(--color-accent-faint);
}

.stat-card .stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-card .stat-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.stat-card.tone-danger .stat-value {
    color: var(--color-danger);
}

.stat-card.tone-warning .stat-value {
    color: var(--color-warning);
}

.stat-card .stat-hint {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Spinner del KPI mientras carga el dato (sustituye al valor sin alterar la altura de la tarjeta). */
.stat-card .stat-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 3px 0;
    border: 2.5px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: stat-spin .7s linear infinite;
    vertical-align: middle;
}

@keyframes stat-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .stat-card .stat-spinner {
        animation-duration: 1.4s;
    }
}

/* -------------------------------------------------------
   4. FilterBar — barra única de filtros de página
   ------------------------------------------------------- */
.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 12px 16px;
}

.filter-bar .filter-spacer {
    flex: 1;
}

/* -------------------------------------------------------
   5. StatusChip — píldora de estado con punto de color
   Usa los colores semánticos de estado del tema.
   ------------------------------------------------------- */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}

.status-chip .chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.status-chip.chip-approved {
    color: var(--color-state-approved);
    background: var(--color-state-approved-bg);
    border-color: var(--color-state-approved-border);
}

.status-chip.chip-pending {
    color: var(--color-state-pending-text);
    background: var(--color-state-pending-bg);
    border-color: var(--color-state-pending-border);
}

.status-chip.chip-rejected {
    color: var(--color-state-rejected);
    background: var(--color-state-rejected-bg);
    border-color: var(--color-state-rejected-border);
}

.status-chip.chip-unassigned {
    color: var(--color-state-unassigned);
    background: var(--color-state-unassigned-bg);
    border-color: var(--color-state-unassigned-border);
}

.status-chip.chip-neutral {
    color: var(--color-state-neutral);
    background: var(--color-state-neutral-bg);
    border-color: var(--color-state-neutral-border);
}

.status-chip.chip-primary {
    color: var(--color-primary-dark);
    background: var(--color-surface);
    border-color: var(--color-accent);
}

/* -------------------------------------------------------
   5b. Filas clicables — RadzenDataGrid con RowClick que abre ficha/diálogo
   ------------------------------------------------------- */
.clickable-rows .rz-data-row {
    cursor: pointer;
}

/* -------------------------------------------------------
   6. EmptyState — estado vacío cuidado
   ------------------------------------------------------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 24px;
    text-align: center;
}

.empty-state .empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.empty-state .empty-icon .rzi {
    font-size: 28px;
    color: var(--color-placeholder);
}

.empty-state .empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.empty-state .empty-message {
    font-size: 13px;
    color: var(--color-text-muted);
    max-width: 440px;
}

.empty-state .empty-action {
    margin-top: 10px;
}

/* EmptyTemplate compacto para popups de RadzenDropDown/RadzenDropDownDataGrid */
.dropdown-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px;
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
}

.dropdown-empty .dropdown-empty-icon {
    font-size: 28px;
    opacity: .55;
}

/* -------------------------------------------------------
   7. BulkActionBar — barra flotante de acciones masivas
   Pill oscura inferior centrada; el contador usa el acento.
   ------------------------------------------------------- */
.bulk-bar {
    /* STICKY, no fixed: el contenedor de scroll de Radzen (.rz-body) lleva `transform: translateZ(0)`, que
       convierte cualquier `position: fixed` descendiente en relativo a ese contenedor —la barra se desplazaba
       con el scroll en vez de quedarse anclada a la ventana—. `sticky` sí funciona dentro de un contenedor con
       transform: la mantiene pegada al borde inferior del área visible mientras se hace scroll. Se autocentra
       con `margin: 0 auto` + `width: fit-content`. */
    position: sticky;
    bottom: 22px;
    z-index: 900;
    width: fit-content;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-tooltip-bg);
    color: var(--color-text-on-dark);
    border-radius: 999px;
    padding: 8px 10px 8px 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
    animation: bulk-pop .25s cubic-bezier(.2, .9, .3, 1.2) backwards;
}

@keyframes bulk-pop {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

.bulk-bar .bulk-count {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.bulk-bar .bulk-count b {
    color: var(--color-accent);
    font-size: 15px;
}

/* Botones Radzen dentro de la barra oscura */
.bulk-bar .rz-button.rz-variant-text {
    color: var(--color-text-on-dark) !important;
}

.bulk-bar .rz-button.rz-variant-text:hover {
    background: rgba(255, 255, 255, .12) !important;
}

/* -------------------------------------------------------
   8. Sidebar — grupos por flujo de trabajo + ítem activo
   Activo = barra izquierda primaria + fondo surface + texto
   verde oscuro (sustituye al bloque verde pleno anterior).
   ------------------------------------------------------- */
.nav-group-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 9px 12px 3px;
    user-select: none;
}

.nav-group-label:first-child {
    padding-top: 5px;
}

/* Etiqueta de grupo plegable: clicable, con chevron a la derecha */
.nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border-radius: 6px;
    transition: color .12s ease;
}

.nav-group-toggle:hover {
    color: var(--color-primary-dark);
}

.nav-group-toggle .nav-group-chevron {
    font-size: 13px;
    opacity: .55;
}

/* Separador sutil cuando el sidebar está plegado (sin etiquetas) */
.nav-group-separator {
    height: 1px;
    background: var(--sidebar-border);
    margin: 6px 10px;
}

/* Override Radzen theme variables at sidebar scope — prevent the solid green active background */
.rz-sidebar {
    --rz-panel-menu-item-selected-background-color: var(--color-surface);
    --rz-navigation-item-active-color: var(--color-primary-dark);
}

.rz-sidebar .rz-navigation-item-wrapper {
    border-left: 3px solid transparent;
    transition: background-color .12s ease;
}

.rz-sidebar .rz-navigation-item-wrapper-active {
    border-left-color: var(--color-primary);
    background-color: var(--color-surface);
}

.rz-sidebar .rz-navigation-item-wrapper-active .rz-navigation-item-link {
    background-color: var(--color-surface) !important;
    color: var(--color-primary-dark) !important;
    font-weight: 600;
}

.rz-sidebar .rz-navigation-item-wrapper-active .rzi {
    color: var(--color-primary-dark) !important;
}

.rz-sidebar .rz-navigation-item-link {
    font-size: 13px;
    /* Padding vertical reducido: baja el alto del item (~44px Radzen → ~35px). */
    padding-top: 6px;
    padding-bottom: 6px;
}

.rz-sidebar .rz-navigation-item-link .rzi {
    font-size: 18px;
}

/* -------------------------------------------------------
   9. Pulido de grids — cabeceras tipográficas (uppercase)
   ------------------------------------------------------- */
.rz-data-grid .rz-grid-table thead th .rz-column-title,
.rz-data-grid .rz-grid-table thead th .rz-column-title-content {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-text-muted);
}

/* -------------------------------------------------------
   10. Tarjeta de sección con cabecera (listas del dashboard,
   paneles laterales de detalle…)
   ------------------------------------------------------- */
.section-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
}

.section-card .section-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--card-border);
}

.section-card .section-card-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--color-text-muted);
    margin: 0;
}

.section-card .section-card-body {
    padding: 8px 0;
}

.section-card .section-card-body.padded {
    padding: 16px;
}

/* -------------------------------------------------------
   11. Filas de lista (dentro de section-card): clicables,
   con título/subtítulo y zona lateral (chips, fechas)
   ------------------------------------------------------- */
.list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-bg-alt);
    transition: background-color .12s ease;
}

.list-row:last-child {
    border-bottom: none;
}

.list-row.clickable {
    cursor: pointer;
}

.list-row.clickable:hover {
    background: var(--color-bg-alt);
}

.list-row .row-main {
    flex: 1;
    min-width: 0;
}

.list-row .row-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-row .row-sub {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-row .row-side {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* -------------------------------------------------------
   11b. PageLoader — logo animado centrado mientras carga
   ------------------------------------------------------- */
.page-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 90px 24px;
}

.page-loader img {
    width: 88px;
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .08));
}

.page-loader .page-loader-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: .4px;
}

/* -------------------------------------------------------
   11c. DateRangePicker — desde→hasta unidos
   ------------------------------------------------------- */
.date-range {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.date-range .date-range-sep {
    color: var(--color-text-muted);
    font-size: 14px;
    padding-bottom: 14px;
}

/* -------------------------------------------------------
   11d. FilterBar: que los FormField no encojan su contenido
   (valores cortados en dropdowns/fechas de los filtros)
   ------------------------------------------------------- */
.filter-bar .rz-form-field {
    min-width: 150px;
}

.filter-bar .rz-form-field-content {
    min-width: 0;
}

.filter-bar .rz-dropdown,
.filter-bar .rz-multiselect {
    min-width: 170px;
}

.filter-bar .rz-inputtext {
    font-size: 13.5px;
}

/* -------------------------------------------------------
   12. Grid de dos columnas (dashboard, detalles)
   ------------------------------------------------------- */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 1100px) {
    .grid-2col {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------
   13. Timeline de tablero (turnos día, fichajes día, overview día)
   Un ÚNICO contenedor de scroll: eje de horas sticky-top y
   columna de nombres sticky-left se mueven CON el contenido.
   ------------------------------------------------------- */
.board-scroll {
    overflow: auto;
    max-height: calc(100vh - 380px);
    min-height: 260px;
}

.board-axis-row {
    display: flex;
    width: max-content;
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--rz-base-100);
    border-bottom: 1px solid var(--rz-base-300);
}

.board-row {
    display: flex;
    width: max-content;
    height: 44px;
    border-bottom: 1px solid var(--rz-base-200);
    background: var(--card-bg);
}

.board-label-col {
    width: 260px;
    min-width: 260px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    position: sticky;
    left: 0;
    background: var(--rz-base-50);
    border-right: 1px solid var(--rz-base-300);
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

.axis-corner {
    height: 28px;
    background: var(--rz-base-100);
    z-index: 4;
}

.board-track {
    position: relative;
    height: 44px;
    flex-shrink: 0;
}

.axis-track {
    height: 28px;
}

.axis-hour {
    position: absolute;
    top: 6px;
    font-size: 11px;
    color: var(--rz-text-secondary-color);
    border-left: 1px solid var(--rz-base-300);
    padding-left: 3px;
    height: 22px;
}

.grid-bg {
    background-image: repeating-linear-gradient(to right, var(--rz-base-200) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to right, var(--rz-base-100) 0 1px, transparent 1px 15px);
    cursor: pointer;
}

.shift-block {
    position: absolute;
    box-sizing: border-box; /* el ancho declarado = duración exacta; alinea .meal-seg con la escala de minutos */
    top: 7px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    background: var(--rz-primary);
    color: var(--rz-primary-contrast, #fff);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    white-space: nowrap;
}

.shift-block.crosses {
    border-radius: 6px 0 0 6px;
    background: linear-gradient(to right, var(--rz-primary) 70%, color-mix(in srgb, var(--rz-primary) 55%, transparent));
}

.shift-block.carry {
    background: transparent;
    border: 1px dashed var(--rz-primary);
    border-left: none;
    border-radius: 0 6px 6px 0;
    color: var(--rz-primary);
    box-shadow: none;
    cursor: default;
    opacity: .75;
    justify-content: flex-start;
}

/* Turno PREVISTO como contorno (vista combinada del overview): el fichaje real va encima en sólido. */
.shift-block.outline {
    background: transparent;
    border: 1.5px dashed var(--rz-primary);
    color: var(--color-primary-dark);
    box-shadow: none;
    /* El contorno punteado se dibuja completo y continuo: el borde entra en el ancho (border-box) y no
       se recorta (overflow visible), evitando que la línea de puntos aparezca "cortada por la mitad". */
    box-sizing: border-box;
    overflow: visible;
}

.now-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-danger);
    z-index: 1;
    pointer-events: none;
}

/* Punto de bandera dentro de un bloque/chip (color por tipo de bandera, a nivel de código). */
.wd-flag-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .8);
    flex-shrink: 0;
}

/* Navegación de periodo: botones alineados y del mismo alto que el campo de fecha. */
.period-nav {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.period-nav .nav-btn {
    height: 41px;
    min-width: 41px;
}

.view-bar {
    align-self: flex-end;
    height: 41px;
}

.period-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    /* Centrado vertical contra la altura de los botones de navegación (41px), para que el texto y el
       subtexto "actualizado" queden a la misma altura que el botón "Hoy". */
    height: 41px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
}

.period-label .sub {
    font-size: 11px;
    font-weight: 500;
    opacity: .8;
}

/* Tablon de turnos: fecha en una linea superior y controles en una segunda linea. */
.board-period-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.board-period-nav .period-label {
    height: auto;
    justify-content: flex-start;
}

.board-period-nav .period-nav-controls {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* Recarga sin salto: el contenido anterior se mantiene atenuado mientras llega el nuevo periodo
   (evita que los componentes "salten" al quedarse sin datos una fracción de segundo). */
.reloading {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* -------------------------------------------------------
   14. NavMenu: animación de pliegue/despliegue de grupos
   (grid-template-rows 1fr→0fr anima a altura de contenido)
   ------------------------------------------------------- */
.nav-group-items {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .25s ease;
}

.nav-group-items > * {
    overflow: hidden;
    min-height: 0;
}

.nav-group-items.collapsed {
    grid-template-rows: 0fr;
}

.nav-group-chevron {
    transition: transform .25s ease;
}

.nav-group-chevron.rotated {
    transform: rotate(-90deg);
}

/* -------------------------------------------------------
   15. Leyendas de calendario (muestras de color; pendiente
   = barra rayada "incompleta"; festivo = muestra discontinua)
   ------------------------------------------------------- */
.cal-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-muted);
    padding: 4px 2px;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-swatch {
    width: 16px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

.legend-swatch.striped {
    background: repeating-linear-gradient(45deg,
    var(--c) 0 5px, color-mix(in srgb, var(--c) 45%, white) 5px 10px);
}

.legend-swatch.dashed {
    border: 1.5px dashed var(--color-text-muted);
    background: transparent;
}

/* Segmento de descanso dentro de un bloque de turno: mismo verde del borde pero el fondo a medio
   rellenar, para que el inicio/fin del descanso quede reflejado en la barra. Se distingue remunerado
   (rayado suave, sigue computando) de no remunerado (rayado más denso/opaco, no computa). */
.shift-block .meal-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    min-width: 6px;
    pointer-events: none;
    border-left: 1px solid rgba(255, 255, 255, .55);
    border-right: 1px solid rgba(255, 255, 255, .55);
}

/* Rayado con contraste real: franja blanca semiopaca alternada con transparente, para que el color del
   bloque (azul/verde/ámbar) se transparente entre franjas y el descanso se lea como un hatch, no como
   una banda/línea plana. No remunerado = trama más densa/opaca (no computa horas). */
.shift-block .meal-seg.unpaid {
    background: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, .6) 0 4px, transparent 4px 8px);
}

.shift-block .meal-seg.paid {
    background: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, .3) 0 3px, transparent 3px 9px);
}

.shift-block.outline .meal-seg.unpaid {
    background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--rz-primary) 22%, transparent) 0 5px,
    color-mix(in srgb, var(--rz-primary) 8%, transparent) 5px 10px);
    border-left: 1px dashed var(--rz-primary);
    border-right: 1px dashed var(--rz-primary);
}

.shift-block.outline .meal-seg.paid {
    background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--rz-primary) 12%, transparent) 0 4px,
    color-mix(in srgb, var(--rz-primary) 4%, transparent) 4px 11px);
    border-left: 1px dashed var(--rz-primary);
    border-right: 1px dashed var(--rz-primary);
}

/* -------------------------------------------------------
   16. Material Symbols Rounded — icono redondeado/relleno
   Sustituye Material Icons (rzi) en nav, botones y tableros.
   ------------------------------------------------------- */
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

/* Hace que los iconos de Radzen (rzi) usen también Material Symbols Rounded */
.rzi {
    font-family: 'Material Symbols Rounded' !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* -------------------------------------------------------
   17. Avatar mini + celda de empleado (tablones, grids)
   ------------------------------------------------------- */
.av-mini {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-on-primary);
    flex-shrink: 0;
    user-select: none;
}

.emp-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.emp-cell .emp-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-cell .emp-sub {
    font-size: 11.5px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -------------------------------------------------------
   18. Vista SEMANA — tabla week-matrix con shift-card
   ------------------------------------------------------- */
.week-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card-bg);
}

.week-matrix th {
    padding: 10px 8px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
    text-align: center;
}

.week-matrix th.emp-col, .week-matrix td.emp-col {
    text-align: left;
    width: 220px;
    min-width: 220px;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card-bg);
    border-right: 1px solid var(--color-border);
    padding-left: 12px;
}

.week-matrix th .dow {
    display: block;
}

.week-matrix th .dom {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin-top: 2px;
}

.week-matrix th.is-weekend, .week-matrix td.is-weekend {
    background: var(--color-bg-alt);
}

/* Holiday tint on <th> is applied inline via HolidayTint() using the calendar's actual color */
.week-matrix th .holiday-label {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.2px;
    text-transform: none;
}

.week-matrix td {
    border-bottom: 1px solid var(--color-bg-alt);
    border-right: 1px solid var(--color-bg-alt);
    vertical-align: top;
    padding: 6px;
    height: 76px;
    min-width: 122px;
    cursor: pointer;
}

.week-matrix tr:hover td {
    background: color-mix(in srgb, var(--color-surface) 30%, transparent);
}

.week-matrix tr:hover td.emp-col {
    background: var(--color-bg-alt);
}

.shift-card {
    border-radius: 7px;
    padding: 6px 8px;
    margin-bottom: 4px;
    font-size: 11.5px;
    line-height: 1.3;
    border: 1px solid;
    cursor: pointer;
}

.shift-card .sc-name {
    font-weight: 700;
}

.shift-card .sc-time {
    font-variant-numeric: tabular-nums;
    opacity: .85;
}

.shift-card.t-morning {
    background: var(--color-surface);
    border-color: var(--color-accent);
    color: var(--color-primary-dark);
}

.shift-card.t-evening {
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
    color: var(--color-info-dark);
}

.shift-card.t-night {
    background: var(--color-violet-bg);
    border-color: var(--color-violet-border);
    color: var(--color-violet);
}

.cell-off {
    font-size: 11px;
    color: var(--color-placeholder-light);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
}

.cell-tag {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 3px 7px;
    border-radius: 5px;
    display: inline-block;
}

.cell-tag.holiday {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.cell-tag.absence {
    background: var(--color-state-approved-bg);
    color: var(--color-state-approved);
}

.cell-add {
    width: 100%;
    border: 1px dashed var(--color-border);
    background: transparent;
    border-radius: 7px;
    height: 28px;
    color: var(--color-placeholder-light);
    cursor: pointer;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .12s;
    margin-top: 4px;
}

.week-matrix td:hover .cell-add {
    opacity: 1;
}

.cell-add:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* -------------------------------------------------------
   19. Vista MES — calendario mensual con cobertura
   ------------------------------------------------------- */
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.month-dow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--color-text-muted);
    text-align: center;
    padding: 4px 0 2px;
}

.month-dow.we {
    color: var(--color-placeholder);
}

.month-cell {
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg);
    padding: 8px 9px 9px;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    cursor: pointer;
    transition: box-shadow .12s ease, transform .12s ease;
}

.month-cell:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.month-cell.empty {
    background: transparent;
    border: none;
    cursor: default;
}

.month-cell.empty:hover {
    box-shadow: none;
    transform: none;
}

.month-cell.we {
    background: var(--color-bg-alt);
}

.month-cell.holiday {
    background: color-mix(in srgb, var(--color-warning-bg) 75%, var(--card-bg));
    border-color: var(--color-warning-light);
}

.month-cell.today {
    box-shadow: 0 0 0 2px var(--color-primary) inset;
}

.month-cell .mc-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.month-cell .mc-day {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.month-cell .mc-holiday {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-warning);
    text-transform: uppercase;
    letter-spacing: .3px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.month-cell .mc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
}

.month-cell .mc-cov {
    height: 6px;
    border-radius: 999px;
    background: var(--color-neutral-light);
    overflow: hidden;
}

.month-cell .mc-cov span {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.month-cell .mc-meta {
    font-size: 11.5px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    margin-top: auto;
}

/* --- Portal del Empleado --- */

/* Chip de destinatario removible (comunicados). */
.recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 2px 4px 2px 12px;
    font-size: var(--font-sm);
}

/* Evita que al arrastrar el selector de color del RadzenHtmlEditor se seleccione el texto de la página. */
.rz-colorpicker,
.rz-colorpicker *,
.no-select-drag .rz-html-editor-toolbar,
.no-select-drag .rz-html-editor-toolbar * {
    user-select: none;
    -webkit-user-select: none;
}

.doc-preview-msg {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-muted);
    text-align: center;
    padding: 24px;
}

/* Barra de confirmación de lectura obligatoria (bajo el visor del documento). */
.doc-confirm-bar {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

.doc-confirm-hint {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-sm);
    margin-bottom: 8px;
}

.doc-confirm-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.doc-name-cell {
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.doc-name-cell:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Página del documento: visor a la izquierda (scroll propio, lo usa pdf-viewer.js) + panel de info. */
.doc-view-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.doc-view-viewer {
    padding: 8px !important;
}

.doc-view-host {
    height: calc(100vh - 220px);
    min-height: 420px;
    overflow: auto;
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm, 6px);
    padding: 8px;
}

.doc-view-info {
    position: sticky;
    top: 16px;
}

.doc-view-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    margin: 0;
    font-size: var(--font-sm);
}

.doc-view-meta dt {
    color: var(--color-text-muted);
}

.doc-view-meta dd {
    margin: 0;
}

@media (max-width: 900px) {
    .doc-view-layout {
        grid-template-columns: 1fr;
    }

    .doc-view-info {
        position: static;
    }
}

/* Página de lectura de un comunicado: columna de lectura cómoda y tipografía para el HTML del editor. */
.announcement-article {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.announcement-article-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.announcement-article-title {
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
}

.announcement-content {
    padding: 28px 32px !important;
    font-size: 1.02rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.announcement-content > :first-child {
    margin-top: 0;
}

.announcement-content > :last-child {
    margin-bottom: 0;
}

.announcement-content h1,
.announcement-content h2,
.announcement-content h3 {
    line-height: 1.3;
    margin: 1.4em 0 0.5em;
}

.announcement-content p,
.announcement-content ul,
.announcement-content ol {
    margin: 0 0 1em;
}

.announcement-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.announcement-content blockquote {
    margin: 1em 0;
    padding: 4px 16px;
    border-left: 3px solid var(--color-primary);
    color: var(--color-text-muted);
}

.announcement-content a {
    color: var(--color-primary);
}

.announcement-attachments {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.announcement-attachment {
    display: flex !important;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 12px 14px !important;
    transition: border-color .15s, box-shadow .15s;
}

.announcement-attachment:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* ─────────────────────────────────────────────────────────
   HEADER PROFILE MENU (avatar + username, top-right)
   ───────────────────────────────────────────────────────── */
.header-profile-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
    color: var(--md-on-primary);
}

.header-profile-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.header-profile-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    color: var(--md-on-primary);
}

.header-profile-name {
    font-size: 0.85rem;
    font-weight: 600;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The RadzenProfileMenu root renders its own top-item background (a slightly
   different green than the header) and vertical padding that made the whole
   trigger taller than the 50px header bar. Neutralize both so only our own
   .header-profile-trigger visuals show, sized to fit the header. */
.header-profile-menu.rz-profile-menu {
    --rz-profile-menu-top-item-background-color: transparent;
    background-color: transparent !important;
    padding-block: 0 !important;
    padding-inline: 0 !important;
    display: flex !important;
    align-items: center;
    height: 100%;
}

.header-profile-menu .rz-navigation-menu {
    background-color: var(--md-surface) !important;
    color: var(--md-on-surface);
    margin-top: 0.5rem;
}

/* Match the dropdown items' font to the rest of the app (sidebar nav uses the
   same family/size/weight); Radzen's own theme font differs otherwise. */
.header-profile-menu .rz-navigation-item-link {
    font-family: var(--font-primary) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--md-on-surface) !important;
    padding: 0.5rem 1rem !important;
}

.header-profile-menu .rz-navigation-item-text {
    font-family: inherit !important;
    color: inherit !important;
}

.header-profile-menu .rz-navigation-item-icon {
    font-size: 1.1rem !important;
    color: inherit !important;
    opacity: 0.8;
}

.header-profile-menu .rz-navigation-item-link:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
    color: var(--md-on-surface) !important;
}

html[data-text-case="upper"] .text-case-target {
    text-transform: uppercase !important;
}

html[data-text-case="lower"] .text-case-target {
    text-transform: lowercase !important;
}

html:not([data-text-case]) .text-case-target,
html[data-text-case="none"] .text-case-target {
    text-transform: none !important;
}

/* ─────────────────────────────────────────────────────────
   HEADER COMPANY DROPDOWN (selector de sociedades, top-right)
   Mismo estilo de texto/tipografía que el trigger del header y
   mismo aspecto/hover de los ítems que el menú de perfil.
   ───────────────────────────────────────────────────────── */
.header-company-dropdown.rz-dropdown {
    font-family: var(--font-primary) !important;
}

.header-company-dropdown .rz-dropdown-panel {
    background-color: var(--md-surface) !important;
    color: var(--md-on-surface);
    margin-top: 0.5rem;
}

.header-company-dropdown .rz-dropdown-item {
    font-family: var(--font-primary) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--md-on-surface) !important;
    padding: 0.5rem 1rem !important;
}

.header-company-dropdown .rz-dropdown-item:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
    color: var(--md-on-surface) !important;
}
}