@layer theme, base, components, utilities, tienda, tema;
/*
 * Tema "demo": prueba de un diseño premium sobre la plantilla, para la tienda demo.
 * Idea: tienda grande y ordenada (encabezado fuerte, franja de anuncio, mosaicos de categorías)
 * con acabado de marca premium: marfil y tinta en vez de blanco y gris, títulos con serifa,
 * sombras suaves teñidas del color de la tienda y animaciones lentas que se apagan si el
 * comprador pidió menos movimiento. Usa el primario que escoge el dueño en AndinaPOS.
 *
 * Solo se apoya en el contrato de estilos: data-bloque, data-parte, data-variante y tokens --t-*.
 */
@layer tema {
  /* ── Tokens ─────────────────────────────────────────────────────────────────────────── */
  [data-tema="demo"] {
    --tinta-demo: #1b1524;
    --profundo-demo: color-mix(in oklab, var(--t-primario) 55%, #120c1a);
    --brillo-demo: color-mix(in oklab, var(--t-primario) 35%, #ffffff);

    --t-fondo: #faf8f4;
    --t-superficie: #ffffff;
    --t-relleno: #f1ede6;
    --t-borde: #e7e1d7;
    --t-borde-suave: #efeae2;
    --t-borde-fuerte: #d9d1c4;
    --t-texto: var(--tinta-demo);
    --t-texto-medio: #4a4255;
    --t-texto-suave: #6f6679;
    --t-texto-tenue: #9a92a3;

    --t-fuente-titulos: var(--f-fraunces), ui-serif, Georgia, serif;
    --t-fuente-texto: var(--f-manrope), ui-sans-serif, system-ui, sans-serif;

    --t-radio: 1.25rem;
    --t-radio-imagen: 1rem;
    --t-radio-boton: 9999px;
    --t-sombra: 0 1px 2px rgb(27 21 36 / 0.04), 0 10px 30px -14px color-mix(in oklab, var(--t-primario) 35%, transparent);
    --t-sombra-elevada: 0 2px 4px rgb(27 21 36 / 0.05), 0 24px 50px -18px color-mix(in oklab, var(--t-primario) 45%, transparent);
  }

  /* Un resplandor muy suave del color de la tienda arriba de la página. */
  [data-tema="demo"] body {
    /* no-repeat: el fondo del body se pinta en todo el lienzo y, si no, el degradado se repite cada pantalla. */
    background:
      radial-gradient(70rem 32rem at 12% -8rem, color-mix(in oklab, var(--t-primario) 10%, transparent), transparent 70%) no-repeat,
      radial-gradient(50rem 28rem at 95% -6rem, color-mix(in oklab, #d6a756 12%, transparent), transparent 70%) no-repeat;
    background-color: var(--t-fondo);
  }

  /* ── Anuncio: degradado del primario que se desliza despacio ─────────────────────────── */
  /*
   * El degradado va en una capa tres veces más ancha que se desplaza con transform: así lo mueve la
   * tarjeta gráfica. Animar background-position obligaría a repintar la franja en cada cuadro.
   * La capa repite el mismo tramo tres veces; correrla un tercio deja todo igual y el ciclo no salta.
   */
  [data-tema="demo"] [data-bloque="anuncio"] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--profundo-demo);
    color: #fff;
    letter-spacing: 0.02em;
  }
  [data-tema="demo"] [data-bloque="anuncio"]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 300%;
    z-index: -1;
    background: linear-gradient(
      90deg,
      var(--profundo-demo) 0%, var(--t-primario) 16.67%, var(--profundo-demo) 33.33%,
      var(--t-primario) 50%, var(--profundo-demo) 66.67%, var(--t-primario) 83.33%, var(--profundo-demo) 100%
    );
    animation: anuncio-demo 16s linear infinite;
  }
  @keyframes anuncio-demo {
    to {
      transform: translateX(-33.333%);
    }
  }

  /* ── Encabezado: vidrio esmerilado y menú con subrayado que crece ────────────────────── */
  [data-tema="demo"] [data-bloque="encabezado"][data-fondo="blanco"] {
    border-bottom-color: color-mix(in oklab, var(--t-borde) 70%, transparent);
  }
  /* El vidrio esmerilado solo en escritorio: en un celular de gama media cuesta en cada scroll. */
  @media (min-width: 768px) {
    [data-tema="demo"] [data-bloque="encabezado"][data-fondo="blanco"] {
      background: color-mix(in oklab, var(--t-fondo) 78%, transparent);
      backdrop-filter: blur(16px) saturate(1.5);
    }
  }
  [data-tema="demo"] [data-bloque="encabezado"] [data-parte="logo"] {
    letter-spacing: -0.02em;
  }
  [data-tema="demo"] [data-bloque="encabezado"] [data-parte="buscador"] input {
    background: var(--t-superficie);
    border-color: var(--t-borde);
    box-shadow: inset 0 1px 2px rgb(27 21 36 / 0.04);
    transition: box-shadow 0.25s, border-color 0.25s;
  }
  [data-tema="demo"] [data-bloque="encabezado"] [data-parte="buscador"] input:focus {
    border-color: var(--t-primario);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--t-primario) 18%, transparent);
  }
  [data-tema="demo"] [data-parte="menu"] [data-parte="enlace"] {
    position: relative;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  [data-tema="demo"] [data-parte="menu"] [data-parte="enlace"]::after {
    content: "";
    position: absolute;
    inset: auto 0.75rem 0.35rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--t-primario), #d6a756);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  [data-tema="demo"] [data-parte="menu"] [data-parte="enlace"]:hover::after,
  [data-tema="demo"] [data-parte="menu"] [data-parte="enlace"]:focus-visible::after {
    transform: scaleX(1);
  }

  /* ── Títulos de sección: serifa grande con un trazo dorado ───────────────────────────── */
  [data-tema="demo"] :is([data-bloque="vitrina"], [data-bloque="categorias"], [data-bloque="listado"]) [data-parte="titulo"] {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    padding-bottom: 0.6rem;
    position: relative;
  }
  [data-tema="demo"] :is([data-bloque="vitrina"], [data-bloque="categorias"]) [data-parte="titulo"]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3rem;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--t-primario), #d6a756);
  }

  /* ── Hero: la foto se acerca despacio; el botón tiene un destello al pasar ───────────── */
  [data-tema="demo"] [data-bloque="hero"] {
    border-radius: 1.75rem;
    box-shadow: var(--t-sombra-elevada);
  }
  [data-tema="demo"] [data-bloque="hero"] img[data-parte="imagen"],
  [data-tema="demo"] [data-bloque="hero"] [data-parte="imagen"] img {
    animation: acercar-demo 24s ease-in-out infinite alternate;
  }
  @keyframes acercar-demo {
    to {
      transform: scale(1.08);
    }
  }
  [data-tema="demo"] [data-bloque="hero"] [data-parte="titulo"] {
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.02;
    text-shadow: 0 2px 24px rgb(0 0 0 / 0.25);
  }
  [data-tema="demo"] [data-bloque="hero"] [data-parte="subtitulo"] {
    font-size: 1.15em;
  }
  [data-tema="demo"] :is([data-bloque="hero"], [data-bloque="campana"], [data-bloque="texto-imagen"]) [data-parte="boton"] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brillo-demo) -40%, var(--t-primario) 45%, var(--profundo-demo));
    box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--t-primario) 70%, transparent);
    transition: transform 0.25s, box-shadow 0.25s;
  }
  [data-tema="demo"] :is([data-bloque="hero"], [data-bloque="campana"], [data-bloque="texto-imagen"]) [data-parte="boton"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.45) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.7s;
  }
  [data-tema="demo"] :is([data-bloque="hero"], [data-bloque="campana"], [data-bloque="texto-imagen"]) [data-parte="boton"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -10px color-mix(in oklab, var(--t-primario) 80%, transparent);
  }
  [data-tema="demo"] :is([data-bloque="hero"], [data-bloque="campana"], [data-bloque="texto-imagen"]) [data-parte="boton"]:hover::after {
    transform: translateX(120%);
  }

  /* ── Categorías: mosaicos blancos que se levantan, con borde de degradado al pasar ───── */
  [data-tema="demo"] [data-bloque="categorias"] [data-parte="tarjeta"] {
    background:
      linear-gradient(var(--t-superficie), var(--t-superficie)) padding-box,
      linear-gradient(135deg, var(--t-borde), var(--t-borde)) border-box;
    border: 1.5px solid transparent;
    border-radius: var(--t-radio);
    box-shadow: var(--t-sombra);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s, background 0.3s;
  }
  [data-tema="demo"] [data-bloque="categorias"] [data-parte="tarjeta"]:hover {
    transform: translateY(-4px);
    box-shadow: var(--t-sombra-elevada);
    background:
      linear-gradient(var(--t-superficie), var(--t-superficie)) padding-box,
      linear-gradient(135deg, var(--t-primario), #d6a756) border-box;
  }
  [data-tema="demo"] [data-bloque="categorias"] [data-parte="nombre"] {
    font-weight: 700;
  }

  /* ── Tarjetas de producto: superficie blanca, se levantan y la foto respira ─────────── */
  [data-tema="demo"] :is([data-bloque="vitrina"], [data-bloque="listado"]) [data-parte="tarjeta"] {
    background: var(--t-superficie);
    border-radius: var(--t-radio);
    padding: 0.6rem 0.6rem 0.8rem;
    box-shadow: var(--t-sombra);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s;
  }
  [data-tema="demo"] :is([data-bloque="vitrina"], [data-bloque="listado"]) [data-parte="tarjeta"]:hover {
    transform: translateY(-6px);
    box-shadow: var(--t-sombra-elevada);
  }
  [data-tema="demo"] :is([data-bloque="vitrina"], [data-bloque="listado"]) [data-parte="tarjeta"] [data-parte="nombre"] {
    font-weight: 600;
  }
  [data-tema="demo"] :is([data-bloque="vitrina"], [data-bloque="listado"], [data-bloque="ficha"]) [data-parte="precio"] {
    font-family: var(--t-fuente-titulos);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--profundo-demo);
  }
  [data-tema="demo"] [data-parte="tarjeta"] [data-parte="etiqueta"] {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.68rem;
  }

  /* ── Ficha de producto ──────────────────────────────────────────────────────────────── */
  [data-tema="demo"] [data-bloque="ficha"] [data-parte="titulo"] {
    font-weight: 600;
    letter-spacing: -0.025em;
  }
  [data-tema="demo"] [data-bloque="galeria"] [data-parte="imagen"] {
    box-shadow: var(--t-sombra);
  }

  /* ── Pie: tinta profunda con texto claro (los tokens se cambian solo aquí adentro) ──── */
  [data-tema="demo"] [data-bloque="pie"] {
    --t-texto: #ffffff;
    --t-texto-medio: #d5cede;
    --t-texto-suave: #a99fb6;
    --t-borde: rgb(255 255 255 / 0.12);
    --t-borde-fuerte: rgb(255 255 255 / 0.2);
    --t-fondo: rgb(255 255 255 / 0.06);
    --t-primario-texto: var(--brillo-demo);
    background:
      radial-gradient(40rem 20rem at 85% 0%, color-mix(in oklab, var(--t-primario) 30%, transparent), transparent 70%),
      var(--tinta-demo);
    color: var(--t-texto-medio);
    border-top: 0;
  }

  /* ── Las secciones aparecen al llegar a ellas (solo si el navegador sabe hacerlo) ────── */
  @supports (animation-timeline: view()) {
    [data-tema="demo"] :is([data-bloque="vitrina"], [data-bloque="categorias"], [data-bloque="confianza"], [data-bloque="campana"], [data-bloque="texto-imagen"]) {
      animation: aparecer-demo linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
    @keyframes aparecer-demo {
      from {
        opacity: 0.15;
        transform: translateY(2rem);
      }
    }
  }

  /* Quien pidió menos movimiento no ve animaciones. */
  @media (prefers-reduced-motion: reduce) {
    [data-tema="demo"] *,
    [data-tema="demo"] *::after {
      animation: none !important;
      transition: none !important;
    }
  }
}