/* =============================================================
   UI — the shared components. Each one is drawn here, once,
   from tokens only (no colour literals in this file).
   Views produce them through app/helpers/Ui.php or these classes.
   Plan: docs/plans/2026-10-11-una-sola-voz/step-03-ui-layer.md
   Phone = max-width 767px (the bottom bar replaces the sidebar).
   ============================================================= */

/* ---------- Page ---------- */
.nx-page {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--sp-5);
    background: var(--bg-page);
}
.nx-page--narrow > * { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ---------- Page head: place · title · context · action ---------- */
.nx-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-default);
}
.nx-head__text { flex: 1 1 260px; min-width: 0; }
.nx-head__place {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--action);
}
.nx-head__title {
    margin: 2px 0 0;
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
}
.nx-head__context { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.nx-head__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- Tabs: the other screens of this place (phone only) ---------- */
.nx-tabs { display: none; }

/* ---------- Card ---------- */
.nx-card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
}
.nx-card__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.nx-card__title > i { color: var(--action); }
.nx-card--flush { padding: 0; overflow: hidden; }
.nx-card--flush > .nx-card__title { padding: var(--sp-4) var(--sp-5) 0; }
.nx-card--dashed { border-style: dashed; box-shadow: none; }
.nx-card--center { text-align: center; }

/* ---------- Grids ---------- */
.nx-grid { display: grid; gap: var(--sp-4); }
.nx-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.nx-grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.nx-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* ---------- KPI ---------- */
.nx-kpi {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
}
.nx-kpi__label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); }
.nx-kpi__value {
    margin-top: var(--sp-1);
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.nx-kpi__value small { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.nx-kpi__value.is-absent { font-size: var(--fs-md); font-weight: 600; color: var(--text-muted); }
.nx-kpi__value.is-text { font-size: var(--fs-md); }
.nx-kpi--brand .nx-kpi__value { color: var(--action); }
.nx-kpi--ok .nx-kpi__value { color: var(--ok-fg); }
.nx-kpi--info .nx-kpi__value { color: var(--info-fg); }
.nx-kpi--wait .nx-kpi__value { color: var(--wait-fg); }
.nx-kpi--fail .nx-kpi__value { color: var(--fail-fg); }

/* ---------- Table ---------- */
.nx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nx-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); color: var(--text-primary); }
.nx-table th {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
}
.nx-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.nx-table tbody tr:last-child td { border-bottom: 0; }
.nx-table tbody tr:hover { background: var(--bg-subtle); }
.nx-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-table .is-strong { font-weight: 700; }
.nx-table .is-nowrap { white-space: nowrap; }
.nx-table .is-mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); }

/* ---------- Buttons by role ---------- */
.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--control-h);
    padding: 0 var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--mov), border-color var(--mov), color var(--mov), transform var(--mov);
}
.nx-btn:active { transform: scale(.98); }
.nx-btn:disabled, .nx-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.nx-btn--primary { background: var(--action); color: var(--action-text); }
.nx-btn--primary:hover { background: var(--action-hover); color: var(--action-text); }
.nx-btn--secondary { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-strong); }
.nx-btn--secondary:hover { background: var(--bg-subtle); color: var(--text-primary); border-color: var(--text-muted); }
.nx-btn--quiet { background: transparent; color: var(--action); }
.nx-btn--quiet:hover { background: var(--brand-primary-light); color: var(--action-hover); }
.nx-btn--danger { background: var(--bg-card); color: var(--fail-fg); border-color: var(--fail-border); }
.nx-btn--danger:hover { background: var(--fail-bg); color: var(--fail-fg); }
.nx-btn--danger-solid { background: var(--danger-solid); color: var(--text-inverse); }
.nx-btn--danger-solid:hover { background: var(--danger-solid-hover); color: var(--text-inverse); }
.nx-btn--sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-xs); }
.nx-btn--block { width: 100%; }
.nx-btn--icon { width: 44px; padding: 0; }

/* ---------- Chip: one tone per meaning ---------- */
.nx-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 3px 10px;
    border: 1px solid var(--lock-border);
    border-radius: var(--radius-pill);
    background: var(--lock-bg);
    color: var(--lock-fg);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.nx-chip--ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); }
