:root {
  --bg: #14101A;
  --bg-card: #1D1723;
  --bg-card-2: #271F2E;
  --text: #F4E4E8;
  --text-dim: #C9B8BE;
  --pink: #FF3D82;
  --orange: #FF8A3D;
  --grad: linear-gradient(115deg, var(--pink) 8%, var(--orange) 92%);
  --border: rgba(244, 228, 232, 0.09);
  --green: #25D366;
  --amber: #ffb020;
  --red: #ff5d5d;
  --blue: #5ba8ff;
  --gold: #C9A15A;
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

.wrap {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 20px;
}

/* BARRA DE PROGRESO DE SCROLL */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad);
  z-index: 101;
  transition: width .12s linear;
}

/* NAV */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* 2026-09-24 (Ronda 25): este backdrop-filter era la causa REAL del bug
     reportado del menu movil (borroso, nada clickeable, en Android e
     iPhone por igual). Por especificacion de CSS, un backdrop-filter (u
     otro filter/transform/will-change) en un ancestro crea un nuevo
     "containing block" para sus descendientes con position:fixed -- y
     #navLinks (el menu que se abre desde la derecha, position:fixed,
     pensado para cubrir toda la pantalla) es descendiente de este
     <header>. Con el blur puesto, el menu quedaba encerrado/recortado
     dentro de la caja chica del header en vez de cubrir la pantalla
     entera, mezclado con el propio desenfoque -- de ahi el sintoma. Se
     sube un poco la opacidad (0.9 -> 0.96) para compensar visualmente la
     perdida del efecto vidrio esmerilado sin volver a usar backdrop-filter.
  */
  background: rgba(11, 10, 15, 0.96);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

header.scrolled {
  background: rgba(11, 10, 15, 0.97);
  border-bottom-color: var(--border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  max-width: 1150px;
  margin: 0 auto;
  transition: padding .35s ease;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 2026-09-24: pedido de Gustavo -- el logo/nombre de la tienda
     desaparecia (se achicaba hasta 0px, sin el "..." del ellipsis porque
     eso no funciona bien en un flex container con icono+texto) en anchos
     intermedios de escritorio (~750-1150px), porque el menu de navegacion
     (8 links) no entraba en una sola fila y el flexbox le sacaba todo el
     espacio al logo en vez de al menu. Con flex-shrink:0 el logo ya nunca
     se aplasta -- el arreglo real (que el menu pase a hamburguesa antes de
     que se apreten) esta en el media query de mas abajo. */
  flex-shrink: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
}

.product-price,
.cart-total-row,
.confirm-box #orderTotal {
  font-family: var(--font-mono);
}

.order-num,
#orderNum {
  font-family: var(--font-mono) !important;
  letter-spacing: .02em;
}

.brand-badge {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 10px rgba(255, 61, 130, 0.45));
  flex-shrink: 0;
  transition: transform .25s ease, filter .25s ease;
  cursor: default;
}

.brand-badge:hover {
  transform: scale(1.12) rotate(-4deg);
  filter: drop-shadow(0 5px 16px rgba(255, 61, 130, 0.65));
}

.brand-badge svg,
.brand-badge img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 10px;
  transition: width .35s ease, height .35s ease;
}

header.scrolled .brand-badge,
header.scrolled .brand-badge svg,
header.scrolled .brand-badge img {
  width: 36px;
  height: 36px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: .89rem;
  color: var(--text-dim);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--border);
  padding: 5px;
  border-radius: 999px;
}

.nav-links a {
  position: relative;
  padding: 8px 16px;
  border-radius: 999px;
  transition: color .25s ease, background .3s ease, box-shadow .3s ease;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .07);
  }
}

.nav-links a.active {
  color: #1a0b12;
  font-weight: 700;
  background: var(--grad);
  box-shadow: 0 4px 14px rgba(255, 79, 154, .35);
}

/* Boton hamburguesa (menu movil) */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  flex-shrink: 0;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .3s ease, opacity .3s ease;
}

.menu-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
  /* 2026-09-24 (Ronda 25): CAUSA REAL del menu movil roto (borroso, nada
     clickeable, confirmado en vivo con elementFromPoint contra
     melollevoscz.pages.dev): #navLinks (z-index:55) esta ANIDADO adentro
     de <header> (position:sticky + z-index:50), y position:sticky con
     z-index crea su PROPIO contexto de apilamiento -- eso significa que
     el z-index:55 de #navLinks solo se compara DENTRO de header, nunca
     contra elementos de afuera. Al nivel superior (donde vive .nav-backdrop,
     que es hermano de <header>, no su hijo), lo unico que cuenta es el
     z-index del header mismo (50) -- y como este backdrop estaba en 54
     (mayor a 50), terminaba pintandose ENCIMA de header entero, incluido
     el menu abierto adentro, tapandolo con el desenfoque + velo oscuro y
     bloqueando los clics (pointer-events:auto) sobre los links. Bajado a
     45 (menor a los 50 del header, pero mayor que el contenido normal de
     la pagina de abajo) para que el header con el menu abierto SIEMPRE
     quede arriba del velo, sin importar el z-index interno de #navLinks. */
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.cart-btn {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .cart-btn:hover {
    background: var(--grad);
    border-color: transparent;
    color: #1a0b12;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 79, 154, .35);
  }

  .cart-btn:hover svg {
    transform: scale(1.1) rotate(-8deg);
  }
}

.cart-btn:active {
  transform: scale(.92);
}

.cart-btn svg {
  width: 20px;
  height: 20px;
  transition: transform .25s ease;
}

@keyframes cartBump {
  0% {
    transform: scale(1) rotate(0);
  }

  30% {
    transform: scale(1.22) rotate(-10deg);
  }

  55% {
    transform: scale(.94) rotate(6deg);
  }

  100% {
    transform: scale(1) rotate(0);
  }
}

.cart-btn.bump {
  animation: cartBump .5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .cart-btn.bump {
    animation: none;
  }
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--grad);
  color: #1a0b12;
  font-size: .7rem;
  font-weight: 800;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 79, 154, .5);
}

/* 2026-09-24: este breakpoint pasa de 700px a 1180px -- pedido de
   Gustavo, bug real confirmado en vivo (redimensionando el navegador
   contra melollevoscz.pages.dev): entre ~750px y ~1150px de ancho, los
   8 links del menu (Productos...Mis puntos) mas el logo ya no entraban
   juntos en una sola fila, y el logo se llevaba todo el recorte (hasta
   desaparecer del todo a los ~850px). El menu hamburguesa de celular ya
   estaba bien resuelto (ver fix de Ronda 25 cont.), asi que la solucion
   real es activarlo un poco antes en vez de dejar esa franja de anchos
   "intermedios" sin cubrir. */
@media (max-width:1180px) {
  .brand {
    font-size: 1rem;
    max-width: 60vw;
  }

  .menu-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    max-height: 100vh;
    width: min(80vw, 300px);
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: var(--bg-card);
    border: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
    padding: 96px 28px 28px;
    box-shadow: -20px 0 50px rgba(0, 0, 0, .4);
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.32, .72, 0, 1);
    z-index: 55;
    /* 2026-09-24: con los links nuevos (gift card / armar outfit / mis
       puntos) el menu ya no entraba entero en pantallas chicas -- no
       habia overflow, asi que los ultimos items quedaban cortados/no
       clickeables. Ahora scrollea solo el menu si hace falta. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links.open {
    transform: translateX(0);
  }

  .nav-links a {
    width: 100%;
    padding: 14px 16px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--border);
    border-radius: 10px;
  }

  .nav-links a.active {
    box-shadow: none;
  }

  .nav-backdrop {
    display: block;
  }

  .nav-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  border: none;
  transition: transform .15s ease, opacity .15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.magnetic {
  transition: transform .2s ease-out, opacity .15s ease;
  will-change: transform;
}

@media (pointer: coarse) {
  .magnetic {
    transition: transform .15s ease, opacity .15s ease;
  }
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--grad);
  color: #1a0b12;
  box-shadow: 0 8px 22px rgba(255, 79, 154, 0.3);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-sm {
  padding: 8px 14px;
  font-size: .82rem;
  border-radius: 999px;
}

/* 2026-09-23 (ronda 14): boton "Volver" real para las paginas propias
   (checkout.html, puntos.html, armar-outfit.html) -- antes era un link
   subrayado suelto al pie de pagina; ahora vive arriba en el header,
   al lado del logo, como un boton con icono siempre visible sin
   scrollear. */
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, color .15s, transform .15s;
  white-space: nowrap;
}

.back-btn:hover {
  border-color: var(--pink);
  color: var(--pink);
  transform: translateX(-2px);
}

.back-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.back-btn span {
  display: none;
}

@media (min-width: 420px) {
  .back-btn span {
    display: inline;
  }
}

.btn-danger {
  background: rgba(255, 93, 93, 0.15);
  color: #ff8a8a;
  border: 1px solid rgba(255, 93, 93, 0.3);
}

.btn-block {
  width: 100%;
}

.btn svg {
  width: 18px;
  height: 18px;
}

/* PROMO */
.promo {
  background: var(--grad);
  color: #1a0b12;
  font-weight: 700;
  text-align: center;
  padding: 10px 16px;
  font-size: .9rem;
}

/* HERO (compacto) */
.hero {
  position: relative;
  padding: 56px 20px 40px;
  text-align: center;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 500px;
  background: radial-gradient(60% 60% at 30% 20%, rgba(255, 79, 154, 0.22), transparent 70%),
    radial-gradient(50% 50% at 80% 10%, rgba(255, 154, 82, 0.18), transparent 70%);
  pointer-events: none;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.hero-orb-a {
  top: -120px;
  left: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 61, 130, .35), transparent 70%);
  animation: orbFloatA 14s ease-in-out infinite;
}

.hero-orb-b {
  top: 40px;
  right: -100px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255, 138, 61, .3), transparent 70%);
  animation: orbFloatB 17s ease-in-out infinite;
}

@keyframes orbFloatA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 40px) scale(1.1); }
}

