/*
 * ============================================================
 *  ECUABET — RESPONSIVE UX LAYER (v1.0)
 *  Estrategia: Mobile-First
 *  Breakpoints:
 *    xs  → 0–479px   (teléfonos pequeños)
 *    sm  → 480–767px (teléfonos estándar)
 *    md  → 768–1023px (tablets)
 *    lg  → 1024px+   (escritorio)
 *  Nota: Los estilos base (sin @media) ya son LG.
 *        Las queries reducen/adaptan hacia abajo.
 * ============================================================
 */

/* ============================================================
   1. VARIABLES MOBILE
   ============================================================ */
:root {
  --nav-height: 72px;
  --strip-height: 28px;
  --header-total: calc(var(--nav-height) + var(--strip-height));
  --page-padding: 24px;
  --card-radius: 18px;
  --section-gap: 60px;
}

@media (max-width: 767px) {
  :root {
    --nav-height: 60px;
    --strip-height: 24px;
    --page-padding: 16px;
    --card-radius: 14px;
    --section-gap: 40px;
  }
}

@media (max-width: 479px) {
  :root {
    --nav-height: 56px;
    --strip-height: 22px;
    --page-padding: 12px;
    --card-radius: 12px;
    --section-gap: 28px;
  }
}

/* ============================================================
   2. MAIN CONTENT — padding top para evitar solapamiento con header fijo
   ============================================================ */
.main-content {
  padding-top: var(--header-total);
}

/* ============================================================
   3. NAVBAR
   ============================================================ */

