/* widgets/lon-calendly/widget.css · Gate de consentimiento del embed de Calendly
 *
 * Lo que ya existe en el sistema de diseño NO se repite aquí:
 *   .calendly-wrap  fondo, radio, sombra y overflow de la caja  (assets/site.css)
 *   .btn .btn-primary  el botón                                 (assets/components.css)
 *   .mini-note      la nota de respaldo                         (assets/site.css)
 *
 * Este archivo solo añade dos cosas que el sistema no cubre:
 *   1. la maquetación interna del gate (centrado, aire, ancho de lectura)
 *   2. la altura variable, porque en el fuente estaba clavada a 680 px
 *
 * ---------------------------------------------------------------------------
 * Por qué todos los selectores llevan `.elementor` delante
 * ---------------------------------------------------------------------------
 * Elementor 4 genera `uploads/elementor/css/base-desktop.css` con los estilos
 * base de los elementos atómicos a especificidad (0,2,0), del tipo
 * `.elementor .e-button-base { background-color:#375EFB }`. El sistema de diseño
 * del tema vale (0,1,0) y pierde siempre. Por eso `assets/elementor-atomic.css`
 * reemite el sistema entero con `.elementor` de ancestro, también a (0,2,0), y se
 * encola por detrás de las hojas de Elementor. Ese puente incluye estas dos
 * reglas, copiadas del fuente:
 *
 *   .elementor .calendly-wrap        { min-height: 680px }   (0,2,0)
 *   .elementor .calendly-wrap iframe { height: 680px }       (0,2,1)
 *
 * Una hoja de widget a (0,1,0) no las mueve. El control de altura del panel se
 * quedaría en decorativo: el CEO arrastra el deslizador y no pasa nada.
 *
 * La respuesta, sin un solo !important, tiene dos capas:
 *
 *   1. `.elementor` de ancestro en cada selector. Sube la hoja a (0,2,0) y la
 *      empata con el puente. El widget solo se pinta dentro del wrapper
 *      `.elementor`, así que el prefijo no cambia a qué elementos aplica: es
 *      lastre de especificidad puro. Resuelto el empate, decide el orden de la
 *      cascada, y de eso se encarga `lon_widget_styles_to_tail()` en
 *      inc/widgets.php, que manda esta hoja al final de la cola de impresión.
 *
 *   2. Las dos reglas que van de frente contra el puente (altura de la caja y
 *      altura del iframe) usan el selector compuesto `.calendly-wrap.lon-calendly`,
 *      que vale (0,3,0) y (0,3,1). Ganan por especificidad y no dependen del orden
 *      de encolado, así que el control de altura sigue funcionando aunque alguien
 *      quite el reordenado, cachee el HTML o concatene las hojas. El nodo raíz
 *      lleva las dos clases de verdad: el selector no es un truco, describe el DOM.
 *
 * El resto de reglas (gate, aviso, respaldo, foco) no compiten contra nada del
 * puente y les basta (0,2,0) más el orden de la cola.
 */

/* Caja del calendario. La altura sale del control del panel, inyectada como
   custom property en el atributo style del nodo. (0,3,0) contra (0,2,0). */
.elementor .calendly-wrap.lon-calendly {
  min-height: var(--lon-calendly-height, 680px);
  display: grid;
}

/* El iframe, cuando el JS lo inyecta tras el clic. (0,3,1) contra (0,2,1). */
.elementor .calendly-wrap.lon-calendly iframe {
  width: 100%;
  height: var(--lon-calendly-height, 680px);
  border: 0;
  display: block;
}

/* ---- El gate: lo único que se pinta antes del consentimiento ---- */

.elementor .lon-calendly__gate {
  display: grid;
  gap: 18px;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: clamp(24px, 5vw, 56px);
  min-height: inherit;
}

.elementor .lon-calendly__notice {
  margin: 0;
  max-width: 56ch;
  font: 400 15px/1.65 var(--font-body);
  color: var(--text-muted);
}

.elementor .lon-calendly__fallback {
  margin: 0;
  max-width: 56ch;
}

.elementor .lon-calendly__fallback a {
  color: inherit;
  text-underline-offset: 3px;
}

/* Foco visible sin depender del outline del navegador, que la caja recorta.
   (0,3,0), por encima del `.elementor :focus-visible` del puente. */
.elementor .lon-calendly__accept:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* Mientras el iframe carga, la caja no se colapsa ni da salto de layout. */
.elementor .calendly-wrap.lon-calendly[data-lon-calendly-loading="true"] {
  display: grid;
  place-items: center;
}

@media (max-width: 640px) {
  .elementor .lon-calendly__gate {
    gap: 14px;
  }
}

/* ============================================================================
   Previsualización del calendario  ·  decisión CEO 2026-07-09
   ----------------------------------------------------------------------------
   Antes del consentimiento la caja mostraba solo el aviso y el botón sobre
   fondo liso. En el original, en cambio, se ve el calendario cargado. Para
   acercar el estado previo al original SIN cargar Calendly (RGPD), se pinta un
   esqueleto de calendario de fondo y el gate flota como tarjeta encima. Cero
   peticiones a terceros: el esqueleto es CSS puro, el iframe sigue sin existir
   hasta el clic. No cambia la altura de la caja (el esqueleto es absoluto).
   Especificidad (0,2,0), suficiente: no compite con el puente.
============================================================================= */
.elementor .calendly-wrap.lon-calendly {
  position: relative;
  place-items: center;
}

/* Esqueleto de fondo: imita el selector de eventos de Calendly (titulo + dos
   opciones de cita), no un calendario de rejilla, que es lo que carga de verdad.
   Barras tenues, cero color de marca, para que lea como "cargando" y no choque
   con el contenido blanco del original. Absoluto: no cambia la altura de la caja. */
.elementor .lon-calendly__preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  padding: clamp(40px, 7vw, 72px) clamp(24px, 6vw, 90px);
  opacity: .5;
  pointer-events: none;
}
.elementor .lon-cal-head {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%;
}
.elementor .lon-cal-brand {
  width: 46px; height: 46px; border-radius: 50%;
  background: color-mix(in srgb, var(--line) 40%, transparent);
}
.elementor .lon-cal-title {
  width: min(220px, 60%); height: 15px; border-radius: 999px;
  background: color-mix(in srgb, var(--line) 55%, transparent);
}
.elementor .lon-cal-sub {
  width: min(320px, 82%); height: 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--line) 30%, transparent);
}
.elementor .lon-cal-events {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; max-width: 560px; margin-top: 8px;
}
.elementor .lon-cal-event {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}
.elementor .lon-cal-dot {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  background: color-mix(in srgb, var(--line) 55%, transparent);
}
.elementor .lon-cal-lines { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.elementor .lon-cal-lines > span { height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--line) 40%, transparent); }
.elementor .lon-cal-lines > span:nth-child(1) { width: 55%; }
.elementor .lon-cal-lines > span:nth-child(2) { width: 82%; }
.elementor .lon-cal-lines > span:nth-child(3) { width: 68%; }
.elementor .lon-cal-arrow { color: var(--text-soft); font-size: 22px; flex: 0 0 auto; }

/* El gate, flotando como tarjeta sobre el esqueleto */
.elementor .lon-calendly__gate {
  position: relative;
  z-index: 1;
  gap: 16px;
  max-width: 440px;
  margin: clamp(16px, 4vw, 40px);
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sh-3);
  min-height: 0;
}
@supports not (backdrop-filter: blur(1px)) {
  .elementor .lon-calendly__gate { background: var(--surface); }
}

@media (max-width: 640px) {
  .elementor .lon-cal-slots { display: none; }
}

/* ---------------------------------------------------------------------------
   Ancho del marco cuando el calendario se pinta directo (2026-08-07)
   ---------------------------------------------------------------------------
   Un `<iframe>` sin atributos de medida vale 300x150 por defecto. Mientras
   hubo puerta de consentimiento eso no se notaba: el texto del aviso estiraba
   la caja hasta el ancho de su contenedor. Al quitar la puerta y dejar solo el
   marco, la caja se quedo en esos 300 puntos dentro de un contenedor de 1248, y
   un calendario de 300 de ancho no se puede usar.

   Se le da el ancho al widget y al marco. El alto sigue saliendo del control
   del panel, que es lo que ya hacia la regla de mas arriba.
   --------------------------------------------------------------------------- */
.elementor .lon-calendly {
  width: 100%;
}

.elementor .calendly-wrap.lon-calendly--directo iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}