@keyframes orbFloatB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-25px, 30px) scale(1.08); }
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

.hero-in {
  opacity: 0;
  animation: heroFadeUp .8s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orb {
    animation: none;
  }

  .hero-in {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .82rem;
  color: var(--text-dim);
  margin-bottom: 18px;
}

.eyebrow b {
  color: #fff;
}

h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.5px;
  margin-bottom: 14px;
  text-wrap: balance;
}

h1 span {
  background: var(--grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerText 6s ease-in-out infinite;
}

@keyframes shimmerText {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

@media (prefers-reduced-motion: reduce) {
  h1 span {
    animation: none;
  }
}

.hero p.lead {
  max-width: 560px;
  margin: 0 auto 26px;
  color: var(--text-dim);
  font-size: 1.02rem;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* SECTIONS */
section {
  padding: 56px 20px;
}

.section-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 36px;
}

.section-head .tag {
  color: var(--pink);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.section-head h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  margin-top: 8px;
  font-weight: 800;
}

.section-head p {
  color: var(--text-dim);
  margin-top: 10px;
}

/* PROMO BANNER (comunidad VIP) */
.promo-banner {
  position: relative;
  overflow: hidden;
  padding: 64px 20px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.promo-banner::before {
  content: "";
  position: absolute;
  inset: -15% -10% auto auto;
  width: 62%;
  height: 150%;
  background: var(--grad);
  opacity: .12;
  clip-path: polygon(32% 0, 100% 0, 66% 100%, 0% 100%);
  pointer-events: none;
}

.promo-banner::after {
  content: "";
  position: absolute;
  left: -12%;
  bottom: -35%;
  width: 42%;
  height: 85%;
  background: radial-gradient(closest-side, rgba(255, 138, 61, .16), transparent 70%);
  pointer-events: none;
}

.promo-banner-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
  max-width: 1150px;
  margin: 0 auto;
}

@media (max-width:820px) {
  .promo-banner-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.promo-banner-copy .tag {
  color: var(--pink);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.promo-banner-copy h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 12px 0 14px;
  text-wrap: balance;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.promo-banner-copy p {
  color: var(--text-dim);
  max-width: 480px;
  margin-bottom: 26px;
}

.promo-banner-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.trust-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  padding: 9px 15px;
  border-radius: 999px;
  font-size: .8rem;
  color: var(--text-dim);
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}

.trust-chip:hover {
  transform: translateY(-2px);
  border-color: var(--pink);
  color: var(--text);
}

.trust-chip svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--pink);
}

.chat-mock {
  position: relative;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  max-width: 380px;
  margin: 0 auto;
  transform: rotate(-1.4deg);
}

.chat-mock-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.chat-mock-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--grad);
  color: #1a0b12;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-mock-head strong {
  display: block;
  font-size: .92rem;
}

.chat-mock-head span {
  display: block;
  font-size: .72rem;
  color: var(--text-dim);
}

.chat-mock-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bubble {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
  font-size: .82rem;
  max-width: 88%;
  align-self: flex-start;
  line-height: 1.45;
}

.bubble-out {
  align-self: flex-end;
  background: rgba(37, 211, 102, 0.14);
  border-color: rgba(37, 211, 102, 0.3);
  border-radius: 14px 14px 4px 14px;
}

/* 2026-09-22: antes era un cuadro con degrade + icono generico de bolsa
   (antes de tener una foto real para este mockup del inicio) -- ahora
   muestra la foto real de la cartera, recortada a 4:3 como una imagen de
   WhatsApp de verdad. */
.bubble-img {
  align-self: flex-start;
  width: 64%;
  aspect-ratio: 4/3;
  border-radius: 14px 14px 14px 4px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.bubble-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 2026-09-22: vitrina publica de videos de TikTok (ver loadTiktokShowcase
   en app.js) -- tarjetas tipo "reel" (9:16, como se ven en TikTok de
   verdad) que llevan al video real en tiktok.com. */
.tiktok-showcase {
  padding: 70px 0;
}

/* 2026-09-22: con auto-fill + columnas 1fr, si la pantalla es mas ancha
   de lo que hacen falta las tarjetas reales, igual se crean columnas
   "vacias" de mas que igual reparten el ancho -- eso empujaba las
   tarjetas hacia la izquierda con un hueco a la derecha en vez de verse
   centradas. Con un maximo fijo en vez de 1fr (las columnas ya no
   "reclaman" todo el ancho sobrante) + justify-content:center (centra la
   fila cuando sobra espacio), las tarjetas quedan centradas sin importar
   cuantos videos haya. */
.tiktok-grid {
  display: grid;
  /* auto-fill deja las columnas "vacias" creadas de mas ocupando lugar
     (por eso las tarjetas se veian pegadas a la izquierda con hueco a la
     derecha, aun con justify-content:center) -- auto-fit colapsa esas
     columnas vacias a 0, asi el conjunto real de tarjetas queda centrado
     de verdad sin importar cuantos videos haya. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 200px));
  justify-content: center;
  gap: 18px;
  margin-top: 32px;
}

.tiktok-card {
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 9/16;
  background: var(--bg-card-2, #1a1015);
  border: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}

/* 2026-09-22: efecto al pasar el mouse o seleccionar (foco por teclado /
   tap en celular) -- se levanta un poco, agarra sombra rosa de marca y
   la imagen hace un leve zoom adentro, sin mover el layout de la grilla
   (el translateY/scale es visual, no afecta el flujo). */
.tiktok-card:hover,
.tiktok-card:focus-visible,
.tiktok-card:active {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 16px 32px -12px rgba(255, 61, 130, 0.45);
  border-color: var(--pink, #ff3d82);
  outline: none;
}

.tiktok-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.tiktok-card:hover img,
.tiktok-card:focus-visible img,
.tiktok-card:active img {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .tiktok-card,
  .tiktok-card img {
    transition: none;
  }
  .tiktok-card:hover,
  .tiktok-card:focus-visible,
  .tiktok-card:active {
    transform: none;
  }
  .tiktok-card:hover img,
  .tiktok-card:focus-visible img,
  .tiktok-card:active img {
    transform: none;
  }
}

.tiktok-card-noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.tiktok-card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tiktok-card-title {
  font-size: .78rem;
  line-height: 1.3;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tiktok-card-open {
  font-size: .68rem;
  color: rgba(255, 255, 255, 0.75);
}

/* CATEGORY FILTER */
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 32px;
}

.filter-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: .85rem;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, color .18s ease;
}

.filter-chip:hover:not(.active) {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--text);
  transform: translateY(-1px);
}

.filter-chip.active {
  background: var(--grad);
  color: #1a0b12;
  border-color: transparent;
  font-weight: 700;
}

/* Agrupacion de productos por categoria (vista "Todos") */
.category-group {
  max-width: 1150px;
  margin: 0 auto 40px;
}

.category-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.category-group-head h3 {
  font-size: 1.15rem;
  font-weight: 800;
}

.category-group-count {
  color: var(--text-dim);
  font-size: .8rem;
}

/* PRODUCT GRID */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1150px;
  margin: 0 auto;
}

@media (max-width:950px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:520px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/* FILA-CARRUSEL (2026-09-23, ronda 18): fila horizontal deslizable
   reutilizada para "Destacados" (arriba del catalogo, productos con
   descuento) y para cada categoria cuando se ve "Todos" -- pedido de
   Gustavo tomando como referencia MagicToolbox MagicScroll, pero sin
   tocar en nada las tarjetas de producto (mismo estilo, mismo hover,
   mismo mini-carrusel de fotos de cada producto) ni la cuadricula normal
   que se ve al filtrar una sola categoria. */
.carousel-row-wrap {
  position: relative;
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 40px;
}

.carousel-row-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 4px 2px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-row-track::-webkit-scrollbar {
  display: none;
}

.carousel-row-track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}

.carousel-row-item {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
}

@media (max-width:950px) {
  .carousel-row-item { width: 200px; }
  .carousel-row-wrap { padding: 0 34px; }
}

@media (max-width:520px) {
  .carousel-row-item { width: 168px; }
  .carousel-row-wrap { padding: 0 28px; }
}

.carousel-row-nav {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(20, 16, 26, 0.65);
  color: #fff;
  border: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .7;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 3;
}

.carousel-row-nav:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.08);
}

.carousel-row-nav.prev { left: 0; }
.carousel-row-nav.next { right: 0; }

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, border-color .2s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
}

.product-img {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  background: var(--bg-card-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
  touch-action: pan-y;
}

/* 2026-09-23 (ronda 13): cuando el producto tiene mas de 1 foto, el mouse
   se convierte en "manito" (grab/grabbing) para dejar claro que se puede
   arrastrar o scrollear con la rueda para pasar de foto -- ver
   bindCarousel() en assets/app.js. Sin esto, cursor:zoom-in (heredado de
   arriba) sugeria solo "click para ampliar", no "hay mas fotos". */
.product-img.has-carousel {
  cursor: grab;
  touch-action: pan-x pan-y;
}

.product-img.has-carousel.is-dragging {
  cursor: grabbing;
}

.product-img.has-carousel.is-dragging img {
  transition: none;
}

.product-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease, transform .5s ease;
  pointer-events: none;
}

.product-img img.active {
  opacity: 1;
  position: relative;
}

.product-card:hover .product-img img.active {
  transform: scale(1.05);
}

.product-img svg {
  width: 36px;
  height: 36px;
  color: var(--text-dim);
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(20, 16, 26, 0.6);
  color: #fff;
  border: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .38;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 2;
}

.carousel-nav:hover {
  transform: translateY(-50%) scale(1.1);
}

.product-img:hover .carousel-nav {
  opacity: 1;
}

.carousel-nav.prev {
  left: 8px;
}

.carousel-nav.next {
  right: 8px;
}

.carousel-nav.lg {
  width: 40px;
  height: 40px;
  font-size: 1.3rem;
}

.carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  gap: 5px;
  justify-content: center;
  z-index: 2;
}