/* MD y menores: Navbar estilo PC con scroll horizontal, ocultando el logo */
@media (max-width: 1023px) {
  .brand {
    display: none !important;
  }
  .nav-spacer {
    display: none !important;
  }
  .navbar-pro-v2 {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start !important;
    gap: 3px;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .navbar-pro-v2::-webkit-scrollbar {
    display: none;
  }
  .nav-mobile-top, .nav-mobile-bottom {
    display: flex;
    min-width: 0;
  }
  .nav-mobile-top {
    flex: 1 1 auto;
  }
  .nav-mobile-bottom {
    flex: 0 0 auto;
    margin-left: 0;
  }
  .nav-left {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 2px;
    align-items: center;
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
  }
  .nav-item,
  .nav-auth-btn {
    display: inline-flex !important;
    min-width: 0;
    min-height: 34px !important;
    padding: 6px 9px !important;
    font-size: 9.5px !important;
    letter-spacing: .65px !important;
    white-space: nowrap;
    flex: 1 1 auto;
  }
  .nav-hamburger {
    display: none !important;
  }
  .nav-right {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
  }
  .navbar-pro-v2 .nav-item {
    overflow: hidden !important;
    border-radius: 8px !important;
    background: #000 !important;
    color: #FFC107 !important;
    box-shadow: none !important;
  }
  .navbar-pro-v2 .nav-item::before,
  .navbar-pro-v2 .nav-item::after {
    display: block !important;
  }
  .navbar-pro-v2 .nav-item.active span {
    color: #fff !important;
    text-shadow: 0 0 8px var(--nav-fire-clr), 0 0 16px var(--nav-fire-clr) !important;
    border-bottom: 0;
    padding-bottom: 0;
  }
  .navbar-pro-v2 .nav-item:hover {
    transform: translateY(-1px) !important;
    color: #fff !important;
  }
  .navbar-pro-v2 .nav-item:hover span {
    color: #fff !important;
    text-shadow: 0 0 8px var(--nav-fire-clr), 0 0 16px var(--nav-fire-clr) !important;
  }
  .navbar-pro-v2 .nav-auth-btn {
    width: 38px !important;
    min-width: 38px !important;
    min-height: 34px !important;
    padding: 0 !important;
    flex: 0 0 38px !important;
    border-radius: 8px !important;
    color: #050505 !important;
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    box-shadow: 0 6px 16px rgba(255, 215, 0, .35) !important;
  }
  .navbar-pro-v2 .nav-auth-btn::before,
  .navbar-pro-v2 .nav-auth-btn::after {
    display: none !important;
  }
  .navbar-pro-v2 .nav-auth-btn span {
    color: inherit !important;
    font-size: 0 !important;
    text-shadow: none !important;
    gap: 0 !important;
  }
  .navbar-pro-v2 .nav-auth-btn i {
    font-size: 13px !important;
    margin: 0 !important;
  }
  /* Mostrar botones de auth en mobile que antes estaban ocultos */
  .nav-right .btn-auth,
  .nav-right .nav-auth-btn,
  .nav-right .nav-user-menu,
  .nav-right .user-chip,
  .nav-right .theme-toggle {
    display: flex !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

@media (max-width: 767px) {
  .navbar-pro-v2 {
    padding: 7px 4px !important;
    height: auto !important;
    min-height: var(--nav-height) !important;
    flex-wrap: nowrap !important; /* FORZAR UNA SOLA LÍNEA */
    justify-content: flex-start !important;
    gap: 2px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
  .nav-item,
  .nav-right .nav-auth-btn {
    min-height: 32px !important;
    padding: 5px 6px !important;
    font-size: 7.5px !important;
    letter-spacing: .35px !important;
  }
  .nav-left {
    gap: 2px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
  }
  .nav-right {
    gap: 2px !important;
    border: none !important; /* Elimina posible línea vertical */
  }
  .nav-right::before, .nav-right::after {
    display: none !important; /* Elimina cualquier línea o separador insertado por CSS */
  }
  .nav-right .nav-auth-btn {
    width: 30px !important;
    min-width: 30px !important;
    min-height: 32px !important;
    padding: 0 !important;
    flex: 0 0 30px !important;
    border-left: none !important; /* Por si acaso la línea vertical es un borde */
    margin-left: 0 !important;
  }
  .nav-right .nav-auth-btn i {
    font-size: 11px !important;
    margin-right: 0 !important;
  }
  .nav-brand-text {
    font-size: 14px;
    letter-spacing: 2px;
  }
  .nav-brand-pill {
    padding: 6px 14px;
  }
  .nav-live-strip {
    height: var(--strip-height) !important;
  }
  .nav-live-track span {
    font-size: 9px !important;
    letter-spacing: 1.5px;
  }
}

/* ============================================================
   4. SIDEBAR (Mobile Menu)
   ============================================================ */
.sidebar-menu {
  width: min(300px, 85vw) !important;
}

@media (max-width: 479px) {
  .navbar-pro-v2 {
    align-content: center;
    flex-wrap: nowrap !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    gap: 1px !important;
  }

  .navbar-pro-v2 .nav-mobile-top {
    flex: 1 1 auto;
    order: 1;
  }

  .navbar-pro-v2 .nav-mobile-bottom {
    flex: 0 0 auto;
    justify-content: flex-end;
    order: 2;
    margin-left: 0 !important;
  }

  .navbar-pro-v2 .nav-left {
    gap: 1px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .navbar-pro-v2 .nav-item,
  .navbar-pro-v2 .nav-auth-btn {
    min-height: 29px !important;
    padding: 4px 3px !important;
    font-size: 6.1px !important;
    letter-spacing: .12px !important;
    border-radius: 6px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .navbar-pro-v2 .nav-item span,
  .navbar-pro-v2 .nav-auth-btn span {
    gap: 3px !important;
  }

  .navbar-pro-v2 .nav-auth-btn i {
    font-size: 9px !important;
  }

  .navbar-pro-v2 .nav-right .nav-auth-btn {
    width: 27px !important;
    min-width: 27px !important;
    min-height: 29px !important;
    padding: 0 !important;
    font-size: 0 !important;
    flex: 0 0 27px !important;
  }

  .sidebar-menu {
    width: 100vw !important;
  }
  .sidebar-menu-item {
    padding: 18px 20px;
    font-size: 15px;
  }
}

/* ============================================================
   5. HERO SECTION
   ============================================================ */
.hero {
  padding: 60px var(--page-padding) 40px;
  margin-top: 0;
}

@media (max-width: 1023px) {
  .hero {
    padding: 50px var(--page-padding) 36px;
    text-align: center;
  }
  .hero h1 {
    font-size: clamp(2.2rem, 6vw, 3.5rem);
  }
  .hero p {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-highlights {
    justify-content: center;
  }
  .microcopy {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .hero {
    padding: 40px var(--page-padding) 28px;
  }
  .hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    letter-spacing: 1px;
  }
  .hero p {
    font-size: 1rem;
    line-height: 1.6;
  }
  .hero-highlights {
    grid-template-columns: 1fr !important;
    gap: 10px;
    max-width: 440px;
    margin: 0 auto;
  }
  .pill {
    font-size: 13px;
    padding: 12px 16px;
    text-align: center;
  }
  .microcopy {
    font-size: 0.9rem;
    margin-top: 20px;
  }
}

@media (max-width: 479px) {
  .hero h1 {
    font-size: clamp(1.6rem, 9vw, 2.2rem);
  }
}

/* ============================================================
   6. HOME CAROUSEL
   ============================================================ */
.home-carousel-container {
  border-radius: var(--card-radius);
  overflow: hidden;
}

@media (max-width: 1023px) {
  .home-carousel-container {
    height: 280px;
  }
}

@media (max-width: 767px) {
  .home-carousel-container {
    height: clamp(180px, 50vw, 260px);
    border-radius: 0; /* Full-width en mobile */
  }
}

/* ============================================================
   7. SECCIÓN JOIN ("ÚNETE A NOSOTROS")
   ============================================================ */
/* El centrado lo gestiona v11-join-wrap (flex + justify-content: center) */
/* v11-join-container: width 100%, max-width 860px — definido en hyper_theme */

@media (max-width: 1023px) {
  .v11-join-wrap {
    padding: 48px 24px;
  }
  .v11-join-container {
    padding: 38px 32px;
  }
  .v11-join-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
  }
}

@media (max-width: 767px) {
  .v11-join-wrap {
    padding: 36px 16px;
  }
  .v11-join-container {
    padding: 28px 22px;
    border-radius: 18px;
  }
  .v11-join-title {
    font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
  }
  .v11-join-text {
    font-size: 0.95rem !important;
  }
  .v11-join-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px !important;
  }
  .v11-btn-primary,
  .v11-btn-secondary {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 0.95rem;
    border-radius: 12px;
  }
}

@media (max-width: 479px) {
  .v11-join-wrap {
    padding: 28px 12px;
  }
  .v11-join-container {
    padding: 22px 18px;
    border-radius: 16px;
  }
  .v11-join-badge {
    font-size: 9px !important;
    padding: 4px 10px !important;
  }
  .v11-join-title {
    font-size: 1.3rem !important;
    margin-bottom: 10px !important;
  }
  .v11-join-text {
    font-size: 0.875rem !important;
  }
  .v11-btn-primary,
  .v11-btn-secondary {
    padding: 14px 16px;
    font-size: 0.875rem;
  }
}

/* ============================================================
   8. FEED DE NOTICIAS (Grid + Cards)
   ============================================================ */

/* El contenedor del feed */
#gridFeed.data-grid,
.inicio-feed-block .data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px var(--page-padding);
}

@media (max-width: 1023px) {
  #gridFeed.data-grid,
  .inicio-feed-block .data-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 16px var(--page-padding);
  }
}

@media (max-width: 767px) {
  #gridFeed.data-grid,
  .inicio-feed-block .data-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px var(--page-padding);
  }
}

/* V11 Feed Card en mobile */
.v11-feed-card {
  min-height: auto !important;
}

@media (max-width: 767px) {
  .v11-feed-card {
    padding: 18px !important;
    gap: 12px !important;
  }
  .v11-feed-card-title {
    font-size: 1.05rem !important;
  }
  .v11-feed-card-desc {
    font-size: 0.875rem !important;
    -webkit-line-clamp: 4 !important;
  }
  .v11-feed-card-img-wrap {
    height: 160px !important;
  }
}

@media (max-width: 479px) {
  .v11-feed-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }
  .v11-feed-card-tag {
    font-size: 9px !important;
  }
  .v11-feed-card-title {
    font-size: 0.95rem !important;
    margin: 8px 0 6px !important;
  }
}

/* ============================================================
   9. SECCIÓN DE APUESTAS / PICKS (data-grid global)
   ============================================================ */
.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px var(--page-padding);
}

