/* Dirutxi — base y componentes (Modernist). Enlázalo antes de los estilos del host: 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 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; } :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 ──────────────────────────────────────────────────────────── */ :where(.dx-root) .btn, .btn:where(.dx-root) { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; min-height: var(--target-min); cursor: pointer; text-decoration: none; text-align: left; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); } :where(.dx-root) .btn svg, .btn:where(.dx-root) svg { display: block; flex: none; } :where(.dx-root) .btn:disabled, .btn:disabled:where(.dx-root), :where(.dx-root) .btn[aria-disabled="true"], .btn[aria-disabled="true"]:where(.dx-root) { opacity: 0.45; cursor: not-allowed; } :where(.dx-root) .btn-primary, .btn-primary:where(.dx-root) { background: var(--color-accent-solid); color: var(--color-on-accent); } /* Deshabilitado legible en los dos temas: relleno neutro y texto secundario (≥4,5:1), sin opacidad. */ :where(.dx-root) .btn-primary:disabled, .btn-primary:disabled:where(.dx-root), :where(.dx-root) .btn-primary[aria-disabled="true"], .btn-primary[aria-disabled="true"]:where(.dx-root) { opacity: 1; background: var(--color-surface); color: var(--color-text-muted); border-color: var(--color-border); } :where(.dx-root) .btn-primary:hover:not(:disabled), .btn-primary:hover:not(:disabled):where(.dx-root) { background: var(--color-accent-solid-hover); } :where(.dx-root) .btn-primary:active:not(:disabled), .btn-primary:active:not(:disabled):where(.dx-root) { background: var(--color-accent-solid-active); } :where(.dx-root) .btn-secondary, .btn-secondary:where(.dx-root) { border-color: var(--color-border); } :where(.dx-root) .btn-secondary:hover:not(:disabled), .btn-secondary:hover:not(:disabled):where(.dx-root) { background: var(--color-hover); } :where(.dx-root) .btn-secondary:active:not(:disabled), .btn-secondary:active:not(:disabled):where(.dx-root) { background: var(--color-pressed); } :where(.dx-root) .btn-ghost:hover:not(:disabled), .btn-ghost:hover:not(:disabled):where(.dx-root) { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } :where(.dx-root) .btn-ghost:active:not(:disabled), .btn-ghost:active:not(:disabled):where(.dx-root) { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } :where(.dx-root) .btn-ghost, .btn-ghost:where(.dx-root) { color: var(--color-accent-text); padding-inline: var(--space-2); } :where(.dx-root) .btn-danger, .btn-danger:where(.dx-root) { background: var(--color-danger-tint); color: var(--color-danger); border-color: currentColor; } :where(.dx-root) .btn-icon, .btn-icon:where(.dx-root) { width: var(--target-min); height: var(--target-min); padding: 0; justify-content: center; } :where(.dx-root) .btn-block, .btn-block:where(.dx-root) { display: flex; width: 100%; } /* CTA de TPV («Cobrar», «Enviar a cocina»): etiqueta a la izquierda, importe/icono a la derecha. */ :where(.dx-root) .btn-lg, .btn-lg:where(.dx-root) { min-height: 60px; width: 100%; justify-content: space-between; padding-inline: var(--space-5); font-size: var(--font-size-lg); } :where(.dx-root) [data-density="pos"] .btn, [data-density="pos"]:where(.dx-root) .btn { min-height: var(--target-pos); } :where(.dx-root) [data-density="pos"] .btn-icon, [data-density="pos"]:where(.dx-root) .btn-icon { width: var(--target-pos); height: var(--target-pos); } :where(.dx-root) [data-density="pos"] .btn-lg, [data-density="pos"]:where(.dx-root) .btn-lg { min-height: 64px; } /* ── Etiquetas ────────────────────────────────────────────────────────── */ :where(.dx-root) .tag, .tag:where(.dx-root) { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.02em; padding: 3px 10px; border-radius: var(--radius-sm); } :where(.dx-root) .tag-accent, .tag-accent:where(.dx-root), :where(.dx-root) .tag-accent-2, .tag-accent-2:where(.dx-root) { background: var(--color-accent-tint); color: var(--color-accent-tint-text); } :where(.dx-root) .tag-neutral, .tag-neutral:where(.dx-root) { background: var(--color-surface); color: var(--color-text); } :where(.dx-root) .tag-outline, .tag-outline:where(.dx-root) { border: 1px solid var(--color-accent-text); color: var(--color-accent-text); } :where(.dx-root) .tag-success, .tag-success:where(.dx-root) { background: var(--color-success-tint); color: var(--color-success); } :where(.dx-root) .tag-warning, .tag-warning:where(.dx-root) { background: var(--color-warning-tint); color: var(--color-warning); } :where(.dx-root) .tag-danger, .tag-danger:where(.dx-root) { background: var(--color-danger-tint); color: var(--color-danger); } /* ── Formularios ──────────────────────────────────────────────────────── */ :where(.dx-root) .field, .field:where(.dx-root) { display: flex; flex-direction: column; gap: 5px; min-width: 0; } :where(.dx-root) .field > label, .field:where(.dx-root) > label, :where(.dx-root) .field-label, .field-label:where(.dx-root) { font-size: 12px; font-weight: 600; color: var(--color-text-muted); } :where(.dx-root) .field-hint, .field-hint:where(.dx-root) { font-size: 12px; color: var(--color-text-muted); } :where(.dx-root) .field-error, .field-error:where(.dx-root) { font-size: 12px; font-weight: 600; color: var(--color-danger); } :where(.dx-root) .input, .input:where(.dx-root) { width: 100%; min-height: var(--target-min); padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } :where(.dx-root) .input:hover, .input:hover:where(.dx-root) { border-color: var(--color-text); } :where(.dx-root) .input:focus-visible, .input:focus-visible:where(.dx-root) { border-color: var(--color-focus); outline-offset: 0; } :where(.dx-root) .input[aria-invalid="true"], .input[aria-invalid="true"]:where(.dx-root) { border-color: var(--color-danger); border-width: 2px; } :where(.dx-root) .input::placeholder{ color: var(--color-text-muted); opacity: 1; } :where(.dx-root) textarea.input, textarea.input:where(.dx-root) { min-height: 90px; resize: vertical; } :where(.dx-root) [data-density="pos"] .input, [data-density="pos"]:where(.dx-root) .input { min-height: var(--target-pos); } :where(.dx-root) .radio, .radio:where(.dx-root) { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target-min); 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 (44 px; 48 en TPV). */ :where(.dx-root) .check, .check:where(.dx-root) { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); cursor: pointer; font-size: 14px; color: var(--color-text); } :where(.dx-root) [data-density="pos"] :is(.check, .radio), [data-density="pos"]:where(.dx-root) :is(.check, .radio) { min-height: var(--target-pos); } :where(.dx-root) .check input[type="checkbox"], .check:where(.dx-root) input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--color-accent-solid); } :where(.dx-root) .check input[type="checkbox"]:focus-visible, .check:where(.dx-root) input[type="checkbox"]:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } :where(.dx-root) .seg, .seg:where(.dx-root) { display: inline-flex; flex-wrap: wrap; width: fit-content; max-width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); } :where(.dx-root) .seg-strong, .seg-strong:where(.dx-root) { border: var(--rule-strong) solid var(--color-text); flex-wrap: nowrap; overflow-x: auto; } :where(.dx-root) .seg-strong > .seg-opt, .seg-strong:where(.dx-root) > .seg-opt { flex: 1 0 auto; } :where(.dx-root) .seg-opt, .seg-opt:where(.dx-root) { display: inline-flex; align-items: center; gap: 6px; min-height: var(--target-min); min-width: var(--target-min); padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; border: 0; color: inherit; } :where(.dx-root) .seg-opt + .seg-opt, .seg-opt:where(.dx-root) + .seg-opt { border-left: 1px solid var(--color-border); } :where(.dx-root) .seg-opt:has(input:checked), .seg-opt:has(input:checked):where(.dx-root), :where(.dx-root) .seg-opt[aria-pressed="true"], .seg-opt[aria-pressed="true"]:where(.dx-root), :where(.dx-root) .seg-opt[aria-checked="true"], .seg-opt[aria-checked="true"]:where(.dx-root) { background: var(--color-accent-solid); color: var(--color-on-accent); } :where(.dx-root) .seg-strong .seg-opt:has(input:checked), .seg-strong:where(.dx-root) .seg-opt:has(input:checked), :where(.dx-root) .seg-strong .seg-opt[aria-pressed="true"], .seg-strong:where(.dx-root) .seg-opt[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); } :where(.dx-root) .seg-opt:not(:has(input:checked)):not([aria-pressed="true"]):hover, .seg-opt:not(:has(input:checked)):not([aria-pressed="true"]):hover:where(.dx-root) { background: var(--color-hover); } :where(.dx-root) .seg-opt:has(input:focus-visible), .seg-opt:has(input:focus-visible):where(.dx-root), :where(.dx-root) .seg-opt:focus-visible, .seg-opt:focus-visible:where(.dx-root) { outline: var(--focus-ring); outline-offset: -2px; } :where(.dx-root) [data-density="pos"] .seg-opt, [data-density="pos"]:where(.dx-root) .seg-opt { min-height: var(--target-pos); min-width: var(--target-pos); } /* ── 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); } :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); } :where(.dx-root) .dx-bar, .dx-bar:where(.dx-root) { position: relative; height: 6px; background: color-mix(in srgb, var(--color-text) 18%, transparent); } :where(.dx-root) .dx-bar > span, .dx-bar:where(.dx-root) > span { position: absolute; inset: 0 auto 0 0; background: var(--color-accent-solid); } /* ── Estructura: rail, barra superior, navegación ─────────────────────── */ :where(.dx-root) .dx-shell, .dx-shell:where(.dx-root) { display: grid; grid-template-columns: 96px 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; height: 64px; padding: 0 var(--space-4); border-bottom: var(--rule-strong) 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; gap: 6px; min-height: 72px; padding: var(--space-4) 6px; border: 0; background: transparent; color: var(--color-chrome-text); text-decoration: none; cursor: pointer; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.02em; 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: 22px; height: 22px; } :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); } :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-solid); color: var(--color-on-accent); } :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: 64px; padding: var(--space-2) var(--space-6); 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: 22px; margin: 0; } :where(.dx-root) .dx-topbar-end, .dx-topbar-end:where(.dx-root) { margin-left: auto; display: flex; align-items: center; gap: 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); } @media (max-width: 767px) { :where(.dx-root) .dx-shell, .dx-shell:where(.dx-root) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } :where(.dx-root) .dx-rail, .dx-rail:where(.dx-root) { flex-direction: row; overflow-x: auto; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; scroll-snap-type: x proximity; scrollbar-width: none; /* Indicio de que hay más secciones: las últimas se desvanecen hacia la derecha. */ -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; } :where(.dx-root) .dx-rail-brand, .dx-rail-brand:where(.dx-root) { height: auto; min-width: 64px; border-bottom: 0; border-right: var(--rule-strong) solid var(--color-chrome-rule); } :where(.dx-root) .dx-rail-item, .dx-rail-item:where(.dx-root) { min-height: 56px; min-width: 72px; padding: var(--space-2) var(--space-3); justify-content: center; } :where(.dx-root) .dx-rail-badge, .dx-rail-badge:where(.dx-root) { top: 4px; right: 4px; } :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; } } /* Carcasa a pantalla (TPV/KDS): altura fija de la ventana, rail y contenido con su propio desplazamiento, para que la barra de cobro quede siempre a la vista (como en la fuente). */ @media (min-width: 768px) { :where(.dx-root) .dx-shell[data-fit], .dx-shell[data-fit]:where(.dx-root) { 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: env(safe-area-inset-bottom, 0px); z-index: 2; background: inherit; border-top: var(--rule-strong) solid 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-chrome-text); color: var(--color-chrome); 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: 12px; } :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-accent-300); font: inherit; font-weight: 700; text-decoration: none; } :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-accent-brand); } :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; } /* ── Pestañas a toda anchura (categorías, zonas) ──────────────────────── */ :where(.dx-root) .dx-tabs, .dx-tabs:where(.dx-root) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); overflow-x: auto; border-bottom: var(--rule-strong) solid var(--color-divider); scrollbar-width: thin; } :where(.dx-root) .dx-tab, .dx-tab:where(.dx-root) { display: flex; align-items: center; justify-content: flex-start; gap: 6px; min-height: var(--target-pos); padding: var(--space-2) var(--space-4); border: 0; border-right: 1px solid var(--color-divider); background: transparent; color: inherit; cursor: pointer; font-size: 14px; font-weight: 700; white-space: nowrap; text-align: left; } :where(.dx-root) .dx-tab:hover, .dx-tab:hover:where(.dx-root) { box-shadow: inset 0 -4px 0 var(--color-accent-solid); } :where(.dx-root) .dx-tab[aria-selected="true"], .dx-tab[aria-selected="true"]:where(.dx-root) { background: var(--color-accent-solid); color: var(--color-on-accent); box-shadow: none; } :where(.dx-root) .dx-tab:focus-visible, .dx-tab:focus-visible:where(.dx-root) { outline: var(--focus-ring); outline-offset: -3px; } :where(.dx-root) .dx-tab-count, .dx-tab-count:where(.dx-root) { font-size: var(--font-size-xs); font-weight: 600; } /* ── 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-text); color: var(--color-bg); } /* ── 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-text); color: var(--color-bg); } :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) ─────────────────────── */ :where(.dx-root) .dx-keypad, .dx-keypad:where(.dx-root) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); } :where(.dx-root) .dx-keypad[data-columns="4"], .dx-keypad[data-columns="4"]:where(.dx-root) { grid-template-columns: repeat(4, minmax(0, 1fr)); } :where(.dx-root) .dx-key, .dx-key:where(.dx-root) { display: grid; place-items: center start; min-height: 60px; border: 0; padding: 0 var(--space-4); background: var(--color-bg); color: var(--color-text); cursor: pointer; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } :where(.dx-root) .dx-keypad[data-columns="4"] .dx-key, .dx-keypad[data-columns="4"]:where(.dx-root) .dx-key { min-height: var(--target-pos); font-size: 20px; } :where(.dx-root) .dx-key:hover, .dx-key:hover:where(.dx-root) { background: color-mix(in srgb, var(--color-text) 10%, var(--color-bg)); } :where(.dx-root) .dx-key:active, .dx-key:active:where(.dx-root) { background: var(--color-accent-tint); color: var(--color-accent-tint-text); } :where(.dx-root) .dx-key:focus-visible, .dx-key:focus-visible:where(.dx-root) { outline: var(--focus-ring); outline-offset: -3px; } :where(.dx-root) .dx-key[data-kind="aux"], .dx-key[data-kind="aux"]:where(.dx-root) { background: var(--color-surface); font-size: 14px; } :where(.dx-root) .dx-key[data-kind="confirm"], .dx-key[data-kind="confirm"]:where(.dx-root) { background: var(--color-accent-solid); color: var(--color-on-accent); font-size: 16px; } :where(.dx-root) .dx-key:disabled, .dx-key:disabled:where(.dx-root) { opacity: 0.45; cursor: not-allowed; } :where(.dx-root) .dx-pin, .dx-pin:where(.dx-root) { display: flex; gap: var(--space-3); justify-content: flex-start; margin-bottom: var(--space-4); } :where(.dx-root) .dx-pin > span, .dx-pin:where(.dx-root) > span { width: 16px; height: 16px; border: var(--rule-strong) solid var(--color-text); } :where(.dx-root) .dx-pin > span[data-filled="true"], .dx-pin:where(.dx-root) > span[data-filled="true"] { background: var(--color-text); } /* ── Banner de estado: vacío, cargando, error, sin conexión, bloqueo fiscal ── */ :where(.dx-root) .dx-banner, .dx-banner:where(.dx-root) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-text); background: var(--color-surface); color: var(--color-text); } :where(.dx-root) .dx-banner-icon, .dx-banner-icon:where(.dx-root) { width: 20px; height: 20px; margin-top: 2px; } :where(.dx-root) .dx-banner-title, .dx-banner-title:where(.dx-root) { display: block; font-weight: 800; } :where(.dx-root) .dx-banner-body, .dx-banner-body:where(.dx-root) { font-size: 14px; } :where(.dx-root) .dx-banner-body > :last-child, .dx-banner-body:where(.dx-root) > :last-child { margin-bottom: 0; } :where(.dx-root) .dx-banner-actions, .dx-banner-actions:where(.dx-root) { display: flex; gap: var(--space-2); flex-wrap: wrap; } :where(.dx-root) .dx-banner[data-state="error"], .dx-banner[data-state="error"]:where(.dx-root) { border-color: var(--color-danger); background: var(--color-danger-tint); } :where(.dx-root) .dx-banner[data-state="error"] .dx-banner-icon, .dx-banner[data-state="error"]:where(.dx-root) .dx-banner-icon { color: var(--color-danger); } :where(.dx-root) .dx-banner[data-state="offline"], .dx-banner[data-state="offline"]:where(.dx-root) { border-color: var(--color-warning); background: var(--color-warning-tint); } :where(.dx-root) .dx-banner[data-state="offline"] .dx-banner-icon, .dx-banner[data-state="offline"]:where(.dx-root) .dx-banner-icon { color: var(--color-warning); } :where(.dx-root) .dx-banner[data-state="fiscal-lock"], .dx-banner[data-state="fiscal-lock"]:where(.dx-root) { border-color: var(--color-text); border-left-width: 8px; background: var(--color-danger-tint); } :where(.dx-root) .dx-banner[data-state="fiscal-lock"] .dx-banner-icon, .dx-banner[data-state="fiscal-lock"]:where(.dx-root) .dx-banner-icon { color: var(--color-danger); } :where(.dx-root) .dx-banner[data-state="success"], .dx-banner[data-state="success"]:where(.dx-root) { border-color: var(--color-success); background: var(--color-success-tint); } :where(.dx-root) .dx-banner[data-state="info"], .dx-banner[data-state="info"]:where(.dx-root), :where(.dx-root) .dx-banner[data-state="loading"], .dx-banner[data-state="loading"]:where(.dx-root) { border-color: var(--color-info); background: var(--color-info-tint); } :where(.dx-root) .dx-banner[data-state="empty"], .dx-banner[data-state="empty"]:where(.dx-root) { border-left: 0; border-top: var(--rule-strong) solid var(--color-divider); background: transparent; padding-block: var(--space-6); } @media (max-width: 480px) { :where(.dx-root) .dx-banner, .dx-banner:where(.dx-root) { grid-template-columns: auto minmax(0, 1fr); } :where(.dx-root) .dx-banner-actions, .dx-banner-actions:where(.dx-root) { 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, .btn-primary:focus-visible:where(.dx-root), :where(.dx-root) .dx-tab[aria-selected="true"]:focus-visible, .dx-tab[aria-selected="true"]:focus-visible:where(.dx-root), :where(.dx-root) .seg-opt[aria-pressed="true"]:focus-visible, .seg-opt[aria-pressed="true"]:focus-visible:where(.dx-root), :where(.dx-root) .seg-opt[aria-checked="true"]:focus-visible, .seg-opt[aria-checked="true"]:focus-visible:where(.dx-root), :where(.dx-root) .seg-opt:has(input:checked:focus-visible), .seg-opt:has(input:checked:focus-visible):where(.dx-root), :where(.dx-root) .dx-key[data-kind="confirm"]:focus-visible, .dx-key[data-kind="confirm"]:focus-visible:where(.dx-root), :where(.dx-root) .dx-rail-item[aria-current="page"]:focus-visible, .dx-rail-item[aria-current="page"]:focus-visible:where(.dx-root), :where(.dx-root) .dx-rail-item.active:focus-visible, .dx-rail-item.active:focus-visible:where(.dx-root) { outline: 2px solid var(--color-on-accent); outline-offset: -5px; } :where(.dx-root) .dx-list-row[aria-selected="true"]:focus-visible, .dx-list-row[aria-selected="true"]:focus-visible:where(.dx-root), :where(.dx-root) .dx-list-row[aria-current="true"]:focus-visible, .dx-list-row[aria-current="true"]:focus-visible:where(.dx-root), :where(.dx-root) .seg-strong .seg-opt[aria-pressed="true"]:focus-visible, .seg-strong:where(.dx-root) .seg-opt[aria-pressed="true"]:focus-visible, :where(.dx-root) .seg-strong .seg-opt:has(input:checked:focus-visible), .seg-strong:where(.dx-root) .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: 12px; padding-inline: 10px; } @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: 0.01ms !important; } }