/* Dirutxi — base y componentes (Modernist). Enlázalo antes de los estilos del host:
   <link rel="stylesheet" href="_content/Dirutxi.Ui.Shared/dirutxi.css" />
   Nombres de clase del sistema original (.btn, .card, .table, .field, .seg, .tag, .nav,
   .dialog) más extensiones .dx-* medidas sobre las pantallas de docs/diseno/fuente-2026-09-24. */
@import url("dirutxi-tokens.css");

/* ── Base ─────────────────────────────────────────────────────────────
   Solo dentro de .dx-root (en <body> o en el contenedor de la pantalla migrada):
   así las pantallas aún sin migrar no heredan el fondo ni el tema oscuro.
   :where() deja la especificidad a cero para que la pantalla pueda ajustar. */
:where(.dx-root), :where(.dx-root) *, :where(.dx-root) *::before, :where(.dx-root) *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.dx-root { margin: 0; min-height: 100dvh; }
:where(.dx-root) {
  color-scheme: var(--dx-scheme); background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--font-size-md); line-height: 1.55;
  font-weight: 400; font-kerning: normal; -webkit-tap-highlight-color: transparent;
}
:where(.dx-root) :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
:where(.dx-root) h1 { font-size: var(--font-size-3xl); }
:where(.dx-root) h2 { font-size: var(--font-size-2xl); }
:where(.dx-root) h3 { font-size: var(--font-size-xl); }
:where(.dx-root) h4 { font-size: 20px; }
:where(.dx-root) h5 { font-size: 16px; }
:where(.dx-root) h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
:where(.dx-root) figure { margin: 0; }
:where(.dx-root) figcaption { font-size: var(--font-size-xs); margin-top: var(--space-1); color: var(--color-text-muted); }
:where(.dx-root) p { margin: 0 0 var(--space-3); }
:where(.dx-root) a { color: var(--color-accent-text); text-underline-offset: 3px; }
:where(.dx-root) img { display: block; max-width: 100%; }
:where(.dx-root) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.dx-root) :focus { outline: none; }
:where(.dx-root) :focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
:where(.dx-root) ::selection { background: var(--color-selection); }
:where(.dx-root) .text-muted, .text-muted:where(.dx-root) { color: var(--color-text-muted); }
:where(.dx-root) .num, .num:where(.dx-root) { font-variant-numeric: tabular-nums; }
:where(.dx-root) .hr, .hr:where(.dx-root) { height: var(--rule-strong); border: 0; margin: var(--space-4) 0; background: var(--color-divider); }
:where(.dx-root) .grayscale, .grayscale:where(.dx-root) { filter: grayscale(1) contrast(1.08); }
:where(.dx-root) .dx-kicker, .dx-kicker:where(.dx-root) {
  font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-accent-text);
}
:where(.dx-root) .visually-hidden, .visually-hidden:where(.dx-root) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px;
}

/* ── Botones ──────────────────────────────────────────────────────────────
   v2: un alto por densidad (--target: 44 px, 56 en data-density="pos"), sin borde (el secundario
   lleva un filete interior), etiqueta a 15 px/700, CTA de 72 px. El relleno de acento es solo de
   .btn-primary: una por pantalla. */

:where(.dx-root) .btn {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--space-2);
  min-height: var(--target); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--color-text);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.2; font-weight: 700;
  text-align: left; text-decoration: none; cursor: pointer; user-select: none;
}
:where(.dx-root) .btn svg { display: block; flex: none; }
/* Deshabilitado legible en los dos temas y en todas las variantes: relleno neutro y texto
   secundario (≥4,5:1), sin opacidad ni filete (revisión S06 tanda 6: S04 lo copiaba en tres hojas). */
:where(.dx-root) .btn:disabled,
:where(.dx-root) .btn[aria-disabled="true"] {
  opacity: 1; cursor: not-allowed; background: var(--color-surface); color: var(--color-text-muted); box-shadow: none;
}
:where(.dx-root) .btn-primary { background: var(--color-accent-solid); color: var(--color-on-accent); }
:where(.dx-root) .btn-primary:hover:not(:disabled) { background: var(--color-accent-solid-hover); }
:where(.dx-root) .btn-primary:active:not(:disabled) { background: var(--color-accent-solid-active); }
:where(.dx-root) .btn-secondary { box-shadow: inset 0 0 0 1px var(--color-border); }
:where(.dx-root) .btn-secondary:hover:not(:disabled),
:where(.dx-root) .btn-ghost:hover:not(:disabled),
:where(.dx-root) .btn-tonal:hover:not(:disabled) { background: var(--color-hover); }
:where(.dx-root) .btn-secondary:active:not(:disabled),
:where(.dx-root) .btn-ghost:active:not(:disabled),
:where(.dx-root) .btn-tonal:active:not(:disabled) { background: var(--color-pressed); }
/* Herramientas repetitivas sobre el papel: −, +, Precio, Dto. */
:where(.dx-root) .btn-tonal { background: var(--color-surface); }
/* Acción secundaria dentro de un panel: sin relleno ni borde y en color de texto (antes en acento). */
:where(.dx-root) .btn-ghost { color: var(--color-text); padding-inline: var(--space-3); }
:where(.dx-root) .btn-danger { background: var(--color-danger-tint); color: var(--color-danger); }
:where(.dx-root) .btn-danger:active:not(:disabled) { box-shadow: inset 0 0 0 1px currentColor; }
:where(.dx-root) .btn-icon { width: var(--target); padding: 0; justify-content: center; }
:where(.dx-root) .btn-block { display: flex; width: 100%; }
/* CTA de TPV («Cobrar», «Enviar a cocina»): 72 px, etiqueta a la izquierda e importe (.btn-amount) a la derecha. */
:where(.dx-root) .btn-lg {
  display: flex; width: 100%; min-height: var(--target-cta); justify-content: space-between;
  padding: 0 var(--space-5); font-size: 18px; font-weight: 800;
}
:where(.dx-root) .btn-amount { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ── Etiquetas ────────────────────────────────────────────────────────── */

:where(.dx-root) .tag {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 24px; padding: 0 var(--space-2);
  font-size: 13px; line-height: 1; font-weight: 700; background: var(--color-surface); color: var(--color-text);
}
:where(.dx-root) .tag-accent,
:where(.dx-root) .tag-accent-2 { background: var(--color-accent-tint); color: var(--color-accent-tint-text); }
:where(.dx-root) .tag-neutral { background: var(--color-surface); color: var(--color-text); }
:where(.dx-root) .tag-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--color-accent-text); color: var(--color-accent-text); }
:where(.dx-root) .tag-success { background: var(--color-success-tint); color: var(--color-success); }
:where(.dx-root) .tag-warning { background: var(--color-warning-tint); color: var(--color-warning); }
:where(.dx-root) .tag-danger { background: var(--color-danger-tint); color: var(--color-danger); }

/* ── Formularios ──────────────────────────────────────────────────────── */

:where(.dx-root) .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
:where(.dx-root) .field > label,
:where(.dx-root) .field-label { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--color-text); }
:where(.dx-root) .field-hint { font-size: 13px; line-height: 18px; color: var(--color-text-muted); }
/* .hint: nota suelta bajo un control fuera de un campo (CashOperationsCard, administración). Los componentes que
   ya la definen en su .razor.css mantienen la suya, que gana por especificidad. */
:where(.dx-root) .hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--color-text-muted); }
:where(.dx-root) .field-error { display: flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 18px; font-weight: 700; color: var(--color-danger); }
:where(.dx-root) .field-error .dx-icon { width: 16px; height: 16px; }
/* Campo de texto: sobre el papel (color-raised), filete interior de 1 px y 16 px para que el móvil no haga zoom. */
:where(.dx-root) .input {
  width: 100%; min-height: var(--target); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md);
  font: inherit; font-size: 16px; line-height: 22px; color: var(--color-text); caret-color: var(--color-accent-text);
  background: var(--color-raised); box-shadow: inset 0 0 0 1px var(--color-border);
}
:where(.dx-root) .input:hover { box-shadow: inset 0 0 0 1px var(--color-text); }
:where(.dx-root) .input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--color-danger); }
:where(.dx-root) .input::placeholder { color: var(--color-text-muted); opacity: 1; }
:where(.dx-root) textarea.input { min-height: 90px; padding-block: var(--space-2); resize: vertical; }
/* Importes y cantidades: cifras tabulares a la derecha (con inputmode="decimal"). */
:where(.dx-root) .input-num { font-variant-numeric: tabular-nums; text-align: right; }

:where(.dx-root) .radio,
.radio:where(.dx-root) { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target); cursor: pointer; font-size: 14px; }
:where(.dx-root) .radio input,
.radio:where(.dx-root) input,
:where(.dx-root) .seg-opt input,
.seg-opt:where(.dx-root) input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
:where(.dx-root) .radio .dot,
.radio:where(.dx-root) .dot { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--color-border); }
:where(.dx-root) .radio:hover .dot,
.radio:hover:where(.dx-root) .dot { border-color: var(--color-accent-text); }
:where(.dx-root) .radio input:checked + .dot,
.radio:where(.dx-root) input:checked + .dot {
  border-color: var(--color-accent-solid); background: var(--color-accent-solid);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
:where(.dx-root) .radio input:focus-visible + .dot,
.radio:where(.dx-root) input:focus-visible + .dot { outline: var(--focus-ring); outline-offset: 2px; }
/* Casilla: la etiqueta entera es el objetivo táctil (--target: 44 px; 56 en TPV) y la casilla mide 22 px,
   con el color de acento. */

:where(.dx-root) .check {
  /* min-width: una casilla sin texto (columna «En la red» de una tabla) también ofrece el objetivo entero. */
  display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--target); min-width: var(--target);
  cursor: pointer; font-size: 15px; font-weight: 600; color: var(--color-text);
}
:where(.dx-root) .check input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--color-accent-solid); }
:where(.dx-root) .check input[type="checkbox"]:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
/* Segmentado (2 a 4 opciones): la elegida va en tinta, no en acento, para que el acento siga señalando la
   acción principal. Cada opción mide --target (bundle.css da --target − 4 px dentro del relleno de 2 px; la
   validación rápida del rediseño exige 56 px a todo control de TPV). */