@media (max-width: 767px) {
  .data-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px var(--page-padding);
  }
}

@media (max-width: 479px) {
  .data-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px var(--page-padding);
  }
}

/* ============================================================
   10. FLOATING VIP CARD (Mini Card)
   ============================================================ */
.vip-float {
  bottom: 80px !important; /* Subimos para no tapar el botón "Trabaja" */
  right: 12px !important;
}

@media (max-width: 479px) {
  .vip-float {
    right: 8px !important;
    bottom: 72px !important;
    width: min(140px, calc(100vw - 20px)) !important;
  }

  .vip-float.vip-mini-pronostico {
    left: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    width: min(160px, calc(100vw - 20px)) !important;
  }
}

/* ============================================================
   11. BOTÓN FLOTANTE "TRABAJA CON NOSOTROS"
   ============================================================ */
@media (max-width: 767px) {
  .btn-neon-solido-floating {
    left: var(--page-padding) !important;
    bottom: 16px !important;
    font-size: 11px;
    padding: 11px 36px 11px 14px;
    max-width: calc(100vw - 80px);
  }
  .btn-wa-solido-floating {
    left: var(--page-padding) !important;
    bottom: 70px !important;
  }
  .btn-neon-solido-floating span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 479px) {
  .btn-neon-solido-floating {
    font-size: 10px;
    padding: 9px 32px 9px 12px;
  }
}

