/*
 * Asamblea Café — capa de marca.
 *
 * Traducción del Brand Book (03 Identidad Visual) a los tokens que consumen
 * los ViewComponents y las vistas. Cambiar un valor aquí re-tematiza el sitio
 * entero; ninguna vista debería escribir un hex de marca a mano.
 *
 * 03.2 Paleta: bases negro / blanco / gris con acentos en el rojizo emblema,
 * azul eléctrico y morado. El emblema es el color de acción (botones, enlaces
 * activos); el negro carga el peso editorial (hero, footer, tipografía).
 * 03.3 Tipografía: títulos en Instrument Serif, escritos como oración (solo
 * la primera letra en mayúscula); texto corrido en Vend Sans (Arial de
 * respaldo). El brand book pedía Quokka en mayúsculas; el cliente la cambió.
 */

/* ---------------------------------------------------------------------------
 * Tipografía — ver public/fonts/README.md para licencias
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: "Vend Sans";
  src: url(/fonts/vend-sans-variable.woff2) format("woff2");
  font-weight: 300 700; /* fuente variable, eje wght */
  font-style: normal;
  font-display: swap;
}

/* Títulos. Instrument Serif solo tiene peso 400 (normal e itálica): los
   títulos no se ponen en negritas, o el navegador la engordaría a mano. */
