/* ==========================================================================
   GoEldo - Reescalado fluido responsive
   --------------------------------------------------------------------------
   Se reescala automaticamente segun el ancho REAL de la pantalla usando
   clamp(). No detecta el navegador: mide el viewport, que con
   "width=device-width" ya es el ancho fisico del telefono.

   Reglas:
   - Todo tiene piso (minimo legible/toque) y techo (maximo de escritorio)
   - Nada puede exceder el 100% del ancho disponible
   - La navbar envuelve de verdad (flex-wrap) en vez de desbordar
   ========================================================================== */

/* ---------- 1. Escala raiz fluida ---------- */
/* Todo el sitio expresado en rem hereda esta escala */
html {
  font-size: clamp(14px, 0.55vw + 12.6px, 18px);
}

/* ---------- 2. Contenedores: nunca mas anchos que la pantalla ---------- */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

img,
svg,
video,
canvas,
iframe,
picture {
  max-width: 100%;
}

/* Bloques principales que antes tenian anchos rigidos */
main,
.section,
.hero,
.hero-partner,
.reg-hero,
.banners,
.commerce-grid,
.product-grid,
.cat-carousel-wrap,
.form-page,
.registro-card,
.legal-table-wrap,
.site-footer,
.footer-inner,
.rp-view,
.rp-map-wrap,
.pt-wrap,
.faq-hero {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ---------- 3. Navbar fluida ---------- */
.site-header {
  max-width: 100%;
  overflow: visible;
}

.header-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(6px, 1.6vw, 12px);
  padding: clamp(6px, 1.6vw, 10px) clamp(10px, 3vw, 18px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Marca: el logo baja de 55px a 34px solo */
.brand {
  flex: 0 1 auto;
  min-width: 0;
  gap: clamp(5px, 1.5vw, 8px);
}

.brand img {
  height: clamp(34px, 9vw, 55px);
  width: auto;
  max-width: clamp(120px, 34vw, 200px);
  flex: 0 1 auto;
  min-width: 0;
}

.brand .go {
  font-size: clamp(18px, 4.2vw, 26px);
}

.brand .eldo {
  font-size: clamp(11px, 2.4vw, 15px);
}

/* Selector de ubicacion: se estrecha, el texto se recorta con ellipsis */
.loc-btn {
  max-width: clamp(104px, 36vw, 200px);
  min-width: 0;
  flex: 0 1 auto;
  font-size: clamp(10.5px, 2.4vw, 12px);
  padding: clamp(5px, 1.4vw, 7px) clamp(7px, 2.2vw, 11px);
  gap: clamp(4px, 1.2vw, 6px);
}

.loc-btn .addr {
  max-width: clamp(56px, 24vw, 140px);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Buscador: base flexible, nunca empuja a otros */
.header-search {
  flex: 1 1 clamp(130px, 32vw, 320px);
  min-width: 0;
  max-width: 100%;
}

.header-search input {
  width: 100%;
  min-width: 0;
  font-size: clamp(12px, 2.8vw, 14px);
}

/* Zona derecha: no crece nunca */
.header-right {
  flex: 0 0 auto;
  gap: clamp(4px, 1.2vw, 8px);
  min-width: 0;
}

/* ---------- 4. Breakpoint de tablet / movil (768px) ---------- */
@media (max-width: 768px) {
  /* El buscador baja a su propia fila */
  .header-search {
    order: 3;
    flex-basis: 100%;
    min-width: 0;
  }

  /* "Ayuda" no entra en pantallas chicas */
  .link-help {
    display: none;
  }

  /* Navbar del portal de socios */
  .riders-nav,
  .legal-nav {
    gap: clamp(6px, 2vw, 10px);
  }
}

/* ---------- 5. Piso de usabilidad (390px) ---------- */
@media (max-width: 390px) {
  /* El texto "Eldo" se oculta; queda solo el logo + GO */
  .brand .eldo {
    display: none;
  }

  /* El boton de ingreso se reduce a lo esencial */
  .btn-login {
    padding: clamp(6px, 2.2vw, 15px) clamp(9px, 2.8vw, 15px);
    font-size: clamp(11px, 2.8vw, 13px);
  }

  .profile-btn {
    width: clamp(30px, 8.5vw, 34px);
    height: clamp(30px, 8.5vw, 34px);
    font-size: clamp(14px, 3.6vw, 16px);
  }
}

/* ---------- 6. Piso duro (360px) ---------- */
@media (max-width: 360px) {
  /* El boton "Ingresar" sale: es lo menos critico de la barra */
  .btn-login {
    display: none;
  }

  .loc-btn {
    max-width: clamp(92px, 32vw, 120px);
  }

  /* En el portal, la navegacion secundaria baja de fila */
  .riders-nav {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- 7. Tablas anchas: scroll propio, sin romper la pagina ---------- */
.pt-scroll,
.legal-table-wrap,
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ---------- 8. Grillas: 1 columna en pantallas chicas ---------- */
@media (max-width: 480px) {
  .commerce-grid,
  .product-grid,
  .banners,
  .form-grid,
  .stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 9. Mapas y elementos interactivos ---------- */
.leaflet-container,
#map,
.rp-map {
  max-width: 100%;
}

/* ---------- 10. Touch target mínimo 44px (WCAG / Apple HIG) ---------- */
button,
a.rp-btn,
.rp-btn,
.rp-fab,
.rp-seg button,
.rp-dispo-btn,
.rp-bell-btn,
.rp-avatar {
  min-height: 44px;
  min-width: 44px;
}

/* ---------- 11. Piso duro 320px ---------- */
@media (max-width: 320px) {
  html { font-size: clamp(12px, 1vw + 11px, 16px); }

  .rp-view {
    padding: 12px 10px calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .rp-nav-in {
    gap: 8px;
    padding: 8px 10px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
  }

  .rp-seg button {
    font-size: 11px;
    padding: 6px 12px;
  }

  .rp-bell-btn {
    width: 40px;
    height: 40px;
  }

  .rp-dispo-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
  .rp-dispo-btn span#rpDispoTxt { display: none; }

  .rp-fab {
    height: 40px;
    padding: 0 10px;
    font-size: 11px;
    left: 8px !important;
    right: 8px !important;
  }

  .rp-drawer .fact {
    font-size: 11.5px;
    padding: 6px 4px;
  }

  .rp-drawer .head .stage {
    font-size: 11px;
  }

  .topbar .chip {
    padding: 6px 10px;
    font-size: 11.5px;
    gap: 5px;
  }

  .card {
    padding: 10px;
    font-size: 11.5px;
  }
  .card strong { font-size: 13px; }

  @media (max-width: 480px) {
    .cat-arrow { display: none; }
    .cat-carousel-wrap { width: 100%; }
  }
}

@media (max-width: 480px) {
  .cat-arrow { display: none; }
  .cat-carousel-wrap { width: 100%; }
}