@charset "UTF-8";

/* corewebp 0.3 — sistema visual propio, sin Bootstrap, Tailwind ni CDNs. */
:root {
  color-scheme: light;
  --ink-950: #071c1f;
  --ink-900: #0b282b;
  --ink-800: #173a3d;
  --ink-700: #315357;
  --ink-600: #557174;
  --ink-500: #71898b;
  --ink-300: #b7c6c5;
  --ink-200: #d5dfdc;
  --ink-100: #e8eeeb;
  --ink-50: #f4f7f4;
  --paper: #fbfcf8;
  --white: #fff;
  --brand-700: #08624f;
  --brand-600: #0b7961;
  --brand-500: #119478;
  --brand-100: #d8f1e8;
  --brand-50: #ebf8f3;
  --accent-600: #d98016;
  --accent-500: #f2a33a;
  --accent-100: #ffebc8;
  --danger-600: #b9393f;
  --danger-100: #fbe2e1;
  --info-600: #3568a7;
  --info-100: #e2ecf8;
  --warning-700: #925c0d;
  --warning-100: #fff0cf;
  --shadow-sm: 0 1px 2px rgb(7 28 31 / .06), 0 4px 12px rgb(7 28 31 / .04);
  --shadow-md: 0 16px 42px rgb(7 28 31 / .12);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --focus: 0 0 0 4px rgb(17 148 120 / .18);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--ink-50); }
body { margin: 0; min-height: 100svh; color: var(--ink-950); font: 400 15px/1.5 var(--font); }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
img, svg { display: block; }
a { color: inherit; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 26px; height: 26px; }

.button {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 18px; border-radius: var(--radius-sm); background: var(--brand-600); color: var(--white);
  font-weight: 720; letter-spacing: -.01em; cursor: pointer;
  box-shadow: 0 7px 16px rgb(11 121 97 / .18);
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.button:hover { background: var(--brand-700); box-shadow: 0 9px 20px rgb(11 121 97 / .24); }
.button:active { transform: translateY(1px); }
.button:focus-visible, .icon-button:focus-visible, .nav-item:focus-visible, .lottery-chip:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 0; box-shadow: var(--focus);
}
.button[disabled], .button[aria-disabled="true"] { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
.button--secondary { color: var(--ink-800); background: var(--white); border: 1px solid var(--ink-200); box-shadow: none; }
.button--secondary:hover { color: var(--ink-950); background: var(--ink-50); box-shadow: none; }
.button--ghost { color: var(--ink-700); background: transparent; box-shadow: none; }
.button--ghost:hover { color: var(--ink-950); background: var(--ink-100); box-shadow: none; }
.button--danger { color: var(--danger-600); background: var(--danger-100); box-shadow: none; }
.button--danger:hover { background: #f8d2d0; box-shadow: none; }
.button--large { min-height: 52px; padding-inline: 24px; border-radius: 13px; font-size: 16px; }
/* Vender sin rótulo: el `gap` del botón no puede abrirse contra un <span> vacío,
   que es como está en una venta normal. Al llenarse —«Procesando…»,
   «Reintentar venta»— el botón se ensancha solo. */
#sell-ticket { padding-inline: 18px; }
#sell-ticket-label:empty { display: none; }
.icon-button {
  width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 12px;
  color: var(--ink-600); background: transparent; cursor: pointer;
}
.icon-button:hover { color: var(--ink-950); background: var(--ink-100); }

.field { display: grid; gap: 7px; }
.field__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--ink-700); font-size: 13px; font-weight: 680; }
.field__hint { color: var(--ink-500); font-weight: 500; }
.field input, .field select {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--ink-200);
  border-radius: 12px; background: var(--white); transition: border-color .15s, box-shadow .15s;
}
.field input:hover, .field select:hover { border-color: var(--ink-300); }
.field input:focus, .field select:focus { border-color: var(--brand-500); outline: 0; box-shadow: var(--focus); }
.field input[aria-invalid="true"] { border-color: var(--danger-600); box-shadow: 0 0 0 4px rgb(185 57 63 / .12); }
.field-message { min-height: 20px; margin: 0; color: var(--danger-600); font-size: 13px; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand__mark {
  position: relative; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 12px; color: var(--white); background: var(--brand-500); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18);
}
.brand__mark::after { content: ""; position: absolute; width: 24px; height: 24px; right: -9px; bottom: -8px; border-radius: 50%; background: var(--accent-500); }
.brand__glyph { position: relative; z-index: 1; font-size: 17px; font-weight: 850; letter-spacing: -.08em; transform: translateX(-1px); }
.brand__name { font-size: 17px; font-weight: 820; letter-spacing: -.035em; }
.brand__meta { display: block; margin-top: -2px; color: var(--ink-500); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* ── Acceso ─────────────────────────────────────────────────────────────── */
.access-page {
  min-height: 100svh; display: grid; grid-template-columns: minmax(360px, .92fr) minmax(520px, 1.08fr);
  background: var(--paper);
}
.access-hero {
  position: relative; min-height: 100svh; padding: clamp(34px, 5vw, 70px);
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  color: var(--white); background: var(--ink-950);
}
.access-hero::before {
  content: ""; position: absolute; width: 480px; height: 480px; right: -250px; top: -190px;
  border: 1px solid rgb(255 255 255 / .12); border-radius: 50%; box-shadow: 0 0 0 75px rgb(255 255 255 / .025), 0 0 0 150px rgb(255 255 255 / .018);
}
.access-hero::after {
  content: ""; position: absolute; width: 210px; height: 210px; left: -105px; bottom: 70px;
  border-radius: 52px; background: linear-gradient(145deg, var(--brand-500), #12b493); transform: rotate(22deg); opacity: .28;
}
.access-hero .brand { position: relative; z-index: 1; }
.access-hero .brand__meta { color: rgb(255 255 255 / .55); }
.access-story { position: relative; z-index: 1; max-width: 540px; padding-block: 80px; }
.eyebrow { margin: 0 0 14px; color: var(--brand-500); font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.access-story h1 { margin: 0; max-width: 520px; font-size: clamp(38px, 5vw, 66px); line-height: 1.02; letter-spacing: -.055em; font-weight: 780; }
.access-story h1 em { color: var(--accent-500); font-style: normal; }
.access-story > p:not(.eyebrow) { max-width: 490px; margin: 24px 0 0; color: rgb(255 255 255 / .66); font-size: 17px; line-height: 1.65; }
.access-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 38px; }
.access-point { padding: 15px; border: 1px solid rgb(255 255 255 / .1); border-radius: 14px; background: rgb(255 255 255 / .035); }
.access-point strong { display: block; margin-bottom: 3px; font-size: 13px; }
.access-point span { color: rgb(255 255 255 / .5); font-size: 11px; }
.access-version { position: relative; z-index: 1; color: rgb(255 255 255 / .4); font: 600 11px/1 var(--mono); }

.access-main { min-height: 100svh; padding: clamp(28px, 6vw, 84px); display: grid; place-items: center; background: var(--paper); }
.access-card { width: min(100%, 520px); }
.access-card__head { margin-bottom: 30px; }
.access-card__kicker { margin: 0 0 8px; color: var(--brand-600); font-size: 12px; font-weight: 820; letter-spacing: .12em; text-transform: uppercase; }
.access-card h2 { margin: 0; font-size: clamp(28px, 4vw, 38px); line-height: 1.12; letter-spacing: -.045em; }
.access-card__intro { margin: 12px 0 0; color: var(--ink-600); font-size: 15px; }
.code-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.code-field input { height: 62px; text-align: center; font: 730 25px/1 var(--mono); letter-spacing: .19em; padding-left: calc(14px + .19em); }
.access-submit { width: 100%; margin-top: 10px; }
.inline-alert { margin: 16px 0 0; padding: 13px 14px; display: flex; gap: 10px; border-radius: 12px; color: var(--danger-600); background: var(--danger-100); font-size: 13px; }
.inline-alert[data-kind="warning"] { color: var(--warning-700); background: var(--warning-100); }
.inline-alert[data-kind="info"] { color: var(--info-600); background: var(--info-100); }
.device-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--ink-100); }
.device-id { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.device-id span { color: var(--ink-500); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.device-id code { max-width: 70%; overflow: hidden; text-overflow: ellipsis; color: var(--ink-700); font: 600 12px/1 var(--mono); }
.device-note p { margin: 12px 0 0; color: var(--ink-500); font-size: 12px; line-height: 1.55; }
.access-back { width: 100%; margin-top: 10px; }

.profile-list { display: grid; gap: 11px; }
.profile-card { padding: 15px; border: 1px solid var(--ink-200); border-radius: 15px; background: var(--white); box-shadow: var(--shadow-sm); }
.profile-card__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.profile-card__head > div { min-width: 0; }
.profile-card__head strong, .profile-card__head span { display: block; }
.profile-card__head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-900); font-size: 15px; }
.profile-card__head > div > span { margin-top: 4px; color: var(--ink-500); font-size: 11px; }
.profile-card__status { padding: 5px 8px; border-radius: 999px; color: var(--ink-600); background: var(--ink-100); font-size: 10px; font-weight: 760; white-space: nowrap; }
.profile-card__status[data-state="ready"] { color: var(--brand-700); background: var(--brand-100); }
.profile-card__status[data-state="pendiente"] { color: var(--warning-700); background: var(--warning-100); }
.profile-card__status[data-state="bloqueado"] { color: var(--danger-600); background: var(--danger-100); }
.profile-card__actions { margin-top: 13px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.profile-card__actions .button { min-height: 38px; padding-inline: 13px; font-size: 12px; }
.profile-card__active { margin-right: auto; color: var(--ink-500); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.profile-card__pending { grid-column: 1 / -1; margin-top: 8px; color: var(--warning-700); font-size: 11px; font-weight: 750; }
.profile-security-note { margin: 15px 0 0; color: var(--ink-500); font-size: 11px; line-height: 1.5; }

.approval { text-align: center; }
.approval__signal { position: relative; width: 78px; height: 78px; display: grid; place-items: center; margin: 0 auto 25px; }
.approval__signal::before, .approval__signal::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--brand-500); border-radius: 50%; animation: signal 2.1s ease-out infinite; }
.approval__signal::after { animation-delay: .7s; }
.approval__core { width: 48px; height: 48px; display: grid; place-items: center; z-index: 1; border-radius: 50%; color: var(--brand-700); background: var(--brand-100); }
@keyframes signal { from { transform: scale(.58); opacity: .75; } to { transform: scale(1.18); opacity: 0; } }
.approval__id { margin: 24px 0 7px; padding: 17px; border-radius: 13px; color: var(--ink-800); background: var(--ink-50); font: 750 18px/1.25 var(--mono); word-break: break-all; }
.approval__caption, .approval__status { margin: 0; color: var(--ink-500); font-size: 12px; }
.approval__status { min-height: 21px; margin-top: 18px; color: var(--brand-700); font-weight: 650; }
.approval .button { width: 100%; margin-top: 18px; }
.ready-mark { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 24px; border-radius: 24px; color: var(--white); background: var(--brand-500); transform: rotate(-4deg); box-shadow: 0 18px 30px rgb(17 148 120 / .22); }