.carousel-dots .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}

.carousel-dots .dot:hover {
  transform: scale(1.4);
}

.carousel-dots .dot.active {
  background: #fff;
}

.carousel-dots.lg .dot {
  width: 7px;
  height: 7px;
}

.discount-flag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--grad);
  color: #1a0b12;
  font-size: .72rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
}

.sold-out-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 26, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sold-out-stamp {
  border: 3px solid #F4E4E8;
  color: #F4E4E8;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 8px 18px;
  transform: rotate(-9deg);
  border-radius: 6px;
  background: rgba(20, 16, 26, 0.35);
}

.product-card.is-sold-out .product-actions {
  opacity: .45;
  pointer-events: none;
}

.product-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.product-cat {
  font-size: .72rem;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
}

.product-name {
  font-weight: 700;
  font-size: .98rem;
}

.product-tags {
  font-size: .76rem;
  color: var(--text-dim);
}

.product-desc {
  font-size: .82rem;
  color: var(--text-dim);
  flex: 1;
}

.product-price {
  font-weight: 800;
  font-size: 1.1rem;
  margin-top: 4px;
}

.product-price .price-strike {
  color: var(--text-dim);
  text-decoration: line-through;
  font-weight: 600;
  font-size: .85rem;
  margin-right: 6px;
}

.product-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.qty-stepper button {
  background: none;
  border: none;
  color: var(--text);
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 1rem;
}

.qty-stepper span {
  width: 26px;
  text-align: center;
  font-size: .88rem;
}

.empty-state {
  text-align: center;
  color: var(--text-dim);
  padding: 50px 20px;
  max-width: 420px;
  margin: 0 auto;
}

.empty-state svg {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  color: var(--pink);
}

/* FEATURES */
.features {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  max-width: 1150px;
  margin: 0 auto;
}

@media (max-width:950px) {
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:520px) {
  .feat-grid {
    grid-template-columns: 1fr;
  }
}

.feat {
  text-align: center;
  padding: 10px;
}

.icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
}

.feat:hover .icon-box,
.policy-card:hover .icon-box {
  transform: scale(1.1) rotate(-6deg);
}

.icon-box svg {
  width: 26px;
  height: 26px;
  color: #1a0b12;
}

.feat .icon-box {
  margin: 0 auto 14px;
}

.feat h4 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.feat p {
  color: var(--text-dim);
  font-size: .86rem;
}

/* POLICIES (entrega / recojo / cambios) */
.policy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1150px;
  margin: 0 auto;
}

@media (max-width:820px) {
  .policy-grid {
    grid-template-columns: 1fr;
  }
}

.policy-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.policy-card .icon-box {
  margin-bottom: 10px;
}

.policy-card .stamp-tag {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pink);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 10px;
  display: inline-block;
  width: fit-content;
  margin-bottom: 10px;
}

.policy-card h3 {
  font-size: 1.05rem;
  margin-bottom: 2px;
}

.policy-card p {
  color: var(--text-dim);
  font-size: .87rem;
  line-height: 1.6;
}

.policy-card a {
  color: var(--pink);
  font-weight: 700;
}

/* CONTACT */
.contact-card {
  max-width: 800px;
  margin: 0 auto;
  background-image: radial-gradient(120% 140% at 0% 0%, rgba(255, 79, 154, 0.15), transparent 60%),
    radial-gradient(120% 140% at 100% 100%, rgba(255, 154, 82, 0.15), transparent 60%);
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 44px 32px;
  text-align: center;
}

.contact-card h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-bottom: 12px;
  font-weight: 800;
}

.contact-card p {
  color: var(--text-dim);
  max-width: 460px;
  margin: 0 auto 24px;
}

.contact-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* FOOTER */
footer {
  padding: 32px 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-dim);
  font-size: .85rem;
}

footer .foot-links {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

footer .foot-links a {
  position: relative;
  transition: color .2s ease;
}

footer .foot-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transition: right .25s ease;
}

footer .foot-links a:hover {
  color: var(--text);
}

footer .foot-links a:hover::after {
  right: 0;
}

footer .foot-links a.js-disabled-link:hover::after {
  right: 100%;
}

/* FLOATING WHATSAPP */
/* 2026-09-23: pedido de Gustavo -- este boton flotante ya no abre un chat
   directo (eso lo siguen haciendo el boton del hero y el de Contacto, ver
   bindEvents/floatWhatsapp en assets/app.js), asi que se lo recolorea con
   el degrade de marca (--grad, el mismo rosado->naranja de los botones
   primarios) en vez del verde propio de WhatsApp, para que combine con el
   resto del sitio. */
.float-wa {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(255, 61, 130, 0.4);
}

.float-wa svg {
  width: 26px;
  height: 26px;
  color: #fff;
}

.float-wa {
  transition: transform .25s ease, box-shadow .25s ease;
}

.float-wa:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 30px rgba(255, 61, 130, 0.55);
}

/* VOLVER ARRIBA */
.back-to-top {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 60;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .2s ease, border-color .2s ease;
}

.back-to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--grad);
  color: #1a0b12;
  border-color: transparent;
  transform: translateY(-3px);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* OVERLAY / DRAWER / MODAL */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 4, 8, 0.7);
  backdrop-filter: blur(2px);
  z-index: 80;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
}

.overlay.open .drawer {
  transform: translateX(0);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.drawer-head h3 {
  font-size: 1.1rem;
  font-weight: 800;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
}

.icon-btn:hover {
  color: var(--text);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.drawer-foot {
  padding: 20px;
  border-top: 1px solid var(--border);
}

.cart-line {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.cart-line-img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--bg-card-2);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-line-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-line-body {
  flex: 1;
  min-width: 0;
}

.cart-line-body .name {
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-line-body .price {
  color: var(--text-dim);
  font-size: .82rem;
}

.cart-line-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
}

.cart-line-unavailable {
  opacity: .6;
}

.cart-line-unavailable .cart-line-img {
  filter: grayscale(1);
}

.cart-line-unavailable-tag {
  color: #e0a030 !important;
  font-weight: 700;
}

#goCheckout:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 14px;
}

.modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 4, 8, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.modal-wrap.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 6px;
}

/* ---------- Lightbox de multimedia (2026-09-22) ---------- */
.media-lightbox-modal {
  max-width: 640px;
}

.media-lightbox-body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}

.media-lightbox-body img,
.media-lightbox-body video {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 12px;
  display: block;
}

.media-lightbox-body iframe {
  width: 100%;
  height: 60vh;
  border: none;
  border-radius: 12px;
}

/* Miniaturas inline en la conversacion (fotos/stickers/GIFs) */
.chat-media-thumb {
  display: block;
  max-width: 220px;
  max-height: 220px;
  border-radius: 10px;
  margin-bottom: 4px;
  cursor: zoom-in;
  transition: opacity .15s ease;
}

.chat-media-thumb:hover {
  opacity: .85;
}

.chat-media-thumb.is-sticker {
  max-width: 120px;
  max-height: 120px;
  background: none;
}

.chat-media-video {
  width: 260px;
  max-height: 320px;
  border: none;
  border-radius: 10px;
  margin-bottom: 4px;
  display: block;
  background: #000;
}

#mediaLightboxBody video {
  max-width: 100%;
  max-height: 80vh;
  display: block;
}

.modal p.hint {
  color: var(--text-dim);
  font-size: .85rem;
  margin-bottom: 18px;
}

.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-size: .82rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.required-mark {
  color: var(--pink, #FF3D82);
  font-weight: 700;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 14px;
  border-radius: 10px;
  font-size: .92rem;
}

.field textarea {
  resize: vertical;
  min-height: 70px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--pink);
}

.phone-match-notice {
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 138, 61, 0.12);
  border: 1px solid rgba(255, 138, 61, 0.28);
  color: var(--text);
  font-size: .8rem;
  line-height: 1.4;
}

.form-error {
  color: #ff8a8a;
  font-size: .85rem;
  margin-bottom: 12px;
  min-height: 1em;
}

.method-toggle {
  display: flex;
  gap: 10px;
}

.method-btn {
  flex: 1;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 11px 10px;
  border-radius: 12px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.method-btn.active {
  background: var(--grad);
  color: #1a0b12;
  border-color: transparent;
}

/* POPUP DE OFERTAS (FOMO) */
.offer-popup {
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 80;
  max-width: 300px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
}

.offer-popup.show {
  transform: translateY(0);
  opacity: 1;
}

.offer-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: .9rem;
  cursor: pointer;
  line-height: 1;
}

.offer-popup-tag {
  color: var(--pink);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.offer-popup p {
  font-size: .9rem;
  margin-bottom: 14px;
  line-height: 1.45;
}

@media (max-width:480px) {
  .offer-popup {
    right: 16px;
    left: 16px;
    max-width: none;
    bottom: 88px;
  }
}

/* POPUP DE OUTFIT DEL DIA (armado por IA, 2026-09-23) */
.outfit-popup {
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 80;
  max-width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
}

.outfit-popup.show {
  transform: translateY(0);
  opacity: 1;
}

.outfit-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: .9rem;
  cursor: pointer;
  line-height: 1;
}

