/* ========================================
   MC Laboratorio — Global Theme Styles
   ======================================== */

/* ── Legacy token aliases → Helix (do not add new usages; migrate to Helix tokens directly) ── */
:root {
  --color-primary:    var(--p-600);
  --color-secondary:  var(--ok);
  --color-accent:     var(--p-400);
  --color-background: var(--bg);
  --color-surface:    var(--surface);
  --color-text:       var(--ink);
  --color-primary-fg: #FFFFFF;
  --color-secondary-fg: #FFFFFF;
  --color-border:     var(--line);
  --color-muted:      var(--ink-3);
  --color-hover-primary: var(--p-700);
  --color-hover-secondary: var(--ok);
  --color-focus-ring: color-mix(in oklab, var(--p-600) 30%, transparent);
  --font-heading:     var(--f-serif);
  --font-body:        var(--f-sans);
  --font-ui:          var(--f-sans);
  --radius-sm:        var(--r-1);
  --radius-md:        var(--r-2);
  --radius-lg:        var(--r-3);
  --radius-card:      var(--r-3);
  --radius-full:      var(--r-pill);
}

/* ── Body ── */
body {
    font-family: var(--mud-typography-default-family, var(--font-body));
    background-color: var(--color-background);
}

input, select, textarea, button {
    font-family: inherit;
}

/* scrollbar: defined in helix-tokens.css */

/* ── Rounded UI overrides (radius on mud-button-root handled in helix-mud-overrides.css) ── */
.mud-card, .mud-paper:not(.mud-appbar):not(.mud-drawer) {
    border-radius: var(--radius-card) !important;
}
.mud-card { overflow: hidden; }
.mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius-md) !important; }
.mud-chip { border-radius: var(--radius-full) !important; }
.mud-alert { border-radius: var(--radius-md) !important; }
.mud-snackbar { border-radius: var(--radius-md) !important; }
.mud-dialog { border-radius: var(--radius-lg) !important; }

/* ── Card hover lift (skip stat cards — they have gradient bg) ── */
.mud-card:not(.stat-card) {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mud-card:not(.stat-card):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10) !important;
}

/* ── Sidebar nav links ── */
.mud-nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 8px;
    margin: 2px 8px;
    transform: translateX(0);
    transition: background 0.15s ease, color 0.15s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mud-nav-link:hover,
.mud-nav-link.active {
    background: rgba(255, 255, 255, 0.10) !important;
    color: white !important;
}

.mud-nav-link.active {
    background: color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
    border-left: 3px solid var(--color-accent);
    transform: translateX(4px);
}

.mud-nav-link .mud-icon-root {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: color 0.15s ease;
}

.mud-nav-link.active .mud-icon-root,
.mud-nav-link:hover .mud-icon-root {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ── Main content area (animation on .hx-content in helix-tokens.css) ── */

/* ═══════════════════════════════════════════════
   DATA TABLES — Global revamp
   Targets MudDataGrid + MudSimpleTable instances
═══════════════════════════════════════════════ */

/* ── MudDataGrid container ── */
.mud-data-grid {
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    border: 1px solid var(--color-border) !important;
    border-top: 3px solid var(--color-primary) !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease;
}
.mud-data-grid:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    transform: none !important;
}

/* ── Toolbar ── */
.mud-data-grid .mud-toolbar {
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--color-border) !important;
    background-color: var(--color-surface) !important;
    min-height: 52px !important;
}

/* Search pill shape inside toolbar */
.mud-data-grid .mud-toolbar .mud-input-outlined .mud-input-outlined-border {
    border-radius: 20px !important;
}
.mud-data-grid .mud-toolbar .mud-input-control {
    max-width: 240px;
}

/* ── Table headers ── */
.mud-data-grid .mud-table-head th,
.mud-data-grid .mud-header-cell {
    background-color: var(--color-background) !important;
    color: var(--color-muted) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--color-border) !important;
    white-space: nowrap;
    padding: 10px 16px !important;
}