/* ── Shell del POS ──────────────────────────────────────────────────────── */
.pos-page { overflow: hidden; background: var(--ink-50); }
.pos-shell { min-height: 100svh; display: grid; grid-template-columns: 84px minmax(0, 1fr); }
.pos-sidebar {
  position: relative; z-index: 20; min-height: 100svh; padding: 18px 12px;
  display: flex; flex-direction: column; align-items: center; color: rgb(255 255 255 / .72); background: var(--ink-950);
}
.pos-sidebar .brand__mark { width: 44px; height: 44px; }
.pos-nav { width: 100%; display: grid; gap: 8px; margin-top: 46px; }
.nav-item {
  position: relative; min-height: 58px; display: grid; place-items: center; gap: 2px; padding: 7px 3px;
  border-radius: 14px; color: inherit; background: transparent; cursor: pointer;
  font-size: 9px; font-weight: 720; letter-spacing: .02em;
}
.nav-item:hover { color: var(--white); background: rgb(255 255 255 / .07); }
.nav-item[aria-current="page"] { color: var(--white); background: var(--brand-600); box-shadow: 0 10px 22px rgb(0 0 0 / .18); }
.nav-item[disabled] { cursor: default; opacity: .36; }
.nav-item[disabled]:hover { color: inherit; background: transparent; }
.nav-item__key {
  position: absolute; top: 4px; left: 6px; padding: 0; border: 0; background: none;
  color: rgb(255 255 255 / .42); font: 700 8px/1 var(--mono); letter-spacing: 0;
}
.nav-item[aria-current="page"] .nav-item__key { color: rgb(255 255 255 / .72); }
.nav-item__badge { position: absolute; top: 7px; right: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-500); }
/* Separa las secciones (arriba) de las acciones sobre la venta (abajo). Es
   decoración: el role="separator" ya lo anuncia, no hace falta texto. */
.nav-separator { height: 1px; margin: 3px 6px; background: rgb(255 255 255 / .12); }
.nav-item--more { display: none; }
.sidebar-bottom { width: 100%; margin-top: auto; display: grid; gap: 8px; }

/* Ocho entradas más las dos de abajo no caben en 768 px de alto, y .pos-page
   está en overflow:hidden — lo que sobresale no se recupera con scroll, se
   pierde. Se aprieta por ALTURA de ventana, no por ancho: un monitor alto no
   tiene por qué perder el aire de la columna. */
@media (max-height: 860px) {
  .pos-nav { margin-top: 16px; }
  .nav-item { min-height: 48px; }
}

.pos-content { min-width: 0; height: 100svh; display: grid; grid-template-rows: 72px minmax(0, 1fr); overflow: hidden; }
.topbar { padding: 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--ink-100); background: rgb(251 252 248 / .94); backdrop-filter: blur(12px); }
.topbar__context { min-width: 0; }
.topbar__context span { display: block; color: var(--ink-500); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.topbar__context strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; letter-spacing: -.02em; }
.topbar__right { display: flex; align-items: center; gap: 12px; }

/* El resumen de caja: tres cifras en la barra en vez de una tarjeta lateral.
   `margin-left: auto` las empuja hasta el bloque de la derecha, así que quedan
   entre el nombre del punto y el estado de conexión sin necesidad de tocar el
   reparto de la barra. Se declaran aquí, ANTES de cualquier @media que las
   toque: con la misma especificidad gana la última regla del archivo, y una
   declaración escrita después apagaría lo que el @media enciende. */
.topbar-metrics { display: flex; align-items: center; gap: 20px; margin-left: auto; margin-right: 20px; }
.topbar-metric { display: flex; flex-direction: column; }
.topbar-metric > span { color: var(--ink-500); font-size: 9.5px; font-weight: 720; letter-spacing: .07em; text-transform: uppercase; }
.topbar-metric > strong { font: 750 17px/1.15 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-900); }
.topbar-metric--clock > strong { color: var(--brand-700); }

