/* ============================================================
   SENTIDA · Decoradas: la comanda (TRAMA, 24/09/2026)
   Sin JavaScript, los seis pasos se ven uno abajo del otro. Con
   JavaScript aparecen la tira del celular y, con pasos.js, un paso por
   vez (.en-pasos). El movimiento vive bajo .mov.
   ============================================================ */

/* ------------------------------------------------------------
   Portada: la comanda en blanco, al centro
   ------------------------------------------------------------ */
.portada{
  min-height:calc(100svh - var(--cab)); background:var(--crema);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,500px) minmax(0,1fr);
  grid-template-areas:"a t b" "baja baja baja"; align-items:center;
  column-gap:clamp(20px,4vw,64px); row-gap:28px; padding:clamp(32px,6vh,72px) var(--lateral) clamp(28px,5vh,56px);
}
.portada-foto{overflow:hidden; border-radius:2px}
.portada-foto img{width:100%; height:100%; object-fit:cover}
.portada-foto-a{grid-area:a; justify-self:end; width:min(100%,320px); aspect-ratio:1}
.portada-foto-b{grid-area:b; width:min(100%,280px); aspect-ratio:3/4; margin-top:14vh}
.ticket-portada{grid-area:t}
.ticket-portada .papel{padding:24px 24px 34px}
.portada h1{font-size:clamp(3rem,5vw,4.75rem); line-height:.9; letter-spacing:-.03em; margin:16px 0 12px}
.portada h1 span{display:block; color:var(--marron-medio)}
.portada-sub{font-size:15px; line-height:1.5; color:var(--marron-medio); margin-bottom:8px}
.ticket-portada .botones{margin-top:20px}
.portada-baja{grid-area:baja; justify-self:center; text-align:center; font-size:15px; line-height:1.6; color:var(--marron-medio); max-width:56ch}

/* ------------------------------------------------------------
   La comanda: pasos a la izquierda, panel fijo a la derecha
   ------------------------------------------------------------ */
.comanda{border-top:1px solid var(--beige)}
.comanda-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pasos-col{padding:0 clamp(24px,4vw,72px) 0 max(var(--lateral), calc((100vw - var(--ancho)) / 2 + var(--lateral)))}
.pasos-t{font-size:clamp(1.75rem,2.6vw,2.5rem); line-height:1; padding-top:clamp(56px,10vh,96px)}
.paso{min-height:calc(100vh - var(--cab)); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:20px; padding-block:48px; border-bottom:1px solid var(--linea)}
.paso-n,.paso-sub{font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--celeste-profundo)}
.paso-sub{margin-top:8px}
.paso-t{font-size:clamp(2.25rem,4vw,3.75rem); line-height:.95; letter-spacing:-.025em}
.paso-ayuda{font-size:14px; line-height:1.55; color:var(--marron-medio); max-width:46ch}
.paso-foto{display:none}

.opciones{display:flex; flex-wrap:wrap; gap:10px}
.opcion{position:relative; display:inline-flex}
.opcion input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.opcion span{
  display:inline-flex; flex-direction:column; justify-content:center; min-height:52px; padding:10px 18px;
  border:1px solid var(--marron); border-radius:2px; background:var(--blanco);
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; transition:background-color .2s, color .2s;
}
.opcion small{font-size:12px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--marron-medio); margin-top:2px}
.opcion:hover span{background:var(--crema)}
.opcion input:checked + span{background:var(--marron); color:var(--blanco)}
.opcion input:checked + span small{color:var(--crema)}
.opcion input:focus-visible + span{outline:2px solid var(--celeste-profundo); outline-offset:3px}
.opcion-chica span{min-height:44px; padding:8px 14px}

.campo{display:flex; flex-direction:column; gap:8px; width:100%}
.campo-t{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--marron-medio); line-height:1.5}
.campo-ayuda{font-size:14px; line-height:1.5; color:var(--marron-medio); margin-top:-4px}
.campo input,.campo textarea,#mensaje{
  font:inherit; font-size:16px; color:var(--marron); background:var(--blanco);
  border:1px solid var(--marron); border-radius:2px; padding:12px 14px; min-height:48px; width:min(100%,420px);
}
.campo textarea{min-height:110px; width:min(100%,520px); resize:vertical; line-height:1.5}
.campos-dos{display:flex; flex-wrap:wrap; gap:16px; width:100%}
.campos-dos .campo{width:auto; flex:1 1 180px}
.campos-dos input{width:100%}
.check{display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:15px; cursor:pointer}
.check input{width:20px; height:20px; margin:0; accent-color:var(--marron)}

