/* ===========================================================================
   Lumyn · Identidad visual (BrandBook 2026)
   El grueso del layout viene de Tailwind (CDN). Acá definimos la paleta de
   marca como variables y reestilizamos los componentes propios (chat, etc.)
   con buen contraste (WCAG AA mínimo).
   =========================================================================== */

:root {
  /* Paleta de marca (hex exactos del BrandBook) */
  --lmy-circuit:    #033435;  /* Circuit green — primario oscuro */
  --lmy-circuit-700:#04494a;  /* hover/variante del primario */
  --lmy-green:      #02E676;  /* LMY Green — acento vivo (NO texto chico s/ blanco) */
  --lmy-green-700:  #0a7f4d;  /* verde oscurecido: SÍ pasa AA como texto s/ blanco */
  --lmy-cyan:       #22B6E6;  /* cyan del gradiente de acento */
  --lmy-platinum:   #E6E6E6;  /* bordes / superficies claras */
  --lmy-eerie:      #17211B;  /* casi-negro — texto fuerte */
  --lmy-seasalt:    #FAFAFA;  /* fondo claro de página */
  --lmy-white:      #ffffff;

  /* Roles semánticos */
  --bg-page:        var(--lmy-seasalt);
  --surface:        var(--lmy-white);
  --border:         var(--lmy-platinum);
  --text:           var(--lmy-eerie);
  --text-muted:     #5b6a63;   /* gris verdoso, AA sobre blanco (~5.2:1) */
  --text-faint:     #7a8a82;   /* solo para texto no esencial */
  --primary:        var(--lmy-circuit);
  --primary-hover:  var(--lmy-circuit-700);
  --accent:         var(--lmy-green);
  --accent-text:    var(--lmy-green-700);
  --link:           var(--lmy-circuit);

  /* Gradiente de acento (hero/detalles, no texto) */
  --grad-accent: linear-gradient(90deg, var(--lmy-green) 0%, var(--lmy-cyan) 100%);

  /* Tipografía */
  --font-serif: "Source Serif 4", "Lora", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Tipografía base */
body { font-family: var(--font-sans); }

/* Titulares y wordmark en serif */
.font-brand { font-family: var(--font-serif); }
h1.font-brand, .lmy-wordmark { letter-spacing: -0.01em; }

/* Wordmark "Lumyn" */
.lmy-wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Isotipo (señal ascendente de rayas/dots, inspirado en el brandbook) */
.lmy-mark { display: inline-block; vertical-align: middle; }

[disabled] { opacity: .5; cursor: not-allowed; }
.htmx-request { opacity: .6; }

/* -------- Botones de marca (helpers reutilizables) -------- */
.btn-primary {
  background: var(--primary);
  color: var(--lmy-white);
  border-radius: .6rem;
  transition: background .15s ease;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* -------- Chat estilo Claude/ChatGPT, retematizado a la marca -------- */
.chat-row { display: flex; margin-bottom: 1rem; align-items: flex-start; gap: .55rem; }
.chat-row.chat-human { justify-content: flex-end; }
.chat-row.chat-ai { justify-content: flex-start; }

/* Entrada suave (fade + slide-up). Solo en filas insertadas optimísticamente:
   el historial NO se re-anima en cada swap; el swap del servidor va suave por
   View Transitions + el tipeo del último mensaje de la IA. */
.chat-row--enter { animation: msg-in .22s ease-out both; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Avatar del entrevistador (isotipo Lumyn sobre Circuit green). */
.chat-avatar {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--lmy-circuit);
  color: var(--lmy-white);
  margin-top: 2px;
}

/* Burbuja del usuario/admin (texto plano, derecha) — Circuit green, texto blanco */
.chat-bubble-human {
  background: var(--lmy-circuit);
  color: var(--lmy-white);
  padding: .6rem .95rem;
  border-radius: 1.1rem 1.1rem .25rem 1.1rem;
  max-width: 85%;
  font-size: .9rem;
  line-height: 1.45;
  white-space: pre-wrap;          /* respeta saltos de línea del usuario */
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(3, 52, 53, .12);
}

/* Mensaje de la IA (markdown renderizado, izquierda, sin burbuja pesada) */
.msg-assistant {
  max-width: 92%;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
  padding-top: 1px;
}

/* Indicador "escribiendo…" (tres puntos con bounce escalonado). */
.chat-typing {
  display: inline-flex; align-items: center; gap: 4px;
  padding: .7rem .2rem;
}
.chat-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-faint);
  animation: typing-bounce 1.2s infinite ease-in-out both;
}
.chat-typing span:nth-child(1) { animation-delay: -.24s; }
.chat-typing span:nth-child(2) { animation-delay: -.12s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40%           { transform: scale(1);  opacity: 1; }
}

