:root {
    /* ── Paleta verde institucional (modo claro) ── */
    --green-950: #0d2f1a;
    --green-900: #123f24;
    --green-800: #19542f;
    --green-700: #216b3b;
    --green-100: #e8f3eb;
    --gold: #d9a514;
    --ink: #1a2535;
    --muted: #4a607a;
    --surface: #ffffff;
    --canvas: #f0f4f8;
    --line: #e2e8f0;
    /* ── Design tokens semánticos (modo claro) ── */
    --pla-primary: var(--green-800);
    --pla-primary-surface: var(--green-100);
    --pla-primary-text: var(--green-800);
    --pla-accent: var(--gold);
    --pla-success-surface: #dff3e5;
    --pla-success-text: #155e31;
    --pla-warning-surface: #fff0b8;
    --pla-warning-text: #765800;
    --pla-error-surface: #fde8e8;
    --pla-error-text: #9b1c1c;
    --pla-info-surface: #e6f1fb;
    --pla-info-text: #0c447c;
    --pla-neutral-surface: #e9ecef;
    --pla-neutral-text: #5f6368;
    --pla-row-hover: #eef6f0;
    --pla-row-selected-bg: #e5f2e8;
    --pla-row-selected-text: #103b21;
    --pla-row-selected-border: var(--gold);
    --pla-row-external-bg: #fff8e1;
    --pla-text-primary: var(--ink);
    --pla-text-muted: var(--muted);
}

/* ── Modo oscuro ── */
[data-mud-theme="dark"] {
    --green-950: #0d2f1a;
    --green-900: #123f24;
    --green-800: #19542f;
    --green-700: #216b3b;
    --green-100: #e8f3eb;
    --gold: #f0c040;
    --ink: #e2ebe4;
    --muted: #9aaa9e;
    --surface: #1e2820;
    --canvas: #161d17;
    --line: #2e3d31;
    --pla-primary: #4caf78;
    --pla-primary-surface: #112a1a;
    --pla-primary-text: #7dd4a0;
    --pla-accent: #f0c040;
    --pla-success-surface: #0d2b14;
    --pla-success-text: #86efac;
    --pla-warning-surface: #2d1f00;
    --pla-warning-text: #fcd34d;
    --pla-error-surface: #2d0d0d;
    --pla-error-text: #fca5a5;
    --pla-info-surface: #042c53;
    --pla-info-text: #93c5fd;
    --pla-neutral-surface: #2a2d2b;
    --pla-neutral-text: #b0b8b3;
    --pla-row-hover: #1a2e1e;
    --pla-row-selected-bg: #17351f;
    --pla-row-selected-text: #a7f3c0;
    --pla-row-selected-border: #f0c040;
    --pla-row-external-bg: #2a2200;
    --pla-text-primary: var(--ink);
    --pla-text-muted: var(--muted);
}

/* ════════════════════════════════════════════ */

html {
    font-size: 14px;
}

@media (min-width: 1600px) {
    html {
        font-size: 15px;
    }
}

@media (min-width: 1920px) {
    html {
        font-size: 16px;
    }
}

html, body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--canvas) !important;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

/* MudBlazor font override */
.mud-typography {
    font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
}

/* MudDrawer: keep sidebar full height */
.mud-drawer {
    display: flex;
    flex-direction: column;
}

.mud-drawer-overlay.mud-drawer-anchor--right {
    pointer-events: none;
}

/* Cursor pointer for table rows */
.cursor-pointer {
    cursor: pointer;
}

/* ── Code chip ── */
.code-chip {
    padding: .2rem .45rem;
    border-radius: 6px;
    color: var(--pla-primary-text);
    background: var(--pla-primary-surface);
    font-family: Consolas, monospace;
    font-size: .78rem;
    font-weight: 700;
}

/* ── Avatar de iniciales: celda combinada identidad (nombre + documento) en tablas ── */
.pla-avatar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pla-primary-surface);
    color: var(--pla-primary-text);
    font-size: .78rem;
    font-weight: 800;
}

/* ── Status pills ── */
.status-pill {
    display: inline-block;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 750;
}

    .status-pill.pending {
        color: var(--pla-warning-text);
        background: var(--pla-warning-surface);
    }

    .status-pill.paid {
        color: var(--pla-success-text);
        background: var(--pla-success-surface);
    }