:where(.dx-root) .seg { display: inline-flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; padding: 2px; background: var(--color-surface); }
:where(.dx-root) .seg-strong { gap: 0; padding: 0; flex-wrap: nowrap; overflow-x: auto; background: transparent; border: var(--rule-strong) solid var(--color-text); }
:where(.dx-root) .seg-opt {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--target); min-width: var(--target);
  padding: 0 var(--space-4); border: 0; background: transparent; color: var(--color-text);
  font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
:where(.dx-root) .seg-strong > .seg-opt { flex: 1 0 auto; }
:where(.dx-root) .seg-strong > .seg-opt + .seg-opt { border-left: 1px solid var(--color-border); }
:where(.dx-root) .seg-opt:hover { background: var(--color-hover); }
:where(.dx-root) .seg-opt:has(input:checked),
:where(.dx-root) .seg-opt[aria-pressed="true"],
:where(.dx-root) .seg-opt[aria-checked="true"] {
  background: var(--color-fill-inverse); color: var(--color-on-fill-inverse);
}
:where(.dx-root) .seg-opt:has(input:focus-visible),
:where(.dx-root) .seg-opt:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }

/* ── Tarjetas y métricas ──────────────────────────────────────────────── */
:where(.dx-root) .card,
.card:where(.dx-root) {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
/* Un botón suelto dentro de la tarjeta no se estira a todo su ancho (.btn-block si se quiere). */
:where(.dx-root) .card > :is(.btn, button):not(.btn-block),
.card:where(.dx-root) > :is(.btn, button):not(.btn-block) { align-self: flex-start; }
:where(.dx-root) .card-kicker,
.card-kicker:where(.dx-root) { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-text); }
:where(.dx-root) .card-title,
.card-title:where(.dx-root) { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
:where(.dx-root) .card-body,
.card-body:where(.dx-root) { margin: 0; font-size: 13px; flex: 1; }
:where(.dx-root) .card-meta,
.card-meta:where(.dx-root) { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-xs); color: var(--color-text-muted); }
:where(.dx-root) .elev-sm,
.elev-sm:where(.dx-root) { box-shadow: var(--shadow-sm); }
:where(.dx-root) .elev-md,
.elev-md:where(.dx-root) { box-shadow: var(--shadow-md); }
:where(.dx-root) .elev-lg,
.elev-lg:where(.dx-root) { box-shadow: var(--shadow-lg); }
/* Franja de KPIs (Sarea «Resumen de red», Taberna «Cierre»): celdas iguales con reglas verticales. */
:where(.dx-root) .dx-metrics,
.dx-metrics:where(.dx-root) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  border-bottom: var(--rule-strong) solid var(--color-divider); overflow: hidden;
}
:where(.dx-root) .dx-metric,
.dx-metric:where(.dx-root) {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 18px 24px;
  /* Reglas a la derecha y abajo de cada celda; el contenedor recorta las exteriores,
     así la franja queda regular aunque pase a 3+2 o 2+2+1. */
  box-shadow: 1px 0 0 var(--color-divider), 0 1px 0 var(--color-divider);
}
:where(.dx-root) .dx-metric-label,
.dx-metric-label:where(.dx-root) { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
:where(.dx-root) .dx-metric-value,
.dx-metric-value:where(.dx-root) {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
:where(.dx-root) .dx-metric-delta,
.dx-metric-delta:where(.dx-root) { font-size: 12px; font-weight: 700; color: var(--color-text); }
:where(.dx-root) .dx-metric-delta[data-trend="up"],
.dx-metric-delta[data-trend="up"]:where(.dx-root) { color: var(--color-success); }
:where(.dx-root) .dx-metric-delta[data-trend="down"],
.dx-metric-delta[data-trend="down"]:where(.dx-root) { color: var(--color-danger); }
/* Barra de proporción (Margen de DxMetrica, columnas de las tablas de Sarea): un solo color, chart-principal,
   con el ancho en % y relativa al máximo. */
:where(.dx-root) .dx-bar,
.dx-bar:where(.dx-root) { display: block; position: relative; height: 6px; margin-top: var(--space-2); background: var(--color-surface); }
:where(.dx-root) .dx-bar > span,
.dx-bar:where(.dx-root) > span { display: block; height: 100%; background: var(--chart-principal); }

/* ── Estructura: rail, barra superior, navegación ─────────────────────── */
:where(.dx-root) .dx-shell,
.dx-shell:where(.dx-root) { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); min-height: 100dvh; }
/* Márgenes seguros (Android edge-to-edge, muescas). Solo en el contenedor superior de cada host
   (no en .dx-shell, que puede ir anidada bajo una barra): requiere viewport-fit=cover; 0 en escritorio. */
.dx-safe-area { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
:where(.dx-root) .dx-rail,
.dx-rail:where(.dx-root) { display: flex; flex-direction: column; background: var(--color-chrome); color: var(--color-chrome-text); min-width: 0; }
:where(.dx-root) .dx-rail-brand,
.dx-rail-brand:where(.dx-root) {
  display: flex; align-items: center; min-height: var(--topbar-height); padding: 0 var(--space-4);
  border-bottom: var(--rule-thin) solid var(--color-chrome-rule);
}
:where(.dx-root) .dx-rail-item,
.dx-rail-item:where(.dx-root) {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-2);
  min-height: 84px; padding: var(--space-3); border: 0; border-bottom: var(--rule-thin) solid var(--color-chrome-rule);
  background: transparent; color: var(--color-chrome-muted); text-decoration: none; cursor: pointer;
  font-size: var(--font-size-xs); line-height: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  max-width: 100%; overflow-wrap: break-word; hyphens: auto;
}
:where(.dx-root) .dx-rail-item svg,
.dx-rail-item:where(.dx-root) svg { width: 24px; height: 24px; color: var(--color-chrome-text); }
:where(.dx-root) .dx-rail-item:hover,
.dx-rail-item:hover:where(.dx-root) { background: color-mix(in srgb, var(--color-chrome-text) 10%, transparent); color: var(--color-chrome-text); }
/* Sección activa: el acento de carril (paso 500 del producto) con texto tinta en los dos temas.
   Antes era el relleno de acento: en Papel, Taberna daba 2,5:1 contra el rail. */
:where(.dx-root) .dx-rail-item[aria-current="page"],
.dx-rail-item[aria-current="page"]:where(.dx-root),
:where(.dx-root) .dx-rail-item.active,
.dx-rail-item.active:where(.dx-root) { background: var(--color-accent-chrome); color: var(--dx-ink); }
:where(.dx-root) .dx-rail-item[aria-current="page"] svg,
.dx-rail-item[aria-current="page"]:where(.dx-root) svg,
:where(.dx-root) .dx-rail-item.active svg,
.dx-rail-item.active:where(.dx-root) svg { color: var(--dx-ink); }
:where(.dx-root) .dx-rail-item:focus-visible,
.dx-rail-item:focus-visible:where(.dx-root) { outline: 2px solid var(--color-chrome-text); outline-offset: -4px; }
:where(.dx-root) .dx-rail-badge,
.dx-rail-badge:where(.dx-root) {
  position: absolute; top: 12px; right: 12px; min-width: 20px; height: 20px; padding: 0 4px;
  display: grid; place-items: center; font-size: var(--font-size-xs);
  background: var(--color-chrome-text); color: var(--color-chrome); letter-spacing: 0;
}
:where(.dx-root) .dx-topbar,
.dx-topbar:where(.dx-root) {
  display: flex; align-items: center; gap: var(--space-4); min-height: var(--topbar-height);
  padding: 0 var(--space-5); border-bottom: var(--rule-strong) solid var(--color-divider);
}
:where(.dx-root) .dx-topbar-title,
.dx-topbar-title:where(.dx-root) {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 25px; line-height: 30px;
  letter-spacing: -0.015em; white-space: nowrap; margin: 0;
}
:where(.dx-root) .dx-topbar-end,
.dx-topbar-end:where(.dx-root) {
  margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; min-width: 0;
  gap: var(--space-2) var(--space-3); font-variant-numeric: tabular-nums;
}
:where(.dx-root) .nav,
.nav:where(.dx-root) { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: var(--rule-strong) solid var(--color-divider); }
:where(.dx-root) .nav-brand,
.nav-brand:where(.dx-root) { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; }
:where(.dx-root) .nav a,
.nav:where(.dx-root) a { color: inherit; text-decoration: none; font-size: 14px; }
:where(.dx-root) .nav a:hover,
.nav:where(.dx-root) a:hover,
:where(.dx-root) .nav a[aria-current='page'],
.nav:where(.dx-root) a[aria-current='page'] { color: var(--color-accent-text); }
/* Móvil y pantallas estrechas (< 768 px): el rail pasa a navegación inferior (petición del
   propietario, 26/09). Barra fija al pie con icono y etiqueta, objetivos ≥ 48 px y margen seguro
   inferior. La carcasa reserva su alto en --dx-nav-inferior (padding-bottom); los pies fijos
   (.dx-sticky-foot) se apoyan encima. Con el teclado abierto (data-dx-teclado en <html>, dirutxi.js)
   la barra se oculta para no tapar el campo. Escritorio y tablet horizontal: rail lateral. */
@media (max-width: 767px) {
  :where(.dx-root) .dx-shell,
.dx-shell:where(.dx-root) {
    --dx-nav-alto: 60px;
    --dx-nav-inferior: calc(var(--dx-nav-alto) + env(safe-area-inset-bottom, 0px));
    --dx-pie-inset: 0px;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    padding-bottom: var(--dx-nav-inferior);
  }
  :where(.dx-root) .dx-rail,
.dx-rail:where(.dx-root) {
    position: fixed; inset: auto 0 0 0; z-index: 5;
    flex-direction: row; min-height: var(--dx-nav-alto); padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
    box-shadow: 0 calc(-1 * var(--rule-strong)) 0 var(--color-chrome-rule);
  }
  /* Indicio de que hay más secciones (solo si desbordan, dirutxi.js): se desvanecen hacia la derecha. */
  :where(.dx-root) .dx-rail[data-dx-mas], .dx-rail[data-dx-mas]:where(.dx-root) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
  :where(.dx-root) .dx-rail > *, .dx-rail:where(.dx-root) > * { scroll-snap-align: start; flex: none; }
  /* La marca ya está en la barra superior: abajo solo secciones. */
  :where(.dx-root) .dx-rail-brand, .dx-rail-brand:where(.dx-root) { display: none; }
  :where(.dx-root) .dx-rail-item,
.dx-rail-item:where(.dx-root) {
    flex: 1 0 auto; min-width: 72px; min-height: var(--dx-nav-alto); padding: var(--space-1) var(--space-2);
    align-items: center; justify-content: center; gap: 4px; text-align: center; border-bottom: 0;
    white-space: nowrap; overflow-wrap: normal; hyphens: manual; letter-spacing: 0.01em;
  }
  :where(.dx-root) .dx-rail-item svg, .dx-rail-item:where(.dx-root) svg { width: 24px; height: 24px; flex: none; }
  /* Activo: fondo de acento de carril y además una franja superior (no depende solo del color). */
  :where(.dx-root) .dx-rail-item:is([aria-current="page"], .active),
  .dx-rail-item:is([aria-current="page"], .active):where(.dx-root) { box-shadow: inset 0 3px 0 var(--dx-ink); }
  :where(.dx-root) .dx-rail-badge,
.dx-rail-badge:where(.dx-root) { top: 4px; right: 4px; }
  /* Dentro de .dx-safe-area el host ya reserva el margen seguro inferior: la carcasa solo la barra. */
  .dx-safe-area :where(.dx-root) .dx-shell, .dx-safe-area .dx-shell:where(.dx-root) { padding-bottom: var(--dx-nav-alto); }
  [data-dx-teclado] .dx-safe-area :where(.dx-root) .dx-shell, [data-dx-teclado] .dx-safe-area .dx-shell:where(.dx-root) { padding-bottom: 0; }
  /* Teclado en pantalla: fuera la barra y su reserva. */
  [data-dx-teclado] :where(.dx-root) .dx-shell, [data-dx-teclado] .dx-shell:where(.dx-root) { --dx-nav-inferior: 0px; --dx-pie-inset: env(safe-area-inset-bottom, 0px); }
  [data-dx-teclado] :where(.dx-root) .dx-rail, [data-dx-teclado] .dx-rail:where(.dx-root) { display: none; }
  :where(.dx-root) .dx-topbar,
.dx-topbar:where(.dx-root) { padding: var(--space-2) var(--space-4); flex-wrap: wrap; min-height: 56px; }
  :where(.dx-root) .dx-topbar-title,
.dx-topbar-title:where(.dx-root) { font-size: 18px; }
}
@media (min-width: 768px) {
  /* --dx-fit-height: un host con barra propia encima (satélite, principal) pone 100% en el hijo y
     da al contenedor height:100dvh; display:flex; flex-direction:column (docs/diseno/README.md). */
  :where(.dx-root) .dx-shell[data-fit], .dx-shell[data-fit]:where(.dx-root) { height: var(--dx-fit-height, 100dvh); min-height: 0; overflow: hidden; }
  :where(.dx-root) .dx-shell[data-fit] > *, .dx-shell[data-fit]:where(.dx-root) > * { min-height: 0; overflow-y: auto; }
}
/* Pie fijo dentro de una columna desplazable (total + «Cobrar»). */
:where(.dx-root) .dx-sticky-foot, .dx-sticky-foot:where(.dx-root) {
  position: sticky; bottom: var(--dx-nav-inferior, env(safe-area-inset-bottom, 0px)); z-index: 2; background: inherit;
  border-top: var(--rule-strong) solid var(--color-divider);
}
/* Variante de página: por debajo de 1024 px (sin data-fit) el pie se fija a la ventana, para que
   «Cobrar» esté siempre a la vista aunque la cuenta quede debajo del catálogo. La pantalla reserva
   su alto al final (padding-bottom) para no tapar contenido. */
@media (max-width: 1023px) {
  :where(.dx-root) .dx-sticky-foot[data-scope="page"], .dx-sticky-foot[data-scope="page"]:where(.dx-root) {
    position: fixed; inset-inline: 0; bottom: var(--dx-nav-inferior, 0px); padding-bottom: var(--dx-pie-inset, env(safe-area-inset-bottom, 0px));
    background: var(--color-surface); box-shadow: 0 -1px 0 var(--color-divider);
  }
}

/* Bloque de usuario al pie del rail (nombre, rol y «Bloquear»), como en las tres fuentes. */
:where(.dx-root) .dx-rail-user, .dx-rail-user:where(.dx-root) {
  margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
  padding: var(--space-3) 6px; border-top: var(--rule-strong) solid var(--color-chrome-rule);
  font-size: var(--font-size-xs); color: var(--color-chrome-muted); overflow-wrap: anywhere;
}
:where(.dx-root) .dx-rail-avatar, .dx-rail-avatar:where(.dx-root) {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  background: var(--color-accent-chrome); color: var(--dx-ink); font-weight: 800; font-size: 14px;
}
:where(.dx-root) .dx-rail-user strong, .dx-rail-user:where(.dx-root) strong { color: var(--color-chrome-text); font-size: 13px; }
:where(.dx-root) .dx-rail-user button, .dx-rail-user:where(.dx-root) button,
:where(.dx-root) .dx-rail-user a, .dx-rail-user:where(.dx-root) a {
  min-height: var(--target-min); padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--color-chrome-text); font: inherit; font-size: 13px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
:where(.dx-root) .dx-rail-user :is(button, a):focus-visible, .dx-rail-user:where(.dx-root) :is(button, a):focus-visible { outline: 2px solid var(--color-chrome-text); outline-offset: 2px; }
:where(.dx-root) [data-density="pos"] .dx-rail-user :is(button, a), [data-density="pos"]:where(.dx-root) .dx-rail-user :is(button, a) { min-height: var(--target-pos); }
/* En móvil el rail es una barra horizontal: el usuario va en Ajustes o en la barra superior. */
@media (max-width: 767px) {
  :where(.dx-root) .dx-rail-user, .dx-rail-user:where(.dx-root) { display: none; }
}

/* ── Marca: «Dirutxi» + punto cuadrado 0,2 em (Marca v2) ─────────────── */
:where(.dx-root) .dx-brand,
.dx-brand:where(.dx-root) {
  display: inline-flex; align-items: baseline; font-family: var(--font-heading);
  font-weight: var(--font-display-weight); letter-spacing: -0.02em; line-height: 1; white-space: pre;
}
:where(.dx-root) .dx-brand-dot,
.dx-brand-dot:where(.dx-root) {
  display: inline-block; flex: none; width: 0.2em; height: 0.2em; margin-left: 0.04em;
  background: var(--color-brand-dot);
}
:where(.dx-root) .dx-brand-stack,
.dx-brand-stack:where(.dx-root) { display: inline-flex; flex-direction: column; gap: 0.04em; line-height: 0.9; }
:where(.dx-root) .dx-brand-icon,
.dx-brand-icon:where(.dx-root) { display: inline-flex; align-items: flex-end; padding: 0.12em 0.14em; background: var(--dx-ink); color: #ffffff; }
/* Sobre el rail (tinta en los dos temas) el punto es el acento de carril. */
:where(.dx-root) .dx-rail-brand .dx-brand { --color-brand-dot: var(--color-accent-chrome); }

/* ── Pestañas (categorías, zonas) ─────────────────────────────────────────
   v2: teselas en color-surface separadas por 4 px; la activa va en tinta (color-fill-inverse), no en
   acento. Si no caben, se desplazan en horizontal (nunca pasan a dos líneas). */

:where(.dx-root) .dx-tabs {
  display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: thin;
  padding-block: 2px; margin-block: -2px; /* deja sitio a las pestañas al desplazarse */
}
:where(.dx-root) .dx-tab {
  flex: none; display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--space-2);
  min-height: var(--target); padding: 0 var(--space-4); border: 0;
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
  font-size: 15px; font-weight: 700; white-space: nowrap; text-align: left;
}
:where(.dx-root) .dx-tab:hover { background: var(--color-hover); }
:where(.dx-root) .dx-tab:active { background: var(--color-pressed); }
:where(.dx-root) .dx-tab[aria-selected="true"],
:where(.dx-root) .dx-tab[aria-current="page"] { background: var(--color-fill-inverse); color: var(--color-on-fill-inverse); }
:where(.dx-root) .dx-tab[aria-current="page"]:hover { background: var(--color-fill-inverse); }
:where(.dx-root) .dx-tab:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
/* Número útil (mesas ocupadas de una zona), no numeración de pestañas. .dx-tab-count es el nombre de DxPestanas. */
:where(.dx-root) .dx-tab-n,
:where(.dx-root) .dx-tab-count { font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; }

/* ── Tablas ───────────────────────────────────────────────────────────── */
:where(.dx-root) .dx-table-wrap,
.dx-table-wrap:where(.dx-root) { width: 100%; overflow-x: auto; position: relative; /* contains absolutely positioned (visually-hidden) text so it cannot widen the page */ }
:where(.dx-root) .table,
.table:where(.dx-root) { width: 100%; border-collapse: collapse; font-size: 14px; }
:where(.dx-root) .table caption,
.table:where(.dx-root) caption { text-align: left; font-weight: 700; padding: var(--space-2) 0; }
:where(.dx-root) .table th,
.table:where(.dx-root) th {
  text-align: left; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-muted);
  padding: var(--space-2); border-bottom: var(--rule-strong) solid var(--color-divider);
}
:where(.dx-root) .table td,
.table:where(.dx-root) td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
:where(.dx-root) .table tbody tr:hover,
.table:where(.dx-root) tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
:where(.dx-root) .table .num,
.table:where(.dx-root) .num,
:where(.dx-root) .table [data-num],
.table:where(.dx-root) [data-num] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.dx-root) .table tfoot td,
.table:where(.dx-root) tfoot td { font-weight: 800; border-top: var(--rule-strong) solid var(--color-divider); border-bottom: 0; }
:where(.dx-root) .table tr[aria-selected="true"],
.table:where(.dx-root) tr[aria-selected="true"] { background: var(--color-fill-inverse); color: var(--color-on-fill-inverse); box-shadow: inset 4px 0 0 var(--color-accent-solid); }

