/**
 * desmenu — hoja del tema farmaciacien (SUSTITUYE a modules/desmenu/views/css/front.css).
 *
 * TPL       themes/farmaciacien/modules/desmenu/views/templates/front/menu.tpl
 * JS        _dev/js/components/fc-header.js
 * BLOQUES   des-nav (__list __item __entry __link __toggle), des-mega (__body
 *           __cols __col __h __i __foot __foot-in __all __brands __brand-name),
 *           des-drawer (--open, __top __close __acc __acc-icon __acc-txt
 *           __acc-btn __list __entry __row __row--sale __toggle __subs __all
 *           __foot __help)
 * ACOPLADO  la carga desmenu ≥ 1.8.1 con registerStylesheet ('desmenu-front',
 *           prioridad 150): va después de theme.css. megamenu.css del módulo
 *           se sustituye por una copia vacía (todo el menú está aquí).
 *           des-button, des-ico, des-iconbtn, des-wa y los tokens --color-* son
 *           del tema (theme.css).
 *
 * Maqueta: private/diseño/assets/css/fc.css, apartados 5 («Cabecera y menú»,
 * «Menú móvil») y 11. Cortes: 1180, 1024 (menú) y 767.
 */

/* --- Banda de categorías (escritorio) -------------------------------- */
/* El panel se coloca contra .des-nav, que ocupa el ancho de la ventana: así
   va a sangre. La banda de troncales sigue dentro de .des-container. */
.des-nav { position: relative; }

.des-nav__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
}

.des-nav__item { position: static; }

/* La pastilla: enlace sola (sin hijas) o enlace + botón de la flecha. */
.des-nav__link,
.des-nav__entry {
  display: flex;
  align-items: center;
  height: 44px;
  border-radius: 22px;
  color: var(--color-text);
}

.des-nav__link {
  gap: 6px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

/* Con flecha aparte, la pastilla mide lo mismo que la de la maqueta:
   18 + nombre + 6 + flecha + 18. */
.des-nav__entry .des-nav__link {
  height: 100%;
  padding: 0 0 0 18px;
  border-radius: 22px 0 0 22px;
  color: inherit;
}

.des-nav__toggle {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 18px 0 6px;
  border: 0;
  border-radius: 0 22px 22px 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.des-nav__toggle .des-ico { transition: transform 0.2s ease; }

.des-nav__toggle[aria-expanded="true"] .des-ico { transform: rotate(180deg); }

.des-nav__link:hover,
.des-nav__link[aria-current="page"],
.des-nav__entry:hover,
.des-nav__entry:focus-within,
.des-nav__entry:has(.des-nav__link[aria-current="page"]),
.des-nav__entry:has(.des-nav__toggle[aria-expanded="true"]) {
  background: var(--color-surface-accent);
  color: var(--color-accent);
}

.des-nav__entry .des-nav__link:hover { background: none; }

/* --- Megamenú (a sangre) ---------------------------------------------- */
.des-mega {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 2;
  background: var(--color-bg);
  box-shadow: 0 24px 60px rgb(23 33 43 / 22%);
}

.des-mega[hidden] { display: none; }

/* El panel cuelga de la banda, que ya va en .des-container, y el tema quita
   el relleno a un contenedor anidado (.des-container .des-container). Aquí sí
   hace falta: el contenido del panel se alinea con el de la banda y los
   enlaces, con su margen de -10px para el fondo del hover, no se salen. */
.des-mega .des-container { padding-inline: var(--container-pad); }

.des-mega__body { padding-block: 30px 0; }

.des-mega__cols {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px;
}

.des-mega__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.des-mega__h {
  display: block;
  margin-bottom: 8px;
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.des-mega__i {
  display: block;
  margin: 0 -10px;
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
}

.des-mega__i:hover {
  background: var(--color-surface);
  color: var(--color-accent);
}

.des-mega__foot {
  margin-top: 28px;
  background: var(--color-surface);
}

.des-mega__foot-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
}

.des-mega__all.des-button {
  min-height: 44px;
  font-size: 14px;
}

.des-mega__brands {
  display: flex;
  align-items: center;
  gap: 10px;
}

.des-mega__brands > span {
  margin-right: 6px;
  color: var(--color-text-soft);
  font-size: 13px;
  font-weight: 700;
}

.des-mega__brands a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 48px;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-border) inset;
  text-decoration: none;
}

.des-mega__brands img {
  max-height: 34px;
  object-fit: contain;
}

/* Marca sin logo: su nombre en el hueco del logo. */
.des-mega__brand-name {
  overflow: hidden;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Cajón móvil -------------------------------------------------------- */
.des-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(340px, 88vw);
  overflow-y: auto;
  visibility: hidden;
  padding: 12px 16px 24px;
  border-radius: 0 28px 28px 0;
  background: var(--color-bg);
  box-shadow: 12px 0 40px rgb(23 33 43 / 25%);
  transform: translateX(-105%);
  transition: transform 0.25s ease, visibility 0s 0.25s;
}

