/*
 * Argo / CFDX design system.
 * Palette: Pantone Color of the Year 2026, Cloud Dancer (11-4201), with the "Atmospheric" and
 * "Light & Shadow" palettes. Emitted invoices are "light" (sky blues), received ones are "shadow"
 * (violet / hematite). Type: Atkinson Hyperlegible Next for the UI and Atkinson Hyperlegible Mono only
 * for identifiers (UUID, RFC, folios), where 0/O, 1/l/I and B/8 must not be confused.
 */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:wght@400;600&family=Atkinson+Hyperlegible+Next:wght@400;500;600;700&display=swap');

:root {
    /* Pantone sources */
    --cloud-dancer: #F0EFEB;      /* 11-4201 */
    --nantucket-breeze: #B7D0EA;  /* 14-4005 Atmospheric */
    --alaskan-blue: #6EA9D2;      /* 15-4225 Atmospheric */
    --regatta: #497AB7;           /* 18-4039 Atmospheric */
    --cosmic-sky: #AAABC4;        /* 15-3909 Atmospheric */
    --dusky-citron: #E4CC82;      /* 14-0827 Atmospheric */
    --veiled-vista: #C7E4CA;      /* 12-6000 Light & Shadow */
    --golden-mist: #D6CD95;       /* 13-0624 Light & Shadow */
    --quiet-violet: #A793AC;      /* 16-3610 Light & Shadow */
    --cloud-cover: #9A9393;       /* 16-1523 Light & Shadow */
    --hematite: #756F6A;          /* 17-5800 Light & Shadow */
    --blue-fusion: #4A6275;       /* 18-4218 Light & Shadow */

    /* Roles */
    --bg: var(--cloud-dancer);
    --surface: #FAFAF8;
    --surface-sunk: #E7E5E0;
    --ink: #22313C;               /* deep shadow of Blue Fusion; 11:1 on Cloud Dancer */
    --ink-soft: #4A6275;          /* Blue Fusion; 5.5:1 */
    --ink-muted: #615B56;         /* darkened Hematite; 5.6:1 */
    --line: #D8D5CF;
    --line-strong: #B9B4AE;
    --action: #3A6597;            /* Regatta, deepened for 5:1 text contrast */
    --action-hover: #2F5480;
    --action-tint: #E2ECF6;
    --focus: #3A6597;

    /* Chart pair, validated with the dataviz palette script (CVD, normal-vision and contrast checks pass):
       emitted = Regatta / Alaskan Blue family, received = Dusky Citron / Golden Mist family. */
    --light: #4A84C4;                     /* emitted (above the axis) */
    --light-tint: #DCE8F4;
    --shadow: #A6822A;                    /* received (below the axis) */
    --shadow-tint: #F1E8CF;
    --violet-tint: #E7E0E8;               /* Quiet Violet tint (egreso marks) */

    --ok-bg: #DCEEDD;   --ok-ink: #2D5A36;      /* Veiled Vista */
    --void-bg: #E2DEDA; --void-ink: #4E4844;    /* Hematite: a cancelled document falls into shadow */
    --warn-bg: #EFE6BF; --warn-ink: #5E5220;    /* Golden Mist / Dusky Citron */
    --info-bg: var(--action-tint); --info-ink: var(--action-hover);
    --crit-bg: #F3E3E6; --crit-ink: #6E3341;    /* 69-B and expired e.firma: the one alarm tone */
    --crit-line: #C98B98;

    --radius-control: 6px;
    --radius-panel: 10px;
    --font-ui: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-id: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Type scale (minor third, 14px base) */
    --fs-xs: 0.75rem;   /* 12 */
    --fs-sm: 0.8125rem; /* 13 */
    --fs-md: 0.875rem;  /* 14 */
    --fs-lg: 1.0625rem; /* 17 */
    --fs-xl: 1.25rem;   /* 20 */
    --fs-2xl: 1.5rem;   /* 24 */
    --fs-3xl: 2rem;     /* 32 */
}