/* ── Listas (líneas de ticket, citas, facturas) ───────────────────────── */
:where(.dx-root) .dx-list,
.dx-list:where(.dx-root) { list-style: none; margin: 0; padding: 0; }
:where(.dx-root) .dx-list-row,
.dx-list-row:where(.dx-root) {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  width: 100%; min-height: var(--target-min); padding: 10px var(--space-4); border: 0;
  border-bottom: 1px solid var(--color-divider); background: transparent; color: inherit;
  text-align: left; font: inherit;
}
:where(.dx-root) button.dx-list-row,
button.dx-list-row:where(.dx-root),
:where(.dx-root) a.dx-list-row,
a.dx-list-row:where(.dx-root) { cursor: pointer; text-decoration: none; }
:where(.dx-root) button.dx-list-row:hover,
button.dx-list-row:hover:where(.dx-root),
:where(.dx-root) a.dx-list-row:hover,
a.dx-list-row:hover:where(.dx-root) { background: var(--color-hover); }
:where(.dx-root) .dx-list-row[aria-selected="true"],
.dx-list-row[aria-selected="true"]:where(.dx-root),
:where(.dx-root) .dx-list-row[aria-current="true"],
.dx-list-row[aria-current="true"]:where(.dx-root) { background: var(--color-fill-inverse); color: var(--color-on-fill-inverse); box-shadow: inset 4px 0 0 var(--color-accent-solid); }
:where(.dx-root) .dx-list-row:focus-visible,
.dx-list-row:focus-visible:where(.dx-root) { outline: var(--focus-ring); outline-offset: -3px; }
:where(.dx-root) .dx-list-lead,
.dx-list-lead:where(.dx-root) { font-weight: 700; font-variant-numeric: tabular-nums; }
:where(.dx-root) .dx-list-main,
.dx-list-main:where(.dx-root) { min-width: 0; overflow-wrap: anywhere; }
:where(.dx-root) .dx-list-sub,
.dx-list-sub:where(.dx-root) { display: block; font-size: 12px; color: var(--color-text-muted); }
:where(.dx-root) .dx-list-row[aria-selected="true"] .dx-list-sub,
.dx-list-row[aria-selected="true"]:where(.dx-root) .dx-list-sub,
:where(.dx-root) .dx-list-row[aria-current="true"] .dx-list-sub,
.dx-list-row[aria-current="true"]:where(.dx-root) .dx-list-sub { color: inherit; }
:where(.dx-root) .dx-list-end,
.dx-list-end:where(.dx-root) { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
:where(.dx-root) [data-density="pos"] .dx-list-row,
[data-density="pos"]:where(.dx-root) .dx-list-row { min-height: var(--target-pos); }

/* ── Teclado numérico (PIN, efectivo, comensales) ─────────────────────────
   v2: teclas de 64 px en color-surface con hueco de 8 px, dígitos a la izquierda; la de acción
   (.dx-key-ok) en acento y la de borrar (.dx-key-del) en texto secundario. Las teclas con
   data-kind="confirm|aux" (DxTeclado) se visten igual que .dx-key-ok y las auxiliares. */

:where(.dx-root) .dx-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
:where(.dx-root) .dx-keypad[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:where(.dx-root) .dx-key {
  display: flex; align-items: center; justify-content: flex-start; min-height: 64px; padding: 0 var(--space-5);
  border: 0; background: var(--color-surface); color: var(--color-text); cursor: pointer;
  font-size: 25px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums;
}
:where(.dx-root) .dx-keypad[data-columns="4"] .dx-key { min-height: var(--target-pos); padding-inline: var(--space-3); font-size: 20px; }
:where(.dx-root) .dx-key:hover { background: var(--color-hover); }
:where(.dx-root) .dx-key:active { background: var(--color-pressed); }
:where(.dx-root) .dx-key[data-kind="aux"] { font-size: 14px; }
:where(.dx-root) .dx-key-ok,
:where(.dx-root) .dx-key[data-kind="confirm"] { background: var(--color-accent-solid); color: var(--color-on-accent); font-size: 18px; font-weight: 800; }
:where(.dx-root) .dx-key-ok:hover,
:where(.dx-root) .dx-key[data-kind="confirm"]:hover { background: var(--color-accent-solid-hover); }
:where(.dx-root) .dx-key-ok:active,
:where(.dx-root) .dx-key[data-kind="confirm"]:active { background: var(--color-accent-solid-active); }
:where(.dx-root) .dx-key-del { color: var(--color-text-muted); }
:where(.dx-root) .dx-key:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
:where(.dx-root) .dx-key:disabled { opacity: 0.45; cursor: not-allowed; }
/* PIN: cada cifra escrita rellena un punto cuadrado de acento. .dx-pin-dot[data-lleno] es el marcado
   v2 (DxPin); los satélites aún pintan <span data-filled> dentro de .dx-pin y reciben el mismo aspecto. */
:where(.dx-root) .dx-pin { display: flex; gap: var(--space-3); justify-content: flex-start; margin-bottom: var(--space-4); }
:where(.dx-root) .dx-pin > span,
:where(.dx-root) .dx-pin-dot { width: 20px; height: 20px; box-shadow: inset 0 0 0 2px var(--color-border); }
:where(.dx-root) .dx-pin > span[data-filled="true"],
:where(.dx-root) .dx-pin-dot[data-lleno] { background: var(--color-accent); box-shadow: none; }
:where(.dx-root) .dx-pin[data-error] > span,
:where(.dx-root) .dx-pin[data-error] .dx-pin-dot { box-shadow: inset 0 0 0 2px var(--color-danger); }

/* ── Pictograma de alérgeno (DxAlergeno, alergenos.svg) ───────────────
   Marco cuadrado de 1,5 px (radio 0) y glifo al 78 %, en currentColor. Nunca va solo: nombre al lado. */
.dx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:where(.dx-root) .dx-allergen,
.dx-allergen:where(.dx-root) { display: inline-flex; align-items: center; gap: var(--space-2); --dx-allergen: 28px; }
:where(.dx-root) .dx-allergen[data-size="24"] { --dx-allergen: 24px; }
:where(.dx-root) .dx-allergen[data-size="48"] { --dx-allergen: 48px; }
:where(.dx-root) .dx-allergen-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  width: var(--dx-allergen); height: var(--dx-allergen); border: 1.5px solid currentColor; border-radius: 0;
}
:where(.dx-root) .dx-allergen-icon svg { width: 78%; height: 78%; }

/* ── Estado vacío y carga (DxVacio) ───────────────────────────────────────
   v2: el punto hueco de 3 px de acento, un título y una línea; sin ilustraciones. Carga: el punto
   se estira hasta el ancho y vuelve. Para avisos en línea sigue DxBanner Estado="Vacio". */

:where(.dx-root) .dx-empty { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-8) var(--space-6); max-width: 440px; color: var(--color-text); }
:where(.dx-root) .dx-empty-dot { width: 28px; height: 28px; box-shadow: inset 0 0 0 3px var(--color-accent); }
:where(.dx-root) .dx-empty-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 800; letter-spacing: -.01em; }
:where(.dx-root) .dx-empty-text { font-size: 15px; line-height: 22px; color: var(--color-text-muted); }
:where(.dx-root) .dx-empty-text > :last-child { margin-bottom: 0; }
:where(.dx-root) .dx-empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
:where(.dx-root) .dx-empty[data-size="sm"] { padding: var(--space-5) var(--space-3); gap: var(--space-2); }
:where(.dx-root) .dx-empty[data-size="sm"] .dx-empty-dot { width: 20px; height: 20px; }
:where(.dx-root) .dx-loading { display: grid; gap: var(--space-3); padding: var(--space-8) var(--space-6); max-width: 440px; }
:where(.dx-root) .dx-loadbar { position: relative; height: 12px; }
:where(.dx-root) .dx-loadbar::before {
  content: ""; position: absolute; left: 0; top: 0; height: 12px; width: 12px; background: var(--color-accent);
  animation: dx-estira 1400ms var(--ease-out) infinite;
}
@keyframes dx-estira { 0% { width: 12px; } 50% { width: 100%; } 100% { width: 12px; } }