@font-face {
  font-family: "Instrument Serif";
  src: url(/fonts/instrument-serif-regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url(/fonts/instrument-serif-italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Paleta base (03.2) */
  --color-ink: #000000;
  --color-paper: #ffffff;
  --color-bone: #e8e4e1;
  --color-silver: #b8b5b0;

  /* Acentos (03.2) */
  --color-emblema: #a12025;   /* rojizo emblema de Asamblea */
  --color-electrico: #1721ff; /* azul eléctrico */
  --color-morado: #9060ba;    /* morado */

  /* Semánticos — modo claro */
  --color-primary: var(--color-emblema);
  --color-primary-foreground: var(--color-paper);
  --color-primary-hover: #7f191d;
  --color-secondary: var(--color-bone);
  --color-secondary-foreground: var(--color-ink);
  --color-accent: var(--color-electrico);
  --color-accent-foreground: var(--color-paper);
  --color-background: #f2efec;
  --color-foreground: var(--color-ink);
  --color-muted: var(--color-bone);
  --color-muted-foreground: #5f5c58;
  --color-border: #d8d3ce;
  --color-destructive: #c0261c;
  --color-destructive-foreground: var(--color-paper);
  --color-success: #286349;
  --color-success-foreground: var(--color-paper);
  --color-warning: #8a5a10;
  --color-warning-foreground: var(--color-paper);
  --color-card: var(--color-paper);
  --color-card-foreground: var(--color-ink);
  --color-sidebar: var(--color-paper);
  --color-sidebar-foreground: var(--color-ink);
  --color-footer: var(--color-ink);
  --color-footer-foreground: var(--color-bone);
  /* Escenario de producto: el fondo liso con spotlight del brand book (03.4).
     Se mueve con el tema a propósito —en oscuro la página ya es negra, así que
     un escenario negro puro desaparecería y la foto quedaría flotando. */
  --color-stage: var(--color-ink);
  --color-stage-foreground: var(--color-bone);

  /* Tipografía (03.3) */
  --font-sans: "Vend Sans", Arial, Helvetica, system-ui, sans-serif;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-heading: var(--font-sans);

  /* Radios — esquinas suaves como las del logotipo, sin llegar a la píldora */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* Sombras — el peso lo cargan los filetes, no el volumen (03.1: editorial) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 16px -6px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 16px 32px -12px rgba(0, 0, 0, 0.18), 0 4px 8px -4px rgba(0, 0, 0, 0.08);
}

/* Modo oscuro — el "negroni de la noche" del brand book: fondo negro puro,
   texto hueso y el emblema aclarado para que el rojo siga leyéndose. */
.dark {
  --color-primary: #cf3339;
  --color-primary-foreground: var(--color-paper);
  --color-primary-hover: #e0454a;
  --color-secondary: #1c1c1c;
  --color-secondary-foreground: var(--color-bone);
  --color-accent: #5b7cff;
  --color-accent-foreground: var(--color-ink);
  --color-background: var(--color-ink);
  --color-foreground: var(--color-bone);
  --color-muted: #1c1c1c;
  --color-muted-foreground: #9a968f;
  --color-border: #2c2c2c;
  --color-destructive: #e8564b;
  --color-destructive-foreground: var(--color-ink);
  --color-success: #5aa47f;
  --color-success-foreground: var(--color-ink);
  --color-warning: #d09a3c;
  --color-warning-foreground: var(--color-ink);
  --color-card: #141414;
  --color-card-foreground: var(--color-bone);
  --color-sidebar: var(--color-ink);
  --color-sidebar-foreground: var(--color-bone);
  /* Un punto por encima del fondo, para que el escenario siga leyéndose
     como panel sobre la página negra. */
  --color-stage: #141414;
  --color-stage-foreground: var(--color-bone);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.6), 0 1px 2px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 16px -6px rgba(0, 0, 0, 0.7), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 32px -12px rgba(0, 0, 0, 0.75), 0 4px 8px -4px rgba(0, 0, 0, 0.6);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Smooth color transitions when toggling dark mode */
html {
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}

/*
 * ---------------------------------------------------------------------------
 * Marca — Asamblea Café
 * ---------------------------------------------------------------------------
 * Los tokens viven en theme.css; aquí solo se aplican las reglas tipográficas
 * del brand book (03.3) que ninguna utilidad de Tailwind cubre.
 */

/* Un encabezado cualquiera (el admin, formularios de cuenta) queda en Vend
   Sans; la serif de títulos entra solo con .brand-display. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/*
 * Títulos con la voz de la marca —hero, encabezados de sección, nombres de
 * producto, títulos de página— en Instrument Serif y escritos como oración:
 * solo la primera letra en mayúscula. No hay text-transform: el texto va así
 * en la plantilla y en los datos. Peso 400, el único que trae la fuente.
 */
.brand-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Ojo tipográfico: entre más grande el título, menos aire entre letras. */
.brand-display-lg {
  letter-spacing: -0.02em;
}

/*
 * Botones y rótulos de acción ("Agregar al carrito", "Ver café"): Vend Sans
 * en negritas y mayúsculas. No son títulos, así que no pasan a la serif.
 */
.brand-action {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 0.95;
}

/* Antetítulos y etiquetas tipo laboratorio (03.5 Elementos Gráficos). */
.brand-eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.18em;
  font-size: 0.6875rem;
}

/*
 * Cenefa "TOMA CAFÉ": el patrón de la marca repetido en banda horizontal.
 * El PNG es blanco sobre transparente, así que se pinta con mask para que
 * tome el color del contenedor y funcione en claro y en oscuro.
 *
 * El recorrido de la animación es EXACTAMENTE un mosaico
 * (--brand-marquee-w, derivado del alto por la proporción del PNG:
 * 1739 × 220), así que el ciclo cierra sin costura.
 *
 * Va delgada y rápida: acompaña al inicio, no le quita el protagonismo.
 */
.brand-marquee {
  --brand-marquee-h: clamp(1.25rem, 2.6vw, 1.75rem);
  --brand-marquee-w: calc(var(--brand-marquee-h) * 1739 / 220);
  height: var(--brand-marquee-h);
  background-color: currentColor;
  -webkit-mask-image: var(--brand-marquee-image);
  mask-image: var(--brand-marquee-image);
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: 0 center;
  mask-position: 0 center;
}

@media (prefers-reduced-motion: no-preference) {
  .brand-marquee {
    animation: brand-marquee-scroll 6s linear infinite;
  }
}

@keyframes brand-marquee-scroll {
  to {
    -webkit-mask-position: calc(-1 * var(--brand-marquee-w)) center;
    mask-position: calc(-1 * var(--brand-marquee-w)) center;
  }
}

/*
 * Chapa giratoria del hero: el aro de texto da vueltas y el isotipo se queda
 * quieto, para que la "A" nunca se lea de cabeza.
 *
 * El aro y el isotipo comparten la misma celda del grid, así que se apilan
 * centrados sin posicionamiento absoluto. Eso importa: esta hoja se carga
 * DESPUÉS de Tailwind, así que un `position` o un `display` declarado aquí le
 * ganaría a las utilidades que colocan la chapa en la plantilla.
 */
.brand-badge > * {
  grid-area: 1 / 1;
}

.brand-badge-ring {
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .brand-badge-ring {
    animation: brand-badge-spin 26s linear infinite;
  }
}

@keyframes brand-badge-spin {
  to {
    transform: rotate(360deg);
  }
}

/*
 * Escenario de producto: el fondo liso con spotlight que pide el brand book
 * para producto terminado (03.4). Lo comparten el escaparate del inicio, la
 * retícula de la tienda, la ficha y el carrito, para que la bolsa se vea igual
 * en todos lados.
 *
 * Solo pinta el fondo: el tamaño, la posición y el recorte los pone la
 * plantilla (ver la nota de orden de carga en docs/MARCA.md).
 */
.brand-stage {
  background-color: var(--color-stage);
  background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.14), transparent 68%);
}

