/* /cuenta/registro y /cuenta/terminos. Va después de cuenta.css: colores, fuentes y medidas salen de sus variables. */

/* La comanda se va escribiendo */
.viva-nombre{overflow-wrap:anywhere;min-height:1em;color:var(--tinta)}
.viva-nombre.vacio{color:var(--tinta-suave)}
.viva-nombre[data-largo="1"]{font-size:50px}
.viva-nombre[data-largo="2"]{font-size:34px;line-height:1.05}
.contador{margin:0 auto 0 0;font:400 15px/18px var(--t-greed);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}

/* El nombre se escribe a la medida de la comanda */
.campo-nombre .entrada{height:auto;font:400 64px/1.2 var(--t-hue);letter-spacing:-.03em}
.entrada::placeholder{color:var(--tinta-suave);opacity:1}
.pista{margin:4px 0 0;color:var(--tinta-suave);font:400 14px/19px var(--t-suisse);text-wrap:pretty}
.pista a{color:var(--tinta)}
.campo:has(.fallo:not([hidden])) .pista{display:none}
.nota strong{font-weight:500;overflow-wrap:anywhere}

/* Términos */
.casilla{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:14px 0 4px;font:400 16px/22px var(--t-suisse);cursor:pointer}
.casilla a{font-weight:500}
.casilla input{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-items:center;width:22px;height:22px;margin:0;border:1.5px solid #000;border-radius:2px;background:transparent;cursor:pointer}
.casilla input::after{content:"";width:14px;height:14px;opacity:0;background:linear-gradient(45deg,transparent 44%,#000 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#000 44% 56%,transparent 56%)}
.casilla input:checked::after{opacity:1}
.casilla input:focus-visible{outline:2px solid #000;outline-offset:3px}
.casilla input[aria-invalid="true"]{border-width:2.5px}
.fallo-casilla{margin-left:34px}

/* Código: se escribe como el número de la comanda */
.paso{grid-template-columns:minmax(0,1fr)}
.pedido{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.pedido span{font:400 44px/1 var(--t-hue)}
.digitos{flex:1;width:100%;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);font-variant-numeric:tabular-nums;letter-spacing:.12em;outline:0}
.digitos:focus-visible{border-bottom-style:solid}
.acciones-codigo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px}
.acciones-codigo .verificacion{flex:1 1 100%}
.secundario{min-height:44px;padding:0 4px;border:0;background:none;color:#000;cursor:pointer;font:400 16px/20px var(--t-suisse);text-decoration:underline;text-underline-offset:3px}
.secundario:first-child{margin-left:-4px}
.secundario:last-of-type{margin-right:-4px}
.secundario:disabled{color:var(--tinta-suave);cursor:default}
@media (hover:hover) and (pointer:fine){.secundario:hover:not(:disabled){text-decoration-thickness:2px}}
a.seguir{text-align:center;text-decoration:none}

/* Términos y condiciones */
.legal{max-width:720px;margin:48px 0 96px;padding:0 10px;font:400 18px/26px var(--t-suisse)}
.legal .titulo{margin-bottom:28px}
.legal p{margin:0 0 12px;text-wrap:pretty}
.legal a{font-weight:500}

@media (max-width:991px){
  .viva-nombre[data-largo="1"]{font-size:26px}
  .viva-nombre[data-largo="2"]{font-size:20px}
  .contador{font-size:13px;line-height:16px;align-self:center}
  .campo-nombre .entrada{font-size:44px}
  .pedido span{font-size:36px}
  .digitos{height:56px;font-size:40px;line-height:48px;letter-spacing:.08em}
  .legal{margin:24px 0 64px;padding:0;font-size:16px;line-height:24px}
}