@layer theme, base, components, utilities, tienda, tema;
/*
 * Tema "merkapet": la farmacia veterinaria de perros y gatos (merkapet.co). No copia un sitio: es
 * una tienda alegre y limpia con su marca. Naranja de acento y en los botones (con texto oscuro:
 * blanco sobre ese naranja no se lee), azul para enlaces y la franja de arriba, verde de apoyo;
 * letra Nunito, todo redondeado. El hero va en una tarjeta muy redondeada con huellas, huesitos y un
 * corazón alrededor (dibujos propios en esta carpeta, incrustados por hoja-del-tema.ts), el
 * antetítulo del hero es un sticker girado y los títulos de sección llevan un subrayado curvo.
 *
 * Solo se apoya en el contrato de estilos: data-bloque, data-parte, data-variante y tokens --t-*.
 * Los tokens de color y letra los repite Apariencia en AndinaPOS, para que el carrito y el checkout
 * (donde el tema no se carga) se vean de la misma marca.
 */
@layer tema {
  /* ── Paleta y letras ───────────────────────────────────────────────────────────────── */
  [data-tema="merkapet"] {
    --naranja-mk: #fea12d;
    --naranja-vivo-mk: #ff8a1f;
    --naranja-quemado-mk: #c2410c;
    --azul-mk: #22577a;
    --verde-mk: #57cc99;
    --tinta-mk: #0e0c19;
    --gris-mk: #3c3a47;
    --crema-mk: #fff6ea;
    --durazno-mk: #ffe7c7;

    --t-fondo: #ffffff;
    --t-superficie: var(--crema-mk);
    --t-relleno: #fdf1e1;
    --t-borde: #f1e2cf;
    --t-borde-suave: #f7ecdd;
    --t-borde-fuerte: #e6cfb2;
    --t-texto: var(--tinta-mk);
    --t-texto-medio: var(--gris-mk);
    --t-texto-suave: #5d5a6a;
    --t-texto-tenue: #8a8796;
    --t-primario: var(--naranja-mk);
    --t-sobre-primario: var(--tinta-mk);
    --t-primario-texto: var(--azul-mk);
    --t-secundario: var(--azul-mk);
    --t-sobre-secundario: #ffffff;
    --t-oferta: var(--naranja-quemado-mk);
    --t-sobre-oferta: #ffffff;
    --t-fuente-titulos: var(--f-nunito), ui-sans-serif, system-ui, sans-serif;
    --t-fuente-texto: var(--f-nunito), ui-sans-serif, system-ui, sans-serif;
    --t-peso-titulos: 800;
    --t-radio: 1.5rem;
    --t-radio-imagen: 1.25rem;
    --t-radio-boton: 9999px;
    --t-sombra: 0 2px 10px rgb(14 12 25 / 0.06);
    --t-sombra-elevada: 0 14px 30px -10px rgb(14 12 25 / 0.18);
  }

  /* Botones de la marca: naranja con texto oscuro, se levantan un poco al pasar. */
  [data-tema="merkapet"] [data-parte="boton"],
  [data-tema="merkapet"] [data-parte="agregar-carrito"] [data-variante="agregar"] {
    font-weight: 800;
    box-shadow: 0 8px 16px -10px rgb(194 65 12 / 0.7);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }
  [data-tema="merkapet"] [data-parte="boton"]:hover,
  [data-tema="merkapet"] [data-parte="agregar-carrito"] [data-variante="agregar"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -10px rgb(194 65 12 / 0.7);
    background-color: var(--naranja-vivo-mk);
    opacity: 1;
  }

  /* ── Franja de arriba y encabezado ─────────────────────────────────────────────────── */
  [data-tema="merkapet"] [data-bloque="anuncio"] {
    background: var(--azul-mk);
    color: #ffffff;
    font-weight: 700;
  }
  [data-tema="merkapet"] [data-bloque="encabezado"] [data-parte="menu"] {
    font-weight: 700;
  }
  [data-tema="merkapet"] [data-bloque="encabezado"] [data-parte="buscador"] {
    border-radius: 9999px;
  }

  /* ── Títulos de sección: subrayado curvo naranja ───────────────────────────────────── */
  [data-tema="merkapet"] :is([data-bloque="vitrina"], [data-bloque="categorias"]) > * > [data-parte="titulo"],
  [data-tema="merkapet"] [data-bloque="categorias"] > [data-parte="titulo"] {
    display: inline-block;
    padding-bottom: 0.7rem;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' fill='none'%3E%3Cpath d='M3 10C25 3 52 2 72 5s34 4 45-1' stroke='%23fea12d' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 5.5rem 0.7rem no-repeat;
  }

  /* ── Hero: tarjeta muy redondeada con huellas, huesitos y un corazón alrededor ──────── */
  [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"],
  [data-tema="merkapet"] [data-bloque="hero"][data-variante="imagen-completa"]:not([data-ancho="completo"]) {
    position: relative;
    isolation: isolate;
    border-radius: 2.5rem;
  }
  [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"] {
    padding: 1.25rem 1.25rem 2rem;
    background:
      radial-gradient(circle at 6% 100%, rgb(87 204 153 / 0.2) 0 8rem, transparent 8.1rem),
      linear-gradient(140deg, var(--crema-mk) 0%, var(--durazno-mk) 100%);
  }
  /* Los adornos: dos grupos, arriba a la izquierda y abajo a la derecha, detrás del contenido. */
  [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"]::before,
  [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"]::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
  }
  [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"]::before {
    top: 0.9rem;
    left: 0.9rem;
    width: 9rem;
    height: 7rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23fea12d'%3E%3Cellipse cx='18' cy='22' rx='6.5' ry='8.5' transform='rotate(-18 18 22)'/%3E%3Cellipse cx='30' cy='14' rx='6.5' ry='8.5' transform='rotate(-4 30 14)'/%3E%3Cellipse cx='43' cy='16' rx='6.5' ry='8.5' transform='rotate(12 43 16)'/%3E%3Cellipse cx='52' cy='29' rx='6' ry='7.8' transform='rotate(30 52 29)'/%3E%3Cpath d='M33 30c-8 0-17 10-17 18 0 6 5 9 10 8 3-1 5-2 7-2s4 1 7 2c5 1 10-2 10-8 0-8-9-18-17-18z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' fill='%2322577a'%3E%3Cpath d='M14 4a7 7 0 0 0-6.6 9.3A7 7 0 1 0 14 26.6c1.4-1.3 3.2-2.1 5.1-2.1h25.8c1.9 0 3.7.8 5.1 2.1a7 7 0 1 0 6.6-13.3A7 7 0 1 0 50 5.4c-1.4 1.3-3.2 2.1-5.1 2.1H19.1c-1.9 0-3.7-.8-5.1-2.1A7 7 0 0 0 14 4z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23fea12d'%3E%3Cellipse cx='18' cy='22' rx='6.5' ry='8.5' transform='rotate(-18 18 22)'/%3E%3Cellipse cx='30' cy='14' rx='6.5' ry='8.5' transform='rotate(-4 30 14)'/%3E%3Cellipse cx='43' cy='16' rx='6.5' ry='8.5' transform='rotate(12 43 16)'/%3E%3Cellipse cx='52' cy='29' rx='6' ry='7.8' transform='rotate(30 52 29)'/%3E%3Cpath d='M33 30c-8 0-17 10-17 18 0 6 5 9 10 8 3-1 5-2 7-2s4 1 7 2c5 1 10-2 10-8 0-8-9-18-17-18z'/%3E%3C/svg%3E");
    background-size: 2.6rem, 3rem 1.5rem, 1.6rem;
    background-position: 0 0, 4.2rem 1.4rem, 1.6rem 4.4rem;
    opacity: 0.35;
    transform: rotate(-8deg);
  }
  [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"]::after {
    right: 1.2rem;
    bottom: 0.8rem;
    width: 10rem;
    height: 5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30' fill='%2357cc99'%3E%3Cpath d='M16 29S2 20.5 2 10.5A7.5 7.5 0 0 1 16 6.6 7.5 7.5 0 0 1 30 10.5C30 20.5 16 29 16 29z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23fea12d'%3E%3Cellipse cx='18' cy='22' rx='6.5' ry='8.5' transform='rotate(-18 18 22)'/%3E%3Cellipse cx='30' cy='14' rx='6.5' ry='8.5' transform='rotate(-4 30 14)'/%3E%3Cellipse cx='43' cy='16' rx='6.5' ry='8.5' transform='rotate(12 43 16)'/%3E%3Cellipse cx='52' cy='29' rx='6' ry='7.8' transform='rotate(30 52 29)'/%3E%3Cpath d='M33 30c-8 0-17 10-17 18 0 6 5 9 10 8 3-1 5-2 7-2s4 1 7 2c5 1 10-2 10-8 0-8-9-18-17-18z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' fill='%2322577a'%3E%3Cpath d='M14 4a7 7 0 0 0-6.6 9.3A7 7 0 1 0 14 26.6c1.4-1.3 3.2-2.1 5.1-2.1h25.8c1.9 0 3.7.8 5.1 2.1a7 7 0 1 0 6.6-13.3A7 7 0 1 0 50 5.4c-1.4 1.3-3.2 2.1-5.1 2.1H19.1c-1.9 0-3.7-.8-5.1-2.1A7 7 0 0 0 14 4z'/%3E%3C/svg%3E");
    background-size: 1.9rem, 2.2rem, 2.8rem 1.4rem;
    background-position: 0 2.4rem, 3rem 0.3rem, 6.6rem 2.6rem;
    opacity: 0.55;
  }
  [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"] [data-parte="titulo"] {
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"] [data-parte="subtitulo"]:not([data-variante="antetitulo"]) {
    font-size: 1.125rem;
    color: var(--gris-mk);
  }
  /* La foto: marco blanco grueso, esquinas muy redondas y una sombra suave. */
  [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"] [data-parte="imagen"] {
    border: 6px solid #ffffff;
    border-radius: 2rem;
    box-shadow: var(--t-sombra-elevada);
  }
  [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"] [data-parte="boton"] {
    height: 3.25rem;
    padding-inline: 2rem;
    font-size: 1.05rem;
  }

  /* El antetítulo es un sticker: círculo verde girado, encima de la esquina de la foto. */
  [data-tema="merkapet"] [data-bloque="hero"] [data-variante="antetitulo"] {
    position: absolute;
    z-index: 2;
    top: 0.25rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.25rem;
    height: 5.25rem;
    margin: 0;
    padding: 0.5rem;
    border: 3px dashed rgb(255 255 255 / 0.85);
    border-radius: 9999px;
    background: var(--verde-mk);
    box-shadow: 0 0 0 4px var(--verde-mk), 0 8px 16px -6px rgb(14 12 25 / 0.35);
    color: var(--tinta-mk);
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-align: center;
    opacity: 1;
    transform: rotate(-14deg);
  }

  @media (max-width: 767px) {
    /* En el celular la foto va primero (se ve al entrar) y el sticker sobre su esquina. */
    [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"] > :has([data-parte="imagen"]) {
      order: -1;
    }
    [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"] {
      gap: 1.25rem;
    }
    [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"]::before {
      top: auto;
      bottom: 1rem;
      left: auto;
      right: 0.5rem;
      transform: rotate(10deg) scale(0.8);
    }
    [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"]::after {
      display: none;
    }
  }
  @media (min-width: 768px) {
    [data-tema="merkapet"] [data-bloque="hero"][data-variante="dividido"] {
      padding: 3rem 3rem 3rem 3.5rem;
      border-radius: 3rem;
    }
    [data-tema="merkapet"] [data-bloque="hero"] [data-variante="antetitulo"] {
      top: 1.5rem;
      right: auto;
      left: 50%;
      width: 6.5rem;
      height: 6.5rem;
      font-size: 0.8rem;
    }
  }

  /* El hero de foto completa (si el dueño escoge esa variante): la misma tarjeta, sin adornos. */
  [data-tema="merkapet"] [data-bloque="hero"][data-variante="imagen-completa"]:not([data-ancho="completo"]) {
    border-radius: 2.5rem;
  }

  /* ── Franja de confianza: íconos en círculos de color ──────────────────────────────── */
  [data-tema="merkapet"] [data-bloque="confianza"] {
    background: #ffffff;
    border: 2px solid var(--t-borde-suave);
    border-radius: 2rem;
    box-shadow: var(--t-sombra);
  }
  [data-tema="merkapet"] [data-bloque="confianza"] [data-parte="icono"] {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    background: var(--durazno-mk);
    color: var(--naranja-quemado-mk);
    box-shadow: none;
  }
  [data-tema="merkapet"] [data-bloque="confianza"] li:nth-child(4n + 2) [data-parte="icono"] {
    background: #dbeaf3;
    color: var(--azul-mk);
  }
  [data-tema="merkapet"] [data-bloque="confianza"] li:nth-child(4n + 3) [data-parte="icono"] {
    background: #d9f5e8;
    color: #1d7a52;
  }
  [data-tema="merkapet"] [data-bloque="confianza"] li:nth-child(4n + 4) [data-parte="icono"] {
    background: #ece7fb;
    color: #5b3fb8;
  }
  [data-tema="merkapet"] [data-bloque="confianza"] [data-parte="titulo"] {
    font-weight: 800;
  }

  /* ── Categorías: tarjetas que se levantan, con la cantidad en una píldora ──────────── */
  [data-tema="merkapet"] [data-bloque="categorias"] [data-parte="tarjeta"] {
    border: 2px solid var(--t-borde-suave);
    border-radius: 1.5rem;
    background: #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  [data-tema="merkapet"] [data-bloque="categorias"] [data-parte="tarjeta"]:hover {
    transform: translateY(-4px);
    border-color: var(--naranja-mk);
    box-shadow: var(--t-sombra-elevada);
  }
  [data-tema="merkapet"] [data-bloque="categorias"] [data-parte="nombre"] {
    font-weight: 800;
  }

  /* ── Tarjetas de producto: fondo suave, se levantan al pasar el mouse ──────────────── */
  [data-tema="merkapet"] [data-parte="tarjeta"][data-variante] {
    border-radius: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  [data-tema="merkapet"] [data-parte="tarjeta"][data-variante="fondo"] {
    background: var(--crema-mk);
  }
  [data-tema="merkapet"] [data-parte="tarjeta"][data-variante]:hover {
    transform: translateY(-5px);
    box-shadow: var(--t-sombra-elevada);
  }
  [data-tema="merkapet"] [data-parte="tarjeta"][data-variante] [data-parte="imagen"] {
    background: #ffffff;
    border-radius: 1.1rem;
  }
  [data-tema="merkapet"] [data-parte="tarjeta"] [data-parte="nombre"] {
    font-weight: 700;
  }
  [data-tema="merkapet"] [data-parte="tarjeta"] [data-parte="precio"] {
    font-size: 1.125rem;
    font-weight: 900;
  }

  /* La etiqueta del descuento: una pastilla naranja quemado, un poco girada. */
  [data-tema="merkapet"] [data-parte="etiqueta"][data-variante="descuento"],
  [data-tema="merkapet"] [data-parte="etiqueta"][data-variante="oferta"] {
    font-weight: 900;
    letter-spacing: 0.02em;
    box-shadow: 0 3px 8px -2px rgb(194 65 12 / 0.5);
  }
  [data-tema="merkapet"] [data-parte="tarjeta"] [data-parte="etiqueta"][data-variante="descuento"] {
    font-size: 0.8rem;
    padding: 0.3rem 0.65rem;
    transform: rotate(-6deg);
  }

  /* ── Cuenta regresiva: píldora oscura con las cifras en cajitas naranja ───────────── */
  [data-tema="merkapet"] [data-parte="cuenta-regresiva"] {
    background: var(--tinta-mk);
    color: #ffffff;
    padding: 0.45rem 0.9rem;
    font-weight: 700;
  }
  [data-tema="merkapet"] [data-parte="cuenta-regresiva"] [data-parte="cifra"] {
    display: inline-block;
    min-width: 1.9em;
    margin-inline: 0.1em;
    padding: 0.1em 0.3em;
    border-radius: 0.5rem;
    background: var(--naranja-mk);
    color: var(--tinta-mk);
    font-weight: 900;
    text-align: center;
  }

  /* ── La franja naranja "Compromiso con la salud de tus mascotas" (fondo: acento) ───── */
  [data-tema="merkapet"] [data-fondo="acento"] {
    --t-texto: var(--tinta-mk);
    --t-texto-medio: #2a2633;
    --t-primario-texto: var(--tinta-mk);
    position: relative;
    padding: 1.5rem;
    border-radius: 2.5rem;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23ffffff' fill-opacity='0.22'%3E%3Cellipse cx='18' cy='22' rx='6.5' ry='8.5' transform='rotate(-18 18 22)'/%3E%3Cellipse cx='30' cy='14' rx='6.5' ry='8.5' transform='rotate(-4 30 14)'/%3E%3Cellipse cx='43' cy='16' rx='6.5' ry='8.5' transform='rotate(12 43 16)'/%3E%3Cellipse cx='52' cy='29' rx='6' ry='7.8' transform='rotate(30 52 29)'/%3E%3Cpath d='M33 30c-8 0-17 10-17 18 0 6 5 9 10 8 3-1 5-2 7-2s4 1 7 2c5 1 10-2 10-8 0-8-9-18-17-18z'/%3E%3C/svg%3E") right 1.5rem top 1.2rem / 5rem no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23ffffff' fill-opacity='0.22'%3E%3Cellipse cx='18' cy='22' rx='6.5' ry='8.5' transform='rotate(-18 18 22)'/%3E%3Cellipse cx='30' cy='14' rx='6.5' ry='8.5' transform='rotate(-4 30 14)'/%3E%3Cellipse cx='43' cy='16' rx='6.5' ry='8.5' transform='rotate(12 43 16)'/%3E%3Cellipse cx='52' cy='29' rx='6' ry='7.8' transform='rotate(30 52 29)'/%3E%3Cpath d='M33 30c-8 0-17 10-17 18 0 6 5 9 10 8 3-1 5-2 7-2s4 1 7 2c5 1 10-2 10-8 0-8-9-18-17-18z'/%3E%3C/svg%3E") left 45% bottom -1.2rem / 3.5rem no-repeat,
      linear-gradient(120deg, #ffb341 0%, var(--naranja-mk) 45%, #ff7e33 100%);
    box-shadow: 0 18px 40px -18px rgb(255 126 51 / 0.65);
    text-align: left;
  }
  [data-tema="merkapet"] [data-fondo="acento"] [data-parte="titulo"] {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1.1;
  }
  [data-tema="merkapet"] [data-fondo="acento"] [data-parte="imagen"] {
    border: 6px solid #ffffff;
    border-radius: 2rem;
    box-shadow: 0 12px 24px -12px rgb(14 12 25 / 0.45);
  }
  /* Sobre el naranja, el botón va oscuro (el naranja sobre naranja no se ve). */
  [data-tema="merkapet"] [data-fondo="acento"] [data-parte="boton"] {
    background: var(--tinta-mk);
    color: #ffffff;
    box-shadow: 0 8px 16px -10px rgb(0 0 0 / 0.6);
  }
  [data-tema="merkapet"] [data-fondo="acento"] [data-parte="boton"]:hover {
    background: var(--azul-mk);
  }
  @media (min-width: 768px) {
    [data-tema="merkapet"] [data-fondo="acento"] {
      padding: 2.75rem 3.5rem;
      border-radius: 3rem;
    }
  }

  /* ── Campaña: la misma tarjeta redondeada ──────────────────────────────────────────── */
  [data-tema="merkapet"] [data-bloque="campana"] {
    border-radius: 2.5rem;
  }

  /* ── Ficha del producto ────────────────────────────────────────────────────────────── */
  [data-tema="merkapet"] [data-bloque="ficha"] [data-parte="titulo"] {
    line-height: 1.15;
  }
  [data-tema="merkapet"] [data-bloque="ficha"] [data-parte="precio"] {
    font-weight: 900;
  }

  /* ── Pie: azul de la marca, con texto claro ────────────────────────────────────────── */
  [data-tema="merkapet"] [data-bloque="pie"] {
    --t-texto: #ffffff;
    --t-texto-medio: rgb(255 255 255 / 0.86);
    --t-texto-suave: rgb(255 255 255 / 0.74);
    --t-texto-tenue: rgb(255 255 255 / 0.6);
    --t-borde: rgb(255 255 255 / 0.18);
    --t-borde-suave: rgb(255 255 255 / 0.12);
    --t-primario-texto: #ffd29a;
    background: var(--azul-mk);
    color: var(--t-texto);
    border-top: 0;
  }
  /* Durazno y no naranja: el naranja sobre este azul no llega al contraste de 4.5. */
  [data-tema="merkapet"] [data-bloque="pie"] [data-parte="titulo"] {
    color: #ffd29a;
    font-weight: 800;
  }
  /* El logo del pie va sobre una píldora blanca: su borde oscuro no se pierde en el azul. */
  [data-tema="merkapet"] [data-bloque="pie"] [data-parte="logo"] {
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    background: #ffffff;
  }
}