/**
 * La apariencia de RealPanel dentro del tema del cliente.
 *
 * POR QUE SE REESCRIBIO
 * Este archivo pintaba veinte grises fijos de paleta clara y no leia ni una
 * variable del tema. En un sitio oscuro el chat salia como un rectangulo blanco
 * encima de la pagina: la queja de «parece solo insertado» era literalmente
 * eso. Medido en hazointelligence.com el 2026-09-03, con los dos archivos del
 * mismo plugin uno al lado del otro: veinte colores fijos aqui, cero en
 * `reservas.css`.
 *
 * EL CONTRATO ES EL DE `reservas.css`, NO UNO NUEVO
 * Ese archivo ya lo habia resuelto bien y llevaba meses funcionando. Se copia su
 * bloque de variables tal cual en vez de inventar otro, porque lo que lo hace
 * funcionar no es leer `--wp--preset--*` —la mitad de los temas clasicos no
 * publica ninguna— sino que **los respaldos sean relativos**: `currentColor` y
 * `color-mix` heredan del tema aunque el tema no declare nada. Un respaldo
 * absoluto es un color fijo con otro nombre.
 */

.rp-vitrina,
.rp-producto,
.rp-ficha,
.rp-horarios,
.rp-contacto,
.rp-catalogo,
.rp-nav,
.rp-payment-action,
.rp-connect-error,
.rp-chat {
  --rp-acento: var(--wp--preset--color--primary, var(--rp-acento-sitio, currentColor));
  --rp-borde: color-mix(in srgb, currentColor 22%, transparent);
  --rp-tenue: color-mix(in srgb, currentColor 8%, transparent);
  --rp-radio: var(--wp--custom--border-radius, .6rem);
  --rp-hueco: var(--wp--preset--spacing--30, .75rem);
}

/* `color-mix` es reciente; sin el, borde y fondo tenues de la forma de siempre. */
@supports not (color: color-mix(in srgb, currentColor 22%, transparent)) {
  .rp-vitrina, .rp-producto, .rp-ficha, .rp-horarios,
  .rp-contacto, .rp-catalogo, .rp-nav, .rp-payment-action, .rp-connect-error, .rp-chat {
    --rp-borde: currentColor;
    --rp-tenue: transparent;
  }
}

.rp-vitrina__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--rp-hueco);
}

.rp-producto,
.rp-ficha,
.rp-horarios {
  border: 1px solid var(--rp-borde);
  border-radius: var(--rp-radio);
  padding: var(--rp-hueco);
  color: inherit;
}

.rp-producto img,
.rp-ficha img { width: 100%; height: auto; border-radius: calc(var(--rp-radio) * .7); }

.rp-ficha {
  display: grid;
  grid-template-columns: minmax(120px, 280px) 1fr;
  gap: calc(var(--rp-hueco) * 1.65);
}

.rp-connect-frame { display: block; width: 100%; min-height: 500px; border: 0; }

.rp-payment-action {
  margin: 1rem 0;
  padding: var(--rp-hueco);
  border: 1px solid var(--rp-borde);
  border-radius: var(--rp-radio);
}

/*
 * El boton se pinta con el acento del tema, y encima va el color del FONDO de
 * la pagina. Suena raro y es lo correcto: el acento se eligio para destacar
 * sobre ese fondo, asi que invertirlos da un par que ya se sabe legible. Elegir
 * blanco o negro a mano seria adivinar, y sobre un acento claro se pierde.
 */
.rp-payment-action a {
  display: inline-block;
  padding: .65rem 1rem;
  border-radius: calc(var(--rp-radio) * .8);
  background: var(--rp-acento);
  color: var(--rp-sobre-acento, var(--wp--preset--color--base, var(--rp-fondo, canvas)));
  text-decoration: none;
}

/*
 * El error se marca con el borde y el peso, no con un rojo fijo: un rojo de
 * paleta clara sobre fondo oscuro se lee peor que el propio texto del tema.
 */
