/* ==========================================================
Menu Carta – CSS BASE (STRUCTURAL ONLY) + PRICE ICONS
No estilos de marca. Las skins definen color/bordes/typography.
✅ FIXED: Tamaños y alineación de iconos de cadenas de precio
========================================================== */

/* Contenedor general */
.menu-render{
  --menu-gap: 20px;
  /* --radius and --media-radius are defined by skins to control corner style */
  box-sizing: border-box;
}

/* =========================================
  SECCIONES / ACORDEÓN
========================================= */
.menu-render .menu-section{
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.menu-render .menu-section__title{
  display: block;
  margin: 0;
  padding: 0;
  line-height: inherit;
  cursor: pointer;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.menu-render .menu-section-intro{
  box-sizing: border-box;
  margin: .75rem 1rem 1rem 1rem;
  padding: 0px;
}

.menu-render .menu-section__items{
  display: grid !important;
  gap: var(--menu-gap);
  grid-template-columns: 1fr !important;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =========================================
  SUBSECCIONES (TÍTULOS DENTRO DEL PADRE)
  - Estructural: sin colores de marca
========================================= */
.menu-render .menu-subsection__title{
  display: block;
  margin: 1rem 0 0.5rem;
  padding: 0;
  font-size: 1.15em; /* más protagonismo que el plato (h4) */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .2px;
  position: relative;
}

/* Separador sutil sobre el título de subsección (sin color de marca) */
.menu-render .menu-subsection__title::before{
  content: "";
  display: block;
  height: 1px;
  background: currentColor; /* usa el color de texto actual */
  opacity: .15; /* sutil */
  margin: .75rem 0 .5rem;
}

.menu-render .menu-subsection-intro{
  margin: 0 0 .75rem;
  padding: 0;
}

/* Indentación opcional por nivel de subnivel */
.menu-render .menu-subsection__title[data-sublevel="1"],
.menu-render .menu-subsection-intro[data-sublevel="1"]{ margin-left: 20px; }
.menu-render .menu-subsection__title[data-sublevel="2"],
.menu-render .menu-subsection-intro[data-sublevel="2"]{ margin-left: 40px; }
.menu-render .menu-subsection__title[data-sublevel="3"],
.menu-render .menu-subsection-intro[data-sublevel="3"]{ margin-left: 60px; }

@media (min-width: 900px){
  .menu-render.menu-cols-1 .menu-section__items{ grid-template-columns: 1fr !important; }
  .menu-render.menu-cols-2 .menu-section__items{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .menu-render.menu-cols-3 .menu-section__items{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .menu-render.menu-cols-4 .menu-section__items{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}

@media (max-width: 899.98px){
  .menu-render .menu-section__items{ grid-template-columns: 1fr !important; }
}

.menu-render .menu-section:not(.open) > .menu-section__items{ display: none !important; }
.menu-render .menu-section.open > .menu-section__items{ display: grid !important; }
.menu-render .menu-section:not(.open) > .menu-section-intro{ display: none !important; }
.menu-render .menu-section.open > .menu-section-intro{ display: block !important; }
.menu-render .menu-section.is-empty{ display: none !important; }

/* =========================================
  TARJETA DE PLATO
========================================= */
.menu-render .menu-item{
  display: grid;
  box-sizing: border-box;
  gap: 8px;
  margin: 0;
  padding: 0;
  align-self: start;
}
.menu-render .menu-item.is-hidden{ display: none !important; }

.menu-render .menu-item__header{
  display: block;
}

.menu-render .menu-item__title{
  margin: 0;
  font-weight: inherit;
}

.menu-render .menu-item__subtitle{
  margin: 0;
}

/* Precio - SIN justify-self por defecto */
.menu-render .menu-item__price{
  white-space: normal;
  margin: .35rem 0 0;
  padding: 0;
}

@media (max-width: 480px){
  .menu-render .menu-item__price{
    width: 100%;
  }
}

.menu-render .menu-item__desc{
  margin: 0;
}

/* =========================================
  ALINEACIÓN DE PRECIOS - MÁXIMA ESPECIFICIDAD
========================================= */
/* Por estilo inline */
.menu-render .menu-item .menu-item__price[style*="text-align: left"],
.menu-render .menu-item .menu-item__price[style*="text-align: start"] {
  justify-self: start !important;
  text-align: left !important;
}

.menu-render .menu-item .menu-item__price[style*="text-align: center"] {
  justify-self: center !important;
  text-align: center !important;
}

.menu-render .menu-item .menu-item__price[style*="text-align: right"],
.menu-render .menu-item .menu-item__price[style*="text-align: end"] {
  justify-self: end !important;
  text-align: right !important;
}

/* Por clases */
.menu-render .menu-item__price.text-left {
  justify-self: start !important;
  text-align: left !important;
}

.menu-render .menu-item__price.text-center {
  justify-self: center !important;
  text-align: center !important;
}

.menu-render .menu-item__price.text-right {
  justify-self: end !important;
  text-align: right !important;
}

/* =========================================
  VARIANTES DE PRECIO
========================================= */
.menu-render .mc-price-variants.inline{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .5rem;
}
.menu-render .mc-price-variants.inline .mc-price-variant:not(:last-child)::after{
  content: "·";
  margin: 0 .25rem;
}

.menu-render .mc-price-variants.stack{
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  text-align: inherit;
}

.menu-render .mc-price-variants.stack .mc-price-variant{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0rem;
}

/* Alineación de variantes */
.menu-render .menu-item__price[style*="text-align: left"] .mc-price-variants.stack .mc-price-variant,
.menu-render .menu-item__price.text-left .mc-price-variants.stack .mc-price-variant {
  justify-content: flex-start !important;
}

.menu-render .menu-item__price[style*="text-align: center"] .mc-price-variants.stack .mc-price-variant,
.menu-render .menu-item__price.text-center .mc-price-variants.stack .mc-price-variant {
  justify-content: center !important;
}

.menu-render .menu-item__price[style*="text-align: right"] .mc-price-variants.stack .mc-price-variant,
.menu-render .menu-item__price.text-right .mc-price-variants.stack .mc-price-variant {
  justify-content: flex-end !important;
}

.menu-render .mc-price-variant{
  display: inline-flex;
  white-space: nowrap;
}

/* =========================================
  ICONOS DE CADENAS DE PRECIO - FIXED
========================================= */
.menu-render .mc-price-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0;
  margin: 0;
  flex-shrink: 0;
  width: var(--mc-price-icon-size, 18px);
  height: var(--mc-price-icon-size, 18px);
  overflow: hidden; /* avoid overlaying layout and clicks */
}

/* SVG dentro de iconos de precio - forzar dimensiones */
.menu-render .mc-price-icon svg {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  display: block !important;
  fill: currentColor;
  pointer-events: none;
}

/* Imágenes dentro de iconos de precio */
.menu-render .mc-price-icon img,
.menu-render .mc-price-icon .mc-price-icon-img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  display: block !important;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

/* Cuando el icono está junto al texto en variantes */
.menu-render .mc-price-variant .mc-price-icon {
  margin-right: 2px;
}

/* Añadido para alinear verticalmente la variante */
.menu-render .mc-price-variant {
  display: inline-flex;
  align-items: center;
}

/* Variante inline con iconos */
.menu-render .mc-price-variants.inline .mc-price-icon {
  margin: 0 1px;
}

/* Ajuste inline icon seguido de texto */
.menu-render .mc-price-variant .mc-price-icon + * {
  margin-left: 0 !important;
}

/* Cuando se muestra solo el icono (sin texto) - ligeramente más grande */
.menu-render .mc-price-icon[data-icon-only="true"] {
  width: var(--mc-price-icon-only-size, 20px);
  height: var(--mc-price-icon-only-size, 20px);
}

.menu-render .mc-price-icon[data-icon-only="true"] svg {
  width: 100% !important;
  height: 100% !important;
  fill: currentColor;
}

.menu-render .mc-price-icon[data-icon-only="true"] img {
  width: 100% !important;
  height: 100% !important;
}

.menu-render.menu-hide-subsections .menu-subsection__title,
.menu-render.menu-hide-subsections .menu-subsection-intro{
  display: none !important;
}

.menu-render.menu-hide-prices .menu-item__price{
  display: none !important;
}

.menu-render.menu-hide-price-icons .mc-price-icon,
.menu-render.menu-price-content-text-only .mc-price-icon{
  display: none !important;
}

/* Ocultar alérgenos a petición del visitante (botón toggle) */
.menu-render.menu-hide-allergens .menu-allergens{
  display: none !important;
}

.menu-allergens-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .85em;
  cursor: pointer;
  opacity: .8;
}

.menu-allergens-toggle:hover,
.menu-allergens-toggle:focus-visible{
  opacity: 1;
}

.menu-allergens-toggle:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Tamaño consistente de los iconos de alérgeno empaquetados */
.menu-allergen svg{
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}

.chip__icon svg{
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

/* =========================================
  MEDIA
========================================= */
.menu-render .menu-media{
  margin: 0;
  border-radius: var(--media-radius);
  overflow: hidden;
  box-sizing: border-box;
}
.menu-render .menu-media__img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 0;
}
.menu-render .menu-media__embed iframe,
.menu-render .menu-media__video{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  display: block;
  border-radius: 0;
}
@media (min-width: 900px){
  .menu-render .menu-media__img{ aspect-ratio: 4 / 3; object-fit: cover; }
}

/* =========================================
  FLAGS & ALÉRGENOS
========================================= */
.menu-render .menu-flags,
.menu-render .menu-allergens{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.menu-render .menu-item__header .menu-flags{
  margin-bottom: .35rem;
}
.menu-render .menu-flag,
.menu-render .menu-allergen{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.menu-render .menu-flag svg,
.menu-render .menu-flag img,
.menu-render .menu-allergen svg,
.menu-render .menu-allergen img{
  width: 18px;
  height: 18px;
  display: block;
}
.menu-render .menu-icon-text{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  min-height: 18px;
  line-height: 1;
  font-size: 1em;
}

/* =========================================
  FILTROS DE ALÉRGENOS
========================================= */
.menu-render .menu-filters{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.menu-render .menu-filters__summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  list-style: none;
}
.menu-render .menu-filters__summary::-webkit-details-marker{ display: none; }

.menu-render .menu-filter{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
}
.menu-render .menu-filter__title{ margin: 0; }
.menu-render .menu-filter__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.menu-render .menu-filter__clear{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.menu-render .menu-filter__clear:hover,
.menu-render .menu-filter__clear:focus-visible{
  color: inherit;
}
.menu-render .menu-filter__clear:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.menu-render .chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px;
  padding: 0;
  cursor: pointer;
  user-select: none;
}
.menu-render .chip__input{ display: none; }
.menu-render .chip__content{ display: inline-flex; align-items: center; gap: 6px; }
.menu-render .chip__icon{ line-height: 0; }
.menu-render .chip__icon svg,
.menu-render .chip__icon img{ width: 16px; height: 16px; display: block; }

.menu-render .menu-empty{
  margin: 0;
  padding: 0;
}
.menu-render .menu-empty[hidden]{ display: none !important; }

/* =========================================
  MODO LISTA
========================================= */
.menu-render.menu-display-list .menu-section > .menu-section__items{
  display: grid !important;
}

.menu-render.menu-display-list .menu-section > .menu-section-intro{
  display: block !important;
}

.menu-render.menu-display-list .menu-section__title{
  cursor: default;
  pointer-events: none;
}

.menu-render.menu-display-list .menu-section__items{
  gap: 0 !important;
}

.menu-render.menu-display-list .menu-item{
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1rem;
  row-gap: .35rem;
}

.menu-render.menu-display-list .menu-item__header,
.menu-render.menu-display-list .menu-item__subtitle,
.menu-render.menu-display-list .menu-item__desc,
.menu-render.menu-display-list .menu-flags,
.menu-render.menu-display-list .menu-allergens{
  grid-column: 1;
}

.menu-render.menu-display-list .menu-item__price{
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin-top: 0;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 640px){
  .menu-render.menu-display-list .menu-item{
    grid-template-columns: 1fr;
  }

  .menu-render.menu-display-list .menu-item__price{
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }
}

/* =========================================
  FIXES
========================================= */
.menu-render .menu-section__items{
  justify-content: start !important;
  align-content: start !important;
  justify-items: stretch !important;
  align-items: start !important;
}

.menu-render .menu-item__title,
.menu-render .menu-item__subtitle,
.menu-render .menu-item__desc,
.menu-render .menu-section__title{
  margin-block-start: 0;
  margin-block-end: 0;
}

.menu-render .menu-section__title:focus-visible,
.menu-render .menu-item:focus-within{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* =========================================
  SELECTOR MULTICARTA
========================================= */
.menu-carta-selector__tabs{
  display: flex;
  gap: 0;
  margin: 0 0 1.25rem;
  overflow-x: auto;
  border-bottom: 1px solid currentColor;
  scrollbar-width: thin;
}

.menu-carta-selector__tab{
  flex: 0 0 auto;
  margin: 0;
  padding: .7rem 1rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.menu-carta-selector__tab:hover,
.menu-carta-selector__tab.is-active{
  border-bottom-color: currentColor;
}

.menu-carta-selector__tab:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

.menu-carta-selector__tab.is-loading{
  opacity: .65;
  cursor: progress;
}

.menu-carta-selector__panel[hidden],
.menu-carta-selector__status[hidden]{
  display: none !important;
}

.menu-carta-selector__status{
  margin: .75rem 0 0;
}

/* =========================================
  RESPONSIVE - ICONOS DE PRECIO
========================================= */
@media (max-width: 480px){
  /* En móviles, iconos del mismo tamaño que alérgenos */
  .menu-render .mc-price-icon {
    width: var(--mc-price-icon-size-mobile, 16px);
    height: var(--mc-price-icon-size-mobile, 16px);
  }

  .menu-render .mc-price-icon svg,
  .menu-render .mc-price-icon img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
  }

  /* Los iconos "solo icono" mantienen tamaño */
  .menu-render .mc-price-icon[data-icon-only="true"] {
    width: var(--mc-price-icon-only-size-mobile, 18px);
    height: var(--mc-price-icon-only-size-mobile, 18px);
  }

  .menu-render .mc-price-icon[data-icon-only="true"] svg,
  .menu-render .mc-price-icon[data-icon-only="true"] img {
    width: 100% !important;
    height: 100% !important;
  }
}

/* =========================================
  PRINT
========================================= */
@media print{
  .menu-render{ max-width: 100%; padding: 0; }
  .menu-render .menu-section__items{ display: grid !important; }
  .menu-render .menu-media__embed iframe,
  .menu-render .menu-media__video{ display: none !important; }
  .menu-render .mc-price-variants.stack{ margin-top: .15rem; }

  /* Asegurar que los iconos se impriman correctamente */
  .menu-render .mc-price-icon svg,
  .menu-render .mc-price-icon img {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}