/* ==========================================================================
   Sistema de diseño · Plataforma de ventas y bonificaciones
   Tokens → base → estructura → componentes → utilidades → móvil → impresión
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/inter/inter-latin-wght-normal.30a274cd01b6.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/inter/inter-latin-ext-wght-normal.268593425149.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Marca: agave profundo + ámbar reposado */
  --brand-900: #0b2a22;
  --brand-800: #0f3b30;
  --brand-700: #125043;
  --brand-600: #166554;
  --brand-500: #1d7f69;
  --brand-100: #e3f1ec;
  --brand-50: #f1f8f5;
  --accent-600: #b4741f;
  --accent-500: #cf8a2e;
  --accent-100: #fbefdc;

  /* Neutros */
  --ink-900: #111827;
  --ink-700: #374151;
  --ink-600: #4b5563;
  --ink-500: #6b7280;
  --ink-400: #9ca3af;
  --line: #e5e7eb;
  --line-soft: #eef0f2;
  --surface: #ffffff;
  --canvas: #f5f6f7;

  /* Estados */
  --ok: #157f3b;     --ok-bg: #e7f6ec;
  --warn: #9a5b00;   --warn-bg: #fff4e0;
  --bad: #b42318;    --bad-bg: #fdecea;
  --info: #175cd3;   --info-bg: #eaf2ff;
  --muted-bg: #f0f2f4;

  /* Movimiento (curvas fuertes; nunca ease-in en UI) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast: 140ms;
  --t-base: 200ms;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 8px 24px -8px rgba(16, 24, 40, .18);
  --sidebar-w: 264px;
  --topbar-h: 60px;

  /* Bootstrap */
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .925rem;
  --bs-body-color: var(--ink-900);
  --bs-body-bg: var(--canvas);
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 22, 101, 84;
  --bs-link-color: var(--brand-600);
  --bs-link-color-rgb: 22, 101, 84;
  --bs-link-hover-color: var(--brand-800);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius-sm);
  --bs-secondary-color: var(--ink-500);
  --bs-emphasis-color: var(--ink-900);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body { font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; background: var(--canvas); min-height: 100dvh; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; color: var(--ink-900); }
a { text-underline-offset: 2px; }
::selection { background: var(--brand-100); }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.num, .money, td.text-end, .kpi-value { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
.pre-wrap { white-space: pre-wrap; }
.nowrap { white-space: nowrap; }
.text-muted, .text-secondary { color: var(--ink-500) !important; }
.small, small { font-size: .82rem; }

/* ---------- Estructura ---------- */
.app-topbar {
  height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1030; padding-top: env(safe-area-inset-top);
}
.app-topbar .container-fluid { height: 100%; }
.app-brand { display: flex; align-items: center; gap: .6rem; color: var(--ink-900); font-weight: 650; text-decoration: none; min-width: 0; }
.app-brand-mark {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); color: #fff; font-size: 1rem;
}
.app-brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-brand-sub { display: block; font-size: .7rem; font-weight: 500; color: var(--ink-500); letter-spacing: .02em; }

