/* ═══════════════════════════════════════════════════════════════════════════
   ComeCerca — Adaptación por tamaño

   El diseño base es móvil. Aquí solo se añade lo que gana el espacio extra, y
   se corrigen los tres o cuatro puntos donde una pantalla estrecha necesita un
   trato distinto. Probado en 320, 375, 390, 430, 768, 1024, 1440 y 1920 px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hasta 1024 px: se apilan las columnas laterales ──────────────────────── */

@media (max-width: 1024px) {
  .search-layout--with-map { grid-template-columns: 1fr; }

  /* Sin columna lateral el mapa pasa debajo: en una pantalla estrecha lo
     primero tienen que ser los restaurantes. */
  .map-panel {
    position: static;
    order: 1;
  }

  .map { aspect-ratio: 16 / 9; }

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

  .rsidebar {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .panel-grid { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: 1fr; }
  .pro-teaser { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

/* ── Hasta 860 px: navegación en cajón y hero a una columna ───────────────── */

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--gutter) var(--space-6);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
  }

  .site-nav.is-open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav a:not(.btn) {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: var(--text-md);
  }

  .site-nav a:not(.btn)::after { display: none; }
  .site-nav .btn { margin-top: var(--space-4); justify-content: center; }

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

  .searchbox {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
    border-radius: var(--radius-xl);
  }

  .searchbox__icon { display: none; }
  .searchbox__ghost { left: var(--space-4); right: var(--space-4); }
  .searchbox__input { padding-block: var(--space-2); font-size: var(--text-md); }
  .searchbox__submit { width: 100%; }

  .intent-shortcuts {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: var(--space-1);
    margin-inline: calc(var(--space-2) * -1);
    padding-inline: var(--space-2);
  }

  .intent-shortcuts .intent--sm {
    flex: 0 0 auto;
    min-width: 9.25rem;
    max-width: none;
    scroll-snap-align: start;
  }

  .status-card { grid-template-columns: 1fr; text-align: left; }
  .status-card > .btn { width: 100%; }
  .status-card__actions { flex-direction: row; flex-wrap: wrap; }
  .status-card__actions .btn { flex: 1 1 auto; justify-content: center; }

  .task { flex-wrap: wrap; }
  .task__actions { width: 100%; }
  .task__actions .btn { flex: 1; }
}

/* ── Hasta 640 px: teléfono ───────────────────────────────────────────────── */

@media (max-width: 640px) {
  :root { --header-height: 60px; }

  .results-grid { grid-template-columns: 1fr; gap: var(--space-4); }

  .rhero__media { aspect-ratio: 4 / 3; min-height: 220px; }
  .rhero__card { margin-top: -40px; border-radius: var(--radius-lg); }
  .rhero__actions .btn { flex: 1 1 calc(50% - var(--space-3)); }

  /* En móvil las acciones principales viven en la barra inferior. */
  .rhero__actions .btn[data-action='call'],
  .rhero__actions .btn[data-action='directions'] { display: none; }

  .action-bar { display: flex; }
  body.page-restaurant { padding-bottom: 76px; }

  .dish { grid-template-columns: 1fr; padding-inline: 0; }
  .dish__price { grid-row: auto; grid-column: 1; text-align: left; }
  .dish__price small { text-align: left; }

  .trust { border-radius: var(--radius-lg); }
  .confirm-all { border-radius: var(--radius-lg); }
  .status-card { border-radius: var(--radius-lg); }

  .modal { padding: 0; align-items: flex-end; }

  .modal__panel {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
    animation: sheet-in var(--duration-slow) var(--ease-out);
  }

  @keyframes sheet-in {
    from { transform: translateY(100%); }
    to { transform: none; }
  }

  .toasts { bottom: var(--space-4); }

  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .seo-stats { gap: var(--space-4) var(--space-6); }
  .empty-smart { padding: var(--space-6) var(--space-4); }
  .relaxations { flex-direction: column; }
  .relaxation { justify-content: center; }

  .admin-metrics { grid-template-columns: repeat(2, 1fr); }
  .table th, .table td { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
  .panel-switch { width: 100%; }
  .panel-switch .select { flex: 1; min-width: 0; }

  /* El horario en móvil se lee como una tarjeta por día, no como una tabla. */
  .hours-row {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-2);
    padding-block: var(--space-4);
  }

  .hours-row__times { grid-column: 1 / -1; }
  .hours-row__shift { flex: 1 1 auto; }
  .hours-row__shift .input--time { flex: 1; min-width: 0; }

  .dish-row__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Hasta 380 px: pantallas muy estrechas ────────────────────────────────── */

@media (max-width: 380px) {
  :root { --gutter: 0.875rem; }

  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .rhero__actions .btn { flex: 1 1 100%; }
  .admin-metrics { grid-template-columns: 1fr; }
  .match { width: 48px; height: 48px; }
  .result-card__actions { flex-wrap: wrap; }
}

/* ── A partir de 1024 px: composición editorial ───────────────────────────── */

@media (min-width: 1025px) {
  .hero__inner { grid-template-columns: 1.35fr 1fr; align-items: center; }
  /* El hero de intención es una sola columna: la rejilla ya ocupa el ancho. */
  .hero--intent .hero__inner { grid-template-columns: 1fr; }
  .talk__examples { grid-template-columns: repeat(4, 1fr); }
}

/* ── Pantallas grandes: se ensancha el contenedor, no la tipografía ───────── */

@media (min-width: 1600px) {
  :root { --container: 1320px; }
  .results-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
}

/* ── Impresión: la carta y el horario deben poder imprimirse ──────────────── */

@media print {
  .site-header,
  .site-footer,
  .action-bar,
  .toasts,
  .filters,
  .search-bar,
  .rhero__actions,
  .claim-box { display: none !important; }

  body { background: #fff; }
  .card, .info-card, .trust-panel { box-shadow: none; border-color: #ddd; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.75em; color: #666; }
}