/* ============================================================================
   Crecer e Innovar — capa web
   ----------------------------------------------------------------------------
   app.css es el sistema aprobado y se copia del APK sin tocar. Acá va sólo lo
   que una app táctil de 390px de ancho no necesita y un navegador sí:

     1. foco visible por teclado
     2. un respaldo para los WebViews sin backdrop-filter
     3. hover — la app sólo tiene :active
     4. el shell de escritorio a partir de 768px

   Se carga DESPUÉS de app.css. Nada de esto vuelve al APK.
   ========================================================================== */

/* ── 1. Base de navegador ─────────────────────────────────────────────────── */

/* La app se maneja con el dedo y no tiene foco de teclado. Un sitio sí, y sin
   esto la navegación con Tab es invisible. */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--brand-100); color: var(--navy-800); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Reemplaza a .hide-scrollbar del viejo style.css. */
.sin-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.sin-scroll::-webkit-scrollbar { display: none; }

/* Los WebViews de Android 8 son comunes en Venezuela y no implementan
   backdrop-filter: en vez de desenfocar, dejan pasar el contenido y el header
   queda como un borrón ilegible. Sin translucidez se ve peor, pero se lee. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header, .nav, .barra-compra { background: #fff; }
  .fav-btn { background: #fff; }
}

/* ── 2. Hover ─────────────────────────────────────────────────────────────── */
/* Espeja el feedback :active que app.css ya define para el dedo. Va detrás de
   pointer:fine para que un teléfono no herede estados pegajosos al tocar. */

@media (hover: hover) and (pointer: fine) {
  .btn:hover            { filter: brightness(1.06); }
  .btn--primario:hover  { box-shadow: var(--sombra-cta); }
  .btn[disabled]:hover  { filter: none; }
  .icon-btn:hover       { background: var(--superficie-2); }
  .cat:hover            { background: var(--superficie-2); transform: translateY(-2px); }
  .chip:hover           { border-color: var(--borde-fuerte); }
  .seccion__link:hover  { color: var(--brand-700); }
  .drawer__item:hover   { background: var(--superficie); }
  .vendedor-fila:hover  { background: var(--superficie-2); }
  .fav-btn:hover        { transform: scale(1.08); }
  .nav-web a:hover      { color: var(--brand-600); background: var(--superficie); }
  .linea__foto img      { transition: transform var(--transicion); }
  .linea:hover .linea__foto img { transform: scale(1.05); }
}

/* Cursor: la app no tiene puntero, así que app.css no lo declara en ningún
   lado. Acá todo lo clicable tiene que anunciarse. */
.btn, .icon-btn, .chip, .cat, .fav-btn, .nav__item,
.drawer__item, .seccion__link, .tarjeta, .vendedor-fila,
.stepper button, .opcion { cursor: pointer; }
.btn[disabled] { cursor: not-allowed; }

/* ── 2a. Listas de opciones ───────────────────────────────────────────────── */
/* En el APK las filas de .lista-op son <button> porque todo navega por router.
   Acá son enlaces de verdad —se pueden abrir en otra pestaña, se pueden
   copiar— así que la misma regla tiene que alcanzar a los <a>. */

.lista-op a {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 17px; text-align: left; font-size: 14px; font-weight: 600;
  border-bottom: 1px solid var(--borde); letter-spacing: -.015em;
  color: var(--texto);
  transition: background var(--transicion);
}
.lista-op a:last-child { border-bottom: 0; }
.lista-op a:active { background: var(--superficie); }
.lista-op a .ico:first-child { color: var(--brand-500); }
@media (hover: hover) and (pointer: fine) {
  .lista-op a:hover, .lista-op button:hover { background: var(--superficie); }
}

/* ── 2b. Drawer del carrito ───────────────────────────────────────────────── */
/* En el APK el carrito es una pantalla completa (#/carrito), así que app.css
   sólo define el drawer izquierdo del menú. En la web conviene que agregar al
   carrito no te saque de la página donde estabas comprando, así que el mismo
   componente se ancla a la derecha. */

.drawer--der {
  left: auto; right: 0;
  transform: translateX(100%);
}
.drawer--der.abierto { transform: none; }

/* ── 3. Qué se ve en cada tamaño ──────────────────────────────────────────── */

/* Los enlaces de escritorio no existen en móvil: ahí manda la barra inferior. */
.nav-web { display: none; }

/* En móvil el buscador no cabe en el header junto al logo y las acciones, así
   que se accede por la lupa —igual que en el APK, donde buscar es su propia
   pantalla— y el campo sólo aparece dentro de resultados. */
