/* Cónclave — sistema de diseño */
:root {
  --fondo: #f4f5fa;
  --superficie: #ffffff;
  --superficie-hover: #f8f9fd;
  --borde: #e3e6f0;
  --borde-fuerte: #cdd2e6;
  --texto: #1f2438;
  --texto-suave: #6b7290;
  --primario: #4653c6;
  --primario-oscuro: #37429e;
  --primario-oscuro-2: #2b3480;
  --primario-suave: #eceef9;
  --acento: #c68a46;
  --exito: #2e9e6b;
  --exito-suave: #e3f4ec;
  --alerta: #c68a46;
  --alerta-suave: #faf0e3;
  --peligro: #c0574f;
  --peligro-suave: #f9e9e8;
  --info: #4687c6;
  --info-suave: #e8f1f9;
  --radio: 12px;
  --radio-chico: 8px;
  --sombra: 0 1px 3px rgba(35, 40, 63, .07), 0 4px 16px rgba(35, 40, 63, .05);
  --sombra-1: 0 1px 2px rgba(31, 36, 56, .06), 0 1px 6px rgba(31, 36, 56, .05);
  --sombra-2: 0 8px 28px rgba(31, 36, 56, .12), 0 2px 8px rgba(31, 36, 56, .07);
  --anillo-foco: 0 0 0 3px rgba(70, 83, 198, .22);
  --transicion: 140ms ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--primario-suave); color: var(--primario-oscuro); }