/* ── History status badges ── */
.history-status {
    display: inline-block;
    margin-left: .4rem;
    padding: .15rem .4rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 800;
}

    .history-status.generado {
        color: var(--pla-success-text);
        background: var(--pla-success-surface);
    }

    .history-status.observado {
        color: var(--pla-warning-text);
        background: var(--pla-warning-surface);
    }

    .history-status.reemplazado {
        color: var(--pla-neutral-text);
        background: var(--pla-neutral-surface);
    }

/* ── Chips de estado (MudChip) ── */
.chip-activo {
    background-color: var(--pla-success-surface) !important;
    color: var(--pla-success-text) !important;
}

.chip-pension {
    background-color: var(--pla-warning-surface) !important;
    color: var(--pla-warning-text) !important;
}

.chip-observado {
    background-color: var(--pla-error-surface) !important;
    color: var(--pla-error-text) !important;
}

.chip-licencia {
    background-color: var(--pla-info-surface) !important;
    color: var(--pla-info-text) !important;
}

.chip-reemplazado {
    background-color: var(--pla-neutral-surface) !important;
    color: var(--pla-neutral-text) !important;
}

/* ── External (non-registered) rows ── */
.external-row td {
    background: var(--pla-row-external-bg) !important;
}

/* ── MudTable / MudDataGrid — micro-interacciones ── */
.mud-table-row {
    transition: background-color 150ms ease;
}

    .mud-table-row.mud-selected-item td {
        color: var(--pla-row-selected-text);
        background: var(--pla-row-selected-bg) !important;
        box-shadow: inset 4px 0 var(--pla-row-selected-border), inset 0 1px var(--line), inset 0 -1px var(--line);
    }

/* pla-grid: tabla con hover y encabezado institucional */
.pla-grid .mud-table-row:hover td {
    background-color: var(--pla-row-hover) !important;
}

.pla-grid .mud-table-head .mud-table-cell {
    background-color: var(--pla-primary-surface);
    color: var(--pla-primary-text);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pla-grid .col-importe {
    text-align: right;
    font-family: Consolas, monospace;
    font-size: 13px;
    color: var(--pla-text-primary);
}

.pla-grid .col-nombre {
    font-weight: 500;
    color: var(--pla-text-primary);
}

.pla-grid .col-muted {
    color: var(--pla-text-muted);
    font-size: 12px;
}

/* ── Welcome hero ── */
.welcome {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: 22px;
    color: white;
    background: radial-gradient(circle at 86% 18%, rgba(217,165,20,.24), transparent 27%), linear-gradient(130deg, var(--green-950), var(--green-700));
    box-shadow: 0 24px 65px rgba(15,61,32,.18);
}

    .welcome::after {
        position: absolute;
        right: -80px;
        bottom: -180px;
        width: 420px;
        height: 420px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 50%;
        content: "";
    }

/* ── Blazor error UI ── */
#blazor-error-ui {
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    z-index: 3000;
    padding: .8rem 1.25rem;
    color: #3c2600;
    background: #fff3cd;
    box-shadow: 0 -1px 6px rgba(0,0,0,.2);
}

    #blazor-error-ui .dismiss {
        position: absolute;
        right: 1rem;
        cursor: pointer;
    }

/* ── Amount inputs in detail table ── */
.amount-input {
    width: 100px;
    text-align: right;
}

.short-input {
    width: 70px;
}

.name-input {
    min-width: 280px;
    width: 100%;
}

.description-input {
    min-width: 240px;
}

/* ── Inline detail table input fields ── */
.detail-input {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: .3rem .5rem;
    font-size: .8rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--ink);
    width: 100%;
    transition: border-color .15s;
}

    .detail-input:focus {
        outline: none;
        border-color: var(--pla-primary);
        box-shadow: 0 0 0 2px rgba(33,107,59,.15);
    }

    .detail-input:disabled {
        background: transparent;
        border-color: transparent;
        color: var(--ink);
        cursor: default;
        font-weight: 500;
    }

/* ── AppBar ── */
.pla-appbar,
.mud-appbar.pla-appbar {
    background: #c5d9cb !important;
    color: var(--ink) !important;
    border-bottom: 1px solid #aacfb8 !important;
    box-shadow: none !important;
}

.pla-appbar-title {
    font-size: 1.1rem !important;
    font-weight: 800;
    color: #2B356C;
    line-height: 1.4;
}

.pla-appbar-subtitle {
    font-size: .98rem !important;
    color: #4a607a;
}

.pla-status-dot {
    color: #2ea44f;
    font-size: 10px !important;
}

