/* Hoolistic Carta: carta en la web. Hereda la tipografía del tema; los colores se ajustan con variables. */
.hcarta {
  --hcarta-accent: #044a30;
  --hcarta-text: #1d1d1b;
  --hcarta-muted: #6b6a66;
  --hcarta-celiac: #b01a37;
  --hcarta-line: #e3dfd6;
  --hcarta-bg-soft: rgba(0, 0, 0, .035);
  --hcarta-col: 5.75em;
  --hcarta-sticky-top: 0px;
  color: var(--hcarta-text);
  line-height: 1.4;
  width: 100%;
}
.hcarta *, .hcarta *::before, .hcarta *::after { box-sizing: border-box; }
.hcarta ul { list-style: none; margin: 0; padding: 0; }

/* Pestañas entre cartas */
.hcarta-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; margin-bottom: 8px; scrollbar-width: none; }
.hcarta-tabs::-webkit-scrollbar { display: none; }
.hcarta-tabs button {
  flex: 0 0 auto; border: 1px solid var(--hcarta-line); background: transparent; color: var(--hcarta-text);
  border-radius: 999px; padding: .5em 1.1em; font: inherit; font-size: .95em; cursor: pointer; white-space: nowrap;
}
.hcarta-tabs button[aria-selected="true"] { background: var(--hcarta-accent); border-color: var(--hcarta-accent); color: #fff; }
.hcarta-tabs button:focus-visible, .hcarta-nav a:focus-visible, .hcarta summary:focus-visible { outline: 2px solid var(--hcarta-accent); outline-offset: 2px; }

.hcarta-menu-title { color: var(--hcarta-accent); margin: 0 0 .6em; }

/* Selector de cartas (enlaces a sus páginas) */
.hcarta-menus { margin: 0 0 1.2em; }
.hcarta-menus ul { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.hcarta-menus ul::-webkit-scrollbar { display: none; }
.hcarta-menus a {
  display: block; white-space: nowrap; padding: .5em 1.1em; border-radius: 999px; font-size: .95em;
  border: 1px solid var(--hcarta-line); color: var(--hcarta-text); text-decoration: none;
}
.hcarta-menus a:hover { border-color: var(--hcarta-accent); }
.hcarta-menus a[aria-current="page"] { background: var(--hcarta-accent); border-color: var(--hcarta-accent); color: #fff; }
.hcarta-menus a:focus-visible { outline: 2px solid var(--hcarta-accent); outline-offset: 2px; }

/* Índice de secciones */
.hcarta-nav {
  position: sticky; top: var(--hcarta-sticky-top); z-index: 5;
  background: var(--hcarta-nav-bg, #fff); margin: 0 0 1.5em; padding: 8px 0;
  border-bottom: 1px solid var(--hcarta-line);
}
.hcarta-nav ul { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.hcarta-nav ul::-webkit-scrollbar { display: none; }
.hcarta-nav a {
  display: block; white-space: nowrap; padding: .35em .9em; border-radius: 999px; font-size: .9em;
  color: var(--hcarta-muted); text-decoration: none; background: var(--hcarta-bg-soft);
}
.hcarta-nav a.is-active { background: var(--hcarta-accent); color: #fff; }

/* Secciones */
.hcarta-section { margin: 0 0 2.2em; scroll-margin-top: calc(var(--hcarta-sticky-top) + 64px); }
.hcarta-section .hcarta-section { margin: 1.4em 0 0; }
.hcarta-section-head { display: flex; align-items: flex-end; gap: 12px; border-bottom: 2px solid var(--hcarta-accent); padding-bottom: .35em; margin-bottom: .2em; }
.hcarta-section-title { flex: 1; margin: 0; color: var(--hcarta-accent); font-size: 1.6em; line-height: 1.15; }
.hcarta-level-3 > .hcarta-section-head { border-bottom-width: 1px; border-bottom-color: var(--hcarta-line); }
.hcarta-level-3 > .hcarta-section-head .hcarta-section-title { font-size: 1.2em; }
.hcarta-cols { display: flex; font-size: .8em; text-transform: uppercase; letter-spacing: .06em; color: var(--hcarta-muted); }
.hcarta-cols span { width: var(--hcarta-col); text-align: right; }

/* Platos */
.hcarta-item { display: flex; gap: 12px; align-items: baseline; padding: .75em 0; border-bottom: 1px solid var(--hcarta-line); }
.hcarta-item:last-child { border-bottom: 0; }
.hcarta-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2em; }
.hcarta-item-name { font-size: 1.08em; font-weight: 500; }
.hcarta-item-desc { color: var(--hcarta-muted); font-size: .92em; }
.hcarta-item-celiac { color: var(--hcarta-celiac); font-size: .88em; }
.hcarta-item-allergens { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .15em; }
.hcarta-item-allergens img { width: 22px; height: 22px; display: block; }

/* Precios: dos columnas alineadas (media / plato). */
.hcarta-item-prices { display: flex; flex: 0 0 auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hcarta-price { width: var(--hcarta-col); text-align: right; font-weight: 500; }
.hcarta-price-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Si la sección no tiene dos precios, se usa una sola columna. */
.hcarta-items:not(.hcarta-items--two) .hcarta-price--empty { display: none; }

/* Texto explicativo y leyenda */
.hcarta-note, .hcarta-legend { margin-top: 1em; border: 1px solid var(--hcarta-line); border-radius: 10px; padding: .2em 1em; }
.hcarta-note summary, .hcarta-legend summary { cursor: pointer; padding: .6em 0; color: var(--hcarta-accent); font-weight: 600; }
.hcarta-note div { color: var(--hcarta-muted); font-size: .95em; padding-bottom: .4em; }
.hcarta-legend { margin-top: 2em; }
.hcarta-legend ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6em 1em; padding: .4em 0 1em; }
.hcarta-legend li { display: flex; align-items: center; gap: .5em; font-size: .92em; }
.hcarta-footer { color: var(--hcarta-muted); font-size: .9em; border-top: 1px solid var(--hcarta-line); padding-top: 1em; margin-top: 1.5em; }

/* Móvil: las etiquetas de precio van junto al importe y los precios se apilan a la derecha. */
@media (max-width: 560px) {
  .hcarta-section-title { font-size: 1.35em; }
  .hcarta-cols { display: none; }
  .hcarta-item { align-items: flex-start; }
  .hcarta-item-prices { flex-direction: column; align-items: flex-end; gap: .15em; }
  .hcarta-price { width: auto; }
  .hcarta-price--empty { display: none; }
  .hcarta-items--two .hcarta-price-label {
    position: static; width: auto; height: auto; overflow: visible; clip: auto;
    font-size: .78em; font-weight: 400; color: var(--hcarta-muted); margin-right: .3em;
  }
}

@media print {
  .hcarta-tabs, .hcarta-nav { display: none; }
  .hcarta-menu[hidden] { display: block !important; }
  .hcarta-note, .hcarta-legend { border: 0; }
}

/* Botón flotante de idioma. --hcarta-lang-bottom permite subirlo si choca con otro botón (WhatsApp, cookies…). */
.hcarta-lang {
  --hcarta-accent: #044a30;
  position: fixed; z-index: 9990;
  bottom: calc(var(--hcarta-lang-bottom, 16px) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  font-size: 15px; line-height: 1.2;
}
.hcarta-lang--right { right: calc(16px + env(safe-area-inset-right)); }
.hcarta-lang--left { left: calc(16px + env(safe-area-inset-left)); align-items: flex-start; }
.hcarta-lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--hcarta-accent); color: #fff; font: inherit; font-weight: 600; letter-spacing: .04em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2); cursor: pointer;
}
.hcarta-lang-btn:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.hcarta-lang.is-loading .hcarta-lang-btn { opacity: .7; cursor: progress; }
.hcarta-lang-menu {
  list-style: none; margin: 0; padding: 6px; min-width: 170px;
  background: #fff; color: #1d1d1b; border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.hcarta-lang-menu[hidden] { display: none; }
.hcarta-lang-menu a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px;
  color: inherit; text-decoration: none;
}
.hcarta-lang-menu a:hover, .hcarta-lang-menu a:focus-visible { background: rgba(0, 0, 0, .05); outline: none; }
.hcarta-lang-menu a[aria-current] { font-weight: 600; color: var(--hcarta-accent); }
.hcarta-lang-code { display: inline-grid; place-items: center; width: 30px; height: 22px; border-radius: 6px; background: rgba(0, 0, 0, .06); font-size: 12px; font-weight: 600; }
.hcarta-lang-menu a[aria-current] .hcarta-lang-code { background: var(--hcarta-accent); color: #fff; }
@media print { .hcarta-lang { display: none; } }

/* Deja sitio al botón flotante al final de la carta. */
.hcarta-has-lang .hcarta { padding-bottom: 72px; }

/* Algunos temas subrayan todos los enlaces: los botones de la carta nunca. */
.hcarta .hcarta-menus a, .hcarta .hcarta-nav a, .hcarta .hcarta-menus a:hover, .hcarta .hcarta-nav a:hover,
.hcarta-lang .hcarta-lang-menu a { text-decoration: none !important; box-shadow: none; }