/* ============================================================
   12. FILTER BAR (Apuestas, Productos, etc.)
   ============================================================ */
@media (max-width: 767px) {
  .filter-bar {
    flex-direction: column !important;
    padding: 12px var(--page-padding) !important;
    gap: 8px !important;
  }
  .f-input,
  .f-select {
    width: 100% !important;
    font-size: 14px;
  }
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 0 var(--page-padding);
    gap: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tab {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12px;
    padding: 8px 14px;
  }
}

/* ============================================================
   13. CARDS DE APUESTAS (Admin y Usuario)
   ============================================================ */
@media (max-width: 767px) {
  .v10-admin-card,
  .v10-user-card {
    padding: 16px !important;
  }
}

@media (max-width: 479px) {
  /* Apuestas en 1 columna en móvil pequeño */
  #gridApuestas.data-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   14. SECCIÓN PANEL (agencias, productos, etc.)
   ============================================================ */
@media (max-width: 767px) {
  .panel-head {
    padding: 24px var(--page-padding) 16px;
  }
  .panel-head h1 {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }
  .panel-head p {
    font-size: 0.9rem;
  }
}

/* ============================================================
   14b. SECCIÓN TRABAJA CON NOSOTROS
   ============================================================ */
@media (max-width: 767px) {
  #trabaja .v11-join-wrap {
    padding: 24px var(--page-padding) 10px;
  }

  #trabaja .v11-join-container {
    width: min(100%, 420px);
    max-width: calc(100vw - (var(--page-padding) * 2));
    margin-left: auto;
    margin-right: auto;
  }

  #trabaja > .v11-join-container {
    margin-top: 18px;
    margin-bottom: 32px;
  }

  #trabaja .panel-head {
    padding-top: 14px;
    padding-bottom: 8px;
    margin-top: 0;
  }

  #trabaja .panel-head p {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  #trabaja .data-grid {
    grid-template-columns: minmax(0, min(100%, 340px)) !important;
    justify-content: center;
    gap: 14px;
    padding: 8px var(--page-padding) 18px;
  }

  #trabaja .servicio-card {
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 18px;
    border-radius: 20px;
  }

  #trabaja .svg-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
  }
}

