/* Rediseño «tipo Apple» de la app: se carga después del estilo de cada pantalla.
   Tarjetas blancas sin borde y con sombra suave, números grandes, botones en píldora,
   fotos grandes en la carta y movimiento al aparecer. Quitar este archivo devuelve el aspecto anterior. */

@keyframes ap-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
:root{--shadow:0 1px 2px rgb(0 0 0 / .05),0 10px 30px rgb(0 0 0 / .07)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--shadow:0 0 0 1px rgb(255 255 255 / .06)}}

/* Cabecera: título grande */
.top .brand b{font-size:24px;font-weight:700;letter-spacing:-.03em}
.top .brand span{text-transform:none;letter-spacing:0;font-size:13px}
.btn{border-radius:999px}
.pill{border-color:transparent;background:var(--sunk)}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.card-box{border-radius:22px;box-shadow:var(--shadow)}

/* ---------- Carta del cliente ---------- */
.guest{gap:18px}
.zones button{border:0;border-radius:999px;padding:11px 6px;font-size:14px;transition:background .2s,color .2s}
.zones button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.cats{background:color-mix(in srgb, var(--bg) 80%, transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.cats .pill{font-weight:600;padding:8px 16px}
.item,.setm,.track{border:0;border-radius:22px;box-shadow:var(--shadow);animation:ap-rise .5s cubic-bezier(.2,.7,.2,1) both}
.menu > :nth-child(2){animation-delay:.05s}.menu > :nth-child(3){animation-delay:.1s}.menu > :nth-child(4){animation-delay:.15s}
.menu > :nth-child(5){animation-delay:.2s}.menu > :nth-child(n+6){animation-delay:.25s}
/* Plato con foto: la foto grande arriba, como una tienda de Apple */
.item.photo{flex-direction:column;padding:0;gap:0;overflow:hidden}
.item.photo .ph{width:100%;height:auto;aspect-ratio:16/10;border-radius:0;transition:transform .6s}
.item.photo:hover .ph{transform:scale(1.03)}
.item.photo .item-in{padding:14px 16px 16px;width:100%}
.item .nm{font-size:18px;font-weight:700;letter-spacing:-.02em}
.item .pr,.setm-h .pr{font-family:var(--body);font-weight:600;font-size:17px}
.qty button{width:40px;height:40px;border-radius:50%;border:0;background:var(--sunk);transition:transform .15s}
.qty button:active{transform:scale(.88)}
.qty button.plus{background:var(--ink);color:var(--bg)}
.opt{border:0;border-radius:14px}
.opt[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent)}
/* La cesta flota abajo, con el botón negro como Apple Pay */
.basket{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom, 0px));padding:14px 16px;border:0;border-radius:26px;box-shadow:0 20px 50px rgb(0 0 0 / .18);
  background:color-mix(in srgb, var(--panel) 88%, transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.basket-sum b{font-family:var(--body);font-weight:700;font-size:24px;letter-spacing:-.02em}
.basket #send{border-radius:999px;padding:14px 24px;background:var(--ink);color:var(--bg)}
.basket #note,.basket input{border:0}
.steps i{height:8px;border-radius:4px}

/* ---------- Barra y cocina ---------- */
.kpi{border:0;border-radius:20px;box-shadow:var(--shadow);padding:14px 18px}
.kpi b{font-family:var(--display);font-weight:700;font-size:32px;letter-spacing:-.03em}
.kpi span{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500}
.kpi.alert{background:var(--warn-soft);border:0}
.lane{background:transparent;padding:0}
.lane h3{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:4px 2px 2px}
/* El pedido: tarjeta blanca con una franja de color (verde a tiempo, ámbar, rojo) y un tinte suave */
.card,.ticket{border:0;border-radius:20px;box-shadow:var(--shadow);position:relative;overflow:hidden;padding:16px 16px 14px 22px;
  background:color-mix(in srgb, var(--c) 10%, var(--panel));animation:ap-rise .45s cubic-bezier(.2,.7,.2,1) both}
.card::before,.ticket::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--c)}
.card.warn,.ticket.warn{background:color-mix(in srgb, var(--c) 16%, var(--panel))}
.card.late,.ticket.late{background:color-mix(in srgb, var(--c) 16%, var(--panel))}
.card.closed{background:var(--panel)}
.card.new,.ticket.new{animation:pulse 1.1s ease-in-out infinite}
.ticket.prio{box-shadow:0 0 0 4px var(--ink),var(--shadow)}
.timer{border-radius:999px;padding:5px 12px}
.c-where,.t-where{font-size:23px;letter-spacing:-.025em}
.c-pay,.c-note,.kit,.t-parts span,.ready-row{border:0;border-radius:12px}
.c-fix button,.t-fix button{color:var(--accent);text-decoration:none;font-weight:500}
.c-act .btn,.t-act .btn{border-radius:999px}
.spot{border-radius:18px;border-width:0;box-shadow:var(--shadow)}
.spot.busy{box-shadow:0 0 0 2px var(--c)}

/* ---------- Gestión y reservas ---------- */
.mi,.rs{border:0;border-radius:18px;box-shadow:var(--shadow)}
.rs{border-left:6px solid var(--warn)}
.rs.confirmed{border-left-color:var(--ok)}
.rs.cancelled{border-left-color:var(--line)}
.opts button{border:0;border-radius:999px}
.opts button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

@media (prefers-reduced-motion: reduce){.item,.setm,.track,.card,.ticket{animation:none!important}}