.nx-chip--wait { background: var(--wait-bg); color: var(--wait-fg); border-color: var(--wait-border); }
.nx-chip--fail { background: var(--fail-bg); color: var(--fail-fg); border-color: var(--fail-border); }
.nx-chip--info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-border); }
.nx-chip--lock { background: var(--lock-bg); color: var(--lock-fg); border-color: var(--lock-border); }

/* ---------- Note: an inline notice with a tone ---------- */
.nx-note {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--info-border);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: var(--info-bg);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    line-height: 1.45;
}
.nx-note > i { margin-top: 3px; color: var(--info-fg); }
.nx-note a { color: var(--action); font-weight: 600; }
.nx-note--ok { background: var(--ok-bg); border-color: var(--ok-border); }
.nx-note--ok > i { color: var(--ok-fg); }
.nx-note--wait { background: var(--wait-bg); border-color: var(--wait-border); }
.nx-note--wait > i { color: var(--wait-fg); }
.nx-note--fail { background: var(--fail-bg); border-color: var(--fail-border); }
.nx-note--fail > i { color: var(--fail-fg); }
.nx-note--flash { margin: var(--sp-3) var(--sp-5) 0; }

/* ---------- Empty state ---------- */
.nx-empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--text-secondary); }
.nx-empty__icon { margin-bottom: var(--sp-3); font-size: 32px; color: var(--border-strong); }
.nx-empty__title { margin: 0 0 var(--sp-1); font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--text-primary); }
.nx-empty__text { max-width: 44ch; margin: 0 auto var(--sp-4); font-size: var(--fs-sm); line-height: 1.5; }
.nx-empty__text:last-child { margin-bottom: 0; }
.nx-empty--compact { padding: var(--sp-4) var(--sp-3); }

/* ---------- Form ---------- */
.nx-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; margin: 0; }
.nx-label, .nx-form > label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); margin: 0; }
.nx-input,
.nx-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
.nx-field select,
.nx-field textarea,
.nx-form > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
.nx-form > select,
.nx-form > textarea,
.nx-form > div > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
.nx-form > div > select,
.nx-form > div > div > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
.nx-form > div > div > select {
    width: 100%;
    min-height: var(--control-h);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--control-fs);
}
.nx-field textarea, .nx-form > textarea { min-height: 76px; resize: vertical; }
.nx-input:focus, .nx-field input:focus, .nx-field select:focus, .nx-field textarea:focus,
.nx-form input:focus, .nx-form select:focus, .nx-form textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--action-ring);
}
.nx-input[readonly], .nx-field input[readonly] { background: var(--bg-subtle); color: var(--text-secondary); }
.nx-form { display: grid; gap: var(--sp-2); align-content: start; }
.nx-form > div > label, .nx-form > div > div > label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); }
.nx-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--sp-3); align-items: end; }
.nx-hint { font-size: var(--fs-xs); color: var(--text-muted); }
.nx-search { position: relative; display: flex; align-items: center; }
.nx-search > i { position: absolute; left: var(--sp-3); color: var(--text-muted); pointer-events: none; }
.nx-search > input {
    width: 260px;
    max-width: 100%;
    min-height: var(--control-h);
    padding: 0 var(--sp-3) 0 36px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: var(--control-fs);
}
.nx-search > input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--action-ring); }

/* ---------- List rows ---------- */
.nx-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.nx-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}
.nx-row__main { flex: 1 1 200px; min-width: 0; font-size: var(--fs-sm); color: var(--text-primary); }
.nx-row__main > strong { display: block; }
.nx-row__sub { color: var(--text-secondary); }
.nx-row__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.nx-row__actions form, .nx-table td form { display: inline-flex; margin: 0; }
.nx-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }

.nx-row--stacked { flex-direction: column; align-items: stretch; }
.nx-row--stacked > * { flex: 0 0 auto; }

/* ---------- Details: label → value pairs ---------- */
.nx-details { margin: 0; }
.nx-details > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-light); }
.nx-details > div:last-child { border-bottom: 0; }
.nx-details dt { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); }
.nx-details dd { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); text-align: right; overflow-wrap: anywhere; }

/* ---------- Receipt: folio · when · who ---------- */
.nx-receipt { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--sp-2); font-size: var(--fs-xs); color: var(--text-secondary); }
.nx-receipt__folio { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); }
.nx-receipt > * + *::before { content: "·"; margin-right: var(--sp-2); color: var(--text-muted); }

