/* Story 5.17 (puntos 2 y 3): "Tu guía" y "Ayuda" en la barra superior del celular (components/header_help_buttons.html.twig,
   public/tml/header-help.js). Solo se ven donde aparece la hamburguesa de cada encabezado: el Panel < 992px (.tml-hh--panel,
   Bootstrap d-lg-none) y el sitio público <= 960px (.tml-hh--public, tml.css). Por encima de ese ancho no cambia nada: los
   flotantes siguen donde estaban. Los flotantes se esconden solo si el botón de la barra existe (body:has), y los paneles
   se abren colgando de la barra, no desde abajo. */
.tml-hh { display: none; align-items: center; gap: 6px; }
.tml-hh [hidden] { display: none !important; }
.tml-hh .tml-hh-btn {
  display: inline-flex; align-items: center; gap: 5px; width: auto; min-height: 44px; margin: 0; padding: 5px 9px;
  border-radius: 999px; border: 1px solid transparent; background: transparent; box-shadow: none; text-transform: none;
  font: 600 12px/1.2 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; white-space: nowrap; cursor: pointer;
}
/* "Tu guía": contorno blanco semitransparente y texto blanco (va sobre el azul marino) */
.tml-hh .tml-hh-guide { border-color: rgba(255, 255, 255, .55); color: #FFFFFF; }
/* "Ayuda": los colores del tag de siempre (verde claro, texto y borde #047857) */
.tml-hh .tml-hh-help { background: #D1FAE5; border-color: #047857; color: #047857; }
.tml-hh .tml-hh-btn:focus-visible { outline: 3px solid #10B981; outline-offset: 2px; }
.tml-hh-ico { position: relative; display: inline-flex; flex: none; }
.tml-hh-dot { position: absolute; top: -4px; right: -5px; width: 9px; height: 9px; border-radius: 50%; background: #DC2626; border: 2px solid #172554; box-sizing: content-box; }
/* El menú de la barra del panel se queda a la derecha de las píldoras */
.tml-nav .tml-nav-panel { display: none; }
/* #1023: "Acciones pendientes" de la barra del Panel, con area tactil de 44px */
.navbar .nav-link.tml-nav-pending { display: inline-flex; align-items: center; min-height: 44px; }
.tml-hh--panel ~ .navbar-toggler { margin-left: 6px !important; }

/* ---------- Panel / Red Social / Carrusel: barra azul marino de 63px, hamburguesa < 992px ---------- */
@media (max-width: 991.98px) {
  .tml-hh--panel { display: flex; margin-left: auto; }
  body:has(.tml-hh--panel .tml-hh-help) .tml-bot-bubble,
  body:has(.tml-hh--panel .tml-hh-help) .tml-bot-welcome { display: none !important; }
  body:has(.tml-hh--panel .tml-hh-guide) .tml-gb .tml-gb-fab { display: none !important; }
  /* Los paneles cuelgan de la barra (63px) y nunca pasan de la pantalla */
  /* 09/11: solo con "Ayuda" en la barra; en el Panel va flotante (help: false) y se abre desde abajo */
  body:has(.tml-hh--panel .tml-hh-help) .tml-bot-panel {
    position: fixed; top: 71px; right: 8px; bottom: auto; left: auto; width: min(380px, calc(100vw - 16px)); max-width: none;
    max-height: calc(100vh - 83px); max-height: calc(100dvh - 83px);
  }
  body:has(.tml-hh--panel .tml-hh-help) .tml-bot-menu { position: fixed; top: 71px; right: 8px; bottom: auto; width: min(340px, calc(100vw - 16px)); max-width: none; }
  body:has(.tml-hh--panel .tml-hh-guide) .tml-gb-panel {
    top: 71px; bottom: auto; right: 8px; left: auto; width: min(360px, calc(100vw - 16px)); max-width: none;
    max-height: calc(100vh - 83px); max-height: calc(100dvh - 83px); border-radius: 16px; padding-bottom: 16px;
  }
  /* Durante un recorrido (tml-guide.js) los botones de la barra no se usan */
  html.tml-guide-on .tml-hh--panel { visibility: hidden; }
}
@media (max-width: 640px) {
  body:has(.tml-hh--panel .tml-hh-help) .tml-bot-panel, body:has(.tml-hh--panel .tml-hh-guide) .tml-gb-panel { left: 8px; width: auto; }
}
/* 10/11 (Nelson, regla 6 de Luis): en las pantallas del recorrido "Tu guía" y "Ayuda" van en la barra también en la
   computadora (.tml-hh--desk, dashboard.html.twig); los flotantes se esconden y no tapan el panel "Tu recorrido" */
@media (min-width: 992px) {
  .tml-hh--panel.tml-hh--desk { display: flex; gap: 8px; margin-left: 12px; align-self: center; }
  .tml-hh--desk .tml-hh-btn { min-height: 44px; padding: 0 14px; font-size: 14px; gap: 6px; }
  body:has(.tml-hh--desk .tml-hh-help) .tml-bot-bubble,
  body:has(.tml-hh--desk .tml-hh-help) .tml-bot-welcome { display: none !important; }
  body:has(.tml-hh--desk .tml-hh-guide) .tml-gb .tml-gb-fab { display: none !important; }
  body:has(.tml-hh--desk .tml-hh-help) .tml-bot-panel {
    position: fixed; top: 71px; right: 16px; bottom: auto; left: auto; width: 380px; max-width: none;
    max-height: calc(100vh - 83px); max-height: calc(100dvh - 83px);
  }
  body:has(.tml-hh--desk .tml-hh-help) .tml-bot-menu { position: fixed; top: 71px; right: 16px; bottom: auto; width: 340px; max-width: none; }
  body:has(.tml-hh--desk .tml-hh-guide) .tml-gb-panel {
    top: 71px; bottom: auto; right: 16px; left: auto; width: 360px; max-width: none;
    max-height: calc(100vh - 83px); max-height: calc(100dvh - 83px); border-radius: 16px; padding-bottom: 16px;
  }
  html.tml-guide-on .tml-hh--desk { visibility: hidden; }
}

/* ---------- Red Social (SPA): barra azul marino de 56px (#social-main-topbar); la app pasa a modo celular bajo 1024px ----------
   header-help.js mete el grupo en su .right; hasta entonces no se ve y los flotantes siguen donde estaban. */
@media (max-width: 1023.98px) {
  #social-main-topbar .tml-hh--social { display: flex; flex: none; gap: 4px; margin-right: 2px; }
  #social-main-topbar .tml-hh--social .tml-hh-btn { padding: 4px 7px; min-height: 44px; font-size: 12px; gap: 4px; }
  /* A 360px el logo, las 2 pildoras, la lupa, el avatar y la bandera caben: se compactan el espacio de la lupa y de la bandera */
  body:has(#social-main-topbar .tml-hh--social) #social-main-topbar .right > * { margin-left: 0; margin-right: 0; }
  body:has(#social-main-topbar .tml-hh--social) #social-main-topbar .right > a.searchbar-enable { width: 40px; min-width: 0; padding: 0; justify-content: center; }
  body:has(#social-main-topbar .tml-hh--social) #social-main-topbar .right .social-language-select { padding: 0; }
  body:has(#social-main-topbar .tml-hh--social) #social-main-topbar .right .social-language-select > a { padding: 0 8px !important; min-width: 0 !important; width: auto !important; }
  body:has(#social-main-topbar .tml-hh--social) #social-main-topbar .left > a.external { padding-left: 8px !important; padding-right: 8px !important; }
  body:has(#social-main-topbar .tml-hh--social .tml-hh-help) .tml-bot-bubble,
  body:has(#social-main-topbar .tml-hh--social .tml-hh-help) .tml-bot-welcome { display: none !important; }
  body:has(#social-main-topbar .tml-hh--social .tml-hh-guide) .tml-gb .tml-gb-fab { display: none !important; }
  body:has(#social-main-topbar .tml-hh--social) .tml-bot-panel {
    position: fixed; top: 64px; right: 8px; bottom: auto; left: auto; width: min(380px, calc(100vw - 16px)); max-width: none;
    max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px);
  }
  body:has(#social-main-topbar .tml-hh--social) .tml-bot-menu { position: fixed; top: 64px; right: 8px; bottom: auto; width: min(340px, calc(100vw - 16px)); max-width: none; }
  body:has(#social-main-topbar .tml-hh--social .tml-hh-guide) .tml-gb-panel {
    top: 64px; bottom: auto; right: 8px; left: auto; width: min(360px, calc(100vw - 16px)); max-width: none;
    max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); border-radius: 16px; padding-bottom: 16px;
  }
  html.tml-guide-on .tml-hh--social { visibility: hidden; }
}
@media (max-width: 640px) {
  body:has(#social-main-topbar .tml-hh--social) .tml-bot-panel, body:has(#social-main-topbar .tml-hh--social .tml-hh-guide) .tml-gb-panel { left: 8px; width: auto; }
}

/* ---------- Sitio público: encabezado blanco de 64px, hamburguesa <= 960px ---------- */
/* 5.17 (10/11): "Tu guía" del menú (tml/_header.html.twig), solo en el celular; en la computadora sigue el flotante */
.tml-nav a.tml-nav-guide { display: none; }
.tml-header .tml-nav a.tml-nav-guide[hidden] { display: none !important; }
@media (max-width: 960px) {
  .tml-hh--public { display: flex; }
  /* Con "Tu guía" en el menú, el flotante no se muestra y su panel cuelga del encabezado, como el de "Ayuda" */
  body:has(.tml-nav-guide:not([hidden])) .tml-gb .tml-gb-fab { display: none !important; }
  body:has(.tml-nav-guide:not([hidden])) .tml-gb-panel {
    top: 72px; bottom: auto; right: 8px; left: auto; width: min(360px, calc(100vw - 16px)); max-width: none;
    max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); border-radius: 16px; padding-bottom: 16px;
  }
  /* El botón del menú, resaltado para que se lea junto a "Ayuda" */
  .tml-header .tml-menu-btn { background: #E0E9FF; border-radius: 8px; border-color: #C7D6FB; }
  body:has(.tml-hh--public .tml-hh-help) .tml-bot-bubble { display: none !important; }
  /* El mensaje de bienvenida señalaba la esfera: ahora cuelga del encabezado, apuntando a "Ayuda" */
  body:has(.tml-hh--public .tml-hh-help) .tml-bot-welcome { position: fixed; top: 74px; right: 12px; bottom: auto; }
  body:has(.tml-hh--public .tml-hh-help) .tml-bot-welcome::after { top: -9px; bottom: auto; right: 60px; transform: rotate(225deg); }
  body:has(.tml-hh--public) .tml-bot-panel {
    position: fixed; top: 72px; right: 8px; bottom: auto; left: auto; width: min(380px, calc(100vw - 16px)); max-width: none;
    max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px);
  }
  body:has(.tml-hh--public) .tml-bot-menu { position: fixed; top: 72px; right: 8px; bottom: auto; width: min(340px, calc(100vw - 16px)); max-width: none; }
  /* Con el menú abierto "Ayuda" no se usa (los flotantes ya se esconden en tml.css) */
  html.tml-menu-open .tml-hh--public .tml-hh-help { display: none; }
  html.tml-guide-on .tml-hh--public { visibility: hidden; }
  /* "Panel" del encabezado se sube al menú (como "Únete gratis") cuando no cabe */
  .tml-header.tml-open .tml-nav a.tml-nav-panel { display: none; }
  /* #985: header-fit.js pone tml-header--compact solo cuando "Panel" no cabe en la barra */
  .tml-header.tml-header--compact .tml-panel-link { display: none; }
  .tml-header.tml-header--compact.tml-open .tml-nav a.tml-nav-panel { display: flex; }
}
@media (max-width: 640px) {
  body:has(.tml-hh--public) .tml-bot-panel { left: 8px; width: auto; }
  body:has(.tml-nav-guide:not([hidden])) .tml-gb-panel { left: 8px; width: auto; }
}
/* #985: respaldo sin JavaScript; el ajuste real lo hace header-fit.js */
@media (max-width: 400px) {
  .tml-header .tml-panel-link { display: none; }
  .tml-header.tml-open .tml-nav a.tml-nav-panel { display: flex; }
}