[data-mud-theme="dark"] .pla-status-dot {
    color: #4caf78;
}

/* ── Drawer header ── */
.pla-drawer-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.pla-drawer-logo {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--gold);
    color: var(--green-950);
    font-weight: 900;
    font-size: .9rem;
    flex-shrink: 0;
}

.pla-drawer-title {
    color: white;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
}

.pla-drawer-subtitle {
    color: rgba(255,255,255,.55);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ════════════════════════════════════════════ */

/* ── Toolbar y card principal ── */
.pla-toolbar {
    border: 1px solid var(--line);
    border-radius: 16px;
    background-color: var(--surface);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.pla-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--surface);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Bloques de FormularioTrabajador.razor (Trabajador / Conceptos e importes /
   Vínculo laboral): --surface (blanco) vs --canvas (#f0f4f8) ya son colores
   distintos, pero el contraste real entre ambos es sutil a simple vista —
   .pla-card se usa en 22 archivos del proyecto, así que en vez de acentuarla
   ahí (afectaría todo el sitio), este modificador scoped solo refuerza la
   sombra/borde de estos 3 bloques puntuales.

   Padding: el intento anterior (.pla-card--bloque sola, 1 clase) empataba en
   especificidad (0,1,0) con .pa-3 (confirmado en MudBlazor.min.css:
   ".pa-3{padding:12px !important}") — con ambas !important, quién gana
   depende del orden de <link> en <head>, un empate frágil, no algo a lo que
   haya que confiar el resultado. Selector compuesto .pla-card--bloque.pa-3
   (specificity 0,2,0) gana sin ambigüedad, sin depender del orden de carga.
   Valor real confirmado sin sobreescribir = 12px; +10% = 13.2px → 13px. */
.pla-card--bloque.pa-3 {
    border-color: color-mix(in srgb, var(--pla-primary) 22%, var(--line));
    box-shadow: 0 2px 10px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
    padding-top: 13px !important;
    padding-bottom: 13px !important;
}

.pla-empty-icon {
    font-size: 3rem;
    color: var(--line);
}

/* ── Encabezado de tabla principal ── */
.pla-th {
    color: var(--pla-primary-text) !important;
    background: var(--pla-primary-surface) !important;
    font-size: .67rem !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}

.pla-th-right {
    text-align: right !important;
}

.pla-id-text {
    font-weight: 700;
    color: var(--pla-text-muted);
}

/* ── Editor lateral ── */
.pla-editor {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f8fdfa;
}

.pla-editor-bar {
    height: 4px;
}

.pla-editor-bar--edit {
    background: var(--pla-primary);
}

.pla-editor-bar--paid {
    background: var(--gold);
}

.pla-editor-header {
    padding: .9rem 1.5rem;
    border-bottom: 1px solid var(--line);
}

.pla-editor-body {
    flex: 1;
    overflow: auto;
    padding: 1.5rem;
}

.pla-editor-footer {
    border-top: 1px solid var(--line);
}

.pla-status-icon {
    font-size: 14px;
}

.pla-status-icon--edit {
    color: var(--pla-success-text);
}

.pla-status-icon--paid {
    color: var(--pla-warning-text);
}

.pla-status-label {
    font-weight: 800;
    letter-spacing: .12em;
}

.pla-status-label--edit {
    color: var(--pla-success-text);
}

.pla-status-label--paid {
    color: var(--pla-warning-text);
}

.pla-section-line {
    flex: 1;
    height: 1px;
    background: var(--line);
}

.pla-import-bar {
    border: 1px solid var(--line);
    border-radius: 12px;
}

/* ── Panel de totales ── */
.pla-totals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--pla-primary-surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.pla-totals-cell {
    padding: .9rem 1.2rem;
    text-align: center;
    border-left: 1px solid var(--line);
}

    .pla-totals-cell:first-child {
        border-left: none;
    }

.pla-totals-cell--liquido {
    background: rgba(33,107,59,.08);
}

[data-mud-theme="dark"] .pla-totals-cell--liquido {
    background: rgba(76,175,120,.1);
}

.pla-totals-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--pla-text-muted);
    margin-bottom: .25rem;
}

.pla-totals-label--primary {
    color: var(--pla-primary);
}

.pla-totals-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pla-text-primary);
}

.pla-totals-value--warning {
    color: var(--pla-warning-text);
}

.pla-totals-value--primary {
    color: var(--pla-primary);
}

