/* Pagina publica del agente experto — diseño de LaiaDesk (2026-09-17).
 *
 * Tokens tomados del CSS REAL de laiadesk.com (no de memoria): fondo navy #00125F,
 * superficies #0A2074 / #000B3F, hairlines #26346F, texto #EEF1FB y #9AA6D4, acento
 * indigo #8B9BF0 (texto) y #5568C4 (boton), pop del logo #FF6B45 y #37B94C.
 * Tipografias de marca: Gabarito (titulares) + Exo (interfaz).
 * Botones: 13px 22px, radio 12px, peso 600 y la misma sombra de la web.
 */
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;600;700&family=Exo:wght@400;500;600&display=swap');

:root {
  --base: #00125F;      /* fondo principal */
  --raised: #0A2074;    /* superficie un tono arriba */
  --card: #000B3F;      /* superficie un tono abajo */
  --deep: #000626;
  --line: #26346F;
  --high: #EEF1FB;      /* texto principal */
  --mid: #9AA6D4;       /* texto secundario */
  --faint: #6E7AAE;
  --accent: #5568C4;    /* fondo de boton primario */
  --accent-hi: #6377D6;
  --accent-text: #8B9BF0;
  --accent-soft: rgba(139, 155, 240, .14);
  --warm: #FF6B45;
  --green: #37B94C;
  --shadow-btn: 0 1px 2px rgba(0, 3, 20, .3), 0 12px 32px -10px rgba(85, 104, 196, .6);
  --font-head: 'Gabarito', ui-rounded, system-ui, sans-serif;
  --font-body: 'Exo', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--base); color: var(--high);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; margin: 0; }

/* ---- estructura: cabecera fija como en la web + panel de conversacion ---- */
.agent-page { display: flex; align-items: stretch; justify-content: center; }
.agent-app { width: 100%; max-width: 820px; height: 100dvh; display: flex; flex-direction: column; }

.agent-head {
  position: sticky; top: 0; z-index: 10; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 76px; padding: 0 20px;
  border-bottom: 1px solid rgba(38, 52, 111, .5);
  background: rgba(0, 18, 95, .8); backdrop-filter: blur(12px);
}
.agent-logo { height: 28px; width: auto; display: block; }
.agent-title { font-size: 1rem; font-weight: 600; color: var(--high); }
.agent-sub { font-size: .8rem; color: var(--mid); }
.agent-id { text-align: right; }

/* ---- conversacion ---- */
.agent-chat { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 20px 8px; }
.agent-msg {
  max-width: 86%; border-radius: 16px; padding: 12px 16px; margin: 12px 0;
  background: var(--card); border: 1px solid rgba(38, 52, 111, .55);
  overflow-wrap: anywhere;
}
.agent-msg.me { margin-left: auto; background: var(--raised); border-color: rgba(139, 155, 240, .22); }
.agent-msg.partial { opacity: .55; font-style: italic; }
.agent-msg .who {
  display: block; font-family: var(--font-head); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); margin-bottom: 4px;
}
.agent-msg.me .who { color: var(--faint); }
.agent-msg .body { font-size: 1.02rem; line-height: 1.55; color: var(--high); }

/* ---- barra inferior ---- */
.agent-bar {
  flex: 0 0 auto; display: flex; gap: 10px; align-items: center;
  padding: 12px 20px; border-top: 1px solid rgba(38, 52, 111, .5); background: rgba(0, 6, 38, .4);
}
.agent-bar input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px;
  padding: 13px 16px; border-radius: 12px;
  background: rgba(10, 32, 116, .55); color: var(--high);
  border: 1px solid var(--line);
}
.agent-bar input::placeholder { color: var(--faint); }
.agent-bar input:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  padding: 13px 22px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); color: #EEF1FB; background: transparent;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .25s ease;
}
.btn.primary { background: var(--accent); border-color: transparent; box-shadow: var(--shadow-btn); }
.btn.primary:hover { background: var(--accent-hi); }
.btn:active { transform: translateY(1px); }

.mic-round {
  width: 54px; height: 54px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
  font-size: 21px; color: var(--high);
  background: rgba(139, 155, 240, .14); border: 1px solid var(--accent-text);
  transition: background-color .2s ease, box-shadow .25s ease;
}
.mic-round:hover { background: rgba(139, 155, 240, .24); }
.mic-round.on { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 6px rgba(55, 185, 76, .18); }

.agent-state { flex: 0 0 auto; font-size: .82rem; color: var(--mid); min-height: 1.3em; padding: 0 20px 6px; }
.agent-foot { flex: 0 0 auto; font-size: .72rem; color: var(--faint); text-align: center; padding: 0 20px 12px; }

/* ---- puerta (enlace no valido, limite alcanzado, tiempo agotado) ---- */
.agent-gate { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; }
.agent-gate h2 { font-size: 1.6rem; color: var(--high); margin-bottom: 10px; }
.agent-gate p { color: var(--mid); max-width: 32rem; margin: 0; }
.agent-gate .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warm); margin-bottom: 18px; box-shadow: 0 0 0 6px rgba(255, 107, 69, .16); }

/* ---- responsivo ---- */
@media (max-width: 640px) {
  body { font-size: 14px; }
  .agent-head { height: 64px; padding: 0 14px; }
  .agent-logo { height: 24px; }
  .agent-sub { display: none; }
  .agent-chat { padding: 16px 14px 6px; }
  .agent-msg { max-width: 94%; padding: 11px 14px; }
  .agent-bar { padding: 10px 14px; gap: 8px; }
  .agent-bar input { padding: 12px 14px; }
  .btn { padding: 12px 16px; }
  .mic-round { width: 50px; height: 50px; }
  .agent-state, .agent-foot { padding-left: 14px; padding-right: 14px; }
}