/* Foco accesible: solo visible con teclado */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbar fina y discreta */
* { scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #b3b9d6; background-clip: padding-box; }

/* ---------- Iconos inline ---------- */
.icono { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; vertical-align: middle; }
.icono svg { display: block; }

/* ---------- Layout v2.0 (barra superior horizontal, sin barra lateral) ---------- */
html, body { min-height: 100%; }
body { display: flex; flex-direction: column; }

.barra-superior {
  position: sticky; top: 0; z-index: 50;
  background-color: #20253d;
  background-image: linear-gradient(160deg, #1b2036 0%, #23283f 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  box-shadow: none;
  transition: box-shadow var(--transicion);
}
.barra-superior.con-sombra { box-shadow: 0 4px 22px rgba(8, 10, 22, .38); }
/* v3.2.2: barra más ancha y tipografía mayor — todo se identifica de un vistazo */
.barra-superior-int {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 32px;
  height: 72px;
}

.logo { display: flex; align-items: center; flex-shrink: 0; color: #fff; }
.logo small { display: none; }

.tp-logo { display: inline-flex; align-items: center; gap: 9px; }
.tp-logo-icono { display: inline-flex; color: var(--primario); }
.tp-logo-texto { font-weight: 800; letter-spacing: -.5px; }

.nav {
  flex: 1; min-width: 0; height: 100%;
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav-enlace {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 100%; padding: 0 15px; margin-bottom: -1px;
  color: #aab0d1; text-decoration: none; font-size: 15.5px; font-weight: 600;
  border-bottom: 2.5px solid transparent;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
  position: relative; white-space: nowrap;
}
.nav-enlace .icono { color: #aab0d1; transition: color var(--transicion); }
.nav-enlace:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.nav-enlace:hover .icono { color: #fff; }
.nav-enlace:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.nav-enlace.activa { color: #fff; border-bottom-color: var(--acento); }
.nav-enlace.activa .icono { color: #fff; }
.nav-seccion { display: none; } /* sin agrupación en nav horizontal (v2.0) */

.pie-app {
  max-width: 1180px; margin: 0 auto; width: 100%;
  padding: 16px 24px 26px; text-align: center;
  font-size: 12px; color: var(--texto-suave);
}

main#contenido {
  flex: 1; width: 100%;
  max-width: 1180px; margin: 0 auto;
  padding: 28px 24px;
}

@media (max-width: 860px) {
  .barra-superior-int { gap: 18px; padding: 0 16px; }
  main#contenido { padding: 18px 14px 40px; }
  .pie-app { padding: 12px 16px 20px; }
}

/* ---------- Encabezados ---------- */
.encabezado-vista { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.encabezado-vista h1 { font-size: 23px; font-weight: 700; letter-spacing: -.3px; }
.encabezado-vista .subtitulo { color: var(--texto-suave); font-size: 13.5px; margin-top: 4px; }
.acciones-vista { display: flex; gap: 10px; flex-wrap: wrap; }

h2 { font-size: 18px; font-weight: 700; margin-bottom: 12px; letter-spacing: -.15px; color: var(--texto); }
h3 { font-size: 14.5px; font-weight: 700; }

/* Barra corta de acento opcional para títulos de sección con más peso */
.titulo-acento { position: relative; padding-left: 14px; }
.titulo-acento::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 4px; border-radius: 4px; background: var(--primario);
}

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta + .tarjeta { margin-top: 18px; }
/* v3.9: dentro de cualquier rejilla el margen entre tarjetas hermanas se anula —
   esa regla de flujo vertical empujaba 18px hacia abajo a toda tarjeta que no
   fuera la primera de su rejilla y desnivelaba dimensiones y recursos (queja
   literal de la dueña en dos capturas distintas). */
.rejilla-2 > .tarjeta + .tarjeta, .rejilla-3 > .tarjeta + .tarjeta, .rejilla-4 > .tarjeta + .tarjeta,
.md-grid > .tarjeta + .tarjeta, .rc-grid > .tarjeta + .tarjeta { margin-top: 0; }
.tarjeta-titulo { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #454c7c; margin-bottom: 12px; }

.rejilla-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rejilla-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .rejilla-4 { grid-template-columns: repeat(2, 1fr); } .rejilla-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; } }

/* KPI */
.kpi { text-align: left; }
.kpi-icono {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--primario-suave); color: var(--primario); margin-bottom: 12px;
}
.kpi-a1 { background: var(--primario-suave); color: var(--primario); }
.kpi-a2 { background: #dff3f8; color: #0e7490; }
.kpi-a3 { background: #faf0da; color: #b45309; }
.kpi-a4 { background: #dff2e6; color: #15803d; }
.kpi .valor { font-size: 32px; font-weight: 800; letter-spacing: -.5px; color: var(--primario); }
.kpi .etiqueta { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }

/* Valores numéricos destacados en tablas y reportes */
.valor-fuerte, .tabla td strong { font-weight: 600; color: var(--texto); }

/* ---------- Botones ---------- */
.boton, .boton-secundario, .boton-peligro {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 9px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: background var(--transicion), border-color var(--transicion), box-shadow var(--transicion), filter var(--transicion), transform var(--transicion);
  font-family: inherit; line-height: 1.2;
}
.boton {
  background: linear-gradient(135deg, var(--primario) 0%, var(--primario-oscuro) 100%);
  color: #fff; box-shadow: 0 1px 2px rgba(35,40,63,.08);
}
.boton:hover {
  background: linear-gradient(135deg, var(--primario-oscuro) 0%, var(--primario-oscuro-2) 100%);
  box-shadow: 0 6px 18px rgba(70,83,198,.32);
}
.boton:active { background: var(--primario-oscuro-2); transform: translateY(.5px); box-shadow: 0 2px 6px rgba(70,83,198,.28); }
.boton:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.boton-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.boton-secundario:hover { background: var(--superficie-hover); border-color: var(--borde-fuerte); }
.boton-secundario:active { background: var(--primario-suave); }
.boton-secundario:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.boton-peligro { background: var(--peligro-suave); color: var(--peligro); }
.boton-peligro:hover { filter: brightness(.96); }
.boton-peligro:focus-visible { outline: 2px solid var(--peligro); outline-offset: 2px; }
.boton:disabled, .boton-secundario:disabled, .boton-peligro:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.boton-chico { padding: 5px 11px; font-size: 13px; }

.btn-icono { display: inline-flex; align-items: center; gap: 7px; }
.btn-icono .icono { color: currentColor; }

/* ---------- Insignias ---------- */
.insignia {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; background: var(--primario-suave); color: var(--primario);
  line-height: 1.6;
}
.insignia-exito { background: var(--exito-suave); color: var(--exito); }
.insignia-alerta { background: var(--alerta-suave); color: #9c6320; }
.insignia-peligro { background: var(--peligro-suave); color: var(--peligro); }
.insignia-info { background: var(--info-suave); color: var(--info); }
.insignia-neutra { background: #eef0f6; color: var(--texto-suave); }

/* ---------- Tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th {
  text-align: left; padding: 10px 12px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--texto-suave); border-bottom: 2px solid var(--borde);
  font-weight: 700; background: var(--superficie); position: sticky; top: 0;
}
.tabla td { padding: 11px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: none; }
.tabla tr { transition: background var(--transicion); }
.tabla tbody tr:hover td { background: var(--superficie-hover); }
.tabla tr.clicable { cursor: pointer; }
.tabla tr.clicable:hover td { background: var(--primario-suave); }
.tabla tr.clicable:focus-visible { outline: 2px solid var(--primario); outline-offset: -2px; }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--texto); }
.campo input, .campo select, .campo textarea {
  padding: 9px 12px; border: 1px solid var(--borde); border-radius: var(--radio-chico);
  font-size: 14px; font-family: inherit; background: #fff; color: var(--texto);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--borde-fuerte); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--primario); box-shadow: var(--anillo-foco);
}
.campo .ayuda { font-size: 12px; color: var(--texto-suave); }

/* ---------- Avatares ---------- */
.avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--primario);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0; overflow: hidden; position: relative;
}
.avatar-grande { width: 56px; height: 56px; font-size: 20px; }
/* Foto de perfil (v3.1): cuando el colaborador tiene foto, el círculo del avatar
   pasa a ser un contenedor recortado; el respaldo de iniciales sigue siendo el
   contenido por defecto si no hay .avatar-img dentro. */
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.persona-celda { display: flex; align-items: center; gap: 11px; }
.persona-celda .nombre { font-weight: 600; }
.persona-celda .detalle { font-size: 12.5px; color: var(--texto-suave); }

/* ---------- Estados vacíos y avisos ---------- */
.vacio {
  text-align: center; padding: 46px 20px; color: var(--texto);
  background: var(--superficie); border: 1px dashed var(--borde); border-radius: var(--radio);
  font-size: 14.5px; font-weight: 600;
}
.vacio .icono-grande { font-size: 34px; display: block; margin-bottom: 10px; }
.vacio-icono {
  width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; border-radius: 16px; background: var(--primario-suave); color: var(--primario);
}
.vacio-icono svg { width: 28px; height: 28px; }
.vacio p { color: var(--texto-suave); font-weight: 400; margin-top: 4px; }

.nota-etica {
  background: var(--info-suave); border-left: 4px solid var(--info);
  padding: 12px 16px; border-radius: 8px; font-size: 13.5px; color: #2c5d8a;
}
.nota-alerta {
  background: var(--alerta-suave); border-left: 4px solid var(--alerta);
  padding: 12px 16px; border-radius: 8px; font-size: 13.5px; color: #7d5a22;
}

.aviso {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #232946; color: #fff; padding: 11px 22px; border-radius: 10px;
  font-size: 14px; font-weight: 600; opacity: 0; transition: all .3s; z-index: 200;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.aviso.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.aviso-peligro { background: var(--peligro); }

/* ---------- Modal ---------- */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(20, 23, 40, .48);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 18px;
}
.modal {
  background: #fff; border-radius: 14px; padding: 24px; width: 100%; max-width: 480px;
  max-height: 88vh; overflow-y: auto; box-shadow: var(--sombra-2), 0 24px 60px rgba(20,23,40,.22);
}
.modal-ancha { max-width: 760px; }
.modal h2 { margin-bottom: 14px; }
.modal-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- Pestañas ---------- */
.pestanas { display: flex; gap: 4px; border-bottom: 2px solid var(--borde); margin-bottom: 20px; flex-wrap: wrap; }
.pestana {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--texto-suave);
  background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px; font-family: inherit; transition: color var(--transicion), border-color var(--transicion);
}
.pestana.activa { color: var(--primario); border-bottom-color: var(--primario); }
.pestana:hover { color: var(--texto); }
.pestana:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: 4px; }

/* ---------- Barra de progreso ---------- */
.barra-progreso {
  height: 8px; background: var(--primario-suave); border-radius: 6px; overflow: hidden;
}
.barra-progreso .relleno { height: 100%; background: var(--primario); border-radius: 6px; transition: width .3s; }

/* ---------- Player de evaluación ---------- */
.player-encabezado {
  position: sticky; top: 58px; background: var(--fondo); z-index: 10;
  padding: 12px 0 10px; margin-bottom: 12px;
}
.player-progreso-texto { display: flex; justify-content: space-between; font-size: 15px; color: var(--texto-suave); margin-bottom: 6px; }
.player-pregunta { font-size: 19.5px; font-weight: 700; margin: 20px 0 22px; line-height: 1.45; }
.opciones-likert { display: flex; flex-direction: column; gap: 9px; }
.opcion-likert {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px;
  border: 1.5px solid var(--borde); border-radius: 10px; cursor: pointer;
  font-size: 15.5px; transition: all .12s; background: var(--superficie); min-height: 46px;
}
.opcion-likert:hover { border-color: var(--primario); background: var(--primario-suave); }
.opcion-likert.elegida { border-color: var(--primario); background: var(--primario-suave); font-weight: 600; }
.opcion-likert input { accent-color: var(--primario); width: 17px; height: 17px; }

/* Escala de acuerdo diferenciada (v2.9): medidor de 5 segmentos que se llena
   según la posición de la opción (1 relleno = extremo bajo ... 5 = extremo
   alto). Color neutro de marca (índigo), nada de rojo/verde que sesgue la
   respuesta. Clase modificadora .opcion-likert-escala: solo la usan los
   renderers de escala de acuerdo (personalidad y evaluación general en modo
   "likert"); las opciones A/B/C/D (juicio, razonamiento, sjt, cognitivo) y el
   resto de usos de .opcion-likert no llevan esta clase y no se ven afectados. */
.opciones-likert-escala { gap: 11px; }
.medidor-escala { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.medidor-escala-seg { width: 4px; height: 14px; border-radius: 2px; background: #e7e8f2; display: block; transition: background .12s; }
.medidor-escala-seg.lleno { background: #4653c6; }
.opcion-likert-texto { flex: 1; }
.opcion-likert-escala-extremo .opcion-likert-texto { font-weight: 700; }
.opcion-likert-escala-medio .opcion-likert-texto { color: var(--texto-suave); }
/* Seleccionada: fondo índigo pleno para máxima evidencia; medidor y texto en
   blanco sobre el fondo pleno (más legible que índigo sobre índigo suave). */
.opcion-likert-escala.elegida { background: var(--primario); border-color: var(--primario); }
.opcion-likert-escala.elegida .opcion-likert-texto { color: #fff; font-weight: 700; }
.opcion-likert-escala.elegida .medidor-escala-seg { background: rgba(255, 255, 255, .35); }
.opcion-likert-escala.elegida .medidor-escala-seg.lleno { background: #fff; }
.cronometro {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px;
  padding: 5px 12px; border-radius: 8px; background: var(--superficie); border: 1px solid var(--borde);
}
.cronometro.urgente { background: var(--alerta-suave); color: #9c6320; border-color: var(--alerta); }

/* Bienvenida del player (v3.4) — insignia del instrumento con su gradiente,
   tarjetas de conteo alineadas en paleta de marca (índigo + hairline dorada). */
.player-bienvenida-cabecera { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.player-bienvenida-insignia {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .25);
}
.player-bienvenida-titulo { font-size: 27px; font-weight: 800; letter-spacing: -.3px; line-height: 1.25; }

.player-bienvenida-conteo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; }
.player-bienvenida-kpi {
  position: relative; text-align: center; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  padding: 18px 16px 16px; overflow: hidden;
}
.player-bienvenida-kpi::before {
  content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 2px;
  background: var(--acento); border-radius: 0 0 2px 2px;
}
.player-bienvenida-kpi-valor { font-size: 30px; font-weight: 800; letter-spacing: -.5px; line-height: 1; color: var(--primario); }
.player-bienvenida-kpi-etiqueta { font-size: 12.5px; font-weight: 600; color: var(--texto-suave); margin-top: 7px; }

.player-bienvenida-instrucciones { margin-bottom: 20px; font-size: 15px; }
.player-bienvenida-consentimiento {
  display: flex; gap: 10px; align-items: center; margin-bottom: 20px;
  font-size: 13.5px; color: var(--texto-suave); cursor: pointer;
}
.player-bienvenida-consentimiento input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--primario); }
.player-bienvenida-boton { width: 100%; justify-content: center; padding: 15px 20px; font-size: 15.5px; }
@media (max-width: 480px) {
  .player-bienvenida-cabecera { gap: 12px; }
  .player-bienvenida-titulo { font-size: 23px; }
}

/* ---------- Gráficos ---------- */
.grafico-leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--texto-suave); justify-content: center; }
.grafico-leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* 9-box */
.nuevebox { display: grid; grid-template-columns: 90px 1fr 1fr 1fr; gap: 6px; }
.nb-celda { border-radius: 10px; padding: 10px; min-height: 86px; }
.nb-titulo { font-size: 11.5px; font-weight: 700; color: #3a4270; margin-bottom: 7px; }
.nb-personas { display: flex; flex-wrap: wrap; gap: 5px; }
.nb-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: #232946; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; cursor: pointer; border: 2px solid #fff;
  transition: transform var(--transicion);
}
.nb-avatar:hover { transform: scale(1.1); }
.nb-mas { font-size: 11px; color: #3a4270; align-self: center; font-weight: 700; }
.nb-eje-y { display: flex; align-items: center; font-size: 11.5px; color: var(--texto-suave); font-weight: 600; }
.nb-eje-x { text-align: center; font-size: 11.5px; color: var(--texto-suave); font-weight: 600; padding-top: 4px; }

/* Heatmap */
.heatmap-envoltura { overflow-x: auto; }
.heatmap { border-collapse: separate; border-spacing: 3px; font-size: 12.5px; min-width: 500px; }
.heatmap th { font-size: 11px; color: var(--texto-suave); font-weight: 600; text-align: left; padding: 4px 6px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heatmap thead th { writing-mode: initial; text-align: center; max-width: 64px; white-space: normal; vertical-align: bottom; }
.heatmap td { width: 52px; height: 34px; text-align: center; border-radius: 7px; font-weight: 700; }
.heatmap .hm-vacio { background: #f0f1f6; color: #b6bacc; font-weight: 400; }

/* ---------- Reporte ---------- */
.reporte-seccion { margin-bottom: 30px; }
/* v3.1: jerarquía más marcada para los títulos de sección (portal y reportes comparten esta clase). */
.reporte-seccion h2 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 14px; }
.interpretacion { font-size: 14.5px; color: var(--texto); line-height: 1.65; }
.dimension-bloque { padding: 20px 0; border-bottom: 1px solid var(--borde); }
.dimension-bloque:last-child { border-bottom: none; }
.dimension-encabezado { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.dimension-encabezado h3 { font-size: 15.5px; }

.lista-acciones { list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* El chip de tipo va ARRIBA, no al lado. Puesto al lado empujaba el contenido, y
   como cada chip mide distinto ("Práctica en el puesto" contra "Mentoría"), cada
   acción arrancaba en una sangría diferente: los textos, los botones de estado y
   las cajas de notas quedaban escalonados de tarjeta en tarjeta. Con el chip encima,
   todo el contenido nace del mismo borde y la lista se lee alineada. */
.accion-item {
  display: block; padding: 12px 14px;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie);
  transition: box-shadow var(--transicion), border-color var(--transicion);
}
.accion-item:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-1); }
.accion-item .tipo-chip {
  display: inline-block; font-size: 11px; font-weight: 800;
  padding: 3px 8px; border-radius: 6px; margin: 0 0 9px;
}
/* v5.7: neutro en vez de índigo — "Práctica en el puesto" es el tipo más
   frecuente y su chip azul llenaba la página de azul. */
.tipo-70 { background: #eceef4; color: #4a5170; }
.tipo-20 { background: var(--exito-suave); color: var(--exito); }
.tipo-10 { background: var(--alerta-suave); color: #9c6320; }

@media print {
  .barra-superior, .pie-app, .acciones-vista, .no-imprimir { display: none !important; }
  main#contenido { padding: 0; max-width: none; }
  body { background: #fff; }
  .tarjeta { box-shadow: none; break-inside: avoid; }
  .hero {
    background: #fff !important; box-shadow: none !important;
    border: 1px solid #d5d8e2 !important; padding: 16px !important;
  }
  .hero h1, .hero .subtitulo, .hero-subtitulo { color: #1a1e30 !important; }
  .hero-buscador, .chips, .hero-chips { display: none !important; }
}

/* ---------- Acceso (login, primera configuración, cambio de PIN) — portada v2.2 ---------- */

/* Envoltorio de portada: fondo de marca sutil + cuadrícula tenue, alto completo.
   Dos columnas en pantallas anchas (marca+login / composición decorativa); una en angostas. */
.acceso-portada {
  position: relative;
  min-height: calc(100vh - 190px);
  display: flex; align-items: center;
  border-radius: 20px;
  padding: 48px 40px;
  background-color: var(--fondo);
  background-image:
    linear-gradient(rgba(70, 83, 198, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 83, 198, .055) 1px, transparent 1px),
    radial-gradient(720px 440px at 92% 6%, rgba(70, 83, 198, .09), transparent 60%),
    radial-gradient(560px 360px at 2% 98%, rgba(198, 138, 70, .07), transparent 55%);
  background-size: 30px 30px, 30px 30px, 100% 100%, 100% 100%;
  background-position: -1px -1px, -1px -1px, 0 0, 0 0;
}
.acceso-portada-int {
  position: relative; z-index: 1;
  width: 100%; max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; gap: 56px;
}
.acceso-col-izq { flex: 1 1 0; min-width: 0; max-width: 560px; }
.acceso-col-der { flex: 1 1 0; min-width: 0; }

/* Marca (logotipo) arriba de la columna izquierda */
.acceso-logo { margin-bottom: 26px; }
.acceso-logo .tp-logo { color: var(--texto); font-size: 22px; }
.acceso-logo .tp-logo-icono { color: var(--primario); }

/* Titular tipográfico estilo Evalart */
.acceso-titular {
  font-size: 50px; font-weight: 800; line-height: 1.08; letter-spacing: -1.1px;
  margin-bottom: 16px;
}
.acceso-titular span { display: block; }
.acceso-titular-color { color: var(--primario); }
.acceso-titular-oscuro { color: var(--texto); }
.acceso-eslogan {
  font-size: 15.5px; color: var(--texto-suave); line-height: 1.55;
  max-width: 460px; margin-bottom: 26px;
}

/* Mini-viñetas de valor */
.acceso-vinetas { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.acceso-vinetas li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--texto); }
.acceso-vineta-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--exito-suave); color: var(--exito);
}
.acceso-vineta-check svg { width: 12px; height: 12px; }

/* Tarjeta de login/config, compacta, debajo del mensaje de marca */
.acceso-tarjeta {
  width: 100%; max-width: 400px;
  box-shadow: var(--sombra-2);
  border-color: var(--borde);
}
.acceso-tarjeta h2 { text-align: center; margin-top: 2px; margin-bottom: 6px; }
.acceso-subtitulo { color: var(--texto-suave); font-size: 13.5px; text-align: center; margin-bottom: 20px; }
.acceso-nota { font-size: 12.5px; color: var(--texto-suave); text-align: center; margin-top: 14px; }

/* Composición decorativa (columna derecha) — v2.3: mini-reporte protagonista + tarjeta de
   ajuste + tarjeta de instrumentos, superpuestas con capas de profundidad detrás (anillo
   tenue, monograma en marca de agua, punto dorado suelto). 100% HTML/CSS, sin fotos ni
   animaciones — geometría sobria (regla "formas y figuras: solo profesionales"). */
.acceso-composicion { position: relative; height: 420px; max-width: 430px; margin-left: auto; }

/* Capas de fondo: dan profundidad para que la composición no flote en el vacío */
.acceso-fondo-anillo {
  position: absolute; top: -22px; right: -26px; width: 260px; height: 260px;
  border-radius: 50%; border: 1.5px solid rgba(70, 83, 198, .12); z-index: 0;
}
.acceso-fondo-marca { position: absolute; bottom: -32px; left: -32px; width: 210px; height: 210px; opacity: .05; z-index: 0; }
.acceso-fondo-marca svg { display: block; }
.acceso-fondo-punto {
  position: absolute; top: 34px; left: 336px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--alerta); z-index: 1;
}

.tarjeta-flotante {
  position: absolute;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px; padding: 18px; box-shadow: var(--sombra-2);
}

/* Tarjeta principal (protagonista): mini-reporte con avatar, escalera de nivel y
   esqueleto de retrato. Sombra más profunda que las tarjetas secundarias (2 niveles). */
.tf-principal {
  top: 0; left: 0; width: 296px; z-index: 3; transform: rotate(-3deg);
  box-shadow: 0 16px 40px rgba(31, 36, 56, .16), 0 4px 14px rgba(31, 36, 56, .08);
}
.tf-principal-enc { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.tf-avatar { width: 40px; height: 40px; font-size: 14px; }
.tf-lineas { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.tf-linea { display: block; border-radius: 5px; background: var(--borde-fuerte); }
.tf-linea-a { height: 10px; width: 72%; }
.tf-linea-b { height: 7px; width: 46%; background: var(--borde); }
.tf-principal-insignia { flex-shrink: 0; white-space: nowrap; }

.tf-escalera { display: flex; align-items: flex-end; gap: 6px; height: 40px; margin-bottom: 16px; }
.tf-escalon { flex: 1 1 0; border-radius: 4px 4px 2px 2px; background: var(--primario); }
.tf-escalon-1 { height: 34%; }
.tf-escalon-2 { height: 52%; }
.tf-escalon-3 { height: 70%; }
.tf-escalon-4 { height: 88%; }
.tf-escalon-5 { height: 100%; }
.tf-escalon-vacio { background: var(--borde-fuerte); }

.tf-cuerpo-lineas { display: flex; flex-direction: column; gap: 8px; }
.tf-linea-cuerpo { display: block; height: 7px; border-radius: 4px; background: var(--borde); }
.tf-linea-cuerpo-fuerte { height: 8px; background: var(--borde-fuerte); }

/* Tarjeta de ajuste (mediana): gauge con la punta dorada como detalle de marca */
.tf-gauge-tarjeta {
  top: 148px; right: 0; width: 218px; transform: rotate(2deg); z-index: 2;
  display: flex; align-items: center; gap: 14px;
}
.tf-gauge { flex-shrink: 0; }
.tf-gauge-etq { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tf-gauge-etq strong { font-size: 13px; font-weight: 700; color: var(--texto); }
.tf-gauge-etq span { font-size: 12px; color: var(--texto-suave); }

/* Tarjeta de instrumentos (chica): 3 barras con color real + fila de estado completado */
.tf-barras { top: 246px; left: 24px; width: 246px; transform: rotate(-1.5deg); z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.tf-barra-fila { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; color: var(--texto-suave); }
.tf-barra-fila > span:first-child { width: 78px; flex-shrink: 0; }
.tf-barra-pista { flex: 1; height: 7px; border-radius: 4px; background: #eef0f7; overflow: hidden; }
.tf-barra-relleno { display: block; height: 100%; border-radius: 4px; }
.tf-barra-completado {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; margin-top: 2px; border-top: 1px dashed var(--borde);
  font-size: 11.5px; font-weight: 600; color: var(--texto-suave);
}
.tf-insignia-chica { font-size: 10.5px; padding: 2px 8px; gap: 3px; }

@media (max-width: 900px) {
  .acceso-col-der { display: none; }
  .acceso-portada-int { flex-direction: column; align-items: stretch; }
  .acceso-col-izq { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 620px) {
  .acceso-portada { padding: 34px 18px; border-radius: 16px; min-height: calc(100vh - 220px); }
  .acceso-titular { font-size: 33px; letter-spacing: -.6px; }
  .acceso-eslogan { font-size: 14.5px; }
}

/* ---------- Chip de usuario (barra superior, v2.0) ---------- */
.chip-usuario {
  margin-left: auto; flex-shrink: 0; height: 100%;
  display: flex; align-items: center; gap: 10px;
  padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .14);
}
/* v4.9: mismo criterio que el avatar del hero — navy con iniciales doradas,
   para que el círculo no se vea como una mancha azul sobre la barra oscura. */
.chip-usuario-avatar {
  width: 36px; height: 36px; font-size: 13px;
  background: linear-gradient(150deg, #2f3760 0%, #1d2238 100%);
  color: #e8c79b;
  border: 1px solid rgba(198, 138, 70, .45);
}
.chip-usuario-info { min-width: 0; line-height: 1.3; }
.chip-usuario-nombre {
  font-size: 15px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
/* v3.2.1: el rol va como texto alineado exactamente bajo el nombre (la D con la C) */
.chip-usuario-insignia {
  display: block; margin-top: 2px; font-size: 10px; padding: 0; line-height: 1.5;
  background: transparent; border: 0; color: #b9c0f5;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: left;
}
/* v3.2.2: Salir con color propio — se ubica de inmediato */
.chip-usuario-salir {
  /* v4.3: un poco de aire respecto al nombre — se veía muy pegado. */
  flex-shrink: 0; margin-left: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(198, 138, 70, .18); border: 1px solid rgba(198, 138, 70, .5); color: #e8b87e;
  font-size: 13.5px; font-weight: 700; padding: 8px 14px; border-radius: 9px; cursor: pointer;
  font-family: inherit; transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.chip-usuario-salir:hover { background: rgba(198, 138, 70, .32); color: #ffd9a8; border-color: rgba(198, 138, 70, .7); }
.chip-usuario-salir:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 620px) {
  .chip-usuario-info { display: none; }
  .chip-usuario { padding-left: 10px; gap: 8px; }
}

/* ---------- Hero de vista (v2.1 — energía visual) ---------- */
.hero {
  position: relative; overflow: hidden;
  border: none; border-radius: 16px;
  padding: 40px 24px 34px; margin-bottom: 24px; text-align: center;
  color: #fff;
  background-color: #20253d;
  background-image:
    radial-gradient(1000px 460px at 50% -22%, rgba(255, 255, 255, .09), transparent 62%),
    radial-gradient(720px 420px at 88% 34%, rgba(139, 147, 232, .14), transparent 68%),
    linear-gradient(160deg, #181c30 0%, #20253d 52%, #23283f 100%);
  box-shadow: var(--sombra-2);
}
/* Acento de marca en tarjetas KPI (v3.0): barra superior fina, ciclo índigo/éxito/dorado.
   Lo usa el panel admin (inicio.js, .tarjeta.kpi) y la biblioteca (evaluaciones.js). */
.tarjeta.kpi { position: relative; overflow: hidden; }
.tarjeta.kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--primario); }
.tarjeta.kpi:nth-child(3n+2)::before { background: var(--exito); }
.tarjeta.kpi:nth-child(3n)::before { background: var(--acento); }
.hero h1 { font-size: 32px; font-weight: 800; letter-spacing: -.4px; color: #fff; }
.hero .subtitulo, .hero-subtitulo { margin-top: 8px; color: rgba(255, 255, 255, .78); font-size: 14.5px; }
.hero.hero-compacto { padding: 28px 24px 26px; }
.hero-buscador { position: relative; max-width: 560px; margin: 22px auto 0; }
.hero-buscador .icono {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--texto-suave);
  pointer-events: none;
}
.hero-buscador input {
  width: 100%; padding: 14px 18px 14px 45px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .45);
  font-size: 14.5px; font-family: inherit; background: rgba(255, 255, 255, .97); color: var(--texto);
  box-shadow: 0 8px 22px rgba(18, 20, 56, .22);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.hero-buscador input::placeholder { color: var(--texto-suave); }
.hero-buscador input:focus {
  outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .4), 0 8px 22px rgba(18, 20, 56, .24);
}
@media (max-width: 620px) { .hero { padding: 30px 18px 26px; } .hero h1 { font-size: 25px; } }

/* ---------- Portal v3.2 — diseño "V1-A" definitivo (referencia: maqueta-portal-v1a.html)
   Todo lo nuevo del portal usa el prefijo pt-; reemplaza hero-marca/kpi-portal/
   kpi-flotante-rejilla (v3.0/v3.1), retirados por no tener ya ningún uso. ---------- */

/* Hero: mismo lockup de marca que .hero, con la luz esquinada exacta de la
   maqueta (halo blanco desde la esquina superior izquierda + brillo dorado
   tenue en la esquina opuesta) y el saludo alineado a la izquierda. */
.pt-hero {
  text-align: left; padding: 34px 34px 30px;
  background-color: #20253d;
  background-image:
    radial-gradient(880px 500px at 10% -22%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 55%, transparent 70%),
    radial-gradient(700px 400px at 92% 8%, rgba(198, 138, 70, .1), transparent 45%),
    linear-gradient(160deg, #181c30, #20253d, #23283f);
}
.pt-hero-band { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }

.pt-greet { display: flex; align-items: center; gap: 16px; min-width: 220px; }
.pt-greet-avatar-btn {
  position: relative; display: inline-flex; flex-shrink: 0;
  border: none; padding: 0; margin: 0; background: none; cursor: pointer; font: inherit;
  border-radius: 50%; overflow: hidden;
}
.pt-greet-avatar-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* v4.9: el índigo brillante dentro del círculo desentonaba con el navy del hero
   (queja literal de la dueña). Relleno navy profundo con las iniciales en dorado
   claro: el anillo dorado sigue siendo el que da el realce. */
.pt-greet-avatar {
  border: 3px solid rgba(198, 138, 70, .7);
  box-shadow: 0 0 0 4px rgba(198, 138, 70, .15);
  background: linear-gradient(150deg, #2f3760 0%, #1d2238 100%);
  color: #e8c79b;
}
.pt-greet-avatar-velo {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(20, 23, 40, .62); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  opacity: 0; transition: opacity var(--transicion);
}
.pt-greet-avatar-velo em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .2px; }
.pt-greet-avatar-btn:hover .pt-greet-avatar-velo,
.pt-greet-avatar-btn:focus-visible .pt-greet-avatar-velo { opacity: 1; }
.pt-greet-text h1 { color: #fff; font-size: 24px; font-weight: 700; line-height: 1.25; }
.pt-greet-text p { color: rgba(255, 255, 255, .58); font-size: 13.5px; margin-top: 3px; }

.pt-hero-divider { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .14); margin: 2px 0; }

.pt-ring-block { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.pt-ring-wrap { position: relative; width: 112px; height: 112px; flex-shrink: 0; }
.pt-ring-wrap svg { display: block; }
.pt-ring-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pt-ring-num { color: #fff; font-size: 22px; font-weight: 700; line-height: 1; }
.pt-ring-lbl { color: rgba(255, 255, 255, .5); font-size: 10px; margin-top: 4px; letter-spacing: .3px; }
.pt-ring-copy h2 { color: #fff; font-size: 17px; font-weight: 700; }
.pt-ring-copy p { color: rgba(255, 255, 255, .6); font-size: 13.5px; margin-top: 4px; }
.pt-ring-gold { color: var(--acento); font-weight: 600; margin-top: 6px; }

/* Etiquetas de sección "TU SIGUIENTE PASO" / "DESPUÉS CONTINÚA CON" */
/* v4.3: etiquetas de sección en tono oscuro resaltado — la barrita de color
   queda como único detalle (antes el gris claro y el verde competían con el
   contenido). */
.pt-section-label {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800;
  letter-spacing: 1.2px; color: #181c30; text-transform: uppercase; margin-bottom: 16px;
}
.pt-bar { width: 16px; height: 2px; background: var(--acento); border-radius: 2px; flex-shrink: 0; }
/* v4.2: aire entre una rejilla y la etiqueta de la sección siguiente — con los
   8px de .pt-grid4 la etiqueta quedaba pegada a las tarjetas de arriba. */
.pt-grid4 + .pt-section-label { margin-top: 34px; }

/* Insignias de instrumento (protagonista 64px / secundarias 48px) */
.pt-badge { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.pt-badge-64 { width: 64px; height: 64px; border-radius: 16px; }
.pt-badge-48 { width: 48px; height: 48px; border-radius: 13px; margin-bottom: 16px; }

/* Tarjeta protagonista de "Tu siguiente paso"
   v4.7 (opción C elegida por la dueña): hereda los detalles de color del aviso
   del plan que se retiró del inicio — filete dorado a la izquierda y fondo
   cálido — para que se despegue del gris de la página. El dorado sigue siendo
   el color de acción (botón "Comenzar ahora"). */
.pt-protagonista {
  display: flex; align-items: center; gap: 24px;
  background: linear-gradient(180deg, #fff 0%, #fbf7f0 100%);
  border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: 16px;
  padding: 30px 34px; box-shadow: var(--sombra-2); margin-bottom: 40px; flex-wrap: wrap;
}

/* La insignia toma el degradado índigo→navy del icono de aquel bloque (la de
   celebración conserva su verde: lo pinta con estilo propio desde portal.js). */
.pt-protagonista .pt-badge-64 {
  background: linear-gradient(145deg, #4653c6, #23283f);
  box-shadow: 0 8px 18px -6px rgba(35, 40, 63, .45);
}
.pt-protagonista-cuerpo { flex: 1 1 260px; min-width: 0; }
.pt-tag-inicio {
  display: inline-block; background: rgba(198, 138, 70, .14); color: #95632c;
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.pt-protagonista-cuerpo h3 { font-size: 23px; font-weight: 700; color: var(--texto); }
.pt-protagonista-desc { color: var(--texto-suave); font-size: 15px; margin-top: 6px; }
.pt-protagonista-meta { color: var(--texto-suave); font-size: 13px; margin-top: 10px; font-weight: 500; }
.pt-boton-gold {
  flex-shrink: 0; background: linear-gradient(150deg, #d29a5c, var(--acento)); color: #241505;
  font-size: 17px; font-weight: 700; border: none; border-radius: 13px; padding: 19px 42px;
  box-shadow: 0 12px 26px rgba(198, 138, 70, .4); white-space: nowrap; cursor: pointer;
  font-family: inherit; transition: filter var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.pt-boton-gold:hover { filter: brightness(1.04); box-shadow: 0 14px 30px rgba(198, 138, 70, .5); }
.pt-boton-gold:active { transform: translateY(1px); }
.pt-boton-gold:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* Rejilla "Después continúa con" — auto-fill responsivo */
.pt-grid4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-bottom: 8px; }
.pt-card {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 22px;
  display: flex; flex-direction: column; box-shadow: var(--sombra-1); height: 100%;
  transition: box-shadow var(--transicion), transform var(--transicion), border-color var(--transicion);
}
.pt-card:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.pt-card-titulo-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pt-card-titulo-fila h4 { font-size: 16.5px; font-weight: 700; color: var(--texto); }
.pt-card-dur { font-size: 12px; color: var(--texto-suave); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.pt-card-meta { font-size: 12.5px; color: var(--texto-suave); margin-top: 8px; line-height: 1.4; }
.pt-chip-pendiente {
  display: inline-flex; align-items: center; gap: 5px; background: var(--alerta-suave); color: #9c6320;
  font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; margin-top: 14px; width: fit-content;
}
.pt-chip-pendiente i { width: 5px; height: 5px; border-radius: 50%; background: #9c6320; display: block; }
/* v7.9: chip de las tres pruebas tipo juego. Ocupa el lugar de "Pendiente" —no se
   suma a él— porque lo que hace falta no es repetir el estado de la tarjeta sino
   distinguirla de un cuestionario de veinte minutos. Dorado pleno con el reloj de
   marca: es el único chip relleno del portal, y esa singularidad es a propósito. */
.pt-chip-juego {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #c68a46 0%, #a86f31 100%); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  padding: 5px 11px; border-radius: 999px; margin-top: 14px; width: fit-content;
  box-shadow: 0 3px 9px -4px rgba(140, 92, 36, .75);
}
.pt-chip-juego svg { flex: none; }
/* El contorno del instrumento ya distingue la tarjeta; esto solo levanta un poco
   la que trae juego para que se note al barrer la rejilla con la vista. */
.pt-card-juego { box-shadow: 0 4px 16px -10px rgba(140, 92, 36, .55); }
/* v7.9: chip de "Explora más pruebas". Misma forma que el de pendiente, en gris
   azulado en vez de ámbar: el ámbar reclama una acción, y estas pruebas no se le
   asignaron a nadie — están ahí por si la persona quiere. */
.pt-chip-disponible {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(70, 83, 198, .09); color: #4c5578;
  font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  margin-top: 14px; width: fit-content;
}
.pt-chip-disponible i { width: 5px; height: 5px; border-radius: 50%; background: #4c5578; display: block; }

/* v7.11: "Juega cuando quieras". Deliberadamente NO usa .pt-card: si se viera igual
   que las tarjetas del recorrido se leeria como un pendiente mas, y lo que tiene que
   comunicar es lo contrario — esto es opcional y es un gusto. Piezas mas bajas, sin
   insignia de 48px, y el boton dorado que en el resto del portal solo aparece en
   "Comenzar ahora". */
.pt-juegos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-bottom: 8px;
}
.pt-juego {
  background: var(--superficie); border: 1px solid var(--borde);
  border-top: 3px solid var(--jt); border-radius: 12px;
  padding: 16px 18px 18px; display: flex; flex-direction: column;
}
.pt-juego-cab { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.pt-juego-icono {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  /* El tinte llega ya calculado desde portal.js con hexARgba, igual que el resto
     de las tarjetas del portal: color-mix no aporta nada aquí y añade un requisito
     de navegador que esta plataforma no necesita. */
  background: var(--jt-suave); color: var(--jt);
}
.pt-juego-nombre { font-size: 15px; font-weight: 700; line-height: 1.25; }
.pt-juego-dur {
  font-size: 12px; color: var(--texto-suave); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pt-juego-gancho {
  font-size: 13px; color: var(--texto-suave); line-height: 1.5;
  margin: 0 0 14px;
}
/* El boton se ancla abajo para que las piezas queden parejas aunque el gancho
   ocupe una linea o dos. */
.pt-juego-boton {
  margin-top: auto; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(135deg, #c68a46 0%, #a86f31 100%); color: #fff;
  border: none; border-radius: 10px; padding: 11px 16px;
  font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  box-shadow: 0 4px 12px -5px rgba(140, 92, 36, .7);
  transition: filter var(--transicion);
}
.pt-juego-boton:hover { filter: brightness(1.07); }
.pt-juego-boton:focus-visible { outline: 2px solid #a86f31; outline-offset: 2px; }
.pt-juego-boton svg { flex: none; }
.pt-card-pie { margin-top: auto; padding-top: 16px; }
.pt-boton-responder {
  width: 100%; background: var(--primario); color: #fff; border: none; border-radius: 10px;
  padding: 11px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background var(--transicion);
}
.pt-boton-responder:hover { background: var(--primario-oscuro); }
.pt-boton-responder:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
/* v2.9: pie de dos acciones (Ver mi reporte / Repetirla) en las tarjetas
   pt-card-hecha del historial de "Mis evaluaciones" — mismo anclaje al fondo
   que .pt-card-pie, pero con dos botones secundarios repartiendo el ancho. */
.pt-card-pie-doble { margin-top: auto; padding-top: 14px; display: flex; gap: 8px; }
.pt-card-pie-doble .boton-secundario { flex: 1; }

/* Nota ética discreta, encima del cierre */
.pt-nota-etica { margin-top: 4px; margin-bottom: 24px; }

/* Cierre navy: la página termina como empieza, envuelta en la marca */
/* v4.2: sin el halo blanco que lavaba el navy — fondo limpio para que la
   información resalte (petición literal de la dueña). */
.pt-closing {
  position: relative; overflow: hidden; border-radius: 16px;
  background: linear-gradient(160deg, #181c30, #1e2338 60%, #23283f);
  padding: 30px 24px 36px; box-shadow: var(--sombra-2);
}
.pt-closing-int { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.pt-closing-hint { color: rgba(255, 255, 255, .6); font-size: 13px; margin-right: 8px; font-weight: 600; }
/* v4.2: fondo sólido y borde definido en vez del translúcido que difuminaba
   el contraste del texto. */
.pt-link-btn {
  display: inline-flex; align-items: center; gap: 12px; background: #2a3050;
  border: 1px solid #3a4166; color: #fff; font-size: 14px; font-weight: 600;
  padding: 11px 22px 11px 12px; border-radius: 13px; cursor: pointer; font-family: inherit;
  transition: background var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.pt-link-btn:hover { background: #333a5e; border-color: var(--acento); transform: translateY(-1px); }
.pt-link-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* v3.2.2: círculo dorado PLENO — llama la atención e invita a entrar */
/* v4.2: dorado nítido, sin el halo que se derramaba sobre el navy. */
.pt-link-circ {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(150deg, #d9a161, var(--acento));
  border: 1px solid rgba(255, 255, 255, .18); color: #241505;
}
.pt-link-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.pt-link-txt strong { font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.2; }
.pt-link-txt small { font-size: 12px; color: rgba(255, 255, 255, .78); font-weight: 500; }

@media (max-width: 760px) {
  .pt-hero-band { flex-direction: column; align-items: flex-start; }
  .pt-hero-divider { display: none; }
  .pt-ring-block { width: 100%; justify-content: space-between; }
}
@media (max-width: 620px) {
  .pt-hero { padding: 26px 18px 30px; }
  .pt-greet-text h1 { font-size: 21px; }
  .pt-protagonista { padding: 24px 20px; }
  .pt-boton-gold { width: 100%; text-align: center; padding: 16px 24px; }
}
@media (max-width: 480px) {
  .pt-ring-block { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Chips de filtro (v2.1 — sobre hero de color) ----------
   .hero-chips es alias de .chips: algunas vistas (biblioteca de evaluaciones, colaboradores)
   generan el contenedor de chips con ese nombre; sin esta regla quedaban sin diseño ni
   separación (pegados al buscador y a la barra de resultados). */
.chips, .hero-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 12px;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .92); font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.chip .icono { width: 14px; height: 14px; }
.chip:hover { border-color: rgba(255, 255, 255, .6); color: #fff; background: rgba(255, 255, 255, .22); }
.chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chip.activo, .chip.activa { background: #fff; border-color: #fff; color: var(--primario); }

/* Fuera del hero (fondo claro), el chip usa la variante neutra */
.tarjeta .chip, .rejilla-tarjetas .chip {
  border-color: var(--borde); background: var(--superficie); color: var(--texto-suave);
}
.tarjeta .chip:hover, .rejilla-tarjetas .chip:hover { border-color: var(--borde-fuerte); color: var(--texto); background: var(--superficie-hover); }
.tarjeta .chip.activo, .tarjeta .chip.activa,
.rejilla-tarjetas .chip.activo, .rejilla-tarjetas .chip.activa { background: var(--primario); border-color: var(--primario); color: #fff; }

/* ---------- Rejilla de tarjetas de prueba / biblioteca (v2.0) ---------- */
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* min-width:0 permite que las descripciones nowrap+ellipsis se recorten en vez de
   ensanchar la columna (sin esto la rejilla desborda el contenedor). */
.rejilla-tarjetas > * { min-width: 0; }
@media (max-width: 980px) { .rejilla-tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rejilla-tarjetas { grid-template-columns: 1fr; } }

.tarjeta-prueba {
  display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.tarjeta-prueba:hover { box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); transform: translateY(-2px); }
.tarjeta-prueba-icono,
.tarjeta-prueba-insignia {
  width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--primario-suave); color: var(--primario); margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(31, 36, 56, .06);
  border: 1px solid rgba(31, 36, 56, .05);
}
/* La biblioteca (evaluaciones.js, JS no editable) sigue pintando un fondo suave por
   inline style — el tamaño/radio/sombra de arriba ya le dan presencia. El portal
   (portal.js) pinta en su lugar un fondo en gradiente pleno + icono blanco vía
   inline style, que sobreescribe background/color/box-shadow/border sin tocar esta
   regla base: ambas variantes quedan coherentes con un único bloque CSS. */
/* Nombre / meta / descripción con nomenclatura de la biblioteca (v2.0) */
.tarjeta-prueba-nombre { font-size: 16px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.1px; color: var(--texto); }
.tarjeta-prueba-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: 12.5px; color: var(--texto-suave); margin-bottom: 9px;
}
.tarjeta-prueba-meta svg { width: 13px; height: 13px; vertical-align: -2px; }
.tarjeta-prueba-descripcion {
  font-size: 13.5px; color: var(--texto-suave); margin-bottom: 16px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.enlace-detalles {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--primario); font-family: inherit;
}
.enlace-detalles:hover { text-decoration: underline; }
.enlace-detalles:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: 4px; }
.tarjeta-prueba h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.1px; }
.tarjeta-prueba .meta {
  display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--texto-suave); margin-bottom: 9px;
}
.tarjeta-prueba .meta span { display: inline-flex; align-items: center; gap: 4px; }
.tarjeta-prueba .meta .icono { width: 13px; height: 13px; }
.tarjeta-prueba .descripcion {
  font-size: 13.5px; color: var(--texto-suave); margin-bottom: 16px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta-prueba-pie {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.tarjeta-prueba-pie a { font-size: 13px; font-weight: 600; color: var(--primario); text-decoration: none; }
.tarjeta-prueba-pie a:hover { text-decoration: underline; }
.tarjeta-prueba-pie a:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: 4px; }
/* Botón primario del pie (Responder / Asignar): más presencia, sombra índigo suave. */
.tarjeta-prueba-pie .boton { padding: 8px 18px; box-shadow: 0 6px 16px -6px rgba(70, 83, 198, .45); }
.tarjeta-prueba-pie .boton:hover { box-shadow: 0 10px 22px -6px rgba(70, 83, 198, .55); }

/* ========== v2.5 — Portada de acceso "Oscura premium" (namespace an-) ==========
   Activa con body.modo-acceso (el enrutador la pone solo en la ruta "acceso").
   Sin @keyframes; formas profesionales; contraste AA. */
body.modo-acceso .barra-superior, body.modo-acceso .pie-app { display: none; }
body.modo-acceso main#contenido { max-width: none; padding: 0; }

.an-portada {
  min-height: 100vh; color: #fff; position: relative;
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(139,147,232,.16), transparent 60%),
    radial-gradient(900px 500px at 8% 108%, rgba(198,138,70,.10), transparent 55%),
    linear-gradient(160deg, #181c30 0%, #20253d 52%, #23283f 100%);
}
/* v2.8.2: luz suave que se desvanece (sin cuadrícula) — un halo blanco alto que cae
   en degradado y un brillo índigo lateral, discretos y elegantes. */
.an-portada::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1000px 560px at 50% -14%, rgba(255,255,255,.085), transparent 62%),
    radial-gradient(760px 460px at 84% 30%, rgba(139,147,232,.10), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 26%);
}
.an-int { position: relative; max-width: 1320px; margin: 0 auto; padding: 0 64px; }

/* v2.8.3: la marca abre la columna principal, grande y protagonista. */
.an-logo-hero { margin-bottom: 34px; }
.an-logo { display: flex; align-items: center; gap: 16px; }
.an-logo svg { width: 52px; height: 52px; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,.4)); }
.an-logo .an-wordmark { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: #fff; }

.an-hero { min-height: 100vh; display: flex; align-items: center; }
.an-hero .an-int { display: flex; align-items: center; gap: 64px; padding-top: 36px; padding-bottom: 36px; width: 100%; }
.an-izq { flex: 0 0 auto; width: 560px; }

.an-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #8b93e8; background: rgba(139,147,232,.10); border: 1px solid rgba(139,147,232,.28);
  padding: 7px 14px 7px 12px; border-radius: 100px; margin-bottom: 28px;
}
.an-eyebrow .an-punto { width: 6px; height: 6px; border-radius: 50%; background: #c68a46; display: inline-block; }

.an-titular { font-size: 56px; line-height: 1.08; font-weight: 800; letter-spacing: -.022em; color: #fff; margin: 0; }
.an-titular .an-acento { color: #c68a46; }
.an-sub { margin-top: 22px; font-size: 17px; line-height: 1.6; color: #aab0d1; max-width: 460px; }

.an-vinetas { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.an-vinetas li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: #dfe2f2; font-weight: 500; }
.an-vinetas .an-marca {
  flex: none; width: 20px; height: 20px; border-radius: 6px;
  background: rgba(139,147,232,.14); border: 1px solid rgba(139,147,232,.35);
  display: flex; align-items: center; justify-content: center;
}
.an-vinetas .an-marca svg { width: 11px; height: 11px; }
.an-vinetas li:nth-child(2) .an-marca { background: rgba(198,138,70,.14); border-color: rgba(198,138,70,.4); }

.an-cta { margin-top: 40px; }
.an-boton-oro {
  display: inline-flex; align-items: center; gap: 11px;
  background: linear-gradient(180deg, #c68a46 0%, #b87a38 100%);
  color: #1c1408; font-size: 16px; font-weight: 700; letter-spacing: -.005em;
  padding: 16px 30px; border-radius: 11px; border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 18px 38px -14px rgba(198,138,70,.55), inset 0 1px 0 rgba(255,255,255,.35);
  cursor: pointer; font-family: inherit;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.an-boton-oro:hover { box-shadow: 0 22px 44px -14px rgba(198,138,70,.7), inset 0 1px 0 rgba(255,255,255,.35); transform: translateY(-1px); }
.an-boton-oro svg { width: 17px; height: 17px; }

/* Tarjeta blanca del formulario (login / primera configuración / cambio de PIN) */
.an-form { margin-top: 34px; max-width: 430px; background: #fff; color: var(--texto); border-radius: 16px; padding: 26px 26px 24px; box-shadow: 0 30px 60px -18px rgba(0,0,0,.5); }
.an-form h2 { color: var(--texto); }

/* Columna derecha: bento de capturas */
.an-der { flex: 1 1 auto; }
.an-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 560px; margin-left: auto; }
.an-card { background: #fff; border-radius: 16px; padding: 22px 22px 20px; color: #1b1f33; min-width: 0; }
.an-card-gauge { grid-column: 1 / 3; box-shadow: 0 30px 60px -18px rgba(70,83,198,.55), 0 4px 14px -4px rgba(0,0,0,.35); }
.an-card-escalera { box-shadow: 0 26px 52px -16px rgba(198,138,70,.45), 0 4px 14px -4px rgba(0,0,0,.35); }
.an-card-pruebas { box-shadow: 0 26px 52px -16px rgba(124,58,237,.42), 0 4px 14px -4px rgba(0,0,0,.35); }
.an-card-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.an-card-titulo { font-size: 12.5px; font-weight: 700; color: #5a5f7c; letter-spacing: .02em; }
.an-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; }
.an-tag-indigo { background: rgba(70,83,198,.10); color: #4653c6; }
.an-tag-oro { background: rgba(198,138,70,.14); color: #b87a38; }
.an-tag-purpura { background: rgba(124,58,237,.10); color: #7c3aed; }
.an-gauge-cuerpo { display: flex; align-items: center; gap: 24px; }
.an-gauge-datos { display: flex; flex-direction: column; gap: 10px; min-width: 150px; }
.an-gauge-datos .an-cap { font-size: 12.5px; color: #767c9c; line-height: 1.45; }
.an-gauge-datos .an-fila { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #5a5f7c; }
.an-swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.an-escalera-etq { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 2px; }
.an-escalera-etq span { font-size: 10px; color: #8a90ac; font-weight: 600; }
.an-prueba-fila { margin-bottom: 14px; }
.an-prueba-fila:last-child { margin-bottom: 0; }
.an-prueba-fila .an-arriba { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.an-prueba-fila .an-nombre { font-size: 11.5px; font-weight: 600; color: #3f4460; }
.an-prueba-fila .an-pct { font-size: 11.5px; font-weight: 700; color: #1b1f33; }
.an-pista { height: 8px; border-radius: 5px; background: #eef0f7; overflow: hidden; }
.an-relleno { height: 100%; border-radius: 5px; }

/* Sección inferior (3 puntos del producto) */
.an-abajo { border-top: 1px solid rgba(255,255,255,.05); padding: 64px 0 76px; }
.an-abajo .an-int { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.an-abajo .an-num { font-size: 12px; font-weight: 700; color: #c68a46; letter-spacing: .08em; margin-bottom: 10px; }
.an-abajo h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 8px; letter-spacing: -.01em; }
.an-abajo p { font-size: 14px; line-height: 1.6; color: #aab0d1; }

/* v7.20: la portada se salía de la pantalla en un celular real.
   `width: auto` no bastaba: la columna seguía con `flex: 0 0 auto`, o sea que NO
   encoge — su ancho lo fijaba su propio contenido, y `.an-sub` declara `max-width:
   460px`. En un teléfono de 390 px eso da una columna de 460 dentro de 346
   disponibles: la página entera se podía arrastrar de lado y aparecía una franja
   blanca a la derecha, porque el fondo de `.an-portada` solo pinta el ancho de la
   ventana, no el del desbordamiento.
   Se cambia a `flex: 1 1 auto` con `min-width: 0` para que pueda encoger de verdad
   (sin `min-width: 0` un elemento flex no baja de su contenido mínimo), y el
   `max-width` del párrafo se suelta en pantalla chica. */
@media (max-width: 1100px) {
  .an-der { display: none; }
  .an-izq { width: auto; flex: 1 1 auto; min-width: 0; max-width: 560px; }
}
@media (max-width: 760px) {
  .an-int { padding: 0 22px; }
  .an-titular { font-size: 38px; }
  .an-sub { max-width: 100%; }
  .an-abajo .an-int { grid-template-columns: 1fr; gap: 26px; }
}
/* Teléfono angosto: el titular a 38 px todavía puede empujar el ancho con una
   palabra larga ("excepcional."), así que baja un escalón más. */
@media (max-width: 400px) {
  .an-int { padding: 0 18px; }
  .an-titular { font-size: 33px; }
  .an-sub { font-size: 16px; }
}
@media print { .an-portada { background: #fff; color: #000; } }


/* Cónclave — CSS Agente 1 (v2.6): registro de colaboradores desde la portada oscura.
   Prefijo reg- para clases nuevas; reutiliza variables y clases existentes
   (.an-form, .campo, .an-boton-oro, .acceso-nota, .nota-alerta) al máximo. */

/* Enlace secundario discreto bajo el botón dorado "Iniciar sesión" (fondo oscuro) */
.an-cta-enlace {
  display: block; margin-top: 18px; font-size: 14px; color: #c6cae2;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(198,202,226,.45);
}
.an-cta-enlace:hover { color: #fff; text-decoration-color: rgba(255,255,255,.7); }
.an-cta-enlace:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: 3px; border-radius: 3px; }
/* v7.16: puerta de Recursos Humanos, "configurar esta plataforma". Aparece solo
   mientras no exista cuenta de administración en este navegador.
   Era un enlace subrayado y se veía como un renglón suelto sobre la portada. Ahora
   fue un botón de contorno al pie.
   v7.17: sube a la esquina superior derecha y pierde la píldora. El problema real no
   era la forma sino el LUGAR: bajo el mensaje ya había botón dorado, "Iniciar
   sesión" y esto — tres cosas apiladas cuando solo una es para quien abre el enlace.
   Arriba a la derecha, que es donde por convención vive el acceso, está disponible
   sin competir. Y sin contorno ni fondo: texto llano con su engrane, que no pide
   turno en la lectura. */
/* v7.18: la elegancia aquí es tipográfica, no de adorno. En versión llana se veía
   deslavado; en versión píldora pesaba de más. La salida es tratarlo como lo que es
   —una etiqueta de acceso, no una llamada a la acción— con la misma voz que ya usa
   la portada en `.an-eyebrow`: versalitas, peso alto y letra muy espaciada. Esa
   combinación se lee formal por sí sola, sin contorno ni fondo.
   El candado, en el índigo de marca, dice "acceso reservado" mejor que un engrane,
   que insinúa configuración. Y el subrayado no está: aparece al pasar encima, que
   es cuando hace falta la señal de que se puede pulsar. */
.an-esquina {
  position: absolute; top: 26px; right: 32px; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  /* v7.19: en blanco. El gris azulado lo dejaba deslavado sobre el navy; el blanco a
     este tamaño y con esta separación se lee limpio y caro sin ganar peso — la
     discreción ya la dan los 10.5 px y el rincón, no hace falta apagarle el color.
     El candado va en el mismo blanco pero con opacidad: acompaña a la palabra en vez
     de disputarle la atención. */
  color: #fff;
  text-decoration: none; cursor: pointer; font-family: inherit;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), opacity var(--transicion);
  opacity: .82;
}
.an-esquina:hover { opacity: 1; border-bottom-color: rgba(255,255,255,.42); }
.an-esquina:focus-visible { outline: 2px solid rgba(255,255,255,.55); outline-offset: 5px; border-radius: 3px; }
.an-esquina svg { width: 13px; height: 13px; flex: none; opacity: .72; }
/* En pantalla chica se pega más a la orilla; el logo vive a la izquierda, así que no
   se estorban aunque la portada se apile. */
@media (max-width: 640px) {
  .an-esquina { top: 15px; right: 16px; font-size: 9.5px; letter-spacing: .11em; gap: 7px; }
  .an-esquina svg { width: 12px; height: 12px; }
}

/* Enlace "Ya tengo una cuenta" dentro de la tarjeta blanca (reutiliza .acceso-nota) */
.acceso-nota a { color: var(--primario); font-weight: 600; text-decoration: none; }
.acceso-nota a:hover { text-decoration: underline; }

/* Selector de tres opciones "¿Tu puesto se relaciona con lo que estudiaste?" */
.reg-opciones { display: flex; gap: 8px; flex-wrap: wrap; }
.reg-opcion {
  flex: 1 1 0; min-width: 84px; padding: 9px 10px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: #fff; color: var(--texto); font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-align: center;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.reg-opcion:hover { border-color: var(--borde-fuerte); }
.reg-opcion:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
.reg-opcion.activa { background: var(--primario); border-color: var(--primario); color: #fff; }

/* Lista de pruebas asignadas en la pantalla de confirmación */
.reg-lista-pruebas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.reg-lista-pruebas li {
  display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-chico);
  padding: 8px 12px;
}
.reg-lista-pruebas li svg { width: 13px; height: 13px; flex: none; }

/* ============================================================
   Cónclave — CSS Agente 2 (v2.6): "Mi desarrollo" del colaborador
   Prefijo md- para todo lo nuevo. Reutiliza variables y clases ya
   existentes en css/estilos.css (--primario, --primario-suave,
   --exito, --info, --texto, --texto-suave, --borde, --fondo,
   --superficie, .tarjeta, .rejilla-2, .rejilla-3, .encabezado-vista,
   .vacio, .reporte-seccion, .subtitulo, .boton, .btn-icono).
   ============================================================ */

/* ---------- Estado vacío (cero resultados) ---------- */
.md-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

/* ---------- Escalera de nivel N1–N5 ---------- */
.md-escalera { margin-bottom: 24px; }

/* v3.9: el nivel corona la vista — cabecera centrada, nombre grande y
   subrayado dorado (antes quedaba chico y perdido a la izquierda). */
.md-escalera-cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  text-align: center;
}

.md-escalera-etiqueta {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--texto-suave);
}

/* v4.0: navy sobrio con la misma tipografía de los títulos — el índigo brillante
   se veía informal (queja literal de la dueña). */
.md-escalera-nivel {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: #181c30;
}

.md-escalera-raya {
  width: 52px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #d29a5c, #c68a46);
}

.md-escalera-pasos {
  display: flex;
  align-items: flex-start;
}

.md-paso {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.md-paso:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--borde);
  z-index: 0;
}

.md-paso-hecho:not(:first-child)::before,
.md-paso-actual:not(:first-child)::before {
  background: var(--primario);
}

.md-paso-punto {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--superficie);
  border: 2px solid var(--borde);
  color: var(--texto-suave);
  margin-bottom: 8px;
}

.md-paso-hecho .md-paso-punto {
  background: var(--primario);
  border-color: var(--primario);
  color: #fff;
}

/* v4.0: el paso actual es el protagonista de la escalera — relleno navy con
   halo dorado (antes se veía más opaco que los completados, al revés). */
.md-paso-actual .md-paso-punto {
  background: linear-gradient(145deg, #23283f 0%, #181c30 100%);
  border-color: #181c30;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 0 4px rgba(198, 138, 70, .28), 0 8px 16px -6px rgba(24, 28, 48, .45);
}

.md-paso-punto svg { width: 13px; height: 13px; }

.md-paso-nombre {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-suave);
  max-width: 92px;
  line-height: 1.3;
}

.md-paso-actual .md-paso-nombre { color: #181c30; font-weight: 700; }
.md-paso-hecho .md-paso-nombre { color: var(--texto); }

@media (max-width: 640px) {
  .md-paso-nombre { font-size: 10px; max-width: 62px; }
  .md-paso-punto { width: 24px; height: 24px; font-size: 11px; }
  .md-paso:not(:first-child)::before { top: 12px; }
}

/* ---------- Bloque de transición (relación puesto/formación) ---------- */
.md-transicion {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--primario-suave);
  border: 1px solid var(--primario);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 24px;
}

.md-transicion-icono {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--superficie);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primario);
}

.md-transicion-titulo {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--texto);
}

.md-transicion p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto);
}

/* ---------- Cabecera de sección (fortalezas / oportunidades / palancas / recursos) ---------- */
.md-seccion-cabecera { margin-bottom: 16px; }
.md-seccion-cabecera h2 { margin-bottom: 4px; }
.md-seccion-cabecera .subtitulo { margin: 0; }

/* ---------- Tarjetas cortas: fortalezas / oportunidades / palancas ---------- */
/* v3.6: rejilla lado a lado (2-3 columnas según ancho disponible), mismo patrón
   auto-fill/minmax que .pt-grid4 del portal — evita que las tarjetas se apilen
   una debajo de otra y desperdicien el ancho. */
/* v3.8: auto-fit (no auto-fill) — con pocos elementos las tarjetas se ensanchan
   y llenan el ancho en vez de dejar el costado vacío (queja de la dueña). */
.md-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.md-tarjetas { align-items: stretch; }

/* v3.8: layout horizontal — insignia a la izquierda, cuerpo a la derecha. */
.md-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  border-left: 3px solid var(--borde);
}

.md-item-cuerpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Insignia cuadrada redondeada con gradiente de color de marca e icono de trazo
   blanco (mismo lenguaje visual que .pt-badge del portal) — el color/gradiente
   concreto lo pone portal.js por tipo (fortaleza/oportunidad/palanca) vía estilo
   inline, igual que hace ptBadge() con el color de instrumento. */
.md-item-icono {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  flex-shrink: 0;
}

.md-item-titulo {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--texto);
  letter-spacing: -.1px;
}

.md-item-detalle {
  margin: 0;
  font-size: 13px;
  color: var(--texto-suave);
  line-height: 1.5;
}

.md-fortaleza { border-left-color: var(--exito); }
.md-oportunidad { border-left-color: var(--primario); }
.md-tip { border-left-color: var(--acento); }

/* ---------- Recursos para ti ---------- */
.md-recursos { align-items: stretch; }

.md-recurso {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.md-recurso-tipo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--primario);
}

.md-recurso-titulo {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.4;
}

.md-recurso-autor {
  font-size: 12.5px;
  color: var(--texto-suave);
}

/* ---------- Nota de faltantes ---------- */
.md-faltantes {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-suave);
  background: var(--fondo);
  border: 1px dashed var(--borde);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 18px 0 26px;
}

.md-faltantes svg { flex-shrink: 0; }

/* ---------- Llamado a la acción final ---------- */
.md-cta {
  display: flex;
  justify-content: center;
  margin: 10px 0 32px;
}

.md-cta .boton { padding: 12px 26px; }

/* Cónclave — Agente 3: Expediente RRHH y correo de desarrollo (colaboradores.js)
   Clases con prefijo exp-. Reutiliza variables y clases del sistema de diseño existente
   (.tarjeta, .campo, .insignia, .vacio, .tabla, .lista-acciones, .accion-item). */

.exp-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--superficie-hover);
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
}
.exp-aviso svg { flex: none; width: 15px; height: 15px; }

.exp-linea-tiempo {
  display: flex;
  flex-direction: column;
}

.exp-item {
  display: flex;
  gap: 12px;
  position: relative;
}
.exp-item:not(:last-child) {
  padding-bottom: 4px;
}
.exp-punto {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primario-suave);
  color: var(--primario);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.exp-punto svg { width: 14px; height: 14px; }
.exp-item:not(:last-child) .exp-punto::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 50%;
  width: 1px;
  height: calc(100% + 4px);
  background: var(--borde);
  transform: translateX(-50%);
}
.exp-tarjeta {
  flex: 1;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 12px;
  background: var(--superficie);
}
.exp-tarjeta-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.exp-tarjeta-titulo {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--texto);
}
.exp-tarjeta-fecha {
  font-size: 12px;
  color: var(--texto-suave);
  white-space: nowrap;
}
.exp-tarjeta-detalle {
  font-size: 12.5px;
  color: var(--texto-suave);
  margin-top: 2px;
}

.exp-notas .campo textarea {
  resize: vertical;
  min-height: 64px;
}

.reg-sugerencias { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid var(--borde); border-radius: 10px; margin-top: 4px; box-shadow: 0 12px 28px -10px rgba(0,0,0,.25); max-height: 222px; overflow-y: auto; }
.reg-sugerencia { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 13px; cursor: pointer; font-size: 14px; color: var(--texto); }
.reg-sugerencia:hover { background: var(--primario-suave); }
.reg-sug-fam { font-size: 11.5px; color: var(--texto-suave); white-space: nowrap; }

.exp-datos-fila { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.exp-datos-fila > div { display: flex; flex-direction: column; gap: 4px; }
.exp-dato-etq { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--texto-suave); }

.an-interna { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 44px 22px 72px; }
.an-logo-interna { margin-bottom: 28px; }
.an-logo-interna .an-logo svg { width: 46px; height: 46px; }
.an-logo-interna .an-logo .an-wordmark { font-size: 30px; }
.an-form-interna { margin-top: 0; width: 100%; max-width: 560px; padding: 30px 32px 28px; }

.an-form-interna h2 { font-size: 25px; }
.an-form-interna .acceso-subtitulo { font-size: 15.5px; line-height: 1.55; }
.an-form-interna .campo { margin-bottom: 20px; }
.an-form-interna .campo label { font-size: 15px; line-height: 1.45; margin-bottom: 7px; }
.an-form-interna .campo input, .an-form-interna .campo select { font-size: 16px; padding: 12px 14px; }
.an-form-interna .acceso-nota { font-size: 14px; line-height: 1.55; }
.an-form-interna .boton { font-size: 16px; padding: 13px 20px; }

.an-regresar { display: inline-block; margin-bottom: 12px; font-size: 15px; font-weight: 700; color: var(--primario); text-decoration: none; cursor: pointer; }
.an-regresar:hover { text-decoration: underline; }

/* v4.3: también en oscuro; el verde vive solo en la barrita (.pt-bar-exito). */
.pt-section-label-exito { color: #181c30; }
.pt-bar-exito { background: #1c9a4e !important; }
/* v5.1: contorno verde visible + sombra propia — la tarjeta de una prueba ya
   completada tenía tan poco contraste que se perdía en la página. */
/* 2px, no 1.5: el navegador redondea los anchos fraccionarios de borde a 1px
   y el contorno se seguía perdiendo. */
.pt-card-hecha {
  background: #fbfcff;
  border: 2px solid rgba(28, 154, 78, .55) !important;
  box-shadow: 0 10px 24px -14px rgba(21, 128, 61, .55);
}
.pt-card-hecha:hover {
  border-color: rgba(28, 154, 78, .8) !important;
  box-shadow: 0 14px 30px -12px rgba(21, 128, 61, .5);
}
.pt-card-hecha h4 { color: #3f4460; }
.pt-card-cab-hecha { display: flex; align-items: flex-start; justify-content: space-between; }

/* v4.2: insignia de logro — verde pleno con icono blanco centrado y sello de
   verificación superpuesto. Sustituye a .pt-badge-hecha/.pt-palomita, que se
   veían apagados y con el icono descuadrado. */
.pt-insignia-hecha { position: relative; display: inline-flex; margin-bottom: 16px; }
.pt-badge-logro {
  margin-bottom: 0;
  background: linear-gradient(145deg, #34c17d 0%, #15803d 100%);
  border-color: rgba(255, 255, 255, .3);
  box-shadow: 0 10px 20px -8px rgba(21, 128, 61, .55);
}
.pt-sello {
  position: absolute; right: -5px; bottom: -5px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: #15803d; border: 1.5px solid #d8f0e2;
  box-shadow: 0 2px 6px rgba(21, 128, 61, .25);
}
.pt-chip-hecha {
  display: inline-flex; align-items: center; gap: 5px; width: fit-content;
  background: rgba(28, 154, 78, .12); color: #137333;
  font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; margin-top: 14px;
}

/* Cónclave — v3.4 (frente 5, "El plan lo diseña la plataforma")
   CSS nuevo para integrar en css/estilos.css.
   Prefijos: "pt-" (tarjeta-aviso del portal, ya usado por js/vistas/portal.js
   para el resto del portal v3.2/v3.3) y "pd-" (botonera de compartir del
   detalle del plan, js/vistas/desarrollo.js). El documento PDF (ventana
   imprimible) NO usa estas clases: va con estilos inline embebidos porque
   vive en una ventana nueva sin acceso a este archivo. */

/* ---------------- Portal: tarjeta-aviso "Cónclave diseñó tu plan..." ---------------- */
.pt-aviso-plan {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 26px;
  padding: 18px 20px;
  border-left: 4px solid #c68a46;
  background: linear-gradient(180deg, #fff 0%, #fbf7f0 100%);
}
.pt-aviso-plan-icono {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #4653c6, #23283f);
  color: #fff;
}
.pt-aviso-plan-cuerpo { flex: 1; min-width: 0; }
.pt-aviso-plan-cuerpo h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; color: var(--texto); }
.pt-aviso-plan-cuerpo p { margin: 0; font-size: 13.5px; color: var(--texto-suave); }
.pt-aviso-plan-canal { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pt-aviso-plan-canal > span { font-size: 13px; color: var(--texto-suave); font-weight: 600; }
.pt-aviso-plan-canal-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-aviso-plan-canal-botones button { display: inline-flex; align-items: center; gap: 6px; }
.pt-aviso-plan > .boton { flex-shrink: 0; align-self: center; white-space: nowrap; }

@media (max-width: 640px) {
  .pt-aviso-plan { flex-direction: column; }
  .pt-aviso-plan > .boton { align-self: stretch; }
}

/* ---------------- Detalle del plan: botonera "Compartir" ---------------- */
.pd-compartir-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-compartir-botones a.boton,
.pd-compartir-botones a.boton-secundario {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---------------- Guía para la conversación de desarrollo (v2.9) ----------------
   4 pasos numerados (Meta/Realidad/Opciones/Compromiso, en español) + botón
   "Agregar acción" destacado al pie, conectado a la misma lógica que ya
   manejan los botones "Agregar acción" de cada área de foco (js/vistas/desarrollo.js). */
.pd-guia-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pd-guia-cab .pd-guia-barra { width: 22px; height: 3px; border-radius: 2px; background: var(--acento); flex-shrink: 0; }
.pd-guia-cab h2 { margin: 0; }
.pd-guia-intro { margin: 0 0 18px; }

.pd-guia-pasos { display: flex; flex-direction: column; gap: 12px; }

.pd-paso {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--borde); border-radius: 12px; padding: 16px 18px;
  background: var(--superficie-hover);
}
/* v5.5: círculo índigo de marca, igual en los cuatro pasos. Lo que restaba
   formalidad era la alternancia índigo/bronce (un color distinto por paso, sin
   significado), no el color en sí: uniforme se lee como una secuencia. */
/* v5.6: el mismo azul profundo de la insignia de "Tu siguiente paso"
   (índigo → navy), que la dueña eligió por elegante, en vez del índigo plano. */
.pd-paso-num {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14.5px; font-weight: 700; color: #fff;
  background: linear-gradient(145deg, #4653c6, #23283f);
  box-shadow: 0 6px 14px -6px rgba(35, 40, 63, .5);
}
.pd-paso-cuerpo { flex: 1; min-width: 0; }
.pd-paso-titulo { font-weight: 700; font-size: 15px; color: var(--texto); margin-bottom: 4px; }
.pd-paso-pregunta { font-size: 13.5px; color: var(--texto-suave); line-height: 1.5; margin: 0; }
.pd-paso-dato {
  font-size: 13px; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 8px; padding: 8px 11px; margin: 8px 0 0; line-height: 1.5;
}

.pd-guia-puente {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--borde); padding-top: 18px; margin-top: 18px;
}
.pd-guia-puente p { margin: 0; font-size: 13.5px; color: var(--texto-suave); font-weight: 600; }

.pd-boton-agregar {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primario) 0%, var(--primario-oscuro) 100%);
  color: #fff; border: none; border-radius: 11px; padding: 14px 24px; font-size: 14.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; box-shadow: 0 10px 22px -8px rgba(70, 83, 198, .5);
  transition: box-shadow var(--transicion), transform var(--transicion), filter var(--transicion);
}
.pd-boton-agregar:hover { filter: brightness(1.05); box-shadow: 0 14px 28px -8px rgba(70, 83, 198, .6); }
.pd-boton-agregar:active { transform: translateY(1px); }
.pd-boton-agregar:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }

@media (max-width: 640px) {
  .pd-guia-puente { flex-direction: column; align-items: stretch; }
  .pd-boton-agregar { justify-content: center; }
}

/* ---------------- Recordatorio al celular (Google Calendar) ---------------- */
.pd-boton-recordar {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--borde); border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--texto-suave); text-decoration: none;
  background: var(--superficie); font-family: inherit;
  transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.pd-boton-recordar:hover { border-color: var(--borde-fuerte); color: var(--texto); background: var(--superficie-hover); }
.pd-boton-recordar:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.pd-boton-recordar svg { flex-shrink: 0; }

/* ====================================================================
   Cónclave — CSS v3.5 (Agente B / perfil-integral.js + portal.js)
   Prefijos: rc- (tarjetas de "Recursos para ti") y dim- ("Tus dimensiones").
   Reutiliza variables y clases existentes (.tarjeta, .insignia, --radio,
   --sombra-1/2, --primario, --texto-suave, --borde) — el orquestador integra
   este bloque en css/estilos.css junto al resto de clases "md-" de v2.6.
   ==================================================================== */

/* ---------- "Tus dimensiones" (desglose de la Evaluación general) ---------- */

.dim-grid { align-items: stretch; }

.dim-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dim-item-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dim-item-nombre {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--texto);
  letter-spacing: -.1px;
}

.dim-item-insignia { white-space: nowrap; }

.dim-item-texto {
  margin: 0;
  font-size: 13px;
  color: var(--texto-suave);
  line-height: 1.55;
}

@media (max-width: 640px) {
  .dim-grid { grid-template-columns: 1fr; }
}

/* ---------- "Recursos para ti" — tarjetas con mini-portada CSS ---------- */

.rc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.rc-recurso {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
}

/* Mini-portada 54x72: gradiente por tipo (--rc-color, fijado inline por
   construirTarjetaRecurso en portal.js) + icono del tipo en blanco. */
.rc-portada {
  width: 54px;
  height: 72px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(20, 23, 40, .35), inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.rc-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rc-tipo {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--texto-suave);
}

.rc-titulo {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.35;
}

.rc-autor {
  font-size: 12.5px;
  color: var(--texto-suave);
}

.rc-enlace {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primario);
  text-decoration: none;
  width: fit-content;
}

.rc-enlace span { transition: transform .12s; }
.rc-enlace:hover { text-decoration: underline; color: var(--primario-oscuro); }
.rc-enlace:hover span { transform: translateX(2px); }
.rc-enlace:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 640px) {
  .rc-grid { grid-template-columns: 1fr; }
}

/* ====================================================================
   v3.8 — Cuarta ronda de revisión de la dueña
   ==================================================================== */

/* "Tus dimensiones": acción de la semana como franja destacada al pie de la
   tarjeta (margin-top:auto nivela la base de todas las tarjetas de la fila). */
/* v4.0: tinte frío de marca en vez del crema amarillento — más fuerza y
   elegancia (queja literal de la dueña: "amarillo no me gusta"). */
.dim-item-accion {
  margin-top: auto;
  background: #eef0f9;
  border-left: 3px solid var(--primario);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
}

.dim-item-accion p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #23283f;
  line-height: 1.5;
}

/* Si la rejilla de 2 columnas deja una tarjeta impar al final, ocupa el ancho
   completo — sin huecos que desnivelen la sección. */
.dim-grid .dim-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Recursos: ejemplo concreto de las prácticas. */
.rc-ejemplo {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--texto-suave);
  line-height: 1.5;
}

.rc-ejemplo strong { color: var(--texto); font-weight: 700; }

/* "Mi plan" — tarjeta "Lo que tu plan busca" con mini pasos de cómo funciona. */
.pd-intro-texto {
  margin: 0 0 14px;
  font-size: 14.5px;
  color: var(--texto);
  line-height: 1.6;
}

.pd-intro-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.pd-intro-paso {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
}

/* v5.7: estos tres mini-pasos son secundarios (explican cómo funciona el plan),
   así que van en contorno y no en relleno: bajan el peso de azul de la página y
   dejan el azul pleno para los pasos de la guía, que sí mandan. */
.pd-intro-paso span {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 800;
  color: #23283f;
  background: #fff;
  border: 1.5px solid #c3c8dc;
}

/* Insignia "Empieza por aquí" sobre la primera acción pendiente del plan. */
/* v5.5: sin pastilla ni fondo — solo la palabra en negritas (petición literal
   de la dueña). Informa por dónde empezar sin parecer un control. */
.pd-empieza {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #181c30;
  margin-bottom: 6px;
}

.accion-item.accion-primera {
  border-color: var(--acento);
  box-shadow: 0 10px 22px -12px rgba(198, 138, 70, .45);
}

/* Chip de tipo con texto legible (fuera el "70" crudo). */
.accion-item .tipo-chip {
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: 10.5px;
}

/* "Tu avance": dato + explicación de cómo se alimenta. */
.pd-avance-dato {
  margin-top: 10px;
  font-size: 14px;
  color: var(--texto);
}

.pd-avance-ayuda {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--texto-suave);
  line-height: 1.55;
}

/* ====================================================================
   v3.9 — Quinta ronda de revisión de la dueña
   ==================================================================== */

/* Control segmentado de estado de cada acción (reemplaza al select que no se
   percibía): tres opciones visibles, la activa resaltada por color. */
/* v5.3: más color y contorno — el control se perdía en el blanco de la tarjeta
   (la dueña pidió que resaltara). */
.pd-estado {
  display: inline-flex;
  border: 1.5px solid var(--borde-fuerte, #c7cad8);
  border-radius: 10px;
  overflow: hidden;
  background: var(--superficie);
  box-shadow: 0 4px 10px -6px rgba(24, 28, 48, .3);
}

.pd-estado-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background .12s, color .12s;
}

.pd-estado-btn + .pd-estado-btn { border-left: 1px solid var(--borde); }
.pd-estado-btn:hover { background: var(--superficie-hover); color: var(--texto); }

.pd-estado-btn.activo.est-pendiente { background: #181c30; color: #fff; font-weight: 700; }
.pd-estado-btn.activo.est-en_curso { background: var(--primario); color: #fff; font-weight: 700; }
.pd-estado-btn.activo.est-completada { background: linear-gradient(145deg, #34c17d 0%, #15803d 100%); color: #fff; font-weight: 700; }
.pd-estado-btn.activo.est-completada svg { color: #fff; }

.pd-estado-btn:focus-visible { outline: 2px solid var(--primario); outline-offset: -2px; }

/* Enlace discreto a la vista imprimible premium (el PDF real ya se descarga). */
.pd-enlace-imprimir {
  margin-top: 12px;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: underline;
  cursor: pointer;
}

.pd-enlace-imprimir:hover { color: var(--primario); }

/* Recursos: transición fina del contorno (el filete superior del color del tipo
   lo pone portal.js en línea). */
.rc-recurso { transition: box-shadow var(--transicion), transform var(--transicion); }
.rc-recurso:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }

/* ====================================================================
   v4.0 — Sexta ronda de revisión de la dueña
   ==================================================================== */

/* Recursos con el diseño del documento del plan: iniciales en la mini-portada
   y pastilla del tipo con contorno. */
.rc-portada {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* ===== v7.6 · Cada recomendación con su propia identidad =====
   Cuatro libros seguidos daban cuatro portadas idénticas y la fila se leía como un
   bloque de color, sin invitar a abrir ninguna. Ahora cada tarjeta trae su propio
   tono (--rc-tono, que fija construirTarjetaRecurso por posición) en la portada y en
   una franja superior, y la portada suma el icono de su tipo. El color da variedad;
   el icono y la pastilla siguen diciendo de qué tipo es. */
.rc-recurso {
  border-top: 3px solid var(--rc-tono, var(--borde));
  padding-top: 15px;
}

.rc-portada {
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  position: relative;
  overflow: hidden;
}
/* Lomo de libro: una línea clara pegada al canto izquierdo. Da el aire de portada y
   evita que la mini-portada se lea como un simple cuadro de color. */
.rc-portada::before {
  content: "";
  position: absolute;
  left: 6px; top: 0; bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .30);
}
.rc-portada-icono { display: flex; opacity: .85; }
.rc-portada-iniciales {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1;
}

.rc-pastilla {
  display: inline-block;
  width: fit-content;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  border: 1px solid;
  border-radius: 20px;
  padding: 2.5px 10px;
}

/* ====================================================================
   v4.5 — "Mi inicio" absorbe "Mis evaluaciones"
   ==================================================================== */

/* Encabezado de sección del inicio con el lenguaje que la dueña eligió
   (título grande + subtítulo), en vez de la etiqueta pequeña con barrita. */
.pt-seccion-cab { margin: 38px 0 16px; }
.pt-seccion-cab:first-of-type { margin-top: 0; }
.pt-seccion-cab h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--texto);
  margin: 0 0 4px;
}
.pt-seccion-cab .subtitulo { margin: 0; }

/* ====================================================================
   v5.1 — Botones de la tarjeta completada
   ==================================================================== */

.pt-card-pie-doble .pt-btn-reporte,
.pt-card-pie-doble .pt-btn-repetir {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--transicion), background var(--transicion),
    border-color var(--transicion), transform var(--transicion);
}

/* Acción principal: ver el reporte de esa prueba. */
.pt-btn-reporte {
  border: none;
  color: #fff;
  background: linear-gradient(145deg, #34c17d 0%, #15803d 100%);
  box-shadow: 0 8px 16px -8px rgba(21, 128, 61, .6);
}
.pt-btn-reporte:hover { filter: brightness(1.05); }
.pt-btn-reporte:active { transform: translateY(1px); }
.pt-btn-reporte svg { flex-shrink: 0; }

/* Acción de apoyo: volver a responderla. */
.pt-btn-repetir {
  background: #fff;
  border: 1.5px solid rgba(28, 154, 78, .5);
  color: #137333;
}
.pt-btn-repetir:hover { background: rgba(28, 154, 78, .08); border-color: rgba(28, 154, 78, .75); }
.pt-btn-repetir:active { transform: translateY(1px); }

.pt-btn-reporte:focus-visible,
.pt-btn-repetir:focus-visible { outline: 2px solid #15803d; outline-offset: 2px; }

/* v5.3: el campo de notas se distingue como zona editable (antes era un borde
   gris tenue que se perdía junto al control de estado). */
.tp-notas-accion {
  border: 1.5px solid #d5d8e6 !important;
  background: #fbfbfe;
  transition: border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.tp-notas-accion:hover { border-color: #b9bed6 !important; }
.tp-notas-accion:focus {
  outline: none;
  background: #fff;
  border-color: var(--primario) !important;
  box-shadow: 0 0 0 3px rgba(70, 83, 198, .14);
}

/* ====================================================================
   v5.5 — Color con significado en "Tus dimensiones"
   ==================================================================== */

/* La insignia de cada dimensión deja el lila uniforme y toma el color de su
   rango: el color pasa a informar (alto / medio / bajo) y el conjunto se ve
   profesional en vez de decorativo. */
.dim-item-insignia {
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: .2px;
}
.dim-rango-alto {
  background: rgba(28, 154, 78, .12) !important;
  color: #136c36 !important;
  border-color: rgba(28, 154, 78, .35) !important;
}
.dim-rango-medio {
  background: rgba(70, 83, 198, .1) !important;
  color: #333c9c !important;
  border-color: rgba(70, 83, 198, .3) !important;
}
.dim-rango-bajo {
  background: rgba(164, 104, 47, .12) !important;
  color: #8a5320 !important;
  border-color: rgba(164, 104, 47, .35) !important;
}

/* La franja de acción se ancla al navy de marca (antes índigo) para que el
   índigo quede reservado a las insignias de rango medio. */
.dim-item-accion { border-left-color: #2c3358; }

/* v5.5: la descripción de cada acción es lo que la persona debe hacer — resalta
   sobre la fecha y los controles que la acompañan. */
.pd-accion-desc {
  font-weight: 600;
  color: var(--texto);
  line-height: 1.5;
}

/* v5.6: avatar del colaborador con el color de marca — el mismo navy con
   iniciales doradas que ya usan la barra superior y el hero de "Mi inicio",
   para que el círculo se vea igual en todo su recorrido. */
.avatar-marca {
  background: linear-gradient(150deg, #2f3760 0%, #1d2238 100%);
  color: #e8c79b;
}

/* ====================================================================
   v5.8 — Detalles de color en "Mi expediente"
   ==================================================================== */

/* La tarjeta de apertura hereda la firma de "Tu siguiente paso" (filete dorado
   + fondo cálido): la página deja de abrir en blanco plano y se reconoce como
   parte de la misma marca. */
.pd-intro {
  background: linear-gradient(180deg, #fff 0%, #fbf7f0 100%);
  border-left: 4px solid var(--acento);
}

/* Barrita dorada antes de cada título de tarjeta del expediente — el mismo
   detalle que ya distingue a "Tu guía para avanzar", ahora como ritmo visual
   de toda la página. */
.pd-intro .tarjeta-titulo::before,
.pd-fortalezas .tarjeta-titulo::before,
.pd-avance .tarjeta-titulo::before,
.pd-compartir .tarjeta-titulo::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #d29a5c, var(--acento));
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Las fortalezas se leen como una lista de logros: viñeta dorada en vez del
   punto negro por defecto. */
.pd-fortalezas ul { list-style: none; padding-left: 4px !important; }
.pd-fortalezas li { position: relative; padding-left: 20px; }
.pd-fortalezas li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(145deg, #d29a5c, var(--acento));
}

/* La barra de avance toma el dorado de marca (antes índigo, que ya abunda). */
.pd-avance .barra-progreso .relleno {
  background: linear-gradient(90deg, #d29a5c, var(--acento));
}

/* ====================================================================
   v5.9 — Alineación óptica de las pastillas
   ====================================================================
   La pastilla del tag tiene 10px de relleno propio, así que su TEXTO arrancaba
   10px a la derecha del título que encabeza: la "E" de «Empieza aquí» no caía
   sobre la "E" de «Evaluación general» (detalle que detectó la dueña).
   Compensarlo con margen negativo alineaba el texto pero sacaba la CAJA del
   bloque, que se veía peor. Criterio final:
   - Una ETIQUETA DE TEXTO que encabeza un bloque (el tag de "Tu siguiente
     paso") pierde la pastilla y queda como texto: su primera letra cae
     exactamente sobre la del título y ninguna caja sobresale.
   - Un CHIP (Pendiente, Completada, LIBRO, Prioridad…) es un objeto, no texto
     corrido: su CAJA se alinea al bloque, sin margen negativo. */

.pt-tag-inicio {
  background: none;
  padding: 0;
  border-radius: 0;
  color: #95632c;
  font-weight: 800;
  letter-spacing: .8px;
}

/* ====================================================================
   v6.0 — Pantalla de respiro entre bloques de una prueba larga
   ==================================================================== */

.player-respiro {
  max-width: 560px;
  margin: 40px auto;
  text-align: center;
  padding: 38px 34px 34px;
  background: linear-gradient(180deg, #fff 0%, #fbf7f0 100%);
  border-left: 4px solid var(--acento);
}

.player-respiro-paso {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #95632c;
  margin-bottom: 10px;
}

.player-respiro h2 {
  font-size: 23px;
  font-weight: 700;
  color: var(--texto);
  margin: 0 0 8px;
}

.player-respiro p {
  font-size: 15px;
  color: var(--texto-suave);
  line-height: 1.6;
  margin: 0;
}

.player-respiro-barra {
  height: 6px;
  border-radius: 3px;
  background: #eceef4;
  overflow: hidden;
  margin: 22px auto 10px;
  max-width: 300px;
}

.player-respiro-barra div {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #d29a5c, var(--acento));
}

.player-respiro-faltan {
  font-size: 13px !important;
  color: var(--texto-suave);
  margin-bottom: 22px !important;
}

/* ====================================================================
   v6.1 — Identidad y aliento dentro de cada prueba
   ==================================================================== */

/* Franja de marca del instrumento sobre la barra de progreso: la persona sabe
   siempre qué prueba responde y recibe un empujón según su avance. */
.player-marca {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.player-marca-insignia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  flex-shrink: 0;
}

.player-marca-nombre {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--texto);
  letter-spacing: -.1px;
}

.player-aliento {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #95632c;
  background: rgba(198, 138, 70, .13);
  border-radius: 999px;
  padding: 4px 12px;
}

@media (max-width: 560px) {
  .player-aliento { margin-left: 0; }
}

/* Tramo actual (bloque temático o área de razonamiento): orienta sin interrumpir. */
.player-marca-tramo {
  font-size: 12.5px;
  color: var(--texto-suave);
  padding-left: 9px;
  border-left: 1px solid var(--borde);
}

/* ====================================================================
   v6.2 — Cierre de prueba con enganche
   ==================================================================== */

.cierre-tarjeta {
  max-width: 560px;
  margin: 40px auto;
  text-align: center;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 36px 34px 30px;
  box-shadow: var(--sombra-2);
}

.cierre-sello {
  width: 60px;
  height: 60px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  margin-bottom: 16px;
}

.cierre-tarjeta h2 { font-size: 23px; font-weight: 700; color: var(--texto); margin: 0 0 6px; }
.cierre-sub { font-size: 14.5px; color: var(--texto-suave); margin: 0; }

/* El hallazgo: lo que la persona se lleva de haber respondido. */
.cierre-hallazgo {
  margin: 22px 0 0;
  padding: 18px 20px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #fbf7f0 100%);
  border-left: 4px solid var(--acento);
  text-align: left;
}
.cierre-hallazgo-etq {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #95632c;
  margin-bottom: 5px;
}
.cierre-hallazgo strong { display: block; font-size: 16.5px; color: var(--texto); line-height: 1.35; }
.cierre-hallazgo-pie { display: block; margin-top: 7px; font-size: 13px; color: var(--texto-suave); line-height: 1.5; }

/* La invitación a la siguiente prueba. */
.cierre-siguiente { margin-top: 22px; text-align: left; }
.cierre-siguiente-etq {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--texto-suave);
  margin-bottom: 8px;
}
.cierre-siguiente-fila {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--fondo);
  margin-bottom: 16px;
}
.cierre-siguiente-insignia {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; border: 1px solid rgba(255, 255, 255, .25);
}
.cierre-siguiente-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cierre-siguiente-texto strong { font-size: 15px; color: var(--texto); }
.cierre-siguiente-texto span { font-size: 13px; color: var(--texto-suave); line-height: 1.45; }

.cierre-siguiente .boton { width: 100%; padding: 13px 18px; font-size: 14.5px; }

.cierre-enlace {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: underline;
  cursor: pointer;
}
.cierre-enlace:hover { color: var(--primario); }

/* ====================================================================
   v6.3 — Atención y Precisión: el ejercicio contra reloj
   ==================================================================== */

/* Pantalla de regla (antes de cada ronda) y de corte (al acabarse el tiempo). */
.atn-regla {
  max-width: 560px;
  margin: 30px auto;
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, #f7fbfa 100%);
  border: 1px solid var(--borde);
  border-left: 4px solid #1f6f6b;
  border-radius: 16px;
  padding: 34px 32px 30px;
  box-shadow: var(--sombra-2);
}
.atn-regla-paso {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1f6f6b;
  margin-bottom: 8px;
}
.atn-regla h2 { font-size: 23px; font-weight: 700; color: var(--texto); margin: 0 0 10px; }
.atn-regla-texto { font-size: 16px; color: var(--texto); line-height: 1.55; margin: 0; font-weight: 600; }
.atn-regla-aviso { font-size: 13.5px; color: var(--texto-suave); margin: 14px 0 20px; }

.atn-ejemplo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--superficie);
  border: 1px solid var(--borde);
}
.atn-ejemplo-etq { font-size: 12.5px; color: var(--texto-suave); font-weight: 600; }
.atn-ejemplo-figura { color: #1f6f6b; display: inline-flex; }

/* La cuadrícula del juego. */
.atn-barra-regla {
  max-width: 720px;
  margin: 0 auto 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--texto);
  background: rgba(31, 111, 107, .1);
  border: 1px solid rgba(31, 111, 107, .3);
  border-radius: 10px;
  padding: 10px 16px;
}

.atn-grid {
  display: grid;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
}

.atn-celda {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border: 2px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  color: #3a4166;
  cursor: pointer;
  transition: transform .08s, border-color .12s, background .12s, color .12s;
}
.atn-celda:hover { border-color: #1f6f6b; transform: translateY(-1px); }
.atn-celda:active { transform: translateY(1px); }
.atn-celda.marcada {
  background: #1f6f6b;
  border-color: #17544f;
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(31, 111, 107, .6);
}
.atn-celda:focus-visible { outline: 2px solid #1f6f6b; outline-offset: 2px; }

.atn-pie {
  max-width: 720px;
  margin: 16px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--texto-suave);
}

/* El reloj corre en el tono de la prueba y solo se pone rojo cuando el tiempo
   aprieta (.urgente lo agrega el player en el último 20% de la ronda). */
.cronometro-vivo { color: #1f6f6b; font-weight: 800; border-color: rgba(31, 111, 107, .35); }
.cronometro-vivo.urgente { color: #b3261e; border-color: rgba(179, 38, 30, .45); }

/* Dentro de la prueba manda su propia identidad: el botón de cada ronda lleva
   el verde azulado del instrumento, no el índigo general de la plataforma. */
.atn-regla .boton { background: #1f6f6b; border-color: #1f6f6b; }
.atn-regla .boton:hover { background: #17544f; border-color: #17544f; }
.atn-regla .boton:focus-visible { box-shadow: 0 0 0 3px rgba(31, 111, 107, .28); }

@media (max-width: 640px) {
  .atn-grid { gap: 7px; }
  .atn-celda svg { width: 34px; height: 36px; }
}

/* v7.13: en celular vertical la cuadricula se reparte en 4 columnas, no en 8.
   Medido a 375px: el SVG de 34x36 mas el relleno y el borde dan una celda de 46px
   que ya no encoge; ocho de esas mas siete separaciones piden 417px dentro de los
   347px que quedan tras el relleno del contenido. La pagina entera se desbordaba a
   lo ancho y una o dos columnas de cada fila quedaban fuera de vista, alcanzables
   solo deslizando de lado — a media ronda contra reloj, con 25 segundos, nadie
   hace eso ni se le ocurre que deba hacerlo.
   Las 40 celdas y su orden son los mismos: cambia de 5 filas de 8 a 10 filas de 4.
   El !important es necesario porque el numero de columnas lo fija el player como
   estilo en linea desde contexto.columnas. En tablet no aplica: a 768px la
   cuadricula respeta su max-width de 720px y cabe exacta. */
@media (max-width: 620px) {
  .atn-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }
  .atn-celda { padding: 6px 3px; }
  .atn-celda svg { width: 30px; height: 32px; }
}

/* Métricas del bloque "Atención y precisión" en el reporte de RH (v6.3). */
.rejilla-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.metrica-precision {
  text-align: center;
  padding: 14px 10px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
}
.metrica-precision-valor { font-size: 24px; font-weight: 800; color: #1f6f6b; line-height: 1.1; }
.metrica-precision-etq {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--texto-suave); margin-top: 5px;
}

/* Evolución entre tomas de una misma prueba (v6.4). El color no premia ni castiga:
   solo distingue movimiento hacia arriba, hacia abajo o sin cambio. */
.pt-evolucion {
  margin: 10px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  padding-left: 11px;
  border-left: 2px solid var(--borde-fuerte);
}
.pt-evo-sube { color: #1f6f4a; border-left-color: #2e9e6b; }
.pt-evo-baja { color: #8c4a44; border-left-color: #c0574f; }
.pt-evo-igual { color: var(--texto-suave); }

/* ====================================================================
   v6.5 — Reto rápido de la Evaluación general
   ==================================================================== */

.reto-tarjeta {
  max-width: 560px;
  margin: 30px auto;
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, #f7f8fd 100%);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--primario);
  border-radius: 16px;
  padding: 34px 32px 30px;
  box-shadow: var(--sombra-2);
}
.reto-paso {
  display: inline-block;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--primario); margin-bottom: 8px;
}
.reto-tarjeta h2 { font-size: 23px; font-weight: 700; color: var(--texto); margin: 0 0 10px; }
.reto-texto { font-size: 16px; color: var(--texto); line-height: 1.55; margin: 0; font-weight: 600; }
.reto-aviso { font-size: 13.5px; color: var(--texto-suave); margin: 12px 0 20px; }

.reto-cabecera {
  max-width: 460px; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.reto-ronda { font-size: 13px; font-weight: 700; color: var(--texto-suave); }
.reto-reloj {
  font-size: 20px; font-weight: 800; color: var(--primario);
  font-variant-numeric: tabular-nums; min-width: 32px; text-align: right;
}

.reto-barra {
  max-width: 460px; margin: 0 auto 20px;
  height: 5px; border-radius: 3px; background: var(--borde); overflow: hidden;
}
.reto-barra-relleno {
  height: 100%; background: var(--primario);
  transition: width 1s linear;
}

.reto-consigna {
  text-align: center; font-size: 15px; font-weight: 700;
  color: var(--texto); margin: 0 0 16px;
}

.reto-grid { display: grid; gap: 12px; max-width: 400px; margin: 0 auto; }

.reto-celda {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 6px;
  border: 2px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie);
  color: #3a4166;
  cursor: pointer;
  transition: transform .08s, border-color .12s, background .12s, color .12s;
}
.reto-celda:hover { border-color: var(--primario); transform: translateY(-1px); }
.reto-celda.elegida {
  background: var(--primario); border-color: var(--primario-oscuro); color: #fff;
}
.reto-celda:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }

/* Marcador del reto en la pantalla de cierre de la general. */
.cierre-reto {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-suave);
}

/* Las figuras del reto se dibujan más grandes que las de Atención y Precisión:
   ahí la cuadrícula tiene 40 celdas y aquí solo 9, así que hay espacio de sobra
   y la diferencia entre figuras tiene que leerse de un vistazo. */
.reto-celda svg { width: 58px; height: 60px; }
@media (max-width: 480px) {
  .reto-celda svg { width: 46px; height: 48px; }
}

/* ====================================================================
   v6.6 — Marco situacional de Valores y devolución a mitad de camino
   ==================================================================== */

/* La escena que sitúa la tríada: se lee antes que las opciones, en tono más
   suave, para que quede claro que es contexto y no una opción más. */
.val-marco {
  margin: 0 0 14px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--primario-suave);
  border-left: 3px solid var(--primario);
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto);
  font-weight: 600;
}

/* Devolución parcial dentro de la pantalla de respiro. */
.player-respiro-devolucion {
  margin: 14px auto 4px;
  max-width: 420px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(198, 138, 70, .1);
  border: 1px solid rgba(198, 138, 70, .3);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto);
}
.player-respiro-devolucion strong { color: var(--primario-oscuro); }

/* ====================================================================
   v6.7 — Competencias: escalera en dos pasos
   ==================================================================== */

/* Dos conductas lado a lado, del mismo tamaño y peso visual: la comparación
   tiene que sentirse pareja, sin que una parezca "la buena" por diseño. */
.comp-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.comp-ancla {
  text-align: left;
  padding: 20px 22px;
  min-height: 118px;
  border: 2px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 15.5px;
  line-height: 1.55;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .08s;
}
.comp-ancla:hover { border-color: var(--primario); transform: translateY(-1px); }
.comp-ancla.elegida {
  border-color: var(--primario);
  background: var(--primario-suave);
  font-weight: 600;
}
.comp-ancla:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }

.comp-intermedio,
.comp-volver {
  display: block;
  width: 100%;
  padding: 13px 18px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: 12px;
  background: transparent;
  color: var(--texto-suave);
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.comp-intermedio:hover,
.comp-volver:hover { border-color: var(--primario); color: var(--primario); background: var(--primario-suave); }
.comp-intermedio.elegida {
  border-style: solid;
  border-color: var(--primario);
  background: var(--primario-suave);
  color: var(--texto);
}
.comp-volver { margin-top: 4px; text-align: left; border-style: none; padding-left: 2px; }
.comp-volver:hover { background: transparent; }

@media (max-width: 640px) {
  .comp-par { grid-template-columns: 1fr; }
  .comp-ancla { min-height: 0; }
}

/* Aviso de validez de la autoevaluación de competencias, en el reporte de RH (v6.7).
   Tono de advertencia sobria, no de alarma: el dato no es una acusación. */
.aviso-validez {
  margin-bottom: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--alerta-suave);
  border-left: 3px solid var(--alerta);
}
.aviso-validez strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #8a5d24;
  margin-bottom: 6px;
}
.aviso-validez p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--texto); }

/* ====================================================================
   v6.8 — Estímulos visuales de la prueba cognitiva
   ==================================================================== */

/* El SVG del reactivo se centra y se limita en alto. Sin este tope, un viewBox
   cuadrado (matriz 3x3, rotación mental) ocupaba la pantalla entera y obligaba a
   hacer scroll para llegar a las opciones. */
.cog-estimulo {
  margin: 14px 0 24px;
  color: var(--texto);
  display: flex;
  justify-content: center;
}
.cog-estimulo svg {
  max-width: 100%;
  max-height: 190px;
  height: auto;
  width: auto;
}
/* Las series anchas y bajas sí pueden usar más ancho: se reconocen porque su
   proporción es muy horizontal y el tope de alto no las afecta. */
@media (max-width: 640px) {
  .cog-estimulo svg { max-height: 150px; }
}

/* Opciones de figura del cognitivo: lo bastante grandes para distinguir un giro
   de su imagen espejo, que es justo lo que el reactivo pide comparar. */
.opcion-figura { gap: 18px; align-items: center; }
/* La caja se adapta al ancho de la figura en vez de forzarla a un cuadrado. Con el
   cuadrado fijo, una fila larga de puntos se encogía hasta volverse ilegible o se
   salía del recorte; ahora manda el ALTO (72 px, igual para todas, así ninguna
   figura se ve más grande que otra) y el ancho lo pone cada figura. */
.opcion-figura-svg {
  min-width: 72px;
  height: 72px;
  color: var(--texto);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.opcion-figura-svg svg { height: 100%; width: auto; max-width: 100%; overflow: visible; }

/* ====================================================================
   v6.9 — Memoria Visual
   ==================================================================== */

.mem-tarjeta {
  max-width: 560px;
  margin: 30px auto;
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
  border: 1px solid var(--borde);
  border-left: 4px solid #2b5f8a;
  border-radius: 16px;
  padding: 34px 32px 30px;
  box-shadow: var(--sombra-2);
}
.mem-paso {
  display: inline-block;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: #2b5f8a; margin-bottom: 8px;
}
.mem-tarjeta h2 { font-size: 23px; font-weight: 700; color: var(--texto); margin: 0 0 10px; }
.mem-texto { font-size: 16px; color: var(--texto); line-height: 1.55; margin: 0; font-weight: 600; }
.mem-aviso { font-size: 13.5px; color: var(--texto-suave); margin: 12px 0 20px; }
.mem-tarjeta .boton { background: #2b5f8a; border-color: #2b5f8a; }
.mem-tarjeta .boton:hover { background: #22496b; border-color: #22496b; }

.mem-cabecera {
  max-width: 460px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.mem-ronda { font-size: 13px; font-weight: 700; color: var(--texto-suave); }
.mem-reloj {
  font-size: 20px; font-weight: 800; color: #2b5f8a;
  font-variant-numeric: tabular-nums; min-width: 44px; text-align: right;
}
.mem-reloj-apagado { color: var(--borde-fuerte); }

.mem-consigna {
  text-align: center; font-size: 15px; font-weight: 700;
  color: var(--texto); margin: 0 0 16px; min-height: 22px;
}

.mem-grid { display: grid; gap: 12px; max-width: 460px; margin: 0 auto; }

/* La celda vacía y la celda que perdió su objeto se ven EXACTAMENTE igual: esa
   indistinguibilidad es el ejercicio, no un descuido de diseño. */
.mem-celda {
  display: flex; align-items: center; justify-content: center;
  min-height: 84px;
  padding: 10px 6px;
  border: 2px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie);
  color: #2b3a55;
}
.mem-celda-quieta { cursor: default; }
.mem-celda svg { width: 46px; height: 48px; }

.mem-grid-viva .mem-celda {
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .08s;
}
.mem-grid-viva .mem-celda:hover { border-color: #2b5f8a; transform: translateY(-1px); }
.mem-grid-viva .mem-celda.elegida {
  background: #2b5f8a; border-color: #22496b; color: #fff;
}
.mem-grid-viva .mem-celda:focus-visible { outline: 2px solid #2b5f8a; outline-offset: 2px; }

@media (max-width: 640px) {
  .mem-celda { min-height: 66px; }
  .mem-celda svg { width: 36px; height: 38px; }
}

/* Variante de las tarjetas de métrica para Memoria Visual: cada instrumento
   conserva su color también en el reporte de RH, no solo en el player. */
.metrica-memoria .metrica-precision-valor { color: #2b5f8a; }

/* ====================================================================
   v7.0 — Detective Visual (fotos reales de la operación)
   ==================================================================== */

.dif-tarjeta {
  max-width: 580px;
  margin: 30px auto;
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, #fbf9f3 100%);
  border: 1px solid var(--borde);
  border-left: 4px solid #8a6d1f;
  border-radius: 16px;
  padding: 34px 32px 30px;
  box-shadow: var(--sombra-2);
}
.dif-paso {
  display: inline-block;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: #8a6d1f; margin-bottom: 8px;
}
.dif-tarjeta h2 { font-size: 23px; font-weight: 700; color: var(--texto); margin: 0 0 10px; }
.dif-texto { font-size: 16px; color: var(--texto); line-height: 1.55; margin: 0; font-weight: 600; }
.dif-aviso { font-size: 13.5px; color: var(--texto-suave); margin: 12px 0 20px; }
.dif-tarjeta .boton { background: #8a6d1f; border-color: #8a6d1f; }
.dif-tarjeta .boton:hover { background: #6d5518; border-color: #6d5518; }

.dif-cabecera {
  max-width: 1240px; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.dif-marcador { font-size: 14px; font-weight: 700; color: var(--texto); }
.dif-reloj {
  font-size: 20px; font-weight: 800; color: #8a6d1f;
  font-variant-numeric: tabular-nums; min-width: 52px; text-align: right;
}
.dif-barra {
  max-width: 1240px; margin: 0 auto 16px;
  height: 5px; border-radius: 3px; background: var(--borde); overflow: hidden;
}
.dif-barra-relleno { height: 100%; background: #8a6d1f; transition: width 1s linear; }

/* Las dos fotos, del mismo tamaño y una junto a la otra. */
.dif-paneles {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* El recuadro reserva su altura con padding-bottom antes de que la foto cargue:
   sin eso la página da un salto al terminar de cargar, y un salto en una prueba
   contra reloj se siente como una falla del sistema. */
.dif-panel {
  position: relative;
  height: 0;
  overflow: hidden;
  border: 2px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie-hover);
  cursor: crosshair;
  transition: border-color .18s;
}
.dif-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.dif-panel-fallo { border-color: var(--peligro); }

/* La foto original no se marca: solo se compara. El cursor lo dice antes de que la
   persona lo intente. */
.dif-panel[data-panel="original"] { cursor: default; }

.dif-lado { display: flex; flex-direction: column; gap: 7px; }
.dif-sello {
  margin: 0; text-align: center;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-suave);
}
.dif-sello-copia { color: #8a6d1f; }
.dif-lado-copia .dif-panel { border-color: #c9a94e; }

/* Marca de cambio encontrado: rectángulo sobre el objeto, no un círculo. Un teclado
   mide 480x130 px y el círculo que lo cubriera taparía media foto. */
.dif-hallado {
  position: absolute;
  border: 3px solid #1f8a4c;
  border-radius: 7px;
  background: rgba(31, 138, 76, .18);
  pointer-events: none;
}

.dif-pie {
  max-width: 1240px;
  margin: 14px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--texto-suave);
}

@media (max-width: 760px) {
  .dif-paneles { grid-template-columns: 1fr; gap: 10px; }
}

/* ===== v7.1 · Ronda de documento del Detective Visual =====
   A diferencia de las fotos, las dos copias del documento NUNCA se apilan una debajo
   de otra: comparar dos tablas exige verlas al mismo tiempo, y en cuanto una queda
   fuera de pantalla la prueba deja de medir comparación y empieza a medir memoria.
   En pantalla angosta se encogen, no se acomodan en columna. */
.dif-contexto {
  font-size: 14.5px; color: var(--texto-suave); line-height: 1.5;
  margin: 0 0 14px; font-style: italic;
}
.dif-paneles-doc { grid-template-columns: 1fr 1fr; align-items: start; }

.dif-doc {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 12px 12px 8px;
  box-shadow: var(--sombra-1);
  overflow: hidden;
}
.dif-doc-titulo {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #8a6d1f; margin: 0 0 10px; text-align: center;
}
.dif-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dif-tabla th {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-suave); text-align: left;
  padding: 0 6px 7px; border-bottom: 1.5px solid var(--borde);
}
.dif-tabla td {
  padding: 7px 6px; border-bottom: 1px solid var(--borde-suave, #eceaf2);
  color: var(--texto); white-space: nowrap;
}
/* La copia correcta se consulta, no se marca: sin cursor de mano ni resaltado al
   pasar por encima, para que nadie pierda segundos intentando marcar ahí. */
.dif-doc-revisar { border-color: #c9a94e; }
.dif-doc-revisar .dif-tabla tbody tr { cursor: pointer; transition: background .12s ease; }
.dif-doc-revisar .dif-tabla tbody tr:hover { background: #f6f4fb; }
.dif-doc-correcta { background: #fbfaf6; }
.dif-doc-correcta .dif-tabla tbody tr { cursor: default; }
.dif-doc-titulo-revisar { color: #9d3b52; }

/* Los códigos y las cifras en tipografía de ancho fijo y alineados por la derecha:
   así un dígito cambiado de lugar se puede encontrar comparando, que es justo la
   habilidad que la prueba quiere medir, y no depende de la vista de cada quien. */
.dif-tabla .dif-col-0 { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.dif-tabla .dif-col-1 { white-space: normal; }
.dif-tabla td.dif-col-2,
.dif-tabla td.dif-col-3 { text-align: right; font-variant-numeric: tabular-nums; }
.dif-tabla th.dif-col-2,
.dif-tabla th.dif-col-3 { text-align: right; }

/* La barra verde va SOLO en la primera celda: puesta en todas, el inset de cada td
   dibuja una raya en cada frontera de columna y el renglón marcado se ve cortado. */
.dif-fila-hallada td { background: rgba(31, 138, 76, .14); font-weight: 700; }
.dif-fila-hallada td:first-child { box-shadow: inset 3px 0 0 #1f8a4c; }
.dif-fila-fallo td { background: rgba(157, 59, 82, .16); }

@media (max-width: 760px) {
  .dif-paneles-doc { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dif-doc { padding: 8px 6px 4px; }
  .dif-tabla { font-size: 11px; }
  .dif-tabla td { padding: 6px 3px; }
  .dif-tabla .dif-col-0 { font-size: 10.5px; }

  /* v7.13: la tarjeta del documento deja pasar el deslizamiento lateral.
     Con `overflow: hidden` y las celdas en una sola linea, la tabla pedia 247px
     dentro de los 152px utiles de cada columna a 375px, y la columna del IMPORTE
     quedaba recortada por completo — no apretada: ausente, y sin ninguna senal de
     que faltaba algo. Cuatro de las seis diferencias de esta ronda son de importe o
     de cantidad, asi que en celular eran indetectables por construccion.
     Se prefiere deslizar dentro de la tarjeta a apilar los documentos: CONTRATOS
     v7.1 exige que original y copia se vean lado a lado, porque comparar es la
     habilidad que se mide. La fila sigue siendo el mismo <tr> que recibe el toque. */
  .dif-doc { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .dif-tabla { min-width: 250px; }
}

/* Variante de las tarjetas de métrica para Detective Visual en el reporte de RH. */
.metrica-diferencias .metrica-precision-valor { color: #8a6d1f; }

/* ===== v7.2 · Reconstruccion espacial de Memoria Visual =====
   La bandeja de objetos por colocar. Se coloca tocando primero el objeto y luego
   la celda: el arrastre con el dedo pelea contra el desplazamiento de la pagina y
   en un celular terminaria midiendo destreza tactil en vez de memoria. */
.mem-bandeja-etq {
  max-width: 560px; margin: 16px auto 8px; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--texto-suave);
}
.mem-bandeja {
  max-width: 560px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  padding: 12px; border-radius: 14px;
  background: var(--superficie-hover); border: 1px dashed var(--borde);
}
.mem-pieza {
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--borde); border-radius: 12px;
  color: #2b5f8a; cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.mem-pieza:hover { transform: translateY(-2px); border-color: #2b5f8a; }
.mem-pieza-elegida {
  border-color: #2b5f8a; box-shadow: 0 0 0 3px rgba(43, 95, 138, .22);
  transform: translateY(-3px);
}
/* La pieza ya colocada no desaparece: sigue a la vista en gris para que se pueda
   contar de un golpe cuantas faltan. */
.mem-pieza-usada { opacity: .28; cursor: default; transform: none; }
.mem-pieza-usada:hover { transform: none; border-color: var(--borde); }

.mem-celda-puesta { border-color: #2b5f8a; background: rgba(43, 95, 138, .10); }

.mem-listo-fila { text-align: center; margin-top: 18px; }
.mem-listo-fila .boton { background: #2b5f8a; border-color: #2b5f8a; }
.mem-listo-fila .boton:hover { background: #22496b; border-color: #22496b; }

@media (max-width: 560px) {
  .mem-pieza { width: 52px; height: 52px; }
}