/* ---------- Base ---------- */
html { font-size: 16px; }
body {
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
}
a { color: var(--action); }
a:hover { color: var(--action-hover); }
h1, h2, h3, h4, h5 { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mono, .id { font-family: var(--font-id); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.muted { color: var(--ink-muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- App shell ---------- */
.app-nav {
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0.625rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.app-nav__brand {
    font-weight: 700; font-size: var(--fs-lg); color: var(--ink); text-decoration: none; letter-spacing: 0.02em;
}
.app-nav__brand:hover { color: var(--ink); text-decoration: none; }
.app-nav__account { display: flex; align-items: center; gap: 0.5rem; }
.app-nav__account label { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); }
.app-nav__account select {
    font-family: var(--font-id); font-size: var(--fs-md);
    border: 1px solid var(--line-strong); border-radius: var(--radius-control);
    background: var(--surface); color: var(--ink); padding: 0.25rem 0.5rem; height: auto;
}
.app-nav__links { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; flex: 1; }
.app-nav__links a {
    display: block; padding: 0.375rem 0.75rem; border-radius: var(--radius-control);
    color: var(--ink-soft); text-decoration: none; font-weight: 500;
}
.app-nav__links a:hover { background: var(--surface-sunk); color: var(--ink); }
.app-nav__links a[aria-current="page"] { background: var(--action-tint); color: var(--action-hover); }
.app-nav__admin { padding: 0.375rem 0.75rem; border-radius: var(--radius-control); color: var(--ink-soft); text-decoration: none; font-weight: 500; white-space: nowrap; }
.app-nav__admin:hover { background: var(--surface-sunk); color: var(--ink); text-decoration: none; }
.app-nav__admin[aria-current="page"] { background: var(--action-tint); color: var(--action-hover); }
.app-main { padding: 1.25rem 1.5rem 2.5rem; }
.app-footer { padding: 1rem 1.5rem; color: var(--ink-muted); font-size: var(--fs-sm); border-top: 1px solid var(--line); }

/* ---------- Controls ---------- */
.btn { font-family: var(--font-ui); font-weight: 500; border-radius: var(--radius-control); font-size: var(--fs-md); }
.btn-primary { background: var(--action); border-color: var(--action); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--action-hover); border-color: var(--action-hover); color: #fff; }
.btn-quiet {
    background: transparent; border: 1px solid var(--line-strong); color: var(--ink);
}
.btn-quiet:hover:not(:disabled) { background: var(--surface-sunk); }
.btn-quiet:disabled, .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-outline-dark, .btn-outline-primary, .btn-secondary {
    background: transparent; border: 1px solid var(--line-strong); color: var(--ink);
}
.btn-outline-dark:hover:not(:disabled), .btn-outline-primary:hover:not(:disabled), .btn-secondary:hover { background: var(--surface-sunk); color: var(--ink); }
.form-control, .custom-select {
    font-family: var(--font-ui); font-size: var(--fs-md); color: var(--ink);
    background-color: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-control);
    height: auto; padding: 0.375rem 0.625rem;
}
.form-control:focus, .custom-select:focus { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-tint); }
select[multiple].form-control { padding: 0.25rem; }
select[multiple].form-control option { padding: 0.125rem 0.375rem; border-radius: 4px; }
select[multiple].form-control option:checked { background: var(--action-tint); color: var(--action-hover); }
label { color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 500; margin-bottom: 0.25rem; }
small, .form-hint { color: var(--ink-muted); font-size: var(--fs-xs); }

/* Pills (status) */
.pill {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.0625rem 0.5rem; border-radius: 999px;
    font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}
.pill--ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill--void { background: var(--void-bg); color: var(--void-ink); text-decoration: line-through; text-decoration-thickness: 1px; }
.pill--warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill--info { background: var(--info-bg); color: var(--info-ink); }
.pill--light { background: var(--light-tint); color: var(--action-hover); }
.pill--shadow { background: var(--violet-tint); color: #5B4A61; }
.pill--crit { background: var(--crit-bg); color: var(--crit-ink); }
.pill--shadow-dir { background: var(--shadow-tint); color: #5C4718; }   /* received, as in the chart */
.pill--void-soft { background: var(--void-bg); color: var(--void-ink); }

/* ---------- Grid pages: collapsible filters ---------- */
.grid-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.filter-panel {
    flex: 0 0 16.5rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel);
    transition: flex-basis 180ms ease;
    position: sticky; top: 1rem;
}
.filter-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.625rem 0.75rem 0.625rem 1rem; border-bottom: 1px solid var(--line);
}
.filter-panel__title { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.filter-panel__count {
    display: none; min-width: 1.375rem; padding: 0 0.375rem; border-radius: 999px;
    background: var(--action); color: #fff; font-size: var(--fs-xs); font-weight: 700; text-align: center;
}
.filter-panel__count.has-filters { display: inline-block; }
.filter-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border: 1px solid transparent; border-radius: var(--radius-control);
    background: transparent; color: var(--ink-soft); cursor: pointer;
}
.filter-toggle:hover { background: var(--surface-sunk); color: var(--ink); }
.filter-toggle .material-icons { font-size: 20px; transition: transform 180ms ease; }
.filter-panel__body { padding: 0.875rem 1rem 1rem; }
.filter-panel__body .form-group { margin-bottom: 0.75rem; }
.filter-panel__actions { display: flex; gap: 0.5rem; padding-top: 0.25rem; }
.filter-panel__actions .btn { flex: 1; }
.amount-filter { display: flex; gap: 0.375rem; }
.amount-filter select { flex: 0 0 4.25rem; }

/* Collapsed: a slim rail with the toggle and the active-filter count */
.filter-panel.is-collapsed { flex-basis: 3rem; }
.filter-panel.is-collapsed .filter-panel__body,
.filter-panel.is-collapsed .filter-panel__title { display: none; }
.filter-panel.is-collapsed .filter-panel__head {
    flex-direction: column; padding: 0.5rem 0; border-bottom: 0;
}
.filter-panel.is-collapsed .filter-toggle .material-icons { transform: rotate(180deg); }

.grid-content { flex: 1; min-width: 0; }
.grid-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); }
.grid-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--line);
}
.grid-toolbar__group { display: flex; gap: 0.375rem; }
.grid-toolbar__sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 0.25rem; }
.grid-toolbar__selected { margin-left: auto; color: var(--ink-muted); font-size: var(--fs-sm); }
.grid-body { padding: 0.25rem 0.875rem 0.75rem; }