/* Caret sutil mientras se "tipea" la respuesta. */
.msg-assistant.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--accent-text);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* Prosa del markdown del asistente (Tailwind CDN no trae typography) */
.prose-chat > :first-child { margin-top: 0; }
.prose-chat > :last-child { margin-bottom: 0; }
.prose-chat p { margin: .5rem 0; }
.prose-chat h1, .prose-chat h2, .prose-chat h3 {
  font-family: var(--font-serif);
  font-weight: 600; line-height: 1.3; margin: .9rem 0 .4rem;
  color: var(--lmy-circuit);
}
.prose-chat h1 { font-size: 1.15rem; }
.prose-chat h2 { font-size: 1.05rem; }
.prose-chat h3 { font-size: .98rem; }
.prose-chat ul, .prose-chat ol { margin: .5rem 0; padding-left: 1.3rem; }
.prose-chat ul { list-style: disc; }
.prose-chat ol { list-style: decimal; }
.prose-chat li { margin: .2rem 0; }
/* Links: Circuit green (AA sobre blanco), subrayado para distinguir */
.prose-chat a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.prose-chat a:hover { color: var(--primary-hover); }
.prose-chat strong { font-weight: 600; color: var(--lmy-eerie); }
.prose-chat code {
  background: #eef2f1; color: var(--lmy-circuit);
  padding: .1rem .35rem; border-radius: .35rem;
  font-size: .85em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prose-chat pre {
  background: #eef2f1; padding: .7rem .9rem; border-radius: .6rem;
  overflow-x: auto; margin: .6rem 0;
}
.prose-chat pre code { background: none; padding: 0; color: inherit; }
.prose-chat blockquote {
  border-left: 3px solid var(--accent); padding-left: .8rem;
  color: var(--text-muted); margin: .6rem 0;
}
.prose-chat table { border-collapse: collapse; margin: .6rem 0; font-size: .85rem; }
.prose-chat th, .prose-chat td { border: 1px solid var(--border); padding: .3rem .55rem; }
.prose-chat th { background: #eef2f1; }

/* Feedback de guardado (editor) */
.save-ok { transition: opacity .4s ease; }
.save-ok.fade { opacity: 0; }

/* -------- Tooltip de marca (reemplaza el `title` nativo) --------
   El `title` de HTML tarda ~1s, no se puede estilar y no aparece en touch.
   `.lmy-tip` muestra `data-tip` al instante en hover y en foco (teclado/tap),
   con `aria-label` para lectores de pantalla. Uso:
     <span class="lmy-tip" tabindex="0" role="note"
           aria-label="{{ texto }}" data-tip="{{ texto }}">ⓘ</span>  */
.lmy-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  line-height: 1;
}
.lmy-tip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 50%;
}
/* Burbuja */
.lmy-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 50;
  width: max-content;
  max-width: 16rem;
  white-space: normal;
  text-align: left;
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--lmy-white);
  background: var(--lmy-circuit);
  padding: .45rem .6rem;
  border-radius: .5rem;
  box-shadow: 0 6px 18px rgba(3, 52, 53, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
/* Flechita hacia el ícono */
.lmy-tip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 50;
  border: 5px solid transparent;
  border-top-color: var(--lmy-circuit);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.lmy-tip:hover::after, .lmy-tip:focus-visible::after,
.lmy-tip:hover::before, .lmy-tip:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .lmy-tip::after, .lmy-tip::before { transition: none; }
}

