/* ============================================================
   mobile-fixes.css — DaiBackup
   Correcciones UX móvil — sin impacto visual en desktop
   Generado: 2026-08-04
   ============================================================ */

/* ── Solo aplica en pantallas <= 768px ── */
@media (max-width: 768px) {

  /* 1. Botón hamburger: 40×40 → 44×44px (mínimo táctil Google/Apple) */
  #hamburgerBtn,
  [id*="hamburger"],
  [class*="hamburger-btn"] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 2. Links "Leer más" (.btn-link) — área táctil ampliada con padding invisible */
  /* El padding extra aumenta el área de toque sin cambiar la apariencia visual */
  .btn-link {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    margin-top: 1px !important;
  }

  /* 3. Todos los links dentro de cards — área mínima táctil */
  .card a,
  [class*="card"] a,
  [class*="service"] a,
  [class*="blog"] a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* 4. Nav links en mobile menu */
  nav a,
  .nav-link,
  .menu-item a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* 5. Texto demasiado pequeño — piso mínimo de 12px */
  /* Solo aplicamos a elementos que usen font-size menor */
  small,
  .text-xs,
  [class*="caption"],
  [class*="label-sm"],
  .tag {
    font-size: max(12px, 0.75em) !important;
    line-height: 1.4 !important;
  }

  /* 6. Evitar texto cortado en tarjetas */
  [class*="card"] p,
  [class*="card"] span {
    word-break: break-word;
  }

}
/* ── Fin mobile-fixes.css ── */