.outfit-popup-tag {
  color: var(--pink);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.outfit-popup p {
  font-size: .88rem;
  margin-bottom: 12px;
  line-height: 1.42;
}

.outfit-popup-items {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.outfit-popup-item {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.outfit-popup-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 4px;
  background: var(--bg-2, #1a1a1a);
}

.outfit-popup-item b {
  display: block;
  font-size: .8rem;
}

.outfit-popup-item span {
  display: block;
  font-size: .72rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width:480px) {
  .outfit-popup {
    right: 16px;
    left: 16px;
    max-width: none;
    bottom: 88px;
  }
}

.confirm-box {
  text-align: center;
}

.confirm-box .order-num {
  font-size: 1.5rem;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 6px 0 4px;
}

.confirm-box .qr-wrap {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin: 18px auto;
  max-width: 220px;
}

.confirm-box .qr-wrap img {
  width: 100%;
  border-radius: 6px;
}

.status-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
}

.status-pendiente {
  background: rgba(255, 176, 32, 0.15);
  color: var(--amber);
}

.status-pagado {
  background: rgba(37, 211, 102, 0.15);
  color: #4ee08b;
}

.status-rechazado {
  background: rgba(255, 93, 93, 0.15);
  color: #ff8a8a;
}

.status-entregado {
  background: rgba(91, 168, 255, 0.15);
  color: var(--blue);
}

/* Calendario de recojos y envios programados (2026-09-24, ronda 27) --
   pestaña "Calendario" del panel admin. */
.calendar-pending { }

.calendar-grid {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 18px;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 8px;
  text-align: center;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-day {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 64px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  font-family: inherit;
}

.calendar-day-empty {
  visibility: hidden;
  cursor: default;
}

.calendar-day:hover:not(.calendar-day-empty) {
  border-color: var(--accent, #f1681f);
}

.calendar-day-today {
  border-color: var(--accent, #f1681f);
  border-width: 2px;
}

.calendar-day-selected {
  background: rgba(241, 104, 31, 0.15);
}

.calendar-day-num {
  font-weight: 700;
  font-size: .85rem;
}

.calendar-day-count {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--accent, #f1681f);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
}

.calendar-day-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: auto;
}

.calendar-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
}

.status-dot-pendiente { background: var(--amber); }
.status-dot-pagado { background: #4ee08b; }
.status-dot-rechazado { background: #ff8a8a; }
.status-dot-entregado { background: var(--blue); }
.status-dot-manual { background: #b98cff; } /* Ronda 34: entradas manuales de calendario, distinto de los estados de pedido */

.calendar-day-detail {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px;
}

/* ===== ADMIN ===== */
.admin-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}

.admin-tabs {
  display: flex;
  gap: 8px;
  padding: 16px 24px 0;
  flex-wrap: wrap;
}

.admin-tab {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 10px 18px;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  border-bottom: none;
}

.admin-tab.active {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}

.admin-panel {
  background: var(--bg-card);
  margin: 0 24px 24px;
  padding: 24px;
  border-radius: 0 16px 16px 16px;
  border: 1px solid var(--border);
  flex: 1;
}

@media (max-width:700px) {

  .admin-tabs,
  .admin-panel {
    margin-left: 12px;
    margin-right: 12px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px;
  max-width: 360px;
  width: 100%;
}

.login-card h2 {
  margin-bottom: 6px;
}

.login-card p {
  color: var(--text-dim);
  font-size: .88rem;
  margin-bottom: 22px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

th,
td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  color: var(--text-dim);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.table-scroll {
  overflow-x: auto;
}

.badge-active {
  color: #4ee08b;
  font-size: .78rem;
  font-weight: 700;
}

.badge-inactive {
  color: var(--text-dim);
  font-size: .78rem;
}

.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}

.search-box {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 320px;
}

.search-box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  color: var(--text-dim);
  pointer-events: none;
}

.search-box input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 14px 9px 34px;
  border-radius: 999px;
  font-size: .85rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.search-box input:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255, 79, 154, .15);
}

.panel-head h2 {
  font-size: 1.2rem;
}

.thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-card-2);
}

.order-items-list {
  font-size: .8rem;
  color: var(--text-dim);
}

/* FORM LAYOUT HELPERS */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width:520px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

.field-hint {
  font-size: .76rem;
  color: var(--text-dim);
  margin-top: 6px;
}

.size-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.size-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .78rem;
  cursor: pointer;
  font-family: inherit;
}

.size-chip.active {
  background: var(--grad);
  color: #1a0b12;
  border-color: transparent;
  font-weight: 700;
}

.badge-soldout {
  color: #ff8a8a;
  font-size: .78rem;
  font-weight: 700;
}

.badge-tiktok {
  color: var(--text-dim);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: .74rem;
  font-weight: 600;
}

/* DASHBOARD: rango de fechas */
.range-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.range-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.range-preset.active {
  background: var(--grad);
  color: #1a0b12;
  border-color: transparent;
  font-weight: 700;
}

.range-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: .85rem;
}

.range-custom input[type="date"] {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: .85rem;
}

/* DASHBOARD: KPIs */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width:980px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:520px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

.kpi-card {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 3px solid var(--pink);
}

.kpi-card.kpi-accent-a {
  border-top-color: var(--amber);
}

.kpi-card.kpi-accent-b {
  border-top-color: var(--green);
}

.kpi-card.kpi-accent-c {
  border-top-color: var(--gold);
}

.kpi-label {
  font-size: .76rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
}

.kpi-value {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
}

.kpi-sub {
  font-size: .78rem;
  color: var(--text-dim);
}

/* DASHBOARD: paneles / grafico / categorias / forecast */
.dash-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

@media (max-width:860px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }
}

.dash-panel {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 18px;
}

.dash-panel h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.dash-sub {
  color: var(--text-dim);
  font-size: .82rem;
  margin-bottom: 16px;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 140px;
  padding-top: 10px;
}

.bar-chart .bar-col {
  flex: 1;
  min-width: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
}

.bar-chart .bar {
  width: 100%;
  max-width: 26px;
  border-radius: 6px 6px 2px 2px;
  background: var(--grad);
  min-height: 3px;
}

.bar-chart .bar-date {
  font-size: .62rem;
  color: var(--text-dim);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.cat-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cat-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cat-row-head {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
}

.cat-row-head b {
  font-weight: 700;
}

.cat-row-head span {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: .8rem;
}

.cat-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-card);
  overflow: hidden;
}

.cat-bar-fill {
  height: 100%;
  background: var(--grad);
  border-radius: 999px;
}

.forecast-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width:700px) {
  .forecast-row {
    grid-template-columns: 1fr;
  }
}

.forecast-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* DASHBOARD: compras / inversion */
.purchase-amount {
  font-family: var(--font-mono);
  font-weight: 700;
}

/* INVENTARIO: seleccion masiva */
.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--bg-card-2);
  border: 1px solid var(--pink);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: .85rem;
}

.bulk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.bulk-actions input[type="number"] {
  width: 90px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: .85rem;
}

th.checkbox-col,
td.checkbox-col {
  width: 32px;
}

.discount-badge {
  display: inline-block;
  margin-left: 6px;
  background: rgba(255, 61, 130, .15);
  color: var(--pink);
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.price-strike {
  color: var(--text-dim);
  text-decoration: line-through;
  font-size: .82rem;
  margin-right: 6px;
}

/* INVENTARIO: combos (Ronda 33, 2026-09-25) -- lista de checkboxes de
   productos del catalogo, dentro del modal de combo. */
.combo-product-pick-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  margin-top: 8px;
}

.combo-product-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: .88rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.combo-product-pick:last-child {
  border-bottom: none;
}

.combo-product-pick input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
}

/* INVENTARIO: galeria de imagenes en el modal */
.gallery-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.gallery-thumb {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb .remove-thumb {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(20, 16, 26, 0.85);
  color: #fff;
  border: none;
  font-size: .8rem;
  cursor: pointer;
  line-height: 1;
}

.gallery-thumb .cover-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(20, 16, 26, 0.85);
  color: var(--text-dim);
  font-size: .6rem;
  text-align: center;
  padding: 2px 0;
}

/* PEDIDOS: comprobante */
.proof-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--border);
}

.image-viewer-modal {
  max-width: 520px;
  text-align: center;
}

.image-viewer-modal img {
  width: 100%;
  border-radius: 12px;
}

.order-delivery {
  font-size: .8rem;
  color: var(--text-dim);
  max-width: 160px;
}

