/* Widget de chat, vestido con el lenguaje visual del WordPress de DIH
   DATAlife (tema Foundry). Los valores no son inventados: salen de su hoja
   de estilos, para que el iframe no cante dentro de su pagina.

     turquesa corporativo  #00a79d      titulares          #007a85  (peso 300)
     enlaces               #00aeef      texto              #414042
     fondo suave           #f1f2f2      verde de apoyo     #59a76c
     Open Sans 13/24, cajas de esquina viva, botones en pildora

   El sitio de DATAlife es solo claro. El modo oscuro automatico haria que el
   iframe se pusiera negro dentro de una pagina blanca en cuanto el visitante
   tuviera el sistema en oscuro, asi que aqui no se activa solo: hay que
   pedirlo con ?tema=oscuro. */

:root {
  color-scheme: light;

  --bg:            #ffffff;
  --bg-sunken:     #f1f2f2;
  --surface:       #ffffff;
  --surface-alt:   #f1f2f2;
  --border:        #d7d9d9;
  --border-strong: #bcc0c0;

  --text:          #414042;
  --text-muted:    #6b6c6e;
  --text-faint:    #939597;

  --accent:        #00a79d;
  --accent-hover:  #007a85;
  --accent-deep:   #00756e;
  --accent-soft:   #e3f4f2;
  --accent-link:   #00aeef;
  --on-accent:     #ffffff;

  --ok-bg:    #e6f3e9; --ok-fg:    #3d7a4d;
  --warn-bg:  #fdf1dc; --warn-fg:  #8a5a10;
  --idle-bg:  #f1f2f2; --idle-fg:  #6b6c6e;

  /* Foundry usa la esquina viva en las cajas y la pildora en los botones. */
  --radius:    0px;
  --radius-sm: 0px;
  --radius-pill: 25px;
  --shadow:    0 1px 2px rgba(65, 64, 66, .07), 0 4px 14px rgba(65, 64, 66, .06);

  --font: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

:root[data-tema="oscuro"] {
  color-scheme: dark;

  --bg:            #14191a;
  --bg-sunken:     #0e1213;
  --surface:       #1b2223;
  --surface-alt:   #232b2c;
  --border:        #2e3839;
  --border-strong: #3e4a4b;

  --text:          #e6eaea;
  --text-muted:    #a6b0b0;
  --text-faint:    #7d8788;

  --accent:        #33bdb4;
  --accent-hover:  #5fd0c8;
  --accent-deep:   #7addd5;
  --accent-soft:   #12312f;
  --accent-link:   #4cc7f4;
  --on-accent:     #0e1213;

  --ok-bg:   #163420; --ok-fg:   #7fd8a0;
  --warn-bg: #3a2c12; --warn-fg: #e8bf78;
  --idle-bg: #232b2c; --idle-fg: #a6b0b0;

  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Foundry titula en Open Sans muy fino y en el turquesa oscuro. Es el rasgo
   que mas identifica su pagina, mas incluso que el color de los botones. */
.chat__title,
.welcome__title,
.card__title {
  font-weight: 300;
  color: var(--accent-hover);
  letter-spacing: 0;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100dvh;
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.chat__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 3px solid var(--accent);
  background: var(--surface);
  flex: 0 0 auto;
}

.chat__avatar {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  flex: 0 0 auto;
}
.chat__avatar svg { width: 20px; height: 20px; }

.chat__titles { min-width: 0; }
.chat__title {
  margin: 0;
  font-size: 16px;
}
.chat__subtitle {
  margin: 1px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Registro de mensajes ─────────────────────────────────────────────── */

.chat__log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 18px 8px;
  background: var(--bg-sunken);
  scroll-behavior: smooth;
}

.welcome { max-width: 620px; margin: 8px auto 0; }
.welcome__title {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.3;
}
.welcome__text {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 14px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-hover);
  cursor: pointer;
  transition: color .15s, background .15s, transform .1s;
}
.chip:hover { background: var(--accent); color: var(--on-accent); }
.chip:active { transform: translateY(1px); }

.msg { max-width: 720px; margin: 0 auto 18px; }

.msg--user { display: flex; justify-content: flex-end; }
.msg--user .msg__bubble {
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 16px;
  border-radius: var(--radius);
  max-width: 82%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg--bot .msg__bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
  padding: 13px 16px;
  box-shadow: var(--shadow);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg__bubble .ref {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin: 0 1px;
  border-radius: 0;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
.msg__bubble .ref:hover { background: var(--accent); color: var(--on-accent); }

.typing { display: inline-flex; gap: 4px; padding: 3px 0; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-faint);
  animation: blink 1.3s infinite ease-in-out;
}
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }

/* ── Fichas de curso ──────────────────────────────────────────────────── */

.cards { margin-top: 12px; display: grid; gap: 10px; }

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.card--flash { animation: flash 1.1s ease-out; }
@keyframes flash {
  0%   { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
  100% { box-shadow: none; }
}

.card__top { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 5px; }
.card__num {
  flex: 0 0 auto;
  min-width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 2px;
}
.card__title {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}

.card__meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 0 29px;
  font-size: 12px;
}
.tag {
  padding: 3px 9px;
  border-radius: 0;
  background: var(--surface-alt);
  color: var(--text-muted);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tag--entity { background: var(--accent-soft); color: var(--accent-hover); }
.tag--ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.tag--warn { background: var(--warn-bg); color: var(--warn-fg); }
.tag--idle { background: var(--idle-bg); color: var(--idle-fg); }

/* ── Valoración ───────────────────────────────────────────────────────── */

.rate {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 0 2px;
  font-size: 12px;
  color: var(--text-faint);
}
.rate__btn {
  font: inherit;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  cursor: pointer;
}
.rate__btn:hover { border-color: var(--accent); color: var(--accent); }
.rate__btn[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.rate--done { color: var(--text-muted); }

.error {
  max-width: 720px; margin: 0 auto 18px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-size: 13.5px;
}

/* ── Composer ─────────────────────────────────────────────────────────── */

.chat__composer {
  flex: 0 0 auto;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 6px 6px 6px 12px;
  transition: border-color .15s, box-shadow .15s;
}
.composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.composer__input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  padding: 6px 0;
  max-height: 132px;
}
.composer__input::placeholder { color: var(--text-faint); }

.composer__send {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.composer__send svg { width: 17px; height: 17px; }
.composer__send:hover:not(:disabled) { background: var(--accent-hover); }
.composer__send:disabled { opacity: .4; cursor: not-allowed; }

.composer__note {
  margin: 8px 2px 0;
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.45;
}

@media (max-width: 520px) {
  .chat__log { padding: 16px 12px 8px; }
  .chat__composer { padding: 10px 12px 12px; }
  .chat__header { padding: 12px 14px; }
  .chip { font-size: 12.5px; }
}

/* Nota que acompaña a los puntos suspensivos mientras el modelo razona. */
.typing__note {
  display: inline-block;
  margin-left: 8px;
  font-size: 12.5px;
  color: var(--text-faint);
  vertical-align: middle;
}