/* Reglas comunes a todas las páginas de FamiliaInteligente.es. */

/* Las columnas de la maqueta no deben ensancharse por una tabla larga. */
.article-wrap > *, .main-layout > *, main, aside, article { min-width: 0; }

/* En móvil, las tablas se desplazan dentro de su caja en lugar de ensanchar la página. */
@media (max-width: 768px) {
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* El menú de cabecera de las plantillas sin botón de hamburguesa baja de línea. */
  header .header-inner { flex-wrap: wrap; height: auto; min-height: 58px; row-gap: .4rem; padding-top: .5rem; padding-bottom: .5rem; }
  header .header-inner nav { flex-wrap: wrap; gap: .25rem 1rem; }

  /* Los enlaces del pie también bajan de línea. */
  footer div { flex-wrap: wrap; }

  /* Menú móvil que añade consent.js a las plantillas que no lo traen. */
  header.fi-menu { position: sticky; top: 0; z-index: 100; }
  header.fi-menu .header-inner { flex-wrap: nowrap; }
  header.fi-menu nav { display: none; }
  header.fi-menu #fi-menu-btn { display: flex; }
}

#fi-menu-btn { display: none; flex-direction: column; gap: 5px; margin-left: auto; padding: 10px 6px; background: none; border: 0; cursor: pointer; }
#fi-menu-btn span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #334155; }
#fi-menu { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 70px); overflow-y: auto; background: #fff; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; box-shadow: 0 10px 20px rgba(15, 23, 42, .12); }
#fi-menu[hidden] { display: none; }
#fi-menu a { display: block; padding: 12px 24px; border-bottom: 1px solid #e2e8f0; color: #334155; font-size: 15px; font-weight: 500; text-decoration: none; }

/* Menú propio de las plantillas que traen botón. Algunas calculadoras no tenían estos estilos. */
.menu-toggle { display: none; flex-direction: column; gap: 5px; margin-left: auto; padding: 10px 6px; background: none; border: 0; cursor: pointer; }
.menu-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #334155; }
.mobile-nav { display: none; background: #fff; border-top: 1px solid #e2e8f0; }
.mobile-nav a { display: block; padding: 12px 24px; border-bottom: 1px solid #e2e8f0; color: #334155; font-size: 15px; font-weight: 500; text-decoration: none; }
@media (max-width: 700px) {
  .menu-toggle { display: flex; }
  .mobile-nav.open { display: block; }
}