.map-link {
  color: var(--pink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.map-link:hover {
  text-decoration-thickness: 2px;
}

/* CLIENTES (mini CRM) */
.customer-card {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.customer-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.customer-card.open {
  border-color: rgba(255, 61, 130, 0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.customer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  cursor: pointer;
}

.customer-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.customer-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(255, 61, 130, 0.25);
}

.customer-info {
  min-width: 0;
}

.customer-info b {
  font-size: 1.02rem;
}

.customer-info span {
  display: block;
  color: var(--text-dim);
  font-size: .82rem;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 340px;
}

.customer-stats {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.customer-stats div {
  text-align: right;
}

.customer-stats .kpi-label {
  font-size: .68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.customer-stats .kpi-value {
  font-size: 1.05rem;
  font-weight: 800;
}

.customer-stats .kpi-value.accent {
  color: var(--pink);
}

.customer-orders {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: none;
}

.customer-card.open .customer-orders {
  display: block;
}

.customer-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .84rem;
  padding: 10px 0;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}

.customer-order-row:last-child {
  border-bottom: none;
}

.customer-order-row b {
  color: var(--text);
}

.customer-order-left {
  min-width: 0;
  flex: 1;
}

.customer-order-items {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-order-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.receipt-badge {
  font-size: .68rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  white-space: nowrap;
}

.receipt-badge.has-receipt {
  background: rgba(37, 211, 102, 0.15);
  color: #4ee08b;
}

.receipt-badge.backed-up {
  background: rgba(91, 168, 255, 0.15);
  color: var(--blue);
}

.hidden {
  display: none !important;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  padding: 12px 20px;
  border-radius: 12px;
  font-size: .88rem;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}

/* ===== CHATS (bandeja unificada) ===== */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

/* 2026-09-22 (v2): un ancho fijo (340px) seguia sin alcanzar para
   nombres largos, y Gustavo lo señalo bien: la fila se hizo mas ALTA en
   vez de mas ANCHA. Ahora la columna de la lista escala sola segun el
   ancho real de la pantalla (clamp: nunca baja de 320px ni pasa de
   460px, y en el medio ocupa ~26% del ancho total) -- en una pantalla
   grande el nombre tiene mucho mas lugar automaticamente, sin depender
   de adivinar un numero fijo. La columna del panel de cliente (derecha)
   tambien escala igual, mas angosta. */
.chat-layout {
  display: grid;
  grid-template-columns: clamp(320px, 26vw, 460px) 1fr clamp(280px, 20vw, 360px);
  gap: 18px;
  height: calc(100vh - 260px);
  min-height: 560px;
}

@media (max-width:1100px) {
  .chat-layout {
    grid-template-columns: clamp(280px, 34vw, 340px) 1fr;
  }
  .chat-customer-panel {
    display: none !important;
  }
}

@media (max-width:800px) {
  .chat-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
}

.chat-list {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow-y: auto;
  height: 100%;
  background: var(--bg-card-2);
}

.chat-customer-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chat-customer-section h4 {
  margin: 0 0 8px;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-dim);
}

.chat-customer-info {
  font-size: .86rem;
  line-height: 1.6;
}

.chat-customer-info .chat-customer-empty {
  color: var(--text-dim);
}

.chat-customer-stats {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.chat-customer-stat {
  flex: 1;
  background: rgba(244, 228, 232, 0.05);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}

.chat-customer-stat b {
  display: block;
  font-size: 1rem;
}

.chat-customer-stat span {
  font-size: .68rem;
  color: var(--text-dim);
}

.chat-customer-orders {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-customer-order-row {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  padding: 6px 8px;
  background: rgba(244, 228, 232, 0.04);
  border-radius: 8px;
}

.chat-customer-section textarea {
  width: 100%;
  resize: vertical;
  margin-bottom: 8px;
}

/* 2026-09-22: adjuntos de las Notas internas -- se ven ARRIBA del cuadro
   de texto (pidio poder ver que adjunto de una, sin tener que abrir la
   nota primero). */
.chat-note-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.chat-note-attachments:empty {
  display: none;
}

/* 2026-09-22: nota interna YA guardada, separada del cuadro de edicion de
   abajo -- antes la unica forma de saber que tenias guardado era mirar el
   mismo textarea donde escribias, y se confundia con un borrador a medio
   escribir. */
.chat-notes-saved {
  background: rgba(244, 228, 232, 0.06);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pink);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.chat-notes-saved.hidden {
  display: none;
}

.chat-notes-saved-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.chat-notes-saved-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.chat-notes-saved-delete {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .82rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  opacity: .75;
}

.chat-notes-saved-delete:hover {
  opacity: 1;
  background: rgba(255, 77, 77, 0.12);
}

.chat-notes-saved p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-note-attachment {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 6px 4px 8px;
  border-radius: 8px;
  background: rgba(244, 228, 232, 0.08);
  font-size: .76rem;
}

.chat-note-attachment a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.chat-note-attachment a:hover {
  text-decoration: underline;
}

.chat-note-attachment button {
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: .8rem;
  line-height: 1;
  padding: 0 2px;
}

.chat-note-attachment button:hover {
  color: var(--pink);
}

/* 2026-09-22: adjuntos de imagen/video en Notas -- miniatura en vez de
   link plano, con hover y click para abrir el popup (mismo lightbox que
   usa la conversacion). */
.chat-note-attachment.is-media {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: rgba(244, 228, 232, 0.08);
}

.chat-note-attachment-thumb {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity .15s ease, transform .15s ease;
}

.chat-note-attachment.is-media:hover .chat-note-attachment-thumb {
  opacity: .8;
  transform: scale(1.04);
}

.chat-note-attachment-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .7rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.chat-note-attachment-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  font-size: .7rem;
  line-height: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  padding: 0;
}

.chat-note-attachment-remove:hover {
  background: var(--pink);
}

#chatNoteAttachBtn {
  margin-bottom: 8px;
}

.chat-status-select {
  background: rgba(244, 228, 232, 0.06);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: .78rem;
  font-weight: 600;
}

/* 2026-09-22: color de fondo por estado (ver applyChatStatusSelectColor
   en admin.js) -- antes el select era siempre gris neutro y cambiar el
   estado no se notaba en el chat del cliente mas alla del texto. */
.chat-status-select.status-nuevo {
  background: rgba(91, 168, 255, 0.14);
  border-color: rgba(91, 168, 255, 0.4);
  color: var(--blue, #5ba8ff);
}

.chat-status-select.status-esperando_pago {
  background: rgba(255, 200, 61, 0.14);
  border-color: rgba(255, 200, 61, 0.4);
  color: #ffc83d;
}

.chat-status-select.status-pagado_preparando {
  background: rgba(201, 161, 90, 0.16);
  border-color: rgba(201, 161, 90, 0.45);
  color: #c9a15a;
}

.chat-status-select.status-enviado {
  background: rgba(91, 168, 255, 0.16);
  border-color: rgba(91, 168, 255, 0.45);
  color: #5ba8ff;
}

.chat-status-select.status-resuelto {
  background: rgba(37, 211, 102, 0.14);
  border-color: rgba(37, 211, 102, 0.4);
  color: var(--green, #25d366);
}

.chat-status-select.status-reclamo {
  background: rgba(255, 82, 82, 0.14);
  border-color: rgba(255, 82, 82, 0.45);
  color: #ff5252;
}

.chat-status-select.status-sin_interes {
  background: rgba(244, 228, 232, 0.06);
  border-color: var(--border);
  color: var(--text-dim);
}

.chat-thread-search {
  padding: 8px 18px;
  border-bottom: 1px solid var(--border);
}

.chat-thread-search input {
  width: 100%;
  font-size: .82rem;
}

.chat-thread-search-count {
  display: block;
  margin-top: 4px;
  font-size: .7rem;
  color: var(--text-dim);
}

.chat-bubble.search-hidden {
  display: none;
}

.chat-bubble.search-match {
  outline: 2px solid var(--pink);
}

.chat-media-image {
  display: block;
  max-width: 220px;
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
}

.chat-media-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(244, 228, 232, 0.08);
  margin-bottom: 6px;
  text-decoration: none;
  color: inherit;
  font-size: .82rem;
}

.chat-linked-order {
  display: inline-block;
  margin-top: 4px;
  font-size: .72rem;
  text-decoration: underline;
}

/* 2026-09-22: links dentro de un mensaje (TikTok/Facebook/Instagram/YouTube
   con icono, cualquier otro tal cual) -- ver linkifyText en admin.js. */
.chat-message-link {
  color: inherit;
  text-decoration: underline;
  word-break: break-word;
}

.chat-message-link:hover {
  opacity: .85;
}

/* 2026-09-22: tarjeta de portada real para links de TikTok (ver
   loadTiktokPreviews/renderTiktokCard en admin.js) -- arranca como el
   link con icono de siempre (chat-link-tiktok-fallback) y se reemplaza
   por esto en cuanto el servidor consigue la miniatura real. */
.chat-link-tiktok {
  display: block;
  text-decoration: none;
  margin-top: 4px;
}

.chat-link-tiktok-fallback {
  text-decoration: underline;
}

.chat-link-tiktok-card {
  display: block;
  max-width: 220px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
}

.chat-link-tiktok-card img {
  display: block;
  width: 100%;
  aspect-ratio: 9/16;
  object-fit: cover;
  background: #000;
}

.chat-link-tiktok-info {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-link-tiktok-title {
  font-size: .78rem;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chat-link-tiktok-open {
  font-size: .7rem;
  color: var(--text-dim);
}

.chat-list-empty {
  padding: 20px;
  color: var(--text-dim);
  font-size: .88rem;
}

/* 2026-09-22: alto minimo fijo -- antes una fila sin ningun badge (numero
   resuelto / IA) quedaba con 2 lineas nomas mientras otras tenian 3, y la
   lista se veia despareja (unas "mas apretadas" que otras). Con
   min-height todas ocupan el mismo alto sin importar cuanto contenido
   tengan; align-items:flex-start deja el bloque de texto pegado arriba
   igual, asi que una fila con menos contenido queda con aire abajo en vez
   de estirarse o comprimirse distinto a las demas. */
.chat-list-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px;
  min-height: 84px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
}

.chat-list-row:hover {
  background: rgba(244, 228, 232, 0.04);
}

.chat-list-row.active {
  background: rgba(255, 61, 130, 0.12);
}

.chat-list-row.unread .chat-list-top b {
  color: var(--text);
}

.chat-list-row.unread::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}

.chat-list-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  line-height: 1;
}

.chat-list-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chat-list-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .9rem;
  line-height: 1.3;
}

/* 2026-09-22 (v2): la columna de la lista ahora escala con la pantalla
   (ver .chat-layout), pero un nombre de grupo largo con emojis igual
   puede no entrar en una sola linea -- en vez de cortarlo siempre a la
   primera linea con "...", ahora se permiten hasta 2 lineas completas
   (line-clamp) antes de cortar, para que se lea el nombre real casi
   siempre. align-items pasa a flex-start arriba para que la hora quede
   pegada a la PRIMERA linea del nombre, no centrada entre las 2. */
.chat-list-top b {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.chat-list-top .chat-list-when {
  color: var(--text-dim);
  font-size: .72rem;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 1px;
}

.chat-list-preview {
  color: var(--text-dim);
  font-size: .83rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2026-09-22: linea aparte para los badges (numero real/admin, grupo, IA)
   -- antes vivian pegados al nombre o flotando al borde de toda la fila,
   compitiendo con la hora y amontonando todo. Ahora quedan chiquitos,
   abajo de la vista previa, y se envuelven si no entran todos. */
.chat-list-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.chat-ai-pill {
  align-self: center;
  background: var(--grad);
  color: #1a0b12;
  font-weight: 800;
  font-size: .65rem;
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}

.chat-thread {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

.chat-thread-empty {
  margin: auto;
  color: var(--text-dim);
  font-size: .9rem;
  padding: 20px;
  text-align: center;
}

.chat-thread-active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-thread-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}

.chat-platform-tag {
  margin-left: 8px;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(244, 228, 232, 0.08);
  color: var(--text-dim);
}

/* ---------- Grupos de WhatsApp (2026-09-20) ---------- */
.chat-group-tag {
  margin-left: 6px;
  font-size: .7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(244, 228, 232, 0.08);
  color: var(--text-dim);
}

/* 2026-09-22: ahora vive fija en la esquina inferior derecha de la fila
   (position:absolute contra .chat-list-row, que ya es position:relative)
   en vez de mezclada con los demas badges a la izquierda -- asi la
   etiqueta de grupo siempre esta en el mismo lugar en todas las filas. */
.chat-list-group-pill {
  position: absolute;
  right: 14px;
  bottom: 12px;
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(244, 228, 232, 0.1);
  color: var(--text-dim);
  white-space: nowrap;
}

/* 2026-09-22 (v2): el resguardo de mas espacio a la derecha para no
   chocar con la etiqueta "Grupo" (fija abajo a la derecha) se habia puesto
   sobre TODO .chat-list-body -- eso tambien corria la fecha/hora de arriba
   (linea 1) hacia la izquierda, dejandola sin pegar al borde derecho como
   en las demas filas. La etiqueta de grupo solo puede chocar con la
   ULTIMA linea (el badge de admin, 👑 numero), asi que el margen se
   aplica solo ahi -- nombre, hora y vista previa quedan igual que en
   cualquier fila. */
.chat-list-row.is-group .chat-list-badges {
  padding-right: 78px;
}

/* ---------- Numero real resuelto para contactos LID (2026-09-20, upgrade Baileys 7) ---------- */
.chat-list-real-phone {
  font-size: .7rem;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
}

.chat-platform-tag.chat-platform-whatsapp {
  color: var(--green);
  background: rgba(37, 211, 102, 0.12);
}

.chat-platform-tag.chat-platform-messenger {
  color: var(--blue);
  background: rgba(91, 168, 255, 0.12);
}

.chat-platform-tag.chat-platform-instagram {
  color: var(--pink);
  background: rgba(255, 61, 130, 0.12);
}

.chat-ai-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--text-dim);
  cursor: pointer;
}

.chat-thread-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 2026-09-22: fondo del popup de vista previa de plantilla -- imita el
   fondo real del hilo de chat para que la burbuja de adentro (misma clase
   .chat-bubble.out que una burbuja real) se vea identica a como quedaria
   ya mandada. */
.chat-template-preview-thread {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  padding: 14px;
  margin: 10px 0;
}

.chat-template-preview-thread .chat-bubble {
  max-width: 100%;
}

.chat-bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .88rem;
  line-height: 1.4;
  position: relative;
}

.chat-bubble.in {
  align-self: flex-start;
  background: rgba(244, 228, 232, 0.07);
  border-bottom-left-radius: 4px;
}

.chat-bubble.out {
  align-self: flex-end;
  background: var(--grad);
  color: #1a0b12;
  border-bottom-right-radius: 4px;
}

.chat-bubble-meta {
  display: block;
  font-size: .65rem;
  opacity: .6;
  margin-top: 4px;
}

/* 2026-09-24 (ronda 30): burbujita de reaccion real de WhatsApp (ej. 👍),
   pegada a la esquina inferior de la burbuja del mensaje -- mismo lugar
   donde WhatsApp real la muestra. */
.chat-bubble-reaction {
  position: absolute;
  bottom: -9px;
  right: -6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .82rem;
  line-height: 1;
  padding: 3px 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.chat-status {
  margin-left: 4px;
}
.chat-status.is-pending {
  opacity: .75;
}
.chat-status.is-failed {
  color: #b3261e;
  opacity: 1;
  font-weight: 600;
}
.chat-bubble.out .chat-status.is-failed {
  color: #7a1a14;
}
.chat-retry-btn {
  display: inline-block;
  margin-left: 6px;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}

.chat-thread-error {
  color: var(--pink);
  font-size: .82rem;
  padding: 0 18px;
}

.chat-reply-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

/* 2026-09-22: popup de vista previa al pasar el mouse (sin click) sobre un
   emoticon o sticker en los pickers de abajo -- aparece centrado y mas
   grande justo arriba de lo que se esta mirando. pointer-events:none para
   que nunca tape el click real sobre el boton de abajo (el mouse "pasa a
   traves" del popup). transform:translate(-50%,-100%) lo centra
   horizontalmente y lo sube por completo arriba del elemento. */
.chat-hover-preview {
  position: absolute;
  z-index: 30;
  transform: translate(-50%, calc(-100% - 10px));
  pointer-events: none;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-hover-preview.hidden {
  display: none;
}

.chat-hover-preview-emoji {
  font-size: 2.6rem;
  line-height: 1;
}

.chat-hover-preview img {
  max-width: 160px;
  max-height: 160px;
  display: block;
  border-radius: 8px;
}

/* 2026-09-22: selector de emoticones -- se abre flotando arriba del cuadro
   de texto, para que el chat de acá se sienta como un WhatsApp normal.
   2026-09-22 (v2): antes tenia un ancho fijo angosto (260px) pegado a la
   izquierda -- quedaba chico y los emoticones dificiles de tocar bien.
   Ahora ocupa todo el ancho del cuadro de respuesta (de punta a punta,
   como el textarea de abajo), y las columnas se acomodan solas al ancho
   real en vez de un numero fijo. */
.chat-emoji-picker {
  position: absolute;
  bottom: 100%;
  left: 18px;
  right: 18px;
  margin-bottom: 6px;
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 2px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 20;
}

.chat-emoji-picker.hidden {
  display: none;
}

.chat-emoji-picker button {
  border: none;
  background: none;
  font-size: 1.15rem;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  border-radius: 6px;
}

.chat-emoji-picker button:hover {
  background: rgba(244, 228, 232, 0.12);
}

.chat-emoji-btn {
  font-size: 1rem;
}

/* 2026-09-22: biblioteca de stickers propios (marca "Me Lo Llevo"), al
   lado del picker de emoticones -- clickear uno lo manda de una, no hace
   falta escribir nada ni apretar "Enviar" aparte. */
/* 2026-09-22 (v2): mismo criterio que el picker de emoticones -- de punta
   a punta del cuadro de respuesta en vez de una caja angosta pegada a la
   izquierda, para elegir el sticker correcto mas facil. */
.chat-sticker-picker {
  position: absolute;
  bottom: 100%;
  left: 18px;
  right: 18px;
  margin-bottom: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 20;
}

.chat-sticker-picker.hidden {
  display: none;
}

.chat-sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}

.chat-sticker-thumb {
  border: 1px solid transparent;
  background: rgba(244, 228, 232, 0.05);
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-sticker-thumb:hover {
  border-color: var(--border);
  background: rgba(244, 228, 232, 0.12);
}

.chat-sticker-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.chat-sticker-thumb:disabled {
  opacity: .5;
  cursor: default;
}

.chat-sticker-add {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: .78rem;
  color: var(--text-dim);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}

.chat-sticker-add:hover {
  color: var(--text);
  border-color: var(--pink);
}

/* 2026-09-22: chip del archivo elegido para mandar (foto/video/sticker),
   arriba del cuadro de texto -- se manda recien al apretar "Enviar". */
.chat-media-pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(244, 228, 232, 0.1);
  font-size: .82rem;
}

.chat-media-pending #chatMediaPendingName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-media-pending button {
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: .85rem;
  flex-shrink: 0;
}

.chat-media-pending button:hover {
  color: var(--pink);
}

.chat-reply-box textarea {
  width: 100%;
  resize: vertical;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .88rem;
}

.chat-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---------- Chat: presencia, avatares, separadores de día, ventana 24h ---------- */

.presence-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--text-dim);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.18);
  flex-shrink: 0;
}