/*
 * Cuadro de producto: gris apenas sobre la página (las fotos de la ficha),
 * con la bolsa sin fondo flotando encima; al pasar el cursor el gris sube
 * (lo pidió el cliente). Sale del texto, así que funciona igual en los dos
 * temas.
 */
.product-tile {
  background-color: color-mix(in srgb, var(--color-foreground) 4%, var(--color-background));
  transition: background-color 0.3s ease;
}

/* En la retícula de la tienda la bolsa flota sobre la página: el cuadro no
   se ve hasta pasar el cursor, cuando aparece el gris de abajo. */
.product-tile.product-tile-float {
  background-color: transparent;
}

.group:hover .product-tile,
.group:focus-visible .product-tile {
  background-color: color-mix(in srgb, var(--color-foreground) 11%, var(--color-background));
}

/*
 * Fotos de la ficha: cada una se asienta al entrar en pantalla, un zoom que
 * el scroll va soltando. Es animación ligada al scroll (animation-timeline),
 * sin JS: el navegador que no la conoce muestra la foto quieta, y quien pide
 * menos movimiento también. Solo en escritorio, donde las fotos van apiladas.
 */
@keyframes gallery-settle {
  from {
    transform: scale(1.14);
    opacity: 0.35;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .gallery-photo > * {
      animation: gallery-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
  }
}

/*
 * Texto de Daily. Action Text entrega el HTML de Trix: párrafos como <div>
 * con <br>, títulos como <h1> (el único nivel que Trix ofrece), citas, listas
 * y fotos en <figure>. Preflight de Tailwind borra todo eso, así que aquí se
 * le devuelve con la voz de la marca: Vend Sans para leer, display en
 * mayúsculas para los títulos y las citas, el emblema en los enlaces.
 */
.brand-prose {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-foreground);
}

.brand-prose .trix-content > * + * {
  margin-top: 1.15em;
}

.brand-prose h1 {
  margin-top: 2em;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.05;
}

.brand-prose blockquote {
  margin: 2em 0;
  padding-left: 1.1em;
  border-left: 1.5px solid var(--color-primary);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.3em;
  line-height: 1.15;
}

.brand-prose a {
  border-bottom: 1.5px solid var(--color-primary);
  transition: border-color 0.16s ease;
}

.brand-prose a:hover {
  border-color: var(--color-foreground);
}

.brand-prose strong {
  font-weight: 600;
}

.brand-prose ul {
  list-style: disc;
  padding-left: 1.25em;
}

.brand-prose ol {
  list-style: decimal;
  padding-left: 1.25em;
}

.brand-prose li + li {
  margin-top: 0.35em;
}

.brand-prose pre {
  overflow-x: auto;
  padding: 1em;
  background-color: var(--color-muted);
  font-size: 0.85em;
  line-height: 1.5;
}

.brand-prose figure {
  margin: 2em 0;
}

.brand-prose figure img {
  width: 100%;
  height: auto;
}

.brand-prose figcaption {
  margin-top: 0.6em;
  font-size: 0.8em;
  color: var(--color-muted-foreground);
}

/*
 * Pista del escaparate: el deslizamiento es scroll-snap del navegador (las
 * utilidades snap-x / overflow-x-auto viven en la plantilla). Aquí solo se
 * esconde la barra de desplazamiento, que debajo de una diapositiva a todo lo
 * ancho se ve como un defecto.
 *
 * Se esconde el control, no el desplazamiento: la pista sigue siendo scrollable
 * con el dedo, la rueda y el teclado.
 */
.brand-slider-track {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge heredado */
}

.brand-slider-track::-webkit-scrollbar {
  display: none;
}