.rp-connect-error {
  padding: var(--rp-hueco);
  border: 1px solid currentColor;
  border-left-width: 4px;
  border-radius: var(--rp-radio);
  opacity: .85;
}

/*
 * LA MARCA DE REAL CONNECT — la unica excepcion a «ningun color propio»
 *
 * Todo lo demas de este archivo hereda del tema a proposito (ver arriba). La
 * burbuja es distinta: flota SOBRE el sitio, no es contenido incrustado, y es
 * lo que identifica a Real Connect. Un tema que declare su acento sigue
 * ganando; el amarillo es lo que se usa cuando no hay ninguno, que es el caso
 * de la mitad de los temas clasicos.
 *
 * Sobre amarillo la tinta es SIEMPRE oscura. Copiar el patron de «acento con
 * texto blanco» aqui da un contraste de 1.6 y un boton ilegible: es la misma
 * regla que ya llevaba escrita `crm-cart.jsx`, y esta medida.
 */
.rp-chat {
  --rp-marca: #FDE047;
  --rp-marca-clara: #FEF9C3;
  --rp-marca-tinta: #1c1917;
  /* El tema manda; si no dice nada, la marca. */
  --rp-acento: var(--wp--preset--color--primary, var(--rp-marca));
  --rp-sobre-acento: var(--rp-marca-tinta);
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 99999;
  font: 14px/1.4 inherit;
  color: inherit;
}

.rp-chat__toggle {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 0;
  border-radius: 999px;
  padding: .8rem 1.15rem;
  background: linear-gradient(135deg, var(--rp-marca-clara), var(--rp-acento));
  color: var(--rp-sobre-acento);
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 10px 28px rgb(0 0 0 / .28);
  cursor: pointer;
}

.rp-chat__toggle:hover { filter: brightness(1.04); }
.rp-chat__toggle:focus-visible { outline: 2px solid var(--rp-sobre-acento); outline-offset: 3px; }

/* El punto vivo. Sin animacion: una burbuja que parpadea sola distrae. */
.rp-chat__chispa {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: var(--rp-sobre-acento);
  flex: 0 0 auto;
}

/*
 * El panel flota (`position: fixed`) y por tanto NO hereda ningun fondo: tiene
 * que traer uno propio.
 *
 * `--rp-fondo` y `--rp-texto` los publica `frontend.js` midiendo la pagina. El
 * primer intento se apoyo solo en `canvas`/`canvastext`, y esos son los colores
 * del SISTEMA: en un sitio oscuro abierto desde un escritorio en modo claro, el
 * panel seguia saliendo blanco. Se vio en una captura, no leyendo el CSS.
 *
 * Precedencia: lo que declare el tema, lo medido, y el sistema como ultimo
 * recurso si el navegador no deja medir.
 */
.rp-chat__panel {
  clear: both;
  width: min(360px, calc(100vw - 2rem));
  max-height: 520px;
  margin-bottom: var(--rp-hueco);
  border: 1px solid var(--rp-borde);
  border-radius: 1rem;
  background: var(--wp--preset--color--base, var(--rp-fondo, canvas));
  color: var(--wp--preset--color--contrast, var(--rp-texto, canvastext));
  box-shadow: 0 16px 48px rgb(0 0 0 / .2);
  overflow: hidden;
}

.rp-chat__panel header {
  padding: .9rem 1rem;
  background: linear-gradient(135deg, var(--rp-marca-clara), var(--rp-acento));
  color: var(--rp-sobre-acento);
  font-weight: 800;
}

.rp-chat__messages {
  height: 300px;
  padding: var(--rp-hueco);
  overflow: auto;
  background: var(--rp-tenue);
}

.rp-chat__message {
  max-width: 85%;
  margin: .4rem 0;
  padding: .55rem .75rem;
  border: 1px solid var(--rp-borde);
  border-radius: calc(var(--rp-radio) * 1.25);
}

.rp-chat__message--customer {
  margin-left: auto;
  background: var(--rp-acento);
  color: var(--rp-sobre-acento);
  border-color: transparent;
}

