/* Autoservicio: pensado para el celular o la tablet del local, parado y con
   una mano. Todo grande (botones de 52 px o más), el total y «Pagar» fijos
   abajo, y alto contraste. Usa la base de /css/estilos.css y del panel
   (botones, diálogo del lector, carrito). */

body.auto { background: var(--section); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.auto__cabecera { display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: var(--azul); color: #fff; padding: .6rem 16px; padding-top: max(.6rem, env(safe-area-inset-top)); }
.auto__cabecera .marca strong { font-size: 1.1rem; }
.auto__cabecera .boton--claro { box-shadow: none; }
.auto__cabecera { --foco: #f59e0b; }
.auto__pantalla { flex: 1; width: min(760px, 100%); margin: 0 auto; padding: 1rem 16px 8.5rem; display: flex; flex-direction: column; gap: .8rem; }

.auto__escanear .entrada__campo { min-height: 60px !important; font-size: 1.25rem !important; }
.auto__camara { min-height: 60px; font-size: 1.05rem; white-space: nowrap; }

.auto__vacio { text-align: center; padding: 2.4rem 1rem; border: 2px dashed var(--borde-campo); border-radius: 16px; background: #fff; color: var(--texto-suave); }
.auto__vacio-titulo { font-size: 1.4rem; font-weight: 800; color: var(--azul); margin: 0 0 .3rem; }
.auto__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.auto__renglon { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: .6rem; background: #fff; border-radius: 14px; padding: .7rem .8rem; box-shadow: var(--sombra); }
.auto__renglon--nuevo { animation: resaltar 1.2s ease-out; }
.auto__renglon-datos { display: flex; flex-direction: column; min-width: 0; }
.auto__renglon-nombre { font-weight: 800; color: var(--azul); overflow-wrap: anywhere; }
.auto__renglon-precio { font-size: .88rem; color: var(--texto-suave); }
.auto__renglon-sub { font-variant-numeric: tabular-nums; white-space: nowrap; }
.auto__cant { width: 3.6rem !important; text-align: center; padding-inline: .2rem !important; }
.auto__quitar { min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: #fee2e2; color: #7f1d1d; font-size: 1.5rem; line-height: 1; cursor: pointer; }
@media (max-width: 520px) {
  .auto__renglon { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: .4rem; }
  .auto__renglon-datos { grid-column: 1 / -1; }
  .auto__renglon-sub { justify-self: end; }
}
/* El aviso, arriba: abajo taparía el total y el botón «Pagar». */
body.auto .aviso { top: 72px; bottom: auto; }

/* Total y «Pagar», siempre a mano. */
.auto__pie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--linea); box-shadow: 0 -10px 30px -18px rgba(43, 26, 18, .45); padding: .7rem 16px; padding-bottom: max(.7rem, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.auto__total { display: flex; flex-direction: column; line-height: 1.1; }
.auto__total span { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); font-weight: 700; }
.auto__total-monto { font-size: clamp(1.8rem, 7vw, 2.4rem); color: var(--azul); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.auto__pie-botones { display: flex; gap: .5rem; flex: 1 1 260px; justify-content: flex-end; }
.auto__pie-botones .boton--cobrar { width: auto; flex: 1; max-width: 320px; }
.auto__pie-botones .boton--borde { min-height: 56px; }

/* Pasos: registrarse, cómo pagar, esperar el pago, salida. */
.auto__paso { background: #fff; border-radius: 18px; box-shadow: var(--sombra); padding: 1.4rem 1.2rem; display: flex; flex-direction: column; gap: .9rem; }
.auto__paso h1 { font-size: clamp(1.5rem, 5vw, 2rem); margin: 0; }
.auto__paso--centro { align-items: center; text-align: center; }
.auto__opciones { display: grid; gap: .7rem; }
.auto__opcion { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; font: inherit; background: var(--section); border: 2px solid var(--linea); border-radius: 16px; padding: 1.1rem 1.2rem; min-height: 72px; cursor: pointer; color: var(--texto); }
.auto__opcion strong { font-size: 1.2rem; color: var(--azul); }
.auto__opcion span { color: var(--texto-suave); }
.auto__opcion:hover, .auto__opcion:focus-visible { border-color: var(--acento); background: var(--acento-claro); }
.auto__opcion--mp { border-color: #009ee3; }
.auto__opcion:disabled { opacity: .6; cursor: wait; }
.auto__a-pagar { font-size: 1.3rem; margin: 0; }
.auto__form { display: flex; flex-direction: column; gap: .8rem; }
.auto__form label { display: flex; flex-direction: column; gap: .3rem; font-weight: 700; color: var(--azul); }
.auto__form input { min-height: 52px; font-size: 1.1rem; }

.auto__codigo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: clamp(2.6rem, 13vw, 4rem); font-weight: 800; letter-spacing: .18em; color: var(--azul); background: var(--acento-claro); border: 3px dashed var(--acento); border-radius: 16px; padding: .3rem 1rem .3rem 1.2rem; margin: 0; }
.auto__qr .qr { display: block; width: 240px; height: 240px; image-rendering: pixelated; border-radius: 10px; border: 1px solid var(--linea); }
.auto__qr--chico .qr { width: 160px; height: 160px; }
.auto__simulado { background: var(--section); border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: .8rem; max-width: 480px; }
.auto__simulado p { margin: 0; }
.auto__aprobado { border-top: 8px solid #15803d; }
.auto__tilde { width: 72px; height: 72px; border-radius: 50%; background: #15803d; color: #fff; font-size: 2.6rem; font-weight: 800; display: grid; place-items: center; margin: 0; }
.auto__detalle { width: 100%; max-width: 480px; text-align: left; }
.auto__detalle summary { cursor: pointer; font-weight: 700; color: var(--acento); min-height: 44px; display: flex; align-items: center; justify-content: center; }
.auto__detalle ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.auto__detalle li { display: flex; justify-content: space-between; gap: .8rem; border-bottom: 1px solid var(--linea); padding: .3rem 0; }

@media (prefers-reduced-motion: reduce) { .auto__renglon--nuevo { animation: none; } }