/* ---------- DataTables (replaces the Foundation theme) ---------- */
.dataTables_wrapper { font-size: var(--fs-md); }
.dataTables_wrapper .top, .dataTables_wrapper .bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0;
}
.dataTables_wrapper .dataTables_info { color: var(--ink-muted); font-size: var(--fs-sm); padding: 0; }
.dataTables_wrapper .dataTables_filter { order: -1; }
.dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface);
    padding: 0.3125rem 0.625rem; font: inherit; color: var(--ink);
}
.dataTables_wrapper .dataTables_filter input { width: 16rem; }
.dataTables_wrapper .dataTables_length label { display: flex; align-items: center; gap: 0.375rem; margin: 0; color: var(--ink-muted); }
.dataTables_wrapper .dataTables_paginate { display: flex; gap: 0.25rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.25rem 0.625rem; border-radius: var(--radius-control); cursor: pointer;
    color: var(--ink-soft); border: 1px solid transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--surface-sunk); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--ink); color: var(--surface); }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.4; cursor: default; }
.dataTables_wrapper .dataTables_processing {
    position: absolute; top: 3.5rem; left: 50%; transform: translateX(-50%);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control);
    padding: 0.375rem 0.875rem; color: var(--ink-soft); z-index: 3;
}
.dataTables_wrapper { position: relative; }
table.dataTable { width: 100% !important; border-collapse: collapse; margin: 0 !important; }
table.dataTable thead th {
    position: relative; padding: 0.5rem 1.25rem 0.5rem 0.5rem; text-align: left; vertical-align: bottom;
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft);
    border-bottom: 1px solid var(--line-strong); background: var(--surface); white-space: nowrap;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { cursor: pointer; }
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    position: absolute; right: 0.375rem; bottom: 0.5rem; font-size: 0.7rem; color: var(--cloud-cover);
    content: "↕"; opacity: 0.6;
}
table.dataTable thead .sorting_asc::after { content: "↑"; color: var(--action); }
table.dataTable thead .sorting_desc::after { content: "↓"; color: var(--action); }
table.dataTable tbody td {
    padding: 0.5rem 0.4375rem; border-bottom: 1px solid var(--line); vertical-align: middle;
}
table.dataTable tbody tr:hover td { background: #F4F3EF; }
table.dataTable tbody tr.is-selected td { background: var(--action-tint); }
.dataTables_scrollBody { border-bottom: 0 !important; }
.dataTables_scrollHead table.dataTable { margin-bottom: 0 !important; }

/* Grid cells */
.cell-party { display: flex; flex-direction: column; min-width: 0; max-width: 17rem; }
.cell-party__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cell-party__rfc { font-family: var(--font-id); font-size: var(--fs-sm); color: var(--ink-muted); }
.cell-folio { font-family: var(--font-id); white-space: nowrap; }
.cell-amount { text-align: right; white-space: nowrap; font-weight: 500; }
.cell-amount__currency { color: var(--ink-muted); font-size: var(--fs-xs); margin-left: 0.25rem; font-weight: 400; }
.cell-date { white-space: nowrap; }
.cell-actions { display: flex; gap: 0.125rem; justify-content: flex-end; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
    min-width: 2rem; height: 2rem; padding: 0 0.375rem;
    border-radius: var(--radius-control); border: 1px solid transparent; background: transparent;
    color: var(--ink-soft); text-decoration: none; cursor: pointer; font-size: var(--fs-xs); font-weight: 600;
}
.icon-btn:hover { background: var(--surface-sunk); color: var(--ink); text-decoration: none; }
.icon-btn .material-icons { font-size: 18px; }

/* UUID: short form in the grid, copy on click */
.uuid-short {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-family: var(--font-id); font-size: var(--fs-sm); color: var(--ink);
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-control);
    padding: 0.125rem 0.375rem; cursor: pointer; white-space: nowrap;
}
.uuid-short:hover { border-color: var(--line-strong); background: var(--surface); }
.uuid-short .material-icons { font-size: 14px; color: var(--ink-muted); }
.uuid-short.is-copied { background: var(--ok-bg); color: var(--ok-ink); }

/* Selection checkbox */
.row-check { width: 1rem; height: 1rem; accent-color: var(--action); cursor: pointer; }

/* Messages (MessageBox) */
#message .alert, #modalMessage .alert { border-radius: var(--radius-control); border: 1px solid var(--line); }
.alert-info { background: var(--info-bg); color: var(--info-ink); }
.alert-success { background: var(--ok-bg); color: var(--ok-ink); }
.alert-warning { background: var(--warn-bg); color: var(--warn-ink); }
.alert-danger { background: var(--void-bg); color: var(--void-ink); }

