/* Factura de tu ticket · Bierwinkel. Móvil primero, siempre en tema claro, con el diseño de la maqueta. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fuentes/inter-latin-wght.woff2") format("woff2-variations"), url("fuentes/inter-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --fondo: #f7f9fb; --tarjeta: #ffffff; --tinta: #191c1e; --suave: #5b6168; --tenue: #f2f4f6; --tenue-2: #eceef0; --linea: #e3e6e9; --barra-off: #dcdfe1;
  --azul: #0051d5; --azul-fuerte: #0043b2; --azul-tenue: #eceffd; --azul-borde: #c9d5fb; --azul-texto: #1e4fc9;
  --negro: #0e1012; --sobre-oscuro: #ffffff;
  --verde: #12a150; --verde-texto: #0b7a43; --verde-tenue: #d4f8e6; --verde-pastilla: #2fd389;
  --error: #b42318; --error-tenue: #fdf0ef; --error-borde: #f6cfcb;
  --gris-boton: #e6e8ea;
  --radio: 16px; --radio-campo: 12px;
  --sombra: 0 1px 2px rgb(25 28 30 / 4%), 0 4px 14px rgb(25 28 30 / 5%);
  --sombra-azul: 0 8px 20px rgb(0 81 213 / 24%);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--fondo); }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 16px/1.45 "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.saltar { position: absolute; left: 8px; top: -60px; background: var(--tarjeta); color: var(--tinta); padding: 8px 12px; border-radius: 8px; z-index: 30; }
.saltar:focus { top: 8px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.centro { text-align: center; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--azul) 55%, white); outline-offset: 2px; }

/* ---------- Barra superior ---------- */
.barra { position: sticky; top: 0; z-index: 20; background: linear-gradient(#eceef0, color-mix(in srgb, var(--fondo) 92%, transparent)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.barra-in { max-width: 520px; margin: 0 auto; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px; min-height: 64px; }
.barra-titulo { margin: 0; flex: 1; min-width: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; }
.barra-boton { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--tinta); cursor: pointer; }
.barra-boton:hover { background: rgb(25 28 30 / 6%); }
.barra-boton svg.i { width: 22px; height: 22px; }
#barra-atras + .barra-titulo { padding-left: 0; }
.barra-marca { flex: none; display: grid; place-items: center; width: 44px; height: 44px; }
.barra-marca img { display: block; width: 44px; height: 44px; }

main { max-width: 520px; margin: 0 auto; padding: 8px 16px 32px; display: grid; gap: 16px; }
main:focus { outline: none; }
#asistente, .paso, form, .pila, .pila-suelta { display: grid; gap: 16px; min-width: 0; }
.pila { gap: 18px; }

.tarjeta { background: var(--tarjeta); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); min-width: 0; }
h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
h2:focus, h3:focus { outline: none; }
h3 { margin: 0; font-size: 16px; font-weight: 700; }
.tarjeta-titulo { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 700; padding: 0; }
.tarjeta-titulo svg.i { color: var(--azul); }
.tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.tarjeta-desc { margin: 8px 0 16px; font-size: 14px; color: var(--suave); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; background: var(--tenue-2); color: var(--suave); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; font-weight: 500; }
.chip-gris { border-radius: 999px; padding: 5px 12px; background: var(--tenue-2); color: var(--tinta); font-weight: 500; font-size: 13px; white-space: normal; text-align: center; }
.chip-gris svg.i { width: 16px; height: 16px; color: var(--azul); }