.app-shell { display: flex; min-height: calc(100dvh - var(--topbar-h)); }
.app-sidebar { width: var(--sidebar-w); background: var(--brand-900); color: #cfe0da; flex-shrink: 0; }
@media (min-width: 992px) {
  .app-sidebar { position: sticky; top: var(--topbar-h); height: calc(100dvh - var(--topbar-h)); overflow-y: auto; }
}
.app-sidebar.offcanvas-lg { --bs-offcanvas-bg: var(--brand-900); --bs-offcanvas-color: #cfe0da; --bs-offcanvas-width: 290px; }
.app-sidebar .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.app-sidebar .btn-close { filter: invert(1) grayscale(1); }
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 3px; }
.app-main { flex: 1; min-width: 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.app-content { max-width: 1480px; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
@media (min-width: 768px) { .app-content { padding: 1.75rem 2rem 2.5rem; } }

/* ---------- Menú lateral con secciones expandibles ---------- */
.nav-group { padding: .15rem .6rem; }
.nav-group-toggle {
  width: 100%; display: flex; align-items: center; gap: .55rem; background: none; border: 0;
  color: #9fbdb3; font-size: .7rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  padding: .85rem .7rem .4rem; text-align: left; border-radius: var(--radius-sm);
}
.nav-group-toggle:hover { color: #e6f1ed; }
.nav-group-toggle .chev { margin-left: auto; transition: transform var(--t-base) var(--ease-out); }
.nav-group-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.nav-group .nav-link {
  display: flex; align-items: center; gap: .65rem; color: #d7e6e0; padding: .5rem .7rem; border-radius: 8px;
  font-size: .89rem; font-weight: 500; transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.nav-group .nav-link i { font-size: 1.02rem; color: #8fb3a7; width: 1.15rem; text-align: center; }
@media (hover: hover) and (pointer: fine) { .nav-group .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; } }
.nav-group .nav-link.active { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 3px 0 0 var(--accent-500); }
.nav-group .nav-link.active i { color: var(--accent-500); }
.sidebar-footer { border-top: 1px solid rgba(255, 255, 255, .08); padding: .9rem 1.3rem; font-size: .74rem; color: #87a99d; }

/* ---------- Encabezado de página ---------- */
.page-header { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.25rem; }
.page-title { font-size: 1.45rem; font-weight: 700; margin: 0; line-height: 1.25; }
.page-subtitle { color: var(--ink-500); font-size: .88rem; margin-top: .2rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--ink-400); --bs-breadcrumb-item-active-color: var(--ink-500); font-size: .8rem; margin-bottom: .35rem; }

/* ---------- Tarjetas ---------- */
.card { --bs-card-border-color: var(--line); --bs-card-border-radius: var(--radius-lg); --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
  background: var(--surface); box-shadow: var(--shadow-xs); }
.card-header { --bs-card-cap-bg: var(--surface); --bs-card-cap-padding-y: .85rem; font-weight: 600; font-size: .92rem; border-bottom: 1px solid var(--line-soft); }
.card-header .card-hint { font-weight: 400; color: var(--ink-500); font-size: .8rem; }
.card-section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-500); font-weight: 650; margin: 1.5rem 0 .6rem; }

/* KPI */
.kpi { height: 100%; }
.kpi .card-body { padding: 1rem 1.1rem; }
.kpi-label { font-size: .76rem; color: var(--ink-500); font-weight: 550; display: flex; align-items: center; gap: .4rem; }
.kpi-label i { color: var(--brand-500); }
.kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--ink-900); line-height: 1.2; margin-top: .3rem; letter-spacing: -.02em; }
.kpi-hint { font-size: .75rem; color: var(--ink-500); margin-top: .2rem; }
.kpi.kpi-accent { background: linear-gradient(160deg, var(--brand-700), var(--brand-900)); border-color: transparent; }
.kpi.kpi-accent .kpi-label, .kpi.kpi-accent .kpi-hint { color: #bfd9cf; }
.kpi.kpi-accent .kpi-label i { color: var(--accent-500); }
.kpi.kpi-accent .kpi-value { color: #fff; }

/* ---------- Tablas ---------- */
.table-card { overflow: hidden; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f8faf9; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .7rem .9rem; border-bottom-color: var(--line-soft); vertical-align: middle; }
.table thead th { font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500);
  background: #fafbfb; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table-sm > :not(caption) > * > * { padding: .45rem .7rem; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table .row-link { color: var(--ink-900); font-weight: 600; text-decoration: none; }
.table .row-link:hover { color: var(--brand-600); }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ---------- Insignias de estado (suaves) ---------- */
.badge { font-weight: 600; font-size: .72rem; letter-spacing: .01em; padding: .32em .62em; border-radius: 999px; }
.badge-soft { display: inline-flex; align-items: center; gap: .35em; }
.badge-soft::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; opacity: .85; }
.badge-success { color: var(--ok); background: var(--ok-bg); }
.badge-warning { color: var(--warn); background: var(--warn-bg); }
.badge-danger { color: var(--bad); background: var(--bad-bg); }
.badge-info { color: var(--info); background: var(--info-bg); }
.badge-primary { color: var(--brand-700); background: var(--brand-100); }
.badge-secondary, .badge-light { color: var(--ink-600); background: var(--muted-bg); }
.badge-dark { color: #fff; background: var(--ink-700); }
.chip { display: inline-block; font-size: .74rem; padding: .2rem .55rem; border-radius: 999px; background: var(--muted-bg); color: var(--ink-700); margin: 0 .2rem .25rem 0; }

/* ---------- Botones ---------- */
.btn { --bs-btn-font-weight: 550; --bs-btn-border-radius: 8px; --bs-btn-padding-x: .95rem; --bs-btn-padding-y: .48rem; --bs-btn-font-size: .88rem;
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn-sm { --bs-btn-padding-x: .65rem; --bs-btn-padding-y: .3rem; --bs-btn-font-size: .8rem; --bs-btn-border-radius: 7px; }
.btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-font-size: 1rem; }
.btn-primary { --bs-btn-bg: var(--brand-600); --bs-btn-border-color: var(--brand-600); --bs-btn-hover-bg: var(--brand-700); --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-800); --bs-btn-active-border-color: var(--brand-800); --bs-btn-disabled-bg: #7aa79b; --bs-btn-disabled-border-color: #7aa79b;
  box-shadow: 0 1px 2px rgba(11, 42, 34, .25), inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn-success { --bs-btn-bg: var(--ok); --bs-btn-border-color: var(--ok); --bs-btn-hover-bg: #116a31; --bs-btn-hover-border-color: #116a31; --bs-btn-active-bg: #0e5a29; }
.btn-outline-primary { --bs-btn-color: var(--brand-600); --bs-btn-border-color: #b9d6cd; --bs-btn-hover-bg: var(--brand-50); --bs-btn-hover-color: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-500); --bs-btn-active-bg: var(--brand-100); --bs-btn-active-color: var(--brand-800); --bs-btn-active-border-color: var(--brand-500); }
.btn-outline-secondary, .btn-light { --bs-btn-color: var(--ink-700); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: #f6f7f8;
  --bs-btn-hover-color: var(--ink-900); --bs-btn-hover-border-color: #d1d5db; --bs-btn-active-bg: #eef0f2; --bs-btn-active-color: var(--ink-900); --bs-btn-active-border-color: #d1d5db; }
.btn-outline-danger { --bs-btn-border-color: #f3c3be; }
.btn-xl { padding: 1rem 1.25rem; font-size: 1.08rem; border-radius: 12px; min-height: 58px; font-weight: 600; }
.btn-icon { display: inline-flex; align-items: center; gap: .45rem; }

/* ---------- Formularios ---------- */
.form-label { font-size: .8rem; font-weight: 600; color: var(--ink-700); margin-bottom: .3rem; }
.form-control, .form-select { border-color: #d6dadf; border-radius: 8px; padding: .5rem .75rem; font-size: .9rem; background-color: var(--surface);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.form-control:focus, .form-select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(29, 127, 105, .16); }
.form-control-sm, .form-select-sm { padding: .3rem .55rem; font-size: .82rem; border-radius: 7px; }
.form-text { color: var(--ink-500); font-size: .76rem; }
.form-check-input:checked { background-color: var(--brand-600); border-color: var(--brand-600); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(29, 127, 105, .16); border-color: var(--brand-500); }
.form-switch .form-check-input { width: 2.3em; }
.filter-bar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: .85rem; margin-bottom: 1rem; box-shadow: var(--shadow-xs); }
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--ink-400); pointer-events: none; }
.input-icon > .form-control { padding-left: 2.2rem; }
.form-section { border-top: 1px solid var(--line-soft); padding-top: 1.1rem; margin-top: 1.1rem; }

/* ---------- Alertas ---------- */
.alert { border: 0; border-radius: var(--radius); font-size: .88rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }
.alert-success { background: var(--ok-bg); color: #0d5a2a; }
.alert-warning { background: var(--warn-bg); color: #7a4700; }
.alert-danger { background: var(--bad-bg); color: #8c1c13; }
.alert-info { background: var(--info-bg); color: #12408f; }
.alert-secondary { background: var(--muted-bg); color: var(--ink-700); }
.app-messages .alert { margin-bottom: .6rem; }
.scope-notice { font-size: .78rem; color: #7a4700; background: var(--warn-bg); border-radius: var(--radius-sm); padding: .45rem .75rem; display: inline-flex; gap: .4rem; }

/* ---------- Estado vacío ---------- */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--ink-500); }
.empty-state i { font-size: 2rem; color: var(--ink-400); display: block; margin-bottom: .5rem; }

/* ---------- Módulo de catálogos ---------- */
.catalog-card { display: flex; gap: .85rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  color: inherit; text-decoration: none; height: 100%; box-shadow: var(--shadow-xs);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-fast) ease; }
@media (hover: hover) and (pointer: fine) {
  .catalog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #cfe3dc; color: inherit; }
}
.catalog-card:active { transform: scale(0.99); }
.catalog-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600);
  font-size: 1.2rem; flex-shrink: 0; }
.catalog-title { font-weight: 650; font-size: .93rem; }
.catalog-desc { font-size: .78rem; color: var(--ink-500); line-height: 1.35; margin-top: .15rem; }
.catalog-count { font-size: .74rem; color: var(--ink-500); margin-top: .45rem; }
.catalog-count strong { color: var(--ink-900); }

/* ---------- Roles ---------- */
.capability { display: flex; gap: .75rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; height: 100%;
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease; }
.capability:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); }
.capability .form-check-input { margin-top: .2rem; flex-shrink: 0; }
.capability-title { font-weight: 600; font-size: .88rem; }
.capability-desc { font-size: .78rem; color: var(--ink-500); }

/* ---------- Captura móvil ---------- */
.capture-zone { border: 1.5px dashed #b9d6cd; border-radius: var(--radius-lg); background: var(--brand-50); padding: 1.5rem 1rem; text-align: center; }
.capture-zone .capture-icon { width: 56px; height: 56px; margin: 0 auto .75rem; border-radius: 16px; display: grid; place-items: center;
  background: var(--surface); color: var(--brand-600); font-size: 1.6rem; box-shadow: var(--shadow-sm); }
.preview-img { max-height: 55vh; max-width: 100%; border-radius: var(--radius); border: 1px solid var(--line); object-fit: contain; background: #fff; }
.preview-enter { animation: preview-in 260ms var(--ease-out); }
@keyframes preview-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
.evidence-img { width: 100%; max-height: 78vh; object-fit: contain; background: #1f2421; border-radius: var(--radius); cursor: zoom-in; }
.evidence-img.zoomed { max-height: none; cursor: zoom-out; }
@media (min-width: 992px) { .sticky-evidence { position: sticky; top: calc(var(--topbar-h) + 1rem); } }
.line-row-PROPIO { border-left: 3px solid var(--ok) !important; }
.line-row-POSIBLE_PROPIO, .line-row-REQUIERE_REVISION { border-left: 3px solid var(--accent-500) !important; background: #fffaf2; }
.line-card { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; margin-bottom: .6rem; background: var(--surface); }
.progress { --bs-progress-bg: var(--line-soft); --bs-progress-bar-bg: var(--brand-500); border-radius: 999px; }
.progress-thin { height: .45rem; }
.progress-bar { transition: width var(--t-base) var(--ease-out); }

/* ---------- Inicio de sesión ---------- */
.login-wrap { min-height: 100dvh; display: grid; grid-template-columns: 1fr; background: var(--surface); }
@media (min-width: 992px) { .login-wrap { grid-template-columns: 1.05fr 1fr; } }
.login-art { display: none; position: relative; overflow: hidden; color: #e6f1ed; padding: 3rem;
  background: radial-gradient(1200px 600px at -10% -10%, #1d7f69 0%, transparent 55%), radial-gradient(900px 500px at 110% 110%, #b4741f 0%, transparent 50%), var(--brand-900); }
@media (min-width: 992px) { .login-art { display: flex; flex-direction: column; justify-content: space-between; } }
.login-art h2 { color: #fff; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; max-width: 30rem; }
.login-art p { color: #bfd9cf; max-width: 28rem; }
.login-feature { display: flex; gap: .6rem; align-items: flex-start; color: #d7e6e0; font-size: .9rem; margin-bottom: .7rem; }
.login-feature i { color: var(--accent-500); }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.login-card { width: 100%; max-width: 400px; }
.login-card .form-control { padding: .7rem .85rem; font-size: 1rem; }

/* ---------- Barra inferior móvil (vendedor) ---------- */
.mobile-tabbar { display: none; }
@media (max-width: 991.98px) {
  .has-tabbar .app-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .mobile-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px);
    border-top: 1px solid var(--line); padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom)); }
  .mobile-tabbar a { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .7rem; color: var(--ink-500); text-decoration: none;
    padding: .3rem 0; border-radius: 10px; transition: transform var(--t-fast) var(--ease-out); }
  .mobile-tabbar a i { font-size: 1.3rem; }
  .mobile-tabbar a.active { color: var(--brand-600); font-weight: 600; }
  .mobile-tabbar a:active { transform: scale(0.94); }
  .mobile-tabbar a.tab-primary i { background: var(--brand-600); color: #fff; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
    margin-top: -18px; box-shadow: 0 6px 16px -4px rgba(22, 101, 84, .55); }
}

/* ---------- Ajustes móviles nativos ---------- */
* { -webkit-tap-highlight-color: transparent; }
button, .btn, .nav-link, .mobile-tabbar a { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
@media (max-width: 767.98px) {
  .form-control, .form-select { font-size: 16px; }  /* evita el acercamiento automático de iOS */
  .page-title { font-size: 1.25rem; }
  .page-header { align-items: flex-start; }
  .table > :not(caption) > * > * { padding: .6rem .7rem; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .btn:active:not(:disabled), .catalog-card:hover { transform: none; }
}

/* ---------- Impresión ---------- */
.statement-print-only { display: none; }
@media print {
  .app-topbar, .app-sidebar, .no-print, .app-messages, .mobile-tabbar { display: none !important; }
  body { background: #fff; }
  .app-content { padding: 0; max-width: none; }
  .statement-print-only { display: block; }
  .card { box-shadow: none; border-color: #bbb; }
}

/* ---------- Usuario ---------- */
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-600); color: #fff;
  font-size: .8rem; font-weight: 650; flex-shrink: 0; }
.role-line { font-size: .72rem; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar .collapsing { transition: height 200ms var(--ease-out); }
.min-w-0 { min-width: 0; }
@media (min-width: 992px) {
  .app-sidebar.offcanvas-lg, .app-sidebar.offcanvas-lg .offcanvas-body { background-color: var(--brand-900) !important; }
}
.auto-code { padding: .5rem .75rem; border: 1px dashed #c9d8d2; border-radius: 8px; background: var(--brand-50); color: var(--brand-700); font-size: .88rem; }
.auto-code .mono { font-size: .92rem; font-weight: 650; }
.field-filled { animation: field-filled 900ms var(--ease-out); }
@keyframes field-filled { from { background-color: var(--accent-100); } to { background-color: var(--surface); } }