.header .buscador { display: none; }
.buscador--pagina { display: flex; }

/* ── 4. Shell de escritorio ───────────────────────────────────────────────── */
/* 768px es el corte que ya usaba el sitio (md: de Tailwind). */

@media (min-width: 768px) {
  /* Sin barra de pestañas: recuperamos el espacio que la app le reserva. */
  .nav { display: none; }
  .pantalla { padding-bottom: 56px; }

  /* Header de una sola fila, con el buscador adentro en vez de una pantalla
     aparte. En móvil la lupa navega a resultados; acá se escribe en el sitio. */
  .header__fila { height: 70px; gap: 20px; }
  .header .buscador { display: flex; flex: 1; max-width: 560px; }
  .header__logo img { width: 38px; height: 38px; }
  .header__marca { font-size: 13.5px; }

  /* Con el campo a la vista arriba, la lupa de la derecha sobra. */
  .header__acciones [data-solo-movil] { display: none; }

  /* El menú lateral sigue existiendo —lleva a las 8 categorías— pero deja de
     ser la única puerta: .nav-web ya expone lo principal. */
  .header .icon-btn[data-menu] { order: -1; }

  .nav-web {
    display: flex; align-items: center; gap: 2px;
    margin-left: auto;
  }
  .nav-web a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 13px; border-radius: 12px;
    font-size: 13.5px; font-weight: 700; letter-spacing: -.015em;
    color: var(--texto-2); white-space: nowrap;
    transition: color var(--transicion), background var(--transicion);
  }
  .nav-web a.activo { color: var(--brand-600); background: var(--brand-050); }

  .contenedor { padding-inline: 28px; }
  .carrusel { margin-inline: -28px; padding-inline: 28px; }

  /* Detalle a dos columnas.
     ────────────────────────────────────────────────────────────────────────
     El marcado es UNO solo, en tres bloques, y el orden del DOM es el que
     necesita el móvil —que es el orden del APK—:

        .det-foto   galería
        .det-compra tags, título, precio, envío, vendedor, barra de compra
        .det-info   características, descripción, compra protegida

     En móvil no hay grid, así que caen en ese orden y la barra de compra se
     ancla al fondo como en la app. Acá se colocan a mano en la retícula para
     que .det-compra suba a la derecha y .det-info quede bajo la foto. Sin la
     colocación explícita, la caja de compra flotaría arriba a la derecha
     lejos del precio, que es lo único que tiene que estar cerca. */
  .detalle-web {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto 1fr;
    gap: 24px 36px;
    align-items: start;
  }
  .detalle-web > .det-foto   { grid-column: 1; grid-row: 1; }
  .detalle-web > .det-compra { grid-column: 2; grid-row: 1 / span 2; }
  .detalle-web > .det-info   { grid-column: 1; grid-row: 2; }

  /* A 16:10 sobre una columna de ~900px la foto ocupa media pantalla. */
  .detalle-web .galeria { aspect-ratio: 4 / 3; max-height: 460px; }

  .detalle-web .barra-compra {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    left: auto; right: auto; bottom: auto;
    z-index: 1;
    /* El corazón comparte fila con "Agregar"; "Comprar ahora" ocupa el ancho
       completo debajo. En columna simple el corazón quedaba solo, colgado. */
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--sombra-1);
  }
  .detalle-web .barra-compra > :last-child { grid-column: 1 / -1; }
  .detalle-web .barra-compra .btn {
    height: 48px; padding: 0 18px; font-size: 14.5px; gap: 9px;
  }

  /* Carrito y checkout: resumen sticky al costado. */
  .col-resumen { position: sticky; top: calc(var(--header-h) + 20px); }

  .drawer { width: min(440px, 100%); }
  .galeria { border-radius: var(--r-lg); overflow: hidden; }

  /* La grilla de categorías respira: 8 tiles en una fila es demasiado apretado
     por encima de tablet. */
  .cats { gap: 14px; }
}

/* ── 5. Escritorio ancho ──────────────────────────────────────────────────── */

@media (min-width: 1280px) {
  .contenedor { width: min(100%, 1280px); }
  .carrusel > * { flex-basis: 214px; }
}

/* ── 6. Impresión ─────────────────────────────────────────────────────────── */
/* La confirmación de compra es lo único que alguien va a querer imprimir. */

@media print {
  .header, .nav, .barra-compra, .drawer, .velo, .nav-web, .toast { display: none !important; }
  .pantalla { padding: 0; animation: none; }
}