/* Modal */
.modal-content { border-radius: var(--radius-panel); border: 1px solid var(--line); background: var(--surface); }
.modal-header, .modal-footer { border-color: var(--line); }
.modal-header h4 { font-size: var(--fs-lg); margin: 0; }

/* ---------- Dashboard ---------- */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.dash-head h1 { font-size: var(--fs-2xl); margin: 0; }
.dash-head p { margin: 0.125rem 0 0; color: var(--ink-muted); }
.period-picker { display: flex; gap: 0.25rem; background: var(--surface-sunk); padding: 0.1875rem; border-radius: var(--radius-control); }
.period-picker a {
    padding: 0.25rem 0.75rem; border-radius: 4px; color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: var(--fs-sm);
}
.period-picker a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--line-strong); }

.kpi-band {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel);
    margin-bottom: 1.25rem;
}
.kpi { padding: 1rem 1.25rem; border-right: 1px solid var(--line); }
.kpi:last-child { border-right: 0; }
.kpi__label { color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 500; display: flex; align-items: center; gap: 0.375rem; }
.kpi__swatch { width: 0.625rem; height: 0.625rem; border-radius: 2px; display: inline-block; }
.kpi__value { font-size: var(--fs-3xl); font-weight: 600; line-height: 1.15; margin-top: 0.25rem; letter-spacing: -0.02em; }
.kpi__sub { color: var(--ink-muted); font-size: var(--fs-sm); margin-top: 0.125rem; }
.kpi__sub strong { color: var(--ink); font-weight: 600; }
.kpi a { color: inherit; text-decoration: none; }
.kpi a:hover .kpi__value { color: var(--action); }

.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.25rem 0.5rem; }
.panel__title { font-size: var(--fs-lg); margin: 0; }
.panel__note { color: var(--ink-muted); font-size: var(--fs-sm); }
.panel__body { padding: 0.5rem 1.25rem 1.25rem; }
.legend { display: flex; gap: 1rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 0.375rem; }

/* Light & Shadow mirrored chart */
.ls-chart { width: 100%; height: auto; display: block; overflow: visible; }
.ls-chart .bar-light { fill: var(--light); }
.ls-chart .bar-shadow { fill: var(--shadow); }
.ls-chart .bar-light:hover, .ls-chart .bar-shadow:hover { opacity: 0.8; }
.ls-chart .axis { stroke: var(--ink-soft); stroke-width: 1; }
.ls-chart .grid-line { stroke: var(--line); stroke-width: 1; }
.ls-chart text { font-family: var(--font-ui); font-size: 11px; fill: var(--ink-muted); }
.ls-chart .month-label { fill: var(--ink-soft); }
.chart-tooltip {
    position: fixed; pointer-events: none; z-index: 10;
    background: var(--ink); color: var(--surface); border-radius: var(--radius-control);
    padding: 0.375rem 0.625rem; font-size: var(--fs-sm); line-height: 1.4; display: none;
}

.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--line); }
.attention-list li:last-child { border-bottom: 0; }
.attention-list .count { font-weight: 600; font-size: var(--fs-lg); }

/* ---------- Detail (CFDI) ---------- */
.doc-page { background: var(--bg); min-height: 100vh; }
.doc-bar {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 1rem;
    padding: 0.5rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--line);
}
.doc-bar__title { font-weight: 600; margin: 0; font-size: var(--fs-md); }
.doc-bar__spacer { flex: 1; }
.doc { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; }

.doc-header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: start;
    padding-bottom: 1.25rem; border-bottom: 1px solid var(--line-strong); margin-bottom: 1.25rem;
}
.doc-header__kind { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.doc-header__title { font-size: var(--fs-2xl); margin: 0; }
.doc-header__meta { color: var(--ink-muted); margin: 0.25rem 0 0; }
.doc-header__total { text-align: right; }
.doc-header__total-label { color: var(--ink-soft); font-size: var(--fs-sm); }
.doc-header__total-value { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.doc-header__total-currency { font-size: var(--fs-lg); color: var(--ink-muted); font-weight: 500; margin-left: 0.25rem; }

/* The UUID is the document's signature: grouped, large, copyable */
.uuid-sig { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.uuid-sig__label { color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 500; }
.uuid-sig__value { font-family: var(--font-id); font-size: var(--fs-xl); color: var(--ink); letter-spacing: 0.03em; }
/* Groups stay readable without breaking the UUID: hyphens are drawn lighter, with a hair of space */
.uuid-sig__value span + span::before { content: "-"; color: var(--cloud-cover); margin: 0 0.06em; }

.parties { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 1rem; margin-bottom: 1.25rem; }
.party { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 1rem 1.25rem; }
.party__role { color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; margin-bottom: 0.25rem; }
.party__rfc { font-family: var(--font-id); font-size: var(--fs-lg); }
.party__name { font-size: var(--fs-lg); font-weight: 600; margin: 0.125rem 0 0.5rem; }
.parties__arrow { align-self: center; color: var(--cloud-cover); }
@media (max-width: 760px) { .parties { grid-template-columns: 1fr; gap: 0.75rem; } .parties__arrow { display: none; } }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; }
.kv dt { color: var(--ink-muted); font-weight: 400; font-size: var(--fs-sm); }
.kv dd { margin: 0; }

.doc-columns { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
@media (max-width: 960px) { .doc-columns { grid-template-columns: 1fr; } }

.doc-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line-strong); margin-bottom: 1rem; overflow-x: auto; }
.doc-tabs button {
    border: 0; background: transparent; padding: 0.5rem 0.875rem; color: var(--ink-soft); font: inherit; font-weight: 500;
    border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap;
}
.doc-tabs button:hover { color: var(--ink); }
.doc-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--action); }
.doc-tabs .tab-count { color: var(--ink-muted); font-weight: 400; margin-left: 0.25rem; }
.doc-panel[hidden] { display: none; }

