/* ═══ tria-valoraciones.css — pantalla «Dirección · La web → Valoraciones» (fase frontend, 24-oct-2026) ═══
 *
 * QUÉ VISTE ESTE FICHERO
 * La LISTA de valoraciones (KPIs + filtros + tabla en escritorio / tarjetas en móvil), la FICHA de detalle
 * (resultado del simulador con barra de rango, respuestas del formulario, lead en TRIA, datos que faltan,
 * historial) y el CHAT interno del asesor. Lo pinta tria-valoraciones.js (prefijo de clase .tnval-).
 *
 * CÓMO SE RELACIONA CON tria-base.css
 * Reaprovecha los TOKENS de la norma 2 (azul #1E3F80, grises, trío ok/aviso/fallo/info, 8 tamaños de letra,
 * esquinas 8/11, filas 32/44 px, avatares de 6 colores). Para no depender de tria-base.css cuando se mira
 * en la demo por file://, se definen aquí con prefijo --tnval-* con el MISMO valor; si tria-base está cargado
 * y encendido, sus --t-* mandan por herencia (ver más abajo el bloque de puente).
 *
 * REGLAS DE DISEÑO QUE SE APLICAN (sistema-diseno-trasnego.md + skill trasnego-crm-ux)
 *  · Una sola medida para lo que se pulsa: 32 px en escritorio, 44 px en móvil; espacios de 4 en 4.
 *  · Bordes casi invisibles, el contraste en el texto; solo tres pesos (400/500/600).
 *  · Foco solo con teclado (:focus-visible); hover solo con ratón (@media (hover:hover)).
 *  · El color significa: ok=verde, aviso=ámbar, fallo=rojo, info=azul/azulado, gris=neutro. Siempre con palabra.
 *  · Badges: texto saturado sobre fondo pastel casi blanco.
 *  · Cifras a la derecha con tabular-nums; nunca párrafos centrados.
 *  · En <=760 px la tabla se oculta y salen TARJETAS (una por valoración), sin scroll lateral.
 * ════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── 0 · TOKENS propios (con el MISMO valor que la norma; no dependen de tria-base.css) ─────────────── */
.tnval {
  --tnval-azul: #1E3F80;      --tnval-azul-hover: #173268;  --tnval-azul-suave: #E9EEF8;  --tnval-sobre-azul: #FFFFFF;
  --tnval-texto: #1F2633;     --tnval-texto-2: #5B6474;     --tnval-texto-3: #646C7A;
  --tnval-linea: #E6E9EE;     --tnval-linea-2: #D5DAE1;
  --tnval-fondo: #FFFFFF;     --tnval-lateral: #F6F7F9;     --tnval-hover: #F1F3F6;
  --tnval-ok: #1B7A45;        --tnval-ok-bg: #E8F5EE;       --tnval-ok-bd: #BFE3CD;
  --tnval-am: #8A5A00;        --tnval-am-bg: #FDF3E1;       --tnval-am-bd: #F2D6A2;
  --tnval-ko: #B42318;        --tnval-ko-bg: #FDECEA;       --tnval-ko-bd: #F5C2BC;
  --tnval-in: #1E3F80;        --tnval-in-bg: #EAF1FC;       --tnval-in-bd: #C3D6F5;
  --tnval-gr: #5B6474;        --tnval-gr-bg: #F1F3F6;       --tnval-gr-bd: #DDE1E7;
  /* Un color por persona (igual que los avatares de la norma), elegido por el nombre en el JS. */
  --tnval-av1-fg: #1E3F80;  --tnval-av1-bg: #E9EEF8;
  --tnval-av2-fg: #1B7A45;  --tnval-av2-bg: #E8F5EE;
  --tnval-av3-fg: #8A5A00;  --tnval-av3-bg: #FDF3E1;
  --tnval-av4-fg: #6B3FA0;  --tnval-av4-bg: #F3ECFB;
  --tnval-av5-fg: #B42318;  --tnval-av5-bg: #FDECEA;
  --tnval-av6-fg: #0E6E7A;  --tnval-av6-bg: #E6F6F8;
  --tnval-fs-3xs: .72rem;  --tnval-fs-2xs: .78rem;  --tnval-fs-xs: .84rem;  --tnval-fs-sm: .9rem;
  --tnval-fs-md: .96rem;   --tnval-fs-lg: 1.04rem;  --tnval-fs-xl: 1.18rem; --tnval-fs-t: 1.51rem;
  --tnval-fs-kpi: 1.9rem;  --tnval-fs-central: 2.6rem;
  --tnval-radio-1: 8px;  --tnval-radio-2: 11px;
  --tnval-fila: 36px;
  --tnval-fuente: "Inter Tria", "Inter Var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tnval-sombra: 0 1px 2px rgba(16, 24, 40, .04);
  --tnval-sombra-flota: 0 8px 24px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);

  color: var(--tnval-texto);
  font-family: var(--tnval-fuente);
  font-size: var(--tnval-fs-sm);
  line-height: 1.4;
  box-sizing: border-box;
}
.tnval *, .tnval *::before, .tnval *::after { box-sizing: border-box; }