.pla-totals-value--lg {
    font-size: 1.15rem;
    font-weight: 800;
}

/* ── Tabla interior de participantes ── */
.pla-inner-table-wrap {
    overflow: auto;
    max-height: 58vh;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.pla-inner-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .79rem;
}

.pla-inner-thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.pla-inner-th {
    padding: .6rem;
    border-bottom: 1px solid var(--line);
    background: var(--pla-primary-surface);
    color: var(--pla-primary-text);
    font-size: .67rem;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pla-inner-th-right {
    text-align: right;
}

.pla-inner-row {
    transition: background 120ms ease;
}

    .pla-inner-row:hover {
        background: var(--pla-row-hover) !important;
    }

.pla-inner-row--alt {
    background: var(--pla-primary-surface);
}

.pla-inner-row--external {
    background: var(--pla-warning-surface);
}

.pla-inner-td {
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--line);
    color: var(--pla-text-primary);
}

.pla-inner-td--num {
    color: var(--pla-text-muted);
    font-weight: 700;
    text-align: center;
}

.pla-inner-td--bold {
    font-weight: 500;
}

.pla-inner-td--muted {
    color: var(--pla-text-muted);
}

.pla-inner-td--right {
    text-align: right;
}

.pla-inner-td--amount {
    text-align: right;
    font-weight: 600;
}

.pla-tc-chip {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 700;
    font-family: Consolas, monospace;
    background: var(--pla-primary-surface);
    color: var(--pla-primary-text);
}

/* ── Overlays ── */
.pla-overlay-paper {
    width: min(680px, 96vw);
    max-height: 92vh;
    overflow: auto;
    border-radius: 18px;
    padding: 1.75rem;
}

.pla-overlay-paper--sm {
    width: min(640px, 96vw);
}

.pla-overlay-header {
    border-bottom: 1px solid var(--line);
}

.pla-overlay-footer {
    border-top: 1px solid var(--line);
}

.pla-history-list {
    max-height: 200px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .75rem;
}

.pla-history-item {
    padding: .4rem 0;
    border-bottom: 1px solid var(--line);
}

.pla-obs-reason {
    color: var(--pla-warning-text);
    font-weight: 600;
    display: block;
    margin-top: .2rem;
}

.pla-obs-panel {
    border: 1px solid var(--pla-warning-text);
    border-radius: 10px;
    background: var(--pla-warning-surface);
}

.pla-validation {
    border-radius: 10px;
}

.pla-validation--ok {
    border: 1px solid var(--pla-success-text);
    background: var(--pla-success-surface);
}

.pla-validation--error {
    border: 1px solid var(--pla-error-text);
    background: var(--pla-error-surface);
}

.pla-reemplazo-note {
    color: var(--pla-warning-text);
    margin-top: .5rem;
    display: block;
}

.pla-problems-list {
    margin-top: .75rem;
    max-height: 160px;
    overflow: auto;
    display: grid;
    gap: .35rem;
}

.pla-problem-item {
    padding: .3rem .5rem;
    border-radius: 5px;
    background: rgba(255,255,255,.12);
}

[data-mud-theme="dark"] .pla-problem-item {
    background: rgba(0,0,0,.2);
}

.pla-report-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.2rem;
}

/* ── Accesibilidad ── */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Fix: anular mud-selected-item dentro de la tabla interior ── */
.pla-inner-table tr.mud-selected-item td,
.pla-inner-table-wrap tr.mud-selected-item td {
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* Truncar celdas con texto largo */
.pla-td-clip {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vista planilla: espacio de trabajo tipo Excel con panel contextual. */
.pla-sheet-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 520px;
    height: calc(100vh - 245px);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}

/* Ficha.razor: mismo tratamiento que .pla-card--bloque (contraste + padding
   +5%), pero .pla-sheet-shell/-toolbar/-panel/-footer se comparten con
   Trabajadores, Plazas y Conceptos — scoped acá para no tocarlas. Sin overflow
   propio (.pla-sheet-shell ya tiene overflow:hidden), así que el borde con
   tinte + sombra se aplican directo. Padding vertical +5% de cada hijo:
   toolbar .65rem→.6825rem, panel 1rem→1.05rem, footer .55rem→.5775rem. */
.pla-sheet-shell--bloque {
    border-color: color-mix(in srgb, var(--pla-primary) 22%, var(--line));
    box-shadow: 0 2px 10px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
}

.pla-sheet-shell--bloque .pla-sheet-toolbar {
    padding-top: .6825rem;
    padding-bottom: .6825rem;
}

.pla-sheet-shell--bloque .pla-sheet-panel {
    padding-top: 1.05rem;
    padding-bottom: 1.05rem;
}

.pla-sheet-shell--bloque .pla-sheet-footer {
    padding-top: .5775rem;
    padding-bottom: .5775rem;
}

.pla-sheet-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--line);
    background: var(--pla-primary-surface);
}