/* La barra se estrecha antes que las cifras dejen de caber, así que ceden por
   partes y en este orden: primero el tamaño, luego los rótulos —«$ 4,820» se
   entiende sin que ponga VENTAS encima— y por último las dos cifras de dinero.
   El reloj no se va nunca: es la hora del SERVIDOR, la que decide si una
   lotería sigue abierta, y no se puede sustituir por el reloj del equipo.
   De mayor a menor ancho, que es como tienen que ir. */
@media (max-width: 1080px) {
  .topbar-metrics { gap: 15px; margin-right: 15px; }
  .topbar-metric > strong { font-size: 15px; }
}
@media (max-width: 860px) {
  .topbar-metrics { gap: 13px; margin-right: 13px; }
  .topbar-metric > span { display: none; }
  .topbar-metric > strong { font-size: 14px; }
}
@media (max-width: 560px) {
  /* Ventas y comisión siguen consultables en Reportes; aquí ya no caben. */
  .topbar-metric:not(.topbar-metric--clock) { display: none; }
}
.connection-pill { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 11px; border-radius: 999px; color: var(--ink-600); background: var(--ink-100); font-size: 11px; font-weight: 750; }
.connection-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-500); }
.connection-pill[data-state="lista"] { color: var(--brand-700); background: var(--brand-100); }
.connection-pill[data-state="lista"] .connection-pill__dot { background: var(--brand-500); box-shadow: 0 0 0 4px rgb(17 148 120 / .12); }
.connection-pill[data-state="conectando"], .connection-pill[data-state="sincronizando"] { color: var(--info-600); background: var(--info-100); }
.connection-pill[data-state="conectando"] .connection-pill__dot, .connection-pill[data-state="sincronizando"] .connection-pill__dot { background: var(--info-600); animation: blink 1.2s ease-in-out infinite; }
.connection-pill[data-state="error"] { color: var(--warning-700); background: var(--warning-100); }
.connection-pill[data-state="error"] .connection-pill__dot { background: var(--accent-600); }
@keyframes blink { 50% { opacity: .25; } }
.operator { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 1px solid var(--ink-200); }
.operator__avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--brand-700); background: var(--brand-100); font-weight: 800; }
.operator__text { min-width: 0; max-width: 180px; }
.operator__text strong, .operator__text span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.operator__text strong { font-size: 12px; }
.operator__text span { color: var(--ink-500); font-size: 10px; }

.pos-main { min-height: 0; overflow: auto; padding: 16px; }
.workspace { width: 100%; max-width: 2100px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 21px; }
.page-heading h1 { margin: 0; font-size: clamp(27px, 3vw, 38px); line-height: 1; letter-spacing: -.05em; }
.page-heading p { margin: 7px 0 0; color: var(--ink-500); font-size: 13px; }
.shortcut { color: var(--ink-500); font: 650 11px/1 var(--mono); }
.shortcut kbd { min-width: 26px; display: inline-grid; place-items: center; margin-left: 4px; padding: 5px; border: 1px solid var(--ink-200); border-bottom-width: 2px; border-radius: 7px; background: var(--white); }

.session-banner { margin-bottom: 18px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--info-100); border-radius: 13px; color: var(--info-600); background: #f1f6fc; }
.session-banner[data-kind="warning"] { color: var(--warning-700); border-color: #f3dcae; background: #fff9eb; }
.session-banner[data-kind="danger"] { color: var(--danger-600); border-color: #f3cbc9; background: #fff4f3; }
.session-banner__text { min-width: 0; flex: 1; }
.session-banner strong { display: block; font-size: 12px; }
.session-banner span { display: block; margin-top: 1px; font-size: 11px; opacity: .82; }
.session-banner .button { min-height: 34px; padding-inline: 12px; font-size: 11px; }

/* Tres columnas, como una caja: loterías a la izquierda para verlas todas sin
   desplazar, la composición y el ticket en el centro —que es donde vive la
   operación— y la sesión a la derecha. `display: contents` deja que los tres
   bloques de .workspace-main sean celdas del mismo grid sin tocar el HTML ni
   los 106 identificadores que usa el JavaScript.
   Por debajo de 1280 px la columna de sesión se pliega bajo el ticket y el POS
   sigue siendo usable a dos columnas. */
.workspace-grid { display: grid; grid-template-columns: 272px minmax(0, 1fr) 296px; gap: 14px; align-items: start; }
.workspace-main { display: contents; }
.workspace-main > [aria-labelledby="lottery-title"] { grid-column: 1; grid-row: 1 / span 2; }
.workspace-main > [aria-labelledby="composer-title"] { grid-column: 2; grid-row: 1; }
.workspace-main > [aria-labelledby="ticket-title"] { grid-column: 2; grid-row: 2; }
.workspace-side { grid-column: 3; grid-row: 1 / span 2; min-width: 0; display: grid; gap: 12px; align-content: start; }

@media (max-width: 1280px) {
  .workspace-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .workspace-main > [aria-labelledby="ticket-title"] { grid-row: 2; }
  .workspace-side { grid-column: 1 / -1; grid-row: 3; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .workspace-main > [aria-labelledby="lottery-title"],
  .workspace-main > [aria-labelledby="composer-title"],
  .workspace-main > [aria-labelledby="ticket-title"] { grid-column: 1; grid-row: auto; }
  .workspace-side { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; }
}
.card { border: 1px solid var(--ink-100); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.card__head { min-height: 58px; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--ink-100); }
.card__head h2 { margin: 0; font-size: 13px; letter-spacing: -.015em; }
.card__head p { margin: 2px 0 0; color: var(--ink-500); font-size: 10px; }
.card__body { padding: 18px; }
.card__action { color: var(--brand-600); background: transparent; font-size: 11px; font-weight: 750; cursor: pointer; }
.card__action:hover { color: var(--brand-700); }

/* `align-content: start` no es cosmético: sin él, un grid con más alto que su
   contenido ESTIRA sus filas —`normal` se comporta como `stretch`—, y desde que
   la tarjeta reparte su alto, esta lista siempre tiene más del que ocupa. Con
   una sola lotería abierta, ese único chip medía 569 px y se comía la columna
   entera; con dos, 281 px cada uno. Y una sola lotería abierta no es un caso
   raro: es el final de cada jornada, cuando ya han cerrado casi todas. */
.lottery-list { display: grid; align-content: start; gap: 6px; overflow-y: auto; max-height: min(52vh, 460px); padding: 2px; scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; }
.lottery-empty { width: 100%; min-height: 78px; display: grid; place-items: center; color: var(--ink-500); font-size: 12px; text-align: center; }
/* Dos columnas: la marca de la lotería y, a su derecha, nombre y hora. La
   marca va DELANTE porque es lo que se busca de un vistazo —muchos vendedores
   reconocen el logo sin llegar a leer el nombre—, y al final se leería después
   del nombre, que es justo lo que se quiere evitar. */
.lottery-chip {
  --lottery: var(--brand-500); position: relative; width: 100%; min-height: 54px; padding: 9px 16px 9px 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center;
  gap: 1px 10px; overflow: hidden; text-align: left;
  border: 1px solid var(--ink-100); border-radius: 13px; color: var(--ink-800); background: var(--white); cursor: pointer;
}
/* La barra de color se muda al borde DERECHO. Con la marca delante, el borde
   izquierdo llevaba dos distintivos pegados y ninguno se leía bien; separados,
   cada uno hace su trabajo: el color ordena la columna de un vistazo y la marca
   identifica la lotería. */
.lottery-chip::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 4px; background: var(--lottery); }
.lottery-chip .lottery-mark { grid-column: 1; grid-row: 1 / span 2; }
.lottery-chip strong { grid-column: 2; grid-row: 1; }
.lottery-chip__time { grid-column: 2; grid-row: 2; }

/* La marca: iniciales mientras no hay logo, y el logo encima cuando llega.
   Los colores salen del de la lotería con `color-mix` en vez de ser blanco
   sobre el color a pelo: hay loterías de naranja y de amarillo, y ahí el texto
   blanco se pierde. Fondo claro y texto oscuro se leen con cualquiera. */
.lottery-mark {
  width: 32px; height: 32px; display: grid; place-items: center; overflow: hidden;
  border-radius: 50%; border: 1px solid color-mix(in srgb, var(--lottery) 30%, white);
  background: color-mix(in srgb, var(--lottery) 12%, white);
  color: color-mix(in srgb, var(--lottery) 72%, black);
  font: 800 12px/1 var(--mono); letter-spacing: .02em;
}
/* Con logo, el disco es solo el marco: fondo neutro para no teñir la marca
   ajena, y `contain` para que un logo rectangular no se recorte. */
.lottery-mark--logo { padding: 2px; background: var(--white); border-color: var(--ink-100); }
.lottery-mark img { width: 100%; height: 100%; object-fit: contain; }
.lottery-chip:hover { border-color: var(--ink-300); background: var(--ink-50); }
.lottery-chip[aria-pressed="true"] { color: var(--ink-950); border-color: color-mix(in srgb, var(--lottery) 58%, white); background: color-mix(in srgb, var(--lottery) 9%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lottery) 24%, transparent); }
.lottery-chip strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; letter-spacing: -.01em; }
.lottery-chip__time { color: var(--ink-500); font: 600 12px/1.35 var(--mono); font-variant-numeric: tabular-nums; }
.lottery-chip[aria-pressed="true"] .lottery-chip__time { color: var(--ink-700); }
/* La que todavía no abre. Se ve porque el vendedor necesita saber que existe y
   a qué hora entra; no se puede pulsar porque coresoc la rechaza igual que a
   una cerrada (`LoteriaConfig::cerrada()` cierra por los dos lados). */
