/* ==========================================================================
   PAGINA PUBLICA DE LA TIENDA: capas y cierre
   Lo que flota sobre la pagina o la cierra: mi lista, avisos, la franja de
   POS Lite, el pie, las opciones del dueño y el cambio de pagina. El orden
   de capas y los tokens viven en catalogo.css.
   ========================================================================== */

@layer componentes {

  /* ======================= Mi lista ======================= */
  #cart-panel {
    position: fixed;
    z-index: 10010;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(420px, 100vw);
    background: var(--cat-surface);
    color: var(--cat-ink);
    box-shadow: -30px 0 70px -40px rgb(0 0 0 / .55);
    translate: 100% 0;
    visibility: hidden;
    transition: translate .34s var(--cat-ease), visibility 0s linear .34s;
  }
  #cart-panel.show { translate: 0 0; visibility: visible; transition: translate .34s var(--cat-ease), visibility 0s; }

  .cat-velo {
    position: fixed;
    inset: 0;
    z-index: 10005;
    background: rgb(15 15 28 / .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  #cart-panel.show + .cat-velo { opacity: 1; pointer-events: auto; }
  .pl-catalog:has(#cart-panel.show),
  .pl-catalog.cat-sin-scroll { overflow: hidden; }

  .cart-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 14px; }
  .cart-header { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
  .cart-header i { color: var(--cat-main-ink); }
  .cart-note {
    display: flex;
    gap: 10px;
    margin: 0 20px 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--cat-tint);
    color: var(--cat-ink-2);
    font-size: 13px;
    line-height: 1.5;
  }
  .cart-note i { margin-top: 3px; color: var(--cat-main-ink); }

  #cart-panel-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px; }
  .cart-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--cat-line);
  }
  .cart-item-name { overflow-wrap: anywhere; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
  .cart-item-precio { color: var(--cat-main-ink); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .remove-item {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: var(--cat-surface-2);
    color: var(--cat-muted);
  }
  .remove-item:hover { background: #fef2f2; color: #b91c1c; }
  .cart-empty { padding: 36px 8px; color: var(--cat-muted); text-align: center; }
  .cart-empty i { display: block; margin-bottom: 10px; font-size: 34px; color: rgb(23 23 43 / .15); }

  .cart-pie { display: grid; gap: 6px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cat-line); }
  .btn-delete-all {
    padding: 8px;
    border: 0;
    background: none;
    color: var(--cat-muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .btn-delete-all:hover { color: #b91c1c; }

  @media (max-width: 640px) {
    #cart-panel {
      top: auto;
      left: 0;
      width: 100%;
      max-height: 88dvh;
      border-radius: 24px 24px 0 0;
      translate: 0 100%;
    }
    #cart-panel::before {
      content: "";
      align-self: center;
      width: 42px;
      height: 5px;
      margin-top: 10px;
      border-radius: 99px;
      background: var(--cat-line);
    }
  }

  /* ======================= Aviso breve ======================= */
  .cart-toast {
    position: fixed;
    z-index: 10030;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 9px;
    /* max-content: con left 50% el ancho disponible es media pantalla y el texto se partia. */
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--cat-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--cat-sh-lg);
    translate: -50% 0;
    animation: cat-aviso 2.3s var(--cat-ease) both;
  }
  .cart-toast i { color: #4ade80; }
  @keyframes cat-aviso {
    0% { opacity: 0; translate: -50% 14px; }
    12%, 85% { opacity: 1; translate: -50% 0; }
    100% { opacity: 0; translate: -50% 6px; }
  }

  /* ======================= Franja de POS Lite ======================= */
  .cat-promo {
    padding-block: 22px;
    border-top: 1px solid var(--cat-line);
    background: linear-gradient(100deg, #fff4ee, #fff 60%);
  }
  .cat-promo__interior { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
  .cat-promo__logo { width: 44px; height: 44px; flex: none; border-radius: 12px; box-shadow: var(--cat-sh-sm); }
  .cat-promo__texto { display: grid; flex: 1 1 260px; color: var(--cat-ink-2); font-size: 14.5px; line-height: 1.45; }
  .cat-promo__texto strong { color: var(--cat-ink); font-size: 15.5px; }
  .cat-promo__boton {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--cat-promo);
    color: #fff;
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 24px -14px var(--cat-promo);
    transition: transform var(--cat-rapido) var(--cat-ease), background-color var(--cat-rapido);
  }
  .cat-promo__boton:hover { transform: translateY(-1px); background: #d9430f; }

  /* ======================= Pie ======================= */
  .cat-pie {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-top: clamp(44px, 6vw, 68px);
    background: var(--cat-ink);
    color: rgb(255 255 255 / .7);
    font-size: 14.5px;
  }
  .cat-pie::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--cat-main), color-mix(in oklab, var(--cat-main) 35%, #fff));
  }
  .cat-pie__fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 1px 1px, rgb(255 255 255 / .1) 1.1px, transparent 1.6px) 0 0 / 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
    mask-image: linear-gradient(180deg, #000, transparent 75%);
  }
  .cat-pie a { text-decoration: none; transition: color var(--cat-rapido); }
  .cat-pie a:hover { color: #fff; }

  .cat-pie__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
    gap: 36px 56px;
    padding-bottom: 40px;
  }
  .cat-pie__tienda { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
  .cat-pie__info { max-width: 44ch; margin-top: 14px; line-height: 1.65; }
  .cat-pie .cat-logo { box-shadow: none; }
  .cat-redes--pie a { background: rgb(255 255 255 / .08); color: #fff; }
  .cat-redes--pie a:hover { background: #fff; color: var(--cat-ink); }

  .cat-pie__titulo { margin-bottom: 14px; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .cat-pie__columna ul { display: grid; gap: 11px; }
  .cat-pie__columna a { display: inline-flex; align-items: baseline; gap: 10px; overflow-wrap: anywhere; }
  .cat-pie__columna i { width: 16px; flex: none; color: rgb(255 255 255 / .45); text-align: center; }

  .cat-pie__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding-block: 20px calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid rgb(255 255 255 / .1);
    font-size: 13px;
  }
  .cat-pie__credito {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 12px;
    border: 1px solid rgb(255 255 255 / .12);
    border-radius: 999px;
    background: rgb(255 255 255 / .05);
  }
  .cat-pie__credito img { width: 18px; height: 18px; border-radius: 5px; }
  .cat-pie__credito strong { color: #fff; }

  @media (max-width: 760px) {
    .cat-pie__grid { grid-template-columns: 1fr 1fr; }
    .cat-pie__marca { grid-column: 1 / -1; }
  }
  @media (max-width: 460px) {
    .cat-pie__grid { grid-template-columns: 1fr; gap: 28px; }
  }

  /* ======================= Aviso de POS Lite ======================= */
  .poslite-popup {
    position: fixed;
    z-index: 9500;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    width: min(320px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid var(--cat-line);
    border-radius: 20px;
    background: var(--cat-surface);
    box-shadow: var(--cat-sh-lg);
    opacity: 0;
    translate: 0 16px;
    visibility: hidden;
    transition: opacity .3s ease, translate .3s var(--cat-ease), visibility 0s linear .3s;
  }
  .poslite-popup.show { opacity: 1; translate: 0 0; visibility: visible; transition: opacity .3s ease, translate .3s var(--cat-ease), visibility 0s; }
  .poslite-popup p { color: var(--cat-ink-2); font-size: 14px; line-height: 1.5; }
  .poslite-popup__marca { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
  .poslite-popup__marca img { border-radius: 7px; }
  .poslite-popup .poslite-popup__titulo { color: var(--cat-ink); font-size: 16px; font-weight: 800; }
  .poslite-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: var(--cat-surface-2);
    color: var(--cat-muted);
  }
  .poslite-popup-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 11px 16px;
    border-radius: 12px;
    background: var(--cat-promo);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
  }
  @media (max-width: 640px) {
    .poslite-popup { right: 16px; left: 16px; width: auto; bottom: calc(16px + env(safe-area-inset-bottom)); }
  }

  /* ======================= Opciones del dueño ======================= */
  .cat-dueno {
    position: fixed;
    z-index: 3000;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 999px;
    background: var(--cat-ink);
    color: #fff;
    font-size: 13px;
    box-shadow: var(--cat-sh-lg);
  }
  .cat-dueno__etiqueta { padding: 0 8px 0 10px; color: rgb(255 255 255 / .7); font-weight: 600; white-space: nowrap; }
  .cat-dueno__accion {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / .1);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  .cat-dueno__accion:hover { background: rgb(255 255 255 / .2); }
  /* Que la pastilla no tape el final del pie. */
  .pl-catalog:has(.cat-dueno) .cat-pie__base { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* Dentro de la vista previa de Mi tienda no hace falta: ya esta en el panel. */
  html.cat-en-marco .cat-dueno { display: none; }
  html.cat-en-marco .pl-catalog:has(.cat-dueno) .cat-pie__base { padding-bottom: 20px; }
  @media (max-width: 560px) {
    .cat-dueno__etiqueta { display: none; }
  }
}

/* ======================= Cambio de pagina =======================
   Navegadores que lo soportan (Chrome y Safari recientes): la pagina se
   funde y la foto del producto tocado "vuela" hasta la ficha. catalogo.js le
   pone el nombre cat-foto solo a esa foto. Anterior/Siguiente deslizan. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .22s; }
  ::view-transition-group(cat-foto) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  ::view-transition-old(cat-foto),
  ::view-transition-new(cat-foto) { height: 100%; object-fit: cover; }

  html:active-view-transition-type(siguiente)::view-transition-old(root) { animation: .28s cubic-bezier(.2, .8, .2, 1) both cat-vt-sale-izq; }
  html:active-view-transition-type(siguiente)::view-transition-new(root) { animation: .28s cubic-bezier(.2, .8, .2, 1) both cat-vt-entra-der; }
  html:active-view-transition-type(anterior)::view-transition-old(root) { animation: .28s cubic-bezier(.2, .8, .2, 1) both cat-vt-sale-der; }
  html:active-view-transition-type(anterior)::view-transition-new(root) { animation: .28s cubic-bezier(.2, .8, .2, 1) both cat-vt-entra-izq; }
}
@keyframes cat-vt-sale-izq { to { opacity: 0; translate: -48px 0; } }
@keyframes cat-vt-entra-der { from { opacity: 0; translate: 48px 0; } }
@keyframes cat-vt-sale-der { to { opacity: 0; translate: 48px 0; } }
@keyframes cat-vt-entra-izq { from { opacity: 0; translate: -48px 0; } }

@media (prefers-reduced-motion: reduce) {
  .pl-catalog *,
  .pl-catalog *::before,
  .pl-catalog *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}