/* ── Aviso en línea (DxBanner) ─────────────────────────────────────────────
   v2: sin franja lateral de color; el icono, el título y el tinte de fondo dicen el estado. Los
   códigos data-state de DxBanner (error, offline, fiscal-lock, success, info, loading, empty) y los
   data-estado de la especificación (error, bloqueo, aviso, exito) pintan lo mismo. */

:where(.dx-root) .dx-banner {
  --dx-banner-tono: var(--color-info);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--color-info-tint); color: var(--color-text);
}
:where(.dx-root) .dx-banner-icon,
:where(.dx-root) .dx-banner > .dx-icon { width: 24px; height: 24px; margin-top: 1px; flex: none; color: var(--dx-banner-tono); }
:where(.dx-root) .dx-banner-title { display: block; font-size: 15px; line-height: 20px; font-weight: 700; }
:where(.dx-root) .dx-banner-body,
:where(.dx-root) .dx-banner-text { font-size: 14px; line-height: 20px; }
:where(.dx-root) .dx-banner-body > :last-child { margin-bottom: 0; }
:where(.dx-root) .dx-banner-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
:where(.dx-root) .dx-banner .btn-secondary { background: var(--color-raised); }
:where(.dx-root) .dx-banner[data-state="error"],
:where(.dx-root) .dx-banner[data-state="fiscal-lock"],
:where(.dx-root) .dx-banner[data-estado="error"],
:where(.dx-root) .dx-banner[data-estado="bloqueo"] {
  --dx-banner-tono: var(--color-danger); background: var(--color-danger-tint);
}
:where(.dx-root) .dx-banner[data-state="offline"],
:where(.dx-root) .dx-banner[data-estado="aviso"] { --dx-banner-tono: var(--color-warning); background: var(--color-warning-tint); }
:where(.dx-root) .dx-banner[data-state="success"],
:where(.dx-root) .dx-banner[data-estado="exito"] { --dx-banner-tono: var(--color-success); background: var(--color-success-tint); }
:where(.dx-root) .dx-banner[data-state="empty"] { --dx-banner-tono: var(--color-text-muted); background: var(--color-surface); padding-block: var(--space-6); }
:where(.dx-root) .dx-banner .dx-spinner.dx-banner-icon { width: 20px; height: 20px; margin: 3px; }
@media (max-width: 480px) { :where(.dx-root) .dx-banner { grid-template-columns: auto minmax(0, 1fr); } :where(.dx-root) .dx-banner-actions { grid-column: 1 / -1; } }