.lottery-chip[data-state="por-abrir"] { opacity: .52; cursor: default; background: var(--ink-50); }
.lottery-chip[data-state="por-abrir"]:hover { border-color: var(--ink-200); background: var(--ink-50); }
.lottery-chip[data-state="por-abrir"] .lottery-chip__time { color: var(--warning-700); font-weight: 700; }

.composer { display: grid; grid-template-columns: minmax(190px, 1.7fr) minmax(140px, .9fr) auto; gap: 12px; align-items: end; }
.composer .field input, .composer .field select { min-height: 58px; font-size: 16px; }
.composer__number input { font: 650 26px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.composer__amount { position: relative; }
.composer__amount input { padding-left: 52px; font: 650 26px/1 var(--mono); font-variant-numeric: tabular-nums; }
.currency-prefix { position: absolute; left: 15px; bottom: 19px; max-width: 34px; overflow: hidden; color: var(--ink-500); font: 700 15px/1 var(--mono); }
/* El botón de agregar dejó de ser un rótulo: es el «+» y nada más, así que su
   ancho mínimo baja de 130 px a un cuadrado del alto de los campos. Esos ~74 px
   que suelta se los queda el número, que es lo que se teclea. */
.composer > .button { min-width: 58px; min-height: 58px; font-size: 15.5px; }
.button--icon { padding: 0; }
.button--icon .icon { width: 24px; height: 24px; stroke-width: 2.2; }

.ticket-card { min-height: 310px; display: flex; flex-direction: column; }
.ticket-lines { min-height: 180px; max-height: min(46vh, 430px); overflow: auto; }
.ticket-empty { min-height: 210px; padding: 35px; display: grid; place-items: center; text-align: center; }
.ticket-empty__icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 17px; color: var(--ink-500); background: var(--ink-50); }
.ticket-empty strong { display: block; font-size: 13px; }
.ticket-empty span { display: block; max-width: 320px; margin-top: 4px; color: var(--ink-500); font-size: 11px; }
.ticket-row { display: grid; grid-template-columns: minmax(115px, 1fr) minmax(70px, .55fr) minmax(80px, .65fr) minmax(86px, .65fr) 34px; gap: 10px; align-items: center; min-height: 34px; padding: 3px 16px; border-bottom: 1px solid var(--ink-100); }
.ticket-row:last-child { border-bottom: 0; }
.ticket-row__lottery { min-width: 0; }
.ticket-row strong, .ticket-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-row strong { display: block; font-size: 14.5px; }
.ticket-row small { display: block; color: var(--ink-500); font-size: 11.5px; }
.ticket-row__number { font: 700 17px/1 var(--mono); font-variant-numeric: tabular-nums; }
.ticket-row__type { color: var(--ink-700); font-size: 11.5px; font-weight: 750; }
.ticket-row__amount { text-align: right; font: 650 16px/1 var(--mono); font-variant-numeric: tabular-nums; }
.ticket-row .icon-button { width: 30px; height: 30px; border-radius: 8px; color: var(--ink-500); }
.ticket-row .icon-button:hover { color: var(--danger-600); background: var(--danger-100); }
/* Jugada cuya lotería cerró después de agregarla: el servidor rechazará la
   venta entera y esta es la única señal de cuál es la línea culpable. */
.ticket-row[data-state="cerrada"] { background: var(--danger-100); }
.ticket-row[data-state="cerrada"] strong { min-width: 0; color: var(--danger-600); }
/* En fila y no debajo: el `strong` es `display: block`, y un aviso apilado le
   costaría a CADA fila marcada el doble de alto en un monitor de 768. */