.doc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.doc-table th { text-align: left; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); padding: 0.5rem; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.doc-table td { padding: 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-table .num { text-align: right; white-space: nowrap; }
.doc-table .sub td { padding-top: 0; color: var(--ink-muted); font-size: var(--fs-sm); border-bottom-color: var(--line); }
.doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table tfoot td { padding: 0.5rem; border-top: 1px solid var(--line-strong); font-weight: 600; }
.doc-table tfoot .muted { font-weight: 400; font-size: var(--fs-sm); }

/* Nómina tab: period/employee, net-pay breakdown, one table per section */
.nomina__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.75rem 2rem; margin-bottom: 1.25rem; align-items: start; }
.nomina__head .kv { align-content: start; }
.nomina__net, .iva-strip { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0 0 1.5rem; padding: 0.875rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); }
.nomina__net dt, .iva-strip dt { color: var(--ink-muted); font-weight: 400; font-size: var(--fs-sm); }
.nomina__net dd, .iva-strip dd { margin: 0; font-variant-numeric: tabular-nums; }
.nomina__net-total, .iva-strip__total { margin-left: auto; text-align: right; }
.nomina__net-total dd, .iva-strip__total dd { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); }
.nomina__title { font-size: var(--fs-md); font-weight: 600; color: var(--ink); margin: 1.5rem 0 0.25rem; }
.nomina__title:first-of-type { margin-top: 0; }

.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.side-card h2 { font-size: var(--fs-md); margin: 0 0 0.625rem; color: var(--ink-soft); }
.totals { display: grid; grid-template-columns: 1fr auto; row-gap: 0.375rem; margin: 0; }
.totals dd { padding-left: 1rem; }
.totals dt { color: var(--ink-muted); font-weight: 400; }
.totals dd { margin: 0; text-align: right; }
.totals .grand { border-top: 1px solid var(--line-strong); padding-top: 0.5rem; margin-top: 0.25rem; font-weight: 600; font-size: var(--fs-lg); color: var(--ink); }

/* Legacy complement components (Nómina, Pagos, Comercio exterior) rendered inside the detail */
.doc-legacy .card { border: 0; background: transparent; }
.doc-legacy .card-body { padding: 0; }
.doc-legacy .card-header { background: transparent; border: 0; font-weight: 600; color: var(--ink-soft); }
.doc-legacy table { width: 100%; font-size: var(--fs-md); }
.doc-legacy .table td, .doc-legacy .table th { border-color: var(--line); padding: 0.375rem 0.5rem; }
.doc-legacy .table-bordered { border-color: var(--line); }
.doc-legacy thead th { color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; }