.pla-sheet-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(290px, 1fr);
    min-height: 0;
}

.pla-sheet-layout--master {
    grid-template-columns: minmax(480px, 3fr) minmax(360px, 2fr);
}

.pla-sheet-layout--master .pla-sheet-panel {
    height: 100%;
    overflow-y: auto;
}

.pla-sheet-grid {
    min-width: 0;
    overflow: auto;
    scrollbar-width: auto;
    scrollbar-color: var(--pla-primary) var(--pla-primary-surface);
    border-right: 1px solid var(--line);
    background: var(--surface);
}

.pla-sheet-grid::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.pla-sheet-grid::-webkit-scrollbar-track {
    border: 1px solid var(--line);
    background: var(--pla-primary-surface);
}

.pla-sheet-grid::-webkit-scrollbar-thumb {
    border: 3px solid var(--pla-primary-surface);
    border-radius: 9px;
    background: var(--pla-primary);
}

.pla-sheet-grid::-webkit-scrollbar-thumb:hover {
    background: var(--green-700);
}

.pla-sheet-grid table {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .96rem;
}

/* Vista Plazas AIRHSP: ancho fijo por columna para que "Estado" no salga del viewport. */
.pla-sheet-grid--plazas table {
    table-layout: fixed;
}

/* 6 columnas (N°, Código AIRHSP, Unidad orgánica, Cargo, Ocupación, Estado) —
   la columna "Tipo" se quitó de la tabla: hoy el catálogo es 100% CAS, así que
   repetirla en cada fila no aportaba nada (ver subtítulo fijo en ListaPlazas.razor). */
.pla-sheet-grid--plazas th:nth-child(1),
.pla-sheet-grid--plazas td:nth-child(1) {
    width: 48px;
}

.pla-sheet-grid--plazas th:nth-child(2),
.pla-sheet-grid--plazas td:nth-child(2) {
    width: 110px;
}

.pla-sheet-grid--plazas th:nth-child(3),
.pla-sheet-grid--plazas td:nth-child(3) {
    width: 280px;
}

.pla-sheet-grid--plazas th:nth-child(4),
.pla-sheet-grid--plazas td:nth-child(4) {
    width: 200px;
}

.pla-sheet-grid--plazas th:nth-child(5),
.pla-sheet-grid--plazas td:nth-child(5) {
    width: 110px;
}

.pla-sheet-grid--plazas th:nth-child(6),
.pla-sheet-grid--plazas td:nth-child(6) {
    width: 90px;
}

.pla-sheet-grid thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    min-height: 40px;
    padding: .58rem .7rem !important;
    white-space: nowrap;
    border-right: 1px solid var(--line);
    border-bottom: 2px solid var(--pla-primary);
    background: var(--pla-primary-surface) !important;
    color: var(--pla-primary-text) !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.pla-sheet-grid tbody td {
    height: 40px;
    padding: .48rem .7rem !important;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    background: var(--surface);
}

.pla-sheet-grid tbody tr {
    cursor: pointer;
}

.pla-sheet-grid tbody tr:hover td {
    background: var(--pla-row-hover);
}

.pla-sheet-row-selected td {
    background: var(--pla-row-selected-bg) !important;
    color: var(--pla-row-selected-text);
}

.pla-sheet-row-selected td:first-child {
    box-shadow: inset 4px 0 var(--pla-row-selected-border);
}

.pla-sheet-row-number {
    width: 48px;
    text-align: center !important;
    color: var(--pla-text-muted);
    font-family: Consolas, monospace;
    font-weight: 700;
}

