/* ==========================================================================
   3 · Botones
   ========================================================================== */
.btn {
  --bg: var(--surface); --fg: var(--tinta); --bd: var(--linea);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .5em; padding: .62rem 1.05rem; border-radius: 11px;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  font-weight: 600; font-size: .9rem; white-space: nowrap;
  transition: transform .18s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover  { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0) scale(.978); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn--fuerte  { --bg: var(--rojo); --fg: #fff; --bd: var(--rojo); }
.btn--fuerte:hover { --bg: var(--rojo-vivo); --bd: var(--rojo-vivo); }
.btn--naranja { --bg: var(--naranja); --fg: var(--nori); --bd: var(--naranja); }
.btn--naranja:hover { --bg: var(--naranja-cl); --bd: var(--naranja-cl); }
.btn--fantasma { --bg: transparent; --bd: transparent; --fg: var(--tinta-2); }
.btn--fantasma:hover { --bg: var(--crema-2); }
.btn--peligro { --fg: var(--rojo); --bd: rgba(176,30,36,.3); }
.btn--peligro:hover { --bg: var(--rojo-sua); }
.btn--claro { --bg: rgba(253,244,231,.12); --fg: var(--crema); --bd: rgba(253,244,231,.2); }
.btn--claro:hover { --bg: rgba(253,244,231,.2); }
.btn--ancho { width: 100%; }
.btn--grande { padding: .85rem 1.35rem; font-size: .97rem; }

/* ==========================================================================
   4 · Estructura
   ========================================================================== */
.app { animation: app-entra .7s var(--ease) both; }
@keyframes app-entra { from { opacity: 0; transform: scale(1.012); } }

/* La barra es OSCURA. Ahí está casi todo el contraste del panel: un crema
   sobre crema se lee plano y sin jerarquía. */
.barra { position: sticky; top: 0; z-index: 40; background: var(--nori); color: var(--crema); }
.barra__i {
  max-width: var(--max); margin: 0 auto;
  padding: .75rem clamp(1rem, 3vw, 1.7rem);
  display: flex; align-items: center; gap: 1rem;
}
.barra__logo {
  width: 54px; height: 54px; flex: none;
  filter: drop-shadow(0 4px 14px rgba(240,144,30,.35));
  transition: transform var(--d-medio) var(--resorte);
}
.barra__logo:hover { transform: rotate(-8deg) scale(1.08); }
.barra__marca { font-family: var(--display); font-weight: 700; font-size: 1.18rem;
                letter-spacing: -.022em; line-height: 1.12; }
.barra__marca em { color: var(--naranja-cl); font-style: normal; }
/* --- Qué sede se está viendo ----------------------------------------------
   Antes esto era el segundo renglón del bloque de la marca: versalitas de
   .69 rem con un cheurón al lado, en el hueco que sobraba. Se leía como
   rótulo y no como control, y en el celular el blanco medía 23 px de alto.

   Ahora es una ficha con sitio propio en la barra y con la misma altura y el
   mismo lenguaje que el avatar y el botón de ajustes, que son los otros dos
   controles que hay ahí. Sigue siendo un menú y no un interruptor de dos
   casillas: de esta decisión cuelga a qué sede le marcas un plato agotado, y
   un control que se cambia al rozarlo agota el salmón en la sede equivocada. */
.barra__sede { position: relative; }   /* ancla del menú */

.sede {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .7rem; border-radius: 13px;
  background: rgba(253,244,231,.09); border: 1px solid rgba(253,244,231,.14);
  color: var(--crema); text-align: left; white-space: nowrap;
  transition: background var(--d-rapido) var(--ease), border-color var(--d-rapido) var(--ease);
}
.sede:hover, .sede[aria-expanded="true"] {
  background: rgba(253,244,231,.17); border-color: rgba(253,244,231,.26);
}
/* La ficha de una caja no se pulsa: su cuenta maneja una sola sede y el
   servidor no la deja salir de ahí. Que no finja ser un botón. */
.sede--fija, .sede--fija:hover { background: rgba(253,244,231,.05);
                                 border-color: rgba(253,244,231,.10); }

.sede__pin {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 9px; background: rgba(240,144,30,.16);
}
.sede__t { display: flex; flex-direction: column; line-height: 1.16; min-width: 0; }
.sede__e { font-size: .57rem; font-weight: 700; letter-spacing: .13em;
           text-transform: uppercase; color: var(--arena); }
.sede__n, .sede__c { font-size: .89rem; font-weight: 600; letter-spacing: -.012em; }
.sede__c { display: none; }            /* el nombre corto es cosa del celular */

/* 07-afinado.css pinta de naranja TODO «.barra__sede .ico» —lo quiere para el
   pin—, y el menú cuelga de ahí dentro, así que le caería encima también. Una
   clase más lo saca de esa regla sin tocar el orden de los <link>. */
.barra__sede .ico.sede__v {
  font-size: .78rem; color: var(--arena); opacity: .85;
  transition: transform var(--d-medio) var(--ease);
}
.sede[aria-expanded="true"] .sede__v { transform: rotate(180deg); }

/* --- El menú de sedes ------------------------------------------------------
   Cuelga del rótulo, que está a la izquierda; el de ajustes se abre al otro
   lado, así que hay que deshacerle el anclaje, no solo añadirle uno.

   Va atado a `.barra__sede` y no suelto: `.ajustes__menu` —de quien hereda la
   caja, la sombra y la animación— se declara más abajo en este mismo archivo,
   así que con una sola clase empataba en especificidad y ganaba por estar
   después. Con el ancestro delante gana esta, esté donde esté. */
.barra__sede .sede__menu {
  right: auto; left: 0; min-width: 272px; transform-origin: top left;
}
.sede__o {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .55rem .6rem; border-radius: 11px; text-align: left;
  transition: background var(--d-rapido) var(--ease);
}
.sede__o:hover { background: var(--crema); }
.sede__marca {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 10px; background: var(--crema-2);
  transition: background var(--d-rapido) var(--ease);
}
.barra__sede .sede__menu .ico { font-size: 1rem; color: var(--tinta-3); }
.sede__ot { display: flex; flex-direction: column; line-height: 1.28; }
.sede__ot b { font-size: .92rem; font-weight: 600; }
/* «Sede sur» y «Sede norte» son dos rótulos que se parecen; quien no vive en
   el negocio los confunde. El barrio es lo que de verdad los separa. */
.sede__z { font-size: .73rem; color: var(--tinta-3); }
.sede__o--on { background: var(--rojo-sua); }
.sede__o--on .sede__marca { background: var(--rojo); }
.sede__o--on .sede__ot b { color: var(--rojo); }
.barra__sede .sede__menu .sede__o--on .ico { color: #fff; }
.sede__nota {
  display: flex; gap: .5rem; align-items: flex-start;
  margin: .35rem .25rem .1rem; padding: .55rem .45rem .15rem;
  border-top: 1px solid var(--linea-sutil);
  font-size: .73rem; line-height: 1.45; color: var(--tinta-3);
}
.barra__sede .sede__menu .sede__nota .ico { flex: none; margin-top: .15em; font-size: .82rem; }
.barra__d { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.quien { text-align: right; line-height: 1.25; }
.quien__n { font-weight: 600; font-size: .9rem; }
.quien__r { font-size: .71rem; color: var(--arena); }
.avatar {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 700;
  background: linear-gradient(145deg, var(--rojo), var(--rojo-osc));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.avatar--dueno { background: linear-gradient(145deg, var(--naranja), #C96F0E); color: var(--nori); }

/* --- Menú de ajustes ------------------------------------------------------ */
.ajustes { position: relative; }
.ajustes__b {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: var(--crema); font-size: 1.15rem;
  background: rgba(253,244,231,.09); border: 1px solid rgba(253,244,231,.14);
  transition: background var(--d-rapido) var(--ease), transform var(--d-medio) var(--ease);
}
.ajustes__b:hover { background: rgba(253,244,231,.18); }
.ajustes__b .ico { font-size: 1.15rem; transition: transform var(--d-medio) var(--ease); }
.ajustes__b:hover .ico { transform: rotate(75deg); }
.ajustes__menu {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 50;
  min-width: 230px; padding: .4rem; border-radius: 15px;
  background: var(--surface); color: var(--tinta);
  border: 1px solid var(--linea);
  box-shadow: 0 18px 50px rgba(22,16,13,.28);
  transform-origin: top right;
  animation: menu-entra .26s var(--resorte) both;
}
@keyframes menu-entra { from { opacity: 0; transform: scale(.9) translateY(-6px); } }
.ajustes__t {
  font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3); padding: .55rem .7rem .3rem;
}
.ajustes__o {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: .6rem .7rem; border-radius: 10px; text-align: left;
  font-size: .91rem; font-weight: 500;
  transition: background var(--d-rapido) var(--ease), transform var(--d-rapido) var(--ease);
}
.ajustes__o:hover { background: var(--crema); transform: translateX(3px); }
.ajustes__o .ico { font-size: 1.05rem; color: var(--tinta-3);
                     transition: color var(--d-rapido) var(--ease); }
.ajustes__o:hover .ico { color: var(--rojo); }
.ajustes__sep { height: 1px; background: var(--linea-sutil); margin: .35rem .4rem; }

/* --- Navegación ----------------------------------------------------------- */
.nav {
  position: sticky; top: 70px; z-index: 39;
  background: rgba(253,244,231,.95); backdrop-filter: blur(12px);
  border-bottom: 1.5px solid var(--linea-sutil);
}
/* `position: relative` es lo que hace que el hilo de abajo se alinee: sin
   esto, `offsetLeft` de las pestañas se mide contra un ancestro distinto del
   que posiciona al hilo, y el subrayado queda corrido. */
.nav__i {
  position: relative;
  max-width: var(--max); margin: 0 auto; display: flex; gap: .1rem;
  padding: 0 clamp(1rem, 3vw, 1.7rem); overflow-x: auto; scrollbar-width: none;
}
.nav__i::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: .5em;
  padding: .8rem 1rem .75rem;
  font-weight: 600; font-size: .93rem; color: var(--tinta-3); white-space: nowrap;
  transition: color var(--d-rapido) var(--ease);
}
/* El icono va apagado y se enciende con la pestaña, en vez de llevar color
   propio: seis dibujos de colores en fila compiten entre ellos y con el
   subrayado, y entonces ya no se sabe cuál está puesta. */
.tab .ico { font-size: 1.18rem; opacity: .62;
            transition: opacity var(--d-rapido) var(--ease); }
.tab:hover .ico, .tab[aria-selected="true"] .ico { opacity: 1; }
.tab:hover { color: var(--tinta); }
.tab[aria-selected="true"] { color: var(--rojo); }
.tab__obra {
  display: inline-block; margin-left: .4em; font-size: .58rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; vertical-align: middle;
  background: var(--ambar-sua); color: #A8650E; padding: .2em .45em; border-radius: 4px;
}
.tab__hilo {
  position: absolute; bottom: 0; left: 0; height: 3px; width: 0;
  border-radius: 3px 3px 0 0; background: var(--rojo);
  transition: transform .38s var(--ease), width .38s var(--ease);
  pointer-events: none;
}

main { max-width: var(--max); margin: 0 auto; padding: clamp(1.1rem, 3vw, 1.9rem); }
.vista { animation: vista-entra .45s var(--ease) both; }
@keyframes vista-entra { from { opacity: 0; transform: translateY(12px); } }

/* ==========================================================================
   5 · Herramientas
   ========================================================================== */
.herramientas { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
                margin-bottom: 1.5rem; }
.buscador { position: relative; flex: 1 1 210px; min-width: 0; }
.buscador input {
  width: 100%; padding: .7rem .95rem .7rem 2.5rem; border-radius: 12px;
  background: var(--surface); border: 1.5px solid var(--linea); color: var(--tinta);
  transition: border-color var(--d-rapido) var(--ease), box-shadow var(--d-rapido) var(--ease);
}
.buscador input:focus { border-color: var(--naranja); outline: none;
                        box-shadow: 0 0 0 4px var(--ambar-sua); }
.buscador__i {
  position: absolute; left: .9rem; top: 50%; translate: 0 -50%;
  font-size: 1.05rem; color: var(--tinta-3); pointer-events: none;
  transition: color var(--d-rapido) var(--ease);
}
.buscador:focus-within .buscador__i { color: var(--naranja); }
.filtro {
  display: inline-flex; align-items: center; gap: .5em; cursor: pointer;
  padding: .58rem .95rem; border-radius: 12px;
  background: var(--surface); border: 1.5px solid var(--linea);
  font-size: .88rem; font-weight: 600; color: var(--tinta-2); user-select: none;
  transition: background var(--d-rapido) var(--ease), color var(--d-rapido) var(--ease),
              border-color var(--d-rapido) var(--ease);
}
.filtro input { position: absolute; opacity: 0; pointer-events: none; }
.filtro:has(input:checked) { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.filtro__caja {
  width: 16px; height: 16px; border-radius: 5px; flex: none;
  border: 2px solid currentColor; opacity: .5; display: grid; place-items: center;
  transition: opacity var(--d-rapido) var(--ease);
}
.filtro:has(input:checked) .filtro__caja { opacity: 1; background: #fff; color: var(--rojo); }
.filtro__caja .ico { font-size: .72rem; stroke-width: 3.4; opacity: 0;
                      transition: opacity .15s var(--ease); }
.filtro:has(input:checked) .filtro__caja .ico { opacity: 1; }

.marcador {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .55rem .95rem; border-radius: 99px; font-size: .84rem; font-weight: 600;
  background: var(--verde-sua); color: var(--verde);
}
.marcador--alerta { background: var(--rojo-sua); color: var(--rojo); }

/* --- Las pastillas de categoría -------------------------------------------
   Van sobre la lista, no dentro de la barra de arriba: filtran lo de abajo y
   el bloque de agotados no se corre de sitio por ellas.

   Envuelven en vez de deslizarse: las once categorías de la carta miden 1.748
   px puestas en fila, así que en una sola tira quedarían dos tercios fuera de
   cuadro y habría que arrastrarlas con el ratón para dar con «Bar». Envueltas
   caben en dos renglones y se ven todas de una, que es de lo que se trata. En
   el celular no caben —serían seis renglones antes del primer plato— y ahí sí
   se deslizan: 07-afinado.css, «Pantalla angosta».

   El relleno de arriba y abajo no es adorno: el halo del foco mide ~5,5 px y
   `overflow-x: auto` —el del celular— también recorta en vertical. */
.pastillas {
  position: relative;   /* para que el offsetLeft de una pastilla sea suyo */
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin-bottom: .35rem; padding: .45rem .4rem .75rem;
}
.pastilla {
  display: inline-flex; align-items: center; gap: .45em; flex: none;
  padding: .5rem .9rem; border-radius: 99px;
  background: var(--surface); border: 1.5px solid var(--linea);
  font-size: .86rem; font-weight: 600; color: var(--tinta-2); white-space: nowrap;
  transition: background var(--d-rapido) var(--ease), color var(--d-rapido) var(--ease),
              border-color var(--d-rapido) var(--ease);
}
.pastilla:hover { border-color: var(--arena); color: var(--tinta); }
/* El foco global redondea a 6 px: en una pastilla eso le cambia la forma. */
.pastilla:focus-visible { border-radius: 99px; }
.pastilla--on { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.pastilla__n {
  font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: .05em .5em; border-radius: 99px;
  background: var(--crema-2); color: var(--tinta-3);
}
.pastilla--on .pastilla__n { background: rgba(255,255,255,.22); color: #fff; }