/* ============================================================
   Capital Humano — estilos propios del módulo (ch-* y grillas)

   Este archivo concentra TODOS los estilos particulares de los
   razors de Capital Humano cuyo diseño no se reutiliza en el resto
   del sistema (planillas de Sueldos, SAC, Vacaciones, Adelantos y
   Recibos, con sus listas y CRUDs).

   IMPORTANTE — separación de responsabilidades:
   - verticalcrudlayout.css (vc-*) es EXCLUSIVO de los componentes
     que siguen el patrón vertical CRUD. En Capital Humano, solo
     Empleado/EmpleadoList/EmpleadoCRUD lo usan.
   - El resto de los razors de Capital Humano NO son vertical CRUD:
     usan las clases ch-* y demás definidas en este archivo, nunca
     las clases vc-*.
   ============================================================ */

/* ── Layout de lista (ch-list) — listas de planillas ─────────
   Listado de pantalla completa que NO sigue el patrón vertical CRUD.
   Replica el layout de lista/toolbar que necesitan SueldoList,
   SacList, VacacionList, AdelantoList y ReciboList sin depender de
   verticalcrudlayout.css. */
.ch-list {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ch-list .mud-data-grid {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.ch-list .mud-data-grid-toolbar,
.ch-list .mud-table-pagination {
    flex-shrink: 0;
    min-width: 0;
}

.ch-list .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* Neutraliza el padding/min-height que MudBlazor inyecta en mud-toolbar
   para que ch-toolbar controle por completo el espaciado. */
.ch-list .mud-toolbar {
    min-height: unset !important;
    height: auto !important;
    padding: 0 !important;
}

/* Filas clickeables */
.ch-list .mud-table-row {
    cursor: pointer;
}

/* Toolbar de la lista (encabezado + acciones) */
.ch-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ch-toolbar-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ch-toolbar-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Campo de búsqueda en toolbars de lista y barras de control de CRUD */
.ch-list-search {
    width: 300px;
    max-width: 300px;
}

/* Switch de bloqueo/edición de planillas (_modoEdicion). El label tiene ancho fijo
   para que el switch no se desplace al alternar entre "Solo lectura" y "Modificar". */
.ch-lock-switch-label {
    display: inline-block;
    width: 6.5em;
}

@media (max-width: 600px) {
    .ch-list-search {
        width: 100%;
    }
}

/* ── Grilla compacta (sueldo-grid) ─────────────────────────── */
.sueldo-grid .mud-table-cell {
    padding: 0px 4px !important;
    height: 25px !important;
    line-height: 1 !important;
}
.sueldo-grid .mud-table-row {
    height: 25px !important;
}
.sueldo-grid .mud-table-body .mud-table-cell {
    font-size: 0.82rem !important;
}
.sueldo-grid .mud-table-header .mud-table-cell {
    font-size: 0.7rem !important;
    padding: 5px 4px !important;
    font-weight: 300 !important;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 60%, var(--mud-palette-primary) 40%) !important;
    color: var(--mud-palette-primary-text) !important;
    border-bottom: 2px solid var(--mud-palette-primary-darken) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: right !important;
}

/* Panel sector */
.sector-panel .mud-expand-panel-header {
    border-left: 4px solid var(--mud-palette-info) !important;
    min-height: 36px !important;
    padding: 0 12px !important;
}
.sector-panel .mud-expand-panel-header-text {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--mud-palette-text-secondary) !important;
}

/* ── Alineamiento ───────────────────────────────────────────── */
.header-right { justify-content: flex-end; }
.cell-right   { text-align: right; }
.cell-center  { text-align: center; }

/* Header centrado (columnas de checkbox/ícono como Fijo, Desvinculado, CalculoPromedio) */
.sueldo-grid th.mud-table-cell.header-center,
.sueldo-grid .mud-table-header .mud-table-cell.header-center,
.sueldo-grid .mud-table-sticky-header .mud-table-cell.header-center {
    text-align: center !important;
}
.sueldo-grid .mud-table-header .mud-table-cell.header-center .mud-table-cell-content,
.sueldo-grid .mud-table-header .mud-table-cell.header-center .column-header {
    justify-content: center !important;
    text-align: center !important;
}

/* Cobertura adicional para variaciones de DOM en headers de MudDataGrid */
.sueldo-grid th.mud-table-cell.header-right,
.sueldo-grid .mud-table-header .mud-table-cell.header-right,
.sueldo-grid .mud-table-sticky-header .mud-table-cell.header-right {
    text-align: right !important;
}

.sueldo-grid th.mud-table-cell.header-right .mud-table-sort-label,
.sueldo-grid .mud-table-header .mud-table-cell.header-right .mud-table-sort-label,
.sueldo-grid .mud-table-sticky-header .mud-table-cell.header-right .mud-table-sort-label,
.sueldo-grid .mud-table-header .mud-table-cell.header-right .mud-table-cell-content,
.sueldo-grid .mud-table-header .mud-table-cell.header-right button,
.sueldo-grid .mud-table-header .mud-table-cell.header-right span {
    justify-content: flex-end !important;
    text-align: right !important;
}

