/* ============================================================
   LANDING — DEMOS INLINE EN LOOP
   Réplicas fieles de componentes reales de la nota (clases gcc-*
   de clinical-chat.css, envueltas en .gcc-panel) animadas por un
   cursor que se reproduce en bucle dentro de la propia página.
   Sin iframe, sin modal.
   ============================================================ */

/* Escenario tipo "pantalla del sistema" */
.lp-stage {
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  overflow: hidden;
}
.lp-stage__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--lp-line);
  background: var(--lp-subtle);
}
.lp-stage__dots { display: flex; gap: 6px; flex: none; }
.lp-stage__dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--lp-line); }
.lp-stage__label {
  font-family: var(--lp-font-mono);
  font-size: 12px;
  color: var(--lp-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-stage__label b { color: var(--lp-ink); font-weight: 600; }

/* La "pantalla": contiene el .gcc-panel real + el cursor.
   position:relative para posicionar el cursor y los ripples. */
.lp-stage__screen {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.lp-stage__screen .gcc-panel {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 22px;
  scrollbar-width: none;
}
.lp-stage__screen .gcc-panel::-webkit-scrollbar { width: 0; height: 0; }
/* La nota es contenido secundario en la landing: bloqueamos interacción real
   (es una demo), el cursor animado hace el trabajo. */
.lp-stage__screen .gcc-panel { pointer-events: none; user-select: none; }

.lp-stage__cap {
  padding: 12px 16px;
  border-top: 1px solid var(--lp-line);
  font-size: 13.5px;
  color: var(--lp-ink-soft);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-stage__cap b { color: var(--lp-ink); font-weight: 600; }
.lp-stage__cap .lp-stage__step {
  flex: none;
  font-family: var(--lp-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--lp-primary);
  border-radius: 999px;
  padding: 2px 9px;
}

/* Cursor animado (mismo trazo que el motor real) */
.lp-demo-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 30;
  transform: translate(-40px, -40px);
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.2, 1);
  will-change: transform;
}
.lp-demo-cursor svg {
  display: block;
  transition: transform 0.12s ease;
  filter: drop-shadow(0 3px 6px rgba(21, 23, 29, 0.32));
}
.lp-demo-cursor.is-press svg { transform: scale(0.8); }

/* Onda de clic */
.lp-demo-ripple {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(6, 109, 240, 0.28);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 25;
}
.lp-demo-ripple.is-go { animation: lpRipple 0.55s ease-out forwards; }
@keyframes lpRipple {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(6); opacity: 0; }
}

/* Entrada suave de filas/tarjetas que el cursor "agrega" */
@keyframes lpIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.lp-demo-in { animation: lpIn 0.32s ease-out both; }

/* Ítem de sugerencia (buscador de medicamentos / interconsultas).
   El menú se muestra/oculta por JS (display inline). */
.lp-stage__screen .lp-sug {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lp-line);
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--lp-ink);
  cursor: default;
}
.lp-stage__screen .lp-sug:last-child { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .lp-demo-cursor { transition: none; }
  .lp-demo-ripple.is-go { animation: none; }
  .lp-demo-in { animation: none; }
}

/* Bloques de demo — 2 por fila en desktop (rejilla limpia) */
.lp-stages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}
.lp-stage-block { width: 100%; }
.lp-stage__intro { margin-bottom: 14px; }
.lp-stage__intro h3 { font-size: 20px; margin-bottom: 6px; }
.lp-stage__intro p { font-size: 14.5px; }

@media (min-width: 992px) {
  .lp-stages { grid-template-columns: 1fr 1fr; gap: 44px 28px; }
  .lp-stage__screen { height: 440px; }
  /* Alinea el inicio de las "pantallas" aunque los intros midan distinto */
  .lp-stage__intro { min-height: 78px; }
}

/* Reveal fade-up (gated con .is-armed: sin JS, todo queda visible) */
.lp-stages.is-armed .lp-stage-block {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--lp-ease), transform 0.6s var(--lp-ease);
}
.lp-stages.is-armed .lp-stage-block.is-in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVO — componentes de nota en móvil
   El motor real deja OD/OI en columnas lado a lado (etiqueta fija
   128px). En pantallas chicas no cabe: aquí, SOLO en la landing
   (scope .lp-stage__screen), apilamos etiqueta + OD + OI en vertical.
   ============================================================ */
@media (max-width: 767.98px) {
  /* Etiqueta arriba, cuerpo abajo (sin la columna fija de 128px) */
  .lp-stage__screen .gcc-row__main { flex-direction: column; gap: 0.35rem; }
  .lp-stage__screen .gcc-row--inline > .gcc-row__main > .gcc-row__head {
    flex: 0 0 auto;
    padding-top: 0;
  }
  .lp-stage__screen .gcc-row--inline > .gcc-row__main > .gcc-row__body { padding-left: 0; }

  /* OD / replicar / OI apilados en vertical */
  .lp-stage__screen .gcc-row__body--cols {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .lp-stage__screen .gcc-row__body--cols .gcc-eye--od,
  .lp-stage__screen .gcc-row__body--cols .gcc-eye--oi {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    justify-content: flex-start;
  }
  /* Cada ojo muestra su propia etiqueta OD/OI (el encabezado sticky se oculta) */
  .lp-stage__screen .gcc-row__body--cols .gcc-eye__tag { display: inline-flex !important; }
  .lp-stage__screen .gcc-eyehead { display: none !important; }

  /* Botón "replicar" pasa a fila horizontal centrada, sin la línea divisoria */
  .lp-stage__screen .gcc-row__mid { align-self: center; padding: 0.1rem 0; }
  .lp-stage__screen .gcc-row__mid::before { display: none; }

  /* Chips (movimientos) a lo ancho, sin mínimo */
  .lp-stage__screen .gcc-eye--chips { min-width: 0; flex: 1 1 auto; }

  /* Un poco menos de padding y alto algo mayor para respirar */
  .lp-stage__screen .gcc-panel { padding: 16px 14px; }
  .lp-stage__screen { height: 460px; }
}