/* ============================================================
   MotoCom · Mobile enhancements (profesional)
   Carga después del CSS principal. No requiere cambios de markup.
   ============================================================ */

/* ----- Base universal ----- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, video, svg, iframe { max-width: 100%; height: auto; }
* { -webkit-tap-highlight-color: rgba(245,158,11,.15); }

/* Safe-area iOS: navbar, footers fijos */
.navbar, .navbar-top, .mc-navbar, header.navbar, nav.navbar {
  padding-top: max(0px, env(safe-area-inset-top)) !important;
}

/* ----- Touch targets >= 44px (WCAG / Apple HIG) ----- */
@media (hover: none) and (pointer: coarse) {
  .btn, button, .form-control, .form-select, input[type="text"], input[type="email"],
  input[type="tel"], input[type="password"], input[type="number"], input[type="date"],
  input[type="search"], select, textarea, .nav-link, .nav-link-top, a.btn-access {
    min-height: 44px;
  }
  .form-control, .form-select, input, select, textarea {
    font-size: 16px !important;   /* evita zoom automático en iOS Safari */
  }
}

/* ============================================================
   MODALES Bootstrap — comportamiento mobile profesional
   - En móviles el modal ocupa toda la pantalla
   - Header/footer sticky para no perderlos al hacer scroll
   ============================================================ */
@media (max-width: 575.98px) {
  .modal-dialog { margin: 0 !important; max-width: 100% !important; }
  .modal-content {
    border-radius: 0 !important;
    min-height: 100vh; min-height: 100dvh;
    border: 0 !important;
  }
  .modal-dialog-centered { align-items: stretch !important; min-height: 100vh; min-height: 100dvh; }
  .modal-body { padding: 16px !important; }
  .modal-header { position: sticky; top: 0; z-index: 5; padding-top: max(12px, env(safe-area-inset-top)) !important; }
  .modal-footer { position: sticky; bottom: 0; z-index: 5; padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; }
  .mc-modal-body { padding: 16px !important; }
}

/* ============================================================
   REGISTRO modal (#registerModal) y LOGIN modal (#loginModal)
   ============================================================ */
@media (max-width: 575.98px) {
  #registerModal .mc-modal, #loginModal .mc-modal {
    border-radius: 0 !important;
  }
  #registerModal .row.g-2 > .col-6,
  #registerModal .row.g-4 > .col-md-6,
  #registerModal .row.g-3 > .col-md-6 {
    flex: 0 0 100% !important; max-width: 100% !important;
  }
  /* Botón crear cuenta full-width y bien tappable */
  #registerModal .btn-mc-register, #loginModal .btn-mc-login {
    width: 100%; padding: 14px; font-size: 16px; border-radius: 12px;
  }
}

/* Contrato bloque — siempre legible */
#contratoClienteBlock button { font-size: 14px; }
@media (max-width: 360px) {
  #contratoClienteBlock button { font-size: 13px; padding: 12px 8px !important; white-space: normal; line-height: 1.3; }
}

/* ============================================================
   PÁGINAS LEGALES (legal/*.html)
   - Mejor lectura en móvil
   - Barra de aceptación con safe-area
   ============================================================ */
@media (max-width: 600px) {
  .container { padding: 24px 16px 100px !important; }
  h1 { font-size: 1.45rem !important; line-height: 1.25 !important; }
  h2 { font-size: 1.02rem !important; margin: 22px 0 8px !important; }
  h3 { font-size: .96rem !important; }
  p, li { font-size: 14.5px; line-height: 1.65; }
  .card { padding: 16px !important; }
  .nav-links-top { display: none !important; }
  .navbar-top { padding: 0 14px !important; height: 56px !important; }
  .nav-brand-name { font-size: 14px !important; }
}

/* Barra de aceptación fija (#acceptBar) */
#acceptBar { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
#acceptBar > div { padding: 0 max(8px, env(safe-area-inset-left)) 0 max(8px, env(safe-area-inset-right)); }
@media (max-width: 480px) {
  #acceptBar label span { font-size: 13.5px; }
  #acceptBar #acceptBtn { width: 100%; font-size: 14.5px; padding: 12px; }
  #acceptBar > div { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* ============================================================
   REGISTRO ESPECIAL (registro_especial.html)
   ============================================================ */
@media (max-width: 575.98px) {
  .form-section, .registro-card { padding: 18px !important; border-radius: 14px !important; }
  .role-option { padding: 12px !important; }
  .row.g-4 > [class*="col-"] { padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5) !important; padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5) !important; }
  #contratoConductorBlock { padding: 14px !important; }
  #contratoConductorBlock button#btnAbrirContrato { font-size: 14.5px !important; padding: 12px !important; }
  #submitButton { width: 100%; padding: 14px !important; font-size: 16px !important; }
}

/* ============================================================
   SOLICITUD (solicitud.html)
   ============================================================ */
@media (max-width: 575.98px) {
  body.solicitud, .solicitud-card, .form-wizard { padding: 12px !important; }
  .swal2-popup { font-size: 14px !important; }
}

/* ============================================================
   Tablas legales (tarifas, articulos prohibidos) — scroll horizontal
   ============================================================ */
@media (max-width: 600px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  table th, table td { font-size: 13px; padding: 8px 10px; }
}

/* ============================================================
   Hero / secciones principales
   ============================================================ */
@media (max-width: 575.98px) {
  .section-big-title, h1.display-3, h1.display-4 { font-size: 1.7rem !important; line-height: 1.2 !important; }
  .section-eyebrow { font-size: 12px !important; }
  .hero-cta, .btn-mc-cta { width: 100%; }
  .container, .container-lg, .container-xl { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ============================================================
   Footer
   ============================================================ */
@media (max-width: 575.98px) {
  footer .row > [class*="col-"] { margin-bottom: 18px; }
  .footer-link { font-size: 13.5px; }
}

/* ============================================================
   Scrollbars sutiles en móvil
   ============================================================ */
@media (max-width: 600px) {
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-thumb { background: rgba(245,158,11,.4); border-radius: 3px; }
}

/* ============================================================
   Accesibilidad: focus visible
   ============================================================ */
:focus-visible {
  outline: 2px solid #f59e0b !important;
  outline-offset: 2px;
  border-radius: 4px;
}