/* ═══════════════════════════════════════════
   MOBILE — Celulares pequeños, medianos y grandes
   Breakpoints: ≤374 · 375–429 · 430–639 · ≤767 · ≤1023
   ═══════════════════════════════════════════ */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --touch-min: 44px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ─── Todos los móviles y tablets verticales (≤1023) ─── */
@media (max-width: 1023px) {
  body.menu-open {
    overflow: hidden;
    touch-action: none;
  }

  .site-header .brand-mark {
    width: 36px;
    height: 36px;
    font-size: var(--text-sm);
  }

  .theme-toggle,
  .nav-toggle {
    width: var(--touch-min);
    height: var(--touch-min);
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }

  .mobile-nav .nav-link {
    min-height: var(--touch-min);
  }

  .mobile-nav__cta .button {
    min-height: var(--touch-min);
  }

  /* Botones táctiles */
  .button,
  .btn-comprar {
    min-height: var(--touch-min);
  }

  /* Inputs: evita zoom en iOS */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding: var(--space-12) var(--space-4) var(--space-16);
  }

  .hero h1 {
    font-size: clamp(2.4rem, 11vw, 3.6rem);
    margin: var(--space-3) 0 var(--space-4);
  }

  .hero__subtitle {
    font-size: var(--text-base);
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-feature-card {
    min-height: 220px;
  }

  .hero-mini-grid {
    min-height: 140px;
  }

  .hero-metrics {
    gap: var(--space-2);
  }

  .hero-metrics strong {
    font-size: var(--text-xl);
  }

  /* Secciones */
  .section {
    padding: var(--space-12) var(--space-4);
  }

  .section-heading--split {
    text-align: center;
    justify-items: center;
  }

  .section-heading--split .button {
    width: 100%;
    max-width: 280px;
  }

  .section-heading h2 {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  /* Catálogo y cards */
  .raffle-card__body .button {
    width: 100%;
  }

  /* Flujo de compra */
  .flow-board {
    gap: var(--space-5);
  }

  .flow-step .icon {
    width: 52px;
    height: 52px;
  }

  /* Compra directa */
  .purchase-section {
    padding: var(--space-12) var(--space-4);
  }

  .purchase-panel h2 {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  .purchase-panel .random-buy-form,
  .random-buy-form--detail {
    padding: var(--space-4);
  }

  .purchase-panel .random-buy-form .button,
  .random-buy-form--detail .button {
    width: 100%;
  }

  .purchase-summary strong {
    font-size: var(--text-2xl);
  }

  /* Cuenta CTA */
  .account-cta-section {
    padding-block: var(--space-12);
  }

  .account-cta-section .register-panel {
    padding: var(--space-6);
  }

  .account-cta-actions {
    width: 100%;
  }

  .account-cta-actions .button {
    flex: 1;
    min-width: 140px;
  }

  /* Términos + countdown */
  .terms-section {
    padding: var(--space-12) var(--space-4);
    text-align: center;
  }

  .countdown-card {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }

  .countdown-grid strong {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  /* Detalle rifa */
  .detail-page {
    padding: var(--space-10) var(--space-4);
  }

  .detail-hero h1 {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }

  .detail-meta {
    justify-content: center;
  }

  .detail-hero .random-buy-form--detail {
    width: 100%;
  }

  /* Catálogo */
  .catalog-hero {
    min-height: auto;
    padding: var(--space-12) var(--space-4);
  }

  .catalog-hero h1 {
    font-size: clamp(2.4rem, 10vw, 3.5rem);
  }

  /* Carrusel */
  .prize-carousel .premio-card,
  .carrusel-track .premio-card {
    flex: 0 0 min(85vw, 300px);
  }

  .carousel-dots,
  .carrusel-dots {
    margin-top: var(--space-4);
  }

  /* Footer */
  .site-footer {
    padding:
      var(--space-12)
      max(var(--space-4), var(--safe-right))
      calc(var(--space-16) + var(--safe-bottom) + 56px)
      max(var(--space-4), var(--safe-left));
    text-align: center;
    justify-items: center;
  }

  .footer-links {
    justify-content: center;
  }

  .whatsapp-float {
    bottom: calc(20px + var(--safe-bottom));
    right: calc(16px + var(--safe-right));
    width: 52px;
    height: 52px;
  }

  /* Auth */
  .auth-page {
    align-items: stretch;
    padding:
      calc(var(--header-offset) + var(--space-4))
      max(var(--space-3), var(--safe-right))
      max(var(--space-8), var(--safe-bottom))
      max(var(--space-3), var(--safe-left));
  }

  .auth-theme-fab {
    top: max(var(--space-3), var(--safe-top));
    right: max(var(--space-3), var(--safe-right));
  }

  .auth-shell {
    width: 100%;
    margin: auto 0;
  }

  .auth-card {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
  }

  .auth-card h1 {
    font-size: clamp(1.75rem, 7vw, 2.2rem);
  }

  .auth-form .button--primary {
    min-height: var(--touch-min);
  }

  /* Admin */
  .admin-main {
    padding:
      var(--space-4)
      max(var(--space-3), var(--safe-right))
      max(var(--space-6), var(--safe-bottom))
      max(var(--space-3), var(--safe-left));
  }

  .admin-topbar {
    padding:
      max(var(--space-2), var(--safe-top))
      max(var(--space-3), var(--safe-right))
      var(--space-2)
      max(var(--space-3), var(--safe-left));
  }

  .admin-title {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .admin-title .button,
  .admin-title form .button {
    width: 100%;
  }

  .admin-quick-actions {
    flex-direction: column;
  }

  .admin-quick-actions .button {
    width: 100%;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-card {
    padding: var(--space-4);
  }

  .metric-card strong {
    font-size: var(--text-xl);
  }

  .admin-grid,
  .admin-grid--wide {
    grid-template-columns: 1fr;
  }

  .admin-panel {
    padding: var(--space-4);
  }

  .filters-form {
    grid-template-columns: 1fr;
  }

  .filters-form .button {
    width: 100%;
  }

  .table-wrap--hint::after {
    content: "Desliza →";
    display: block;
    padding: var(--space-2) 0 0;
    color: var(--texto-muted);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
  }

  .admin-panel .table-wrap,
  .table-wrap--scroll {
    margin-inline: calc(var(--space-3) * -1);
    padding-inline: var(--space-3);
  }

  .admin-panel .table-wrap::after,
  .table-wrap--scroll::after {
    content: "Desliza →";
    display: block;
    padding: var(--space-2) 0 0;
    color: var(--texto-muted);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
  }

  .admin-panel table,
  .table-wrap--scroll table {
    min-width: 560px;
  }

  .list-row,
  .prize-admin-row {
    grid-template-columns: 1fr;
  }

  .row-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .row-actions .button {
    width: 100%;
  }

  .row-actions--tight {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .row-actions--tight .button {
    width: auto;
  }

  .admin-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .admin-tabs__btn {
    flex: 0 0 auto;
  }

  .inline-upload-form {
    flex-direction: column;
    align-items: stretch;
  }

  .danger-zone {
    flex-direction: column;
    align-items: stretch;
  }

  .danger-zone .button {
    width: 100%;
  }

  .media-card__delete {
    opacity: 1;
    transform: none;
  }

  .dropzone {
    padding: var(--space-6) var(--space-4);
  }

  .prize-manage-card__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .prize-manage-card__actions .button,
  .prize-manage-card__actions form {
    width: 100%;
  }

  .prize-manage-card__actions form .button {
    width: 100%;
  }

  .home-preview__showcase {
    grid-template-columns: 1fr;
  }

  .numbers-grid {
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 6px;
  }

  .number-cell {
    font-size: 10px;
    border-radius: var(--radius-sm);
  }

  .inline-form {
    flex-direction: column;
    align-items: stretch;
  }

  .inline-form .button {
    width: 100%;
  }

  .grid-form {
    grid-template-columns: 1fr;
  }

  .user-edit-details {
    min-width: 0;
  }
}

/* ─── Celulares grandes (430–639px) ─── */
@media (min-width: 430px) and (max-width: 639px) {
  .brand-text {
    display: inline;
    font-size: var(--text-base);
  }

  .hero h1 {
    font-size: clamp(2.6rem, 10vw, 3.4rem);
  }

  .hero-feature-card {
    min-height: 260px;
  }

  .flow-board {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .prize-carousel .premio-card,
  .carrusel-track .premio-card {
    flex: 0 0 72vw;
  }
}

/* ─── Celulares medianos (375–429px) ─── */
@media (min-width: 375px) and (max-width: 429px) {
  .hero-metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .mobile-nav > * {
    width: min(100%, 340px);
  }
}

/* ─── Celulares pequeños (≤374px) ─── */
@media (max-width: 374px) {
  :root {
    --header-h: 56px;
  }

  .brand-text {
    display: none;
  }

  .hero h1 {
    font-size: 2.15rem;
    line-height: 1;
  }

  .hero-metrics {
    grid-template-columns: 1fr;
  }

  .hero-metrics div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .hero-metrics strong {
    font-size: var(--text-lg);
  }

  .hero-mini-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-mini-grid figure {
    min-height: 120px;
  }

  .live-badge {
    font-size: 11px;
    padding: 5px 10px;
  }

  .purchase-panel h2 {
    font-size: 1.85rem;
  }

  .purchase-panel .random-buy-form {
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .section {
    padding: var(--space-10) var(--space-3);
  }

  .purchase-section,
  .terms-section,
  .detail-page {
    padding-inline: var(--space-3);
  }

  .auth-card {
    padding: var(--space-4);
  }

  .auth-card h1 {
    font-size: 1.65rem;
  }

  .brand--auth .brand-mark {
    width: 38px;
    height: 38px;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .metric-card__icon {
    width: 34px;
    height: 34px;
  }

  .admin-topbar__title strong {
    font-size: var(--text-lg);
  }

  .numbers-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  }

  .mobile-nav .nav-link {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }

  .countdown-grid {
    gap: var(--space-2);
  }

  .account-cta-actions {
    flex-direction: column;
  }

  .account-cta-actions .button {
    width: 100%;
  }
}

/* ─── Tablets pequeñas / móvil horizontal (640–767) ─── */
@media (min-width: 640px) and (max-width: 767px) {
  .hero-showcase {
    grid-template-columns: 1fr 1fr;
  }

  .hero-feature-card {
    grid-column: 1 / -1;
    min-height: 280px;
  }

  .flow-board {
    grid-template-columns: repeat(2, 1fr);
  }

  .raffle-grid,
  .gallery-grid--expanded {
    grid-template-columns: repeat(2, 1fr);
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .auth-shell {
    max-width: 480px;
    margin-inline: auto;
  }

  .admin-main {
    padding: var(--space-5);
  }
}

/* ─── Tablets verticales (768–1023) ─── */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero {
    padding: var(--space-16) var(--space-6);
  }

  .hero-showcase {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .flow-board {
    grid-template-columns: repeat(2, 1fr);
  }

  .purchase-panel,
  .account-cta-section .register-panel {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }

  .detail-hero {
    grid-template-columns: 1fr 1fr;
  }

  .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .admin-grid {
    grid-template-columns: 1fr 1fr;
  }

  .filters-form {
    grid-template-columns: repeat(3, 1fr) auto;
  }

  .admin-panel .table-wrap::after {
    display: none;
  }
}