@media print {
    .doc-bar, .app-nav, .filter-panel, .grid-toolbar { display: none !important; }
    body { background: #fff; }
}

/* Right-aligned numeric columns (header and cells) */
table.dataTable th.dt-right, table.dataTable td.dt-right { text-align: right; }
table.dataTable th.dt-right { padding-right: 1.25rem; }

/* Folio cell: type mark + serie-folio, optional relation line */
.cell-folio-wrap { display: flex; flex-direction: column; }
.cell-folio__rel { font-size: var(--fs-xs); color: var(--ink-muted); }
.type-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.25rem; height: 1.25rem; margin-right: 0.375rem; border-radius: 4px;
    font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; text-decoration: none; cursor: help;
    background: var(--surface-sunk); color: var(--ink-soft);
}
.type-mark--I { background: var(--light-tint); color: var(--action-hover); }   /* ingreso: light */
.type-mark--E { background: var(--violet-tint); color: #5B4A61; }              /* egreso: shadow */
.type-mark--P { background: var(--ok-bg); color: var(--ok-ink); }
.type-mark--N { background: var(--warn-bg); color: var(--warn-ink); }

/* The filter panel scrolls on its own when taller than the viewport */
.filter-panel { max-height: calc(100vh - 2rem); display: flex; flex-direction: column; }
.filter-panel__body { overflow-y: auto; }

/* Bootstrap underlines abbr[title]; the type mark is a badge */
abbr.type-mark[title] { text-decoration: none; border-bottom: 0; }

/* EFOS list (legacy component) in the palette: confirmed simulated operations are the serious state */
.doc-legacy .table-danger, .doc-legacy .table-danger > td, .doc-legacy .table-danger > th { background: #F3E3E6; color: #6E3341; }
.doc-legacy .table-info, .doc-legacy .table-info > td, .doc-legacy .table-info > th { background: var(--light-tint); color: var(--action-hover); }
.doc-legacy .table-warning, .doc-legacy .table-warning > td, .doc-legacy .table-warning > th { background: var(--warn-bg); color: var(--warn-ink); }
.doc-legacy .table-success, .doc-legacy .table-success > td, .doc-legacy .table-success > th { background: var(--ok-bg); color: var(--ok-ink); }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
    .app-nav { flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.5rem 1rem; }
    .app-nav__links { order: 3; flex-basis: 100%; overflow-x: auto; }
    .app-nav__links a { white-space: nowrap; }
    .app-main { padding: 1rem; }
    .grid-layout { flex-direction: column; }
    .filter-panel { position: static; flex-basis: auto; width: 100%; max-height: none; }
    .filter-panel.is-collapsed { flex-basis: auto; }
    .filter-panel.is-collapsed .filter-panel__head { flex-direction: row; padding: 0.5rem 0.75rem; }
    .filter-panel.is-collapsed .filter-panel__title { display: block; }
    .grid-content { width: 100%; }
    .kpi { border-right: 0; border-bottom: 1px solid var(--line); }
    .kpi:last-child { border-bottom: 0; }
    .doc { padding: 1rem; }
    .doc-header { grid-template-columns: 1fr; }
    .doc-header__total { text-align: left; }
    .uuid-sig__value { font-size: var(--fs-md); }
}

/* ---------- Login ---------- */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login { width: 100%; max-width: 24rem; }
.login__panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 2rem 2rem 1.75rem; }
.login__brand { font-weight: 700; letter-spacing: 0.02em; color: var(--blue-fusion); margin: 0 0 1.5rem; }
.login__title { font-size: var(--fs-2xl); margin: 0 0 0.375rem; }
.login__lead { color: var(--ink-muted); margin: 0 0 1.5rem; max-width: 34ch; }
.login__alt { margin: 1rem 0 0; text-align: center; font-size: var(--fs-sm); }
.login #message { margin-bottom: 1rem; }

/* Wide tables scroll inside their panel instead of widening the page */
.doc-panel { overflow-x: auto; }
.doc-columns > section { min-width: 0; }

/* Clientes y proveedores: share bar behind the percentage, monthly trend bars, side lists */
.kpi__unit { font-size: var(--fs-md); font-weight: 500; color: var(--ink-muted); letter-spacing: 0; }
.share { display: inline-block; min-width: 4.5rem; padding: 0.125rem 0.375rem; border-radius: 3px; font-variant-numeric: tabular-nums;
    background: linear-gradient(to right, color-mix(in srgb, var(--share-color) 28%, transparent) var(--share), transparent var(--share)); }
.spark { display: block; overflow: visible; }
.spark rect:hover { opacity: 0.7; }
.spark__base { stroke: var(--line-strong); stroke-width: 0.5; }
.cp-grid { margin-top: 1.25rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .cp-grid { grid-template-columns: minmax(0, 1fr); } }
.cp-list { list-style: none; margin: 0; padding: 0; }
.cp-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.cp-list li:last-child { border-bottom: 0; }
.cp-list__meta { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-list__meta .muted { display: block; font-size: var(--fs-sm); }

/* Nómina: Recibos / Acumulados switch above the grid; secondary line inside a cell */
.view-switch { display: inline-flex; margin-bottom: 1rem; }
.cell-sub { display: block; font-size: var(--fs-sm); }

/* DIOT month picker */
.month-form { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0; }
.month-form select { width: auto; min-width: 11rem; }

/* Revisión de CFDI: one collapsible block per rule and direction */
.regla-list { display: grid; gap: 0.5rem; }
.regla { border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }
.regla > summary { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: baseline; padding: 0.75rem 1rem; cursor: pointer; list-style: none; }
.regla > summary::-webkit-details-marker { display: none; }
.regla > summary:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.regla > summary .pill { justify-self: start; }
.regla__title { font-weight: 600; color: var(--ink); }
.regla__title::after { content: "▸"; margin-left: 0.5rem; color: var(--ink-muted); display: inline-block; transition: transform 0.15s; }
.regla[open] .regla__title::after { transform: rotate(90deg); }
.regla__meta { display: flex; gap: 1.25rem; color: var(--ink-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.regla__body { padding: 0 1rem 1rem; }
.regla__body > p { margin: 0 0 0.75rem; max-width: 75ch; }
@media (max-width: 640px) {
    .regla > summary { grid-template-columns: 1fr; gap: 0.25rem; }
    .regla__meta { white-space: normal; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .regla__title::after { transition: none; } }
/* ---------- Control fiscal: alerts, sections, tables ---------- */
.aviso-list { list-style: none; margin: 0; padding: 0; }
.aviso { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: baseline;
    padding: 0.625rem 0; border-bottom: 1px solid var(--line); }
.aviso:last-child { border-bottom: 0; }
.aviso .pill { justify-self: start; }
.aviso__text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.aviso__text strong { font-weight: 600; color: var(--ink); }
.aviso__text span { color: var(--ink-muted); font-size: var(--fs-sm); }
.aviso__link { font-weight: 500; white-space: nowrap; }
.aviso--crit .aviso__text strong { color: var(--crit-ink); }
@media (max-width: 640px) {
    .aviso { grid-template-columns: 1fr; gap: 0.25rem; }
}

.control-avisos { margin-bottom: 1.25rem; }
.dash-avisos { margin-bottom: 1.25rem; }
.dash-avisos .panel__body { padding-top: 0; }

.section-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line-strong); margin: 0 0 1rem; overflow-x: auto; }
.section-tabs a { padding: 0.5rem 0.875rem; color: var(--ink-soft); font-weight: 500; text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px; }
.section-tabs a:hover { color: var(--ink); }
.section-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--action); }