/* ---------- Steps (a journey along stations) ---------- */
.nx-steps { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.nx-steps > li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.nx-steps > li + li::before { content: "›"; color: var(--border-strong); }
.nx-step { padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; background: var(--lock-bg); color: var(--text-muted); }
.nx-step.is-done { background: var(--ok-bg); color: var(--ok-fg); }
.nx-step.is-current { background: var(--action); color: var(--action-text); }

/* ---------- Bars and meter (the height / width is data) ---------- */
.nx-bars { display: flex; align-items: flex-end; gap: var(--sp-3); height: 220px; padding: var(--sp-4) var(--sp-2) var(--sp-2); border-bottom: 2px solid var(--border-default); border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--bg-subtle); overflow-x: auto; }
.nx-bar { display: flex; flex: 1 0 44px; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--sp-1); height: 100%; color: var(--lock-fg); }
.nx-bar__value { font-size: 11px; font-weight: 700; white-space: nowrap; }
.nx-bar__fill { width: 100%; max-width: 36px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: currentColor; }
.nx-bar__fill--absent { height: 4px; border-radius: 2px; background: var(--border-strong); }
.nx-bar__label { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.nx-bar--fail { color: var(--fail-fg); }
.nx-bar--wait { color: var(--wait-fg); }
.nx-bar--info { color: var(--info-fg); }
.nx-meter { height: 14px; border-radius: var(--radius-pill); background: var(--border-default); overflow: hidden; }
.nx-meter__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--action); }

/* ---------- Avatar (the colour is data; the shape is ours) ---------- */
.nx-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--text-inverse);
    font-weight: 700;
}
.nx-avatar--lg { font-size: 32px; border-radius: 0; }
.nx-avatar--md { font-size: 16px; }
.nx-avatar--sm { font-size: 11px; }