:where(.dx-root) .dx-spinner,
.dx-spinner:where(.dx-root) {
  display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor;
  border-right-color: transparent; animation: dx-spin 0.8s linear infinite;
}
@keyframes dx-spin { to { transform: rotate(360deg); } }
:where(.dx-root) .dx-skeleton,
.dx-skeleton:where(.dx-root) { background: var(--color-surface); min-height: 1em; animation: dx-pulse 1.4s ease-in-out infinite; }
@keyframes dx-pulse { 50% { opacity: 0.55; } }

/* ── Diálogo ──────────────────────────────────────────────────────────── */
:where(.dx-root) .dialog-backdrop,
.dialog-backdrop:where(.dx-root) {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  padding: var(--space-4); background: var(--color-backdrop);
}
:where(.dx-root) .dialog,
.dialog:where(.dx-root) {
  width: min(440px, 100%); max-height: calc(100dvh - 2 * var(--space-4));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-lg);
}
/* El contenedor recibe el foco al abrir (dirutxi.js) solo para que el lector anuncie el título:
   no es interactivo, así que no se pinta anillo sobre todo el diálogo. */
:where(.dx-root) .dialog:focus,
.dialog:focus:where(.dx-root) { outline: none; }
:where(.dx-root) .dialog[data-size="lg"],
.dialog[data-size="lg"]:where(.dx-root) { width: min(880px, 100%); }
:where(.dx-root) .dialog-head,
.dialog-head:where(.dx-root) { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--rule-strong) solid var(--color-divider); }
:where(.dx-root) .dialog-head > div,
.dialog-head:where(.dx-root) > div { flex: 1; min-width: 0; }
:where(.dx-root) .dialog-title,
.dialog-title:where(.dx-root) { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; margin: 0; }
:where(.dx-root) .dialog-body,
.dialog-body:where(.dx-root) { padding: var(--space-4) var(--space-5); font-size: 14px; overflow: auto; flex: 1; }
:where(.dx-root) .dialog-actions,
.dialog-actions:where(.dx-root) { display: grid; grid-template-columns: 1fr 2fr; border-top: var(--rule-strong) solid var(--color-divider); }
:where(.dx-root) .dialog-actions > .btn,
.dialog-actions:where(.dx-root) > .btn { min-height: 56px; width: 100%; font-size: 16px; }
:where(.dx-root) .dialog-actions > .btn:focus-visible,
.dialog-actions:where(.dx-root) > .btn:focus-visible { outline-offset: -4px; }
:where(.dx-root) .dialog-actions > .btn:first-child:not(:only-child),
.dialog-actions:where(.dx-root) > .btn:first-child:not(:only-child) { border-right: 1px solid var(--color-divider); }
:where(.dx-root) .dialog-actions > .btn:only-child,
.dialog-actions:where(.dx-root) > .btn:only-child { grid-column: 1 / -1; }
:where(.dx-root) .dialog-actions > .btn-primary,
.dialog-actions:where(.dx-root) > .btn-primary { justify-content: space-between; }
@media (max-width: 480px) {
  :where(.dx-root) .dialog-backdrop,
.dialog-backdrop:where(.dx-root) { padding: 0; align-items: end; }
  :where(.dx-root) .dialog,
.dialog:where(.dx-root),
:where(.dx-root) .dialog[data-size="lg"],
.dialog[data-size="lg"]:where(.dx-root) { width: 100%; max-height: 92dvh; }
}

/* ── Foco sobre rellenos: anillo interior en el color del texto del relleno ── */

:where(.dx-root) .btn-primary:focus-visible,
:where(.dx-root) .dx-key-ok:focus-visible,
:where(.dx-root) .dx-key[data-kind="confirm"]:focus-visible { outline: 2px solid var(--color-on-accent); outline-offset: -5px; }
:where(.dx-root) .dx-rail-item[aria-current="page"]:focus-visible,
:where(.dx-root) .dx-rail-item.active:focus-visible { outline: 2px solid var(--dx-ink); outline-offset: -5px; }
:where(.dx-root) .dx-tab[aria-selected="true"]:focus-visible,
:where(.dx-root) .dx-tab[aria-current="page"]:focus-visible,
:where(.dx-root) .seg-opt[aria-pressed="true"]:focus-visible,
:where(.dx-root) .seg-opt[aria-checked="true"]:focus-visible,
:where(.dx-root) .seg-opt:has(input:checked:focus-visible) { outline: 2px solid var(--color-on-fill-inverse); outline-offset: -5px; }
:where(.dx-root) .dx-list-row[aria-selected="true"]:focus-visible,
:where(.dx-root) .dx-list-row[aria-current="true"]:focus-visible,
:where(.dx-root) .seg-strong .seg-opt[aria-pressed="true"]:focus-visible,
:where(.dx-root) .seg-strong .seg-opt:has(input:checked:focus-visible) { outline: 2px solid var(--color-bg); outline-offset: -5px; }

/* ── Selector de tema ─────────────────────────────────────────────────── */
:where(.dx-root) .dx-theme,
.dx-theme:where(.dx-root) { display: inline-flex; flex-direction: column; gap: 4px; }
:where(.dx-root) .dx-theme .seg-opt,
.dx-theme:where(.dx-root) .seg-opt { font-size: 13px; padding-inline: 10px; gap: 6px; }
:where(.dx-root) .dx-theme-icon,
.dx-theme-icon:where(.dx-root) { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
/* En la barra superior del móvil: solo iconos de 48 px (TPV); el texto queda como nombre accesible. */
@media (max-width: 767px) {
  :where(.dx-root) .dx-topbar .dx-theme .field-label { display: none; }
  :where(.dx-root) .dx-topbar .dx-theme .seg-opt { min-width: var(--target-pos); justify-content: center; padding-inline: var(--space-2); }
  :where(.dx-root) .dx-topbar .dx-theme-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
/* Barra compacta en móvil estrecho: marca y selector de tema (sin bajar de 48 px) en una sola fila
   hasta 360 px en los satélites; .dx-topbar-extra (etiquetas informativas como «Satélite LAN») queda
   solo para lectores de pantalla. */
@media (max-width: 479px) {
  :where(.dx-root) .dx-topbar,
  .dx-topbar:where(.dx-root) { padding-inline: var(--space-3); gap: var(--space-2); }
  :where(.dx-root) .dx-topbar .dx-topbar-extra {
    position: absolute; width: 1px; height: 1px; padding: 0; border: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ── Movimiento y carga (S06, tanda 6) ───────────────────────────────
   Una sola gramática para todo el producto:
   - cambios de estado (hover, pulsado, seleccionado) en --motion-fast, solo color y borde;
   - pulsación táctil: el control baja 1 px (TPV sin hover: confirma que la tecla se ha tocado);
   - apariciones (aviso, diálogo) en --motion-base, opacidad y 4 px de desplazamiento;
   - trabajo en curso: el botón lleva aria-busy y muestra un indicador; la zona, DxBanner Cargando
     o .dx-skeleton. Nunca un spinner de página completa. */
:where(.dx-root) :is(.btn, .seg-opt, .dx-tab, .dx-rail-item, .dx-list-row, .dx-key, .input, .nav a),
:is(.btn, .seg-opt, .dx-tab, .dx-rail-item, .dx-list-row, .dx-key, .input):where(.dx-root) {
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
:where(.dx-root) :is(.btn, .seg-opt, .dx-key, .dx-tab):active:not(:disabled):not([aria-disabled="true"]),
:is(.btn, .seg-opt, .dx-key, .dx-tab):active:not(:disabled):not([aria-disabled="true"]):where(.dx-root) { transform: translateY(1px); }
:where(.dx-root) .btn[aria-busy="true"],
.btn[aria-busy="true"]:where(.dx-root) { cursor: progress; }
:where(.dx-root) .btn[aria-busy="true"]:not(:has(.dx-spinner))::after,
.btn[aria-busy="true"]:not(:has(.dx-spinner)):where(.dx-root)::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-left: auto; background: currentColor;
  animation: dx-pulso 900ms var(--ease-out) infinite alternate;
}
@keyframes dx-pulso { from { opacity: 1; } to { opacity: .25; } }
@keyframes dx-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes dx-fade { from { opacity: 0; } }
:where(.dx-root) .dx-banner, .dx-banner:where(.dx-root) { animation: dx-in var(--motion-base) var(--ease-out) both; }
:where(.dx-root) .dialog, .dialog:where(.dx-root) { animation: dx-in var(--motion-base) var(--ease-out) both; }
:where(.dx-root) .dialog-backdrop, .dialog-backdrop:where(.dx-root) { animation: dx-fade var(--motion-base) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  :where(.dx-root) *,
*:where(.dx-root),
:where(.dx-root) *::before,
:where(.dx-root) *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
}

/* Denda (F-DENDA): la cabecera de arranque junta el estado de la conexión y el rótulo de pruebas
   fiscales en dos <span> seguidos sin separador: en una línea se leían como una sola frase. */
[data-product="denda"] .pos-top .connection { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════
   Capa v2 (30/09/2026): clases nuevas de docs/diseno/fuente-2026-09-30/components/bundle.css.
   Todas bajo :where(.dx-root): las pantallas sin migrar no cambian. Toman todo color, medida y
   tipo de dirutxi-tokens.css. Tres reglas de lectura: el acento solo en la acción principal, la
   sección activa y el punto; el estado solo aparece cuando falla; nada redondeado.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Utilidades, rótulo e iconos ───────────────────────────────────────── */
:where(.dx-root) .muted { color: var(--color-text-muted); }
:where(.dx-root) .dx-rotulo {
  font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-text-muted);
}
:where(.dx-root) .dx-icon {
  width: 20px; height: 20px; flex: none; display: block;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter;
}
:where(.dx-root) .dx-icon-lg { width: 24px; height: 24px; }

/* ── El punto como contador y como marca ───────────────────────────────── */
:where(.dx-root) .dx-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px;
  background: var(--color-accent-solid); color: var(--color-on-accent);
  font-size: 14px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums;
}
:where(.dx-root) .dx-mark { display: inline-block; width: 8px; height: 8px; background: var(--color-accent); flex: none; }

/* ── Buscador ──────────────────────────────────────────────────────────── */
:where(.dx-root) .dx-search {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--target);
  padding: 0 var(--space-4); background: var(--color-surface); color: var(--color-text-muted);
}
:where(.dx-root) .dx-search:focus-within { outline: var(--focus-ring); outline-offset: 2px; }
:where(.dx-root) .dx-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--color-text);
  font-size: 16px; min-height: var(--target); outline: none;
}
:where(.dx-root) .dx-search input::placeholder { color: var(--color-text-muted); }