/*
 * Superficie del disco detrás de cada bolsa de café en el inicio: en lugar de un color liso,
 * un degradado de malla hecho con la paleta cruda (03.2) y dos texturas
 * encima: grano fino y la trama de semitono de la taza, que se desvanece desde
 * una esquina. Todo sale de tokens, así que no hay un hex de marca aquí.
 *
 * Son dos piezas. La variante (.brand-surface-negroni, -electrico, -metalico,
 * -humo) va en la tarjeta y solo define variables: la paleta y --surface-fg,
 * el color del texto que va directo sobre la superficie, que así hereda todo
 * lo de adentro. .brand-surface es la capa que las pinta; va aparte para que
 * la bolsa pueda asomar por fuera del cuadro.
 *
 * Las texturas van en ::before y ::after con z-index -1 dentro de un contexto
 * aislado: quedan sobre el degradado y debajo del contenido. La plantilla pone
 * la posición y el redondeo de la capa; esto no declara position ni display en
 * ella, por el orden de carga con Tailwind.
 */
.brand-surface-negroni,
.brand-surface-electrico,
.brand-surface-humo,
.brand-surface-metalico {
  --surface-fg: var(--color-paper);
  --surface-dots: color-mix(in srgb, var(--color-ink) 38%, transparent);
}

.brand-surface {
  isolation: isolate;
  background-color: var(--surface-color, var(--color-ink));
  background-image: var(--surface-image, none);
}

.brand-surface::before,
.brand-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

/* Trama de semitono: puntos que se apagan hacia el centro. */
.brand-surface::before {
  background-image: radial-gradient(circle, var(--surface-dots) 1.1px, transparent 1.7px);
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(75% 95% at 100% 100%, #000, transparent 70%);
  mask-image: radial-gradient(75% 95% at 100% 100%, #000, transparent 70%);
}

/* Grano: ruido fractal en gris, fundido con overlay. */
.brand-surface::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.55;
}

/* Negroni: el emblema encendido hacia arriba y el morado entrando por abajo. */
.brand-surface-negroni {
  --surface-color: var(--color-emblema);
  --surface-image:
    radial-gradient(60% 80% at 8% 12%, color-mix(in srgb, var(--color-emblema) 62%, var(--color-paper)), transparent 70%),
    radial-gradient(55% 75% at 95% 95%, var(--color-morado), transparent 72%),
    radial-gradient(45% 60% at 70% 0%, color-mix(in srgb, var(--color-morado) 55%, var(--color-electrico)), transparent 70%),
    radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--color-ink) 70%, transparent), transparent 70%);
}

/* Eléctrico: el azul de la marca con un halo claro y el morado de fondo. */
.brand-surface-electrico {
  --surface-color: var(--color-electrico);
  --surface-image:
    radial-gradient(55% 75% at 15% 20%, color-mix(in srgb, var(--color-electrico) 55%, var(--color-paper)), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, var(--color-morado), transparent 70%),
    radial-gradient(55% 70% at 100% 0%, color-mix(in srgb, var(--color-ink) 65%, transparent), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, color-mix(in srgb, var(--color-electrico) 60%, var(--color-ink)), transparent 75%);
}

/* Humo: morado de negroni con brasa de emblema y una sombra de tinta. */
.brand-surface-humo {
  --surface-color: var(--color-morado);
  --surface-image:
    radial-gradient(55% 70% at 85% 12%, color-mix(in srgb, var(--color-morado) 55%, var(--color-paper)), transparent 70%),
    radial-gradient(60% 80% at 5% 95%, var(--color-emblema), transparent 70%),
    radial-gradient(50% 65% at 0% 0%, color-mix(in srgb, var(--color-ink) 60%, transparent), transparent 70%),
    radial-gradient(45% 55% at 100% 100%, color-mix(in srgb, var(--color-electrico) 70%, var(--color-morado)), transparent 70%);
}

/* Metálico: el "fondo metálico" del brief. Plata cepillada con dos reflejos
   en diagonal; el texto encima pasa a tinta. */
.brand-surface-metalico {
  --surface-fg: var(--color-ink);
  --surface-dots: color-mix(in srgb, var(--color-ink) 22%, transparent);
  --surface-color: var(--color-silver);
  --surface-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-paper) 7%, transparent) 0 1px, transparent 1px 3px),
    linear-gradient(115deg, transparent 18%, color-mix(in srgb, var(--color-paper) 75%, transparent) 34%, transparent 50%),
    linear-gradient(115deg, transparent 56%, color-mix(in srgb, var(--color-paper) 45%, transparent) 64%, transparent 72%),
    conic-gradient(from 210deg at 35% 55%,
      var(--color-bone),
      var(--color-silver),
      color-mix(in srgb, var(--color-silver) 55%, var(--color-ink)),
      var(--color-bone),
      var(--color-silver),
      color-mix(in srgb, var(--color-silver) 70%, var(--color-ink)),
      var(--color-bone));
}