/* ---------- Sheet: the one way to interrupt ---------- */
.nx-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-sheet);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: var(--bg-scrim);
}
.nx-sheet.active { display: flex; }
.nx-sheet__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    max-height: min(88vh, 760px);
    overflow: hidden;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: nx-pop var(--mov) var(--ease);
}
.nx-sheet__panel--wide { max-width: 960px; max-height: 92vh; }
.nx-sheet__panel > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
.nx-sheet__handle { display: none; }
.nx-sheet__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border-light);
}
.nx-sheet__head h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
}
.nx-sheet__close {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.nx-sheet__close:hover { background: var(--bg-subtle); color: var(--text-primary); }
.nx-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-4) var(--sp-5); }
.nx-sheet__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5) var(--sp-4);
    border-top: 1px solid var(--border-light);
    background: var(--bg-card);
}
.nx-sheet__foot--between { justify-content: space-between; }
.nx-sheet__foot--between > .nx-btn--primary { margin-left: auto; }
.nx-sheet__question { margin: 0; font-size: var(--fs-md); line-height: 1.45; color: var(--text-primary); }
.nx-sheet--menu { align-items: flex-end; padding: 0; }
.nx-sheet--menu .nx-sheet__panel {
    max-width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + var(--sab));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation-name: nx-rise;
}
.nx-sheet--menu .nx-sheet__handle { display: block; flex: 0 0 4px; width: 36px; height: 4px; margin: 0 auto var(--sp-3); border-radius: 2px; background: var(--border-strong); }
.nx-menu__title { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.nx-menu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.nx-menu__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 76px;
    padding: var(--sp-3) var(--sp-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.nx-menu__item > i { font-size: 20px; color: var(--action); }
.nx-menu__item.active { border-color: var(--action); background: var(--brand-primary-light); }
html.nx-sheet-open, html.nx-sheet-open body, html.nx-sheet-open .main-view { overflow: hidden; }
@keyframes nx-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes nx-rise { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- Utilities (they replace inline styles; keep the list short) ---------- */
.nx-stack > * + * { margin-top: var(--sp-4); }
.nx-stack--sm > * + * { margin-top: var(--sp-2); }
.nx-inline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.nx-between { justify-content: space-between; }
.nx-grow { flex: 1 1 auto; min-width: 0; }
.nx-muted { color: var(--text-muted); }
.nx-soft { color: var(--text-secondary); }
.nx-strong { font-weight: 700; }
.nx-text { font-size: var(--fs-sm); }
.nx-small { font-size: var(--fs-xs); }
.nx-right { text-align: right; }
.nx-break { word-break: break-all; }
.nx-upper { text-transform: uppercase; }
.nx-m-0 { margin: 0; }
.nx-mt-1 { margin-top: var(--sp-1); }
.nx-mt-2 { margin-top: var(--sp-2); }
.nx-mt-3 { margin-top: var(--sp-3); }
.nx-mt-4 { margin-top: var(--sp-4); }
.nx-mb-0 { margin-bottom: 0; }
.nx-mb-3 { margin-bottom: var(--sp-3); }
.nx-ok-text { color: var(--ok-fg); }
.nx-fail-text { color: var(--fail-fg); }
.nx-info-text { color: var(--info-fg); }
.nx-brand-text { color: var(--action); }
.nx-link { color: var(--action); font-weight: 600; }
.nx-only-phone { display: none; }
[hidden] { display: none !important; }

/* ---------- Focus: visible everywhere, keyboard only ---------- */
.nx-btn:focus-visible, .nx-tab:focus-visible, .nx-sheet__close:focus-visible, .nx-menu__item:focus-visible, .nx-link:focus-visible {
    outline: 3px solid var(--action-ring);
    outline-offset: 2px;
}

/* ---------- Phone and touch ---------- */
@media (max-width: 767px), (pointer: coarse) {
    .nx-btn, .nx-btn--sm { min-height: var(--tap); }
    .nx-btn--icon { width: var(--tap); }
    .nx-input, .nx-field input, .nx-field select, .nx-field textarea,
    .nx-form input, .nx-form select, .nx-form textarea, .nx-search > input { min-height: var(--tap); font-size: 16px; }
    .nx-sheet__close { flex-basis: var(--tap); width: var(--tap); height: var(--tap); }
}
@media (max-width: 767px) {
    .main-view { overflow-y: auto; }
    .nx-page { flex: 0 0 auto; overflow: visible; padding: var(--sp-4); }
    .nx-head { align-items: stretch; padding: var(--sp-3) var(--sp-4); }
    .nx-head__title { font-size: 20px; }
    .nx-head__actions { flex: 1 1 100%; }
    .nx-head__actions > .nx-btn, .nx-head__actions > .nx-search, .nx-head__actions > .nx-search > input, .nx-head__actions > select { flex: 1 1 auto; width: auto; }
    .nx-tabs {
        display: flex;
        gap: var(--sp-1);
        overflow-x: auto;
        padding: 0 var(--sp-3);
        background: var(--bg-card);
        border-bottom: 1px solid var(--border-default);
        scrollbar-width: none;
    }
    .nx-tabs::-webkit-scrollbar { display: none; }
    .nx-tab {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        flex: 0 0 auto;
        min-height: var(--tap);
        padding: 0 var(--sp-3);
        border-bottom: 3px solid transparent;
        color: var(--text-secondary);
        font-size: var(--fs-sm);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }
    .nx-tab.is-active { color: var(--action); border-bottom-color: var(--action); }
    .nx-card { padding: var(--sp-4); }
    .nx-card--flush { padding: 0; }
    .nx-card--flush > .nx-card__title { padding: var(--sp-4) var(--sp-4) 0; }
    .nx-note--flash { margin: var(--sp-3) var(--sp-4) 0; }
    .nx-row__actions { flex: 1 1 100%; }
    .nx-row__actions > .nx-btn, .nx-row__actions > form, .nx-row__actions > form > .nx-btn { flex: 1 1 auto; }
    .nx-sheet { align-items: flex-end; padding: 0; }
    .nx-sheet__panel, .nx-sheet__panel--wide {
        max-width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        animation-name: nx-rise;
    }
    .nx-sheet__panel--wide { height: 96vh; height: 96dvh; max-height: 96vh; max-height: 96dvh; }
    .nx-sheet__handle { display: block; flex: 0 0 4px; width: 36px; height: 4px; margin: var(--sp-2) auto 0; border-radius: 2px; background: var(--border-strong); }
    .nx-sheet__head { padding: var(--sp-3) var(--sp-4); }
    .nx-sheet__body { padding: var(--sp-4); }
    .nx-sheet__foot { flex-direction: column-reverse; align-items: stretch; padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + var(--sab)); }
    .nx-sheet__foot > .nx-btn { width: 100%; }
    .nx-hide-phone { display: none !important; }
    .nx-only-phone { display: revert; }
}
@media (prefers-reduced-motion: reduce) {
    .nx-btn, .nx-sheet__panel { transition: none; animation: none; }
}

/* ---------- Layout guards ---------- */
/* The head and the tabs never shrink inside the column layout of the main view. */
.nx-head, .nx-tabs { flex: 0 0 auto; }
@media (max-width: 767px) {
    /* Numbers side by side on a phone: two per row, an odd last one takes the full row. */
    .nx-grid--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
    .nx-grid--kpi > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .nx-kpi { padding: var(--sp-3); }
    .nx-kpi__value { font-size: 21px; overflow-wrap: anywhere; }
}

/* ---------- Fields inside any sheet share one look (zero specificity: widgets may override) ---------- */
:where(.nx-sheet__panel) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]), select, textarea) {
    width: 100%;
    min-height: var(--control-h);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--control-fs);
}
:where(.nx-sheet__panel) :where(input, select, textarea):focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--action-ring); }
:where(.nx-sheet__panel) :where(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--action); }
.nx-label--block { display: block; margin-bottom: var(--sp-1); }
.nx-check { display: flex; align-items: center; gap: var(--sp-2); min-height: 32px; margin: 0; font-size: var(--fs-sm); font-weight: 400; color: var(--text-primary); cursor: pointer; }
.nx-pill-option { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; margin: 0; padding: 0 var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: var(--fs-sm); cursor: pointer; }
.nx-range { width: 100%; min-height: 32px; accent-color: var(--action); }
.nx-emoji { margin-top: var(--sp-1); font-size: 24px; text-align: center; }
.nx-reading { max-height: 200px; overflow: auto; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-subtle); font-size: var(--fs-sm); line-height: 1.5; }
.nx-signature { width: 100%; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-card); touch-action: none; cursor: crosshair; }
.nx-form-grid--top { align-items: start; }
.nx-mb-2 { margin-bottom: var(--sp-2); }
.nx-step-title { margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-default); font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--text-primary); }
.nx-step-title > i { color: var(--action); }
.nx-subtitle { margin: var(--sp-4) 0 var(--sp-2); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--border-light); font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary); }