.rp-chat__accesos {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0 var(--rp-hueco) var(--rp-hueco);
}

.rp-chat__acceso {
  flex: 1 1 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .75rem;
  border: 1px solid var(--rp-borde);
  border-radius: var(--rp-radio);
  background: var(--rp-tenue);
  color: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}

.rp-chat__acceso:hover {
  background: var(--rp-acento);
  color: var(--rp-sobre-acento);
  border-color: var(--rp-acento);
}

.rp-chat__acceso:focus-visible { outline: 2px solid var(--rp-acento); outline-offset: 2px; }

.rp-chat__estado {
  margin: 0;
  padding: .6rem var(--rp-hueco);
  background: var(--rp-tenue);
  border-top: 1px solid var(--rp-borde);
  font-size: 13px;
  opacity: .85;
}

.rp-chat input:disabled,
.rp-chat form button:disabled { opacity: .55; cursor: not-allowed; }

.rp-chat form { display: flex; gap: .5rem; padding: var(--rp-hueco); }
.rp-chat label { display: flex; flex: 1; }
.rp-chat label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.rp-chat input {
  min-width: 0;
  flex: 1;
  padding: .6rem;
  border: 1px solid var(--rp-borde);
  border-radius: calc(var(--rp-radio) * .8);
  background: transparent;
  color: inherit;
  font: inherit;
}

.rp-chat form button {
  padding: .6rem .8rem;
  border: 1px solid var(--rp-acento);
  border-radius: calc(var(--rp-radio) * .8);
  background: var(--rp-acento);
  color: var(--rp-sobre-acento);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/*
 * La tira de navegacion, para temas cuya cabecera no es un menu de WordPress.
 * Hereda todo del tema: aqui no hay ni un color propio.
 */
.rp-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rp-hueco);
  align-items: center;
}

.rp-nav__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .9rem;
  border: 1px solid var(--rp-borde);
  border-radius: var(--rp-radio);
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.rp-nav__enlace:hover { background: var(--rp-tenue); }
.rp-nav__enlace:focus-visible { outline: 2px solid var(--rp-acento); outline-offset: 2px; }

/* ─────────────────────────────────────────────────────────────
 * EL CATALOGO NATIVO
 *
 * Referencia de composicion: las tiendas modernas de Kadence —rejilla amplia,
 * tarjetas simetricas, mucho aire—. Referencia, no copia: aqui no hay ni un
 * color propio y todo sale del tema, que es lo que hace que parezca suyo.
 *
 * Se mide en CONTENEDOR y no en ventana. El bloque puede vivir en una columna
 * estrecha o a todo lo ancho, y lo que decide cuantas columnas caben es el
 * hueco que tiene, no el tamano de la pantalla.
 * ───────────────────────────────────────────────────────────── */
.rp-catalogo {
  container-type: inline-size;
  --rp-columnas: 3;
  --rp-aire: clamp(1rem, 2.5cqi, 2rem);
  /*
   * ENCIMA DE UNA FOTO NO HAY TEMA, HAY UNA FOTO.
   *
   * Las pastillas del contador y del video van sobre la imagen del producto,
   * que puede ser de cualquier color. Heredar del tema ahi es lo que produce el
   * texto invisible: el unico par que funciona sobre cualquier foto es un velo
   * oscuro con tinta blanca. Son los dos unicos colores propios del catalogo, y
   * estan aqui con nombre para que se vea que es deliberado.
   */
  --rp-velo-foto: rgb(0 0 0 / .62);
  --rp-sobre-foto: #fff;
  color: inherit;
}

.rp-catalogo__oculto {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}

.rp-catalogo__barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rp-hueco);
  align-items: center;
  margin-bottom: var(--rp-aire);
}

.rp-catalogo__buscar { display: flex; flex: 1 1 15rem; }

.rp-catalogo__buscar input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: .6rem .9rem;
  border: 1px solid var(--rp-borde);
  border-radius: var(--rp-radio);
  background: transparent;
  color: inherit;
  font: inherit;
}

