/* ═══════════════════════════════════════════════════════════════
   TRIAKA WEB — Mobile fixes de las páginas públicas
   (index, features, comunidad, premium, mobile, soporte, nosotros,
    contacto, legales y feature-*.html)

   Cárgalo ÚLTIMO en el <head> para ganarle al <style> inline.

   Qué arregla:
     · La hamburguesa aparecía recién en 640px — entre 641 y 900 el
       header quedaba apretado.
     · Con sesión abierta, el header inyecta avatar + nombre completo
       + "Ir al dashboard": 360px de ancho que rompían la página
       entera en mobile (scroll horizontal en TODAS las públicas).
     · Los CTA de auth se mudan dentro del menú (ver marketing-mobile.js),
       que es donde se esperan en mobile.
   ═══════════════════════════════════════════════════════════════ */

html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
img, svg, video, canvas, iframe { max-width: 100%; }

/* .btn-cta declara el tamaño de su icono; .btn-outline nunca lo hizo, así
   que el SVG caía al default de reemplazo (95x95 medidos) y el botón
   "Ya tengo cuenta" salía con una flecha gigante. Pasa en todos los
   anchos, no solo en mobile. */
.btn-outline svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.3;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  /* ── Hamburguesa desde tablet ── */
  .menu-toggle { display: inline-flex !important; }
  .hdr {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 16px;
  }
  .hdr-nav {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    margin-left: 0;
    z-index: 49;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 14px;
    background: #fff;
    border-bottom: 1px solid rgba(8, 14, 30, .1);
    box-shadow: 0 8px 20px rgba(13, 22, 32, .06);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .hdr-nav.open { display: flex; }
  .hdr-nav > a {
    padding: 14px 4px;
    border-bottom: 1px solid rgba(8, 14, 30, .08);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink, #0a1322);
  }
  .hdr-nav > a:last-of-type { border-bottom: none; }

  /* ── Bloque de auth movido dentro del menú (marketing-mobile.js) ── */
  .hdr-actions.in-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(8, 14, 30, .08);
  }
  .hdr-actions.in-nav .btn-ghost,
  .hdr-actions.in-nav .btn-primary {
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 12px;
  }
  .hdr-actions.in-nav .btn-ghost {
    border: 1px solid rgba(8, 14, 30, .12);
  }
  /* El selector de idioma se alinea a la izquierda como una fila más */
  .hdr-actions.in-nav .lang-switcher { align-self: flex-start; }
  .hdr-actions.in-nav .lang-tag { min-height: 36px; padding: 6px 14px; }

  /* Header logueado: la ficha completa (avatar + nombre + rol + chevron)
     medía 226px. Dentro del menú se despliega entera y cómoda. */
  .hdr-actions.in-nav .user-menu { width: 100%; }
  .hdr-actions.in-nav .user-trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 12px;
  }
  .hdr-actions.in-nav .user-trigger .meta .name { max-width: none; }
  .hdr-actions.in-nav .user-dropdown {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    box-shadow: none;
  }
  .hdr-actions.in-nav .ahdr-link {
    padding: 10px 12px;
    border: 1px solid rgba(8, 14, 30, .1);
    border-radius: 12px;
  }
  .hdr-actions.in-nav .ahdr-link span:not(.ahdr-av) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hdr-actions.in-nav .ahdr-logout {
    justify-content: center;
    min-height: 42px;
  }

  /* Los items de grid traen min-width:auto, así que la columna del hero
     se negaba a bajar del min-content de la card decorativa y el texto
     terminaba cortado en pantallas de 360px. */
  .hero-inner,
  .hero-inner > *,
  .hero-visual { min-width: 0; }

  /* Marca: nunca empuja al resto */
  .brand { min-width: 0; }
  .brand .name {
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* La barra utilitaria superior partía cada badge en dos líneas */
@media (max-width: 640px) {
  .util-bar { font-size: 11px; }
  .util-inner { gap: 8px; padding: 0 14px; }
  .util-bar .util-left {
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .util-bar .util-right { gap: 12px; flex-shrink: 0; white-space: nowrap; }
}

/* Con menos de 560px solo cabe un badge; el segundo se cortaba a la mitad */
@media (max-width: 560px) {
  .util-bar .util-left > :nth-child(n + 2) { display: none; }
}

@media (max-width: 640px) {

  /* iOS hace zoom al enfocar inputs con font-size < 16px */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; }

  /* Links de footer/legales: 15px de alto es imposible de acertar */
  .foot a,
  .foot-bottom a,
  .legal-nav a { padding: 6px 0; display: inline-block; }
}