/* Some MudBlazor versions render header text inside a .column-header span.
   Ensure that is right-aligned when the header cell has header-right. */
.sueldo-grid th.mud-table-cell.header-right > .column-header,
.sueldo-grid .mud-table-cell.header-right > .column-header,
.sueldo-grid .mud-table-sticky-header .mud-table-cell.header-right > .column-header {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    text-align: right !important;
}

/* Mantener el icono de orden al extremo derecho */
.sueldo-grid .mud-table-header .mud-table-cell.header-right .mud-table-sort-label .mud-icon-root,
.sueldo-grid .mud-table-sticky-header .mud-table-cell.header-right .mud-table-sort-label .mud-icon-root {
    margin-left: 6px !important;
}

/* Override para columnas de nombre/texto: alinear header a la izquierda */
.sueldo-grid .col-name .mud-table-sort-label,
.sueldo-grid .col-sector .mud-table-sort-label,
.sueldo-grid .col-st-nombre .mud-table-sort-label,
.sueldo-grid .col-st-sector .mud-table-sort-label,
.sueldo-grid .col-st-categoria .mud-table-sort-label,
.sueldo-grid .col-text .mud-table-sort-label,
.sueldo-grid .col-adelanto-name .mud-table-sort-label,
.sueldo-grid .col-adelanto-sector .mud-table-sort-label,
.sueldo-grid .col-obs-novedad .mud-table-sort-label,
.sueldo-grid .col-nombre-novedad .mud-table-sort-label,
.sueldo-grid .col-observaciones .mud-table-sort-label {
    justify-content: flex-start !important;
}

/* ── Adorno de moneda pegado al valor ($0, no $ 0) ─────────── */
.sueldo-grid .mud-input-adornment-start {
    padding-right: 0 !important;
    margin-right: 0 !important;
}
.sueldo-grid .mud-input-adornment-start + input,
.sueldo-grid .mud-input-adornment-start + .mud-input-slot {
    padding-left: 2px !important;
}

/* ── Fila seleccionada — resaltado sutil ────────────────────── */
.sueldo-grid .sueldo-row-selected td {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
}

/* ── Celdas editables — color definido por paleta del theme ──
   Solo se aplica cuando la grilla está en modo edición (.sueldo-edicion).
   Se usa info con opacidad reducida para un tono suave pero identificable. */