.ticket-row[data-state="cerrada"] .ticket-row__lottery { display: flex; align-items: center; gap: 6px; }
.ticket-row__closed { flex: none; padding: 0 6px; border-radius: 6px; color: var(--white); background: var(--danger-600); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ticket-warning { display: flex; align-items: center; gap: 9px; margin: 8px 16px; padding: 9px 12px; border-radius: 10px; color: var(--danger-600); background: var(--danger-100); font-size: 12.5px; font-weight: 650; }
.ticket-warning .icon { flex: none; width: 17px; height: 17px; }
.ticket-footer { margin-top: auto; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--ink-100); background: var(--ink-50); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.ticket-total span { display: block; color: var(--ink-600); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
/* 32 px y no 44. El total tiene que seguir siendo la cifra más grande de la
   pantalla —el composer usa 26— pero a 44 dominaba el pie entero y se comía una
   fila de jugadas. 32 es además el punto donde deja de mandar: por debajo de
   unos 37 el alto del pie lo marca el botón de vender, así que achicar más la
   cifra no gana ni un píxel. El interletraje se suelta de -.045 a -.03, que era
   compensación de un tamaño que ya no está. */
.ticket-total strong { display: block; margin-top: 2px; font: 800 32px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.ticket-actions { display: flex; gap: 8px; }

.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.metric { min-width: 0; padding: 11px 13px; border: 1px solid var(--ink-100); border-radius: 11px; background: var(--ink-50); }
.metric span { display: block; color: var(--ink-600); font-size: 10px; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }
.metric strong { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; font: 750 21px/1 var(--mono); font-variant-numeric: tabular-nums; }
.metric--wide { grid-column: 1 / -1; }
.activity-list { display: grid; }
.activity-empty { padding: 28px 18px; color: var(--ink-500); font-size: 11px; text-align: center; }
/* Es un <button>: la fila abre su ticket. De ahí el reset de fondo, ancho y
   alineación, que un div no necesitaba. */
.activity-item { width: 100%; padding: 9px 14px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; border-bottom: 1px solid var(--ink-100); background: transparent; text-align: left; cursor: pointer; }
.activity-item:last-child { border-bottom: 0; }
.activity-item:hover { background: var(--ink-50); }
.activity-item:focus-visible { outline: 0; box-shadow: var(--focus); }
.activity-item__mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--brand-700); background: var(--brand-100); }
/* Un ticket anulado no lleva el visto de una venta buena, y uno premiado se
   distingue del montón: este panel es lo único que resume el día de un vistazo. */
.activity-item__mark[data-estado="anulado"] { color: var(--danger-600); background: var(--danger-100); }
.activity-item__mark[data-estado="ganador"] { color: var(--accent-600); background: var(--accent-100); }
.activity-item strong, .activity-item span { display: block; }
.activity-item strong { font-size: 13px; }
.activity-item span { color: var(--ink-500); font-size: 11.5px; }
.activity-item > strong { font: 700 14px/1 var(--mono); font-variant-numeric: tabular-nums; }

/* ── Consultas y reportes ───────────────────────────────────────────────── */
.feature-toolbar {
  margin-bottom: 18px; padding: 15px; display: flex; align-items: end; justify-content: space-between; gap: 18px;
  border: 1px solid var(--ink-100); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm);
}
.filter-form { display: flex; align-items: end; gap: 10px; }
.filter-form--standalone { justify-content: flex-start; }
.field--compact { min-width: 150px; gap: 5px; }
.field--compact .field__label { font-size: 11px; }
.field--compact input, .field--compact select { min-height: 42px; }
.feature-toolbar .button { min-height: 42px; }
.ticket-search { min-width: min(100%, 390px); display: flex; align-items: end; gap: 8px; }
.ticket-search .field { flex: 1; }
.ticket-search input { font-family: var(--mono); letter-spacing: .04em; }
.ticket-search { flex-wrap: wrap; }
.ticket-search__keys { flex-basis: 100%; margin: 0; color: var(--ink-500); font-size: 12px; }
.ticket-search__keys kbd { padding: 1px 5px; border: 1px solid var(--ink-200); border-bottom-width: 2px; border-radius: 5px; background: var(--white); font: 700 11px/1.3 var(--mono); }
.ticket-search[data-intencion] .ticket-search__keys { color: var(--ink-800); font-weight: 700; }
/* Sin teclado físico (táctil) los atajos no existen: no se anuncian. */
@media (pointer: coarse) {
  .nav-item__key, .ticket-search__keys { display: none; }
}
.data-card { overflow: hidden; }
.card__metric { color: var(--ink-800); font: 750 13px/1 var(--mono); white-space: nowrap; }
.data-list { display: grid; min-height: 94px; }
.data-empty { min-height: 94px; padding: 24px; display: grid; place-items: center; color: var(--ink-500); font-size: 12px; text-align: center; }
.data-empty--card { min-height: 190px; border: 1px dashed var(--ink-200); border-radius: var(--radius-md); background: var(--white); }
.data-row {
  width: 100%; min-height: 64px; padding: 10px 17px; display: grid; align-items: center; gap: 14px;
  color: var(--ink-800); background: var(--white); border-bottom: 1px solid var(--ink-100); text-align: left;
}
button.data-row { cursor: pointer; }
button.data-row:hover { background: var(--ink-50); }
.data-row:last-child { border-bottom: 0; }
.ticket-list-row { grid-template-columns: minmax(180px, 1fr) auto minmax(130px, auto); }
.data-row__primary, .data-row__amount { min-width: 0; display: block; }
.data-row__primary strong, .data-row__primary small, .data-row__amount strong, .data-row__amount small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-row__primary strong { font: 730 12px/1.35 var(--mono); }
.data-row__primary small, .data-row__amount small { margin-top: 2px; color: var(--ink-500); font-size: 9px; }
.data-row__amount { text-align: right; }
.data-row__amount strong { font: 730 12px/1.3 var(--mono); }
.status-chip { padding: 5px 9px; border-radius: 999px; font-size: 9px; font-weight: 780; }
.status-chip[data-state="pending"] { color: var(--info-600); background: var(--info-100); }
.status-chip[data-state="winner"] { color: var(--brand-700); background: var(--brand-100); }
.status-chip[data-state="loser"], .status-chip[data-state="unknown"] { color: var(--ink-600); background: var(--ink-100); }
.status-chip[data-state="void"] { color: var(--danger-600); background: var(--danger-100); }

.draw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 15px; }
.draw-card { overflow: hidden; }
.draw-card__head { min-height: 66px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ink-100); }
.draw-card__head h2 { margin: 0; font-size: 14px; }
.draw-card__head span { display: block; margin-top: 2px; color: var(--ink-500); font-size: 9px; text-transform: capitalize; }
.draw-card__date { font: 650 10px/1 var(--mono); white-space: nowrap; }
.draw-cells { padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 9px; }
.draw-cell { min-height: 74px; padding: 10px; display: grid; place-items: center; align-content: center; border-radius: 13px; color: var(--brand-700); background: var(--brand-50); text-align: center; }
.draw-cell[data-pending="true"] { color: var(--ink-500); background: var(--ink-50); }
.draw-cell span { font-size: 9px; font-weight: 700; }
.draw-cell strong { margin-top: 4px; font: 800 22px/1 var(--mono); letter-spacing: .04em; }

