/* Cabecera del sitio (views/layout.php): logo, buscador, estado abierto/cerrado, menú de categorías y su versión celular. */

/* ---------- Barra principal ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .85); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid rgba(15, 23, 42, .06); }
.header-row { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; }
.header-extra { display: contents; } /* en celular se vuelve un panel flotante (ver abajo) */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand img { height: 56px; width: auto; max-width: 190px; object-fit: contain; }

/* ---------- Buscador y sugerencias ---------- */
.search { position: relative; flex: 1; max-width: 520px; margin-left: auto; }
.search input {
  width: 100%; padding: .65rem 3rem .65rem 1.1rem; border: 1.5px solid transparent; border-radius: 999px;
  background: #eef1f6; font: inherit; transition: box-shadow .2s, background .2s;
}
.search input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px var(--glow); }
.search button { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer; }

.search-pop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.search-pop a { display: flex; align-items: center; gap: 12px; padding: 8px 12px; text-decoration: none; }
.search-pop a:hover, .search-pop a:focus { background: var(--brand-soft); }
.search-pop .noimg { width: 44px; height: 44px; flex: none; border-radius: 8px; background: #f1f4f8; font-size: 1.3rem; }
.search-pop img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; }
.search-pop strong { display: block; font-size: .9rem; line-height: 1.25; }
.search-pop small { color: var(--muted); }
.search-pop em { font-style: normal; font-weight: 700; }
.search-pop .is-in { color: #15803d; }
.search-pop .is-out { color: #b91c1c; }
.search-pop .foot { position: sticky; bottom: 0; background: #fff; box-shadow: 0 -6px 12px -10px rgba(15,23,42,.35); }
.search-pop .all { justify-content: center; border-top: 1px solid var(--line); font-weight: 600; }

/* ---------- Estado "Abierto ahora / Cerrado" ---------- */
.status i { width: 9px; height: 9px; display: inline-block; border-radius: 50%; background: var(--muted); }

.status {
  display: flex; align-items: center; gap: 12px; padding: .4rem 1rem .4rem .55rem; white-space: nowrap; text-decoration: none;
  font-size: .85rem; font-weight: 600; line-height: 1.15; background: #eef8f1; border: 1px solid #d3eedc; border-radius: 16px;
}
.status i { width: 14px; height: 14px; flex: none; margin: 0 5px; }
.status.is-open i { --ring: 10px; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: pulse 1.8s infinite; }
.status.is-closed { background: #fdf0f0; border-color: #f6d4d4; }
.status.is-closed i { background: #dc2626; box-shadow: 0 0 0 5px rgba(220, 38, 38, .14), 0 0 0 9px rgba(220, 38, 38, .06); }
.st-tx { display: flex; flex-direction: column; }
.st-tx strong { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.st-tx small { font-size: .78rem; font-weight: 600; color: var(--muted); }
.status.is-open .st-tx strong { color: #15803d; }
.status.is-closed .st-tx strong { color: var(--danger); }
@keyframes pulse { 70% { box-shadow: 0 0 0 var(--ring, 10px) rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } /* onda que se abre y se desvanece (la misma del "en línea ahora" del panel) */

/* ---------- Botón de menú (sólo celular) ---------- */
.menu-btn { display: none; width: 42px; height: 42px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.menu-btn .bars { display: flex; flex-direction: column; gap: 4px; }
.menu-btn .bars i { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); }
.menu-btn small { font-size: .62rem; font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase; color: var(--muted); }

/* ---------- Menú de categorías (escritorio): grupos con desplegable ---------- */
.site-nav { background: transparent; }
.nav-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding-top: 3px; padding-bottom: 3px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; padding: .4rem .9rem; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: .93rem; font-weight: 600; color: #475569; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-link:hover, .nav-group:hover > .nav-link, .nav-group.open > .nav-link { background: #e8ecf3; color: var(--ink); }
.nav-link.is-active, .nav-group.is-active > .nav-link { background: var(--ink); color: #fff; box-shadow: 0 4px 14px rgba(15, 23, 42, .25); }
.chev { opacity: .7; transition: transform .2s; }
.nav-group { position: relative; }
.nav-group.open .chev { transform: rotate(180deg); }

/* Enlace directo (grupo de una sola categoría y "Cómo llegar"): el ícono y el número sólo se ven en celular */
.nav-ico { display: inline-block; }
.nav-n { display: none; }

.dd {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 270px; padding: 8px; background: #fff;
  border: 1px solid rgba(15, 23, 42, .08); border-radius: 18px; box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .28);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s;
}
.dd::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* puente: no se pierde el hover al bajar el mouse */
.dd a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: .92rem; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.dd a:hover, .dd a:focus-visible { background: var(--brand-soft); }
.dd a.is-active { background: var(--bg); box-shadow: inset 3px 0 0 var(--brand); }
.dd-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #f1f4f8; font-size: 1.15rem; }
.dd a:hover .dd-ico { background: #fff; }
.dd-tx { flex: 1; line-height: 1.2; }
.dd-tx strong { display: block; font-size: .93rem; }
.dd-tx small { font-size: .78rem; color: var(--muted); }
.dd-n, .nav-n { padding: .1rem .5rem; border-radius: 999px; background: #f1f4f8; font-size: .75rem; font-weight: 700; color: var(--muted); }

@media (min-width: 721px) {
  .nav-group:hover > .dd, .nav-group:focus-within > .dd, .nav-group.open > .dd { opacity: 1; visibility: visible; transform: none; }
}

/* ---------- Celular ---------- */
@media (max-width: 720px) {
  /* Fila 1: menú · logo centrado. Fila 2: buscador. Fila 3: estado. */
  .header-row {
    display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "menu brand ." "extra extra extra";
    align-items: center; gap: 0 10px; padding-top: 3px; padding-bottom: 3px;
  }
  .brand { grid-area: brand; justify-self: center; }
  .brand img { height: 34px; }
  .menu-btn { grid-area: menu; display: flex; width: 52px; height: 40px; gap: 5px; padding: 0; }

  .search { max-width: none; margin: 0; }
  .search input { padding-top: .5rem; padding-bottom: .5rem; font-size: .95rem; border-color: #cfd6e1; } /* borde visible: se distingue del encabezado aun con el fondo atenuado */
  .search button { width: 34px; }

  .status { width: 100%; justify-content: center; gap: 8px; padding: .2rem .7rem; border-radius: 999px; }
  .status i { width: 9px; height: 9px; margin: 0 4px 0 2px; }
  .status.is-open i { --ring: 8px; }
  .status.is-closed i { box-shadow: 0 0 0 3px rgba(220, 38, 38, .16); }
  .st-tx { flex-direction: row; align-items: baseline; gap: 6px; }
  .st-tx strong { font-size: .8rem; }
  .st-tx small { font-size: .74rem; }
  .st-tx small::before { content: "·"; margin-right: 6px; }

  /* Buscador y horario: panel flotante bajo la barra. Está fuera del flujo (absolute), así que mostrarlo u ocultarlo
     no mueve el contenido ni genera saltos al scrollear. El margen del encabezado reserva su lugar arriba de todo. */
  .site-header { margin-bottom: var(--extra-h, 84px); }
  .header-extra {
    grid-area: extra; position: absolute; top: 100%; left: 0; right: 0; z-index: -1; display: flex; flex-direction: column; gap: 4px; padding: 4px 14px 6px;
    background: rgba(255, 255, 255, .98); border-bottom: 1px solid rgba(15, 23, 42, .06);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, visibility 0s;
  }
  .status { max-height: 32px; overflow: hidden; transition: max-height .25s ease, opacity .2s ease, padding .25s ease, border-width .25s ease; }
  .site-header.hide-search .header-extra { transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, visibility 0s .28s; }
  .site-header.scrolled .status { max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; pointer-events: none; }

  /* Menú: panel con todas las categorías en listado */
  .site-nav { display: none; }
  .site-nav.is-open {
    position: relative; z-index: 2; display: block; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); margin: 2px 10px 10px; overflow-y: auto; overscroll-behavior: contain;
    background: #eef1f6; border: 1px solid rgba(15, 23, 42, .08); border-radius: 20px; box-shadow: 0 24px 50px -12px rgba(15, 23, 42, .45);
  }
  .site-nav.is-open::before { content: "Categorías"; display: block; padding: 8px 16px 0; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  /* Aviso de que el listado sigue: degradé al pie con "Deslizá" mientras haya más para ver (site.js pone .can-scroll / .at-end) */
  .site-nav.is-open::after { content: "↓ Deslizá para ver más"; position: sticky; bottom: 0; display: none; margin-top: -46px; padding: 22px 0 8px; border-radius: 0 0 20px 20px; background: linear-gradient(to bottom, rgba(238, 241, 246, 0), #eef1f6 62%); text-align: center; font-size: .78rem; font-weight: 800; color: var(--ink); pointer-events: none; }
  .site-nav.is-open.can-scroll:not(.at-end)::after { display: block; }
  .nav-row { display: grid; grid-template-columns: 1fr; justify-content: normal; gap: 2px; padding: 6px 8px 8px; }
  .nav-group { display: contents; }
  .nav-group > .nav-link { display: none; }  /* los grupos no se ven: todas las categorías van sueltas */
  .nav-group .dd { display: contents; visibility: visible; opacity: 1; transform: none; } /* anula el estado oculto del desplegable de escritorio */

  .dd a, .nav-flat {
    display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 38px; padding: .2rem .6rem;
    background: #fff; border-radius: 11px; font-size: .92rem; font-weight: 700; color: var(--ink);
  }
  .dd a:active, .nav-flat:active { background: var(--brand-soft); }
  .dd a.is-active, .nav-flat.is-active { background: var(--ink); color: #fff; box-shadow: none; }
  .dd-ico, .nav-ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #f1f4f8; font-size: 1rem; }
  .nav-flat.is-active .nav-ico { background: #fff; }
  .dd-tx { min-width: 0; }
  .dd-tx strong { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dd-tx small { display: none; }
  .dd-n, .nav-n { display: inline-block; margin-left: auto; }
  .dd a.is-active .dd-n, .nav-flat.is-active .nav-n { background: rgba(255, 255, 255, .15); color: #fff; }

  /* Menú abierto: fondo atenuado y botón en negro, para que se note que estás adentro */
  body.menu-open .site-header { margin-bottom: 0; background: #fff; } /* sin transparencia: el fondo oscuro no tiñe el encabezado */
  body.menu-open .header-extra { position: static; z-index: auto; padding: 4px 0 0; background: none; backdrop-filter: none; border: 0; transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  body.menu-open .status { max-height: 32px; padding: .2rem .7rem; border-width: 1px; opacity: 1; pointer-events: auto; }
  body.menu-open { overflow: hidden; } /* el fondo no se desplaza mientras el menú está abierto */
  body.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 45; background: rgba(15, 23, 42, .45); animation: scrim .2s ease; }
  .menu-btn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); }
  .menu-btn[aria-expanded="true"] .bars i { background: #fff; }
  .menu-btn[aria-expanded="true"] small { color: #cbd5e1; }
}
@keyframes scrim { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .status.is-open i { animation: none; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .header-extra, .status { transition: none; }
}