/* ============================================================
   SENTIDA · el ticket de papel y «Mi pedido» (TRAMA, 24/09/2026)
   Lo usan las cuatro páginas: toma los tokens de base.css o de home.css.
   ============================================================ */

/* La home no carga base.css: lo que lleva `hidden` se oculta igual,
   aunque su clase le dé display. */
[hidden]{display:none!important}

/* El ticket: papel con borde dentado y sombra que sigue el dentado */
.ticket{filter:drop-shadow(0 14px 16px var(--sombra))}
.papel{
  background:var(--blanco); padding:20px 20px 30px; font-variant-numeric:tabular-nums;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 16px 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 16px 100%;
}
.ticket-cab{display:flex; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid var(--marron); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--marron-medio)}
.ticket-t{font-size:24px; margin:12px 0 4px}
.ticket-lineas > div{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:7px 0; border-bottom:1px dashed var(--beige); font-size:13px; line-height:1.4}
.ticket-lineas dt{color:var(--marron-medio); flex:none}
.ticket-lineas dd{font-weight:600; text-align:right; overflow-wrap:anywhere}
.ticket-lineas dd.vacio{color:var(--marron-medio); font-weight:400}
/* En la comanda, cada línea lleva a su paso: un botón que se lee como texto. */
.ticket-ir{background:none; border:0; padding:0; min-height:24px; font:inherit; color:inherit; text-align:left; cursor:pointer; text-decoration:underline; text-decoration-color:var(--beige); text-underline-offset:3px}
.ticket-ir:hover{color:var(--marron)}
.ticket-ir:disabled{cursor:default; text-decoration:none}
.ticket-ir:focus-visible{outline:2px solid var(--celeste-profundo); outline-offset:2px}
.ticket-fijo{font-size:12px; line-height:1.5; color:var(--marron-medio); margin-top:10px}
.ticket-fijo strong{color:var(--marron); font-weight:600}
.ticket-pie{margin-top:12px; padding-top:8px; border-top:1px solid var(--marron); font-size:12px; line-height:1.5; color:var(--marron-medio)}
.ticket-pie a{text-decoration:underline; text-underline-offset:3px}
.mov .ticket-lineas .nueva{animation:imprimir .3s cubic-bezier(.16,1,.3,1)}
@keyframes imprimir{from{transform:translateY(-6px); opacity:.2}}

/* «Mi pedido» en la cabecera */
.mi-pedido{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 4px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--marron); white-space:nowrap}
.mi-pedido .ico{width:20px; height:20px}
.mi-pedido-n{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--marron); color:var(--blanco); font-size:12px; letter-spacing:0}
@media (max-width:899px){
  .mi-pedido{min-width:44px; justify-content:center}
  .mi-pedido-t{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
}

/* ------------------------------------------------------------
   El pedido de la tienda: contador, lista y diálogo
   ------------------------------------------------------------ */
.carrito-anuncio{position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.contador{display:inline-flex; align-items:center; border:1px solid var(--marron); border-radius:2px; background:var(--blanco); color:var(--marron)}
.contador button{width:44px; height:44px; display:grid; place-items:center; background:none; border:0; border-radius:2px; color:var(--marron); font-family:var(--ui); font-size:20px; line-height:1; cursor:pointer}
.contador button:hover:not(:disabled){background:var(--crema)}
.contador button:disabled{color:var(--marron-medio); background:var(--crema); cursor:default}
.contador button:focus-visible{outline:2px solid var(--celeste-profundo); outline-offset:-2px}
.contador output{min-width:32px; text-align:center; font-family:var(--ui); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums}
.carrito-lista{list-style:none; margin:6px 0 0; padding:0}
.carrito-item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed var(--beige); font-size:14px; line-height:1.35}
.carrito-nombre{font-weight:600; overflow-wrap:anywhere}
.carrito-item .contador button{width:40px; height:40px; font-size:18px}
.mov .carrito-item.nueva{animation:imprimir .3s cubic-bezier(.16,1,.3,1)}
.carrito-vacio{padding:10px 0; font-size:14px; line-height:1.5; color:var(--marron-medio)}

/* El pedido: un panel que entra desde la derecha, como el de sentida-v2. */
.carrito-dialogo{position:fixed; inset:0 0 0 auto; margin:0; width:min(480px,100vw); height:100vh; height:100dvh; max-width:none; max-height:none; border:0; padding:0; background:var(--blanco); color:var(--marron); font-family:var(--ui); box-shadow:-8px 0 30px var(--sombra-suave)}
.carrito-dialogo::backdrop{background:var(--velo)}
.carrito-in{position:relative; display:flex; flex-direction:column; gap:16px; height:100%; padding:72px 24px 24px; overflow:auto; overscroll-behavior:contain; background:var(--blanco)}
.mov .carrito-dialogo[open]{animation:cajon .3s cubic-bezier(.2,.7,.2,1)}
@keyframes cajon{from{transform:translateX(100%)}}
.carrito-cerrar{position:absolute; top:8px; right:8px; z-index:1; width:44px; height:44px; display:grid; place-items:center; background:var(--blanco); color:var(--marron); border:1px solid var(--beige); border-radius:2px; cursor:pointer}
.carrito-cerrar .ico{width:18px; height:18px}
.carrito-form{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.cf{display:flex; flex-direction:column; gap:6px; width:100%; min-width:0; margin:0; padding:0; border:0}
.cf-t{padding:0; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; color:var(--marron-medio)}
.cf input[type=date],.cf input[type=text],.cf textarea{width:100%; min-height:48px; padding:10px 12px; font-family:var(--ui); font-size:16px; color:var(--marron); background:var(--blanco); border:1px solid var(--marron); border-radius:2px}
.cf textarea{min-height:72px; line-height:1.5; resize:vertical}
.cf-op{display:flex; align-items:center; gap:10px; min-height:44px; font-size:15px; cursor:pointer}
.cf-op input{width:20px; height:20px; margin:0; accent-color:var(--marron)}
.carrito-falta{font-size:14px; font-weight:600; line-height:1.5; color:var(--marron)}
.carrito-falta:empty{display:none}
.carrito-nadia{display:inline-flex; align-items:center; min-height:44px; font-size:14px; color:var(--marron); text-decoration:underline; text-underline-offset:5px}
.carrito-listo{display:flex; flex-direction:column; gap:12px; font-size:15px; line-height:1.5}
.carrito-decorada{font-size:14px; line-height:1.5}
.carrito-decorada a{display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:5px}
.carrito-dialogo :is(a,button,input,textarea):focus-visible{outline:2px solid var(--celeste-profundo); outline-offset:3px}
/* En la home no hay base.css: los botones del diálogo traen su tipografía y sus colores. */
.carrito-dialogo .btn{font-family:var(--ui); cursor:pointer}
.carrito-dialogo .btn-2{background:transparent; color:var(--marron); border-color:var(--marron)}
.carrito-dialogo .btn-2:hover{background:var(--crema); color:var(--marron)}