.report-metrics { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.report-metrics .metric { min-height: 82px; padding: 17px; border: 1px solid var(--ink-100); background: var(--white); box-shadow: var(--shadow-sm); }
.report-metrics .metric strong { font-size: 17px; }
.report-metrics .metric--accent { color: var(--brand-700); border-color: var(--brand-100); background: var(--brand-50); }
.report-metrics--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.report-grid { margin-bottom: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.data-table-wrap { min-height: 120px; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.data-table th, .data-table td { padding: 11px 14px; border-bottom: 1px solid var(--ink-100); text-align: left; white-space: nowrap; }
.data-table th { color: var(--ink-500); background: var(--ink-50); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .numeric { text-align: right; font-family: var(--mono); }
.balance-card { margin-top: 18px; overflow: hidden; }
/* Pantalla Balance: liquidación como hoja de cuentas y desglose plegable. */
.balance-side { display: grid; gap: 18px; }
.balance-sheet { margin: 0; padding: 6px 16px 12px; }
.balance-sheet__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ink-100); }
.balance-sheet__row:last-child { border-bottom: 0; }
.balance-sheet__row dt { color: var(--ink-600); }
.balance-sheet__row dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 650; }
.balance-sheet__row--strong dt, .balance-sheet__row--strong dd { color: var(--ink-900); font-weight: 750; }
.balance-sheet__row--total { margin-top: 4px; border-top: 2px solid var(--ink-200); }
.balance-sheet__row--total dt, .balance-sheet__row--total dd { color: var(--brand-700); font-size: 16px; font-weight: 800; }
.balance-days { border-top: 1px solid var(--ink-100); }
.balance-days summary { padding: 10px 16px; cursor: pointer; font-weight: 650; }
.balance-facts { padding: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.balance-facts > div { padding: 12px; border-radius: 11px; background: var(--ink-50); }
.balance-facts span, .balance-facts strong { display: block; }
.balance-facts span { color: var(--ink-500); font-size: 9px; }
.balance-facts strong { margin-top: 4px; font: 720 11px/1.2 var(--mono); }
.topup-row { grid-template-columns: 38px minmax(145px, .65fr) minmax(180px, 1.35fr) minmax(120px, auto); }
.topup-row__mark { --provider: var(--brand-500); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--white); background: var(--provider); font-size: 12px; font-weight: 800; }
.topup-row__detail { min-width: 0; overflow: hidden; color: var(--ink-600); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.ticket-dialog { width: min(92vw, 430px); padding: 0; border: 0; border-radius: 22px; background: var(--white); box-shadow: var(--shadow-md); }
.ticket-dialog::backdrop { background: rgb(7 28 31 / .62); backdrop-filter: blur(4px); }
.receipt { padding: 28px; }
.receipt__success { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 19px; border-radius: 17px; color: var(--brand-700); background: var(--brand-100); }
.receipt h2 { margin: 0; font-size: 24px; letter-spacing: -.04em; }
.receipt__number { margin: 18px 0; padding: 14px; border: 1px dashed var(--ink-300); border-radius: 12px; background: var(--ink-50); text-align: center; font: 750 17px/1.3 var(--mono); word-break: break-all; }
.receipt__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.receipt__fact { padding: 12px; border-radius: 11px; background: var(--ink-50); }
.receipt__fact span { display: block; color: var(--ink-500); font-size: 9px; text-transform: uppercase; }
.receipt__fact strong { display: block; margin-top: 3px; font: 700 12px/1.2 var(--mono); }
.receipt__actions { display: flex; gap: 9px; margin-top: 20px; }
.receipt__actions .button { flex: 1; }
.detail-dialog { width: min(94vw, 620px); max-height: min(92svh, 850px); padding: 0; overflow: auto; border: 0; border-radius: 22px; background: var(--white); box-shadow: var(--shadow-md); }
.detail-dialog::backdrop { background: rgb(7 28 31 / .62); backdrop-filter: blur(4px); }
.detail-sheet { padding: 24px; }
.detail-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.detail-sheet__eyebrow { color: var(--brand-600); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.detail-sheet h2 { margin: 3px 0 0; font: 780 19px/1.2 var(--mono); letter-spacing: -.03em; word-break: break-all; }
.detail-state { margin: 18px 0 12px; padding: 10px 12px; border-radius: 10px; color: var(--info-600); background: var(--info-100); font-size: 10px; }
.detail-state[data-kind="error"] { color: var(--danger-600); background: var(--danger-100); }
.detail-state[data-kind="ok"] { color: var(--brand-700); background: var(--brand-100); }
.detail-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.detail-facts > div { min-width: 0; padding: 11px; border-radius: 11px; background: var(--ink-50); }
.detail-facts span, .detail-facts strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-facts span { color: var(--ink-500); font-size: 8px; text-transform: uppercase; }
.detail-facts strong { margin-top: 3px; font: 700 10px/1.2 var(--mono); }
.detail-facts strong[data-state="winner"] { color: var(--brand-700); }
.detail-facts strong[data-state="void"] { color: var(--danger-600); }
.detail-plays { max-height: 310px; margin-top: 14px; overflow: auto; border: 1px solid var(--ink-100); border-radius: 12px; }
.detail-play { min-height: 48px; padding: 8px 11px; display: grid; grid-template-columns: minmax(110px, 1fr) minmax(70px, .55fr) minmax(85px, auto); gap: 10px; align-items: center; border-bottom: 1px solid var(--ink-100); }
.detail-play:last-child { border-bottom: 0; }
.detail-play span strong, .detail-play span small { display: block; }
.detail-play span strong { font-size: 10px; }
.detail-play span small { color: var(--ink-500); font-size: 8px; }
.detail-play > strong { text-align: right; font: 720 10px/1 var(--mono); }
.detail-play__number { font-size: 14px !important; }
.critical-confirm { margin-top: 14px; padding: 14px; border: 1px solid #f3cbc9; border-radius: 13px; background: #fff7f6; }
.critical-confirm > strong, .critical-confirm > span { display: block; }
.critical-confirm > strong { color: var(--danger-600); font-size: 12px; }
.critical-confirm > span { margin-top: 4px; color: var(--ink-600); font-size: 10px; }
.critical-confirm > div { margin-top: 12px; display: flex; justify-content: flex-end; gap: 8px; }
.critical-confirm .button { min-height: 38px; font-size: 10px; }
.detail-sheet__actions { margin-top: 16px; display: flex; justify-content: flex-end; gap: 8px; }
.detail-sheet__actions .button { min-height: 40px; font-size: 11px; }
.toast-region { position: fixed; z-index: 100; right: 22px; bottom: 22px; width: min(390px, calc(100vw - 44px)); display: grid; gap: 9px; pointer-events: none; }
.toast { padding: 13px 14px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--ink-200); border-radius: 13px; color: var(--ink-800); background: var(--white); box-shadow: var(--shadow-md); animation: toast-in .2s ease-out; pointer-events: auto; font-size: 12px; }
.toast[data-kind="error"] { color: var(--danger-600); border-color: #f3cbc9; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

/* Aquí NO colapsa el workspace. Las dos columnas llegan hasta 900 px, y el
   único sitio donde se pliega la rejilla de venta es el bloque de 900.
   Que quede escrito, porque volver a poner aquí un colapso cuesta caro:
   este bloque tuvo `grid-template-columns: minmax(0, 1fr)` y declaraba UNA
   columna sin traerse el reset de colocación que sí lleva el de 900. Composer
   y ticket seguían pidiendo `grid-column: 2`, el grid se la inventaba como
   columna implícita —tamaño `auto`, o sea, todo lo que su contenido pida— y a
   la de loterías, que es `minmax(0, 1fr)` y por tanto puede encoger hasta
   cero, no le quedaba nada. Entre 901 y 1080 px la lista se aplastaba y se
   descomprimía de golpe al cruzar los 900. Es decir, se rompía justo en
   1024×768, que es el monitor por el que se quitaron las cabeceras.
   Con el colapso se fue su `.composer` de cuatro tracks —el cuarto no lo usaba
   nadie—, escrita para un composer a
   pantalla completa y sin los mínimos de 190/140 px que impiden que los campos
   se encojan. En dos columnas la regla base cabe de sobra y sí los protege.
   `.workspace-side` no se repite: el bloque de 1280 ya lo deja a `1fr 1fr` en
   todo este rango. */
@media (max-width: 1080px) {
  .report-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .access-page { grid-template-columns: 1fr; }
  .access-hero { display: none; }
  .access-main { padding: 34px 22px; }
  .access-card::before { content: "corewebp · punto de venta"; display: block; margin-bottom: 54px; color: var(--ink-700); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

  .pos-page { overflow: auto; }
  .pos-shell { min-height: 100svh; grid-template-columns: 1fr; padding-bottom: 70px; }
  .pos-sidebar { position: fixed; inset: auto 0 0; z-index: 40; min-height: 0; height: 68px; padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); flex-direction: row; border-top: 1px solid rgb(255 255 255 / .08); }
  .pos-sidebar > .brand, .sidebar-bottom { display: none; }
  .pos-nav { margin: 0; display: flex; justify-content: space-around; gap: 5px; }
  .nav-item { flex: 1; min-height: 52px; }
  .nav-item .icon { width: 19px; height: 19px; }

  /* La barra inferior aguanta cinco botones y hay ocho. Se quedan fijos los
     cuatro caminos que se usan vendiendo, y el quinto abre el resto: repartir
     ocho a `flex: 1` parte los rótulos en dos líneas y deja cada icono en un
     ancho que no se acierta con el pulgar. */
  .pos-nav > [data-overflow], .nav-separator { display: none; }
  .nav-item--more { display: grid; }
  .pos-sidebar[data-more="open"] {
    height: auto; max-height: 78svh; overflow-y: auto; flex-direction: column; gap: 8px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0; box-shadow: 0 -18px 40px rgb(0 0 0 / .35);
  }
  .pos-sidebar[data-more="open"] .pos-nav,
  .pos-sidebar[data-more="open"] .sidebar-bottom {
    width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  }
  /* Abierto sí aparece «Salir», que en la barra cerrada vive en .sidebar-bottom
     y quedaba fuera de alcance en teléfono. */
  .pos-sidebar[data-more="open"] .sidebar-bottom { margin-top: 0; padding-top: 8px; border-top: 1px solid rgb(255 255 255 / .12); }
  .pos-sidebar[data-more="open"] .pos-nav > [data-overflow] { display: grid; }
  /* Cierra el panel, así que va al final de las entradas y no partiendo la
     rejilla por la mitad, que es donde lo deja el orden del documento. */
  .pos-sidebar[data-more="open"] .nav-item--more { order: 9; grid-column: 1 / -1; }
  .pos-content { height: auto; min-height: calc(100svh - 70px); grid-template-rows: 64px auto; overflow: visible; }
  .topbar { position: sticky; top: 0; z-index: 30; padding: 0 16px; }
  .operator__text { display: none; }
  .operator { padding-left: 8px; }
  .pos-main { min-height: auto; overflow: visible; padding: 18px 15px; }
  .page-heading { align-items: center; }
  .page-heading .shortcut { display: none; }
  .workspace-side { grid-template-columns: 1fr; }
  .feature-toolbar { align-items: stretch; flex-direction: column; }
  .filter-form, .ticket-search { width: 100%; min-width: 0; }
  .ticket-search .field { min-width: 0; }
  .balance-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .code-fields { grid-template-columns: 1fr; }
  .access-card__head { margin-bottom: 24px; }
  .access-card h2 { font-size: 30px; }
  .connection-pill { width: 34px; padding: 0; justify-content: center; }
  .connection-pill__label { display: none; }
  .topbar__context strong { max-width: 180px; }
  .composer { grid-template-columns: 1fr 1fr; }
  .composer__number { grid-column: 1 / -1; }
  .composer__type { grid-column: 1 / 2; }
  .composer > .button { grid-column: 2 / 3; }
  .ticket-row { grid-template-columns: minmax(90px, 1fr) 65px 65px 30px; }
  .ticket-row__type { display: none; }
  .ticket-footer { align-items: stretch; flex-direction: column; }
  .ticket-actions .button { flex: 1; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-metrics--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ticket-list-row { grid-template-columns: minmax(150px, 1fr) auto; }
  .ticket-list-row .status-chip { display: none; }
  .topup-row { grid-template-columns: 36px minmax(120px, 1fr) minmax(110px, auto); }
  .topup-row__detail { display: none; }
  .detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .access-main { place-items: start center; padding-top: 28px; }
  .access-card::before { margin-bottom: 38px; }
  .device-id { align-items: flex-start; flex-direction: column; gap: 7px; }
  .device-id code { max-width: 100%; }
  .topbar__context span { display: none; }
  .topbar__context strong { max-width: 145px; font-size: 14px; }
  .operator { border: 0; }
  .operator__avatar { width: 33px; height: 33px; }
  .page-heading h1 { font-size: 28px; }
  .composer { grid-template-columns: 1fr; }
  .composer__number, .composer > .button { grid-column: 1; }
  .ticket-row { grid-template-columns: minmax(80px, 1fr) 60px 30px; }
  .ticket-row__type, .ticket-row__amount { display: none; }
  .ticket-actions { flex-direction: column; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric--wide { grid-column: auto; }
  .receipt__facts { grid-template-columns: 1fr; }
  .filter-form { display: grid; grid-template-columns: 1fr 1fr; }
  .filter-form .button { grid-column: 1 / -1; }
  .ticket-search { display: grid; grid-template-columns: 1fr; }
  .ticket-list-row { grid-template-columns: minmax(120px, 1fr) minmax(95px, auto); }
  .data-row { padding-inline: 13px; }
  .data-row__primary strong { font-size: 10px; }
  .report-metrics--compact { grid-template-columns: 1fr; }
  .balance-facts { grid-template-columns: 1fr; }
  .topup-row { grid-template-columns: 34px minmax(100px, 1fr) minmax(90px, auto); gap: 9px; }
  .detail-dialog { width: 100vw; max-width: none; max-height: 94svh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .detail-sheet { padding: 18px 15px calc(18px + env(safe-area-inset-bottom)); }
  .detail-sheet h2 { font-size: 15px; }
  .detail-play { grid-template-columns: minmax(90px, 1fr) 60px 76px; }
  .detail-sheet__actions { flex-wrap: wrap; }
  .detail-sheet__actions .button { flex: 1; }
}

/* Copiar y Combinar: formularios de selección dentro del diálogo estrecho. */
.pick-sheet { text-align: left; max-height: min(88vh, 760px); overflow-y: auto; }
.pick-sheet h2, .pick-sheet > p:first-of-type { text-align: center; }
.pick-sheet .field-message { color: var(--danger-600); }
.pick-sheet__warning { padding: 10px 12px; border-radius: 10px; color: var(--warning-700) !important; background: #fff9eb; }
.pick-sheet__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.choice-group { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.choice-group legend { width: 100%; padding: 0; margin-bottom: 6px; text-align: left; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; max-height: 220px; overflow-y: auto; }
.choice-list { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; }
.choice { display: flex; align-items: center; gap: 8px; color: var(--ink-700); font-size: 14px; }
.choice--amount { justify-content: space-between; }
.choice--amount label { display: flex; align-items: center; gap: 8px; }
.choice--amount input[type="text"] { width: 110px; min-height: 36px; padding: 0 10px; border: 1px solid var(--ink-200); border-radius: 9px; text-align: right; }
.choice--amount input[type="text"]:disabled { background: var(--ink-50); }
.choice--all { padding-bottom: 6px; border-bottom: 1px solid var(--ink-100); font-weight: 700; }
.choice-empty { margin: 0; color: var(--ink-500); font-size: 13px; }

/* Recargas: acciones, diálogo por pasos y anulación en el historial. */
.services-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.service-body { display: grid; gap: 12px; }
.service-sheet .field-message[data-kind="info"] { color: var(--info-600); }
.service-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.service-facts dt { color: var(--ink-500); font-size: 13px; text-align: left; }
.service-facts dd { margin: 0; color: var(--ink-900); font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.service-note { margin: 0; color: var(--ink-700) !important; font-size: 14px; }
.service-note--error { color: var(--danger-600) !important; }
.service-note--warning { padding: 10px 12px; border-radius: 10px; color: var(--warning-700) !important; background: #fff9eb; }
.topup-row__void { justify-self: end; }
.button--small { min-height: 30px; margin-top: 4px; padding: 0 10px; font-size: 12px; }

/* Impresora del equipo. El ticket sale por ESC/POS (JSPrintManager); ya no
   hay hoja de impresión del navegador que maquetar. */
.printer-settings { text-align: left; }
.printer-settings h2, .printer-settings > p:first-of-type { text-align: center; }
/* `.type-choice p` es más específico que `.field-message` y lo dejaba en gris. */
.printer-settings .field-message { color: var(--danger-600); }
.printer-settings .field-message[data-kind="info"] { color: var(--info-600); }
.printer-settings__check { display: flex; align-items: center; gap: 10px; color: var(--ink-700); font-size: 14px; }
.printer-settings__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ── Atajos impresos en los botones ─────────────────────────────────────────
   El POS se opera con teclado. La ayuda de la cabecera seguía existiendo, pero
   un atajo se aprende donde se usa, no en una leyenda aparte. */
.button kbd, .icon-button kbd {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; margin-left: 10px;
  padding: 0 6px; border-radius: 6px; background: rgb(255 255 255 / .18);
  font: 700 11px/1 var(--mono); letter-spacing: .02em;
}
.button--secondary kbd, .button--ghost kbd { background: var(--ink-100); color: var(--ink-700); }


/* ── Elegir modalidad cuando el servidor no puede decidir ───────────────────
   Aparece en un solo caso (MAR/PLE sobre cuatro dígitos), así que se optimiza
   para resolverse de un vistazo y de un toque: dos botones grandes, sin
   desplegables ni texto que leer. */
.type-choice { padding: 26px 26px 22px; display: grid; gap: 14px; justify-items: stretch; text-align: center; }
.type-choice h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.type-choice p { margin: 0; color: var(--ink-600); font-size: 14px; }
.type-choice__options { display: grid; grid-auto-flow: column; gap: 12px; margin-top: 4px; }
.type-choice__options .button { min-height: 64px; font-size: 18px; font-weight: 750; }

/* Sin encabezado de página en la venta: en un monitor de 768 px de alto, esos
   72 px eran una fila y media del ticket. Las demás vistas lo conservan. */
#view-venta > .session-banner:first-child { margin-top: 0; }


/* ── La venta cabe en la pantalla, sea la que sea ───────────────────────────
   Muchos puestos siguen con monitores de 1024x768. Con alturas fijas la
   pantalla medía 920 px y obligaba a hacer scroll de página en mitad de una
   venta — justo cuando hay que mirar el total.

   La regla pasa a ser: la vista ocupa el alto disponible y NADA desplaza la
   página; lo que no cabe se desplaza DENTRO de su panel, que es como se
   comporta una caja. El ticket se queda con todo el espacio sobrante, así que
   en un monitor grande enseña más jugadas y en uno pequeño sigue enseñando el
   total y el botón de vender sin moverse. */
/* La vista reparte su alto con flex y no con porcentajes: el banner de estado
   aparece y desaparece, y con `height: 100%` en la rejilla el conjunto sumaba
   el banner DE MÁS y empujaba el total y el botón de vender fuera de la
   pantalla — justo lo que este reparto venía a evitar. */
#view-venta { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
#view-venta > .session-banner { flex: none; }
#view-venta .workspace-grid { flex: 1; min-height: 0; align-items: stretch; grid-template-rows: auto minmax(0, 1fr); }
#view-venta .workspace-main > [aria-labelledby="ticket-title"] { min-height: 0; }

/* La tarjeta de loterías reparte su alto de verdad: la lista se desplaza por
   dentro y el pie con el recuento se queda pegado abajo.
   Esto ya se intentaba —la lista lleva `flex: 1` y `.lottery-foot` lleva
   `flex: none`— pero no surtía ningún efecto, porque el contenedor de ambos es
   un bloque y en un bloque `flex` no significa nada. La lista crecía hasta su
   contenido y empujaba el pie fuera de la tarjeta. No era cosa de un ancho
   concreto: pasaba en todos, solo que en un monitor alto sobra sitio y no se
   ve. En 1024×768 sí se veía, y de sobra. */
#view-venta .workspace-main > [aria-labelledby="lottery-title"] {
  min-height: 0; display: flex; flex-direction: column;
}
#view-venta .workspace-main > [aria-labelledby="lottery-title"] > .card__body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
#view-venta .lottery-list { max-height: none; min-height: 0; flex: 1; overflow-y: auto; }
#view-venta .ticket-lines { max-height: none; min-height: 0; flex: 1; }
#view-venta .card__body { min-height: 0; }

/* Por debajo de 1280 la venta CONSERVA el alto completo. Antes lo soltaba
   —`height: auto`, lista de loterías tapada a 240 px— porque la columna de
   sesión se plegaba como tercera fila y no quedaba alto que repartir. El
   precio era alto justo donde más duele: en 1024×768 se veían 3 de 10
   loterías y había que desplazar la página para llegar al botón de vender.
   Ahora se paga al revés: la actividad reciente sale de la pantalla de venta
   —es historial, y su sitio es la vista de Tickets—, mientras que las tres
   cifras de caja siguen a la vista porque viven en la barra superior.
   Medido a 1024×768: de 3 a 9 loterías, de 9 a 10 jugadas, y sin desplazar. */
@media (max-width: 1280px) {
  .workspace-side { display: none; }
}

/* Por debajo de 860 el POS deja de repartir alto: la barra lateral se va abajo
   y la página vuelve a desplazarse, que es el diseño de siempre para un
   teléfono. Ahí las dos listas necesitan tope propio, o se despliegan enteras
   —un catálogo de 40 loterías o un ticket de 80 jugadas dejarían el resto de
   la pantalla a varios dedos de distancia—. Estos topes vivían en el bloque de
   1280 que se acaba de retirar; sin ellos el móvil se quedaba sin ninguno. */
@media (max-width: 860px) {
  #view-venta .lottery-list { max-height: 260px; flex: none; }
  #view-venta .ticket-lines { max-height: min(46vh, 430px); flex: none; }
}

/* El panel de composición pierde su párrafo de ayuda en pantallas bajas: son
   38 px que valen más como fila del ticket. */
@media (max-height: 820px) {
  [aria-labelledby="composer-title"] .card__head p,
  [aria-labelledby="lottery-title"] .card__head p { display: none; }
  .composer { gap: 10px; }
}


/* ── Sin cabeceras en la venta ──────────────────────────────────────────────
   «Loterías disponibles», «Agregar jugada» y «Ticket actual» decían lo que ya
   dicen los campos que tienen debajo, y cada una costaba una franja completa.
   En un monitor de 768 px de alto eso eran tres filas del ticket.

   Los títulos siguen en el marcado como `.sr-only`: el lector de pantalla los
   necesita para anunciar cada región, y el `aria-labelledby` de las tarjetas
   —que además es lo que coloca las columnas del grid— apunta a ellos. */
.card > .card__body:first-of-type { border-top: 0; }

/* El pie de la lista solo lleva el recuento: «Seleccionar todas» se retiró por
   decisión —marcar loterías es un gesto deliberado, y un botón que las marca
   todas de golpe invita a vender en loterías que nadie pidió—. */
.lottery-foot {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 8px 12px 10px; border-top: 1px solid var(--ink-100);
}
.lottery-foot p { margin: 0; color: var(--ink-600); font-size: 11.5px; }
.lottery-foot .card__action { font-size: 12.5px; white-space: nowrap; }

/* El contador de jugadas se muda al pie del ticket, pegado al total: ahí ya
   había sitio y es donde se mira antes de cobrar. */
.ticket-total span { text-transform: none; letter-spacing: 0; font-size: 12px; }