/* Fotos de referencia (con JavaScript: fotos.js) */
.fotos-adjuntar{align-self:flex-start; gap:12px}
.fotos-aviso{font-size:14px; font-weight:600; line-height:1.45; color:var(--marron); max-width:46ch}
.fotos-aviso:empty{display:none}
.fotos-lista{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,88px)); gap:10px}
.fotos-lista li{position:relative}
.fotos-lista img{display:block; width:100%; aspect-ratio:1; object-fit:cover; border:1px solid var(--linea); border-radius:2px; background:var(--crema)}
.foto-quitar{
  position:absolute; top:4px; right:4px; display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  padding:0; background:var(--blanco); color:var(--marron); border:1px solid var(--marron); border-radius:2px; cursor:pointer;
}
.foto-quitar:hover{background:var(--crema)}
.foto-quitar:focus-visible{outline:2px solid var(--celeste-profundo); outline-offset:2px}
.foto-quitar .ico{width:16px; height:16px}
.nota-fotos{max-width:560px; font-size:14px; line-height:1.5; color:var(--marron); background:var(--crema); border:1px solid var(--beige); border-radius:2px; padding:12px 14px}
.fotos-mini{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.fotos-mini img{display:block; width:48px; height:48px; object-fit:cover; border:1px solid var(--beige); border-radius:2px}
.nota-fotos .enlace-btn{min-height:40px; margin-top:4px}

.panel{position:sticky; top:var(--cab); height:calc(100vh - var(--cab)); align-self:start}
.panel-foto{position:absolute; inset:0; overflow:hidden; background:var(--crema)}
.panel-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0}
.panel-foto[data-activo="1"] [data-foto="1"],.panel-foto[data-activo="2"] [data-foto="2"],
.panel-foto[data-activo="3"] [data-foto="3"],.panel-foto[data-activo="4"] [data-foto="4"],
.panel-foto[data-activo="5"] [data-foto="5"],.panel-foto[data-activo="6"] [data-foto="6"],
.panel-foto[data-activo="7"] [data-foto="7"]{opacity:1}
.mov .panel-foto img{transition:opacity .5s ease}
.panel-foto figcaption{position:absolute; left:20px; bottom:20px; background:var(--blanco); padding:6px 10px; border-radius:2px; font-size:13px; font-weight:500}
.panel-lugar{position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding:24px clamp(20px,4vw,56px); pointer-events:none}
.panel-lugar .ticket{width:min(360px,100%); pointer-events:auto}

.cierre{padding-block:clamp(72px,12vh,120px); display:flex; flex-direction:column; gap:20px}
.cierre-t{font-size:clamp(2.5rem,4.6vw,4.25rem); line-height:.95; letter-spacing:-.025em}
.cierre-baja{font-size:16px; line-height:1.6; color:var(--marron-medio); max-width:46ch}
.campo-ademas{max-width:560px}
#envio{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
#mensaje{width:100%; max-width:560px; min-height:280px; line-height:1.6; font-size:16px; resize:vertical}
.cierre-nadia a{display:inline-flex; align-items:center; min-height:44px; font-size:14px; text-decoration:underline; text-underline-offset:5px}

/* ------------------------------------------------------------
   Tira del ticket y diálogo (celular, con JavaScript)
   ------------------------------------------------------------ */
.tira{display:none}
.comanda-dialogo{border:0; padding:0; background:transparent; color:var(--marron); width:min(440px, calc(100vw - 24px)); max-height:calc(100dvh - 24px)}
.comanda-dialogo::backdrop{background:var(--velo)}
.dialogo-in{display:flex; flex-direction:column; gap:16px; padding:16px; max-height:inherit; overflow:auto; background:var(--crema); border-radius:2px}
.dialogo-t{font-size:28px}
.dialogo-editado{display:none; font-size:14px; line-height:1.5; color:var(--marron-medio)}
.dialogo-revisar{display:none}
.comanda-dialogo.editado .dialogo-editado{display:block}
.comanda-dialogo.editado .dialogo-revisar{display:inline-flex}
.comanda-dialogo.editado .dialogo-enviar{display:none}

/* ------------------------------------------------------------
   Un paso por vez (pasos.js suma .en-pasos a <html>)
   ------------------------------------------------------------ */