/* ── Body cells ── */
.mud-data-grid .mud-table-body td {
    font-size: 0.87rem !important;
    padding: 9px 16px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent) !important;
    vertical-align: middle !important;
    transition: background 0.1s ease;
}

/* ── Row hover (override MudBlazor's default gray) ── */
.mud-data-grid .mud-table-body tr:hover td {
    background-color: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)) !important;
}

/* ── Striped rows ── */
.mud-data-grid.mud-table-striped .mud-table-body tr:nth-child(even) td {
    background-color: color-mix(in srgb, var(--color-background) 65%, var(--color-surface)) !important;
}

/* ── Pagination ── */
.mud-data-grid .mud-table-pagination {
    border-top: 1px solid var(--color-border) !important;
    background-color: var(--color-surface) !important;
    font-size: 0.8rem !important;
    color: var(--color-muted) !important;
}
.mud-data-grid .mud-table-pagination .mud-select-input,
.mud-data-grid .mud-table-pagination .mud-input-root {
    font-size: 0.8rem !important;
}

/* ── MudDataGrid table headers (legacy rule — kept for fallback) ── */
.mud-table-head th {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
    background-color: var(--color-background);
}

/* ── Native select inside dense table cells ── */
.tbl-flag-select {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.82rem;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    padding: 2px 2px;
    outline: none;
    appearance: auto;
}
.tbl-flag-select:focus {
    outline: 1px solid var(--color-primary);
    border-radius: 3px;
}

/* ── MudSimpleTable ── */
.mud-simple-table {
    box-shadow: none !important;
    border: 1px solid var(--color-border) !important;
    border-top: 3px solid var(--color-primary) !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden !important;
}
.mud-simple-table thead th {
    background-color: var(--color-background) !important;
    color: var(--color-muted) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: 10px 16px !important;
    white-space: nowrap;
}
.mud-simple-table tbody td {
    font-size: 0.87rem !important;
    padding: 9px 16px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent) !important;
    vertical-align: middle !important;
}
.mud-simple-table tbody tr:hover td {
    background-color: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)) !important;
}

/* ── Toolbar title + count badge ── */
.table-toolbar-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    font-family: var(--font-ui);
}
.table-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 9px;
    border-radius: var(--radius-full);
    font-size: 0.71rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    min-width: 22px;
    line-height: 1.7;
    font-family: var(--font-ui);
}

/* ── Action buttons: dim until row hover ── */
.mud-data-grid .mud-table-body tr .table-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    opacity: 0.35;
    transition: opacity 0.15s ease;
}
.mud-data-grid .mud-table-body tr:hover .table-actions {
    opacity: 1;
}

/* ── Status badge (Ventas) ── */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
}
.status-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%; flex-shrink: 0; display: inline-block;
    background: var(--ink-3);
}
.status-badge.status-pagada    { background: var(--ok-bg);    color: var(--ok-ink);    border-color: color-mix(in oklab, var(--ok)    30%, var(--line)); }
.status-badge.status-pagada::before    { background: var(--ok); }
.status-badge.status-pendiente { background: var(--amber-bg); color: var(--amber-ink); border-color: color-mix(in oklab, var(--amber) 30%, var(--line)); }
.status-badge.status-pendiente::before { background: var(--amber); }
.status-badge.status-cancelada { background: var(--danger-bg);color: var(--danger-ink);border-color: color-mix(in oklab, var(--danger)30%, var(--line)); }
.status-badge.status-cancelada::before { background: var(--danger); }

/* ── Role badge (Usuarios) ── */
.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--f-sans);
    border: 1px solid var(--line);
}
.role-badge.role-admin   { background: var(--amber-bg); color: var(--amber-ink); border-color: color-mix(in oklab, var(--amber) 30%, var(--line)); }
.role-badge.role-usuario { background: var(--p-50); color: var(--p-700); border-color: var(--p-100); }

/* ── Price badge (Servicios) ── */
.price-badge {
    font-weight: 700;
    color: var(--ok-ink);
    font-variant-numeric: tabular-nums;
    font-family: var(--f-sans);
    letter-spacing: -0.01em;
}

/* ── Empty state ── */
.table-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    gap: 0.6rem;
    color: var(--color-muted);
    text-align: center;
}