/* -------- App-shell a pantalla completa (vista del respondente) -------- */
/* Altura completa del viewport, con dvh para no quedar tapados por la barra
   del navegador en mobile. El fallback vh va primero. */
.app-shell { height: 100vh; height: 100dvh; }

/* Zona del input anclada abajo: fondo de página detrás (para que los mensajes
   no se transparenten al hacer scroll) y separación sutil del scroll. */
.chat-dock {
  background: var(--bg-page);
  border-top: 1px solid var(--border);
  padding-top: .75rem;
  padding-bottom: 1rem;
}

/* -------- Composer (input + botón de envío) -------- */
.chat-composer {
  padding: .35rem .35rem .35rem .9rem;
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(3, 52, 53, .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.chat-composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(2, 230, 118, .18);
}
.chat-input {
  background: transparent;
  border: 0;
  padding: .5rem 0;
  max-height: 200px;
  color: var(--text);
}
.chat-input::placeholder { color: var(--text-faint); }

.chat-send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--lmy-white);
  transition: background .15s ease, transform .12s ease;
}
.chat-send:hover { background: var(--primary-hover); }
.chat-send:active { transform: scale(.94); }
.chat-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-send svg { transform: translateX(-1px); }

/* Botón de grabar nota de voz: discreto (no compite con Enviar) hasta que graba. */
.chat-record {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.chat-record:hover { background: var(--surface-muted, rgba(3, 52, 53, .06)); color: var(--text); }
.chat-record:active { transform: scale(.94); }
.chat-record:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-record:disabled { opacity: .5; cursor: default; }
.chat-record.is-recording {
  background: #fde8e8; color: #d23b3b;
  animation: chat-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes chat-rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210, 59, 59, .35); }
  50% { box-shadow: 0 0 0 5px rgba(210, 59, 59, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-record.is-recording { animation: none; }
}

/* -------- Panel "Tema actual" (rail derecho / banda colapsable) -------- */
/* El propio <details> es el contenedor con scroll: poner display:flex sobre un
   <details> NO acota a sus hijos de forma fiable (el cuerpo crece a su contenido
   y se recorta sin poder scrollear), así que el scroll va sobre el panel y el
   summary se fija con position:sticky. */
.tema-panel {
  background: var(--surface);
  border-bottom: 1px solid var(--border);   /* mobile: banda arriba del chat */
  /* Mobile: banda acotada con scroll propio, sin comerse el chat. */
  max-height: 50dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tema-summary {
  list-style: none;            /* sin triángulo nativo en algunos navegadores */
  cursor: pointer;
  padding: .75rem 1rem;
  display: flex; flex-direction: column;
  position: sticky; top: 0;    /* encabezado fijo mientras el cuerpo scrollea */
  z-index: 1;
  background: var(--surface);  /* tapa el contenido que pasa por debajo */
}
.tema-summary::-webkit-details-marker { display: none; }
/* Chevron propio que rota al abrir/cerrar (solo mobile). */
.tema-summary::after {
  content: "";
  position: absolute; right: 1rem; top: 1rem;
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.tema-panel[open] .tema-summary::after { transform: rotate(-135deg); }

/* Desktop: rail fijo a la derecha, a altura completa con scroll propio
   independiente del chat de la izquierda. La altura del panel la da el stretch
   del flex-row contenedor; min-height:0 evita que crezca con el contenido y
   overflow-y:auto (heredado) hace que recorra su propio contenido. */
@media (min-width: 768px) {
  .tema-panel {
    border-bottom: none;
    border-left: 1px solid var(--border);
    min-height: 0;
    max-height: none;
  }
  .tema-summary { cursor: default; }
  .tema-summary::after { display: none; }
}

/* -------- View Transitions (swap del #convo sin parpadeo) -------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .25s;
  animation-timing-function: ease;
}

/* -------- Accesibilidad: sin movimiento si el usuario lo pide -------- */
@media (prefers-reduced-motion: reduce) {
  .chat-row--enter,
  .chat-typing span,
  .msg-assistant.is-typing::after,
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
  .chat-send { transition: none; }
}