/* Puente: si tria-base.css está encendido, sus tokens --t-* mandan (misma apariencia en producción).
   SIEMPRE con fallback al valor literal de la norma, por si tria-base.css no está cargado (p. ej. en la
   demo por file://): var(--t-azul, #1E3F80) usa el token si existe, y el literal si no — nunca vacío. */
html[data-diseno="nuevo"] .tnval {
  --tnval-azul: var(--t-azul, #1E3F80);  --tnval-azul-hover: var(--t-azul-hover, #173268);  --tnval-azul-suave: var(--t-azul-suave, #E9EEF8);  --tnval-sobre-azul: var(--t-sobre-azul, #FFFFFF);
  --tnval-texto: var(--t-texto, #1F2633);  --tnval-texto-2: var(--t-texto-2, #5B6474);  --tnval-texto-3: var(--t-texto-3, #646C7A);
  --tnval-linea: var(--t-linea, #E6E9EE);  --tnval-linea-2: var(--t-linea-2, #D5DAE1);
  --tnval-fondo: var(--t-fondo, #FFFFFF);  --tnval-lateral: var(--t-lateral, #F6F7F9);  --tnval-hover: var(--t-hover, #F1F3F6);
  --tnval-ok: var(--t-ok, #1B7A45);  --tnval-ok-bg: var(--t-ok-bg, #E8F5EE);  --tnval-ok-bd: var(--t-ok-bd, #BFE3CD);
  --tnval-am: var(--t-am, #8A5A00);  --tnval-am-bg: var(--t-am-bg, #FDF3E1);  --tnval-am-bd: var(--t-am-bd, #F2D6A2);
  --tnval-ko: var(--t-ko, #B42318);  --tnval-ko-bg: var(--t-ko-bg, #FDECEA);  --tnval-ko-bd: var(--t-ko-bd, #F5C2BC);
  --tnval-in: var(--t-in, #1E3F80);  --tnval-in-bg: var(--t-in-bg, #EAF1FC);  --tnval-in-bd: var(--t-in-bd, #C3D6F5);
  --tnval-gr: var(--t-gr, #5B6474);  --tnval-gr-bg: var(--t-gr-bg, #F1F3F6);  --tnval-gr-bd: var(--t-gr-bd, #DDE1E7);
  --tnval-radio-1: var(--t-radio-1, 8px);  --tnval-radio-2: var(--t-radio-2, 11px);
  --tnval-fuente: var(--t-fuente, "Inter Tria", "Inter Var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* ─── 1 · CABECERA de la pantalla ──────────────────────────────────────────────────────────────────── */
.tnval-breadcrumb {
  font-size: var(--tnval-fs-xs);
  color: var(--tnval-texto-3);
  margin: 0 0 4px;
}
.tnval-breadcrumb .tnval-bc-sep { margin: 0 6px; }
.tnval-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tnval-head-txt { min-width: 220px; }
.tnval-title {
  margin: 0;
  font-size: var(--tnval-fs-t);
  font-weight: 600;
  line-height: 1.15;
  color: var(--tnval-texto);
}
.tnval-sub {
  margin: 4px 0 0;
  font-size: var(--tnval-fs-sm);
  color: var(--tnval-texto-2);
}
.tnval-head-acc { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ─── 1-bis · «VER COMO…» (solo dirección, solo lectura) ────────────────────────────────────────────── */
/* Selector en la cabecera: dirección elige un asesor y la pantalla se pinta como la ve él. */
.tnval-vercomo { display: inline-flex; align-items: center; gap: 8px; }
.tnval-vercomo-lbl { font-size: var(--tnval-fs-xs); color: var(--tnval-texto-2); font-weight: 500; }
.tnval-vercomo-sel {
  appearance: none; -webkit-appearance: none;
  height: var(--tnval-fila);
  padding: 0 12px;
  border: 1px solid var(--tnval-linea-2);
  border-radius: var(--tnval-radio-1);
  background: var(--tnval-fondo);
  color: var(--tnval-texto);
  font: inherit; font-size: var(--tnval-fs-sm); font-weight: 500;
  cursor: pointer;
}
.tnval-vercomo-sel:focus-visible { outline: 2px solid var(--tnval-azul); outline-offset: 0; border-color: var(--tnval-azul); }
/* Franja de aviso mientras se mira como otro: color info (azul), con palabra «solo lectura». */
.tnval-vercomo-franja {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px solid var(--tnval-in-bd);
  border-radius: var(--tnval-radio-1);
  background: var(--tnval-in-bg);
  color: var(--tnval-in);
  font-size: var(--tnval-fs-sm);
}
.tnval-vercomo-ico { font-size: 1rem; line-height: 1; }
.tnval-vercomo-txt { font-weight: 500; }
.tnval-vercomo-txt strong { font-weight: 600; }
.tnval-vercomo-sep { margin: 0 6px; opacity: .6; }
.tnval-vercomo-salir { margin-left: auto; min-height: 28px; padding: 2px 12px; }

/* ─── 2 · BOTONES (propios; mismas reglas que la norma, prefijo .tnval-) ────────────────────────────── */
.tnval-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tnval-fila);
  padding: 4px 14px;
  border: 1px solid var(--tnval-linea-2);
  border-radius: var(--tnval-radio-1);
  background: var(--tnval-fondo);
  color: var(--tnval-texto);
  font: inherit;
  font-size: var(--tnval-fs-sm);
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .12s ease-out, border-color .12s ease-out, color .12s ease-out, transform .12s ease-out;
}
@media (hover: hover) {
  .tnval-btn:hover:not(:disabled) { background: var(--tnval-hover); }
}
.tnval-btn:active:not(:disabled) { transform: scale(.97); }
.tnval-btn:focus-visible { outline: 2px solid var(--tnval-azul); outline-offset: 2px; }
.tnval-btn:disabled { opacity: .5; cursor: not-allowed; border-style: dashed; }
.tnval-btn.tnval-primary {
  background: var(--tnval-azul); border-color: var(--tnval-azul); color: var(--tnval-sobre-azul);
}
@media (hover: hover) {
  .tnval-btn.tnval-primary:hover:not(:disabled) { background: var(--tnval-azul-hover); border-color: var(--tnval-azul-hover); }
}
.tnval-btn.tnval-ghost { background: transparent; border-color: transparent; color: var(--tnval-texto-2); }
@media (hover: hover) {
  .tnval-btn.tnval-ghost:hover:not(:disabled) { background: var(--tnval-hover); color: var(--tnval-texto); }
}
.tnval-btn.tnval-danger { background: var(--tnval-fondo); color: var(--tnval-ko); border-color: var(--tnval-ko-bd); }
@media (hover: hover) {
  .tnval-btn.tnval-danger:hover:not(:disabled) { background: var(--tnval-ko-bg); }
}
.tnval-btn .tnval-ico { width: 18px; height: 18px; flex: 0 0 auto; }

/* ─── 3 · KPIs (tarjetas de números clave arriba) ──────────────────────────────────────────────────── */
.tnval-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.tnval-kpi {
  padding: 14px 16px;
  border: 1px solid var(--tnval-linea);
  border-radius: var(--tnval-radio-2);
  background: var(--tnval-fondo);
  box-shadow: var(--tnval-sombra);
}
.tnval-kpi-n {
  font-size: var(--tnval-fs-kpi);
  font-weight: 600;
  line-height: 1.05;
  color: var(--tnval-texto);
  font-variant-numeric: tabular-nums;
}
.tnval-kpi-n.tnval-up { color: var(--tnval-ok); }
.tnval-kpi-n.tnval-alert { color: var(--tnval-ko); }
.tnval-kpi-n.tnval-brand { color: var(--tnval-azul); }
.tnval-kpi-lbl {
  margin-top: 6px;
  font-size: var(--tnval-fs-xs);
  color: var(--tnval-texto-2);
  line-height: 1.3;
}

/* ─── 4 · FILTROS (buscador + chips/desplegables) ──────────────────────────────────────────────────── */
.tnval-filtros {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tnval-buscador {
  position: relative;
  flex: 1 1 280px;
  min-width: 200px;
  max-width: 420px;
}
.tnval-buscador .tnval-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--tnval-texto-3); pointer-events: none;
}
.tnval-buscador input {
  width: 100%;
  height: var(--tnval-fila);
  padding: 0 10px 0 34px;
  border: 1px solid var(--tnval-linea-2);
  border-radius: var(--tnval-radio-1);
  background: var(--tnval-fondo);
  color: var(--tnval-texto);
  font: inherit;
  font-size: var(--tnval-fs-sm);
}
.tnval-buscador input::placeholder { color: var(--tnval-texto-2); opacity: 1; }
.tnval-buscador input:focus-visible { outline: 2px solid var(--tnval-azul); outline-offset: 0; border-color: var(--tnval-azul); }

.tnval-chip {
  position: relative;
  display: inline-flex;
}
.tnval-chip select {
  appearance: none;
  -webkit-appearance: none;
  height: var(--tnval-fila);
  padding: 0 30px 0 12px;
  border: 1px solid var(--tnval-linea-2);
  border-radius: var(--tnval-radio-1);
  background: var(--tnval-fondo);
  color: var(--tnval-texto);
  font: inherit;
  font-size: var(--tnval-fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.tnval-chip::after {
  content: "";
  position: absolute; right: 11px; top: 50%; width: 8px; height: 8px;
  transform: translateY(-65%) rotate(45deg);
  border-right: 1.5px solid var(--tnval-texto-3);
  border-bottom: 1.5px solid var(--tnval-texto-3);
  pointer-events: none;
}
.tnval-chip select:focus-visible { outline: 2px solid var(--tnval-azul); outline-offset: 0; border-color: var(--tnval-azul); }
.tnval-chip.is-on select { border-color: var(--tnval-azul-suave); background: var(--tnval-azul-suave); color: var(--tnval-azul); font-weight: 600; }
.tnval-chip.is-on::after { border-color: var(--tnval-azul); }

/* ─── 5 · TABLA de la lista (escritorio) ───────────────────────────────────────────────────────────── */
.tnval-tabla-wrap {
  border: 1px solid var(--tnval-linea);
  border-radius: var(--tnval-radio-2);
  background: var(--tnval-fondo);
  /* overflow-x auto: si la tabla de dirección (muchas columnas + Acciones) no cupiera, scrollea en vez de
     recortar. En móvil la tabla se oculta y salen tarjetas (sin scroll lateral). */
  overflow: hidden auto;
  overflow-x: auto;
}
.tnval-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tnval-fs-sm);
}
.tnval-tabla th {
  text-align: left;
  padding: 10px 12px;
  font-size: var(--tnval-fs-xs);
  font-weight: 500;
  color: var(--tnval-texto-3);
  background: var(--tnval-fondo);
  border-bottom: 1px solid var(--tnval-linea);
  white-space: nowrap;
}
.tnval-tabla td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--tnval-linea);
  vertical-align: middle;
  color: var(--tnval-texto);
}
.tnval-tabla tbody tr:last-child td { border-bottom: 0; }
.tnval-tabla tbody tr { cursor: pointer; }
@media (hover: hover) {
  .tnval-tabla tbody tr:hover td { background: var(--tnval-hover); }
}
.tnval-tabla .tnval-num, .tnval-tabla th.tnval-num { text-align: right; font-variant-numeric: tabular-nums; }
.tnval-tabla .tnval-c-fecha { white-space: nowrap; color: var(--tnval-texto-2); }
.tnval-local-dup { font-size: var(--tnval-fs-2xs); color: var(--tnval-am); margin-top: 2px; font-weight: 500; }
.tnval-local-guardada { font-size: var(--tnval-fs-2xs); color: var(--tnval-texto-3); margin-top: 2px; }
/* El rango «74k–98k» SIEMPRE en una línea (escritorio 1280 y móvil 390): el guion no debe partir. */
.tnval-rango { white-space: nowrap; }

/* ─── Acciones de CRM en la propia lista/ficha (unificación con «Mis valoraciones», 24-oct-2026) ─────── */
/* Con la columna de Acciones, lados un pelín más estrechos para que las 12 columnas quepan en 1280 sin scroll. */
.tnval-tabla.tnval-con-acc th, .tnval-tabla.tnval-con-acc td { padding-left: 8px; padding-right: 8px; }
.tnval-c-acc { white-space: nowrap; text-align: right; }
th.tnval-c-acc { text-align: right; }
.tnval-acc-crm { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tnval-acc-crm .tnval-btn { padding: 5px 10px; font-size: var(--tnval-fs-2xs); }
.tnval-acc-crm .tnval-crm-x { padding: 5px 9px; font-weight: 600; }
/* En la tabla de escritorio los botones son de ICONO (no ensanchan la tabla; el texto va en tarjeta/ficha). */
.tnval-c-acc .tnval-acc-crm { gap: 4px; }
.tnval-crm-icono { min-width: 0; padding: 5px 8px; font-size: 1rem; line-height: 1; }
.tnval-crm-ok { font-size: var(--tnval-fs-xs); color: var(--tnval-ok); white-space: nowrap; font-weight: 500; }
.tnval-asignar { display: inline-flex; }
.tnval-asignar-sel {
  font: inherit; font-size: var(--tnval-fs-2xs); color: var(--tnval-texto);
  padding: 5px 8px; border: 1px solid var(--tnval-linea-2); border-radius: var(--tnval-radio-1);
  background: var(--tnval-fondo); cursor: pointer; max-width: 170px;
}
.tnval-asignar-sel:disabled { opacity: .5; cursor: not-allowed; border-style: dashed; }
/* Fila de acciones al pie de una tarjeta (móvil) */
.tnval-card-acc {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--tnval-linea);
  display: flex; justify-content: flex-start;
}
.tnval-card-acc .tnval-acc-crm { justify-content: flex-start; }
.tnval-card-acc .tnval-btn { padding: 8px 12px; font-size: var(--tnval-fs-xs); }
/* El panel «Subir al CRM» de la ficha */
.tnval-acc-panel .tnval-acc-crm-full { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tnval-acc-panel .tnval-acc-crm-full .tnval-btn { padding: 8px 14px; font-size: var(--tnval-fs-sm); }
.tnval-acc-panel .tnval-asignar-sel { font-size: var(--tnval-fs-xs); padding: 8px 10px; max-width: 220px; }

.tnval-local { line-height: 1.2; }
.tnval-local-nom { font-weight: 500; color: var(--tnval-texto); }
.tnval-local-inf { font-size: var(--tnval-fs-xs); color: var(--tnval-texto-3); margin-top: 1px; }

.tnval-asesor { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tnval-avatar {
  width: 24px; height: 24px; flex: 0 0 auto;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--tnval-fs-3xs); font-weight: 600; line-height: 1;
  background: var(--tnval-gr-bg); color: var(--tnval-gr);
}
.tnval-avatar[data-av="1"] { background: var(--tnval-av1-bg); color: var(--tnval-av1-fg); }
.tnval-avatar[data-av="2"] { background: var(--tnval-av2-bg); color: var(--tnval-av2-fg); }
.tnval-avatar[data-av="3"] { background: var(--tnval-av3-bg); color: var(--tnval-av3-fg); }
.tnval-avatar[data-av="4"] { background: var(--tnval-av4-bg); color: var(--tnval-av4-fg); }
.tnval-avatar[data-av="5"] { background: var(--tnval-av5-bg); color: var(--tnval-av5-fg); }
.tnval-avatar[data-av="6"] { background: var(--tnval-av6-bg); color: var(--tnval-av6-fg); }
.tnval-avatar.tnval-av-lg { width: 40px; height: 40px; font-size: var(--tnval-fs-sm); }

.tnval-dash { color: var(--tnval-texto-3); }

/* Diferencia (coloreada): rojo si >=20, verde si <20, gris si null */
.tnval-dif { font-weight: 600; font-variant-numeric: tabular-nums; }
.tnval-dif.tnval-dif-alta { color: var(--tnval-ko); }
.tnval-dif.tnval-dif-baja { color: var(--tnval-ok); }
.tnval-dif.tnval-dif-nula { color: var(--tnval-texto-3); font-weight: 400; }

/* Fiabilidad */
.tnval-fiab { font-weight: 500; }
.tnval-fiab-alta { color: var(--tnval-ok); }
.tnval-fiab-media { color: var(--tnval-am); }
.tnval-fiab-baja { color: var(--tnval-ko); }
.tnval-fiab-vacia { color: var(--tnval-texto-3); }

/* ─── 6 · BADGES de estado (texto saturado sobre pastel) ───────────────────────────────────────────── */
.tnval-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--tnval-fs-xs);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.tnval-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: 0 0 auto; }
.tnval-badge.tnval-e-ambar   { color: var(--tnval-am); background: var(--tnval-am-bg); border-color: var(--tnval-am-bd); }
.tnval-badge.tnval-e-verde   { color: var(--tnval-ok); background: var(--tnval-ok-bg); border-color: var(--tnval-ok-bd); }
.tnval-badge.tnval-e-info    { color: var(--tnval-in); background: var(--tnval-in-bg); border-color: var(--tnval-in-bd); }
.tnval-badge.tnval-e-rojo    { color: var(--tnval-ko); background: var(--tnval-ko-bg); border-color: var(--tnval-ko-bd); }
.tnval-badge.tnval-e-gris    { color: var(--tnval-gr); background: var(--tnval-gr-bg); border-color: var(--tnval-gr-bd); }

/* ─── 7 · PIE de la lista ──────────────────────────────────────────────────────────────────────────── */
.tnval-pie {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 10px;
  font-size: var(--tnval-fs-xs);
  color: var(--tnval-texto-3);
}

/* Estado vacío / sin resultados */
.tnval-vacio {
  padding: 48px 24px;
  text-align: center;
  color: var(--tnval-texto-2);
}
.tnval-vacio h3 { margin: 0 0 6px; font-size: var(--tnval-fs-lg); font-weight: 600; color: var(--tnval-texto); }
.tnval-vacio p { margin: 0 0 14px; font-size: var(--tnval-fs-sm); }

/* ─── 8 · TARJETAS (móvil, <=760 px) ───────────────────────────────────────────────────────────────── */
.tnval-cards { display: none; flex-direction: column; gap: 12px; }
.tnval-card {
  border: 1px solid var(--tnval-linea);
  border-radius: var(--tnval-radio-2);
  background: var(--tnval-fondo);
  padding: 14px 16px;
  box-shadow: var(--tnval-sombra);
  cursor: pointer;
}
.tnval-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.tnval-card-nom { font-size: var(--tnval-fs-lg); font-weight: 600; line-height: 1.2; color: var(--tnval-texto); }
.tnval-card-meta { margin-top: 4px; font-size: var(--tnval-fs-sm); color: var(--tnval-texto-2); line-height: 1.35; }
.tnval-card-cifras {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 10px 18px;
  margin-top: 12px;
}
.tnval-card-cifras.tnval-card-cifras-4 { grid-template-columns: repeat(4, auto); }
.tnval-cc { min-width: 0; }
.tnval-cc-lbl { font-size: var(--tnval-fs-xs); color: var(--tnval-texto-3); }
.tnval-cc-val { font-size: var(--tnval-fs-md); font-weight: 600; color: var(--tnval-texto); font-variant-numeric: tabular-nums; margin-top: 1px; }

/* ─── 9 · FICHA (detalle) ──────────────────────────────────────────────────────────────────────────── */
.tnval-ficha-head { margin-bottom: 20px; }
.tnval-ficha-titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tnval-ficha-metaline { margin: 4px 0 0; font-size: var(--tnval-fs-sm); color: var(--tnval-texto-2); }
.tnval-ficha-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.tnval-col { display: flex; flex-direction: column; gap: 20px; }

.tnval-panel {
  border: 1px solid var(--tnval-linea);
  border-radius: var(--tnval-radio-2);
  background: var(--tnval-fondo);
  padding: 18px 20px;
  box-shadow: var(--tnval-sombra);
}
.tnval-panel-h {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.tnval-panel-h h2 { margin: 0; font-size: var(--tnval-fs-lg); font-weight: 600; color: var(--tnval-texto); }
.tnval-panel-h .tnval-panel-sub { font-size: var(--tnval-fs-xs); color: var(--tnval-texto-3); }

/* Resultado del simulador */
.tnval-central {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.tnval-central-n {
  font-size: var(--tnval-fs-central);
  font-weight: 600;
  line-height: 1;
  color: var(--tnval-azul);
  font-variant-numeric: tabular-nums;
}
.tnval-central-lbl { font-size: var(--tnval-fs-md); color: var(--tnval-texto-2); }

/* Barra de rango: min ────[zona de cierre]──── max, con marcador de "pide" */
.tnval-barra { margin: 22px 2px 10px; }
.tnval-barra-top, .tnval-barra-bot {
  position: relative; height: 16px;
  font-size: var(--tnval-fs-xs); color: var(--tnval-texto-2);
}
.tnval-barra-min { position: absolute; left: 0; }
.tnval-barra-max { position: absolute; right: 0; }
.tnval-barra-track {
  position: relative;
  height: 10px;
  margin: 2px 0;
  border-radius: 999px;
  background: var(--tnval-linea);
}
/* La zona "defendible": del mínimo al máximo, azul suave relleno */
.tnval-barra-fill {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tnval-azul-suave), #CBD9F2);
}
/* Marcador del cierre probable (azul sólido) */
.tnval-barra-cierre {
  position: absolute; top: -3px; width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--tnval-azul);
  border: 2px solid var(--tnval-fondo);
  box-shadow: var(--tnval-sombra);
  transform: translateX(-50%);
}
/* Marcador del "pide" (línea vertical). Rojo si pide > rango_max. */
.tnval-barra-pide {
  position: absolute; top: -6px; bottom: -6px; width: 2px;
  background: var(--tnval-azul-hover);
  transform: translateX(-50%);
}
.tnval-barra-pide.tnval-pide-fuera { background: var(--tnval-ko); }
.tnval-barra-lbl-cierre, .tnval-barra-lbl-pide { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.tnval-barra-lbl-pide.tnval-pide-fuera { color: var(--tnval-ko); font-weight: 600; }

/* Tiles (cierre probable / salir a publicar / múltiplo / camino) */
.tnval-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 18px;
  background: var(--tnval-linea);
  border: 1px solid var(--tnval-linea);
  border-radius: var(--tnval-radio-1);
  overflow: hidden;
}
.tnval-tile { background: var(--tnval-fondo); padding: 10px 12px; }
.tnval-tile-lbl { font-size: var(--tnval-fs-xs); color: var(--tnval-texto-3); }
.tnval-tile-val { margin-top: 3px; font-size: var(--tnval-fs-md); font-weight: 600; color: var(--tnval-texto); font-variant-numeric: tabular-nums; }

/* Caja de aviso (ámbar) */
.tnval-aviso {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--tnval-am-bd);
  border-radius: var(--tnval-radio-1);
  background: var(--tnval-am-bg);
  color: var(--tnval-am);
  font-size: var(--tnval-fs-sm);
  line-height: 1.45;
}

/* Respuestas del formulario (tabla etiqueta → valor) */
.tnval-respuestas { width: 100%; border-collapse: collapse; }
.tnval-respuestas td { padding: 9px 0; border-bottom: 1px solid var(--tnval-linea); font-size: var(--tnval-fs-sm); vertical-align: top; }
.tnval-respuestas tr:last-child td { border-bottom: 0; }
.tnval-resp-lbl { color: var(--tnval-texto-2); padding-right: 16px; }
.tnval-resp-val { text-align: right; font-weight: 500; color: var(--tnval-texto); }
.tnval-resp-val.tnval-vacio { color: var(--tnval-texto-3); font-weight: 400; font-style: italic; }
.tnval-resp-mas { margin-top: 12px; }
.tnval-resp-mas .tnval-linklike { color: var(--tnval-azul); font-weight: 500; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.tnval-resp-mas .tnval-linklike:hover { text-decoration: underline; }

/* Lead en TRIA */
.tnval-lead-intro { font-size: var(--tnval-fs-sm); color: var(--tnval-texto-2); margin: 0 0 12px; }
.tnval-lead-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; margin-bottom: 14px;
  border: 1px solid var(--tnval-linea);
  border-radius: var(--tnval-radio-1);
  background: var(--tnval-lateral);
}
.tnval-lead-info { min-width: 0; flex: 1; }
.tnval-lead-nom { font-weight: 600; color: var(--tnval-texto); }
.tnval-lead-sub { font-size: var(--tnval-fs-xs); color: var(--tnval-texto-3); margin-top: 1px; }
.tnval-lead-badge { margin-left: auto; }
.tnval-lead-acc { display: flex; flex-direction: column; gap: 8px; }
.tnval-lead-acc .tnval-btn { width: 100%; }
.tnval-lead-nota { margin: 12px 0 0; font-size: var(--tnval-fs-xs); color: var(--tnval-texto-3); line-height: 1.4; }

/* Datos que faltan */
.tnval-faltan { display: flex; flex-direction: column; }
.tnval-falta {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--tnval-linea);
  font-size: var(--tnval-fs-sm);
}
.tnval-falta:last-child { border-bottom: 0; }
.tnval-falta-lbl { color: var(--tnval-texto); }
.tnval-falta-mot { color: var(--tnval-texto-3); text-align: right; }

/* Historial */
.tnval-histo { display: flex; flex-direction: column; gap: 10px; }
.tnval-hline { display: flex; gap: 10px; font-size: var(--tnval-fs-sm); }
.tnval-hhora { flex: 0 0 auto; color: var(--tnval-texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tnval-htxt { color: var(--tnval-texto); }

/* ─── 10 · CHAT interno del asesor ─────────────────────────────────────────────────────────────────── */
.tnval-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 420px;
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--tnval-linea);
  border-radius: var(--tnval-radio-2);
  background: var(--tnval-fondo);
  overflow: hidden;
}
.tnval-chat-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--tnval-linea);
  display: flex; align-items: center; gap: 10px;
}
.tnval-chat-head .tnval-chat-h-txt { line-height: 1.2; }
.tnval-chat-h-tit { font-weight: 600; color: var(--tnval-texto); }
.tnval-chat-h-sub { font-size: var(--tnval-fs-xs); color: var(--tnval-texto-3); }
.tnval-chat-logo {
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: var(--tnval-radio-1);
  background: var(--tnval-azul);
  color: var(--tnval-sobre-azul);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
.tnval-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--tnval-lateral);
}
.tnval-burbuja { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: var(--tnval-fs-sm); line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.tnval-b-tria { align-self: flex-start; background: var(--tnval-fondo); color: var(--tnval-texto); border: 1px solid var(--tnval-linea); border-bottom-left-radius: 4px; }
.tnval-b-yo { align-self: flex-end; background: var(--tnval-azul); color: var(--tnval-sobre-azul); border-bottom-right-radius: 4px; }
.tnval-b-pensando { align-self: flex-start; color: var(--tnval-texto-3); font-style: italic; }
.tnval-chat-aviso {
  margin: 0 16px 12px;
  padding: 10px 12px;
  border: 1px solid var(--tnval-am-bd);
  border-radius: var(--tnval-radio-1);
  background: var(--tnval-am-bg);
  color: var(--tnval-am);
  font-size: var(--tnval-fs-xs);
  line-height: 1.4;
}
.tnval-chat-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--tnval-linea);
  display: flex; gap: 10px; align-items: flex-end;
}
.tnval-chat-foot textarea {
  flex: 1;
  resize: none;
  min-height: var(--tnval-fila);
  max-height: 120px;
  padding: 8px 12px;
  border: 1px solid var(--tnval-linea-2);
  border-radius: var(--tnval-radio-1);
  background: var(--tnval-fondo);
  color: var(--tnval-texto);
  font: inherit;
  font-size: var(--tnval-fs-sm);
  line-height: 1.4;
}
.tnval-chat-foot textarea:focus-visible { outline: 2px solid var(--tnval-azul); outline-offset: 0; border-color: var(--tnval-azul); }
.tnval-chat-foot textarea:disabled { background: var(--tnval-hover); opacity: .6; }

