/* =========================================================================
   GARITA/static/chat/styles.css — estilos del chat de chat.estaciongarita.org

   Tipografía/paleta actualizadas (agosto 2026) para coincidir con
   `GARITA/estacion-garita-manual-tipografico.md` — mismos valores que
   `ghost-theme/assets/css/garita.css`, ver ese archivo para el detalle
   completo de cada decisión (por qué Young Serif/Fraunces/Barlow/Source
   Code Pro, por qué la paleta cálida, por qué navy en bordes oscuros).

   POR QUÉ ESTOS TOKENS ESTÁN COPIADOS Y NO IMPORTADOS DE garita.css
   ----------------------------------------------------------------------------
   `garita.css` vive en `GARITA/ghost-theme/assets/css/garita.css` y lo sirve
   Ghost (Ghost(Pro) hospedado o ghost-cli en el droplet, según §7 de
   garita-arquitectura-maestra.md) en el dominio del homepage. Este archivo
   lo sirve el proceso FastAPI de `garita-api` (puerto 8005, ver
   `GARITA/deploy/garita-api.service` y `chat-garita.nginx.conf`) en
   chat.estaciongarita.org. Son DOS servicios distintos sin filesystem compartido en
   producción — Ghost(Pro) es hosting gestionado por Ghost, no un directorio
   dentro de este droplet, así que un `@import` con ruta relativa
   (`../../ghost-theme/assets/css/garita.css`) o un `<link>` cross-origin a
   una URL de Ghost que todavía no existe (dominio de estaciongarita.org sin
   registrar, §11) no es servible de forma confiable hoy.

   Solución elegida: copiar aquí SOLO los design tokens (`:root` — fuentes,
   paleta neutra, paleta por ciudad, radios, sombras) tal cual están en
   garita.css al momento de escribir este archivo, sin redefinir nada del
   layout de homepage (grid de cards, etc., que no aplica aquí). Si algún
   día ambos servicios comparten filesystem (ej. Ghost self-hosted en el
   mismo droplet vía ghost-cli), esto puede volverse un `@import` real de un
   archivo de tokens servido desde una ruta común — cambio de bajo riesgo
   porque los nombres de variables son idénticos a propósito.

   Riesgo documentado: si otro agente cambia un valor en garita.css (ej. el
   naranja de Mexicali), este archivo NO se actualiza solo — hay que
   sincronizar a mano. No se automatiza aquí para no inventar un paso de
   build (bundler, postcss, etc.) que el CLAUDE.md raíz de Garita no pidió.
   ========================================================================= */

:root {
  --font-heading: "Young Serif", Georgia, "Times New Roman", serif;
  --font-accent: "Fraunces", Georgia, serif;   /* SIEMPRE italic + weight 500, solo wordmark */
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --color-bg: #F6F1EA;
  --color-surface: #FFFDFA;
  --color-text: #231D17;
  --color-text-muted: #5F5548;
  --color-border: #E4DCCF;

  --color-accent: #DC5A46;
  --color-accent-text: #FFFFFF;

  --city-tijuana: #DC5A46;   /* AFN — coral */
  --city-mexicali: #EFCB4E;  /* Brújula News — mostaza */
  --city-ensenada: #6BA3C0;  /* El Vigía — azul cielo */

  --radius: 0.75rem;
  --shadow-card: 0 1px 2px rgba(35, 29, 23, 0.06), 0 4px 12px rgba(35, 29, 23, 0.05);
  --shadow-card-hover: 0 2px 4px rgba(35, 29, 23, 0.08), 0 10px 24px rgba(35, 29, 23, 0.10);

  /* Semáforo de verificación de citas (principio #4 del CLAUDE.md de
     Garita) — colores semánticos, deliberadamente fuera de la paleta de
     marca (verde/ámbar universales, no coral/mostaza/azul cielo). */
  --verify-ok: #16A34A;
  --verify-warn: #D97706;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1B1815;
    --color-surface: #231D17;
    --color-text: #F3EDE4;
    --color-text-muted: #A89E8F;
    --color-border: #1E2A3D;   /* navy oscuro a propósito, no cálido — pedido explícito */

    --color-accent: #EB7E6C;

    --city-tijuana: #EB7E6C;
    --city-mexicali: #F3D97A;
    --city-ensenada: #8FC0D6;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.5), 0 10px 24px rgba(0, 0, 0, 0.4);

    --verify-ok: #4ADE80;
    --verify-warn: #FBBF24;
  }
}