.rp-catalogo__cats { display: flex; flex-wrap: wrap; gap: .4rem; }

.rp-catalogo__cat {
  min-height: 48px;
  padding: .5rem 1rem;
  border: 1px solid var(--rp-borde);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.rp-catalogo__cat[aria-pressed="true"] {
  background: var(--rp-acento);
  border-color: var(--rp-acento);
  /* Sobre el acento va el fondo de la pagina: el par ya se sabe legible. */
  color: var(--rp-sobre-acento, var(--wp--preset--color--base, var(--rp-fondo, canvas)));
}

.rp-catalogo__cat:focus-visible,
.rp-catalogo__buscar input:focus-visible { outline: 2px solid var(--rp-acento); outline-offset: 2px; }

.rp-catalogo__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rp-aire);
}

/* Movil primero: una columna a todo el ancho. Las otras dos entran cuando el
 * CONTENEDOR da de si, no cuando lo hace la pantalla. */
@container (min-width: 34rem) {
  .rp-catalogo__rejilla { grid-template-columns: repeat(2, 1fr); }
}

@container (min-width: 52rem) {
  .rp-catalogo__rejilla { grid-template-columns: repeat(var(--rp-columnas), 1fr); }
}

/* Sin `container queries` —navegadores viejos— se cae a la ventana. Peor, pero
 * nunca deja una sola columna en un escritorio. */
@supports not (container-type: inline-size) {
  @media (min-width: 40rem) { .rp-catalogo__rejilla { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64rem) { .rp-catalogo__rejilla { grid-template-columns: repeat(var(--rp-columnas), 1fr); } }
}

.rp-catalogo__tarjeta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rp-borde);
  border-radius: calc(var(--rp-radio) * 1.5);
  overflow: hidden;
  background: var(--rp-tenue);
  color: inherit;
}

.rp-catalogo__tarjeta[hidden] { display: none; }

/* `aspect-ratio` en vez de una altura fija: las tarjetas salen simetricas
 * aunque las fotos vengan de cualquier tamano, que es lo normal. */
.rp-catalogo__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--rp-tenue);
}

.rp-catalogo__media > img,
.rp-catalogo__carrusel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Carrusel sin libreria: desplazamiento nativo con anclaje. El gesto es el que
 * el movil ya conoce y no hay JavaScript que pueda fallar. */
.rp-catalogo__carrusel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.rp-catalogo__carrusel::-webkit-scrollbar { display: none; }
.rp-catalogo__carrusel > img { scroll-snap-align: center; }
.rp-catalogo__carrusel:focus-visible { outline: 2px solid var(--rp-acento); outline-offset: -2px; }

.rp-catalogo__contador,
.rp-catalogo__video {
  position: absolute;
  bottom: .5rem;
  margin: 0;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: var(--rp-velo-foto);
  color: var(--rp-sobre-foto);
  font-size: 12px;
  font-weight: 700;
}

.rp-catalogo__contador { right: .5rem; }
.rp-catalogo__video { left: .5rem; }

.rp-catalogo__cuerpo {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
  padding: var(--rp-aire);
}

.rp-catalogo__cat-etiqueta {
  margin: 0;
  font-size: var(--wp--preset--font-size--small, .8rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .7;
}

.rp-catalogo__nombre {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium, 1.15rem);
  line-height: 1.25;
}

.rp-catalogo__desc { margin: 0; opacity: .8; }

.rp-catalogo__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: .2rem 0 0;
  padding: 0;
  list-style: none;
}

.rp-catalogo__opciones li {
  padding: .15rem .55rem;
  border: 1px solid var(--rp-borde);
  border-radius: 999px;
  font-size: 12px;
  opacity: .85;
}

/* `margin-top:auto` alinea el pie de todas las tarjetas de la fila aunque las
 * descripciones midan distinto. Es lo que las hace parecer simetricas. */