.presence-pill.offline .presence-dot {
  background: var(--text-dim);
  box-shadow: none;
}

.bridge-status-pill {
  cursor: pointer;
  background: transparent;
  font-family: inherit;
}

.bridge-status-pill .presence-dot.is-qr {
  background: #f5a623;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
}

.bridge-status-pill .presence-dot.is-offline {
  background: #e5484d;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.18);
}

.bridge-qr-box {
  text-align: center;
}

.bridge-qr-box canvas, .bridge-qr-box img {
  margin: 12px auto;
}

.bridge-status-text {
  font-size: .88rem;
  color: var(--text-dim);
  margin-top: 8px;
}

.chat-config-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card-2);
  padding: 16px 18px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Plantillas de mensajes (2026-09-22) ---------- */
.chat-templates-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.chat-template-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(244, 228, 232, 0.04);
}

.chat-template-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.chat-template-item-head b {
  font-size: .86rem;
}

.chat-template-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.chat-template-item-actions button {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: .76rem;
  cursor: pointer;
}

.chat-template-item-actions button:hover {
  color: var(--text);
  border-color: var(--pink);
}

.chat-template-item-body {
  margin: 0;
  font-size: .8rem;
  color: var(--text-dim);
  white-space: pre-wrap;
}

.chat-templates-new {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 2026-09-22: plantillas editables (Configuración del chat) */
.chat-template-edit-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-template-edit-item input[type="text"],
.chat-template-edit-item textarea {
  width: 100%;
}

.chat-template-edit-item .chat-template-item-actions {
  justify-content: flex-end;
}

.chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .95rem;
  color: #1a0b12;
  flex-shrink: 0;
}

.chat-list-row .chat-avatar {
  width: 34px;
  height: 34px;
  font-size: .85rem;
}

.chat-thread-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.chat-thread-who > div {
  min-width: 0;
}

/* 2026-09-22: nombre de grupo/cliente largo en el encabezado del chat --
   se acorta con "..." en vez de empujar o superponerse con el selector de
   estado y el toggle de IA. El title (puesto en admin.js) muestra el
   nombre completo al pasar el mouse. */
#chatThreadName {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.chat-platform-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--text-dim);
}

.chat-platform-dot.chat-platform-whatsapp { background: var(--green); }
.chat-platform-dot.chat-platform-messenger { background: var(--blue); }
.chat-platform-dot.chat-platform-instagram { background: var(--pink); }

.chat-day-divider {
  display: flex;
  justify-content: center;
  margin: 6px 0;
}

.chat-day-divider span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  background: rgba(244, 228, 232, 0.06);
  padding: 3px 12px;
  border-radius: 999px;
}