/* ---------- The clinical file: one tall sheet that scrolls, navigation always in reach ---------- */
.nx-wizard { overflow-y: auto; }
.nx-wizard > * { flex: 0 0 auto; }
.nx-wizard > form { display: block; min-height: auto; padding: var(--sp-4) var(--sp-5) 0; }
.nx-wizard > .nx-sheet__head { position: sticky; top: 0; z-index: 6; background: var(--bg-card); }
.nx-wizard__autosave { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); }
.nx-wizard__banner { margin: var(--sp-3) var(--sp-5) 0; }
.nx-wizard__block { padding: var(--sp-3) var(--sp-5) 0; }
.nx-wizard__nav { position: sticky; bottom: 0; z-index: 6; margin: var(--sp-4) calc(var(--sp-5) * -1) 0; }
@media (max-width: 767px), (pointer: coarse) {
    :where(.nx-sheet__panel) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]), select, textarea) { min-height: var(--tap); font-size: 16px; }
    .nx-check { min-height: 44px; }
    .nx-pill-option { min-height: var(--tap); }
}
@media (max-width: 767px) {
    .nx-wizard > form { padding: var(--sp-3) var(--sp-4) 0; }
    .nx-wizard__banner { margin: var(--sp-3) var(--sp-4) 0; }
    .nx-wizard__block { padding: var(--sp-3) var(--sp-4) 0; }
    .nx-wizard__nav { flex-direction: row; align-items: center; margin: var(--sp-3) calc(var(--sp-4) * -1) 0; }
    .nx-wizard__nav > .nx-btn, .nx-wizard__nav .nx-btn { width: auto; }
    .nx-wizard .nx-sheet__head h3 { font-size: 16px; }
    /* Icon-only on a phone: still reachable, without crowding the title. */
    .nx-wizard #btn-export-pdf-expediente { flex: 0 0 var(--tap); width: var(--tap); padding: 0; font-size: 0; }
    .nx-wizard #btn-export-pdf-expediente > i { font-size: 16px; }
    .nx-wizard__autosave > #autosave-text { display: none; }
}
.nx-wizard > form label { margin-bottom: 2px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); }
.nx-wizard > form .nx-check, .nx-wizard > form .nx-pill-option { font-size: var(--fs-sm); font-weight: 400; color: var(--text-primary); }
.nx-dropzone { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--tap); margin: 0; padding: var(--sp-2) var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.nx-dropzone > i { color: var(--action); font-size: 16px; }
.nx-menu__grid--two { grid-template-columns: repeat(2, 1fr); }
.nx-nowrap-row { flex-wrap: nowrap; }
.auth-note { max-width: 420px; margin: 0 auto var(--sp-4); }
.auth-card .is-invalid { border-color: var(--fail-fg); }.nx-table .nx-actions { flex-wrap: nowrap; }
.nx-head__actions > .nx-btn--icon { flex: 0 0 44px; }
@media (max-width: 767px) {
    .nx-table .nx-actions { flex-wrap: wrap; }
    .nx-head__actions > .nx-btn--icon { flex: 0 0 var(--tap); }
    /* The agenda keeps a usable height when the whole page scrolls. */
    .main-view > .crm-content { flex: 1 0 auto; min-height: 70vh; padding: var(--sp-3); }
    .main-view > .crm-content .calendar-card { height: 68vh; }
}
.nx-thumb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 74px; height: 74px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background-size: cover; background-position: center; font-size: 10px; color: var(--text-muted); overflow: hidden; }
.nx-thumb.is-sealed { border-style: solid; border-color: var(--ok-fg); }
.nx-thumb__state { padding: 0 4px; border-radius: var(--radius-sm); background: var(--bg-card); color: var(--ok-fg); font-size: 10px; font-weight: 700; text-decoration: none; }
.nx-thumb__remove { border: 0; padding: 0 4px; border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-muted); font-size: 11px; cursor: pointer; }
.nx-row--doc { padding: var(--sp-2) var(--sp-3); flex-wrap: nowrap; }
.nx-row--doc .nx-row__main { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); flex: 1 1 auto; }.nx-thumb.is-failed { border-style: solid; border-color: var(--fail-fg); }
.nx-cell-sub { font-size: var(--fs-xs); color: var(--text-muted); overflow-wrap: anywhere; }
@media (max-width: 767px) {
    span.nx-only-phone.nx-cell-sub { display: block; }
    .nx-table th, .nx-table td { padding: var(--sp-3); }
}

