: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;
}

/* ── 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);
}

.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;
}

/* ════════════════════════════════════════════ */
/* ── 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;
}