/* ============================================================
   maree.css -- UNICO CSS compartido entre home.html (portada) y
   menu6.html (carta del QR de mesa) -- carril fkUNI.

   Aqui vive SOLO lo genuinamente comun: paleta, tipografia serif de
   titulos, la "cara" de la tarjeta de producto (.cuadro/.mas/.badge),
   el skeleton shimmer, la tab bar inferior y el buscador. Cada pagina
   sigue teniendo su propio <style> para lo que es SOLO suyo (heros y
   tarjeta de lealtad en home; categorias, armado y carrito en el
   menu) -- y para sus variables de color extra (--dorado en home;
   --ok/--alta/--media en el menu).

   Servido por GET /assets/{archivo} en app.py (mismo patron que
   /fotos/{archivo}: valida el nombre, no es file server generico).
   Cache-Control: 1 dia -- el <link> trae ?v=1 para poder romper cache
   mas adelante si este archivo cambia.
   ============================================================ */

:root {
  --rosa: #F7E3DF;
  --rosa-fuerte: #efc9c1;
  --crema: #FDF9F7;
  --texto: #40302c;
  --texto-suave: #5f524c;
  --linea: #ecdcd6;
  --blanco: #ffffff;
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;

  /* ---- escala de apilamiento (fkBUSCA, z-index): NOMBRADA a proposito
     -- este sitio ya lleva CUATRO incidentes de la misma familia de bug
     (un elemento fijo/flotante tapando -- Y INTERCEPTANDO EL TOQUE de --
     otro, por un numero de z-index suelto adivinado a ojo):
       1) fkZ    -- el buscador de la portada se montaba sobre el logo.
       2) fkR7   -- las hojas de menu.html (sucursal/modo) cortadas por
                    nav.tabs: EMPATE EXACTO de z-index:40, y quien va
                    despues en el DOM (nav.tabs) ganaba -- 3 reportes del
                    dueno antes de encontrarlo.
       3) fkBUSCA -- el boton "Guardar ubicacion" de direccion.html
                    tapado por esa misma nav.tabs (misma trampa: dos
                    barras fijas al pie, la de abajo en el DOM gana).
       4) fkBUSCA -- la lista de sugerencias del buscador de
                    direccion.html tapada por el mapa de Leaflet: el
                    contenedor de sugerencias (position:absolute) no
                    tenia z-index (=auto), y Leaflet pinta sus capas en
                    400 (.leaflet-pane) y sus controles en 1000
                    (.leaflet-control) -- ver assets/leaflet.css,
                    NO se toca, es de terceros. auto pierde contra los
                    dos.
     La regla de la casa: TODO elemento fijo/flotante nuevo lee esta
     escala en vez de adivinar un numero. --z-mapa/--z-mapa-controles
     son de REFERENCIA (reflejan los valores fijos de Leaflet, no nos
     pertenecen); --z-hoja:42 documenta el valor ya usado en el
     .sheet-fondo de menu.html (fkR7) -- no se migra aqui porque ese
     archivo es de otro carril, solo se deja registrado para que el
     siguiente numero se lea, no se adivine. */
  --z-header: 30;
  --z-barra-inferior: 40;
  --z-hoja: 42;
  --z-mapa: 400;            /* Leaflet .leaflet-pane -- de referencia */
  --z-mapa-controles: 1000; /* Leaflet .leaflet-control -- de referencia */
  --z-sugerencias: 1100;    /* por encima de CUALQUIER capa de Leaflet */
}

.serif { font-family: var(--font-serif); }

/* ---- transiciones suaves (fkTRANS): fundido nativo ENTRE paginas
   (documento cruzado: portada <-> menu <-> tarjeta) via View
   Transitions -- degrada solo (navegacion normal, sin fundido) en
   navegadores que no lo soportan, porque @view-transition es una regla
   que ellos simplemente ignoran. DENTRO del menu (tiles -> categoria ->
   armado -> volver) el mismo fundido se dispara desde JS con
   document.startViewTransition(), ver transicion() en maree.js -- las
   reglas de duracion/reduced-motion de aqui aplican a AMBOS casos. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.2s; }

/* ---- header (fkHDR): UN SOLO alto/logo/fondo para portada y menu --
   cada pagina solo agrega lo que es DE ELLA dentro de la fila
   (nav-desk, chip de entrar, bolsa, chips-dcha...). El logo NUNCA se
   mueve: antes el control de "volver" (button.atras o .cat-header-btn)
   vivia DENTRO de esta fila y por turnos empujaba u ocultaba el logo
   (brincaba ~71px). Ahora ese control vive en su propia sub-fila,
   HERMANA del header (.subfila-volver, mas abajo) -- nunca dentro. */
