/* Recuperar: el título a la izquierda y la comanda con los campos a la derecha, como en el vídeo. */
.escena.recuperar{display:block}
.recuperar .paso{grid-template-columns:minmax(0,1fr) minmax(0,500px);column-gap:clamp(40px,7vw,104px);align-items:start;max-width:none}
.recuperar .titulo{font-size:clamp(56px,6.2vw,88px);line-height:.96}
.recuperar .nota{overflow-wrap:anywhere}

.papel{min-width:0;filter:drop-shadow(0 22px 30px rgba(40,40,40,.16)) drop-shadow(0 2px 3px rgba(40,40,40,.08))}
.recuperar .comanda{padding:18px 24px 22px}
.recuperar .membrete{justify-content:flex-start}
.recuperar .talon{padding:6px 24px 8px}
.recuperar .enlaces{margin:0}
/* Sin talón, la hoja se cierra entera. */
.paso:not([data-paso="0"]) .comanda{border-radius:var(--radio);-webkit-mask:none;mask:none}

.recuperar .campo{border-top:1px solid #000}
.pedido{display:flex;align-items:baseline;gap:10px;min-width:0}
.pedido span{flex:none;font:400 44px/1 var(--t-hue)}
.digitos{flex:1;min-width:0;height:66px;padding:0;border:0;border-bottom:1.5px dashed #000;border-radius:0;background:transparent;color:#000;font:400 52px/60px var(--t-hue);letter-spacing:.12em;outline:0}
.digitos:focus{border-bottom-style:solid}
.pista{margin:6px 0 0;font:400 14px/19px var(--t-suisse);color:var(--tinta-suave);text-wrap:pretty}
.campo:has(#clave[aria-invalid="true"]) .pista{display:none}

.acciones{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin:8px -4px 0}
.secundario{min-height:44px;padding:0 4px;border:0;background:none;color:#000;cursor:pointer;font:400 15px/20px var(--t-suisse);text-decoration:underline;text-underline-offset:3px}
.secundario:disabled{color:var(--tinta-suave);cursor:default}
@media (hover:hover) and (pointer:fine){.secundario:hover:not(:disabled){text-decoration-thickness:2px}}

/* Mientras se envía caminan las hormigas, como en la hoja de entrar. */
.papel.cargando .hormiga{animation:paso-hormiga .36s var(--vaiven) .3s infinite alternate}
.papel.cargando .hormiga+.hormiga{animation-delay:.48s}

/* cuenta.css reparte la comanda en móvil para la hoja con foto y quita el talón: aquí la hoja lleva el formulario y el talón sigue. */
@media (max-width:991px){
  .recuperar .paso{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .recuperar .titulo{font-size:clamp(44px,12vw,72px);line-height:1}
  .recuperar .comanda{display:block;padding:14px 18px 20px;border-radius:var(--radio) var(--radio) 0 0;
    -webkit-mask:radial-gradient(circle var(--muesca) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat;
    mask:radial-gradient(circle var(--muesca) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat}
  .paso:not([data-paso="0"]) .comanda{border-radius:var(--radio);-webkit-mask:none;mask:none}
  .recuperar .talon{display:block;padding:6px 18px 8px}
  .recuperar .hormigas{width:44px;height:44px}
  .recuperar .membrete{min-height:44px;margin:0 0 8px}
  .digitos{font-size:40px;line-height:48px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){.papel.cargando .hormiga{animation:none}}