/* ── Dashboard stat cards ── */
.stat-card-blue {
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 60%, #000) 100%) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-teal {
    background: linear-gradient(135deg, var(--color-secondary) 0%, color-mix(in srgb, var(--color-secondary) 60%, #000) 100%) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-orange {
    background: linear-gradient(135deg, #e65c00 0%, #b34100 100%) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-blue:hover,
.stat-card-teal:hover,
.stat-card-orange:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2) !important;
}


/* ── Informe resultado view (delta-lims design) ── */
.rpt {
    max-width: 900px;
    margin: 0 auto;
    padding: 36px 20px 48px;
    background: var(--bg, #F0F5FC);
    min-height: 100vh;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink, #0F172A);
    -webkit-font-smoothing: antialiased;
}

/* Header */
.rpt-hdr { border-radius: 16px; overflow: hidden; margin-bottom: 16px; position: relative; }
.rpt-hdr::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1px); background-size:20px 20px; pointer-events:none; }
.rpt-hdr::after  { content:''; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border:50px solid rgba(255,255,255,.05); border-radius:50%; pointer-events:none; }
.rpt-hdr-main { position:relative; z-index:1; padding:30px 36px 26px; }
.rpt-hdr-top  { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px; }
.rpt-hdr-id   { display:flex; align-items:center; gap:18px; }
.rpt-lab-name { font-size:20px; font-weight:800; color:#fff; letter-spacing:-.4px; line-height:1.2; }
.rpt-lab-sub  { font-size:10px; font-weight:500; letter-spacing:2.2px; color:rgba(255,255,255,.5); text-transform:uppercase; margin-top:4px; }
.rpt-hdr-folio  { text-align:right; flex-shrink:0; }
.rpt-folio-lbl  { font-size:9px; font-weight:700; letter-spacing:2px; color:rgba(255,255,255,.45); text-transform:uppercase; }
.rpt-folio-val  { font-size:19px; font-weight:800; letter-spacing:-.5px; margin-top:2px; }
.rpt-folio-date { font-size:10.5px; color:rgba(255,255,255,.5); margin-top:2px; }
.rpt-hdr-sep    { height:1px; background:rgba(255,255,255,.12); margin-bottom:22px; }
.rpt-hdr-meta   { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.rpt-meta-grp-lbl { font-size:9px; font-weight:700; letter-spacing:2.5px; color:rgba(255,255,255,.4); text-transform:uppercase; margin-bottom:10px; }
.rpt-meta-row   { display:flex; gap:10px; margin-bottom:6px; align-items:baseline; }
.rpt-meta-key   { font-size:9.5px; font-weight:600; letter-spacing:.4px; color:rgba(255,255,255,.45); text-transform:uppercase; min-width:96px; flex-shrink:0; }
.rpt-meta-val   { font-size:11.5px; font-weight:400; color:rgba(255,255,255,.88); }
.rpt-hdr-bar    { background:rgba(0,0,0,.18); border-top:1px solid rgba(255,255,255,.1); padding:11px 36px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.rpt-hdr-bar-title { font-size:12px; font-weight:700; letter-spacing:3.5px; color:#fff; text-transform:uppercase; }
.rpt-badge-final   { background:rgba(24,184,255,.2); border:1px solid rgba(24,184,255,.4); padding:4px 13px; border-radius:20px; font-size:9.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }

/* Cards */
.rpt-card         { background:#fff; border-radius:16px; box-shadow:0 1px 3px rgba(4,28,74,.05),0 4px 20px rgba(4,28,74,.06); margin-bottom:14px; overflow:hidden; }
.rpt-card-top     { height:3px; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.rpt-card-body    { padding:26px 30px; }

/* Patient card */
.rpt-pat-grid    { display:grid; grid-template-columns:1fr 172px; gap:28px; align-items:start; }
.rpt-pat-status  { display:inline-flex; align-items:center; gap:6px; background:rgba(24,184,255,.1); border:1px solid; padding:3px 11px; border-radius:20px; font-size:9.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; }
.rpt-pulse-dot   { width:6px; height:6px; border-radius:50%; }
.rpt-pat-name    { font-size:22px; font-weight:800; letter-spacing:-.5px; line-height:1.2; margin-bottom:6px; color:var(--ink,#0F172A); }
.rpt-pat-id      { display:inline-block; background:rgba(4,28,74,.05); border:1px solid rgba(15,23,42,.08); padding:3px 10px; border-radius:6px; font-size:10.5px; font-weight:600; color:#64748B; letter-spacing:.5px; margin-bottom:18px; }
.rpt-pat-fields  { display:grid; grid-template-columns:repeat(3,1fr); gap:14px 20px; }
.rpt-pf-lbl      { font-size:8.5px; font-weight:700; letter-spacing:2px; color:#64748B; text-transform:uppercase; margin-bottom:2px; }
.rpt-pf-val      { font-size:12.5px; font-weight:600; color:var(--ink,#0F172A); }
.rpt-pat-summary { background:rgba(4,28,74,.03); border:1px solid rgba(15,23,42,.08); border-radius:12px; padding:18px; }
.rpt-sum-lbl     { font-size:8.5px; font-weight:700; letter-spacing:2px; color:#64748B; text-transform:uppercase; margin-bottom:14px; text-align:center; }
.rpt-sum-row     { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.rpt-sum-row:last-child { margin-bottom:0; }
.rpt-sum-tag     { font-size:10px; color:#64748B; }
.rpt-sum-num     { font-size:16px; font-weight:800; color:var(--ink,#0F172A); }
.rpt-sum-num.rpt-warn { color:#F59E0B; }
.rpt-sum-num.rpt-ok   { color:#0EA5A4; }
.rpt-sum-sep     { height:1px; background:rgba(15,23,42,.08); margin:8px 0; }

/* Section cards */
.rpt-sec-card    { position:relative; }
.rpt-sec-num     { position:absolute; top:18px; right:24px; font-size:80px; font-weight:900; color:rgba(4,28,74,.035); line-height:1; letter-spacing:-4px; pointer-events:none; user-select:none; }
.rpt-sec-hdr     { display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
.rpt-sec-icon    { width:42px; height:42px; background:rgba(4,28,74,.05); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rpt-sec-title   { font-size:16px; font-weight:800; letter-spacing:-.3px; margin-bottom:8px; }
.rpt-pills       { display:flex; gap:7px; flex-wrap:wrap; }
.rpt-pill        { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:10px; font-weight:600; }
.rpt-pill-m      { background:rgba(4,28,74,.06); color:#64748B; }
.rpt-pill-s      { background:rgba(14,165,164,.08); border:1px solid rgba(14,165,164,.22); color:#0EA5A4; }

/* Results table */
.rpt-tbl         { width:100%; border-collapse:collapse; }
.rpt-tbl thead tr { border-bottom:1.5px solid rgba(15,23,42,.08); }
.rpt-tbl thead th { padding:7px 10px; font-size:8.5px; font-weight:700; letter-spacing:2px; color:#64748B; text-transform:uppercase; text-align:left; }
.rpt-tbl thead th.c  { text-align:center; }
.rpt-tbl thead th.r  { text-align:right; }
.rpt-tbl thead th.rp { text-align:right; padding-right:14px; }
.rpt-tbl tbody tr    { border-bottom:1px solid rgba(15,23,42,.05); border-left:3px solid transparent; }
.rpt-tbl tbody tr:last-child { border-bottom:none; }
.rpt-tbl tbody tr:nth-child(even) { background:rgba(240,245,252,.5); }
.rpt-tbl tbody tr.rpt-ab { border-left-color:#F59E0B; }
.rpt-tbl tbody tr.rpt-cr { border-left-color:#EF4444; }
.rpt-tbl td      { padding:11px 10px; vertical-align:middle; }
.rpt-td-exam     { font-size:12.5px; font-weight:500; color:var(--ink,#0F172A); }
.rpt-td-res      { text-align:center; font-size:13.5px; font-weight:600; color:var(--ink,#0F172A); }
.rpt-td-res.rpt-ab { color:#F59E0B; font-weight:700; }
.rpt-td-res.rpt-cr { color:#EF4444; font-weight:700; }
.rpt-td-unit     { text-align:center; font-size:10.5px; color:#64748B; }
.rpt-td-ref      { text-align:right; font-size:10.5px; color:#64748B; }
.rpt-td-status   { text-align:right; padding-right:14px; }
.rpt-sbadge      { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:9.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; white-space:nowrap; }
.rpt-sbadge::before { content:''; width:5px; height:5px; border-radius:50%; display:block; }
.rpt-sb-ok       { background:rgba(14,165,164,.1); color:#0EA5A4; }
.rpt-sb-ok::before  { background:#0EA5A4; }
.rpt-sb-ab       { background:rgba(245,158,11,.1); color:#F59E0B; }
.rpt-sb-ab::before  { background:#F59E0B; }
.rpt-sb-cr       { background:rgba(239,68,68,.1); color:#EF4444; }
.rpt-sb-cr::before  { background:#EF4444; }

/* Validation card */
.rpt-val-grid    { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
.rpt-val-lbl     { font-size:8.5px; font-weight:700; letter-spacing:2.5px; color:#64748B; text-transform:uppercase; margin-bottom:14px; }
.rpt-doc-name    { font-size:18px; font-weight:800; letter-spacing:-.3px; margin-bottom:12px; }
.rpt-doc-fields  { display:flex; flex-direction:column; gap:7px; }
.rpt-doc-row     { display:flex; gap:10px; align-items:center; }
.rpt-doc-key     { font-size:9.5px; font-weight:700; letter-spacing:.5px; color:#64748B; text-transform:uppercase; min-width:104px; flex-shrink:0; }
.rpt-doc-val     { font-size:12px; font-weight:500; color:var(--ink,#0F172A); }
.rpt-verified-badge  { display:inline-flex; align-items:center; gap:7px; background:rgba(14,165,164,.08); border:1px solid rgba(14,165,164,.22); padding:7px 14px; border-radius:8px; margin-top:14px; }
.rpt-verified-text   { font-size:11px; font-weight:600; color:#0EA5A4; }
.rpt-sig-side    { display:flex; flex-direction:column; align-items:center; gap:16px; }
.rpt-stamp       { width:84px; height:84px; border:2px dashed rgba(4,28,74,.18); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.rpt-stamp-txt   { font-size:7.5px; font-weight:600; color:rgba(4,28,74,.25); text-transform:uppercase; text-align:center; line-height:1.3; }
.rpt-sig-line    { width:190px; text-align:center; }
.rpt-sig-rule    { height:1px; background:rgba(4,28,74,.18); margin-bottom:5px; }
.rpt-sig-label   { font-size:8.5px; letter-spacing:1.5px; color:#64748B; text-transform:uppercase; }
.rpt-sig-name    { font-size:10.5px; color:#64748B; margin-top:6px; text-align:center; line-height:1.5; }

/* QR card */
.rpt-qr-body    { display:flex; flex-direction:column; align-items:center; text-align:center; padding:30px 32px; }
.rpt-qr-lbl     { font-size:9px; font-weight:700; letter-spacing:2.5px; color:#64748B; text-transform:uppercase; margin-bottom:16px; }
.rpt-qr-img     { width:128px; height:128px; margin-bottom:14px; }
.rpt-qr-title   { font-size:13px; font-weight:600; color:var(--ink,#0F172A); margin-bottom:6px; }
.rpt-qr-code    { font-family:'Courier New',monospace; font-size:12px; font-weight:700; background:rgba(4,28,74,.05); border:1px solid rgba(15,23,42,.08); padding:5px 14px; border-radius:7px; letter-spacing:2px; margin-bottom:12px; }
.rpt-qr-brand   { font-size:10px; color:#64748B; }

/* Footer */
.rpt-footer      { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; border-top:1px solid rgba(15,23,42,.08); padding-top:18px; margin-top:4px; }
.rpt-ftr-lab     { font-size:11px; font-weight:700; margin-bottom:3px; }
.rpt-ftr-addr    { font-size:9.5px; color:#64748B; line-height:1.55; }
.rpt-ftr-right   { text-align:right; flex-shrink:0; }
.rpt-ftr-brand   { font-size:10px; color:#64748B; margin-bottom:4px; }
.rpt-ftr-disc    { font-size:8.5px; color:rgba(100,116,139,.65); max-width:280px; line-height:1.45; }

/* ── Print ── */
@media print {
    .no-print { display: none !important; }
    /* printReportOnly (helpers.js): only the .rpt subtree is visible. Catches
       anything display rules miss (sticky sidebar, fixed bubbles, overlays). */
    body.print-rpt-only * { visibility: hidden !important; }
    body.print-rpt-only .rpt, body.print-rpt-only .rpt * { visibility: visible !important; }
    body.print-rpt-only .rpt { position: absolute; left: 0; top: 0; width: 100%; margin: 0; }
    .mud-drawer, .mud-appbar { display: none !important; }
    .mud-main-content { padding: 0 !important; }
    .hx-side, .hx-top, .hx-side-mask { display: none !important; }
    .hx-main, .hx-content { padding: 0 !important; margin: 0 !important; }
    body { background: white; font-size: 11px; }
    @page { size: A4; margin: 14mm; }
    .rpt { padding: 0; max-width: 100%; background: white; min-height: auto; }
    .rpt-hdr { -webkit-print-color-adjust: exact; print-color-adjust: exact; border-radius: 6px; }
    .rpt-card { box-shadow: none; border: 1px solid rgba(4,28,74,.11); border-radius: 6px; break-inside: avoid; }
    .rpt-card-top { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .rpt-sec-card { break-inside: avoid; }
    .rpt-tbl { break-inside: auto; }
    .rpt-tbl tr { break-inside: avoid; }
    .rpt-sbadge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .rpt-sb-ok, .rpt-sb-ab, .rpt-sb-cr { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .rpt::after {
        content: "Página " counter(page) " de " counter(pages);
        display: block;
        text-align: center;
        font-size: 8px;
        color: #94a3b8;
        margin-top: 12px;
        padding-top: 8px;
        border-top: 1px solid rgba(15,23,42,.08);
    }
}

/* ── Stat chips (L2/L3/B5): reusable summary pill, token-driven ── */
.hx-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill, 9999px);
    padding: 0.3rem 0.9rem;
    font-size: 0.8rem;
    white-space: nowrap;
}
.hx-stat-chip.is-primary .mud-icon-root { color: var(--p-600); }
.hx-stat-chip.is-warn {
    background: var(--amber-bg);
    border-color: var(--amber);
    color: var(--amber-ink);
}
.hx-stat-chip.is-warn .mud-icon-root,
.hx-stat-chip.is-warn .mud-typography { color: var(--amber-ink); }
.hx-stat-chip-btn { cursor: pointer; user-select: none; transition: box-shadow .12s, border-color .12s; }
.hx-stat-chip-btn:hover { border-color: var(--p-300, var(--p-600)); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.hx-stat-chip-btn.is-active { border-color: var(--p-600); box-shadow: 0 0 0 2px var(--p-100, rgba(4,28,74,.12)); }

/* ── Form validation ── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

/* ── Blazor error boundary ── */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
    border-radius: 8px;
}

h1:focus { outline: none; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .rpt { padding: 12px 8px 32px; }
    .rpt-hdr-main { padding: 20px 20px 18px; }
    .rpt-hdr-bar  { padding: 10px 20px; }
    .rpt-hdr-meta { grid-template-columns: 1fr; gap: 16px; }
    .rpt-card-body { padding: 18px 16px; }
    .rpt-pat-grid  { grid-template-columns: 1fr; }
    .rpt-val-grid  { grid-template-columns: 1fr; gap: 20px; }
    .rpt-pat-fields { grid-template-columns: repeat(2, 1fr); }
}

/* ── Landing stepper flow animation ─────────────────────────────────────── */

/* Idle: everything gray until viewport trigger */
.hx-stepper-anim:not(.is-animating) .hx-step .hx-step-dot {
    background: var(--surface) !important;
    border-color: var(--line-2) !important;
    color: var(--ink-4) !important;
    box-shadow: none !important;
}
.hx-stepper-anim:not(.is-animating) .hx-step .hx-step-lbl b {
    color: var(--ink-4) !important;
    font-weight: 500 !important;
}
.hx-stepper-anim:not(.is-animating) .hx-step-bar {
    background: var(--line) !important;
}

/* Keyframes */
@keyframes hx-step-done {
    from { background: var(--surface); border-color: var(--line-2); color: var(--ink-3); }
    to   { background: var(--p-600);   border-color: var(--p-600);  color: white; }
}
@keyframes hx-step-active {
    from { background: var(--surface); border-color: var(--line-2); color: var(--ink-3); box-shadow: none; }
    to   { background: white; border-color: var(--p-600); color: var(--p-700); box-shadow: 0 0 0 3px var(--p-100); }
}
@keyframes hx-step-active-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--p-100); }
    50%       { box-shadow: 0 0 0 6px color-mix(in srgb, var(--p-100) 50%, transparent); }
}
@keyframes hx-lbl-done {
    from { color: var(--ink-4); }
    to   { color: var(--ink-2); }
}
@keyframes hx-lbl-active {
    from { color: var(--ink-4); }
    to   { color: var(--p-700); }
}
@keyframes hx-bar-fill {
    from { transform: scaleX(0); background: var(--line); }
    to   { transform: scaleX(1); background: var(--p-600); }
}

/* When is-animating, fire per-position keyframes */
.hx-stepper-anim.is-animating .hx-step-bar { transform-origin: left center; }

/* Step 0 */
.hx-stepper-anim.is-animating > :nth-child(1) .hx-step-dot { animation: hx-step-done   0.5s ease-out 0s    both; }
.hx-stepper-anim.is-animating > :nth-child(1) .hx-step-lbl b { animation: hx-lbl-done  0.5s ease-out 0s    both; }
/* Bar 0 */
.hx-stepper-anim.is-animating > :nth-child(2)                 { animation: hx-bar-fill  0.65s ease-in-out 0.6s both; }
/* Step 1 */
.hx-stepper-anim.is-animating > :nth-child(3) .hx-step-dot { animation: hx-step-done   0.5s ease-out 1.3s both; }
.hx-stepper-anim.is-animating > :nth-child(3) .hx-step-lbl b { animation: hx-lbl-done  0.5s ease-out 1.3s both; }
/* Bar 1 */
.hx-stepper-anim.is-animating > :nth-child(4)                 { animation: hx-bar-fill  0.65s ease-in-out 1.9s  both; }
/* Step 2 */
.hx-stepper-anim.is-animating > :nth-child(5) .hx-step-dot { animation: hx-step-done   0.5s ease-out 2.6s  both; }
.hx-stepper-anim.is-animating > :nth-child(5) .hx-step-lbl b { animation: hx-lbl-done  0.5s ease-out 2.6s  both; }
/* Bar 2 */
.hx-stepper-anim.is-animating > :nth-child(6)                 { animation: hx-bar-fill  0.65s ease-in-out 3.2s both; }
/* Step 3 (active/last) — activates then pulses */
.hx-stepper-anim.is-animating > :nth-child(7) .hx-step-dot {
    animation:
        hx-step-active       0.5s ease-out 3.9s both,
        hx-step-active-pulse 1.8s ease-in-out 4.4s infinite;
}
.hx-stepper-anim.is-animating > :nth-child(7) .hx-step-lbl b { animation: hx-lbl-active 0.5s ease-out 3.9s both; }

/* Reduced motion: skip animation, show final state immediately */
@media (prefers-reduced-motion: reduce) {
    .hx-stepper-anim:not(.is-animating) .hx-step .hx-step-dot,
    .hx-stepper-anim:not(.is-animating) .hx-step .hx-step-lbl b,
    .hx-stepper-anim:not(.is-animating) .hx-step-bar { all: revert; }
    .hx-stepper-anim.is-animating * { animation: none !important; }
}