@media (max-width: 479px) {
  #trabaja .data-grid {
    grid-template-columns: minmax(0, calc(100vw - 32px)) !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  #trabaja .servicio-card {
    max-width: calc(100vw - 32px);
  }
}

/* ============================================================
   15. AYUDAS SOLIDARIAS
   ============================================================ */
@media (max-width: 767px) {
  .ayudas-section {
    padding: 24px var(--page-padding);
  }
  .ayudas-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .ayuda-card {
    border-radius: var(--card-radius);
  }
}

/* ============================================================
   16. SORTEOS 3D
   ============================================================ */
@media (max-width: 767px) {
  .sorteos3d-card {
    width: 85vw !important;
    min-height: 160px !important;
  }
}

/* ============================================================
   17. SECCIÓN AGENCIAS
   ============================================================ */
@media (max-width: 1023px) {
  .agencias-grid,
  #gridAgencias.data-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 767px) {
  .agencias-grid,
  #gridAgencias.data-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

@media (max-width: 479px) {
  .agencias-grid,
  #gridAgencias.data-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   18. MODALES — centrado y tamaño correcto en mobile
   ============================================================ */
@media (max-width: 767px) {
  .modal-content,
  [id$="Modal"] > div,
  [id$="Panel"] {
    width: 96vw !important;
    max-width: 96vw !important;
    border-radius: 16px !important;
    padding: 20px 16px !important;
  }
}

/* ============================================================
   19. SCROLLBAR GENERAL (mejorada)
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.25);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 0, 0.45);
}

/* ============================================================
   20. TOUCH TARGETS — botones grandes en mobile (accesibilidad)
   ============================================================ */
@media (max-width: 767px) {
  button,
  a[role="button"],
  .btn-auth,
  .v11-btn-primary,
  .v11-btn-secondary {
    min-height: 44px; /* WCAG 2.1 touch target */
  }
  /* Aumentar tap targets de nav items en sidebar */
  .sidebar-menu-item {
    min-height: 52px;
    display: flex !important;
    align-items: center;
  }
}

/* ============================================================
   21. TIPOGRAFÍA FLUIDA — sin saltos bruscos
   ============================================================ */
h1 { font-size: clamp(1.8rem, 5vw, 4rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.6rem); }

/* ============================================================
   22. HOME-EDIT-BLOCK spacing
   ============================================================ */
.home-edit-block {
  width: 100%;
}

/* ============================================================
   23. SECCIÓN INICIO GENERAL — espacio entre bloques
   ============================================================ */
#inicioHomeBlocks > .home-edit-block {
  margin-bottom: var(--section-gap);
}

#inicioHomeBlocks > .home-edit-block:first-child {
  margin-bottom: 0; /* El carrusel no necesita margen abajo */
}

/* ============================================================
   24. OVERFLOW GENERAL — evitar scroll horizontal en mobile
   ============================================================ */
section,
.section {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ============================================================
   25. UTILIDADES RESPONSIVE
   ============================================================ */
.hide-mobile {
  display: none !important;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: revert !important;
  }
  .show-mobile {
    display: none !important;
  }
}

/* ============================================================
   AGENTES - RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  #gridAgentes.agentes-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

@media (max-width: 767px) {
  .agentes-filter-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    padding-top: 12px !important;
  }

  .agentes-filter-control:first-child {
    grid-column: 1 / -1;
  }

  #gridAgentes.agentes-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 14px;
  }

  .agentes-card {
    border-radius: 18px;
    padding: 18px;
  }

  .agentes-card-actions .btn-mini,
  .agentes-social-btn {
    min-height: 44px;
  }
}

@media (max-width: 479px) {
  .agentes-filter-bar {
    grid-template-columns: 1fr;
  }

  .agentes-filter-control:first-child {
    grid-column: auto;
  }

  #gridAgentes.agentes-grid {
    grid-template-columns: 1fr !important;
  }

  .agentes-rating-wrap {
    align-items: flex-start;
    flex-direction: column;
  }

  .agentes-card-actions {
    grid-template-columns: 1fr;
  }
}