/* ---------- Progreso ---------- */
.progreso { padding: 4px 0 2px; }
.progreso-cab { margin: 0 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.progreso-n { color: var(--azul); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.progreso.completo .progreso-n::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
.progreso-sub { color: var(--suave); font-size: 13px; font-weight: 500; text-align: right; }
.progreso-sub.pastilla { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--verde-tenue); color: var(--verde-texto); font-weight: 600; }
.progreso-sub.pastilla svg.i { width: 15px; height: 15px; }
.progreso-sub.azul { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--azul-tenue); color: var(--azul); font-weight: 600; }
.progreso-barra { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.progreso-barra li { display: grid; gap: 7px; font-size: 11.5px; letter-spacing: -.01em; color: var(--suave); min-width: 0; }
.progreso-barra li::before { content: ""; height: 6px; border-radius: 3px; background: var(--barra-off); }
.progreso-barra li.hecho::before, .progreso-barra li[aria-current]::before { background: var(--azul); }
.progreso-barra li.hecho, .progreso-barra li[aria-current] { color: var(--azul); }
.progreso-barra li[aria-current] { font-weight: 600; }
.progreso-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Campos ---------- */
.grupo { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
legend { padding: 0; font-weight: 600; font-size: 15px; float: left; }
.grupo > legend { margin-bottom: 0; }
.grupo-tarjeta { border: 0; margin: 0; }
.grupo-tarjeta > legend { float: left; width: 100%; margin-bottom: 0; }
.grupo-tarjeta > legend + * { clear: both; }

.campo { display: grid; gap: 8px; min-width: 0; }
.campo-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fila { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 359px) { .fila { grid-template-columns: 1fr; } }
label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
label svg.i { color: var(--azul); width: 20px; height: 20px; }
.etq-peq { font-size: 13.5px; font-weight: 600; }
.obligatorio { font-size: 12.5px; color: var(--suave); }
.opcional { font-weight: 400; color: var(--suave); }
.req { color: var(--error); }

input[type="text"], input:not([type]), input[type="email"], input[type="date"] {
  font: inherit; font-size: 17px; width: 100%; min-height: 54px; padding: 12px 16px; border: 1.5px solid transparent; border-radius: var(--radio-campo);
  background: var(--tenue); color: var(--tinta); transition: background .15s, border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
#paso2 input { background: var(--tarjeta); box-shadow: 0 1px 2px rgb(25 28 30 / 4%); }
input::placeholder { color: #9aa0a6; opacity: 1; }
input.mayus::placeholder { text-transform: none; }
input:hover:not(:disabled):not(:focus) { background: var(--tenue-2); }
#paso2 input:hover:not(:focus) { background: #fbfcfd; }
input:focus { outline: none; background: var(--tarjeta); border-color: var(--azul); box-shadow: 0 0 0 4px rgb(0 81 213 / 14%); }
input.mayus { text-transform: uppercase; }
input[aria-invalid="true"] { border-color: var(--error); background: var(--error-tenue) !important; }
input:disabled { opacity: .6; }
input[type="date"] { min-height: 54px; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.con-icono { position: relative; }
.con-icono > svg.i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #7d838a; pointer-events: none; }
.con-icono input { padding-left: 48px; }
.con-icono.dcha > svg.i { left: auto; right: 16px; }
.con-icono.dcha input { padding-left: 16px; padding-right: 48px; }
.con-sufijo { position: relative; }
.con-sufijo input { padding-right: 38px; }
.con-sufijo span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--tinta); pointer-events: none; font-weight: 600; }
.con-check { position: relative; }
.con-check input { padding-right: 50px; }
.con-check .check { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: var(--sobre-oscuro); fill: var(--verde); stroke: #fff; display: none; pointer-events: none; }
.con-check input:valid:not(:placeholder-shown) ~ .check, .con-check input:read-only:not(:placeholder-shown) ~ .check { display: block; }
.email-ok { display: none !important; align-items: center; gap: 6px; color: var(--verde-texto) !important; font-weight: 500; }
.email-ok svg.i { width: 16px; height: 16px; }
.campo:has(#email:valid:not(:placeholder-shown)) .email-ok, .campo:has(#email:read-only:not(:placeholder-shown)) .email-ok { display: flex !important; }

.ayuda { margin: 0; font-size: 13px; color: var(--suave); }
.ayuda.ok { color: var(--verde-texto); }
.ayuda.error { color: var(--error); }
.mensaje { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--error-tenue); border: 1px solid var(--error-borde); color: var(--error); font-weight: 600; font-size: 14px; }
.mensaje:empty { display: none; }

.enlace-ayuda { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 2px 0; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--azul); cursor: pointer; }
.enlace-ayuda svg.i { width: 17px; height: 17px; }

/* ---------- Locales (paso 1, en lista) ---------- */
.locales { display: grid; gap: 10px; grid-template-columns: 1fr; }
.local { position: relative; display: flex; align-items: center; gap: 14px; min-height: 80px; padding: 12px; border-radius: 14px; background: var(--tenue); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; min-width: 0; }
.local:hover { background: var(--tenue-2); }
.local input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.local-logo { flex: none; display: grid; place-items: center; height: 56px; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(25 28 30 / 6%); }
.local-logo { width: 104px; }
.local-logo.logo-cuadrado { background: var(--fondo-logo, #fff); }
.local-logo.logo-cuadrado img { display: block; width: 56px; height: 56px; }
.local-elegido-logo .local-logo.logo-cuadrado img { width: 44px; height: 44px; }
.local-logo.logo-ancho { padding: 8px 10px; }
.local-logo.logo-ancho img { display: block; width: auto; height: auto; max-width: 84px; max-height: 40px; }
.local-elegido-logo .local-logo.logo-ancho img { max-width: 68px; max-height: 32px; }
.local-logo.inicial { background: var(--tenue-2); color: var(--tinta); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.local:has(input:checked) .local-logo.inicial { background: rgb(255 255 255 / 14%); color: #fff; box-shadow: none; }
.local-elegido-logo .local-logo { height: 44px; border-radius: 10px; }
.local-elegido-logo .local-logo { width: 84px; font-size: 19px; }
.local-elegido-logo .local-logo.logo-ancho { padding: 6px 8px; }
.local .marca-check { color: var(--verde-pastilla); }
.local-txt { display: grid; min-width: 0; line-height: 1.25; }
.local-nombre { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.local .marca-check { margin-left: auto; width: 22px; height: 22px; color: var(--verde-pastilla); visibility: hidden; }
.local:has(input:checked) { background: var(--negro); color: var(--sobre-oscuro); box-shadow: 0 8px 18px rgb(14 16 18 / 22%); }
.local:has(input:checked) .marca-check { visibility: visible; }
.local:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--azul) 55%, white); outline-offset: 2px; }

/* Local elegido (paso 2) */
.local-elegido { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.local-elegido-txt { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.local-elegido-txt span { font-size: 12.5px; color: var(--suave); }
.local-elegido-txt strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Tarjeta del QR ---------- */
.qr-tarjeta { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 80px; padding: 12px 16px 12px 12px; border: 0; border-radius: 14px; background: #e2e5e9; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.qr-tarjeta:hover { background: #d8dce1; }
.qr-logo { color: var(--tinta); }
.qr-logo svg.i { width: 30px; height: 30px; }
.qr-sub { font-size: 13px; color: var(--suave); }
.qr-camara { margin-left: auto; width: 22px; height: 22px; color: var(--suave); }

.qr-leido { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--verde-tenue); color: var(--verde-texto); }
.qr-leido-icono { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--verde); color: #fff; }
.qr-leido-icono svg.i { width: 18px; height: 18px; stroke-width: 2.6; }
.qr-leido p { margin: 0; }
.qr-leido-titulo { font-weight: 700; color: #08532f; }
.qr-leido-det { font-size: 14px; }

.separador { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; color: #4c5157; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

/* Notas informativas */
.nota { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--tenue); }
.nota > svg.i { color: var(--verde); margin-top: 1px; }
.nota p { margin: 0; font-size: 13.5px; color: var(--suave); }
.nota .nota-titulo { color: var(--tinta); font-weight: 600; font-size: 14px; }
.nota-linea { display: flex; gap: 10px; align-items: flex-start; justify-content: center; margin: 0; font-size: 13px; color: var(--suave); text-align: center; }
.nota-linea svg.i { color: var(--verde); width: 18px; height: 18px; }

.recaptcha-caja { display: flex; justify-content: center; padding: 14px 10px; border-radius: 14px; background: var(--tarjeta); box-shadow: var(--sombra); }
.recaptcha { min-height: 78px; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-weight: 700; font-size: 16px; min-height: 54px; padding: 12px 18px; border-radius: 12px; border: 0; cursor: pointer; width: 100%; transition: background .15s, transform .05s; text-align: center; }
.boton:active:not([disabled]) { transform: translateY(1px); }
.boton svg.i { width: 21px; height: 21px; }
.primario { background: var(--azul); color: #fff; box-shadow: 0 4px 12px rgb(0 81 213 / 22%); }
.primario:hover { background: var(--azul-fuerte); }
.grande { min-height: 60px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.claro { background: var(--tenue); color: var(--tinta); }
.claro:hover { background: var(--tenue-2); }
.claro svg.i { color: var(--azul); }
.transparente { background: transparent; color: var(--tinta); }
.cuadrado { width: 56px; min-width: 56px; padding: 0; background: var(--gris-boton); color: var(--tinta); }
.cuadrado:hover { background: #dadde0; }
.boton[disabled] { opacity: .65; cursor: progress; }
.enlace { font: inherit; font-size: 14px; font-weight: 600; background: none; border: 0; padding: 4px 0; color: var(--azul); cursor: pointer; }
.enlace:hover { text-decoration: underline; }
.enlace[disabled] { color: var(--suave); text-decoration: none; cursor: default; }
.acciones { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.acciones.columna { grid-template-columns: 1fr; }
.acciones.fija { position: sticky; bottom: 0; z-index: 5; margin: 0 -16px; padding: 14px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fondo) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--linea); }
.pie-boton { margin: -4px 0 0; text-align: center; font-size: 12.5px; color: var(--suave); }
.enlace-otra { justify-self: center; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 10px 12px; font: inherit; font-weight: 600; font-size: 15px; color: var(--tinta); cursor: pointer; border-radius: 10px; }
.enlace-otra:hover { background: var(--tenue); }
.enlace-otra svg.i { width: 22px; height: 22px; }

/* ---------- Avisos ---------- */
.aviso-bloque { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; }
.aviso-bloque p { margin: 2px 0 0; font-size: 14px; }
.aviso-bloque h2, .aviso-bloque h3 { font-size: 15px; }
.aviso-icono { flex: none; display: grid; place-items: center; width: 24px; height: 24px; }
.aviso-ok { background: #effcf5; color: #0e5a33; }
.aviso-ok .aviso-icono { color: var(--verde); }
.aviso-info { background: var(--azul-tenue); color: var(--azul-texto); }
.aviso-info h3 { color: var(--tinta); }
.aviso-error { background: var(--error-tenue); color: var(--error); }
.tarjeta.aviso-bloque { padding: 20px; }
.tarjeta.aviso-error h2 { font-size: 18px; }

.aeat { display: grid; gap: 8px; padding-top: 2px; }
.aeat .boton { min-height: 48px; font-size: 15px; background: var(--azul-tenue); color: var(--azul); }
.aeat .boton:hover { background: #e0e6fc; }

.segmentado { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--tenue-2); border-radius: 14px; }
.segmentado label { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 6px 6px; border-radius: 11px; font-size: 13.5px; white-space: nowrap; font-weight: 600; text-align: center; color: var(--suave); }
.segmentado label svg.i { color: currentColor; width: 19px; height: 19px; }
.segmentado input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmentado label:has(input:checked) { background: var(--tarjeta); color: var(--tinta); box-shadow: 0 1px 3px rgb(25 28 30 / 12%); }

/* ---------- Resumen del ticket ---------- */
.resumen { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 14px; align-items: center; padding: 16px; }
.resumen-icono { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--tenue-2); color: var(--azul); }
.resumen.oscuro .resumen-icono { background: var(--negro); color: #fff; }
.resumen-icono svg.i { width: 24px; height: 24px; }
.resumen-local { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.resumen-local span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resumen-local svg.i { width: 19px; height: 19px; color: var(--azul); }
.resumen-total { grid-row: span 2; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.resumen-det { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--suave); min-width: 0; }
.etiqueta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--verde-texto); background: var(--verde-tenue); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.etiqueta svg.i { width: 14px; height: 14px; }

/* ---------- Desglose ---------- */
.desglose { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.desglose th, .desglose td { padding: 7px 0; text-align: left; font-weight: 400; font-size: 15.5px; }
.desglose td { text-align: right; white-space: nowrap; padding-left: 12px; font-weight: 600; }
.desglose tr.cuota th, .desglose tr.cuota td { color: var(--suave); font-size: 13.5px; padding-top: 0; font-weight: 400; }
.desglose tr.cuota th { padding-left: 14px; position: relative; }
.desglose tr.cuota th::before { content: ""; position: absolute; left: 2px; top: calc(50% - 6px); width: 6px; height: 6px; border-radius: 50%; background: var(--azul); }
.desglose tr.suma th, .desglose tr.suma td { padding-top: 12px; padding-bottom: 14px; }
.desglose tr.total th, .desglose tr.total td { font-weight: 700; font-size: 19px; padding: 16px 16px; background: var(--tenue-2); letter-spacing: -.01em; }
.desglose tr.total th { border-radius: 12px 0 0 12px; }
.desglose tr.total td { color: var(--azul); font-size: 21px; border-radius: 0 12px 12px 0; }

/* ---------- Código de 6 cifras ---------- */
.aviso-escudo { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radio); background: var(--azul-tenue); }
.escudo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--azul); color: #fff; }
.escudo svg.i { width: 22px; height: 22px; }
.aviso-escudo h3 { font-size: 16px; margin-bottom: 4px; }
.aviso-escudo p { margin: 0; font-size: 14px; color: var(--azul-texto); line-height: 1.5; }
.codigo-tarjeta { display: grid; gap: 6px; justify-items: center; text-align: center; }
.codigo-tarjeta h3 { font-size: 16px; }
.codigo-cajas { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; width: 100%; max-width: 330px; margin: 12px 0 6px; }
.codigo-cajas span { display: grid; place-items: center; height: 52px; border-radius: 10px; background: var(--tenue-2); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); transition: background .12s, box-shadow .12s; }
.codigo-cajas span.vacia::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b3b8bd; }
.codigo-cajas span.actual { background: var(--tarjeta); box-shadow: 0 0 0 2px var(--azul), 0 2px 8px rgb(0 81 213 / 15%); }
.codigo-cajas input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; font-size: 16px; caret-color: transparent; z-index: 1; cursor: text; }
.codigo-cajas:has(input[aria-invalid="true"]) span { background: var(--error-tenue); box-shadow: 0 0 0 1.5px var(--error); }
.codigo-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; width: 100%; max-width: 330px; font-size: 14px; }
.caduca { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); }
.caduca svg.i { width: 18px; height: 18px; }
.caduca strong { color: var(--tinta); }
.centro-bloque { justify-self: center; font-size: 13.5px; }

/* ---------- Paso 4 ---------- */
.exito { text-align: center; display: grid; justify-items: center; gap: 10px; padding-top: 6px; }
.exito-icono { position: relative; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--azul); color: #fff; box-shadow: 0 12px 30px rgb(0 81 213 / 30%), 0 0 0 10px rgb(0 81 213 / 7%); margin-bottom: 4px; }
.exito-icono > svg.i { width: 48px; height: 48px; stroke-width: 2.4; fill: #fff; stroke: var(--azul); }
.exito-sello { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--azul); box-shadow: 0 2px 6px rgb(25 28 30 / 15%); }
.exito-sello svg.i { width: 22px; height: 22px; fill: var(--azul); stroke: #fff; stroke-width: 1.6; }
.exito h2 { font-size: 26px; margin-top: 2px; }
.exito p { margin: 0; color: var(--suave); font-size: 16px; max-width: 34ch; }
.exito p u { color: var(--tinta); text-decoration-thickness: 1.5px; text-underline-offset: 3px; font-weight: 500; overflow-wrap: anywhere; }
.factura { padding: 0; overflow: hidden; }
.factura-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: #fbfcfd; border-bottom: 1px solid var(--linea); }
.factura-num { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.factura-num svg.i { color: var(--azul); }
.factura-num strong { font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.factura-cuerpo { display: grid; gap: 12px; padding: 16px 18px 18px; }
.partes { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 359px) { .partes { grid-template-columns: 1fr; } }
.partes > div { background: var(--tenue); border-radius: 12px; padding: 12px; min-width: 0; }
.partes h3 { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--suave); margin-bottom: 4px; }
.partes h3 svg.i { width: 16px; height: 16px; }
.partes p { margin: 0; font-size: 13px; color: var(--suave); overflow-wrap: anywhere; line-height: 1.4; }
.partes p strong { display: block; color: var(--tinta); font-size: 14px; font-weight: 700; }
.partes p .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
.factura-fecha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--tenue); font-size: 14px; }
.factura-fecha span { display: inline-flex; align-items: center; gap: 8px; color: var(--suave); }
.factura-fecha svg.i { width: 18px; height: 18px; }
.importes-caja { padding: 12px; border-radius: 12px; background: var(--tenue); }
.importes { margin: 0; display: grid; gap: 7px; font-variant-numeric: tabular-nums; font-size: 14px; }
.importes div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.importes dt { color: var(--suave); display: inline-flex; align-items: center; gap: 8px; }
.importes dd { margin: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13.5px; }
.importes-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.importes-total span { font-weight: 700; font-size: 19px; }
.importes-total strong { color: var(--azul); font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pie-legal { margin: 0; text-align: center; font-size: 12.5px; color: var(--suave); }

.resultado-caja { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 28px 20px; }
.resultado-icono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--azul-tenue); color: var(--azul); }
.resultado-icono svg.i { width: 32px; height: 32px; }
.resultado-caja p { margin: 0; color: var(--suave); }
.resultado-ok .resultado-icono { background: var(--verde-tenue); color: var(--verde); }
.resultado-error .resultado-icono { background: var(--error-tenue); color: var(--error); }

.pie { text-align: center; color: var(--suave); font-size: 12.5px; padding: 0 16px 28px; }
.pie p { margin: 0; }

/* ---------- Diálogos: escáner y ayuda ---------- */
dialog { border: 0; padding: 0; color: var(--tinta); }
dialog::backdrop { background: rgb(14 16 18 / 55%); }
.escaner { width: min(100vw, 520px); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 auto; background: #0e1012; color: #fff; }
.escaner[open] { display: flex; flex-direction: column; }
.escaner-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); }
.escaner-cab h2 { font-size: 18px; font-weight: 600; }
.claro-sobre-oscuro { color: #fff; }
.claro-sobre-oscuro:hover { background: rgb(255 255 255 / 12%); }
.escaner-visor { position: relative; flex: 1; min-height: 0; margin: 0 16px; border-radius: 18px; overflow: hidden; background: #1b1e21; }
.escaner-visor video { width: 100%; height: 100%; object-fit: cover; display: block; }
.escaner-marco { position: absolute; inset: 0; margin: auto; width: min(64vw, 260px); aspect-ratio: 1; border-radius: 22px; box-shadow: 0 0 0 9999px rgb(0 0 0 / 38%); border: 3px solid rgb(255 255 255 / 92%); }
.escaner-msg { margin: 0; padding: 14px 20px 6px; text-align: center; font-size: 15px; color: rgb(255 255 255 / 90%); min-height: 3em; }
.escaner-acciones { display: grid; gap: 8px; padding: 8px 16px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.escaner .claro { background: #fff; }
.escaner .transparente { color: #fff; }
.escaner-foto { cursor: pointer; }

.hoja { width: min(calc(100vw - 24px), 480px); max-height: min(86dvh, 720px); border-radius: 20px; padding: 0 20px 20px; background: var(--tarjeta); box-shadow: 0 20px 50px rgb(14 16 18 / 25%); }
.hoja[open] { display: grid; gap: 14px; overflow: auto; }
.hoja-cab { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 0 6px; background: var(--tarjeta); }
.hoja-sec { display: grid; gap: 6px; }
.hoja-sec p { margin: 0; font-size: 14.5px; color: var(--suave); }
.hoja-sec a { color: var(--azul); font-weight: 600; }
.ticket-ejemplo { display: grid; gap: 7px; justify-self: center; width: 210px; margin: 6px 0; padding: 14px 16px 18px; background: #fffdf8; border: 1px solid var(--linea); border-radius: 4px; box-shadow: var(--sombra);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; color: #3c4045; -webkit-mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) bottom / 14px 100% repeat-x; mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) bottom / 14px 100% repeat-x; }
.ticket-ejemplo .tl { height: 6px; border-radius: 3px; background: var(--tenue-2); }
.ticket-ejemplo .tl.corto { width: 55%; justify-self: center; height: 8px; background: #d9dcdf; }
.ticket-ejemplo .tl.medio { width: 70%; }
.ticket-ejemplo b { background: #fff1a8; padding: 0 3px; border-radius: 3px; font-weight: 700; color: #191c1e; }
.ticket-ejemplo .tl-total { text-align: right; }
.ticket-ejemplo .tl-total b { background: none; }

@media (prefers-reduced-motion: no-preference) {
  .paso { animation: entrar .22s ease-out; }
  @keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}