.en-pasos .pasos-col{display:flex; flex-direction:column; min-height:calc(100svh - var(--cab))}
.en-pasos .pasos-t{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; padding:0}
.avance{display:flex; gap:6px; padding-top:clamp(28px,5vh,48px)}
.avance span{flex:1; height:3px; border-radius:2px; background:var(--linea)}
.avance[data-paso="1"] span:nth-child(-n+1),.avance[data-paso="2"] span:nth-child(-n+2),
.avance[data-paso="3"] span:nth-child(-n+3),.avance[data-paso="4"] span:nth-child(-n+4),
.avance[data-paso="5"] span:nth-child(-n+5),.avance[data-paso="6"] span:nth-child(-n+6),
.avance[data-paso="7"] span{background:var(--marron)}
.en-pasos .pasos{flex:1; display:flex; flex-direction:column}
.en-pasos .paso{flex:1; min-height:0; border-bottom:0; padding-block:28px 32px}
.en-pasos .cierre{flex:1; padding-block:28px 32px}
.en-pasos #mensaje{min-height:0; height:216px}  /* entran las siete líneas y el botón de mandar */
.en-pasos .solo-sin-js{display:none}
.pasos-nav{position:sticky; bottom:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 0 calc(16px + env(safe-area-inset-bottom)); background:var(--blanco); border-top:1px solid var(--linea)}
#siguiente{margin-left:auto}
.pasos-nav.en-cierre{position:static; border-top:0; padding-top:0}
.pasos-falta{flex-basis:100%; font-size:14px; font-weight:600; line-height:1.4; color:var(--marron)}
.pasos-falta:empty{display:none}
.btn-1[aria-disabled="true"],.btn-1[aria-disabled="true"]:hover{background:var(--crema); color:var(--marron-medio); border-color:var(--beige); cursor:not-allowed}
.mov .paso.entra,.mov .cierre.entra{animation:entra .35s cubic-bezier(.16,1,.3,1)}
.mov .paso.entra-atras,.mov .cierre.entra-atras{animation:entra-atras .35s cubic-bezier(.16,1,.3,1)}
@keyframes entra{from{opacity:0; transform:translateX(28px)}}
@keyframes entra-atras{from{opacity:0; transform:translateX(-28px)}}

/* ------------------------------------------------------------
   Tablet y celular
   ------------------------------------------------------------ */
@media (max-width:899px){
  .portada{grid-template-columns:1fr 1fr; grid-template-areas:"a b" "t t" "baja baja"; min-height:0; row-gap:20px}
  /* Fotos bien apaisadas: con la marquesina y la línea «En seis pasos…», el botón tiene que entrar en el primer frame. */
  .portada-foto-a,.portada-foto-b{width:100%; margin:0; aspect-ratio:16/10; justify-self:stretch}
  .portada-baja{text-align:left; justify-self:start}

  .comanda-in{display:block}
  .pasos-col{padding:0 var(--lateral)}
  .panel{display:none}
  .paso{min-height:0; padding-block:56px}
  .paso-foto{display:block; width:100%; margin-top:8px}
  .paso-foto img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px}
  .paso-foto figcaption{margin-top:8px; font-size:13px; color:var(--marron-medio)}
  .fotos-lista{grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; max-width:360px}

  /* Mientras se arma, la tira del ticket reemplaza a la cabecera. */
  .js.en-comanda .cab{visibility:hidden}
  .js.en-comanda .tira{
    display:flex; position:fixed; top:0; left:0; right:0; z-index:61; height:var(--cab);
    align-items:center; gap:12px; padding:0 var(--lateral); background:var(--blanco); border-bottom:1px solid var(--marron);
  }
  .tira-t{font-size:18px; flex:none}
  .tira-linea{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
  .tira-et{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--marron-medio); line-height:1.3}
  .tira-val{font-size:13px; font-weight:600; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
  .tira-ver{flex:none; min-height:44px; padding:0 14px; background:var(--marron); color:var(--blanco); border:1px solid transparent; border-radius:2px; font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; cursor:pointer}
  .en-pasos .paso,.en-pasos .cierre{padding-block:24px 28px}
  html.en-pasos{scroll-padding-bottom:88px}
  /* La barra entra en una sola fila: Volver queda como flecha (el nombre sigue para lectores de pantalla). */
  .pasos-nav{flex-wrap:nowrap; padding-top:10px}
  .pasos-nav .pasos-falta{position:absolute; left:0; right:0; bottom:100%; padding:10px 0; background:var(--blanco)}
  #volver{flex:none; width:51px; padding:0; justify-content:center}
  #volver .volver-t{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  #siguiente{flex:1; justify-content:space-between}
}

@media (max-width:429px){
  .tira-t{display:none}
}