/*
 * Modal "La mesa se arma" (Opción A) — overlay de silla-seleccion.js.
 * El anclaje (position fixed, z-index máximo, pointer-events) va inline en el
 * JS a propósito: si esta hoja no carga, el velo igual bloquea el mapa.
 * Inline solo van además las posiciones calculadas de cada silla.
 */
.lch-mo {
  --lch-mo-oro: #d9b36a;
  --lch-mo-oro-claro: #f6dc9a;
  --lch-mo-oro-oscuro: #c8912f;
  --lch-mo-coral: #f08a74;
  --lch-mo-texto: #f3ead8;
  --lch-mo-tenue: #b9ab90;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px 16px;
  background: rgba(8, 5, 3, .86);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: var(--lch-mo-texto);
  font-family: Montserrat, sans-serif;
  text-align: center;
  overflow-y: auto;
}
.lch-mo *, .lch-mo *::before, .lch-mo *::after { box-sizing: border-box; }

/* --- La mesa --- */
.lch-mo-mesa {
  position: relative;
  flex: none;
  width: min(300px, 70vw);
  aspect-ratio: 1;
}
.lch-mo-disco {
  position: absolute;
  inset: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid transparent;
  border-radius: 50%;
  background:
    radial-gradient(#2b1b0f, #0b0705) padding-box,
    linear-gradient(135deg, #fbe7ab, #c8912f 55%, #f6dc9a) border-box;
  box-shadow: 0 0 18px rgba(217, 179, 106, .18);
  animation: lch-mo-latido 1.6s ease-in-out infinite;
}
.lch-mo-logo {
  display: block;
  width: 78%;
  height: auto;
}
.lch-mo--done .lch-mo-disco {
  box-shadow: 0 0 34px rgba(246, 220, 154, .55), 0 0 70px rgba(200, 145, 47, .3);
}
.lch-mo--error .lch-mo-disco,
.lch-mo--notice .lch-mo-disco { animation: none; }

/* --- Sillas --- */
.lch-mo-silla {
  position: absolute;
  width: 12%;
  height: 9%;
  border-radius: 5px;
  border: 2px dashed rgba(217, 179, 106, .45);
  background: transparent;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.lch-mo-mesa--grande .lch-mo-silla {
  width: 9.5%;
  height: 7.5%;
}
.lch-mo-silla--proceso {
  border: 2px solid var(--lch-mo-oro-claro);
  box-shadow: 0 0 10px rgba(246, 220, 154, .6);
  animation: lch-mo-pulso .9s ease-in-out infinite;
}
.lch-mo-silla--apartada {
  border: 2px solid var(--lch-mo-oro-claro);
  background: linear-gradient(135deg, var(--lch-mo-oro-claro), var(--lch-mo-oro-oscuro));
  box-shadow: 0 0 12px rgba(246, 220, 154, .55);
}
.lch-mo-silla--fallida {
  border: 2px solid var(--lch-mo-coral);
  background: rgba(240, 138, 116, .22);
}

/* --- Textos --- */
.lch-mo-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 420px;
}
.lch-mo-titulo {
  margin: 0;
  font-family: Oswald, Montserrat, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lch-mo-oro);
}
.lch-mo-script {
  margin: 0;
  font-family: "Pinyon Script", "Snell Roundhand", "Apple Chancery", Lora, cursive;
  font-style: italic;
  font-size: 30px;
  line-height: 1.2;
  color: var(--lch-mo-oro-claro);
}
.lch-mo-sub,
.lch-mo-texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}
.lch-mo-contador {
  margin: 0;
  font-size: 15px;
  color: var(--lch-mo-tenue);
}
.lch-mo-contador strong {
  font-family: Oswald, Montserrat, sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--lch-mo-oro);
  vertical-align: -3px;
}
.lch-mo-nota,
.lch-mo-ayuda {
  margin: 0;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--lch-mo-tenue);
}
.lch-mo-ayuda a {
  color: var(--lch-mo-oro);
  text-decoration: underline;
}

/* --- Botones --- */
.lch-mo-acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  width: 100%;
}
.lch-mo-btn {
  position: relative;
  overflow: hidden;
  min-width: 240px;
  max-width: 100%;
  padding: 13px 26px;
  border: 2px solid var(--lch-mo-oro);
  border-radius: 999px;
  background: transparent;
  color: var(--lch-mo-oro-claro);
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.lch-mo-btn--lleno {
  background: linear-gradient(135deg, var(--lch-mo-oro-claro), var(--lch-mo-oro-oscuro));
  color: #17100c;
}
.lch-mo-btn:focus-visible,
.lch-mo-link:focus-visible {
  outline: 2px solid var(--lch-mo-oro-claro);
  outline-offset: 3px;
}
/* Relleno de la cuenta regresiva del botón "Ir al carrito". */
.lch-mo-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--lch-mo-oro-claro), var(--lch-mo-oro-oscuro));
  transform: scaleX(0);
  transform-origin: left center;
  animation: lch-mo-relleno var(--lch-mo-dur, 3000ms) linear forwards;
}
.lch-mo-cta span {
  position: relative;
  color: #fff;
  text-shadow: 0 1px 3px rgba(23, 16, 12, .85);
}
.lch-mo-link {
  padding: 4px;
  border: 0;
  background: none;
  color: var(--lch-mo-tenue);
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 480px) {
  .lch-mo { gap: 16px; }
  .lch-mo-mesa { width: min(260px, 70vw); }
  .lch-mo-titulo { font-size: 19px; }
  .lch-mo-script { font-size: 26px; }
}

@keyframes lch-mo-latido {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.04); }
  30% { transform: scale(1); }
  45% { transform: scale(1.025); }
}
@keyframes lch-mo-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@keyframes lch-mo-relleno {
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lch-mo-disco,
  .lch-mo-silla--proceso { animation: none; }
  .lch-mo-silla { transition: none; }
  .lch-mo-cta::before { display: none; }
}