/* Estilos propios de la Clase 3 · Transformers y LLMs (prefijo .c3-) */

/* ---------- c3-tokens ---------- */
.c3-textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.45;
  padding: 0.5rem 0.65rem;
  margin: 0 0 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lighter);
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  resize: vertical;
}
.c3-textarea:focus { outline: 2px solid var(--usm-gold); outline-offset: 1px; }
.c3-chips { min-height: 2rem; gap: 0.22rem; }
.c3-chips .ia-chip { font-size: 0.74rem; }

/* ---------- c3-temperatura ---------- */
.md-typeset .c3-sentence {
  font-size: 1.05rem;
  margin: 0.4rem 0 0.6rem;
  font-style: italic;
}
.c3-slot {
  display: inline-block;
  min-width: 5.5rem;
  padding: 0.05rem 0.55rem;
  border-radius: 8px;
  font-style: normal;
  font-weight: 700;
  background: color-mix(in srgb, var(--usm-blue) 15%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--usm-blue) 55%, transparent);
}
.c3-slot.is-rare {
  background: color-mix(in srgb, var(--usm-gold) 25%, transparent);
  border-color: var(--usm-gold);
}
.c3-bars .ia-bar-fill { transition: width 0.28s cubic-bezier(0.2, 0, 0, 1); }
.c3-hist { min-height: 1.6rem; }

/* ---------- c3-atencion ---------- */
/* El SVG escala al ancho disponible; en celular (≤ 600 px) el JS cambia a una disposición vertical
   (palabras en columna, arcos a la derecha) para que el texto siga legible sin desplazarse. */
.c3-att.is-vertical { max-width: 420px; margin-left: auto; margin-right: auto; }
.c3-att .c3-att-word { cursor: pointer; outline: none; }
.c3-att .c3-att-word rect {
  fill: var(--md-default-bg-color);
  stroke: var(--md-default-fg-color--lighter);
  stroke-width: 1.2;
  transition: fill 0.16s ease-out, stroke 0.16s ease-out;
}
/* --c3-k (lo fija widgets-clase3.js) agranda la letra solo si el SVG se dibuja tan chico que bajaría de ~11 px */
.c3-att .c3-att-word text { font-size: calc(13px * var(--c3-k, 1)); font-weight: 600; pointer-events: none; fill: var(--md-default-fg-color); }
.c3-att .c3-att-word:hover rect,
.c3-att .c3-att-word:focus-visible rect { stroke: var(--usm-blue); stroke-width: 2; }
.c3-att .c3-att-word.is-on rect {
  fill: color-mix(in srgb, var(--usm-gold) 35%, var(--md-default-bg-color));
  stroke: var(--usm-gold);
  stroke-width: 2;
}
.c3-att .c3-arc { fill: none; stroke: var(--usm-blue); stroke-linecap: round; }
.c3-att .c3-arc.is-max { stroke: var(--usm-gold); }
.c3-att text.c3-arc-lbl {
  font-size: calc(10.5px * var(--c3-k, 1));
  font-weight: 700;
  fill: var(--md-default-fg-color--light);
  /* halo del color de fondo: el porcentaje se lee aunque un arco pase por debajo */
  paint-order: stroke;
  stroke: var(--md-default-bg-color);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.c3-att.is-vertical text.c3-arc-lbl { font-size: calc(12px * var(--c3-k, 1)); }
.md-typeset .c3-heat-t { font-size: 0.72rem; margin: 0.8rem 0 0; opacity: 0.8; }
.c3-heat .c3-col { text-align: center; font-weight: 600; font-size: 0.64rem; }
.c3-heat .c3-rowbtn {
  font: inherit;
  font-weight: 700;
  text-align: right;
  background: none;
  border: 0;
  color: var(--md-default-fg-color);
  cursor: pointer;
  border-radius: 4px;
}
.c3-heat .c3-rowbtn:hover { color: var(--usm-blue); }
.c3-heat .ia-heat-cell.is-strong { color: #fff; font-weight: 700; }
/* Widget angosto (.is-narrow, lo pone el JS según el ancho real): columnas angostas y encabezados de columna
   en vertical para que la matriz quepa sin desplazarse */
.c3-heat.is-narrow .ia-heat-cell { min-width: 0; padding: 0.3rem 0.05rem; }
.c3-heat.is-narrow .c3-col {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
  justify-self: center;
  padding: 0.3rem 0 0.2rem;
}
.c3-heat.is-narrow .c3-rowbtn { padding: 0.3rem 0.15rem; }
.c3-heat .c3-row-on { box-shadow: inset 0 0 0 2px var(--usm-gold); }
.c3-heat .c3-rowbtn.c3-row-on { box-shadow: none; color: var(--usm-gold-text); }

/* ---------- c3-prompt ---------- */
.md-typeset .c3-lbl { font-size: 0.74rem; font-weight: 700; margin: 0.7rem 0 0.2rem; }
.md-typeset pre.c3-prompt-pre,
.md-typeset pre.c3-prompt-resp {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-size: 0.7rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: color-mix(in srgb, var(--md-default-fg-color) 5%, transparent);
  border: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset pre.c3-prompt-resp { border-left: 4px solid var(--usm-blue); }
.c3-pp { display: inline; padding: 0 0.1rem; border-radius: 3px; }
.c3-pp-rol { background: color-mix(in srgb, #7b4bb7 16%, transparent); }
.c3-pp-cats { background: color-mix(in srgb, #2e8b57 16%, transparent); }
.c3-pp-fmt { background: color-mix(in srgb, var(--usm-gold) 24%, transparent); }
.c3-pp-ej { background: color-mix(in srgb, var(--usm-blue) 14%, transparent); }
.c3-pp-reclamo { font-weight: 700; }
.md-typeset .c3-verdict { font-size: 0.78rem; margin: 0.4rem 0 0; font-weight: 600; }
/* Texto: colores con contraste ≥ 4,5:1 en claro y en oscuro (dorado de texto = --usm-gold-text) */
.c3-verdict.is-ok { color: #1f7047; }
[data-md-color-scheme="slate"] .c3-verdict.is-ok { color: #5cc98c; }
.c3-verdict.is-warn { color: var(--usm-gold-text); }
.c3-verdict.is-bad { color: var(--usm-red); }

/* ---------- Tabla comparativa encoder / decoder y otras ---------- */
.md-typeset .c3-small { font-size: 0.78rem; }

@media (prefers-reduced-motion: reduce) {
  .c3-bars .ia-bar-fill,
  .c3-att .c3-att-word rect { transition: none; }
}