/* ─── 11 · RESPONSIVE: en <=760 px, tabla fuera, tarjetas dentro ───────────────────────────────────── */
@media (max-width: 760px) {
  .tnval { --tnval-fila: 44px; --tnval-fs-central: 2.1rem; --tnval-fs-kpi: 1.6rem; }
  .tnval-tabla-wrap.tnval-has-cards { border: 0; background: transparent; overflow: visible; }
  .tnval-tabla-wrap.tnval-has-cards .tnval-tabla { display: none; }
  .tnval-cards { display: flex; }
  .tnval-kpis { grid-template-columns: repeat(2, 1fr); }
  .tnval-ficha-grid { grid-template-columns: 1fr; }
  .tnval-tiles { grid-template-columns: repeat(2, 1fr); }
  .tnval-head { flex-direction: column; }
  .tnval-filtros { gap: 8px; }
  .tnval-buscador { flex-basis: 100%; max-width: none; }
  .tnval-chip { flex: 1 1 calc(50% - 4px); }
  .tnval-chip select { width: 100%; }
  .tnval-card-cifras { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .tnval-kpis { grid-template-columns: 1fr; }
}

/* ── La ventana «Valoraciones» del panel (#misval-dialog) se desplaza ENTERA (queja de Javidan, 27-oct-2026:
   «no se ve completo y tampoco se puede hacer scrolling») ──
   Comparte la clase .agenda-dialog, y la Agenda le pone `overflow: hidden !important` (styles.css, «Agenda v17» en el
   ordenador y el bloque móvil de ≤760 px). Desde que el resumen del asesor y el chat van DENTRO de la ventana
   (24-oct), el contenido mide más que ella: la lista (flex 1 1, min-height 0) se aplastaba a 0 px —no se veía ni una
   valoración— y lo de abajo quedaba cortado sin barra. Ahora la ventana es la que se desplaza (solo en vertical) y
   ningún bloque se encoge: la lista, el resumen y el chat se ven completos uno debajo de otro. Con id: gana a los
   !important de .agenda-dialog. Lo mide tests/test_valoraciones_scroll.mjs. */
#misval-dialog.agenda-dialog { overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; }
#misval-dialog.agenda-dialog > * { flex-shrink: 0; }
#misval-dialog.agenda-dialog .misval-list { flex: 0 0 auto; min-height: auto; overflow: visible; }

/* ── Resumen del asesor (su pestaña «Valoraciones»: KPIs + oportunidades + pendientes + chat) ─────── */
.tnval-miresumen { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.tnval-miresumen .tnval-kpis { grid-template-columns: repeat(4, 1fr); }
.tnval-miresumen .tnval-panel { width: 100%; box-sizing: border-box; }
.tnval-mini-list { list-style: none; margin: 0; padding: 0; }
.tnval-mini-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--tnval-linea);
}
.tnval-mini-list li:first-child { border-top: 0; }
.tnval-mini-t { color: var(--tnval-texto); font-size: var(--tnval-fs-sm); }
.tnval-mini-m { color: var(--tnval-texto-3); font-size: var(--tnval-fs-2xs); white-space: nowrap; }
.tnval-miresumen-chat-wrap .tnval-miresumen-chat { margin-top: 4px; }
@media (max-width: 760px) {
  .tnval-miresumen .tnval-kpis { grid-template-columns: repeat(2, 1fr); }
  .tnval-mini-list li { flex-direction: column; gap: 2px; }
}