/* ---- Reset mínimo (mismo que garita.css) ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.25rem;
  width: 100%;
}

/* ---- Layout general del chat ---- */
.chat-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Header (mismas clases que .site-header/.site-wordmark de
   garita.css, duplicadas aquí por la misma razón del bloque de arriba) ---- */
.chat-header {
  border-bottom: 1px solid var(--color-border);
  padding: 2rem 0 1.25rem;
}
.site-wordmark {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 400;   /* Young Serif es peso único regular */
  text-decoration: none;
  color: var(--color-text);
}
.site-wordmark .wordmark-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent);
}
.site-wordmark .dot { color: var(--color-accent); }
.site-tagline {
  margin: 0.5rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  max-width: 60ch;
}

.turns-indicator {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}
.turns-indicator.turns-low { color: var(--verify-warn); border-color: var(--verify-warn); }
.turns-indicator.turns-out { color: #DC2626; border-color: #DC2626; }

/* ---- Área de mensajes ---- */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  min-height: 0;
}

.messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  padding-bottom: 1rem;
}

.msg { display: flex; }
.msg-user { justify-content: flex-end; }
.msg-assistant { justify-content: flex-start; }

.msg-bubble {
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg-user .msg-bubble {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-bottom-right-radius: 0.2rem;
}
.msg-assistant .msg-bubble {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 0.2rem;
}
.msg-intro .msg-bubble {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Citas [1]/[2] dentro del texto de la respuesta — color por medio vía
   --cite-color, asignado inline por chat.js (var(--city-tijuana) etc.). */
.citation-link, .citation-plain {
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-weight: 600;
  color: var(--cite-color, var(--color-accent));
  text-decoration: none;
  padding: 0 0.15em;
}
.citation-link:hover { text-decoration: underline; }

.msg-footnotes {
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
}
.msg-footnote {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.msg-footnote .fn-label {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--cite-color, var(--color-accent));
}
.msg-footnote a { color: var(--color-text); }
.msg-footnote a:hover { color: var(--cite-color, var(--color-accent)); }

.msg-verification {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.msg-verification.verify-ok { color: var(--verify-ok); }
.msg-verification.verify-warn { color: var(--verify-warn); }

.msg-error .msg-bubble {
  background: transparent;
  border: 1px dashed #DC2626;
  color: #DC2626;
}

/* ---- Indicador de estado (streaming en curso) ---- */
.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  padding: 0.25rem 0 0.75rem;
}
.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  animation: garita-pulse 1.2s ease-in-out infinite;
}
@keyframes garita-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

/* ---- Banners de error ---- */
.banner {
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.banner-error {
  background: color-mix(in srgb, #DC2626 10%, transparent);
  border: 1px solid #DC2626;
  color: #DC2626;
}

/* ---- Input ---- */
.chat-input-form {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}
.question-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  resize: none;
  max-height: 8rem;
}
.question-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.send-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-accent-text);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius);
  padding: 0.7rem 1.2rem;
  cursor: pointer;
}
.send-btn:hover { filter: brightness(1.08); }
.send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.chat-footer {
  border-top: 1px solid var(--color-border);
  padding: 1.25rem 0 2rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

/* ---- Modal de magic link / límite diario ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 100;
}
.modal {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  max-width: 26rem;
  width: 100%;
  padding: 2rem 1.75rem 1.75rem;
}
.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}
.modal-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin: 0 0 0.75rem;
}
.modal-message {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}

.magic-link-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.field-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.magic-link-form input[type="email"] {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
}
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.checkbox-label input { margin-top: 0.2rem; }

.magic-link-feedback {
  font-size: 0.85rem;
  margin: 0;
  min-height: 1.2em;
}
.magic-link-feedback.is-error { color: #DC2626; }
.magic-link-feedback.is-ok { color: var(--verify-ok); }

.daily-limit-links {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.daily-limit-links ul { padding-left: 1.1rem; margin: 0.5rem 0 0; }
.daily-limit-links a { color: var(--color-accent); }

/* ---- Responsive ---- */
@media (max-width: 560px) {
  .chat-header { padding: 1.5rem 0 1rem; }
  .msg-bubble { max-width: 92%; }
}