header.top {
  background: var(--crema);
  padding: 0.85rem 1rem;
  position: sticky; top: 0; z-index: var(--z-header);
  border-bottom: 1px solid var(--linea);
  box-shadow: none;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
header.top #marca-logo { height: 3.5rem; width: auto; display: block; margin: 0; }

/* ---- nav de escritorio + chip de sesion (fkNAV3): PIEZA COMPARTIDA --
   UNA sola cabecera para portada, menu y las paginas de lealtad
   (lealtad_tarjeta.py, _base_html(), consume este archivo en vez de
   duplicarlo). Cada pagina solo pone SUS enlaces/estado activo en el
   HTML -- el centrado, la tipografia y el chip son de aqui. Antes las
   3 vistas se veian distintas (nav centrado en 2 de 3, pegado a la
   derecha en la 3ra; el chip de sesion con otros valores en cada
   quien) -- eso es justo lo que esto cierra. */
.nav-desk { display: none; }
@media (min-width: 768px) {
  header.top { padding-left: 2rem; padding-right: 2rem; }
  .nav-desk { display: flex; align-items: center; gap: 1.7rem; margin: 0 auto; }
  .nav-desk a { font-size: 0.95rem; font-weight: 600; color: var(--texto-suave); text-decoration: none; }
  .nav-desk a.activo { color: var(--texto); }
  .nav-desk a:hover { color: var(--texto); }
}
.chip-entrar {
  margin-left: auto; flex: none;
  border: 1.6px solid var(--texto); border-radius: 999px;
  background: var(--blanco); color: var(--texto);
  font-size: 0.9rem; font-weight: 700;
  padding: 0.5rem 1.05rem;
  max-width: 9.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none; display: inline-block;
  position: relative; /* fkPULIDO2: ancla el ::after de abajo */
}
/* fkPULIDO2: el chip mide ~34px de alto — target tactil real de 44px con
   pseudo-elemento invisible, la misma tecnica que .fkpet-idioma-btn::after
   (fkPET TKA-0399). El visual no cambia. */
.chip-entrar::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%); height: 44px;
}
@media (min-width: 768px) {
  .chip-entrar { margin-left: 0; }
}
header.top a.bolsa {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blanco); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(64,48,44,0.12);
  flex: none; text-decoration: none;
  position: relative; /* fkPET TKA-0399: ancla el ::after de abajo */
}
/* fkPET (TKA-0399): 40x40 visual, target de toque real 44x44 via
   pseudo-elemento invisible centrado -- no crece el circulo que se ve. */
header.top a.bolsa::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 44px; height: 44px;
}

/* sub-fila sticky de "‹ volver" (chevron grande + nombre en serif) --
   solo existe dentro de una categoria, del armado, del carrito o del
   resumen (ver actualizarHeaderCategoria() en menu.html); en la
   portada y en la raiz del menu no se monta nunca. Target de toque
   >=44px, como pide accesibilidad. */
.subfila-volver {
  display: none; align-items: center;
  position: sticky; top: var(--header-h, 84px); z-index: 29;
  background: var(--crema); border-bottom: 1px solid var(--linea);
}
.subfila-volver.mostrar { display: flex; }
.subfila-volver button {
  display: flex; align-items: center; gap: 0.4rem;
  border: none; background: none; padding: 0.5rem 1rem;
  min-height: 44px; width: 100%; cursor: pointer; color: var(--texto);
  font: inherit; text-align: left;
}
.subfila-volver button .chevron { font-size: 1.8rem; line-height: 1; font-weight: 400; flex: none; }
.subfila-volver button:active .chevron { opacity: 0.6; }
.subfila-volver button .nombre {
  font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- skeleton shimmer (mientras carga la carta/carrusel) ---- */
.skel {
  background: linear-gradient(90deg, #f3ece9 25%, #faf5f2 50%, #f3ece9 75%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: sk 1.2s infinite linear;
}
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- tarjeta de producto: SOLO la cara (.cuadro/.mas/.badge) ----
   El contenedor externo (tamano y layout: carrusel de 150px en home,
   grid de la carta en el menu) lo pone cada pagina en su propio
   <style> -- esto es unicamente la foto con su badge y su boton "+". */
.cuadro {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px;
  aspect-ratio: 1; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.cuadro img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* fkPET (TKA-0399, verificado no arreglado): .mas es decorativo --
   pointer-events:none y aria-hidden="true" en el HTML (menu.html) --
   el target de toque real es .tarjeta, la tarjeta ENTERA del producto
   (grid de 2 columnas, sin altura fija chica), que ya excede 44x44
   por mucho margen. Agrandar este circulo de 28px no cambiaria ningun
   area clicable real, asi que se deja como esta -- ver gate_ola_m2.py
   pieza 2 (verifica la delegacion, no el tamano de .mas en si). */
.mas {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blanco); border: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1; color: var(--texto);
  box-shadow: 0 1px 3px rgba(64,48,44,0.15); pointer-events: none;
}
.badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--rosa-fuerte); color: var(--texto);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.25rem 0.5rem; border-radius: 999px;
}
@media (min-width: 768px) {
  /* la transicion vive aqui; QUIEN dispara el zoom (:hover de que
     elemento) lo decide cada pagina, porque el envoltorio es suyo. */
  .cuadro img { transition: transform 0.25s ease; }
}