.pla-sheet-money {
    text-align: right !important;
    font-family: Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.pla-sheet-panel {
    min-width: 0;
    overflow: auto;
    padding: 1rem;
    background: color-mix(in srgb, var(--canvas) 55%, var(--surface));
}

.pla-sheet-panel-title {
    margin-bottom: .8rem;
    padding-bottom: .65rem;
    border-bottom: 2px solid var(--pla-primary);
    color: var(--pla-primary-text);
    font-size: 1.05rem;
    font-weight: 800;
}

.pla-resumen-identidad {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: .9rem;
    border-bottom: 2px solid var(--pla-primary);
}

.pla-foto-trabajador {
    display: grid;
    place-items: center;
    width: 88px;
    height: 104px;
    border: 1px solid color-mix(in srgb, var(--pla-primary) 32%, var(--line));
    border-radius: 10px;
    background: var(--pla-primary-surface);
    color: var(--pla-primary-text);
    font-size: 1.45rem;
    font-weight: 850;
    letter-spacing: .06em;
    user-select: none;
}

img.pla-foto-trabajador {
    object-fit: cover;
    object-position: center;
}

.pla-foto-trabajador--ficha {
    width: 120px;
    height: 150px;
    font-size: 1.7rem;
}

.pla-edicion-fotografia {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--pla-primary-surface) 45%, var(--surface));
}

.pla-controles-fotografia {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
}

.pla-selector-fotografia {
    width: 100%;
    max-width: 280px;
    font-size: .8rem;
}

.pla-identidad-trabajador {
    min-width: 0;
}

.pla-nombre-trabajador {
    overflow-wrap: anywhere;
    color: var(--pla-primary-text);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.25;
}

.pla-documento-trabajador {
    margin-top: .35rem;
    color: var(--pla-text-muted);
    font-family: Consolas, monospace;
    font-size: .82rem;
    font-weight: 700;
}

.pla-estado-trabajador {
    align-self: start;
}

.pla-sheet-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.pla-sheet-field {
    min-width: 0;
    padding: .55rem .65rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
}

.pla-sheet-field--wide {
    grid-column: 1 / -1;
}

.pla-sheet-field-label {
    display: block;
    margin-bottom: .18rem;
    color: var(--pla-text-muted);
    font-size: .74rem;
    font-weight: 750;
    text-transform: uppercase;
}