/*
 * Puertas del catálogo en el inicio: una cuadrícula de cuadros, uno por
 * categoría, con tipografía grande, un producto flotando en medio y el
 * emblema llenando el cuadro al pasar el cursor (la idea de Montecoyote, con
 * la voz de la casa).
 *
 * Los filetes de 1.5px son el fondo del contenedor (.brand-doors) asomando
 * por el hueco entre cuadros, así que nunca se duplican donde dos se tocan.
 * Ninguna de las dos declara display ni position: los pone la plantilla (ver
 * la nota de orden de carga en docs/MARCA.md).
 */
.brand-doors {
  gap: 1.5px;
  background-color: var(--color-foreground);
  border-block: 1.5px solid var(--color-foreground);
}

.brand-door {
  background-color: var(--color-background);
  transition: background-color 0.16s ease, color 0.16s ease;
}

/* Un cuadro sobre hueso, fijo en los dos temas: la taza de semitono pide
   fondo claro para que la trama se lea. Al pasar el cursor gana el emblema
   (la regla de :hover es más específica). */
.brand-door-bone {
  background-color: var(--color-bone);
  color: var(--color-ink);
}

.brand-door-bone .brand-door-muted {
  color: color-mix(in srgb, var(--color-ink) 62%, transparent);
}

.brand-door:hover,
.brand-door:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

/* El producto flota: sube y baja despacio, cada uno con su inclinación
   (--door-tilt) y a destiempo (animation-delay en la plantilla). */
.brand-door-float {
  transform: rotate(var(--door-tilt, -4deg));
}

@media (prefers-reduced-motion: no-preference) {
  .brand-door-float {
    animation: brand-door-float 6s ease-in-out infinite;
  }
}

@keyframes brand-door-float {
  0%, 100% { transform: translateY(0) rotate(var(--door-tilt, -4deg)); }
  50% { transform: translateY(-0.65rem) rotate(calc(var(--door-tilt, -4deg) * -0.4)); }
}

.brand-door:hover .brand-door-muted,
.brand-door:focus-visible .brand-door-muted {
  color: color-mix(in srgb, var(--color-primary-foreground) 75%, transparent);
}

/*
 * Dark-mode compatibility layer for Tailwind utility classes that don't yet
 * use theme variables. Always-dark surfaces (e.g. the site footer) are scoped
 * out via :not([data-theme-static]).
 */
.dark .bg-white:not([data-theme-static]) { background-color: var(--color-card); }
.dark .bg-white\/80:not([data-theme-static]) { background-color: color-mix(in srgb, var(--color-card) 80%, transparent); }
.dark .bg-gray-50:not([data-theme-static]),
.dark .bg-slate-50:not([data-theme-static]) { background-color: var(--color-muted); }
.dark .bg-gray-100:not([data-theme-static]),
.dark .bg-slate-100:not([data-theme-static]) { background-color: var(--color-muted); }

.dark .text-gray-900:not([data-theme-static]),
.dark .text-slate-900:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-800:not([data-theme-static]),
.dark .text-slate-800:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-700:not([data-theme-static]),
.dark .text-slate-700:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-600:not([data-theme-static]),
.dark .text-slate-600:not([data-theme-static]) { color: var(--color-muted-foreground); }
.dark .text-gray-500:not([data-theme-static]),
.dark .text-slate-500:not([data-theme-static]) { color: var(--color-muted-foreground); }
.dark .text-gray-400:not([data-theme-static]),
.dark .text-slate-400:not([data-theme-static]) { color: var(--color-muted-foreground); }

.dark .border-gray-200:not([data-theme-static]),
.dark .border-slate-200:not([data-theme-static]) { border-color: var(--color-border); }
.dark .border-gray-300:not([data-theme-static]),
.dark .border-slate-300:not([data-theme-static]) { border-color: var(--color-border); }

/*
 * Admin sidebar — fixed full-viewport column.
 * Off-canvas on mobile, permanently visible on desktop (≥1024px).
 * Toggled on mobile via the `open` state class from the mobile-menu controller.
 * On desktop we force `display: flex` so the controller's `hidden` toggling
 * (used for the public navbar mobile menu) can't take the sidebar down.
 */
.admin-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  transform: translateX(-100%);
  transition: transform 200ms ease-out;
}

.admin-sidebar.open {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .admin-sidebar {
    display: flex !important;
    width: 16rem;
    max-width: none;
    transform: translateX(0);
    transition: none;
  }
}

