/* ==========================================================================
   PAGINA PUBLICA DE LA TIENDA: productos
   La tarjeta de producto (capa componentes) y la seccion donde se recorren:
   buscador, categorias y rejilla (capa paginas). Se carga despues de
   catalogo-paginas.css en todas las paginas: la ficha y la lista para un
   cliente reusan la tarjeta.
   ========================================================================== */

@layer componentes {

  /* ======================= Tarjeta de producto =======================
     Toda la tarjeta es el enlace a la ficha (el ::after del nombre se estira
     encima). Los botones quedan por arriba de ese enlace. El filtro esconde
     tarjetas con style.display, asi que aqui nunca se fija un display en linea. */
  .card-product {
    position: relative;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: clip;
    border: 1px solid rgb(23 23 43 / .06);
    border-radius: 20px;
    background: var(--cat-surface);
    box-shadow: var(--cat-sh-sm);
    transition: transform .28s var(--cat-ease), box-shadow .28s var(--cat-ease);
  }
  .card-product:has(.card-product__nombre:focus-visible) { outline: 3px solid var(--cat-foco); outline-offset: 3px; }

  .card-product__media {
    position: relative;
    aspect-ratio: 1;
    background: linear-gradient(160deg, var(--cat-surface-2), #ebe5de);
  }
  /* Dibujo de respaldo, detras de la foto: se ve si no hay foto o no carga. */
  .card-product__media::before {
    content: "\f03e";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgb(23 23 43 / .14);
    font: 900 40px "Font Awesome 6 Free";
  }
  .image-container { position: absolute; inset: 0; overflow: hidden; }
  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale .6s var(--cat-ease);
  }
  .image-container img:is([src=""], :not([src]), .is-rota) { display: none; }
  .card-product.is-agotado .image-container img { filter: grayscale(.75); opacity: .85; }

  .btn-cart-circle {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / .94);
    color: var(--cat-ink);
    font-size: 15px;
    box-shadow: var(--cat-sh);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform var(--cat-rapido) var(--cat-ease), background-color var(--cat-rapido), color var(--cat-rapido);
  }
  .btn-cart-circle:active { transform: scale(.94); }
  .card-product.is-en-lista .btn-cart-circle { background: var(--cat-main-ink); color: #fff; }
  /* !important: Font Awesome va fuera de las capas y su content le ganaria. */
  .card-product.is-en-lista .btn-cart-circle i::before { content: "\f00c" !important; }

  .card-product .info { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 2px; }
  .card-product__categoria {
    overflow: hidden;
    color: var(--cat-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .card-product__titulo {
    display: -webkit-box;
    min-height: 2.6em;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .card-product__nombre { color: var(--cat-ink); text-decoration: none; }
  .card-product__nombre::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .card-product__nombre:focus-visible { outline: none; }

  .card-product__precio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    margin-top: auto;
    padding-top: 4px;
  }
  .price-tag { color: var(--cat-main-ink); font-size: 19px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .stock-tag {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--cat-surface-2);
    color: var(--cat-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }
  .stock-tag.is-agotado { background: #fef2f2; color: #b91c1c; }

  .card-product__acciones {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 16px;
    pointer-events: none;
  }
  .card-product__acciones > * { pointer-events: auto; }
  /* El boton principal de la tarjeta: lleva a la ficha. Pesa igual que
     Consultar (mismo alto, relleno) y toma el espacio que sobra. */
  .btn-detalle {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--cat-main-ink);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: filter var(--cat-rapido), transform var(--cat-rapido) var(--cat-ease);
  }
  .btn-detalle span { overflow: hidden; text-overflow: ellipsis; }
  .btn-detalle i { flex: none; font-size: 13px; }
  .btn-detalle:active { transform: scale(.97); }

  /* "Ver detalle" sobre la foto: solo con mouse, al pasar por la tarjeta. En
     pantallas de toque no se pinta: tapaba la foto y la tarjeta ya trae su
     boton "Ver detalle". Un solo renglon, centrada al pie de la foto. */
  .card-product__ver {
    position: absolute;
    z-index: 1;
    inset: auto 0 12px;
    display: none;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: calc(100% - 24px);
    margin-inline: auto;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgb(23 23 43 / .62);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* Lo que se mueve o crece al pasar el mouse. Fuera de este bloque, en un
     celular :hover se queda pegado despues del toque. */
  @media (hover: hover) and (pointer: fine) {
    .card-product:hover { transform: translateY(-3px); box-shadow: var(--cat-sh-lg); }
    .card-product:hover .image-container img { scale: 1.045; }
    .card-product:hover .btn-detalle { filter: brightness(1.12); }
    .btn-cart-circle:hover { transform: scale(1.08); background: var(--cat-main-ink); color: #fff; }

    .card-product__ver {
      display: inline-flex;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity var(--cat-rapido), transform .28s var(--cat-ease);
    }
    .card-product:hover .card-product__ver { opacity: 1; transform: none; }
  }
  /* En una tarjeta angosta la pildora taparia media foto. */
  @container (max-width: 219px) {
    .card-product__ver { display: none; }
  }

  .btn-wsp {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--cat-wsp);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--cat-rapido);
  }
  .btn-wsp i { font-size: 16px; }
  .btn-wsp:hover { background: var(--cat-wsp-hover); color: #fff; }

  /* Hasta 260 px (5 columnas en escritorio, 2 en celular) WhatsApp queda solo
     en icono para que "Ver detalle" quepa completo. */
  @container (max-width: 260px) {
    .btn-wsp { width: 40px; padding: 0; }
    .btn-wsp__texto { display: none; }
  }

  /* Tarjeta angosta (dos columnas en celular). */
  @container (max-width: 200px) {
    .card-product .info { padding: 12px 12px 2px; }
    .card-product__titulo { font-size: 14px; }
    .price-tag { font-size: 17px; }
    .card-product__acciones { padding: 8px 12px 12px; }
    .btn-cart-circle { top: 8px; right: 8px; width: 38px; height: 38px; }
  }

  /* Tarjeta muy angosta (celular de 320 a 375): "Ver detalle" sin el ojo
     para que quepa junto al icono de WhatsApp. */
  @container (max-width: 172px) {
    .card-product__acciones { gap: 6px; padding: 8px 10px 10px; }
    .btn-detalle { padding: 0 6px; font-size: 12.5px; }
    .btn-detalle i { display: none; }
    .btn-wsp { width: 38px; }
  }


  /* ======================= Lista de espera =======================
     Apartado (ambar) o "Sobre pedido" (indigo): el producto sigue a la vista
     y el boton principal es anotarse (docs/lista-espera.md). */
  .card-product__sello {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: var(--cat-sh-sm);
  }
  .card-product.is-sobre-pedido .card-product__sello { background: #e0e7ff; color: #3730a3; }
  .card-product.is-apartado .image-container img { filter: saturate(.7); }
  .stock-tag.is-espera { background: #fff7ed; color: #9a3412; }
  .card-product.is-sobre-pedido .stock-tag.is-espera { background: #eef2ff; color: #3730a3; }
  .card-product__espera { color: var(--cat-muted); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
  .btn-esperar { border: 0; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
  .card-product.is-apartado .btn-esperar { background: #b45309; }
  .card-product.is-sobre-pedido .btn-esperar { background: #4338ca; }
  .card-product .btn-esperar.is-anotado { background: var(--cat-surface-2); color: var(--cat-ink); }
  .btn-esperar:focus-visible { outline: 3px solid var(--cat-foco); outline-offset: 2px; }

  /* ======================= Foto de muestra (catalogo base) =======================
     "Foto ilustrativa" (IA) o el credito de Open Food Facts (CC BY-SA). Discreta,
     pero siempre visible: es lo que la ley y la licencia piden. En la tarjeta va
     sobre la foto, por arriba del enlace estirado para que el credito se pueda
     tocar; en el menu y en la ficha, debajo de la foto. */
  .cat-foto-muestra {
    color: var(--cat-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
  }
  .cat-foto-muestra a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .cat-foto-muestra a:focus-visible { outline: 2px solid var(--cat-foco); outline-offset: 1px; border-radius: 3px; }
  .cat-foto-muestra--tarjeta {
    position: absolute;
    z-index: 2;
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 3px 8px;
    border-radius: 999px;
    background: rgb(23 23 43 / .62);
    color: #fff;
    font-size: 10.5px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .card-product__media:has(.cat-foto-muestra--tarjeta) .card-product__ver { bottom: 38px; }
  .cat-foto-muestra--ficha { display: block; margin-top: 8px; font-size: 12px; }

}

@layer paginas {

  /* ======================= Productos ======================= */
  .cat-productos { padding-top: clamp(28px, 4vw, 48px); scroll-margin-top: var(--cat-cabecera-h); }
  .cat-productos__cuenta { color: var(--cat-muted); font-size: 14px; font-weight: 600; }

  /* Buscador y categorias: se quedan pegados bajo el encabezado mientras se
     recorre la cuadricula. */
  .cat-filtros {
    position: sticky;
    top: var(--cat-cabecera-h);
    z-index: 50;
    margin-bottom: 18px;
    padding-block: 10px;
    background: rgb(250 248 246 / .9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .cat-filtros__interior {
    display: grid;
    grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  .cat-buscador { position: relative; display: flex; align-items: center; }
  .cat-buscador > i { position: absolute; left: 16px; color: var(--cat-muted); pointer-events: none; }
  .cat-buscador input {
    width: 100%;
    height: 48px;
    padding: 0 46px 0 44px;
    border: 1.5px solid var(--cat-line);
    border-radius: 14px;
    background: var(--cat-surface);
    font-size: 15px;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--cat-rapido), box-shadow var(--cat-rapido);
  }
  .cat-buscador input::placeholder { color: #9a98a6; }
  .cat-buscador input::-webkit-search-cancel-button { display: none; }
  .cat-buscador input:focus { outline: none; border-color: var(--cat-main); box-shadow: 0 0 0 4px var(--cat-ring); }
  .cat-buscador__limpiar {
    position: absolute;
    right: 7px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: var(--cat-surface-2);
    color: var(--cat-muted);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cat-rapido);
  }
  .cat-buscador:has(input:not(:placeholder-shown)) .cat-buscador__limpiar { opacity: 1; pointer-events: auto; }

  /* La tira de categorias: el boton "Categorias" (cuando son muchas) y los
     chips deslizables. Las flechas van encimadas en las orillas, solo con
     mouse: asi mostrarlas u ocultarlas no mueve los chips. */
  .cat-tira {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-width: 0;
  }
  .cat-tira > .cat-chips { grid-area: 1 / 2; }
  .cat-tira__todas {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    margin-right: 8px;
    padding: 0 16px 0 14px;
    border: 1.5px solid var(--cat-ink);
    border-radius: 999px;
    background: var(--cat-surface);
    color: var(--cat-ink);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color var(--cat-rapido);
  }
  .cat-tira__todas:hover { background: var(--cat-surface-2); }
  .cat-tira__todas i { font-size: 13px; }
  .cat-tira__actual { max-width: 14ch; overflow: hidden; color: var(--cat-main-ink); text-overflow: ellipsis; }
  .cat-tira__actual::before { content: "· "; color: var(--cat-muted); }

  .cat-tira__flecha { display: none; }
  @media (hover: hover) and (pointer: fine) {
    .cat-tira__flecha:not([hidden]) {
      grid-area: 1 / 2;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid var(--cat-line);
      border-radius: 50%;
      background: var(--cat-surface);
      color: var(--cat-ink);
      font-size: 12px;
      box-shadow: var(--cat-sh);
    }
    .cat-tira__flecha[data-tira-ir="-1"] { justify-self: start; }
    .cat-tira__flecha[data-tira-ir="1"] { justify-self: end; }
    .cat-tira__flecha:hover { border-color: var(--cat-ink); }
  }

  /* Chips deslizables; cada orilla se desvanece solo si de ese lado hay mas
     (catalogo.js pone data-inicio / data-fin en la tira). Sin JS queda el
     desvanecido de la derecha, como siempre. */
  .cat-chips {
    --fi: 0px;
    --ff: 40px;
    display: flex;
    gap: 8px;
    padding: 3px 36px 3px 3px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* El primer chip encaja donde empieza el relleno, no pegado a la orilla. */
    scroll-padding-left: 3px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fi), #000 calc(100% - var(--ff)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--fi), #000 calc(100% - var(--ff)), transparent);
  }
  .cat-chips::-webkit-scrollbar { display: none; }
  .cat-tira[data-inicio="0"] > .cat-chips { --fi: 40px; }
  .cat-tira[data-fin="1"] > .cat-chips { --ff: 0px; }

  .filter-tag {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 7px 0 16px;
    border: 1.5px solid var(--cat-line);
    border-radius: 999px;
    background: var(--cat-surface);
    color: var(--cat-ink-2);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background-color var(--cat-rapido), border-color var(--cat-rapido), color var(--cat-rapido);
  }
  .filter-tag:hover { border-color: color-mix(in oklab, var(--cat-main) 50%, var(--cat-line)); color: var(--cat-ink); }
  .filter-tag__n {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--cat-surface-2);
    color: var(--cat-muted);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .filter-tag.active { background: var(--cat-ink); border-color: var(--cat-ink); color: #fff; }
  .filter-tag.active .filter-tag__n { background: rgb(255 255 255 / .16); color: #fff; }

  .cat-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr));
    gap: clamp(12px, 2vw, 20px);
  }

  /* Las tarjetas aparecen al entrar en pantalla, donde se puede sin JS. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .cat-rejilla > .card-product {
        animation: cat-aparece linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
      }
    }
  }
  @keyframes cat-aparece { from { opacity: 0; translate: 0 22px; } }

  .cat-vacio {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: clamp(32px, 6vw, 56px) 20px;
    border: 1.5px dashed var(--cat-line);
    border-radius: 24px;
    background: var(--cat-surface);
    color: var(--cat-muted);
    text-align: center;
  }
  .cat-vacio__icono {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    border-radius: 20px;
    background: var(--cat-tint);
    color: var(--cat-main-ink);
    font-size: 24px;
  }
  .cat-vacio__titulo { color: var(--cat-ink); font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
  .cat-vacio .cat-btn { margin-top: 14px; }
  /* El dueño con sesion: su catalogo vacio le dice por que y a donde ir. */
  .cat-vacio--dueno { border-style: solid; border-color: var(--cat-main); }
  .cat-vacio__nota { margin-top: 10px; font-size: 13px; }

  @media (max-width: 760px) {
    .cat-filtros__interior { grid-template-columns: 1fr; gap: 10px; }
    /* En celular los chips llegan hasta la orilla de la pantalla; con el boton
       "Categorias" a la izquierda, solo del lado derecho. */
    .cat-chips { margin-inline: calc(var(--cat-margen) * -1); padding-inline: var(--cat-margen) 40px; scroll-padding-left: var(--cat-margen); }
    .cat-tira:has(.cat-tira__todas) > .cat-chips { margin-left: 0; padding-left: 3px; scroll-padding-left: 3px; }
    .cat-tira__actual { display: none; }
    .cat-buscador input { height: 46px; }
  }
  @media (max-width: 560px) {
    .cat-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .card-product { border-radius: 16px; }
  }

}