/* ---- fkR5 (P3, idea de Joel -- "que no se dupliquen fotos" y "que
   de la vista se le antoje uno u otro"): segunda foto EMPALMADA sobre
   la base, apagada por default -- Shared.iniciarAlternanciaFoto() la
   enciende/apaga con fundido, desfasada por tarjeta. Si un candidato no
   carga, el propio onerror lo saca del ciclo y la tarjeta se queda
   estatica, sin lista de ids que mantener aqui. fkR7: vivia duplicada
   en menu.html -- ahora es pieza compartida porque home.html tambien
   la usa (P2 del dueno, "que las imagenes cambiantes tambien esten en
   el home"). fkTILE: el selector YA NO va scoped a ".cuadro" -- el
   mismo ayudante generalizado (N fotos, no solo crepa/waffle) tambien
   lo usa el tile de categoria (.tile-foto en menu.html), que no trae
   ".cuadro" -- CUALQUIER envoltorio con position:relative sirve, esta
   pieza solo pone la capa absoluta + el fundido. */
.foto-b {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.6s ease;
}
.foto-b.mostrar { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .foto-b { transition: none; }
}

/* ---- buscador "Que se te antoja?" ---- */
.busca-wrap { position: relative; z-index: 20; }
/* MODIFICADOR (fkNAV3): variante "suelta" del buscador cuando vive
   directo en la pagina (portada, raiz del menu) en vez de dentro de
   una tarjeta -- su propio margen arriba y, en escritorio, centrado
   con ancho maximo. */
.busca-wrap--pagina { margin-top: 0.9rem; }
@media (min-width: 768px) {
  .busca-wrap--pagina { max-width: 660px; margin-left: auto; margin-right: auto; }
}
.busca {
  display: flex; align-items: center; gap: 0.55rem;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 999px; padding: 0.72rem 1rem;
  box-shadow: 0 1px 4px rgba(64,48,44,0.06);
}
.busca svg { flex: none; opacity: 0.55; }
.busca input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font-size: 1rem; color: var(--texto); font-family: inherit;
}
/* fkPET (TKA-0399): opacity:.8 sobre --texto-suave (ya oscurecido a
   proposito para 4.5:1, ver fkR8/comentario en :root) devolvia el
   contraste real a ~4.55:1 con poco margen -- color solido, sin
   opacity, deja el placeholder en 7.51:1 sobre blanco. */