/* ── Tesela de producto ────────────────────────────────────────────────── */
:where(.dx-root) .dx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--space-2); }
:where(.dx-root) .dx-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3);
  min-height: var(--tile-min); padding: var(--space-3) var(--space-4); border: 0;
  background: var(--color-surface); color: var(--color-text); text-align: left; cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
:where(.dx-root) .dx-tile:hover { background: var(--color-hover); }
:where(.dx-root) .dx-tile:active { background: var(--color-pressed); transform: translateY(1px); }
:where(.dx-root) .dx-tile-name {
  font-size: 16px; line-height: 20px; font-weight: 700; padding-right: 32px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:where(.dx-root) .dx-tile-foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
:where(.dx-root) .dx-tile-price { font-size: 18px; line-height: 22px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.dx-root) .dx-tile-meta { font-size: 13px; line-height: 18px; color: var(--color-text-muted); white-space: nowrap; }
:where(.dx-root) .dx-tile .dx-count { position: absolute; top: var(--space-2); right: var(--space-2); }
:where(.dx-root) .dx-tile[aria-disabled="true"] { cursor: not-allowed; background: transparent; box-shadow: inset 0 0 0 1px var(--color-line); }
:where(.dx-root) .dx-tile[aria-disabled="true"] .dx-tile-name,
:where(.dx-root) .dx-tile[aria-disabled="true"] .dx-tile-price { color: var(--color-text-muted); }

/* ── Cuenta (el papel del ticket) ──────────────────────────────────────── */
:where(.dx-root) .dx-cuenta { display: flex; flex-direction: column; min-height: 0; background: var(--color-raised); color: var(--color-text); }
:where(.dx-root) .dx-cuenta-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); min-height: var(--topbar-height);
}
:where(.dx-root) .dx-cuenta-title { font-size: 18px; line-height: 24px; font-weight: 800; letter-spacing: -.01em; }
:where(.dx-root) .dx-cuenta-meta { font-size: 13px; line-height: 18px; color: var(--color-text-muted); }
:where(.dx-root) .dx-cuenta-head > :first-child { flex: 1; min-width: 0; }
:where(.dx-root) .dx-cuenta-lines { flex: 1; min-height: 0; overflow-y: auto; }
:where(.dx-root) .dx-cuenta-group { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-1); }
:where(.dx-root) .dx-line {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: 2px;
  padding: var(--space-3) var(--space-5); border-bottom: var(--rule-thin) solid var(--color-line); cursor: pointer;
}
:where(.dx-root) .dx-line:last-child { border-bottom: 0; }
:where(.dx-root) .dx-line-qty { font-weight: 700; font-variant-numeric: tabular-nums; }
:where(.dx-root) .dx-line-name { font-size: 16px; line-height: 20px; font-weight: 700; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
:where(.dx-root) .dx-line-amount { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
:where(.dx-root) .dx-line-mods { grid-column: 2 / -1; font-size: 13px; line-height: 18px; color: var(--color-text-muted); }
:where(.dx-root) .dx-line[aria-selected="true"] { background: var(--color-surface); border-bottom-color: transparent; }
:where(.dx-root) .dx-line-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
:where(.dx-root) .dx-line-tools .btn { background: var(--color-raised); }
:where(.dx-root) .dx-line-tools .btn-danger { background: var(--color-danger-tint); margin-left: auto; }
:where(.dx-root) .dx-cuenta-foot { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); border-top: var(--rule-thin) solid var(--color-line); }
:where(.dx-root) .dx-cuenta-sum { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-text-muted); padding: 0 var(--space-1); }

/* ── Efectivo: importes rápidos y lectura ──────────────────────────────── */
:where(.dx-root) .dx-quick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
:where(.dx-root) .dx-quick .btn { min-width: 88px; font-variant-numeric: tabular-nums; }
:where(.dx-root) .dx-readout { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
:where(.dx-root) .dx-readout-value { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ── Acceso por persona ────────────────────────────────────────────────── */
:where(.dx-root) .dx-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); }
:where(.dx-root) .dx-person {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--target); padding: var(--space-2) var(--space-3);
  border: 0; background: var(--color-surface); color: var(--color-text); font-size: 16px; font-weight: 700; text-align: left; cursor: pointer;
}
:where(.dx-root) .dx-initials {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none;
  background: var(--color-fill-inverse); color: var(--color-on-fill-inverse); font-size: 14px; font-weight: 800;
}
:where(.dx-root) .dx-person[aria-pressed="true"] { background: var(--color-fill-inverse); color: var(--color-on-fill-inverse); }
:where(.dx-root) .dx-person[aria-pressed="true"] .dx-initials { background: var(--color-accent-solid); color: var(--color-on-accent); }