.pla-sheet-field-value {
    display: block;
    overflow: hidden;
    color: var(--pla-text-primary);
    font-size: .96rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Texto secundario pequeño bajo un pla-sheet-field-value, ej. el cargo
   estructural cuando difiere del funcional que ya se muestra como principal. */
.pla-sheet-field-hint {
    display: block;
    overflow: hidden;
    color: var(--pla-text-muted);
    font-size: .74rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pla-sheet-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1.25rem;
    min-height: 48px;
    padding: .55rem .9rem;
    border-top: 2px solid var(--pla-primary);
    background: var(--pla-primary-surface);
}

.pla-sheet-total {
    color: var(--pla-text-muted);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.pla-sheet-total strong {
    margin-left: .35rem;
    color: var(--pla-text-primary);
    font-family: Consolas, monospace;
    font-size: 1rem;
}

/* Vista Plazas AIRHSP: panel de detalle más ancho que el resto de las vistas
   master-detail (más campos, valores de texto más largos — ver Ubicación y
   cargo). Guardado en min-width:1200px para no pelear en especificidad con el
   grid-template-columns:1fr del breakpoint móvil de abajo (ambos targets
   .pla-sheet-layout--master; sin este guard, esta regla —2 clases— le ganaría
   por especificidad a la regla del breakpoint —1 clase— incluso en mobile). */
@media (min-width: 1200px) {
    /* Split 1fr/1.2fr (tabla 45.45% / panel 54.55%) desplazado +10pp a la tabla:
       target 1.22fr/0.98fr = tabla 55.45% / panel 44.55%. Ojo: mover SOLO el fr
       no alcanza — con los pisos originales (420/520, suma 940px) fijos, a un
       ancho típico de contenido (~1500px) el remanente flexible es apenas
       560px, así que un shift del fr ahí solo movía ~3.7pp reales, no 10. Para
       que el 55.45/44.55 se sostenga a cualquier ancho (no solo a uno
       específico), los pisos se reparten con el MISMO ratio 1.22:0.98 sobre la
       suma original de 940px: 940×(1.22/2.2)=521px, 940×(0.98/2.2)=419px. */
    .pla-sheet-layout--wide-panel.pla-sheet-layout--master {
        grid-template-columns: minmax(521px, 1.22fr) minmax(419px, 0.98fr);
    }

    /* Con el panel ya ancho, cada sección entra en una sola línea en vez de
       apilar filas — flex en vez de grid porque el reparto de ancho no es
       parejo: un campo corto ("ACTIVO", "40 horas") y uno largo (nombre del
       ocupante, Establecimiento) no deberían competir por la misma columna.
       .pla-sheet-field--grow le da más flex-grow a los campos que suelen
       llevar texto largo; el resto queda en su ancho base. Los valores
       largos igual truncan con tooltip (title) si no alcanza el espacio. */
    .pla-sheet-layout--wide-panel .pla-sheet-detail-grid {
        display: flex;
        flex-wrap: wrap;
    }

    .pla-sheet-layout--wide-panel .pla-sheet-detail-grid .pla-sheet-field {
        flex: 1 1 130px;
    }

    .pla-sheet-layout--wide-panel .pla-sheet-detail-grid .pla-sheet-field--grow {
        flex: 3 1 220px;
    }
}

@media (max-width: 1199px) {
    .pla-sheet-shell {
        height: auto;
    }

    .pla-sheet-layout,
    .pla-sheet-layout--master {
        grid-template-columns: 1fr;
    }

    .pla-sheet-grid {
        max-height: 55vh;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .pla-sheet-panel {
        max-height: 42vh;
    }
}

@media (max-width: 560px) {
    .pla-resumen-identidad {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: .75rem;
    }

    .pla-foto-trabajador {
        width: 72px;
        height: 88px;
        font-size: 1.2rem;
    }

    .pla-estado-trabajador {
        grid-column: 2;
        justify-self: start;
    }
}

/* ════════════════════════════════════════════ */
/* ── Reportes — tab Por Meses: fila de totales ── */

.meses-totals {
    display: grid;
    grid-template-columns: 1fr 100px 100px 100px 110px 56px;
    align-items: center;
    padding: .55rem 1rem;
    border-top: 2px solid var(--pla-primary);
    background: var(--pla-primary-surface);
    font-size: .78rem;
}

.meses-totals span:first-child {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pla-primary-text);
}

.meses-totals span:not(:first-child) {
    text-align: right;
    font-family: Consolas, monospace;
    font-weight: 700;
    color: var(--pla-text-primary);
}

.meses-totals span:nth-child(5) {
    color: #1b5e20;
}

/* ── Reportes — tab Por Unidades ── */

.unidades-scroll {
    max-height: calc(100vh - 490px);
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.dep-group {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
}

.dep-header {
    padding: .5rem 1rem;
    background: var(--pla-primary-surface);
    color: var(--pla-primary-text);
    font-size: .71rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}

.sec-header {
    padding: .32rem 1rem .32rem 2.5rem;
    background: var(--canvas);
    color: var(--pla-text-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}

.uni-row {
    display: grid;
    grid-template-columns: 36px 140px 120px 1fr 110px 110px;
    align-items: center;
    padding: .38rem 1rem;
    border-bottom: 1px solid var(--line);
    font-size: .79rem;
    transition: background 120ms ease;
}

.uni-row:last-of-type {
    border-bottom: none;
}

.uni-row:hover {
    background: var(--pla-row-hover);
}

.uni-num {
    color: var(--pla-text-muted);
    font-weight: 700;
    font-size: .71rem;
    text-align: center;
}

.uni-mes {
    font-weight: 500;
    color: var(--pla-text-primary);
    font-size: .77rem;
}

.uni-dict {
    font-family: Consolas, monospace;
    font-size: .74rem;
    color: var(--pla-text-muted);
}

.uni-tipo {
    font-size: .76rem;
    color: var(--pla-text-primary);
    padding-right: .5rem;
}

.uni-money {
    text-align: right;
    font-family: Consolas, monospace;
    font-size: .79rem;
    font-weight: 600;
    color: var(--pla-text-primary);
}

.dep-subtotal {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    padding: .4rem 1rem;
    background: var(--pla-primary-surface);
    border-top: 1px solid var(--line);
    font-size: .74rem;
    color: var(--pla-primary-text);
}

.dep-subtotal strong {
    font-family: Consolas, monospace;
}

.grand-total {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    padding: .6rem 1rem;
    border-radius: 10px;
    background: var(--green-800);
    color: white;
    font-size: .77rem;
    font-weight: 700;
}

.grand-total strong {
    font-family: Consolas, monospace;
}

/* Flujo guiado del cálculo CAS ------------------------------------------- */
.pla-flow-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: .55rem;
    margin: 1rem 0 .75rem;
}

.pla-flow-step {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 62px;
    padding: .65rem .8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--pla-text-primary);
    font: inherit;
    font-size: .92rem;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.pla-flow-step:hover,
.pla-flow-step:focus-visible {
    border-color: var(--pla-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pla-primary) 16%, transparent);
    outline: none;
}

.pla-flow-step small {
    display: block;
    margin-top: .15rem;
    color: var(--pla-text-muted);
    font-size: .75rem;
    font-weight: 650;
}

.pla-flow-number {
    display: inline-grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--pla-primary-surface);
    color: var(--pla-primary-text);
    font-weight: 850;
}

.pla-flow-step.is-active {
    border-color: var(--pla-primary);
    background: var(--pla-primary-surface);
    box-shadow: inset 0 -3px 0 var(--pla-primary);
}

.pla-flow-step.is-active .pla-flow-number {
    background: var(--pla-primary);
    color: #fff;
}

.pla-flow-step.is-complete .pla-flow-number {
    background: var(--green-700);
    color: #fff;
}

.pla-flow-step.is-blocked {
    background: var(--surface-soft);
    color: var(--pla-text-muted);
}

.pla-flow-tabs .mud-tabs-tabbar {
    display: none;
}

.pla-flow-action-card {
    height: 100%;
    min-height: 190px;
}

.pla-flow-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: .85rem;
}

