/* ==========================================================================
   clase2.css — Estilos propios de la Clase 2 · Embeddings (prefijo .c2-)
   ========================================================================== */

/* Paleta categórica de las 6 categorías de FinTrust (legible en claro y oscuro) */
:root {
  --c2-k0: #c8553d; /* Fraude */
  --c2-k1: #c99700; /* Cobro indebido */
  --c2-k2: #2a9d8f; /* App y canales digitales */
  --c2-k3: #3a6ea5; /* Crédito y tasas */
  --c2-k4: #8e5bb5; /* Atención al cliente */
  --c2-k5: #6b8e23; /* Información y trámites */
  --c2-vA: var(--usm-blue);
  --c2-vB: #c8553d;
}
[data-md-color-scheme="slate"] {
  --c2-k0: #f08a6f;
  --c2-k1: #f2c14e;
  --c2-k2: #4fd1c0;
  --c2-k3: #7fb2f0;
  --c2-k4: #c39bea;
  --c2-k5: #a4c95a;
  --c2-vA: #7fb2f0;
  --c2-vB: #f08a6f;
}
.c2-k0 { --k: var(--c2-k0); }
.c2-k1 { --k: var(--c2-k1); }
.c2-k2 { --k: var(--c2-k2); }
.c2-k3 { --k: var(--c2-k3); }
.c2-k4 { --k: var(--c2-k4); }
.c2-k5 { --k: var(--c2-k5); }

/* Etiqueta de categoría con punto de color */
.c2-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.05rem 0.45rem 0.05rem 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--k) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--k) 45%, transparent);
}
.c2-cat > i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--k); display: inline-block; }

.md-typeset .c2-muted { color: var(--md-default-fg-color--light); font-size: 0.75rem; }
.md-typeset .c2-loading { margin-top: 0.6rem; }

/* ---------- c2-mapa ---------- */
.c2-legend { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0 0.2rem; }
.c2-legend-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 0.16s cubic-bezier(0.34, 1.36, 0.64, 1);
}
.c2-legend-btn:hover { transform: translateY(-1px); }
.c2-legend-btn[aria-pressed="true"] .c2-cat { outline: 2px solid var(--k); outline-offset: 1px; }
.c2-legend-btn:focus-visible { outline: 2px solid var(--usm-gold); outline-offset: 2px; }