/* ── Mesas (Taberna) ───────────────────────────────────────────────────── */
:where(.dx-root) .dx-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-2); }
:where(.dx-root) .dx-mesa {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2);
  min-height: 104px; padding: var(--space-3); border: 0; text-align: left; cursor: pointer;
  background: transparent; color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border);
  transition: transform var(--motion-fast) var(--ease-out);
}
:where(.dx-root) .dx-mesa:active { transform: translateY(1px); }
:where(.dx-root) .dx-mesa-num { font-size: 25px; line-height: 28px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
:where(.dx-root) .dx-mesa-info { display: grid; font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
:where(.dx-root) .dx-mesa[data-estado="libre"] .dx-mesa-info { color: var(--color-text-muted); font-weight: 400; }
:where(.dx-root) .dx-mesa[data-estado="ocupada"] { background: var(--color-fill-inverse); color: var(--color-on-fill-inverse); box-shadow: none; }
:where(.dx-root) .dx-mesa[data-estado="cuenta"] { background: var(--color-accent-solid); color: var(--color-on-accent); box-shadow: none; }
:where(.dx-root) .dx-mesa[data-estado="reservada"] { box-shadow: none; outline: 2px dashed var(--color-border); outline-offset: -2px; }
:where(.dx-root) .dx-mesa[data-estado="reservada"]:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
:where(.dx-root) .dx-mesa[data-estado="limpiar"] { background: var(--color-surface); box-shadow: none; }
:where(.dx-root) .dx-mesa[data-estado="limpiar"] .dx-mesa-info { color: var(--color-text-muted); }
/* Platos listos para servir: acento de carril con texto tinta, arriba a la derecha. */
:where(.dx-root) .dx-mesa-aviso {
  position: absolute; top: var(--space-3); right: var(--space-3);
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-2);
  background: var(--color-accent-chrome); color: var(--dx-ink); font-size: 13px; font-weight: 800;
}
:where(.dx-root) .dx-mesa .dx-icon { width: 18px; height: 18px; }
:where(.dx-root) .dx-mesa-info-row { display: flex; align-items: center; gap: var(--space-1); }
:where(.dx-root) .dx-mesa-info-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:where(.dx-root) .dx-mesa-info > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Comanda de cocina ─────────────────────────────────────────────────── */
:where(.dx-root) .dx-comandas { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: var(--space-2); align-items: start; }
:where(.dx-root) .dx-comanda { display: flex; flex-direction: column; background: var(--color-raised); color: var(--color-text); border-top: 6px solid var(--color-line); }
:where(.dx-root) .dx-comanda[data-tiempo="tarde"] { border-top-color: var(--color-warning); }
:where(.dx-root) .dx-comanda[data-tiempo="urgente"] { border-top-color: var(--color-danger); }
:where(.dx-root) .dx-comanda-head { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-2); }
:where(.dx-root) .dx-comanda-mesa,
:where(.dx-root) .dx-comanda-tiempo { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
:where(.dx-root) .dx-comanda-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--color-text-muted); margin-top: 2px; }
:where(.dx-root) .dx-comanda[data-tiempo="tarde"] .dx-comanda-tiempo { color: var(--color-warning); }
:where(.dx-root) .dx-comanda[data-tiempo="urgente"] .dx-comanda-tiempo { color: var(--color-danger); }
:where(.dx-root) .dx-comanda-items { border-top: var(--rule-thin) solid var(--color-line); }
:where(.dx-root) .dx-item {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--space-2); row-gap: 2px;
  padding: var(--space-2) var(--space-4); border-bottom: var(--rule-thin) solid var(--color-line); cursor: pointer;
}
:where(.dx-root) .dx-item-qty { font-size: 25px; line-height: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
:where(.dx-root) .dx-item-name { font-size: 20px; line-height: 28px; font-weight: 700; }
:where(.dx-root) .dx-item-mod { grid-column: 2; font-size: 15px; line-height: 20px; font-weight: 700; display: flex; align-items: center; gap: var(--space-1); }
:where(.dx-root) .dx-item-mod[data-alergeno] { color: var(--color-danger); }
:where(.dx-root) .dx-item[data-hecho] .dx-item-name,
:where(.dx-root) .dx-item[data-hecho] .dx-item-qty { color: var(--color-text-muted); text-decoration: line-through; text-decoration-thickness: 2px; }
:where(.dx-root) .dx-comanda-foot { padding: var(--space-3) var(--space-4) var(--space-4); }
:where(.dx-root) .dx-comanda-foot .btn-lg { min-height: 64px; }

/* ── Pie del rail y barra de navegación inferior ───────────────────────── */
:where(.dx-root) .dx-rail-item .dx-count { position: absolute; top: var(--space-3); right: var(--space-3); background: var(--color-chrome-text); color: var(--dx-ink); min-width: 22px; height: 22px; font-size: 12px; }
:where(.dx-root) .dx-rail-foot { margin-top: auto; display: grid; gap: var(--space-2); padding: var(--space-4); border-top: var(--rule-thin) solid var(--color-chrome-rule); }
:where(.dx-root) .dx-rail-foot .dx-initials { background: var(--color-accent-chrome); color: var(--dx-ink); }
/* Dentro de .dx-rail-foot, .dx-rail-user es solo el nombre (fuera, el bloque completo de DxRailUsuario). */
:where(.dx-root) .dx-rail-foot .dx-rail-user { margin-top: 0; display: block; padding: 0; border-top: 0; font-size: 14px; font-weight: 700; line-height: 18px; color: var(--color-chrome-text); }
:where(.dx-root) .dx-rail-role { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-chrome-muted); overflow-wrap: anywhere; }
:where(.dx-root) .dx-rail-foot .btn { min-height: var(--target); padding: 0; color: var(--color-chrome-text); font-size: 13px; gap: var(--space-1); }
:where(.dx-root) .dx-rail-foot .btn .dx-icon { width: 16px; height: 16px; }
@media (max-width: 767px) { :where(.dx-root) .dx-rail-foot { display: none; } }

:where(.dx-root) .dx-navbar {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--color-chrome); color: var(--color-chrome-text);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
:where(.dx-root) .dx-navbar-item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 64px; padding: var(--space-2) var(--space-1); border: 0; background: transparent;
  color: var(--color-chrome-muted); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
:where(.dx-root) .dx-navbar-item .dx-icon { width: 24px; height: 24px; color: var(--color-chrome-text); }
:where(.dx-root) .dx-navbar-item[aria-current="page"] { background: var(--color-accent-chrome); color: var(--dx-ink); }
:where(.dx-root) .dx-navbar-item[aria-current="page"] .dx-icon { color: var(--dx-ink); }
:where(.dx-root) .dx-navbar-item:focus-visible { outline: 2px solid var(--color-chrome-text); outline-offset: -4px; }
:where(.dx-root) .dx-navbar-item[aria-current="page"]:focus-visible { outline-color: var(--dx-ink); }
:where(.dx-root) .dx-navbar-item .dx-count { position: absolute; top: 6px; left: calc(50% + 8px); background: var(--color-chrome-text); color: var(--dx-ink); min-width: 20px; height: 20px; font-size: 12px; padding: 0 5px; }

/* ── Barra superior: contexto, reloj, indicador de estado y «lo siguiente» ─ */
:where(.dx-root) .dx-topbar-context { font-size: 13px; line-height: 18px; color: var(--color-text-muted); }
:where(.dx-root) .dx-clock { font-size: 18px; line-height: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
:where(.dx-root) .dx-status {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target); padding: 0 var(--space-3);
  border: 0; background: var(--color-warning-tint); color: var(--color-warning); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
:where(.dx-root) .dx-status[data-nivel="error"] { background: var(--color-danger-tint); color: var(--color-danger); }
:where(.dx-root) .dx-status-text { color: var(--color-text); }
:where(.dx-root) .dx-next {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target); padding: 0 var(--space-3);
  border: 0; background: var(--color-surface); color: var(--color-text); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
:where(.dx-root) .dx-next .muted { font-weight: 400; }

/* ── Aviso con Deshacer ────────────────────────────────────────────────── */
:where(.dx-root) .dx-toast {
  position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 56px;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); overflow: hidden;
  background: var(--color-chrome); color: var(--color-chrome-text); box-shadow: var(--shadow-sm);
  font-size: 15px; line-height: 20px; font-weight: 600;
}
:where(.dx-root) .dx-toast > span { flex: 1; min-width: 0; }
:where(.dx-root) .dx-toast .dx-icon { color: var(--color-accent-chrome); }
:where(.dx-root) .dx-toast-action {
  min-height: var(--target); padding: 0 var(--space-4); border: 0; background: transparent;
  color: var(--color-chrome-text); font-size: 15px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
:where(.dx-root) .dx-toast-action:hover { background: var(--color-chrome-rule); }
:where(.dx-root) .dx-toast-action:focus-visible { outline: 2px solid var(--color-chrome-text); outline-offset: -2px; }
/* La línea inferior es el punto estirado que se consume en 5 s. */
:where(.dx-root) .dx-toast::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--color-accent-chrome); transform-origin: left; animation: dx-cuenta-atras 5s linear forwards;
}
@keyframes dx-cuenta-atras { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── Movimiento reducido: el punto queda quieto y el texto basta ──────── */
@media (prefers-reduced-motion: reduce) {
  :where(.dx-root) .btn[aria-busy="true"]::after,
:where(.dx-root) .dx-loadbar::before,
:where(.dx-root) .dx-toast::after { animation: none !important; }
  :where(.dx-root) :is(.btn, .seg-opt, .dx-tab, .dx-key, .dx-tile, .dx-mesa):active { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Capa v2 · Sarea, gestión (segunda ronda, 30/09/2026): página, tarjeta, métricas, gráfico, tabla,
   publicación de catálogo, hoja y diálogo. Usan --color-raised y los tokens --chart-*.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Página y tarjetas ─────────────────────────────────────────────────── */
/* Columna minmax(0, 1fr): con la columna implícita «auto», el ancho mínimo de una tabla o de unas pestañas
   ensanchaba la página entera (franquicia desbordaba a 390 y 768 px); así cada hijo desplaza lo suyo. */
:where(.dx-root) .dx-page { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-8); min-width: 0; }
/* Pila vertical dentro de una página o de un panel de pestañas (tarjetas una debajo de otra). */
:where(.dx-root) .dx-stack { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-4); min-width: 0; }
:where(.dx-root) .dx-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
:where(.dx-root) .dx-card { background: var(--color-raised); color: var(--color-text); min-width: 0; }
:where(.dx-root) .dx-card-head { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-2); }
:where(.dx-root) .dx-card-title { font-size: 18px; line-height: 24px; font-weight: 800; letter-spacing: -.01em; }
:where(.dx-root) .dx-card-note { font-size: 13px; line-height: 18px; color: var(--color-text-muted); }
:where(.dx-root) .dx-card-head > :last-child:not(:first-child) { margin-left: auto; }
:where(.dx-root) .dx-card-body { padding: 0 var(--space-5) var(--space-5); }