.des-drawer.des-drawer--open {
  visibility: visible;
  transform: none;
  transition: transform 0.25s ease;
}

.des-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}

.des-drawer__top img {
  width: auto;
  height: 30px;
}

.des-drawer .des-drawer__close {
  width: 44px;
  height: 44px;
}

.des-drawer__acc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: var(--color-surface-hero);
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.35;
}

.des-drawer__acc b {
  color: var(--color-text);
  font-size: 15px;
}

.des-drawer .des-drawer__acc-icon {
  width: 44px;
  height: 44px;
  background: var(--color-bg);
  color: var(--color-accent);
}

.des-drawer__acc-txt { flex: 1; }

.des-drawer__acc-btn.des-button {
  min-height: 40px;
  padding: 0 14px;
  font-size: 13px;
}

.des-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 4px 0 8px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}

.des-drawer__row:hover { color: var(--color-text); }

/* Troncal con hijas: el nombre lleva a la categoría y la flecha (botón
   aparte) despliega. Juntos ocupan la fila de la maqueta. */
.des-drawer__entry {
  display: flex;
  align-items: stretch;
  border-radius: 14px;
  color: var(--color-text);
}

.des-drawer__entry .des-drawer__row {
  flex: 1;
  min-width: 0;
  color: inherit;
}

.des-drawer__toggle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 52px;
  padding: 0 4px 0 0;
  border: 0;
  border-radius: 0 14px 14px 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.des-drawer__toggle .des-ico { margin-left: auto; transition: transform 0.2s ease; }

.des-drawer__entry:has(.des-drawer__toggle[aria-expanded="true"]) {
  background: var(--color-surface-accent);
  color: var(--color-accent);
}

.des-drawer__toggle[aria-expanded="true"] .des-ico { transform: rotate(180deg); }

.des-drawer__row.des-drawer__row--sale { color: #b4233f; }

.des-drawer__subs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 0 12px;
}

.des-drawer__subs[hidden] { display: none; }

.des-drawer__subs a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.des-drawer__subs a.des-drawer__all {
  background: var(--color-bg);
  box-shadow: 0 0 0 1.5px var(--color-accent) inset;
  color: var(--color-accent);
}

.des-drawer__foot { margin-top: auto; }

.des-drawer__help {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
}

.des-drawer__help:hover { color: var(--color-accent-text); }

.des-drawer__help b { font-size: 15px; }

.des-drawer__help .des-wa { background: rgb(255 255 255 / 16%); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
  .des-nav__link {
    padding: 0 12px;
    font-size: 14px;
  }

  .des-nav__entry .des-nav__link { padding: 0 0 0 12px; }

  .des-nav__toggle { padding: 0 12px 0 6px; }

  .des-mega__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .des-mega__brands { display: none; }
}

/* Tablet y móvil: la banda pasa a una fila de pastillas con scroll y el
   megamenú no se pinta (el cajón lo sustituye). */
@media (max-width: 1024px) {
  /* Aire del carril: 24px arriba (12 del buscador + 12 de aquí) y 24 abajo
     (20 + los 4 del carril, que dejan sitio al anillo de foco), para que la
     sombra de la cabecera no se monte sobre las pastillas. */
  .des-nav { padding-block: 12px 20px; }

  .des-nav > .des-container { padding: 0; }

  .des-nav__list {
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    /* El carril va a sangre (se desliza hasta el borde) pero empieza con el
       margen lateral del contenedor, alineado con la cabecera y el hero. */
    padding: 0 var(--container-pad) 4px;
    scrollbar-width: none;
  }

  .des-nav__list::-webkit-scrollbar { display: none; }

  /* El :hover de escritorio (verde suave) sigue valiendo aquí: en la
     maqueta también gana por especificidad. */
  .des-nav__link {
    height: 44px;
    padding: 0 18px;
    border-radius: 22px;
    background: var(--color-field);
    font-weight: 600;
    white-space: nowrap;
  }

  .des-nav__link .des-ico,
  .des-nav__toggle { display: none; }

  /* Sin flecha, el nombre recupera el relleno de la pastilla entera. */
  .des-nav__entry {
    height: 44px;
    background: none;
  }

  .des-nav__entry .des-nav__link {
    padding: 0 18px;
    border-radius: 22px;
  }

  .des-nav__entry .des-nav__link:hover {
    background: var(--color-surface-accent);
    color: var(--color-accent);
  }

  .des-nav__link[aria-current="page"],
  .des-nav__entry .des-nav__link[aria-current="page"] {
    background: var(--color-accent);
    color: var(--color-accent-text);
  }

  .des-mega { display: none; }
}

@media (max-width: 767px) {
  .des-nav__list { padding-inline: var(--container-pad-mob); }
}

@media (prefers-reduced-motion: reduce) {
  .des-drawer,
  .des-nav__toggle .des-ico,
  .des-drawer__toggle .des-ico { transition: none; }
}