.chat-bubble.is-ai {
  background: rgba(201, 161, 90, 0.16);
  border: 1px solid rgba(201, 161, 90, 0.35);
  color: var(--text);
}

.chat-window-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  background: rgba(255, 138, 61, 0.1);
  border-top: 1px solid rgba(255, 138, 61, 0.3);
  color: var(--text-dim);
  font-size: .82rem;
  padding: 10px 18px;
}

/* --- CORRECCIÓN PARA MENÚS DESPLEGABLES --- */
select option {
  background-color: var(--bg-card);
  /* Fondo oscuro de tu marca */
  color: var(--text);
  /* Texto claro */
}

/* --- ANIMACIONES Y EFECTOS HOVER (MAGIA VISUAL) --- */

/* 1. Transición suave general para todos los botones */
.btn {
  transition: all 0.3s ease !important;
}

/* Efecto levitación y brillo en botones al pasar el mouse */
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(255, 61, 130, 0.3);
  /* Brillo sutil con el rosado de tu marca */
}

/* Botones secundarios (outline) se rellenan suavemente */
.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* 2. Efecto de elevación en tarjetas (Productos, Características, Políticas) */
.product-card,
.feat,
.policy-card,
.client-card,
.contact-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.product-card:hover,
.feat:hover,
.policy-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  cursor: default;
}

/* 3. Las filas de tablas en el panel (Pedidos, Clientes) reaccionan al mouse */
tbody tr,
.client-card {
  transition: background-color 0.2s ease;
}

tbody tr:hover,
.client-card:hover {
  background-color: rgba(255, 255, 255, 0.03);
  /* Ilumina ligeramente la fila */
}

/* 4. Espaciado de las estadísticas de clientes (por si acaso el panel lo necesita) */
.client-stats {
  gap: 15px;
  /* Asegura que haya separación extra entre PEDIDOS y GASTADO */
}
/* ===== PAPELERA DE PEDIDOS ===== */
.trash-item{border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:10px;}
.trash-item-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-bottom:6px;}
.trash-item-head b{font-size:.95rem;}
.trash-item-head span{color:var(--text-dim); font-size:.78rem; white-space:nowrap;}
.trash-item-reason{color:var(--text-dim); font-size:.85rem; margin-bottom:10px;}
.trash-item-reason b{color:var(--text);}

/* ===== Enlace social todavia sin destino real (ej: Facebook) ===== */
/* No navega a ningun lado por ahora, asi que se muestra un poco apagado
   y con el cursor normal para no dar la idea de que es un link activo. */
.js-disabled-link{opacity:.55; cursor:default;}
.js-disabled-link:hover{opacity:.7;}

/* ===== Aparicion suave al hacer scroll (secciones "Por que elegirnos",
   "Entrega y recojo", "Contacto") ===== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.feat-grid .feat.reveal:nth-child(2) { transition-delay: .08s; }
.feat-grid .feat.reveal:nth-child(3) { transition-delay: .16s; }
.feat-grid .feat.reveal:nth-child(4) { transition-delay: .24s; }
.policy-grid .policy-card.reveal:nth-child(2) { transition-delay: .1s; }
.policy-grid .policy-card.reveal:nth-child(3) { transition-delay: .2s; }
.promo-banner-visual.reveal { transition-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== Vista rapida del producto (carrusel grande) ===== */
.quickview-modal {
  max-width: 700px;
  text-align: left;
}

.quickview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

@media (max-width:640px) {
  .quickview-grid {
    grid-template-columns: 1fr;
  }
}

.quickview-img {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  background: var(--bg-card-2);
  border-radius: 16px;
  overflow: hidden;
  cursor: default;
}

.quickview-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s ease;
}

.quickview-img img.active {
  opacity: 1;
  position: relative;
}

.quickview-img svg {
  width: 44px;
  height: 44px;
  color: var(--text-dim);
}

.quickview-body {
  display: flex;
  flex-direction: column;
}

.quickview-cat {
  font-size: .75rem;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
  margin-bottom: 6px;
}

.quickview-body h3 {
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.quickview-tags {
  color: var(--text-dim);
  font-size: .85rem;
  margin-bottom: 12px;
}

.quickview-desc {
  color: var(--text-dim);
  font-size: .9rem;
  line-height: 1.55;
  margin-bottom: 16px;
}

.quickview-price {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.4rem;
  margin-bottom: 18px;
}

.quickview-price .price-strike {
  font-size: 1rem;
}

/* ---------- BOTONES DE REDES SOCIALES CON ICONO (sección de contacto) ---------- */
.social-btn {
  padding-left: 10px;
}

.social-btn .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--grad);
  color: #1a0b12;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}

.social-btn .social-icon svg {
  width: 15px;
  height: 15px;
  /* Siempre hereda el color del circulo (.social-icon), nunca el de un
     ancestro como ".empty-state svg" que pintaba este icono del mismo
     rosa que el fondo y lo dejaba casi invisible. */
  color: inherit;
}

/* El giro (rotate) que tenia antes hacia que el icono se viera "volando" o
   torcido, y en el celular ese estado de :hover se queda pegado despues de
   tocar el boton (no hay mouse que lo "suelte"), asi que el circulo se
   quedaba inclinado y con sombra como flotando. Por eso el efecto de hover
   solo se activa en dispositivos con mouse real (hover: hover) y ya no
   rota, solo agranda un poco el circulo sin sacarlo de su lugar. */
@media (hover: hover) and (pointer: fine) {
  .social-btn:hover .social-icon {
    transform: scale(1.12);
    box-shadow: 0 2px 10px rgba(255, 79, 154, .45);
  }
}

.social-btn:active {
  transform: scale(.96);
}

.social-btn:active .social-icon {
  transform: scale(.92);
}

.social-btn.js-disabled-link .social-icon {
  background: rgba(244, 228, 232, 0.12);
  color: var(--text-dim);
}

.social-btn.js-disabled-link:hover .social-icon {
  transform: none;
  box-shadow: none;
}

/* Sobre un boton solido (degradado rosa-naranja) el circulo del icono usa un
   tono oscuro traslucido para que no se pierda contra el mismo fondo. */
.btn-primary.social-btn .social-icon {
  background: rgba(26, 11, 18, .18);
  color: #1a0b12;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary.social-btn:hover .social-icon {
    background: rgba(26, 11, 18, .3);
    box-shadow: 0 2px 10px rgba(26, 11, 18, .35);
  }
}


@media (max-width: 640px) {
  .social-btn {
    padding-left: 8px;
    padding-right: 16px;
  }
}

/* ---------- Pestaña Campañas: fechas civicas + eventos internacionales ---------- */
.campaign-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.campaign-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(244, 228, 232, 0.03);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.campaign-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.campaign-row-head input[type="checkbox"] {
  accent-color: var(--pink);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.campaign-emoji {
  font-size: 1.05rem;
  line-height: 1;
}

.campaign-row-head b {
  font-size: .9rem;
  font-weight: 600;
}

.campaign-date {
  color: var(--text-dim);
  font-size: .78rem;
  margin-left: auto;
  white-space: nowrap;
}

.campaign-row.is-today {
  border-color: var(--pink);
  box-shadow: 0 0 0 1px var(--pink) inset;
}

.campaign-row.is-today .campaign-date {
  color: var(--pink);
  font-weight: 600;
}

.campaign-text-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: .85rem;
}

.campaign-text-input:focus {
  outline: none;
  border-color: var(--pink);
}

/* ---------- Registro del sistema (Configuracion) ---------- */
.system-log-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--bg-card, rgba(255,255,255,.02));
}
.system-log-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .78rem;
  margin-bottom: 4px;
}
.system-log-badge {
  font-weight: 600;
}
.system-log-source {
  color: var(--text-dim);
}
.system-log-time {
  color: var(--text-dim);
  margin-left: auto;
}
.system-log-message {
  font-size: .88rem;
  line-height: 1.4;
}
.system-log-meta {
  margin-top: 6px;
  font-size: .72rem;
  color: var(--text-dim);
  font-family: monospace;
  word-break: break-word;
  background: rgba(0,0,0,.15);
  border-radius: 6px;
  padding: 6px 8px;
}

/* ---------- Configuracion: secciones agrupadas (rediseño 2026-09-20) ---------- */
.settings-section-label {
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-dim);
  margin: 0 0 8px 4px;
}

.settings-save-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px;
  margin-bottom: 26px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.settings-save-bar .form-error {
  margin-bottom: 0;
  flex: 1;
  min-width: 160px;
}

/* ---------- Campañas: resumen de que se muestra ahora mismo ---------- */
.campaigns-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  margin-bottom: 18px;
  max-width: 100%;
}

.campaigns-summary-pill b {
  color: var(--text);
}

.campaigns-summary-pill.is-active {
  border-color: var(--pink);
  color: var(--text);
}

@media (max-width: 520px) {
  .campaigns-summary-pill {
    white-space: normal;
  }
}

/* ===== EVENTOS: PANEL (2026-09-24, arreglado a fondo 2026-09-25) =====
   Pedido de Gustavo: que TODOS los eventos comerciales y TODAS las fechas
   civicas (incluidos los 9 aniversarios departamentales) muestren su
   titulo/descripcion (y bandera/escudo/foto si el evento tiene) debajo del
   banner de arriba, con animacion de entrada. Es 100% CSS + los datos que
   ya existen por evento (theme/emoji/blurb) -- no hace falta codigo nuevo
   por cada uno de los 21 eventos.
   [Ronda 33] Gustavo pidio sacar la "barra de flores" (fila de emoji
   repetido debajo del banner) y no volver a usar ese tipo de decoracion en
   ningun otro evento -- se saco esa franja Y el patron de emoji repetido
   que tenia este panel de fondo (mismo criterio: nada de emoji repetido).
   De paso se corrigio un bug real: el orden en el HTML tenia la
   bandera/escudo/foto ANTES del titulo/descripcion, y `max-height: 240px`
   con contenido mas alto (evento con bandera+escudo+foto) tapaba
   (`overflow: hidden`) el titulo y la descripcion enteros -- por eso se
   veia "vacio arriba y la foto muy abajo". Ahora: titulo/descripcion
   primero, imagen despues, y la altura se anima con
   `grid-template-rows` (0fr/1fr) en vez de un numero de pixeles adivinado,
   asi nunca mas corta contenido sin importar cuanto tenga cada evento. El
   fondo plano tambien se cambio por un resplandor suave con el color del
   tema del evento (antes era un bloque oscuro liso). */