.sueldo-edicion .cell-editable {
    background-color: color-mix(in srgb, var(--mud-palette-info) 15%, transparent) !important;
    color: var(--mud-palette-text-primary) !important;
}
.mud-theme-dark .sueldo-edicion .cell-editable {
    background-color: color-mix(in srgb, var(--mud-palette-info) 20%, transparent) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Mantener alineación derecha dentro de celdas editables al entrar en modo edición */
.sueldo-grid .cell-right input,
.sueldo-grid .cell-right .mud-input-slot,
.sueldo-edicion .cell-editable input,
.sueldo-edicion .cell-editable .mud-input-slot,
.adelanto-edicion .cell-editable input,
.adelanto-edicion .cell-editable .mud-input-slot {
    text-align: right !important;
}

/* Compactar inputs de edición dentro de la grilla para evitar saltos de altura */
.sueldo-grid .mud-input-control {
    margin: 0 !important;
}
.sueldo-grid .mud-input-outlined {
    padding: 0 4px !important;
    height: 21px !important;
    min-height: 21px !important;
}
.sueldo-grid .mud-input-outlined input.mud-input-slot {
    padding: 0 !important;
    height: 21px !important;
    font-size: 0.82rem !important;
}
.sueldo-grid .mud-input-adornment-start {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ── Anchos de columna — compartidos ────────────────────────── */
.col-category    { width: 60px; min-width: 60px; }
.col-name        { min-width: 140px; }
.col-sector      { width: 100px !important; min-width: 100px !important; max-width: 100px !important; overflow: hidden; white-space: nowrap; }
.col-text        { min-width: 120px; }

/* ── Anchos de columna — especificaciones de AdelantoCRUD ────── */
.col-adelanto-name   { min-width: 180px; }
.col-adelanto-sector { min-width: 130px; }
.col-adelanto-hstrab { min-width: 90px; }
.col-adelanto-valhor { min-width: 100px; }


.col-hours {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    overflow: hidden;
    white-space: nowrap;
}
.col-currency-sm {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    overflow: hidden;
    white-space: nowrap;
}
.col-currency-md {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    overflow: hidden;
    white-space: nowrap;
}
.col-currency-lg {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    overflow: hidden;
    white-space: nowrap;
}

/* ── Anchos de columna — EmpleadoSueldo (historial) ─────────── */
.col-period-sm { width: 45px; min-width: 45px; }
.col-period-md { width: 70px; min-width: 70px; }

/* ── Anchos de columna — LiquidacionCRUD (títulos completos, en una sola línea) ── */
/* Identificación: ancho fijo con elipsis para datos largos. */
.col-liq-nombre { width: 160px; min-width: 160px; max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.col-liq-sector { width: 150px; min-width: 150px; max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.col-liq-cat    { width: 130px; min-width: 130px; max-width: 130px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Datos/cálculos: min-width dimensionado al título, sin wrap (el título nunca se corta ni se solapa). */
.col-liq-xs { min-width: 90px;  white-space: nowrap; }
.col-liq-sm { min-width: 120px; white-space: nowrap; }
.col-liq-md { min-width: 160px; white-space: nowrap; }
.col-liq-lg { min-width: 220px; white-space: nowrap; }

/* Forzar el título en una sola línea en los headers de Liquidaciones */
.sueldo-grid .mud-table-header .mud-table-cell.col-liq-nombre,
.sueldo-grid .mud-table-header .mud-table-cell.col-liq-sector,
.sueldo-grid .mud-table-header .mud-table-cell.col-liq-cat,
.sueldo-grid .mud-table-header .mud-table-cell.col-liq-xs,
.sueldo-grid .mud-table-header .mud-table-cell.col-liq-sm,
.sueldo-grid .mud-table-header .mud-table-cell.col-liq-md,
.sueldo-grid .mud-table-header .mud-table-cell.col-liq-lg {
    white-space: nowrap !important;
}

/* Contenedor principal SueldoCRUD */
.sueldo-crud-container {
    height: calc(100vh - 64px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    box-sizing: border-box;
}

/* ── EmpleadoList: resaltado de columna editable en modo edición ─ */
.empleado-edicion .col-valor-hora {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.12) !important;
}

.adelanto-edicion .col-adelanto {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.12) !important;
}

/* ── Alertas en SueldoCRUD ──────────────────────────────────── */

/* Columna de icono de alerta: ancho fijo mínimo */
.col-alerta {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    text-align: center !important;
    padding: 0 2px !important;
}

/* Celda con alerta activa: fondo ámbar suave */
.cell-alert {
    background-color: rgba(255, 160, 0, 0.12) !important;
}

/* Celda con alerta de descuento: fondo rojo suave */
.cell-alert-danger {
    background-color: rgba(244, 67, 54, 0.12) !important;
}

/* Celda con alerta de propina: fondo verde suave */
.cell-alert-success {
    background-color: rgba(76, 175, 80, 0.12) !important;
}

/* Efectivo negativo: valor destacado en amarillo (el empleado quedó con saldo en contra) */
.cell-efectivo-negativo {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

/* Columna observaciones manuales */
.col-observaciones {
    min-width: 200px;
}

/* Columna observaciones de novedad VeoTime (más ancha, solo lectura) */
.col-obs-novedad {
    min-width: 250px;
}

/* Columna nombre de novedad */
.col-nombre-novedad {
    min-width: 200px;
}

/* ── Columnas fijas (sticky) en SueldoCRUD ───────────────────
   Mantienen Alerta, Nombre, Sector, Categoría y Fijo visibles al
   hacer scroll horizontal. Los offsets `left` son acumulativos según
   los anchos fijos de cada columna previa. */
.sueldo-grid .sticky-col {
    position: sticky !important;
    z-index: 2;
}
.sueldo-grid .mud-table-body .sticky-col {
    background-color: var(--mud-palette-surface);
}
.sueldo-grid th.sticky-col,
.sueldo-grid .mud-table-header .sticky-col,
.sueldo-grid .mud-table-sticky-header .sticky-col {
    z-index: 5 !important;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 60%, var(--mud-palette-primary) 40%) !important;
}
/* La fila seleccionada conserva su resaltado también en las celdas fijas (opaco para no transparentar el scroll) */
.sueldo-grid .sueldo-row-selected .sticky-col {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface)) !important;
}

/* Offsets acumulados: alerta(36) + nombre(140) + sector(100) + categoría(90) */
.sueldo-grid .col-alerta.sticky-col { left: 0; }
.sueldo-grid .col-st-nombre {
    width: 140px !important; min-width: 140px !important; max-width: 140px !important;
    left: 36px; overflow: hidden; white-space: nowrap;
}
.sueldo-grid .col-st-sector {
    width: 100px !important; min-width: 100px !important; max-width: 100px !important;
    left: 176px; overflow: hidden; white-space: nowrap;
}
.sueldo-grid .col-st-categoria {
    width: 90px !important; min-width: 90px !important; max-width: 90px !important;
    left: 276px; overflow: hidden; white-space: nowrap;
}
.sueldo-grid .col-st-fijo {
    width: 40px !important; min-width: 40px !important; max-width: 40px !important;
    left: 366px; text-align: center; overflow: hidden; white-space: nowrap;
    padding: 0 2px !important;
}