.rp-catalogo__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rp-hueco);
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--rp-hueco);
}

.rp-catalogo__precio {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium, 1.15rem);
  font-weight: 800;
}

.rp-catalogo__cta {
  flex: 1 1 auto;
  min-height: 48px;
  padding: .7rem 1.1rem;
  border: 1px solid var(--rp-acento);
  border-radius: var(--rp-radio);
  background: var(--rp-acento);
  color: var(--rp-sobre-acento, var(--wp--preset--color--base, var(--rp-fondo, canvas)));
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.rp-catalogo__cta:hover { filter: brightness(1.06); }
.rp-catalogo__cta:focus-visible { outline: 2px solid var(--rp-acento); outline-offset: 2px; }

.rp-catalogo__vacio { margin: var(--rp-aire) 0 0; opacity: .8; }

/* ─────────────────────────────────────────────────────────────
 * EL CAJON TRANSACCIONAL
 *
 * Dentro va el mismo `/embed/` de siempre. Lo unico que cambia es que se abre
 * ENCIMA de la pagina en vez de ocuparla: el cliente no siente que ha saltado a
 * otro sistema, que es justo lo que se veia antes.
 *
 * Escritorio: cajon lateral. Movil: hoja a pantalla completa, que es donde el
 * pulgar llega. Se usa `<dialog>` porque el navegador ya sabe atrapar el foco y
 * cerrar con Escape; hacerlo a mano es como se rompen los lectores de pantalla.
 * ───────────────────────────────────────────────────────────── */
.rp-cajon {
  --rp-borde: color-mix(in srgb, currentColor 22%, transparent);
  /* El mismo par que las pastillas del catalogo, y por el mismo motivo: encima
   * del iframe no se sabe que color hay. Ver `--rp-sobre-foto` en `.rp-catalogo`. */
  --rp-velo-foto: rgb(0 0 0 / .62);
  --rp-sobre-foto: #fff;
  padding: 0;
  border: 0;
  max-width: none;
  max-height: none;
  background: transparent;
  color: inherit;
}

.rp-cajon::backdrop { background: rgb(0 0 0 / .55); }

.rp-cajon__marco {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(520px, 100vw);
  background: var(--wp--preset--color--base, var(--rp-fondo, canvas));
  box-shadow: -16px 0 48px rgb(0 0 0 / .28);
  overflow: hidden;
}

.rp-cajon__iframe { display: block; width: 100%; height: 100%; border: 0; }

.rp-cajon__cerrar {
  position: fixed;
  top: .75rem;
  right: .75rem;
  z-index: 1;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid var(--rp-borde);
  border-radius: 999px;
  background: var(--rp-velo-foto);
  color: var(--rp-sobre-foto);
  font-size: 16px;
  cursor: pointer;
}

.rp-cajon__cerrar:focus-visible { outline: 2px solid var(--rp-sobre-foto); outline-offset: 2px; }

/* En movil no hay sitio para un lateral: ocupa la pantalla y se cierra con el
 * boton, que queda dentro del alcance del pulgar. */
@media (max-width: 48rem) {
  .rp-cajon__marco { inset: 0; width: 100vw; box-shadow: none; }
}

.rp-contacto {
  border: 1px solid var(--rp-borde);
  border-radius: var(--rp-radio);
  padding: calc(var(--rp-hueco) * 1.65);
  color: inherit;
}

.rp-contacto__datos {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: .5rem 1rem;
  margin: 0;
}

.rp-contacto__datos dt { font-weight: 700; margin: 0; }
.rp-contacto__datos dd { margin: 0; }
.rp-contacto__ref,
.rp-contacto__mapa { display: block; margin-top: .25rem; }

@media (max-width: 600px) {
  .rp-ficha { grid-template-columns: 1fr; }
  .rp-chat { right: .5rem; bottom: .5rem; }
  .rp-contacto__datos { grid-template-columns: 1fr; gap: .15rem; }
  .rp-contacto__datos dt { margin-top: .6rem; }
}