.busca input::placeholder { color: var(--texto-suave); }
.busca-res {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  /* fkBUSCA (incidente 4 de la escala de arriba): sin z-index quedaba
     en "auto" y perdia contra las capas/controles de Leaflet cuando
     este buscador convive con un mapa (direccion.html) -- 1100 la deja
     por encima de CUALQUIER capa de Leaflet (400/1000), y de paso
     tambien por encima de nav.tabs/header en las paginas sin mapa. */
  z-index: var(--z-sugerencias);
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(64,48,44,0.14);
  overflow: hidden; display: none; max-height: 21rem; overflow-y: auto;
}
.busca-res a, .busca-res .fila {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--linea);
  cursor: pointer;
}
.busca-res a:last-child, .busca-res .fila:last-child { border-bottom: 0; }
.busca-res img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: #f3ece9; flex: none; }
.busca-res .sin-foto { width: 42px; height: 42px; border-radius: 10px; background: var(--rosa); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.busca-res .n { font-size: 0.92rem; font-weight: 600; }
.busca-res .g { font-size: 0.74rem; color: var(--texto-suave); margin-top: 1px; }
.busca-res .p { margin-left: auto; font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
/* fkPET (TKA-0399, verificado no arreglado): mismo caso que .mas --
   decorativo (pointer-events:none, aria-hidden en menu.html), el
   target real es .busca-res .fila (fila entera del resultado, >=61px
   de alto por su padding+imagen de 42px, ver esa regla arriba). */
.busca-res .mas-chip {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--crema); border: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: var(--texto); pointer-events: none;
}
.tendencias { padding: 0.8rem 0.85rem 0.95rem 0.85rem; }
.tendencias .tt { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 0.55rem; }
.tendencias .chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tendencias button {
  font-family: inherit; font-size: 0.84rem; font-weight: 600; color: var(--texto);
  background: var(--crema); border: 1px solid var(--linea); border-radius: 999px;
  padding: 0.42rem 0.85rem; display: flex; align-items: center; gap: 0.35rem;
}
.tendencias button svg { opacity: 0.5; }

/* ---- tab bar inferior: Inicio . Pedir . Mi tarjeta ----
   Vive en AMBAS paginas. En el menu se turna con la barra de orden
   (nunca las dos a la vez -- ver JS de cada pagina): nav.tabs.oculta
   la esconde cuando hay carrito con contenido. En home nunca se le
   pone esa clase, asi que siempre se ve igual que hoy. */
nav.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barra-inferior);
  background: var(--blanco); border-top: 1px solid var(--linea);
  display: flex; justify-content: space-around;
  padding: 0.45rem 0 calc(0.45rem + env(safe-area-inset-bottom)) 0;
}
nav.tabs.oculta { display: none; }
nav.tabs a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 0.66rem; font-weight: 600; color: var(--texto-suave);
  min-width: 64px; padding: 0.15rem 0.4rem;  /* fkPULIDO2: los labels heredaban el subrayado default de <a> —
     el estado activo se marca con color/peso, no con subrayado. */
  text-decoration: none;
}
nav.tabs a.activo { color: var(--texto); }
nav.tabs svg { width: 23px; height: 23px; }
@media (min-width: 768px) {
  nav.tabs { display: none; }
}

/* ---- pie de contacto sobrio (fkPULIDO E3) ----
   Pieza COMPARTIDA entre home.html (footer) y menu.html/pedido
   (footer.pie-pagina), generada UNA vez en el servidor (_contacto_html
   en app.py) y pintada donde cada pagina ponga el marcador
   <!--FKSEO_CONTACTO-->. Antes vivia SOLO en home.html, con estilo de
   chips amontonados (fondo blanco, borde, radio 999px, uno con borde
   punteado) y la direccion repetida en texto plano justo encima --
   reporte del dueno: "esta super mal el estilo... la direccion dos
   veces". Ahora es una fila discreta: iconos de linea (mismo lenguaje
   que nav.tabs arriba: viewBox 24x24, stroke=currentColor, grosor
   1.9, cabos redondos) + texto, sin fondo, sin borde, nunca punteado. */
.fk-contacto {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem 1.1rem;
  margin: 0.9rem 0 0.2rem 0;
  /* fkPULIDO2: 0.8rem=12.8px quedaba bajo el minimo comodo movil
     (~14px) para direccion y horario, que si se leen. */
  font-size: 0.875rem;
}
.fk-contacto-item {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--texto-suave); text-decoration: none;
  /* fkPIN (16-ago, Jimmy): con dirección a 2 líneas el icono quedaba pegado
     al borde izquierdo y el texto centrado lejos — el item se centra como
     UNIDAD (icono junto al texto) y el texto no se estira. */
  justify-content: center;
}
.fk-contacto-item span {
  /* fkPIN2: el texto NO se estira a todo el ancho (si no, el icono queda
     huerfano en el borde); bloque compacto alineado a la izquierda, y el
     conjunto icono+texto se centra como unidad. */
  flex: 0 1 auto; max-width: 30ch; text-align: left;
}
.fk-contacto-item svg { width: 15px; height: 15px; flex: none; opacity: 0.8; }
.fk-contacto-item:hover, .fk-contacto-item:focus-visible { color: var(--texto); }
.fk-contacto-texto { cursor: default; }

/* ── fkBARRAHOME: barra "Tu orden" — PIEZA COMPARTIDA (menu.html y
   home.html). Antes vivia solo en menu.html; al pedirla tambien en la
   portada se mudo aqui en vez de copiarse (regla de la casa: una pieza,
   un lugar; el guardian lo verifica). ── */
.barra-carrito {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: var(--texto); color: var(--blanco);
  padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom, 0px)) 1rem;
  display: none; align-items: center; justify-content: space-between;
  gap: 0.8rem; cursor: pointer;
}
.barra-carrito.mostrar { display: flex; }
/* fkCONVIVE: con la navegacion visible (movil), la barra se sube ENCIMA
   de ella en vez de taparla -- quinta vez que un elemento fijo al fondo
   choca con nav.tabs; por eso el alto se lee de la variable, no se clava. */