.panel__tools { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.panel__lead { color: var(--ink-muted); font-size: var(--fs-sm); margin: 0 0 0.875rem; max-width: 80ch; }
.panel__foot { color: var(--ink-muted); font-size: var(--fs-sm); margin: 0.875rem 0 0; max-width: 80ch; }
.empty-state { color: var(--ink-soft); background: var(--surface-sunk); border-radius: var(--radius-control); padding: 0.875rem 1rem; margin: 0; }
.control-subtitle { font-size: var(--fs-md); font-weight: 600; margin: 1.5rem 0 0.5rem; }
.control-subtitle:first-of-type { margin-top: 0.5rem; }

.table-scroll { overflow-x: auto; position: relative; }   /* keeps absolutely positioned .visually-hidden headers inside */
.control-table td { vertical-align: middle; }
.control-table .cell-party { max-width: 20rem; }
.control-table--months th.group { text-align: center; border-bottom: 1px solid var(--line); }
.control-table--months td:nth-child(4), .control-table--months th:nth-child(3) { border-right: 1px solid var(--line); }
.aging tfoot td { font-weight: 600; }
.aging:not(.show-all) tr.is-extra { display: none; }
.aging-more { margin-top: 0.5rem; }
.text-crit { color: var(--crit-ink); }
.text-warn { color: var(--warn-ink); font-weight: 600; }

.uuid-copy { font-size: var(--fs-sm); color: var(--ink); background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-control); padding: 0.125rem 0.375rem; cursor: pointer; white-space: nowrap; }
.uuid-copy:hover { border-color: var(--line-strong); background: var(--surface); }
.uuid-copy.is-copied { background: var(--ok-bg); color: var(--ok-ink); }

/* 69-B mark next to the RFC in the grids, and the banner in the detail */
.flag-69b { display: inline-block; margin-left: 0.375rem; padding: 0 0.375rem; border-radius: 999px; font-family: var(--font-ui);
    font-size: var(--fs-xs); font-weight: 600; background: var(--crit-bg); color: var(--crit-ink); white-space: nowrap; }
.doc-alert { display: grid; gap: 0.25rem; border: 1px solid var(--crit-line); background: var(--crit-bg); color: var(--crit-ink);
    border-radius: var(--radius-panel); padding: 0.75rem 1rem; margin: 0 0 1.25rem; }
.doc-alert strong { font-weight: 600; }
.doc-alert--info { border-color: var(--line-strong); background: var(--surface-sunk); color: var(--ink-soft); }
.doc-alert--warn { border-color: var(--warn-line, var(--line-strong)); background: var(--warn-bg); color: var(--warn-ink); }
.matriz-detalle summary { cursor: pointer; font-weight: 500; }
.matriz-detalle ul { margin: 0.5rem 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
.matriz-detalle .cell-sub { display: block; }

/* Materialidad: report filters and the evidence file of one CFDI */
.mat-filtros { flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 0 0 1rem; }
.mat-concepto { max-width: 22rem; }
.mat-concepto > span:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.back-link { margin: 0 0 0.5rem; font-size: var(--fs-sm); }
.back-link a::before { content: "\2190\00a0"; }
.exp-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .exp-grid { grid-template-columns: 1fr; } }
.exp-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.5rem; margin: 0 0 1rem; }
.exp-datos dt { color: var(--ink-muted); font-size: var(--fs-sm); font-weight: 500; }
.exp-datos dd { margin: 0; overflow-wrap: anywhere; }
.exp-datos__wide { grid-column: 1 / -1; }
.exp-subtitle { font-size: var(--fs-md); font-weight: 600; margin: 1rem 0 0.5rem; }
.exp-motivos { margin: 0; padding-left: 1.125rem; }
.exp-motivos li + li { margin-top: 0.375rem; }
.exp-motivos li.is-crit strong { color: var(--crit-ink); }
.exp-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.exp-check li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.5rem; align-items: start; }
.exp-check__mark {
    width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; border: 1.5px solid var(--line-strong); border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700;
}
.exp-check li.is-done .exp-check__mark { background: var(--ok-bg); border-color: var(--ok-ink); color: var(--ok-ink); }
.exp-ubicacion { max-width: 22rem; overflow-wrap: anywhere; }
.control-table tr.is-muted td { color: var(--ink-muted); }
.exp-form legend { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft); margin-bottom: 0.25rem; }
.exp-radio { display: flex; gap: 0.5rem; align-items: baseline; font-size: var(--fs-md); font-weight: 400; color: var(--ink); margin: 0 0 0.25rem; }
.exp-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }
.field-error { display: block; color: var(--crit-ink); font-size: var(--fs-sm); }
.field-error:empty { display: none; }