.c2-map { border-radius: 8px; background: color-mix(in srgb, var(--md-default-fg-color) 3%, transparent); }
.c2-map .c2-dot {
  fill: var(--k);
  stroke: var(--md-default-bg-color);
  stroke-width: 1.5;
  cursor: pointer;
  transition: opacity 0.28s cubic-bezier(0.2, 0, 0, 1);
}
.c2-map .c2-dot:focus { outline: none; } /* sin el recuadro del navegador al hacer clic o tocar */
.c2-map .c2-dot.is-dim { opacity: 0.16; }
.c2-map .c2-dot.is-sel { stroke: var(--md-default-fg-color); stroke-width: 2.5; }
.c2-map .c2-dot.is-nn { stroke: var(--md-default-fg-color); stroke-width: 1.2; }
/* Foco con teclado (Tab): anillo dorado, visible también sobre el punto elegido o atenuado */
.c2-map .c2-dot.c2-dot:focus-visible { outline: none; opacity: 1; stroke: var(--usm-gold); stroke-width: 4; }
.c2-map .c2-ray { stroke: var(--md-default-fg-color--light); stroke-width: 1.4; stroke-dasharray: 4 3; }
.c2-map .c2-rank, .c2-map .c2-axis-t {
  paint-order: stroke;
  stroke: var(--md-default-bg-color);
  stroke-width: 3px;
}
.c2-map .c2-rank { font-weight: 700; font-size: 13px; }
.c2-map .c2-axis-t { font-size: 10px; fill: var(--md-default-fg-color--light); }
/* Lienzo angosto (escala 1, ver widgets-clase2.js): rótulos de ejes legibles */
.c2-map.is-compact .c2-axis-t { font-size: 12px; }
.c2-map.is-compact { touch-action: manipulation; }
.econ-controls.c2-ctr-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.c2-map-info { margin-top: 0.4rem; }
.c2-sel {
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border-left: 4px solid var(--usm-gold);
  background: color-mix(in srgb, var(--usm-gold) 9%, transparent);
}
.md-typeset .c2-sel-k { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.md-typeset .c2-sel-t { margin: 0.15rem 0 0.3rem; font-size: 0.8rem; font-weight: 600; }
.md-typeset .c2-nn-h { margin: 0.7rem 0 0.3rem; font-size: 0.74rem; font-weight: 700; }
.c2-nn-row, .c2-res {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.4rem;
  align-items: start;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--md-default-fg-color--lightest);
}
.c2-nn-rank, .c2-res-n {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 700;
  background: var(--usm-navy);
  color: #fff;
}
.md-typeset .c2-nn-t, .md-typeset .c2-res-t { margin: 0 0 0.2rem; font-size: 0.74rem; line-height: 1.35; }
.c2-nn-meta {
  display: grid;
  grid-template-columns: auto 1fr 3.4rem;
  gap: 0.45rem;
  align-items: center;
}
.c2-nn-meta .ia-bar-track { height: 0.55rem; }
.c2-nn-meta .ia-bar-fill { background: var(--usm-blue); }
.c2-nn-meta .ia-bar-fill[class*="c2-fill-k"] { background: var(--k); }
.c2-fill-k0 { --k: var(--c2-k0); } .c2-fill-k1 { --k: var(--c2-k1); } .c2-fill-k2 { --k: var(--c2-k2); }
.c2-fill-k3 { --k: var(--c2-k3); } .c2-fill-k4 { --k: var(--c2-k4); } .c2-fill-k5 { --k: var(--c2-k5); }
.c2-nn-s { font-size: 0.68rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- c2-coseno ---------- */
.c2-cos .c2-vA { stroke: var(--c2-vA); stroke-width: 4; stroke-linecap: round; }
.c2-cos .c2-vB { stroke: var(--c2-vB); stroke-width: 4; stroke-linecap: round; }
.c2-cos .c2-vA-fill { fill: var(--c2-vA); }
.c2-cos .c2-vB-fill { fill: var(--c2-vB); }
.c2-cos .c2-vlbl { font-size: 16px; font-weight: 700; paint-order: stroke; stroke: var(--md-default-bg-color); stroke-width: 3px; }
.c2-cos .c2-vA-t { fill: var(--c2-vA); }
.c2-cos .c2-vB-t { fill: var(--c2-vB); }
.c2-cos .c2-arc { fill: color-mix(in srgb, var(--usm-gold) 35%, transparent); stroke: var(--usm-gold); stroke-width: 1.5; }
.c2-cos .c2-arc-t { font-weight: 700; font-size: 13px; paint-order: stroke; stroke: var(--md-default-bg-color); stroke-width: 3px; }
.c2-cos.is-compact .c2-arc-t { font-size: 14px; } /* lienzo angosto: ≥ 11 px aun en pantallas de 320 px */
.c2-cos .c2-gap { stroke: var(--usm-red); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.8; }
.c2-cos .c2-handle {
  fill: transparent;
  stroke: var(--md-default-fg-color--lighter);
  stroke-dasharray: 3 3;
  cursor: grab;
  touch-action: none;
}
.c2-cos .c2-handle:hover { fill: color-mix(in srgb, var(--usm-gold) 20%, transparent); }
.md-typeset .c2-formula {
  margin: 0.2rem 0 0;
  font-family: var(--md-code-font-family);
  font-size: 0.74rem;
  text-align: center;
  overflow-wrap: anywhere;
}
.md-typeset .c2-verdict {
  margin: 0.6rem 0 0;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  font-size: 0.76rem;
  background: color-mix(in srgb, var(--usm-blue) 8%, transparent);
}

/* ---------- c2-buscador ---------- */
.c2-flow { margin: 0.6rem 0 0.2rem; }
.c2-flow .ia-flow-step { flex: 1 1 8rem; }
.md-typeset .c2-qline { font-size: 0.78rem; margin: 0.5rem 0; }
.c2-cols { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
@media (min-width: 900px) { .c2-cols { grid-template-columns: 1fr 1fr; } }
.c2-col {
  padding: 0.3rem 0.7rem 0.4rem;
  border-radius: 10px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-top: 4px solid var(--usm-gold);
}
.c2-col.is-tf { border-top-color: var(--md-default-fg-color--lighter); }
.c2-col.is-tf .ia-bar-fill { background: var(--md-default-fg-color--light); }
.c2-col.is-emb .ia-bar-fill { background: var(--usm-gold); }
.md-typeset .c2-col-h { margin: 0.35rem 0 0.2rem; font-weight: 700; font-size: 0.8rem; }
.c2-res.is-off .c2-res-t { opacity: 0.7; }
.c2-res.is-off .c2-res-n { background: var(--md-default-fg-color--light); color: var(--md-default-bg-color); }

@media (max-width: 600px) {
  .c2-nn-meta { grid-template-columns: 1fr 3rem; }
  .c2-nn-meta .c2-cat { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .c2-map .c2-dot, .c2-legend-btn { transition: none; }
}