.event-panel {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  background: var(--bg-card-2);
  border-bottom: 1px solid var(--border);
  transition: grid-template-rows .45s cubic-bezier(.16, 1, .3, 1), opacity .35s ease;
}

.event-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% -10%, var(--pink), transparent 65%);
  opacity: .16;
  pointer-events: none;
}

.event-panel.open {
  grid-template-rows: 1fr;
  opacity: 1;
  animation: eventPanelIn .5s cubic-bezier(.16, 1, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .event-panel.open {
    animation: none;
  }
}

@keyframes eventPanelIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.event-panel-content {
  position: relative;
  z-index: 1;
  overflow: hidden;
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 24px;
  text-align: center;
}

.event-panel-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 4px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.event-panel-blurb {
  color: var(--text-dim);
  font-size: .86rem;
  line-height: 1.4;
}

.event-panel-media {
  position: relative;
  z-index: 1;
  margin-top: 12px;
}

.event-panel-media.hidden {
  display: none;
}

.event-panel-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.event-panel-badge {
  height: 34px;
  width: auto;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  border: 1px solid var(--border);
  background: #fff;
  object-fit: cover;
}

.event-panel-landmark {
  margin: 0 auto 10px;
  max-width: 220px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}

.event-panel-landmark img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.event-panel-landmark figcaption {
  padding: 3px 6px;
  text-align: center;
}

/* 2026-09-24 (ronda 30): nombre/historia del lugar -- ahora es el texto
   principal del pie de foto (antes solo se veia el credito de Wikimedia). */
.event-panel-landmark-caption {
  display: block;
  font-size: .72rem;
  color: var(--text-dim);
  line-height: 1.3;
}

/* Atribucion de la licencia (CC BY-SA), sigue siendo obligatoria -- se
   mantiene, solo mas chica y tenue, debajo del nombre/historia. */
.event-panel-landmark-credit {
  display: block;
  font-size: .6rem;
  color: var(--text-dim);
  opacity: .55;
  margin-top: 1px;
}

/* Decoracion extra SOLO para Halloween (evento "grande"), pedida por
   Gustavo: telarañas sutiles en las esquinas. Puro CSS (sin imagenes),
   fijo en pantalla, detras de todo el contenido y sin bloquear clics. */
body.event-halloween::before,
body.event-halloween::after {
  content: "";
  position: fixed;
  top: -40px;
  width: 160px;
  height: 160px;
  pointer-events: none;
  z-index: 1;
  opacity: .16;
  background:
    repeating-conic-gradient(from 0deg, var(--pink) 0deg 1deg, transparent 1deg 15deg),
    repeating-radial-gradient(circle, transparent 0, transparent 14px, var(--orange) 15px);
  border-radius: 50%;
}

body.event-halloween::before { left: -40px; }
body.event-halloween::after { right: -40px; }

@media (max-width: 640px) {
  body.event-halloween::before,
  body.event-halloween::after {
    width: 100px;
    height: 100px;
    opacity: .12;
  }
}

/* Mismo lenguaje visual (medallon de esquina, sin imagenes) para Black
   Friday y Oktoberfest -- pedido de Gustavo de que TODOS los eventos
   internacionales tengan "un arreglo que corresponda" (el mencionó estos
   dos como ejemplo, junto a Halloween). Usa los colores reales del tema
   de cada evento (--pink/--orange), asi que ya "corresponde" solo. */
body.event-blackfriday::before,
body.event-blackfriday::after {
  content: "";
  position: fixed;
  top: -30px;
  width: 130px;
  height: 130px;
  pointer-events: none;
  z-index: 1;
  opacity: .14;
  background: repeating-conic-gradient(from 45deg, var(--orange) 0deg 3deg, transparent 3deg 24deg);
  border-radius: 50%;
}
body.event-blackfriday::before { left: -30px; }
body.event-blackfriday::after { right: -30px; }

body.event-oktoberfest::before,
body.event-oktoberfest::after {
  content: "";
  position: fixed;
  top: -30px;
  width: 130px;
  height: 130px;
  pointer-events: none;
  z-index: 1;
  opacity: .14;
  background: repeating-radial-gradient(circle, var(--pink) 0, var(--pink) 3px, transparent 4px, transparent 16px);
  border-radius: 50%;
}
body.event-oktoberfest::before { left: -30px; }
body.event-oktoberfest::after { right: -30px; }

@media (max-width: 640px) {
  body.event-blackfriday::before,
  body.event-blackfriday::after,
  body.event-oktoberfest::before,
  body.event-oktoberfest::after {
    width: 90px;
    height: 90px;
    opacity: .1;
  }
}

/* ===== REFLEXION DEL DIA (2026-09-24) =====
   Pedido de Gustavo: un pequeño espacio con una reflexion/frase corta que
   cambia cada dia, pensado para emprendedores, mamas, jovenes y personas
   mayores -- sin distraer de la funcion principal del sitio (vender +
   soporte por chat), por eso va compacto, sin animacion fuerte y despues
   de la seccion de comunidad. */
.reflection-box {
  padding: 34px 20px;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.reflection-box .wrap {
  max-width: 560px;
  margin: 0 auto;
}

.reflection-emoji {
  display: block;
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.reflection-text {
  color: var(--text-dim);
  font-size: .95rem;
  font-style: italic;
  line-height: 1.5;
}


/* 2026-09-30: pestaña Quejas -- contexto de la conversacion (mensajes,
   fotos, audios) dentro de cada queja + caja de nota con el tema oscuro. */
.quejas-context {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 460px;
  overflow-y: auto;
  padding: 14px 16px;
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  position: relative;
}
.quejas-context.hidden { display: none; }
.quejas-context .quejas-marker span { color: #ffb020; }
.quejas-atts { display: flex; flex-wrap: wrap; gap: 8px; }
.quejas-nota {
  display: block;
  width: 100%;
  max-width: 700px;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  resize: vertical;
}

/* 2026-09-30: resumen de quejas por dia / semana / mes / año */
.quejas-stat-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.quejas-stat-card { flex: 1 1 130px; background: rgba(244, 228, 232, 0.05); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.quejas-stat-card b { font-size: 1.6rem; line-height: 1.1; }
.quejas-stat-card span { font-size: .78rem; opacity: .7; }
.quejas-stat-detail { background: rgba(0, 0, 0, 0.15); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; }
.quejas-gran-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.quejas-gran-btn { background: transparent; color: inherit; border: 1px solid var(--border); border-radius: 999px; padding: 4px 14px; font: inherit; font-size: .82rem; cursor: pointer; }
.quejas-gran-btn.is-active { background: var(--grad); color: #1a0b12; border-color: transparent; font-weight: 600; }
.quejas-stat-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: .84rem; }
.quejas-stat-label { flex: 0 0 150px; opacity: .85; }
.quejas-stat-bar { flex: 1; height: 8px; background: rgba(244, 228, 232, 0.07); border-radius: 4px; overflow: hidden; }
.quejas-stat-bar i { display: block; height: 100%; background: var(--grad); border-radius: 4px; }
.quejas-stat-n { flex: 0 0 34px; text-align: right; }

/* 2026-09-30: Quejas en dos mitades -- lista de quejas a la izquierda y
   dashboard (resumen por dia/semana/mes/año) a la derecha, fijo mientras
   se scrollea la lista. En pantallas angostas se apila (dashboard arriba). */
.quejas-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.quejas-col-list { min-width: 0; }
.quejas-col-stats { position: sticky; top: 12px; min-width: 0; }
.quejas-col-stats .quejas-stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.quejas-col-stats .quejas-stat-card:last-child { grid-column: 1 / -1; }
.quejas-col-stats .quejas-stat-detail { margin-bottom: 0; }
.quejas-col-stats .quejas-stat-label { flex-basis: 130px; }
.quejas-col-list .quejas-nota { max-width: 100%; }
@media (max-width: 1100px) {
  .quejas-layout { grid-template-columns: minmax(0, 1fr); }
  .quejas-col-stats { position: static; order: -1; }
}

/* Plantillas del chat (2026-09-30): toda la tarjeta es clickeable; al pasar el mouse aparece "Utilizar esta plantilla". */
.chat-template-pick { cursor: pointer; position: relative; transition: border-color .15s, background .15s, transform .1s; }
.chat-template-pick:hover, .chat-template-pick:focus-visible { border-color: var(--accent, #ff5a7a); background: rgba(255, 90, 122, .08); outline: none; }
.chat-template-pick:active { transform: scale(.995); }
.chat-template-pick .chat-template-pick-hint {
  opacity: 0; transition: opacity .15s; pointer-events: none;
  font-size: .76rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--accent, #ff5a7a); color: #fff; white-space: nowrap;
}
.chat-template-pick:hover .chat-template-pick-hint, .chat-template-pick:focus-visible .chat-template-pick-hint { opacity: 1; }

/* Agenda en lista por dia (reemplaza la grilla del calendario) */
.calendar-agenda-day { border: 1px solid var(--border, #e5e5e5); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; background: var(--surface, #fff); }
.calendar-agenda-day.is-today { border-color: var(--accent, #7c5cff); box-shadow: 0 0 0 2px rgba(124, 92, 255, .15); }
.calendar-agenda-day.is-past { opacity: .72; }
.calendar-agenda-title { margin: 0 0 8px; font-size: 1rem; text-transform: capitalize; }
.calendar-agenda-count { font-size: .78rem; font-weight: 600; color: var(--text-dim, #777); margin-left: 8px; text-transform: none; }