/* Folio lists (Comprobante/Default): a button next to Serie y folio / Folio fiscal opens #modalFolios; a loaded list
   replaces the field's inputs with a .folio-chip */
.folio-single { display: flex; gap: 0.375rem; align-items: center; }
.folio-single[hidden] { display: none; }
.folio-single > .form-control { min-width: 0; flex: 1; }
.folio-btn { flex: none; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line-strong); color: var(--action); background: var(--surface); }
.folio-btn:hover { border-color: var(--action); background: var(--action-tint); }
.folio-btn .material-icons { font-size: 1.125rem; }
.folio-chip { border: 1px solid var(--action); border-radius: var(--radius-control); background: var(--action-tint); padding: 0.375rem 0.5rem 0.5rem; }
.folio-chip__head { display: flex; align-items: center; gap: 0.375rem; }
.folio-chip__head > .material-icons { font-size: 1.125rem; color: var(--action); }
.folio-chip__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.folio-chip__note { margin: 0.25rem 0 0; font-size: var(--fs-xs); color: var(--ink-soft); }
.folio-chip__note:empty, .folio-chip__note[hidden] { display: none; }
.folio-chip .js-folio-no-encontrados { margin-top: 0.375rem; }
.folio-drop {
    display: grid; justify-items: center; gap: 0.25rem; text-align: center; padding: 1.25rem 1rem; margin: 0.5rem 0 0;
    border: 1.5px dashed var(--line-strong); border-radius: var(--radius-panel); background: var(--surface); cursor: pointer;
    color: var(--ink); font-size: var(--fs-md); font-weight: 400;
}
.folio-drop > .material-icons { font-size: 1.75rem; color: var(--action); }
.folio-drop:hover, .folio-drop.is-over, .folio-drop:focus-visible { border-color: var(--action); background: var(--action-tint); outline: none; }
.folio-drop.has-file { border-style: solid; border-color: var(--ok-ink); background: var(--ok-bg); }
.folio-drop__file { display: block; font-family: var(--font-id); font-size: var(--fs-sm); color: var(--ok-ink); overflow-wrap: anywhere; }
.folio-drop__file:empty { display: none; }
.folio-modal__help { margin-bottom: 0; }
.folio-modal__or { display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 0 0.25rem; color: var(--ink-muted); font-size: var(--fs-sm); }
.folio-modal__or::before, .folio-modal__or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.folio-modal__note { margin: 0.5rem 0 0; display: block; }
.folio-lista__error { margin: 0.5rem 0 0; font-size: var(--fs-sm); color: var(--crit-ink); }
.filter-panel { min-width: 0; }   /* a long list file name must not widen the panel */
.folio-chip, .folio-chip__head { min-width: 0; }

/* Precierre: payroll and fee concepts by month */
.pc-conceptos th, .pc-conceptos td { white-space: nowrap; }

/* Administración: users, accounts, roles */
.validation-summary-valid { display: none; }
.admin-form { display: grid; gap: 0.25rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); max-width: 56rem; }
.admin-form .form-actions { grid-column: 1 / -1; display: flex; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }
.admin-check { display: flex; gap: 0.5rem; align-items: center; font-weight: 500; margin: 0.25rem 0 0.75rem; }
.admin-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.admin-inline .custom-select, .admin-inline .form-control { width: auto; min-width: 12rem; }
.admin-opciones { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.admin-opciones fieldset { border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 0.5rem 0.875rem 0.75rem; }
.admin-opciones legend { font-size: var(--fs-sm); font-weight: 600; width: auto; padding: 0 0.25rem; margin: 0; }
.admin-opciones label { display: flex; gap: 0.5rem; align-items: center; margin: 0.25rem 0; font-weight: 400; }
.panel__subtitle { font-size: var(--fs-md); font-weight: 600; margin: 1rem 0 0.5rem; }
.app-nav__salir { margin: 0; }
.admin-opcion-suelta { grid-column: 1 / -1; display: flex; gap: 0.5rem; align-items: center; align-self: start; font-weight: 600; padding: 0.5rem 0.875rem; }