.pla-flow-report-grid .mud-button-root {
    min-height: 54px;
    justify-content: flex-start;
}

.pla-flow-checklist {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.pla-flow-checklist > div {
    display: grid;
    grid-template-columns: 28px minmax(180px, 1fr) auto;
    align-items: center;
    gap: .65rem;
    min-height: 52px;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--line);
    font-size: .94rem;
}

.pla-flow-checklist > div:last-child {
    border-bottom: 0;
}

@media (max-width: 1100px) {
    .pla-flow-steps {
        grid-template-columns: repeat(5, minmax(175px, 1fr));
        overflow-x: auto;
        padding-bottom: .35rem;
    }
}

@media (max-width: 700px) {
    .pla-flow-report-grid {
        grid-template-columns: 1fr;
    }

    .pla-flow-checklist > div {
        grid-template-columns: 28px 1fr;
    }

    .pla-flow-checklist strong {
        grid-column: 2;
    }
}

.pla-flow-stage-area {
    position: relative;
}

.pla-flow-stage-area.has-report {
    min-height: 76vh;
}

.pla-report-overlay {
    position: absolute;
    z-index: 40;
    inset: 0;
    display: grid;
    place-items: start center;
    padding: .75rem;
    border-radius: 10px;
    background: rgba(20, 39, 32, .28);
    backdrop-filter: blur(1px);
}

.pla-report-preview {
    display: flex;
    flex-direction: column;
    width: min(1500px, 98%);
    height: calc(76vh - 1.5rem);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 18px 48px rgba(13, 46, 32, .24);
}

.pla-report-preview-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 78px;
    padding: .7rem 1rem;
    border-bottom: 2px solid var(--pla-primary);
    background: #fff;
}

.pla-report-preview-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: var(--surface-soft);
}

.pla-report-preview-body > .mud-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 1rem !important;
}

/* Creación progresiva de planilla CAS ---------------------------------- */
.pla-creation-steps {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
}

.pla-creation-steps .pla-flow-step:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.pla-creation-selection-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}

.pla-creation-selection-footer div {
    display: flex;
    flex-direction: column;
}

.pla-creation-selection-footer span {
    color: var(--pla-text-muted);
    font-size: .82rem;
}

.pla-creation-review-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
    min-height: 470px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.pla-creation-review-table {
    min-width: 0;
    overflow: auto;
    border-right: 1px solid var(--line);
}

.pla-creation-review-table .mud-table-root {
    min-width: 1050px;
}

.pla-creation-review-panel {
    min-width: 0;
    overflow-y: auto;
    padding: 1rem;
    background: var(--surface-soft);
}

@media (max-width: 700px) {
    .pla-report-overlay {
        padding: .35rem;
    }

    .pla-report-preview {
        width: 100%;
        height: calc(78vh - .7rem);
    }

    .pla-report-preview-header {
        align-items: flex-start;
        min-height: 96px;
    }

    .pla-creation-selection-footer {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 1100px) {
    .pla-creation-steps {
        grid-template-columns: repeat(3, minmax(190px, 1fr));
    }

    .pla-creation-review-layout {
        grid-template-columns: 1fr;
    }

    .pla-creation-review-table {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}