/* ---------- Tables on a phone: each row is a small card, each cell says its column ---------- */
/* js/main.js copies the header text into data-label and marks the actions cell. */
@media (max-width: 767px) {
    .nx-table-wrap { overflow-x: visible; }
    .nx-table-wrap > .nx-table, .nx-table-wrap > .nx-table > tbody, .nx-table-wrap > .nx-table > tbody > tr, .nx-table-wrap > .nx-table > tbody > tr > td { display: block; width: 100%; }
    .nx-table-wrap > .nx-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .nx-table-wrap > .nx-table > tbody > tr { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-default); }
    .nx-table-wrap > .nx-table > tbody > tr:last-child { border-bottom: 0; }
    .nx-table-wrap > .nx-table > tbody > tr > td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 3px 0; border: 0; text-align: right; white-space: normal; }
    .nx-table-wrap > .nx-table > tbody > tr > td::before { content: attr(data-label); flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-align: left; }
    .nx-table-wrap > .nx-table > tbody > tr > td:first-child { display: block; padding-bottom: var(--sp-1); font-size: var(--fs-md); text-align: left; }
    .nx-table-wrap > .nx-table > tbody > tr > td:first-child::before,
    .nx-table-wrap > .nx-table > tbody > tr > td.is-actions::before { content: none; }
    .nx-table-wrap > .nx-table > tbody > tr > td.is-actions { display: block; padding-top: var(--sp-2); }
    .nx-table-wrap > .nx-table > tbody > tr > td.is-actions .nx-actions > *, .nx-table-wrap > .nx-table td.is-actions .nx-actions form > .nx-btn { flex: 1 1 auto; }
    .nx-table-wrap > .nx-table > tbody > tr > td.nx-hide-phone { display: none; }
    .nx-table-wrap > .nx-table br { display: none; }
    .nx-table-wrap > .nx-table td > .nx-small, .nx-table-wrap > .nx-table td > .nx-soft { display: block; }
}
@media (max-width: 767px) {
    .nx-table-wrap > .nx-table > tbody > tr > td { overflow-wrap: anywhere; min-width: 0; }
    .nx-table-wrap > .nx-table > tbody > tr > td > * { min-width: 0; }
}