/* ── Métricas ──────────────────────────────────────────────────────────── */
:where(.dx-root) .dx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
:where(.dx-root) .dx-kpi-hero { grid-column: span 2; }
@media (max-width: 520px) { :where(.dx-root) .dx-kpi-hero { grid-column: auto; } }
:where(.dx-root) .dx-kpi { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-4) var(--space-5); background: var(--color-raised); min-width: 0; }
:where(.dx-root) .dx-kpi-label { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--color-text-muted); }
:where(.dx-root) .dx-kpi-value { font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
:where(.dx-root) .dx-kpi-hero .dx-kpi-value { font-size: 48px; line-height: 54px; }
:where(.dx-root) .dx-delta { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-1); font-size: 13px; line-height: 18px; font-weight: 700; }
:where(.dx-root) .dx-delta strong { white-space: nowrap; font-weight: 700; }
:where(.dx-root) .dx-delta .dx-icon { width: 16px; height: 16px; }
:where(.dx-root) .dx-delta[data-sentido="bien"] { color: var(--color-success); }
:where(.dx-root) .dx-delta[data-sentido="mal"] { color: var(--color-danger); }
:where(.dx-root) .dx-delta span { color: var(--color-text-muted); font-weight: 400; }
:where(.dx-root) .dx-spark { display: block; width: 100%; height: 32px; margin-top: var(--space-2); overflow: visible; }
:where(.dx-root) .dx-spark .serie { fill: none; stroke: var(--chart-principal); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
:where(.dx-root) .dx-spark .fin { fill: var(--chart-principal); stroke: var(--color-raised); stroke-width: 2; }

/* ── Gráfico ───────────────────────────────────────────────────────────── */
:where(.dx-root) .dx-chart { position: relative; margin: 0; }
:where(.dx-root) .dx-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 13px; line-height: 18px; color: var(--color-text-muted); }
:where(.dx-root) .dx-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
:where(.dx-root) .dx-legend .key-barra { width: 10px; height: 10px; background: var(--chart-principal); }
:where(.dx-root) .dx-legend .key-linea { width: 16px; height: 2px; background: var(--chart-contexto); }
:where(.dx-root) .dx-chart svg { display: block; width: 100%; overflow: visible; }
:where(.dx-root) .dx-chart .rejilla { stroke: var(--chart-rejilla); stroke-width: 1; shape-rendering: crispEdges; }
:where(.dx-root) .dx-chart .eje { fill: var(--color-text-muted); font-family: var(--font-sans); font-size: 12px; font-variant-numeric: tabular-nums; }
:where(.dx-root) .dx-chart .barra { fill: var(--chart-principal); }
:where(.dx-root) .dx-chart .contexto { fill: none; stroke: var(--chart-contexto); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
:where(.dx-root) .dx-chart .punto { fill: var(--chart-contexto); stroke: var(--color-raised); stroke-width: 2; }
:where(.dx-root) .dx-chart .banda { fill: transparent; cursor: default; outline: none; }
:where(.dx-root) .dx-chart .banda:hover,
:where(.dx-root) .dx-chart .banda:focus-visible { fill: var(--color-hover); }
:where(.dx-root) .dx-chart .guia { stroke: var(--color-text-muted); stroke-width: 1; }
:where(.dx-root) .dx-tooltip {
  position: absolute; pointer-events: none; z-index: 2; min-width: 160px; padding: var(--space-2) var(--space-3);
  background: var(--color-chrome); color: var(--color-chrome-text); box-shadow: var(--shadow-sm); font-size: 13px; line-height: 18px;
}
:where(.dx-root) .dx-tooltip b { display: block; font-size: 15px; line-height: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
:where(.dx-root) .dx-tooltip .fila { display: flex; align-items: center; gap: var(--space-2); color: var(--color-chrome-muted); }
:where(.dx-root) .dx-tooltip .fila strong { color: var(--color-chrome-text); margin-left: auto; font-variant-numeric: tabular-nums; }
:where(.dx-root) .dx-tooltip .k { width: 12px; height: 2px; flex: none; }

/* ── Tabla de datos (.dx-table-wrap ya existe más arriba) ───────────────── */
:where(.dx-root) .dx-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 20px; }
:where(.dx-root) .dx-table caption { text-align: left; }
:where(.dx-root) .dx-table th {
  position: sticky; top: 0; z-index: 1; background: var(--color-raised); text-align: left; white-space: nowrap;
  padding: var(--space-2) var(--space-4); font-size: 13px; line-height: 18px; font-weight: 700; color: var(--color-text-muted);
  border-bottom: var(--rule-strong) solid var(--color-divider);
}
:where(.dx-root) .dx-table td { padding: var(--space-3) var(--space-4); border-bottom: var(--rule-thin) solid var(--color-line); vertical-align: middle; }
:where(.dx-root) .dx-table tbody tr:hover { background: var(--color-hover); }
:where(.dx-root) .dx-table tbody tr:last-child td { border-bottom: 0; }
:where(.dx-root) .dx-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.dx-root) .dx-table th.num { text-align: right; }
:where(.dx-root) .dx-table .fuerte { font-weight: 700; }
/* Orden de la columna: el botón mide --target-min de alto (objetivo táctil de Sarea) sin engordar la cabecera:
   el margen negativo compensa la diferencia con la línea de 18 px. */
:where(.dx-root) .dx-table th[aria-sort] button {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--target-min); margin-block: calc((18px - var(--target-min)) / 2);
}
:where(.dx-root) .dx-table th[aria-sort] button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
:where(.dx-root) .dx-table th[aria-sort="descending"],
:where(.dx-root) .dx-table th[aria-sort="ascending"] { color: var(--color-text); }
:where(.dx-root) .dx-estado { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 700; white-space: nowrap; }
/* Blazor quita el espacio entre etiquetas: dos estados seguidos («Activo», «Pruebas») salían pegados. */
:where(.dx-root) .dx-estado + .dx-estado { margin-inline-start: var(--space-3); }
:where(.dx-root) .dx-estado::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; }
:where(.dx-root) .dx-estado[data-nivel="bien"] { color: var(--color-success); }
:where(.dx-root) .dx-estado[data-nivel="aviso"] { color: var(--color-warning); }
:where(.dx-root) .dx-estado[data-nivel="error"] { color: var(--color-danger); }
:where(.dx-root) .dx-estado[data-nivel="neutro"] { color: var(--color-text-muted); }

/* ── Publicación de catálogo ───────────────────────────────────────────── */
:where(.dx-root) .dx-precio { width: 112px; }
:where(.dx-root) .dx-cambiado { display: inline-block; width: 8px; height: 8px; background: var(--color-accent); margin-right: var(--space-2); vertical-align: middle; }
:where(.dx-root) .dx-publicar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); background: var(--color-fill-inverse); color: var(--color-on-fill-inverse);
}
/* Sobre la tinta, el botón principal usa el acento de carril. */
:where(.dx-root) .dx-publicar .btn-primary { --color-accent-solid: var(--color-accent-chrome); --color-on-accent: var(--dx-ink); --color-accent-solid-hover: var(--color-accent-chrome); }
:where(.dx-root) .dx-destinos { display: grid; gap: 0; }
:where(.dx-root) .dx-destino { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--rule-thin) solid var(--color-line); }
:where(.dx-root) .dx-destino:last-child { border-bottom: 0; }

/* ── Hoja y diálogo (se posicionan dentro de la pantalla: su contenedor lleva position: relative) ── */
/* .dx-overlay: contenedor fijo a toda la ventana para velo + hoja o diálogo cuando la pantalla no es el contenedor. */
:where(.dx-root) .dx-overlay { position: fixed; inset: 0; z-index: 60; }
@media (max-width: 767px) { :where(.dx-root) .dx-overlay .dx-sheet { top: auto; left: 0; width: 100%; max-height: 85%; } }
:where(.dx-root) .dx-backdrop { position: absolute; inset: 0; background: var(--color-backdrop); }
:where(.dx-root) .dx-sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column;
  background: var(--color-raised); color: var(--color-text); box-shadow: var(--shadow-md);
}
:where(.dx-root) .dx-sheet[data-lado="abajo"] { top: auto; left: 0; width: 100%; max-height: 85%; }
:where(.dx-root) .dx-sheet-head { display: flex; align-items: center; gap: var(--space-2); min-height: var(--topbar-height); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5); border-bottom: var(--rule-thin) solid var(--color-line); }
:where(.dx-root) .dx-sheet-head > :first-child { flex: 1; min-width: 0; }
/* grid-auto-rows: max-content — cuando el contenido no cabe, el cuerpo se desplaza y ninguna fila se encoge: con
   filas «auto», los hijos con min-height:0 u overflow (una .dx-cuenta, un .seg) se aplastaban y se montaban encima
   del siguiente (canjear y vender tarjeta regalo a 1280×800). */
:where(.dx-root) .dx-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5); display: grid; grid-auto-rows: max-content; align-content: start; gap: var(--space-4); }
:where(.dx-root) .dx-sheet-foot { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); border-top: var(--rule-thin) solid var(--color-line); }
:where(.dx-root) .dx-sheet[data-lado="abajo"] .dx-sheet-foot { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
:where(.dx-root) .dx-grip { width: 40px; height: 4px; background: var(--color-border); margin: var(--space-2) auto 0; }
:where(.dx-root) .dx-dialog {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100% - 32px));
  display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--color-raised); color: var(--color-text); box-shadow: var(--shadow-lg);
}
:where(.dx-root) .dx-dialog-actions { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-2); }

/* ── Tercera ronda del design system (bundle.css): opción marcada y cuenta plegada en móvil ─────────────────── */
:where(.dx-root) .btn-tonal[aria-pressed="true"] { background: var(--color-fill-inverse); color: var(--color-on-fill-inverse); }
/* Lo pulsado o seleccionado gana al hover y al :active: en Android el hover se queda pegado tras tocar
   y dejaba texto claro sobre fondo claro (design system, versión 13). */
:where(.dx-root) .btn-tonal[aria-pressed="true"]:is(:hover, :active):not(:disabled) { background: var(--color-fill-inverse); color: var(--color-on-fill-inverse); }
:where(.dx-root) .dx-list-row:is([aria-selected="true"], [aria-current="true"]):hover,
.dx-list-row:is([aria-selected="true"], [aria-current="true"]):hover:where(.dx-root) { background: var(--color-fill-inverse); }
:where(.dx-root) .table tbody tr[aria-selected="true"]:hover,
.table:where(.dx-root) tbody tr[aria-selected="true"]:hover { background: var(--color-fill-inverse); }
:where(.dx-root) .dx-cuentabar {
  display: grid; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3);
  background: var(--color-raised); border-top: var(--rule-strong) solid var(--color-divider);
}
:where(.dx-root) .dx-cuentabar .dx-grip { margin-bottom: var(--space-1); }
:where(.dx-root) .dx-cuentabar-fila { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }