/* Eventos SpineNet · Monti, el asistente de MonTech (portada, inscripción y mi entrada).
   Toma los colores de cada página: azul marino en la inscripción y en «mi entrada» (sitio.css) y el turquesa de
   SpineNet en la portada, en claro y en oscuro. La bola de Monti va sobre un disco blanco: sus líneas negras no
   se verían sobre un fondo oscuro (igual que en el CRM). */

/* Inscripción y mi entrada */
.monti-raiz {
  --m-fondo: #fff; --m-log: #f3f6fa; --m-burbuja: #fff; --m-borde: #d3dfed; --m-borde-2: #b6c9df;
  --m-texto: #0b2a4a; --m-texto-2: #4a6282; --m-enlace: #1f5fae; --m-boton: #1f5fae; --m-boton-2: #174d8f;
  --m-anillo: #6aa7ee; --m-verde: #11823f; --m-error: #b3261e;
  --m-sombra: 0 18px 50px rgba(11, 42, 74, .22), 0 2px 6px rgba(11, 42, 74, .08);
  --m-radio: 12px; --m-radio-boton: 4px; --m-titular: 75%;
  --m-abajo: calc(16px + env(safe-area-inset-bottom, 0px));
  --m-lado: max(16px, env(safe-area-inset-right, 0px));
}
/* Portada, tema claro */
:root[data-tema='claro'] .monti-raiz {
  --m-log: #f4f8f8; --m-borde: #d0e2e3; --m-borde-2: #b3d0d2;
  --m-texto: #0d2f37; --m-texto-2: #47676d; --m-enlace: #167677; --m-boton: #167677; --m-boton-2: #00404c;
  --m-anillo: #167677; --m-sombra: 0 22px 55px rgba(0, 64, 76, .18), 0 2px 6px rgba(0, 64, 76, .08);
  --m-radio: 20px; --m-radio-boton: 999px; --m-titular: 72%;
}
/* Portada, tema oscuro */
:root[data-tema='oscuro'] .monti-raiz {
  --m-fondo: #072129; --m-log: #04161b; --m-burbuja: #0b2a33; --m-borde: rgba(150, 214, 214, .16); --m-borde-2: rgba(150, 214, 214, .3);
  --m-texto: #e5f2f2; --m-texto-2: #9fc0c3; --m-enlace: #2fb4b4; --m-boton: #167677; --m-boton-2: #1a8788;
  --m-anillo: #2fb4b4; --m-error: #ff8a95; --m-sombra: 0 24px 70px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(150, 214, 214, .14);
  --m-radio: 20px; --m-radio-boton: 999px; --m-titular: 72%;
}
/* Teléfono y tableta de la portada: Monti va en el sitio de la barra fija «Inscribirme», a su derecha (48 px, como el
   botón). Flotando encima tapaba los botones de las escenas (el «12°» de las medidas). Está siempre en ese sitio, con la
   barra a la vista o no: así no cambia de tamaño ni de lugar al aparecer la barra. Acostado (sin barra) va igual. */
@media (max-width: 899px), (orientation: landscape) and (max-height: 500px) {
  :root.con-monti .fijo { padding-right: calc(max(14px, env(safe-area-inset-right, 0px)) + 58px); }
  .fijo ~ .monti-raiz { --m-abajo: calc(8px + env(safe-area-inset-bottom, 0px)); --m-lado: max(14px, env(safe-area-inset-right, 0px)); }
  .fijo ~ .monti-raiz .monti-fab, .fijo ~ .monti-raiz .monti-fab .monti-marca { width: 48px; height: 48px; }
  .fijo ~ .monti-raiz .monti-fab { padding: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .16); }
  /* Una ventana de computadora ancha y baja (1280×480) cumple también la regla de la píldora: aquí manda el redondo. */
  .fijo ~ .monti-raiz .monti-fab__texto { display: none; }
}
/* Acostado, la pista «Desliza de lado para girar» va en la esquina de abajo (interactiva.css): a la izquierda del botón. */
@media (orientation: landscape) and (max-height: 500px) {
  :root.con-monti .pista { right: calc(max(16px, env(safe-area-inset-right, 0px)) + 58px); }
}

/* ---------- Botón ---------- */
.monti-fab {
  position: fixed; z-index: 27; right: var(--m-lado); bottom: var(--m-abajo);
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0; border: 0; border-radius: 999px;
  font: 600 15px/1 'IBM Plex Sans', system-ui, sans-serif; color: var(--m-texto); background: transparent; cursor: pointer;
  box-shadow: var(--m-sombra); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .2s ease, box-shadow .2s ease, opacity .15s ease;
  animation: monti-entra .45s cubic-bezier(.22, 1, .36, 1) .6s backwards;
}
.monti-fab .monti-marca { width: 56px; height: 56px; }
/* En «mi entrada», mientras tapa un «Copiar» (monti.js, apartarseDeCopiar). */
.monti-fab--aparte { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, visibility 0s .15s; }
.monti-fab__texto { display: none; }
.monti-fab:focus-visible { outline: 3px solid var(--m-anillo); outline-offset: 3px; }
.monti-fab[aria-expanded='true'] { box-shadow: 0 0 0 3px var(--m-anillo), var(--m-sombra); }
.monti-marca {
  display: block; box-sizing: border-box; padding: 9%; border-radius: 50%; object-fit: contain;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 42, 74, .1); -webkit-user-select: none; user-select: none;
}
/* En la computadora el botón dice qué es. En vertical, hasta 1099 px, la tarjeta de cada escena va abajo y la píldora
   se le montaba encima (V2-APA-02): ahí va el botón redondo. */
@media (min-width: 1100px), (min-width: 900px) and (orientation: landscape) and (min-height: 501px) {
  .monti-raiz { --m-abajo: calc(24px + env(safe-area-inset-bottom, 0px)); --m-lado: max(24px, env(safe-area-inset-right, 0px)); }
  .monti-fab { padding: 0 20px 0 0; background: var(--m-fondo); box-shadow: var(--m-sombra), inset 0 0 0 1px var(--m-borde); }
  .monti-fab .monti-marca { box-shadow: none; }
  .monti-fab__texto { display: inline; }
}
@keyframes monti-entra { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } }

/* ---------- Panel ---------- */
.monti {
  position: fixed; z-index: 45; right: var(--m-lado); bottom: calc(var(--m-abajo) + 68px);
  display: flex; flex-direction: column; width: 384px; max-width: calc(100vw - 32px);
  height: 600px; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px);
  overflow: hidden; border-radius: var(--m-radio); background: var(--m-fondo); color: var(--m-texto);
  box-shadow: var(--m-sombra), inset 0 0 0 1px var(--m-borde);
  font: 400 15px/1.5 'IBM Plex Sans', system-ui, sans-serif; text-align: left;
  transform-origin: bottom right; animation: monti-abre .2s cubic-bezier(.22, 1, .36, 1) both;
}
.monti[hidden] { display: none; }
@keyframes monti-abre { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.monti__cabeza { display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 16px; border-bottom: 1px solid var(--m-borde); }
.monti__logo .monti-marca { width: 40px; height: 40px; }
.monti__titulo { flex: 1; min-width: 0; }
.monti__titulo h2 {
  margin: 0; font: 800 22px/1 'Archivo', sans-serif; font-stretch: var(--m-titular); text-transform: uppercase;
  letter-spacing: .01em; color: var(--m-texto);
}
.monti__titulo h2 a {
  margin-left: 4px; font: 600 12px/1 'IBM Plex Sans', sans-serif; letter-spacing: .02em; text-transform: none;
  color: var(--m-texto-2); text-decoration: none; white-space: nowrap;
  /* 44 px para el dedo sin que se vea más grande. */
  display: inline-block; padding: 14px 0; margin-top: -14px; margin-bottom: -14px;
}
.monti__titulo p { margin: 3px 0 0; font-size: 13px; line-height: 1.3; color: var(--m-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monti__cerrar {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  color: var(--m-texto-2); background: none; cursor: pointer; touch-action: manipulation;
}
.monti :focus-visible { outline: 3px solid var(--m-anillo); outline-offset: 2px; }
.monti__ico { display: inline-flex; flex: none; }
.monti__ico svg { display: block; }

.monti__log {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--m-log);
}
.monti__msg { max-width: 92%; padding: 10px 13px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.monti__msg p { margin: 0; }
.monti__msg p + p { margin-top: 6px; }
.monti__msg b { font-weight: 700; }
.monti__msg--bot { align-self: flex-start; color: var(--m-texto); background: var(--m-burbuja); border-radius: 16px 16px 16px 4px; box-shadow: inset 0 0 0 1px var(--m-borde); }
.monti__msg--yo { align-self: flex-end; color: #fff; background: var(--m-boton); border-radius: 16px 16px 4px 16px; white-space: pre-wrap; }

.monti__lista { margin: 8px 0 0; padding-left: 18px; }
.monti__lista li + li { margin-top: 4px; }
.monti__lista li::marker { color: var(--m-enlace); }
.monti__sub { margin-top: 12px !important; font: 700 12px/1.2 'Archivo', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--m-enlace); }
.monti__filas { margin: 6px 0 0; padding: 0; list-style: none; }
.monti__filas li { display: grid; grid-template-columns: minmax(64px, auto) 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--m-borde); font-size: 14px; line-height: 1.4; }
.monti__filas li:first-child { border-top: 0; }
.monti__filas b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.monti__filas small { display: block; margin-top: 1px; font-size: 13px; color: var(--m-texto-2); }

.monti__botones, .monti__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.monti__boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: var(--m-radio-boton); font: 600 14px/1.2 'IBM Plex Sans', sans-serif; text-align: center;
  text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background .15s, box-shadow .15s, color .15s;
}
.monti__boton--principal { color: #fff; background: var(--m-boton); }
.monti__boton--wa { color: #fff; background: var(--m-verde); }
.monti__boton--borde { color: var(--m-texto); background: var(--m-fondo); box-shadow: inset 0 0 0 1.5px var(--m-borde-2); }
.monti__boton:disabled { opacity: .55; cursor: default; }
.monti__chip {
  min-height: 44px; padding: 7px 14px; border: 0; border-radius: 999px; font: 500 14px/1.25 'IBM Plex Sans', sans-serif;
  text-align: left; color: var(--m-texto); background: var(--m-fondo); box-shadow: inset 0 0 0 1px var(--m-borde-2);
  cursor: pointer; touch-action: manipulation; transition: color .15s, box-shadow .15s;
}
.monti__nota { margin-top: 8px !important; font-size: 13px; color: var(--m-texto-2); }

/* Cédula y correo dentro de la conversación (16 px: el iPhone no acerca la pantalla al escribir). */
.monti__form { display: grid; gap: 6px; margin-top: 10px; }
.monti__form label { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--m-texto-2); }
.monti__cedula { display: grid; grid-template-columns: 76px 1fr; gap: 6px; }
.monti__form input, .monti__form select {
  width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: 8px;
  font: 400 16px/1 'IBM Plex Sans', sans-serif; color: var(--m-texto); background: var(--m-fondo);
  box-shadow: inset 0 0 0 1.5px var(--m-borde-2); -webkit-appearance: none; appearance: none;
}
.monti__form select {
  padding-right: 26px; cursor: pointer;
  background: var(--m-fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237d95a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.5 6 6l4.5-4.5'/%3E%3C/svg%3E") no-repeat right 10px center / 11px 8px;
}
.monti__form input:focus, .monti__form select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--m-enlace); }
.monti__form .monti__boton { margin-top: 6px; }
.monti__error { margin: 2px 0 0 !important; font-size: 14px; color: var(--m-error); }

.monti__puntos { display: inline-flex; gap: 4px; padding: 5px 2px; }
.monti__puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--m-texto-2); animation: monti-punto .9s infinite ease-in-out; }
.monti__puntos i:nth-child(2) { animation-delay: .15s; }
.monti__puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes monti-punto { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

.monti__pie { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--m-borde); background: var(--m-fondo); }
.monti__input {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 0; border-radius: 999px;
  font: 400 16px/1 'IBM Plex Sans', sans-serif; color: var(--m-texto); background: var(--m-log);
  box-shadow: inset 0 0 0 1.5px var(--m-borde-2);
}
.monti__input::placeholder { color: var(--m-texto-2); opacity: 1; }
.monti__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--m-enlace); }
.monti__enviar {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  color: #fff; background: var(--m-boton); cursor: pointer; touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  .monti-fab:hover { transform: translateY(-2px); }
  .monti__titulo h2 a:hover { color: var(--m-enlace); text-decoration: underline; text-underline-offset: 2px; }
  .monti__cerrar:hover { color: var(--m-texto); background: var(--m-log); }
  .monti__boton--principal:hover { background: var(--m-boton-2); }
  .monti__boton--wa:hover { background: #0f7a40; }
  .monti__boton--borde:hover { color: var(--m-enlace); box-shadow: inset 0 0 0 1.5px var(--m-enlace); }
  .monti__chip:hover { color: var(--m-enlace); box-shadow: inset 0 0 0 1.5px var(--m-enlace); }
  .monti__enviar:hover { background: var(--m-boton-2); }
}

/* ---------- Teléfono, también acostado: el panel ocupa la pantalla (monti.js lo ajusta al teclado) ---------- */
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
  .monti {
    top: 0; left: 0; right: 0; bottom: auto; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none;
    border-radius: 0; padding-top: env(safe-area-inset-top, 0px);
    /* Con el teclado abierto, Safari deja ver la página por debajo del panel, detrás de su barra translúcida: la sombra
       (que el overflow del panel no recorta) pinta todo lo de alrededor con el fondo del panel. */
    box-shadow: 0 0 0 100vmax var(--m-fondo);
    animation-name: monti-sube;
  }
  .monti__cabeza { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
  .monti__log { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .monti__pie {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  /* visibility y no display: así, al cerrar, el botón no repite su animación de entrada (V2-APA-08). */
  .monti-abierto .monti-fab { visibility: hidden; }
  /* Teclado abierto con el teléfono acostado (poco alto): cabecera de una línea y pie sin la zona de abajo (V2-APA-01). */
  .monti--bajo .monti__logo, .monti--bajo .monti__titulo p { display: none; }
  .monti--bajo .monti__cabeza { padding-top: 2px; padding-bottom: 2px; }
  .monti--bajo .monti__titulo h2 { font-size: 18px; }
  .monti--bajo .monti__log { padding-top: 8px; padding-bottom: 8px; }
  .monti--bajo .monti__pie { padding-top: 6px; padding-bottom: 6px; }
  /* Safari de iOS 15: la página de detrás se fija mientras Monti está abierto (V2-APA-09; monti.js pone el top). */
  .monti-fijo { position: fixed; left: 0; right: 0; width: 100%; }
  /* Detrás del panel la página no se desplaza. */
  :root.monti-abierto, .monti-abierto body { overflow: hidden; }
  .monti__msg { max-width: 94%; }
}
@keyframes monti-sube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .monti-fab, .monti, .monti__puntos i { animation: none; }
  .monti-fab:hover { transform: none; }
}
@media print { .monti-raiz { display: none !important; } }