/* Admin sidebar — stays white in light mode, uses themed surface in dark mode. */
.dark aside[data-mobile-menu-target="menu"][data-theme-static] {
  background-color: var(--color-sidebar);
  color: var(--color-sidebar-foreground);
}

/* Calendar view toggle buttons */
.active-view {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.active-view:hover {
  opacity: 0.9;
}

.inactive-view {
  border: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-foreground);
}

.inactive-view:hover {
  background-color: var(--color-secondary);
}

/* Pagy pagination */
.pagy.series-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pagy.series-nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-md, 0.5rem);
  color: var(--color-foreground);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.pagy.series-nav > a:hover:not([aria-disabled="true"]) {
  background-color: var(--color-muted);
}

.pagy.series-nav > a[aria-current="page"] {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.pagy.series-nav > a[aria-disabled="true"]:not([aria-current="page"]) {
  color: var(--color-muted-foreground);
  cursor: default;
  opacity: 0.5;
}

.pagy.series-nav > a[role="separator"] {
  opacity: 1;
  letter-spacing: 0.1em;
}

.pagy.series-nav > a[aria-label="Previous"],
.pagy.series-nav > a[aria-label="Next"] {
  font-size: 0;
  overflow: hidden;
}

.pagy.series-nav > a[aria-label="Previous"]::before,
.pagy.series-nav > a[aria-label="Next"]::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.pagy.series-nav > a[aria-label="Previous"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
}

.pagy.series-nav > a[aria-label="Next"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/*
 * ---------------------------------------------------------------------------
 * Barra transparente sobre el hero del inicio
 * ---------------------------------------------------------------------------
 * nav-overlay pone data-at-top mientras la página está arriba. La barra pierde
 * fondo y filete y su texto pasa a blanco: se sobrescriben los tokens dentro
 * de la barra, así que el logotipo, los enlaces, el carrito y el tema cambian
 * sin tocar sus clases. --nav-ink y compañía guardan los valores de siempre
 * (se calculan en el header, antes de sobrescribir) para devolvérselos al
 * desplegable de la tienda, que sigue siendo una hoja sólida. Con el menú
 * móvil abierto la barra vuelve a ser sólida.
 */
.site-nav {
  --nav-ink: var(--color-foreground);
  --nav-muted-ink: var(--color-muted-foreground);
  --nav-muted: var(--color-muted);
  transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}

.site-nav[data-at-top]:not(:has([aria-expanded="true"])) {
  background-color: transparent;
  border-color: transparent;
  backdrop-filter: none;
}

.site-nav[data-at-top]:not(:has([aria-expanded="true"])) .site-nav-bar {
  --color-foreground: #ffffff;
  --color-muted-foreground: rgb(255 255 255 / 0.78);
  --color-muted: rgb(255 255 255 / 0.12);
}

.site-nav[data-at-top] .site-nav-bar [data-dropdown-target="menu"] {
  --color-foreground: var(--nav-ink);
  --color-muted-foreground: var(--nav-muted-ink);
  --color-muted: var(--nav-muted);
}

/*
 * ---------------------------------------------------------------------------
 * Botón de la marca: la pastilla
 * ---------------------------------------------------------------------------
 * Todos los botones del sitio público comparten la forma del botón del hero
 * (lo pidió el cliente): pastilla, mayúsculas chicas con aire. Cambia solo el
 * color:
 *   .brand-pill-primary  emblema lleno (agregar al carrito, pagar, enviar)
 *   .brand-pill-outline  filete del color del texto, se llena al pasar
 *   .brand-pill-glass    filete blanco sobre velo de vidrio, sobre foto o negro
 *
 * Va en la capa components (la misma que declara Tailwind, antes de
 * utilities): así una utilidad en el mismo elemento —w-full, h-12, hidden,
 * flex-1— le gana, y la plantilla sigue decidiendo el tamaño y si se ve.
 */
@layer components {
  .brand-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    padding: 0.875rem 1.75rem;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .brand-pill:disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  .brand-pill-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
  }

  .brand-pill-primary:hover {
    background-color: var(--color-primary-hover);
  }

  .brand-pill-outline {
    border-color: var(--color-foreground);
    background-color: transparent;
    color: var(--color-foreground);
  }

  .brand-pill-outline:hover {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }

  .brand-pill-glass {
    border-color: rgb(255 255 255 / 0.6);
    background-color: rgb(255 255 255 / 0.1);
    color: #ffffff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .brand-pill-glass:hover {
    border-color: #ffffff;
    background-color: #ffffff;
    color: #000000;
  }
}