body:has(nav.tabs:not(.oculta)) .barra-carrito.mostrar {
  bottom: calc(var(--alto-tabs, 3.6rem) + env(safe-area-inset-bottom, 0px));
  padding-bottom: 0.8rem;
}
body:has(nav.tabs:not(.oculta)) main {
  padding-bottom: calc(var(--alto-tabs, 3.6rem) + 4.2rem + env(safe-area-inset-bottom, 0px));
}
.barra-carrito .izq { display: flex; align-items: center; gap: 0.6rem; }
.barra-carrito .contador {
  background: var(--rosa); color: var(--texto); font-weight: 800; font-size: 0.8rem;
  width: 1.6rem; height: 1.6rem; border-radius: 999px; display: flex;
  align-items: center; justify-content: center; flex: none;
}
.barra-carrito .texto { font-size: 0.88rem; font-weight: 600; }
.barra-carrito .total { font-weight: 800; font-size: 1.02rem; }

/* fkPET (TKA-0372, Builder X, 08-ago): CSS del mundito -- PIEZA
   COMPARTIDA para las paginas que consuman MareeShared.pintarBotonIdiomaMaree()
   (eventos.html, lealtad_tarjeta.py). menu.html/home.html traen su
   propia copia local identica (ya viva, no se toco) -- FOLLOW_UP
   migrarlas aqui tambien y dejar una sola fuente. */
.fkpet-idioma-wrap { position: relative; flex: none; }
.fkpet-idioma-btn {
  /* fkGLOBO: `padding:0` y `box-sizing` son OBLIGATORIOS -- sin ellos el
     relleno propio del <button> aplasta el SVG de 15px dentro del circulo
     de 1.9rem (se veia el circulo rosa VACIO en /tarjeta, que solo hereda
     esta regla; menu/home tenian su propia copia completa y por eso ahi
     si se veia). `flex:none` + `align-self:center` lo alinean con los
     chips del encabezado. */
  box-sizing: border-box; padding: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1.2px solid var(--rosa-fuerte); background: var(--rosa-fuerte);
  display: flex; align-items: center; justify-content: center;
  flex: none; align-self: center; line-height: 1; cursor: pointer;
  position: relative; /* fkPET TKA-0399: ancla el ::after de abajo */
}
/* fkPET (TKA-0399): 1.9rem (~30px) visual, target de toque real 44x44
   via pseudo-elemento invisible centrado (misma tecnica que las copias
   inline de home.html/menu.html -- ver FOLLOW_UP de unificacion). */
.fkpet-idioma-btn::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 44px; height: 44px;
}
.fkpet-idioma-btn svg { width: 15px; height: 15px; flex: none; display: block; }
.fkpet-idioma-wrap { position: relative; flex: none; align-self: center; display: flex; }
.fkpet-idioma-menu {
  position: absolute; top: calc(100% + 0.3rem); right: 0; z-index: 45;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12); padding: 0.3rem; min-width: 8rem;
}
.fkpet-idioma-menu button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 0.45rem 0.6rem; font-size: 0.85rem; color: var(--texto);
  border-radius: 7px; cursor: pointer;
}
.fkpet-idioma-menu button:hover, .fkpet-idioma-menu button:focus { background: var(--rosa); }

/* fkBARRAHOME: forma de pildora -- estaba solo en menu.html y la portada
   la habria mostrado cuadrada. Vale para las dos. */
.barra-carrito { border-radius: 999px;
  margin: 0 .7rem calc(.6rem + env(safe-area-inset-bottom, 0px)); }


/* ---- fkKOMPAKT (16-ago, matriz 320px): a 320px de ancho con idiomas de
   textos largos (de: Anmelden / Speisekarte) la fila del header suma ~330px
   y ensancha el documento — 10px de scroll horizontal que arrastran a
   nav.tabs y a toda barra fija. Bajo 360px: paddings más cortos, el chip
   de sesión acotado y con permiso de ENCOGER (min-width:0 en flex). ---- */
@media (max-width: 359px) {
  header.top { padding-left: 0.7rem; padding-right: 0.7rem; gap: 0.45rem; }
  header.top .marca { min-width: 0; }
  header.top .marca h1 { font-size: 1.05rem; }
  .chip-entrar { max-width: 6.6rem; min-width: 0; font-size: 0.82rem;
                 padding: 0.45rem 0.75rem; }
  nav.tabs a { min-width: 56px; padding: 0.15rem 0.25rem; }
}