@font-face { font-family: "Texto"; src: url("/fuentes/texto.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Titulos"; src: url("/fuentes/titulos.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

/* Sistema visual: las hojas de un informe de perfil. Papel blanco sobre una mesa gris fría,
   tinta casi negra, el color de la consultora como tinta de marca y la leyenda de cuatro
   relaciones como sistema de color de toda la plataforma. */
:root {
  --fondo: #eef0f4;
  --superficie: #ffffff;
  --papel-2: #f6f7f9;
  --borde: #d8dce3;
  --borde-fuerte: #b7bcc6;
  --linea: #e6e9ee;
  --texto: #151a24;
  --tenue: #545b68;
  /* La marca de la consultora. Sin color propio, una tinta índigo de informe. La pone en <body> la plataforma. */
  --marca: #243f86;
  /* La marca para texto de enlace: con 4,5:1 sobre blanco y sobre la mesa. La calcula la plataforma. */
  --marca-texto: #243f86;
  /* El texto encima del color de marca: blanco o tinta, según cuál se lea. La calcula la plataforma. */
  --sobre-marca: #ffffff;
  /* La leyenda de las cuatro relaciones. */
  --g-auto: #2a78d6; --g-lider: #eb6834; --g-par: #1baf7a; --g-reporte: #eda100; --g-anonimos: #1baf7a; --g-demas: #52514e;
  --sombra: 0 1px 2px rgba(21, 26, 36, .05), 0 8px 22px -14px rgba(21, 26, 36, .22);
  --bien: #1e6b46;
  --bien-suave: #e3f1e9;
  --alerta: #8a4b00;
  --alerta-suave: #fbeedb;
  --peligro: #a3262a;
  /* Borrar manteniendo presionado: rojo pastel (ronda 6). */
  --peligro-texto: #8f2b2b;
  --peligro-borde: #c46a62;
  --peligro-relleno: #f2b8b1;
  --peligro-suave: #fbe6e3;
  --foco: #c46a00;
  /* Escala de espaciado (ronda 6): toda separación entre cajas, campos y botones sale de aquí. */
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem;
  --radio: 8px;
  --radio-grande: 12px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  /* Derivados de la marca aquí, en <body>, donde la plataforma pone el color de la consultora. */
  --acento: var(--marca);
  --acento-fuerte: color-mix(in srgb, var(--marca) 78%, #000);
  --acento-suave: color-mix(in srgb, var(--marca) 9%, #fff);
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 1.0625rem/1.55 "Texto", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--e2); }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; margin-top: var(--e6); }
h3 { font-size: 1.0625rem; }
p { margin: 0 0 var(--e3); }
a { color: var(--acento); text-underline-offset: .15em; }
a:hover { color: var(--acento-fuerte); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--texto); color: #fff; padding: var(--e2) var(--e4); z-index: 10; }
.saltar:focus { left: 1rem; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tenue { color: var(--tenue); }

/* Versión de prueba: los correos no salen y esta franja lleva a la bandeja. */
.franja-prueba { background: var(--alerta-suave); color: var(--alerta); font-size: .9rem; border-bottom: 1px solid #efd7b3; }
.franja-prueba .cabecera-in { padding-top: var(--e2); padding-bottom: var(--e2); flex-wrap: wrap; gap: var(--e1) var(--e4); }
.franja-prueba span { display: inline-flex; align-items: center; gap: var(--e2); }
.franja-prueba a { color: var(--alerta); font-weight: 700; margin-left: auto; }
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.cabecera-in { max-width: 1080px; margin: 0 auto; padding: var(--e3) var(--e4); display: flex; align-items: center; gap: var(--e4); }
.marca { font-weight: 700; color: var(--texto); text-decoration: none; font-size: 1.0625rem; }
.cuenta { margin-left: auto; display: flex; align-items: center; gap: var(--e3); color: var(--tenue); }
.cuenta form { margin: 0; }

.contenido { max-width: 1080px; margin: 0 auto; padding: var(--e5) var(--e4) 4rem; }
.contenido.angosto { max-width: 720px; }

.migas ol { list-style: none; padding: 0; margin: 0 0 var(--e4); display: flex; flex-wrap: wrap; gap: var(--e1); font-size: .9rem; color: var(--tenue); }
.migas li + li::before { content: "›"; margin-right: var(--e1); }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e4) var(--e5); margin: 0 0 var(--e4); }
.tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-top: 0; }
.lista-tarjetas { list-style: none; padding: 0; margin: 0 0 var(--e4); display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lista-tarjetas .tarjeta { margin: 0; }
.lista-tarjetas h2 { margin: 0 0 var(--e1); font-size: 1.0625rem; }
.lista-simple { padding-left: var(--e4); }
details.tarjeta > summary { cursor: pointer; font-weight: 600; }
details[open].tarjeta > summary { margin-bottom: var(--e3); }

.formulario label { display: block; font-weight: 600; margin: var(--e2) 0 var(--e1); }
input[type=text], input:not([type]), input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; max-width: 32rem; font: inherit; color: inherit; background: #fff;
  border: 1px solid #8a909c; border-radius: 8px; padding: var(--e2) var(--e3);
}
textarea { max-width: none; resize: vertical; }
/* Todas las casillas de una línea, del mismo alto: la de fecha y los selectores traen uno propio. */
input[type=text], input:not([type]), input[type=email], input[type=password], input[type=date], input[type=number], select { box-sizing: border-box; height: 2.75rem; }
input[type=file] { font: inherit; }
.en-linea { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e2) var(--e3); }
.en-linea label { margin: 0; width: 100%; }
.en-linea input, .en-linea select { flex: 1 1 16rem; width: auto; }
form.en-linea { margin: var(--e2) 0; }
/* Formularios en rejilla (revisión de armonía, 2026-09-29): cada campo ocupa tres filas que comparte
   con los de su renglón (título, casilla, nota). Así los títulos y las casillas de un renglón quedan a la
   misma altura aunque uno tenga nota debajo o un título de dos líneas. Los de datos van en dos columnas
   parejas; los de una sola línea («Evalúa · A · Como · Agregar»), en todas las que quepan. */
.rejilla { display: grid; column-gap: var(--e4); row-gap: 0; grid-template-columns: repeat(auto-fill, minmax(max(200px, calc(50% - var(--e4))), 1fr)); }
.rejilla-linea { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.rejilla > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-bottom: var(--e2); }
.rejilla > div > label { align-self: end; }
.rejilla > div > .boton:only-child { grid-row: 2; justify-self: start; align-self: end; }
.rejilla > div > p { margin: var(--e1) 0 0; }
.casilla { display: flex !important; gap: var(--e2); align-items: flex-start; font-weight: 400 !important; }
.casilla input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; flex: none; }

.boton {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--acento); color: var(--sobre-marca); border: 1px solid var(--acento); border-radius: 8px; padding: var(--e2) var(--e4); margin-top: var(--e2);
}
.boton:hover { background: color-mix(in srgb, var(--acento) 88%, #000); color: var(--sobre-marca); }
.boton.secundario { background: #fff; color: var(--acento); }
.boton.secundario:hover { background: var(--acento-suave); color: var(--acento-fuerte); }
.boton[disabled] { opacity: .55; cursor: not-allowed; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--acento); text-decoration: underline; cursor: pointer; }
.enlace.peligro { color: var(--peligro); }

.aviso { border-radius: var(--radio); padding: var(--e3) var(--e4); border: 1px solid; }
.aviso-ok { background: var(--bien-suave); border-color: #9cc9ae; }
.aviso-info { background: var(--acento-suave); border-color: #a9c4d6; }
.aviso-error { background: #fbe7e7; border-color: #d99a9c; }

.etiqueta { display: inline-block; font-size: .8rem; font-weight: 600; border-radius: 999px; padding: .1rem var(--e2); background: #e9ecf1; color: var(--texto); }
.etiqueta-abierto, .etiqueta-bien { background: var(--bien-suave); color: var(--bien); }
.etiqueta-alerta { background: var(--alerta-suave); color: var(--alerta); }
.etiqueta-cerrado { background: #e6e9ee; color: var(--tenue); }

.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); margin: var(--e2) 0 var(--e4); font-size: 1.0625rem; }
.tabla th, .tabla td { text-align: left; padding: var(--e2) var(--e3); border-bottom: 1px solid #e6e9ee; vertical-align: top; }
.tabla thead th { font-size: .9rem; color: var(--tenue); background: #f6f7f9; }
.tabla form { margin: 0; }

.avance { display: inline-flex; align-items: center; gap: var(--e2); white-space: nowrap; }
.avance-barra { width: 90px; height: 8px; background: #e2e5eb; border-radius: 999px; overflow: hidden; }
.avance-barra > span { display: block; height: 100%; background: var(--acento); }

.cifras { display: flex; flex-wrap: wrap; gap: var(--e4) 2.5rem; margin: var(--e4) 0 var(--e5); }
.cifra { display: flex; flex-direction: column; }
.cifra-n { font-size: 2.1rem; font-weight: 700; line-height: 1.1; }
/* Ronda 8: cuatro cifras de ancho parejo; la de la fecha, en ámbar si es hoy o ya pasó. */
.cifras .cifra { flex: 1 1 11rem; max-width: 16rem; }
.cifra > span:last-child { color: var(--tenue); }
.cifra-alerta .cifra-n { color: var(--alerta); }
@media (max-width: 640px) {
  .cifras { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4) var(--e4); }
  .cifras .cifra { max-width: none; }
  .cifras .cifra-n { font-size: 1.5rem; }
  .cifras .cifra > span:last-child { font-size: .9rem; }
}

/* Ronda 9: lo que pide la ley. El aviso de datos, la política de cada empresa y las solicitudes. */
.aviso-ok-suave { background: var(--bien-suave); border-color: #9cc9ae; color: var(--bien); }
.aviso-datos ul { padding-left: var(--e5); }
.aviso-datos li { margin: var(--e2) 0; line-height: 1.55; }
.aviso-datos li strong { color: var(--texto); }
.politica { background: var(--superficie); border-radius: 12px; box-shadow: var(--sombra); padding: var(--e6); max-width: 760px; margin: 0 auto; line-height: 1.6; }
.politica h1 { margin-bottom: var(--e1); }
.politica-sub { font-size: 1.0625rem; color: var(--tenue); margin: 0 0 var(--e2); }
.politica h2 { font-size: 1.0625rem; margin: var(--e6) 0 var(--e2); padding-top: var(--e4); border-top: 1px solid var(--linea); }
.politica .tabla { margin: var(--e2) 0; }
.lista-acciones { list-style: none; margin: 0; padding: 0; }
.lista-acciones > li { padding: var(--e3) 0; border-top: 1px solid var(--linea); display: grid; gap: var(--e2); }
.lista-acciones > li:first-child { border-top: 0; }
@media (max-width: 640px) {
  .politica { padding: var(--e4); }
}

/* Ronda 8, D (opción A): «Lo que te toca ahora» y la etiqueta de cada evaluación en curso */
.te-toca { background: var(--superficie); border-radius: 12px; box-shadow: var(--sombra); padding: var(--e4) var(--e5); margin: var(--e5) 0 var(--e6); }
.te-toca h2 { font-size: 1.0625rem; margin: 0 0 var(--e2); }
.te-toca ol { list-style: none; margin: 0; padding: 0; }
.te-toca li { display: flex; align-items: center; gap: var(--e4); padding: var(--e3) 0; border-top: 1px solid var(--linea); }
.te-toca li:first-child { border-top: 0; }
.te-toca .ic-caja { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 999px; display: grid; place-items: center; background: var(--acento-suave); color: var(--marca-texto); }
.te-toca .ic-caja.bien { background: var(--bien-suave); color: var(--bien); }
.te-toca .ic-caja.ojo { background: var(--alerta-suave); color: var(--alerta); }
.te-toca p { margin: 0; flex: 1; min-width: 0; }
.te-toca p strong { display: block; }
.te-toca .tenue { font-size: .9rem; }
.te-toca form { margin: 0; }
.te-toca .boton { flex: none; }
.estado-vivo { justify-self: start; align-self: flex-start; width: fit-content; display: inline-flex; align-items: center; font-size: .8rem; font-weight: 700; padding: 2px var(--e2); border-radius: 999px; margin-bottom: var(--e2); }
.estado-vivo.bien { background: var(--bien-suave); color: var(--bien); }
.estado-vivo.ojo { background: var(--alerta-suave); color: var(--alerta); }
.estado-vivo.listo { background: var(--acento-suave); color: var(--marca-texto); }
@media (max-width: 640px) {
  .te-toca li { flex-wrap: wrap; }
  .te-toca p { flex: 1 1 calc(100% - 3.5rem); }
  .te-toca .boton, .te-toca form { margin-left: calc(2.25rem + var(--e4)); }
}

/* Ronda 8: un PDF por persona, por partes */
.partes-zip { background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: var(--e3) var(--e4); margin: 0 0 var(--e5); }
.partes-zip p { margin: 0 0 var(--e3); }
.partes-zip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }

/* Ronda 8: la empresa en el tiempo */
.en-el-tiempo { margin: var(--e6) 0; }
.en-el-tiempo h3 { font-size: 1.0625rem; margin: var(--e5) 0 var(--e2); }
.tabla-tiempo th.num, .tabla-tiempo td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-tiempo td.num { color: var(--texto); font-weight: 600; }
.tabla-tiempo thead th.num span { display: block; }
.tabla-tiempo thead th.num span:first-child { font-size: 1.0625rem; color: var(--texto); }
.tabla-tiempo tbody th { font-weight: 600; }
@media (max-width: 640px) {
  .tabla-tiempo thead th.num span.tenue { display: none; }
}

.titulo-proceso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.titulo-proceso h1 { margin: 0; }
.pestanas ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e1); padding: 0; margin: var(--e4) 0 var(--e5); border-bottom: 1px solid var(--borde); }
.pestanas a { display: block; padding: var(--e2) var(--e3); text-decoration: none; color: var(--tenue); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pestanas a[aria-current] { color: var(--texto); font-weight: 600; border-color: var(--acento); }

.bloque .competencia { border-top: 1px solid #e6e9ee; padding-top: var(--e4); margin-top: var(--e4); }
.bloque ol { padding-left: var(--e5); }
.bloque ol li { margin: .2rem 0; }
.bloque ol form { display: inline; margin-left: var(--e2); }

/* Formulario del evaluador */
.pregunta { border: 0; padding: 0; margin: 0 0 var(--e5); }
.pregunta legend, .pregunta > label { font-weight: 600; margin-bottom: var(--e2); padding: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.opcion { display: flex; align-items: center; gap: var(--e2); border: 1px solid #b7bcc6; border-radius: 8px; padding: var(--e2) var(--e3); cursor: pointer; background: #fff; }
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento); }
.opcion input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--acento); }
.opcion.no-obs { color: var(--tenue); }
.pregunta.falta .opciones { outline: 2px solid var(--peligro); outline-offset: 4px; border-radius: 8px; }
.falta-texto { color: var(--peligro); }
.acciones-fijas { position: sticky; bottom: 0; background: var(--fondo); padding: var(--e3) 0; display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: flex-end; border-top: 1px solid var(--borde); }
.acciones-fijas .boton { margin: 0; }
.persona { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); }
.persona > div { display: flex; flex-direction: column; }
.persona .boton { margin: 0; }

@media (max-width: 640px) {
  h1 { font-size: 1.5rem; }
  .tabla { font-size: .9rem; }
  .tabla th, .tabla td { padding: var(--e2) var(--e2); }
  .opcion { flex: 1 1 100%; }
}

@media print {
  .cabecera, .migas, .pestanas, .no-imprimir, .saltar { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .contenido { padding: 0; max-width: none; }
  .tabla, .comentarios li { break-inside: avoid; }
  section { break-inside: avoid-page; }
}

/* ---------- Evaluador por partes ---------- */
.sobretitulo { font-size: .9rem; color: var(--tenue); margin-bottom: var(--e1); }
.grande { font-size: 1.0625rem; }
.pequeno { font-size: .9rem; }
h2.pequeno { font-size: 1.0625rem; color: var(--tenue); margin-top: var(--e6); }
.volver { display: inline-block; font-size: .9rem; margin-bottom: var(--e3); }
.volver::before { content: "‹ "; }

.lista-evaluados { list-style: none; padding: 0; margin: var(--e4) 0; display: grid; gap: var(--e2); }
.evaluado { display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e4) var(--e4); }
.evaluado-texto { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.evaluado .boton { margin: 0; flex: none; }
.avance-mini { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e1); font-size: .9rem; }
.lista-hechas { list-style: none; padding: 0; color: var(--tenue); }
.lista-hechas li { padding: .2rem 0; }
.lista-hechas span { color: var(--bien); font-weight: 700; margin-right: var(--e1); }
.cierre { text-align: center; padding: var(--e6) var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.cierre-marca { font-size: 2.1rem; line-height: 1; color: var(--bien); margin: 0 0 var(--e2); }

.paso-cab { margin-bottom: var(--e4); }
.progreso { display: flex; gap: 4px; margin: var(--e2) 0 var(--e1); }
.progreso span { flex: 1; height: 6px; border-radius: 4px; background: #e2e5eb; }
.progreso span.hecho { background: var(--acento); }
.progreso span.actual { background: var(--acento); opacity: .45; }
.competencia-titulo { font-size: 1.5rem; margin-top: var(--e1); }
.instruccion { font-weight: 600; margin: var(--e3) 0 var(--e4); }
.evaluacion .pregunta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e3) var(--e4) var(--e3); margin-bottom: var(--e3); }
.evaluacion .pregunta legend { float: left; width: 100%; margin-bottom: var(--e2); line-height: 1.35; }
.evaluacion .pregunta legend + * { clear: both; }
.num { color: var(--tenue); font-weight: 600; }
.escala { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--e2); }
.punto { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  min-height: 3.3rem; padding: var(--e2) .2rem; border: 1px solid #b7bcc6; border-radius: 8px; cursor: pointer; background: #fff; text-align: center; }
.punto input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.punto-n { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.punto-t { font-size: .8rem; line-height: 1.15; color: var(--tenue); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; max-width: 100%; }
.punto:hover { border-color: var(--acento); }
.punto:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.punto:has(input:checked) { background: var(--acento); border-color: var(--acento); color: var(--sobre-marca); }
.punto:has(input:checked) .punto-t { color: var(--sobre-marca); }
.no-obs { display: inline-flex; align-items: center; gap: var(--e2); margin-top: var(--e2); min-height: 1.75rem; font-size: .9rem; color: var(--tenue); cursor: pointer; }
.no-obs input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--acento); }
.no-obs:has(input:checked) { color: var(--texto); font-weight: 600; }
.evaluacion .pregunta.falta { border-color: var(--peligro); box-shadow: inset 0 0 0 1px var(--peligro); }
.evaluacion .pregunta.falta .opciones { outline: 0; }
.falta-texto { display: block; font-size: .9rem; font-weight: 600; margin-top: .2rem; }
.guardado { min-height: 1.3em; margin: var(--e1) 0 0; }
.acciones-paso { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: var(--e3);
  background: var(--fondo); padding: var(--e3) 0 calc(var(--e3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--borde); margin-top: var(--e2); }
.acciones-paso .boton { margin: 0; min-width: 8rem; text-align: center; }
.revision { list-style: none; padding: 0; margin: var(--e4) 0 var(--e5); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.revision li { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); padding: var(--e3) var(--e4); }
.revision li + li { border-top: 1px solid #e6e9ee; }

@media (max-width: 640px) {
  .acciones-paso .boton { flex: 1; min-width: 0; }
  .evaluado { flex-wrap: wrap; }
  .evaluado .boton { width: 100%; text-align: center; }
}

.clave { display: none; }
@media (max-width: 520px) {
  /* En celular el botón muestra solo el número; la clave dice qué significa cada uno. */
  .clave { display: flex; flex-wrap: wrap; gap: .15rem var(--e4); font-size: .9rem; color: var(--tenue); margin: calc(-1 * var(--e2)) 0 var(--e4); }
  .clave strong { color: var(--texto); }
  .punto { min-height: 3rem; }
  .punto-n { font-size: 1.25rem; }
  .punto-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.modo-evaluador .contenido { padding-bottom: var(--e4); }

/* Informe */
.informe { max-width: 860px; margin: 0 auto; }
.acciones-informe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); }
.acciones-informe .boton { margin: 0; }
.portada { background: var(--superficie); border: 1px solid var(--borde); border-top: 6px solid var(--marca); border-radius: var(--radio); padding: var(--e6) var(--e6) var(--e5); margin: var(--e4) 0 var(--e5); }
.portada-marca { font-weight: 700; color: var(--marca); margin-bottom: var(--e5); }
.portada-marca img { max-height: 48px; max-width: 220px; display: block; }
.portada h1 { font-size: 2.1rem; margin: 0 0 .15rem; }
.portada-cargo { font-size: 1.0625rem; color: var(--tenue); }
.portada-datos { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e6); margin: var(--e4) 0 var(--e5); }
.portada-datos dt { font-size: .8rem; color: var(--tenue); }
.portada-datos dd { margin: 0; font-weight: 600; }
.pequeno-t { font-size: 1.0625rem; margin: 0 0 var(--e2); }
.quienes ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e5); }
.quienes li { display: flex; align-items: center; gap: var(--e1); }
.marca-g { width: .75rem; height: .75rem; border-radius: 4px; background: var(--g-demas); }
.g-auto { background: var(--g-auto); } .g-lider { background: var(--g-lider); } .g-par { background: var(--g-par); }
.g-reporte { background: var(--g-reporte); } .g-anonimos { background: var(--g-anonimos); }
.nota { font-size: .9rem; color: var(--tenue); margin: var(--e2) 0 0; }
.claves { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e4); margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid #e6e9ee; }
.claves p { margin: .2rem 0 0; font-weight: 600; line-height: 1.4; }
.clave-t { font-size: .8rem; color: var(--tenue); }

.seccion { margin: 2.25rem 0; }
.seccion > h2 { margin-top: 0; }

/* Cómo te ves y cómo te ven */
.pesas { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e4) var(--e5) var(--e5); }
.leyenda { display: flex; align-items: center; gap: var(--e2) var(--e2); flex-wrap: wrap; font-size: .9rem; color: var(--tenue); margin-bottom: var(--e3); }
.leyenda .marca-punto + .marca-punto { margin-left: var(--e4); }
.marca-punto { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }
.marca-punto.auto { background: var(--g-auto); }
.marca-punto.demas { background: #fff; border: 3px solid var(--g-demas); }
.pesa { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr 5.5rem; align-items: center; gap: var(--e2) var(--e4); padding: var(--e2) 0; border-top: 1px solid #e6e9ee; }
.pesa-nombre { font-weight: 600; line-height: 1.3; }
.lectura { display: block; font-size: .8rem; font-weight: 600; margin-top: .15rem; }
.lectura.ciego { color: var(--alerta); }
.lectura.oculta { color: var(--bien); }
.pista { position: relative; height: 1.4rem; background: linear-gradient(var(--borde), var(--borde)) center / 100% 2px no-repeat; }
.tramo { position: absolute; top: 50%; height: 4px; transform: translateY(-50%); background: #9aa1ad; border-radius: 4px; }
.punto-g { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--superficie); }
.punto-g.auto { background: var(--g-auto); }
.punto-g.demas { background: #fff; border: 3px solid var(--g-demas); }
.pesa-valores { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.auto-t { color: #1d62b5; font-weight: 700; }
.eje { position: relative; height: 1rem; margin-left: calc(min(14rem, 30%) + var(--e4)); margin-right: 6.5rem; font-size: .8rem; color: var(--tenue); }
.eje span { position: absolute; transform: translateX(-50%); top: .2rem; }

/* Por relación */
.por-relacion { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e4); }
.rel-comp { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e3) var(--e4); break-inside: avoid; }
.rel-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); margin-bottom: var(--e2); }
.rel-cab h4 { margin: 0; font-size: 1.0625rem; }
.ponderado { font-size: .9rem; color: var(--tenue); white-space: nowrap; }
.ponderado strong { color: var(--texto); font-size: 1.0625rem; }
.rel-fila { display: grid; grid-template-columns: 8.5rem 1fr 2.6rem; align-items: center; gap: var(--e2); font-size: .9rem; padding: .12rem 0; }
.rel-nombre { color: var(--tenue); }
.rel-pista { height: .7rem; background: #e6e9ee; border-radius: 0 4px 4px 0; }
.rel-barra { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.rel-valor { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Fortalezas y oportunidades */
.items { list-style: none; padding: 0; margin: var(--e2) 0 0; display: grid; gap: var(--e2); }
.items li { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e3) var(--e4); break-inside: avoid; }
.items p { margin: 0 0 var(--e1); font-weight: 600; line-height: 1.35; }
.item-pie { display: grid; grid-template-columns: 1fr 5rem 2.2rem; align-items: center; gap: var(--e2); font-size: .9rem; }
.item-barra { height: .45rem; background: #e6e9ee; border-radius: 4px; overflow: hidden; }
.item-barra span { display: block; height: 100%; background: var(--g-demas); }
.item-pie strong { text-align: right; font-variant-numeric: tabular-nums; }

.comentarios { list-style: none; padding: 0; display: grid; gap: var(--e2); }
.comentarios li { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e3) var(--e4); break-inside: avoid; }
.comentarios p { margin: 0 0 .2rem; }
.comentarios span { font-size: .8rem; }
.pie-informe { border-top: 1px solid var(--borde); margin-top: var(--e6); padding-top: var(--e3); font-size: .9rem; color: var(--tenue); }

@media (max-width: 640px) {
  .portada { padding: var(--e5) var(--e4); }
  .portada h1 { font-size: 1.5rem; }
  .pesa { grid-template-columns: 1fr 4.5rem; }
  .pista { grid-column: 1 / -1; grid-row: 2; }
  .eje { margin: 0; }
  .rel-fila { grid-template-columns: 7rem 1fr 2.4rem; }
}

@page { size: A4; margin: 14mm 14mm 16mm; }
@media print {
  .informe { max-width: none; }
  .portada { border-width: 1px; border-top-width: 6px; break-after: page; }
  .seccion { break-before: auto; }
  .seccion > h2 { break-after: avoid; }
  .pesas, .rel-comp, .items li, .comentarios li { box-shadow: none; }
  .informe * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.dos-columnas { display: grid; gap: var(--e4) var(--e6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dos-columnas h2 { margin-top: 0; }

/* Arreglos de desborde: el texto solo para lectores de pantalla nunca ocupa ancho. */
.oculto, .en-linea label.oculto { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.tabla-envoltura { position: relative; overflow-x: auto; margin: var(--e2) 0 var(--e4); }
.tabla-envoltura .tabla { margin: 0; }
input[type=file] { max-width: 100%; }

/* ---------- Administración ---------- */
.guia { list-style: none; padding: 0; margin: var(--e2) 0 0; }
.guia > li { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--e4); padding: var(--e4) 0; border-top: 1px solid #e6e9ee; }
.guia > li:first-child { border-top: 0; }
.guia-n { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  border: 2px solid var(--borde); color: var(--tenue); background: #fff; }
.guia > li.hecho .guia-n { background: var(--bien); border-color: var(--bien); color: #fff; }
.guia > li.listo .guia-n { border-color: var(--acento); color: var(--acento); }
.guia p { margin: .1rem 0 var(--e1); }
.guia form { margin-top: var(--e1); }
.primer-uso { border-top: 4px solid var(--acento); }
.pasos-guia { padding-left: var(--e5); margin: var(--e2) 0 0; }
.pasos-guia li { margin: var(--e2) 0; padding-left: var(--e1); }
.barra-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); margin: 0 0 var(--e4); }
.barra-acciones .boton { margin: 0; }
.acciones-proceso { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e4) var(--e6); }
.acciones-proceso h2 { margin-top: 0; font-size: 1.0625rem; }
.en-linea.compacto { flex-wrap: nowrap; margin: 0; align-items: center; }
.en-linea.compacto select { flex: 1 1 auto; min-width: 9rem; padding: var(--e1) var(--e2); }
.en-linea-texto { display: inline; margin-left: var(--e2); }
.competencia-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e4); }
.competencia-cab form { margin: 0; }
.nueva-competencia { border-top: 1px dashed var(--borde); padding-top: var(--e4); margin-top: var(--e4); }
.zona-peligro summary { color: var(--peligro); }
.boton.peligro { background: var(--peligro); border-color: var(--peligro); }
.boton.peligro:hover { background: #7f1d20; }
.logo-previo { max-height: 56px; max-width: 220px; border: 1px solid var(--borde); padding: var(--e1); background: #fff; border-radius: 8px; }
input[type=color] { width: 4rem; height: 2.5rem; padding: .15rem; border: 1px solid #8a909c; border-radius: 8px; background: #fff; }
.sugerir { border-top: 4px solid var(--acento); }
.cabecera .cuenta a { white-space: nowrap; }
.bloque-cab h2 { margin-top: 0; }

/* ---------- Diseño: tipografía y alineación ---------- */
h1, .portada h1, .informe h2, .competencia-titulo { font-family: "Titulos", Georgia, serif; font-weight: 650; letter-spacing: -.01em; }
.informe h2 { font-weight: 600; }
.ancho-angosto .cabecera-in { max-width: 720px; }
.marca-evaluador { display: flex; align-items: center; gap: var(--e2); font-weight: 700; color: var(--texto); }
.marca-evaluador img { max-height: 32px; max-width: 160px; }

/* ---------- Editor del cuestionario ---------- */
.con-js .solo-sin-js { display: none; }
.estado-guardado { font-size: .8rem; color: var(--tenue); min-width: 4.5rem; }
.en-sitio { display: flex; align-items: center; gap: var(--e2); flex: 1; min-width: 0; margin: 0; }
.en-sitio input { max-width: none; border-color: transparent; background: transparent; padding: var(--e1) var(--e2); margin-left: calc(-1 * var(--e2)); }
.en-sitio input:hover { border-color: var(--borde); }
.en-sitio input:focus { border-color: var(--acento); background: #fff; }
.entrada-titulo { font: 650 1.25rem/1.25 "Titulos", Georgia, serif; }
.entrada-sub { font-weight: 700; flex: 0 1 18rem; }
.entrada-desc { color: var(--tenue); font-size: 1.0625rem; flex: 1 1 14rem; }
.competencia-en-sitio { flex-wrap: wrap; row-gap: 0; }
.bloque-cab { display: flex; align-items: center; gap: var(--e2); }
.competencia-cab { display: flex; align-items: flex-start; gap: var(--e2); }
.controles { display: flex; align-items: center; gap: .15rem; flex: none; }
.mover { display: inline-flex; gap: .15rem; }
.mover form, .controles form { margin: 0; }
.icono { width: 2rem; height: 2rem; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--tenue); font-size: 1.0625rem; line-height: 1; cursor: pointer; }
.icono:hover:not([disabled]) { background: var(--acento-suave); color: var(--acento-fuerte); }
.icono.peligro:hover { background: #fbe7e7; color: var(--peligro); }
.icono[disabled] { opacity: .3; cursor: default; }
.preguntas-edit { list-style: decimal; padding-left: var(--e5); margin: var(--e2) 0 var(--e2); }
.preguntas-edit li { display: flex; align-items: center; gap: var(--e1); padding: .05rem 0; }
.preguntas-edit li::marker { color: var(--tenue); }
.preguntas-edit .en-sitio input { font-size: 1.0625rem; }
.agregar { display: flex; gap: var(--e2); align-items: center; margin: var(--e1) 0 0; }
.agregar input { flex: 1; max-width: none; border-style: dashed; background: #f6f7f9; }
.agregar .boton { margin: 0; white-space: nowrap; }
.pie-bloque { border-top: 1px dashed var(--borde); margin-top: var(--e4); padding-top: var(--e4); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e3); }
.pie-bloque .agregar { flex: 1 1 20rem; }
.pie-bloque form { margin: 0; }
.nuevo-bloque { border-style: dashed; }
.rejilla-completa { grid-column: 1 / -1; margin: 0; }
.escala-edit { background: #f6f7f9; border: 1px solid #e6e9ee; border-radius: var(--radio); padding: var(--e3) var(--e4); margin: var(--e2) 0 var(--e4); }
.escala-titulo { font-weight: 600; margin: 0 0 var(--e2); font-size: 1.0625rem; }
.puntos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: var(--e2); }
.punto-edit { display: flex; align-items: center; gap: var(--e2); min-width: 0; background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: var(--e1) var(--e2); }
.punto-edit-n { font-weight: 700; color: var(--acento); min-width: 1.1rem; text-align: center; flex: none; }
.punto-edit input { border: 0; padding: var(--e1) .2rem; min-width: 0; width: 100%; flex: 1 1 auto; box-shadow: none; }
.punto-edit:focus-within { outline: 3px solid var(--foco); outline-offset: 1px; }
.punto-edit input:focus-visible { outline: 0; }
.cambiar-puntos { margin-top: var(--e2); }
.cambiar-puntos label { width: auto !important; font-weight: 600; }
.cambiar-puntos select { flex: 0 0 5rem; min-width: 5rem; }
.puntos-escala { margin: 0; }
.avisos-armado { background: var(--alerta-suave); border: 1px solid #e8c79a; border-radius: var(--radio); padding: var(--e3) var(--e4); margin: 0 0 var(--e4); }
.avisos-armado ul { margin: 0; padding-left: var(--e4); }
.avisos-armado li { margin: .2rem 0; }
.vacio { color: var(--tenue); border: 1px dashed var(--borde); border-radius: 8px; padding: var(--e3) var(--e4); margin: var(--e2) 0; }
@media (max-width: 640px) {
  .competencia-cab, .preguntas-edit li { flex-wrap: wrap; }
  .en-sitio { flex: 1 1 100%; }
  .preguntas-edit li .controles { margin-left: auto; }
  .agregar { flex-wrap: wrap; }
  .agregar .boton { width: 100%; }
}
/* Más específico que la regla general de campos, que les ponía la letra normal. */
.en-sitio input.entrada-titulo { font: 650 1.25rem/1.25 "Titulos", Georgia, serif; }
.en-sitio input.entrada-sub { font-weight: 700; }
.en-sitio input.entrada-desc { font-size: 1.0625rem; color: var(--tenue); }
.en-linea.compacto.cambiar-puntos select { flex: 0 0 5.5rem; width: 5.5rem; min-width: 0; }
.en-linea.compacto.cambiar-puntos { flex-wrap: wrap; }
.mover .icono:not([disabled]) { color: var(--tenue); }
.ic { width: 1.15rem; height: 1.15rem; flex: none; }
.icono .ic { width: 1.1rem; height: 1.1rem; }
/* Cajas de texto que crecen con lo que se escribe, sin barra de desplazamiento. */
.en-sitio textarea { resize: none; overflow: hidden; field-sizing: content; min-height: 0; border-color: transparent; background: transparent;
  padding: var(--e1) var(--e2); margin-left: calc(-1 * var(--e2)); line-height: 1.4; font: inherit; }
.en-sitio textarea:hover { border-color: var(--borde); }
.en-sitio textarea:focus { border-color: var(--acento); background: #fff; }
.en-sitio textarea.entrada-desc { font-size: 1.0625rem; color: var(--tenue); }
.preguntas-edit li { display: grid; grid-template-columns: 1fr auto; align-items: start; }
.preguntas-edit .controles { padding-top: .15rem; }
@media (max-width: 640px) {
  .puntos { grid-template-columns: 1fr; }
  .competencia-cab { display: grid; grid-template-columns: 1fr auto; }
  .competencia-cab .en-sitio { flex-direction: column; align-items: stretch; }
  .preguntas-edit li .controles { margin-left: 0; }
  .preguntas-edit { padding-left: var(--e5); }
}
@media (max-width: 640px) {
  /* En columna, el ancho base de los campos no puede volverse alto. */
  .competencia-cab .en-sitio > * { flex: none; }
  .competencia-cab .en-sitio input, .competencia-cab .en-sitio textarea { width: 100%; }
}
@media (max-width: 640px) {
  .en-sitio { flex-wrap: wrap; row-gap: 0; }
  .en-sitio textarea, .en-sitio input { flex: 1 1 100%; width: 100%; }
  .en-sitio .estado-guardado { min-width: 0; }
  .en-sitio .estado-guardado:empty { display: none; }
}
@media (max-width: 640px) {
  .preguntas-edit li { grid-template-columns: 1fr; margin-bottom: var(--e1); }
  .preguntas-edit li .controles { justify-self: end; margin-top: calc(-1 * var(--e1)); }
}

/* ---------- Grupo 2: mensajes, fechas, interruptor ---------- */
.mensaje-consultora { margin: var(--e4) 0; padding: var(--e4) var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.mensaje-consultora p { margin: 0 0 var(--e2); font-family: "Titulos", Georgia, serif; font-size: 1.0625rem; line-height: 1.5; }
.mensaje-consultora footer { font-size: .9rem; color: var(--tenue); }
.fecha-limite { display: flex; align-items: center; gap: var(--e2); color: var(--texto); background: var(--acento-suave); border-radius: 8px; padding: var(--e2) var(--e3); }
.fecha-limite .ic { color: var(--acento); }
input.corto { max-width: 12rem; }
.ejemplo-correo { margin: var(--e2) 0 var(--e4); }
.ejemplo-correo summary { cursor: pointer; color: var(--acento); }
.interruptor-grupo { border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e3) var(--e4); margin: var(--e4) 0; }
.interruptor-grupo legend { font-weight: 600; padding: 0 var(--e1); }
.interruptor { display: flex !important; align-items: center; gap: var(--e3); font-weight: 400 !important; cursor: pointer; margin: var(--e1) 0 var(--e2) !important; }
.interruptor input { appearance: none; -webkit-appearance: none; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: #8a909c; position: relative; flex: none; margin: 0; cursor: pointer; transition: background .2s; }
.interruptor input::after { content: ""; position: absolute; top: .19rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; transition: transform .2s; }
.interruptor input:checked { background: var(--bien); }
.interruptor input:checked::after { transform: translateX(1.1rem); }
.interruptor input:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.cada { align-items: center; gap: var(--e2); }
.cada label { width: auto !important; font-weight: 400; margin: 0; }
.cada select { flex: 0 0 4.5rem; width: 4.5rem; min-width: 0; }
.acciones-form { display: flex; align-items: center; gap: var(--e4); margin-top: var(--e3); }
.acciones-form .boton { margin: 0; }
@media (prefers-reduced-motion: reduce) { .interruptor input, .interruptor input::after { transition: none; } }
.en-linea.compacto.cada select { flex: 0 0 4.5rem; width: 4.5rem; min-width: 0; }
.tarjeta > input[type=hidden]:first-child + h2, .tarjeta > input[type=hidden]:first-child + h3 { margin-top: 0; }
input[type=date] { font: inherit; color: inherit; border: 1px solid #8a909c; border-radius: 8px; padding: var(--e2) var(--e2); background: #fff; }
input[type=number] { max-width: 8rem; }
.varios-informes .informe + .informe { margin-top: 3rem; padding-top: var(--e6); border-top: 2px dashed var(--borde); }
.boton { display: inline-flex; align-items: center; gap: var(--e2); }
.tabla-areas td, .tabla-areas th[scope=row] { font-variant-numeric: tabular-nums; }
.celda-valor { display: inline-block; min-width: 3rem; text-align: center; border-radius: 4px; padding: .1rem var(--e2); font-weight: 600;
  background: color-mix(in srgb, var(--acento) calc(var(--nivel) * 30%), #fff); }
@media print { .varios-informes .informe + .informe { break-before: page; border-top: 0; margin-top: 0; padding-top: 0; } }

/* ---------- Grupo 4: panel de inicio ---------- */
.saludo { margin-bottom: var(--e5); }
.saludo h1 { margin-bottom: .2rem; }
.seccion-t { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); margin: var(--e6) 0 var(--e3); }
.procesos-vivos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.vivo { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: var(--e4) var(--e5) var(--e4); display: grid; gap: var(--e2); }
.vivo-cab p { margin: 0; }
.vivo-cab h3 { margin: .1rem 0 0; font-size: 1.25rem; line-height: 1.3; }
.vivo-cab h3 a { color: var(--texto); text-decoration: none; }
.vivo-cab h3 a:hover { color: var(--acento); text-decoration: underline; }
.vivo-cifra { display: flex; align-items: baseline; gap: var(--e2); }
.vivo-pct { font: 650 2.1rem/1 "Titulos", Georgia, serif; color: var(--acento-fuerte); }
.barra-grande { height: .55rem; background: #e6e9ee; border-radius: 999px; overflow: hidden; }
.barra-grande span { display: block; height: 100%; width: var(--v); background: var(--acento); border-radius: 999px; }
.vivo-pie { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); font-size: .9rem; }
.vivo-pie > span { display: inline-flex; align-items: center; gap: var(--e1); color: var(--tenue); }
.vivo-pie .urgente { color: var(--alerta); font-weight: 600; }
.lista-fina { list-style: none; padding: 0; margin: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.lista-fina li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e4); padding: var(--e3) var(--e4); }
.lista-fina li + li { border-top: 1px solid #e6e9ee; }
.empresas { list-style: none; padding: 0; margin: 0 0 var(--e4); display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.empresa-tarjeta { display: flex; gap: var(--e3); align-items: flex-start; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: var(--e4) var(--e4); }
.empresa-tarjeta h3 { margin: 0 0 .15rem; font-size: 1.0625rem; }
.empresa-tarjeta p { margin: 0; }
.empresa-ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--acento-suave); color: var(--acento); flex: none; }
.empresa-estado { display: inline-flex; align-items: center; gap: var(--e1); color: var(--bien); margin-top: var(--e1) !important; font-weight: 600; }
.empresa-estado .ic { width: 1rem; height: 1rem; }
.nueva-empresa { max-width: 36rem; }

/* Navegación con íconos */
.cuenta a { display: inline-flex; align-items: center; gap: var(--e1); text-decoration: none; color: var(--tenue); padding: var(--e1) var(--e2); border-radius: 8px; }
.cuenta a:hover { color: var(--acento-fuerte); background: var(--acento-suave); }
.cuenta .usuario { padding-left: var(--e2); border-left: 1px solid var(--borde); }
.pestanas a { display: inline-flex; align-items: center; gap: var(--e2); }
.pestanas a .ic { width: 1.05rem; height: 1.05rem; opacity: .75; }
.pestanas a[aria-current] .ic { opacity: 1; color: var(--acento); }
@media (max-width: 640px) {
  .cuenta a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pestanas ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pestanas a { white-space: nowrap; padding: var(--e2) var(--e2); }
}

/* Estados vacíos */
.vacio-guia { text-align: center; background: var(--superficie); border: 1px dashed var(--borde); border-radius: 12px; padding: var(--e6) var(--e5); color: var(--tenue); }
.vacio-guia .ic { width: 2rem; height: 2rem; color: var(--acento); margin-bottom: var(--e1); }
.vacio-guia strong { display: block; color: var(--texto); font-size: 1.0625rem; margin-bottom: var(--e1); }
.vacio-guia p { margin: 0 auto; max-width: 34rem; }

/* ---------- Movimiento: solo para quien no lo tenga desactivado ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes llenar { from { width: 0; } }
  @keyframes aparecer { from { opacity: 0; transform: translateY(2px); } }
  @keyframes marcar { 0% { transform: scale(.6); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
  .barra-grande span, .avance-barra > span, .progreso span.hecho, .item-barra span, .rel-barra { animation: llenar .7s cubic-bezier(.2, .7, .2, 1) both; }
  .estado-guardado.recien, [data-estado-guardado].recien { animation: aparecer .25s ease-out both; }
  .guia > li.hecho .guia-n, .cierre-marca { animation: marcar .45s ease-out both; }
  .punto, .opcion, .icono, .boton, .cuenta a, .pestanas a { transition: background-color .15s, border-color .15s, color .15s, transform .1s; }
  .boton:active, .punto:active { transform: translateY(1px); }
  .vivo, .empresa-tarjeta { transition: border-color .15s, box-shadow .15s; }
  .vivo:hover, .empresa-tarjeta:hover { border-color: #b7bcc6; }
}

/* ---------- Ronda 3 ---------- */
.acciones-fila { white-space: nowrap; }
.acciones-fila a + a { margin-left: var(--e4); }
/* Evaluador: avance total, pantalla de enviada, ayudas */
.avance-total { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e3) var(--e4) var(--e4); margin: var(--e4) 0; }
.avance-total p { margin: 0 0 var(--e2); }
.enviada { text-align: center; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: var(--e6) var(--e5) var(--e5); }
.enviada h1 { font-size: 1.5rem; }
.enviada .avance-total { text-align: left; background: var(--fondo); border: 0; max-width: 26rem; margin: var(--e5) auto; }
.boton-grande { font-size: 1.0625rem; padding: var(--e3) var(--e5); }
.enviada .boton-grande { margin: var(--e1) 0 var(--e4); }
.ayuda-paso { margin: calc(-1 * var(--e1)) 0 var(--e4); }
.solo-teclado { display: none; }
@media (hover: hover) and (pointer: fine) { .solo-teclado { display: inline; } }
.evaluacion .pregunta { scroll-margin-top: 1rem; }
.nota-enviar { text-align: right; margin: var(--e1) 0 0; }
@media (max-width: 520px) { .ayuda-paso { margin-top: 0; } }
/* Mari: guía, abrir, buscador, enlaces por persona */
.saludo-con-accion, .titulo-con-accion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e3) var(--e4); }
.saludo-con-accion .boton, .titulo-con-accion .boton { margin: 0; }
.titulo-con-accion h2 { margin: var(--e6) 0 var(--e2); }
.solo-con-js { display: none !important; }
.con-js .solo-con-js { display: flex !important; }
.buscador { flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e3); margin: var(--e2) 0 var(--e3); }
.buscador label { font-weight: 600; }
.buscador input { max-width: 20rem; flex: 1 1 12rem; }
[data-fila][hidden] { display: none !important; }
.cupo { display: flex; align-items: flex-start; gap: var(--e2); background: var(--acento-suave); border-radius: 8px; padding: var(--e2) var(--e3); margin: var(--e2) 0 var(--e2); }
.cupo .ic { color: var(--acento); margin-top: .15rem; }
.cupo-pasado { background: #fbe7e7; }
.cupo-pasado .ic { color: var(--peligro); }
.aviso-anonimato { background: var(--alerta-suave); border: 1px solid #e8c79a; border-radius: var(--radio); padding: var(--e3) var(--e4); margin: var(--e2) 0 var(--e4); }
.aviso-anonimato p { margin: 0 0 var(--e1); }
.aviso-anonimato .boton { margin-top: var(--e1); }
.guia-accion { margin: var(--e1) 0 var(--e2); }
.guia-accion > summary { cursor: pointer; color: var(--acento); font-weight: 600; }
.guia-accion[open] > summary { margin-bottom: var(--e2); }
.guia-accion .formulario { background: #f6f7f9; border: 1px solid #e6e9ee; border-radius: var(--radio); padding: var(--e3) var(--e4); }
.boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.resumen-abrir .lista-hechos { list-style: none; padding: 0; margin: 0 0 var(--e3); display: grid; gap: var(--e2); }
.lista-hechos li { display: flex; gap: var(--e2); align-items: flex-start; }
.lista-hechos .ic { color: var(--acento); margin-top: .2rem; }
pre.correo { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.enlace-copiar { border-top: 4px solid var(--bien); }
.enlace-copiar h2 { margin-top: 0; }
.copiar { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* Entrada en dos pasos: el correo a la vista, la clave y el olvido. */
.correo-fijo { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); align-items: baseline; margin: 0 0 var(--e1); font-weight: 600; overflow-wrap: anywhere; }
.correo-fijo a { font-weight: 400; }
.olvide { margin-top: var(--e4); }
.olvide .enlace { text-align: left; }

/* Consola de Venteris */
.venteris-admins { list-style: none; padding: 0; margin: var(--e2) 0 var(--e4); display: grid; gap: var(--e2); }
.venteris-admins li { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); align-items: baseline; justify-content: space-between; overflow-wrap: anywhere; }
.venteris-admins form { margin: 0; }
.venteris-editar { flex-basis: 100%; }
.venteris-editar > summary { cursor: pointer; color: var(--marca-texto); font-weight: 600; font-size: .9rem; }
.venteris-editar .formulario { margin-top: var(--e2); }
.en-linea { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: end; }
.en-linea label { margin: 0 0 var(--e1); }
.en-linea input { max-width: 12rem; }
.en-linea .boton { margin: 0; }
.copiar input { flex: 1 1 16rem; max-width: none; font-size: .9rem; }
.copiar .boton { margin: 0; }
.acciones-evaluador { white-space: nowrap; }
.acciones-evaluador form { display: inline; margin: 0; }
.acciones-evaluador form + form { margin-left: var(--e4); }
.avanzadas > summary { cursor: pointer; font-weight: 600; }
.avanzadas[open] > summary { margin-bottom: var(--e2); }
.avanzadas h2 { font-size: 1.0625rem; }
.nueva-evaluacion select, .nueva-evaluacion input { max-width: 32rem; }
@media (max-width: 640px) {
  .acciones-evaluador { white-space: normal; }
  .acciones-evaluador form { display: block; }
  .acciones-evaluador form + form { margin: var(--e1) 0 0; }
  .saludo-con-accion .boton { width: 100%; justify-content: center; }
}
.guia > li { grid-template-columns: 2.25rem minmax(0, 1fr); }
.guia > li > div { min-width: 0; }
/* Avance por evaluador en celular: acciones debajo del nombre, sin columna cortada */
input[type=search] { width: 100%; font: inherit; color: inherit; background: #fff; border: 1px solid #8a909c; border-radius: 8px; padding: var(--e2) var(--e3); }
@media (max-width: 640px) {
  .tabla-avance thead { display: none; }
  .tabla-avance tr { display: grid; grid-template-columns: 1fr auto; column-gap: var(--e3); border-bottom: 1px solid #e6e9ee; }
  .tabla-avance td { border: 0; }
  /* La regla se achica en celular para que «6 de 8» quepa entero al lado */
  .tabla-avance .avance-barra { width: 64px; }
  .tabla-avance td:first-child { min-width: 0; overflow-wrap: anywhere; }
  .tabla-avance td.acciones-evaluador { grid-column: 1 / -1; padding-top: 0; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e5); }
  .tabla-avance .acciones-evaluador form, .tabla-avance .acciones-evaluador form + form { display: inline; margin: 0; }
}

/* ---------- Ronda 4 · A: borrar manteniendo presionado ---------- */
html:not(.con-js) .boton-mantener, html:not(.con-js) .mantener-pista { display: none; }
.con-js .mantener-sin-js { display: none; }
.mantener { position: relative; margin: 0; }
.mantener-sin-js { display: grid; gap: var(--e1); max-width: 32rem; }
.mantener-detalle { margin: 0 0 var(--e2); color: var(--texto); }
/* Ronda 6: rojo pastel. El relleno va detrás del texto y el texto no cambia de color:
   se lee completo durante todo el llenado (8,2:1 sobre blanco, 4,8:1 sobre el relleno). */
.boton-mantener {
  --p: 0; position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: var(--e2); font: inherit; font-weight: 600; cursor: pointer;
  color: var(--peligro-texto); background: #fff; border: 1.5px solid var(--peligro-borde); border-radius: 8px; padding: var(--e2) var(--e4);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.mantener-relleno { position: absolute; inset: 0; z-index: -1; background: var(--peligro-relleno); transform-origin: left center; transform: scaleX(var(--p)); }
.mantener-texto { position: relative; display: inline-flex; align-items: center; gap: var(--e2); }
.boton-mantener:hover { background: var(--peligro-suave); }
.boton-mantener:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.mantener-chico .boton-mantener { padding: var(--e1) var(--e3); font-size: .9rem; border-width: 1px; }
.mantener-icono { padding: 0; width: 2rem; height: 2rem; justify-content: center; border-color: transparent; color: var(--tenue); }
.mantener-icono:hover { border-color: var(--peligro-borde); color: var(--peligro-texto); background: var(--peligro-suave); }
.mantener-icono .mantener-relleno { transform-origin: bottom center; transform: scaleY(var(--p)); }
.mantener-pista {
  position: absolute; left: 0; top: calc(100% + .35rem); z-index: 5; width: max-content; max-width: 16rem;
  background: var(--texto); color: #fff; font-size: .8rem; line-height: 1.35; padding: var(--e1) var(--e2); border-radius: 8px;
  opacity: 0; pointer-events: none;
}
.mantener-icono ~ .mantener-pista { left: auto; right: 0; }
.mantener-pista.visible { opacity: 1; }
.zona-peligro-suave { margin-top: 2.5rem; padding-top: var(--e4); border-top: 1px solid var(--borde); }
.zona-peligro-suave .seccion-t { margin-top: 0; }
.celda-quitar { width: 1%; white-space: nowrap; }

/* Diálogo propio */
.dialogo { border: 0; border-radius: 12px; padding: var(--e5) var(--e5) var(--e4); max-width: min(28rem, calc(100vw - 2rem)); box-shadow: 0 18px 50px rgba(20, 24, 35, .25); color: var(--texto); }
.dialogo::backdrop { background: rgba(29, 34, 48, .45); }
.dialogo p { margin: 0 0 var(--e4); font-size: 1.0625rem; line-height: 1.5; }
.dialogo-acciones { display: flex; justify-content: flex-end; gap: var(--e2); flex-wrap: wrap; }
.dialogo-acciones .boton { margin: 0; }

/* Botón ocupado */
.boton.ocupado { cursor: progress; opacity: .85; }
.giro { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .mantener-texto { transition: color .12s; }
  .mantener-pista { transition: opacity .2s, transform .2s; transform: translateY(-3px); }
  .mantener-pista.visible { transform: none; }
  .giro { animation: girar .8s linear infinite; }
  @keyframes girar { to { transform: rotate(360deg); } }
  .dialogo[open] { animation: dialogo-entra .2s ease-out; }
  .dialogo[open]::backdrop { animation: fondo-entra .2s ease-out; }
  @keyframes dialogo-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
  @keyframes fondo-entra { from { opacity: 0; } }
}

/* ---------- Ronda 4 · B: formularios que piensan ---------- */
.campo-condicional[hidden] { display: none; }
/* Carga de Excel */
.carga { margin: 0 0 var(--e5); }
.zona-archivo { position: relative; display: flex; align-items: center; gap: var(--e4); padding: var(--e4) var(--e5); cursor: pointer;
  background: var(--superficie); border: 2px dashed #b7bcc6; border-radius: 12px; }
.zona-archivo:hover, .zona-archivo.encima { border-color: var(--acento); background: var(--acento-suave); }
.zona-archivo:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; }
.zona-archivo.con-archivo { border-style: solid; border-color: var(--acento); }
.zona-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--acento-suave); color: var(--acento); flex: none; }
.zona-ic .ic { width: 1.3rem; height: 1.3rem; }
.zona-texto { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.zona-texto strong { overflow-wrap: anywhere; }
.archivo-oculto { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.carga-previa { margin: var(--e2) 0 0; font-weight: 600; min-height: 0; }
.carga-previa:empty { display: none; }
.carga-previa.bien { color: var(--bien); }
.carga-previa.mal { color: var(--peligro); }
.carga-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); margin-top: var(--e2); }
.carga-pie .boton { margin: 0; }
/* Buscador */
.buscador-campo { position: relative; display: flex; align-items: center; flex: 1 1 16rem; max-width: 24rem; }
.buscador-campo > .ic { position: absolute; left: .7rem; color: var(--tenue); pointer-events: none; }
.buscador-campo input[type=search] { padding-left: 2.3rem; padding-right: 2.3rem; }
.buscador-campo input[type=search]::-webkit-search-cancel-button { display: none; }
.buscador-limpiar { position: absolute; right: .3rem; width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; background: none; color: var(--tenue); border-radius: 8px; cursor: pointer; }
.buscador-limpiar:hover { background: var(--acento-suave); color: var(--acento-fuerte); }
.buscador-limpiar[hidden] { display: none; }
mark[data-resalte] { background: #fde8a6; color: inherit; border-radius: 4px; padding: 0 .05em; }
/* Guardado del líder */
.lider { gap: var(--e2); }
.lider .estado-guardado { min-width: 0; }

/* ---------- Ronda 4 · C1: avisos flotantes ---------- */
.aviso-flotante { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 50; margin: 0;
  display: flex; align-items: center; gap: var(--e2); width: max-content; max-width: calc(100vw - 2rem);
  box-shadow: 0 10px 30px rgba(20, 24, 35, .18); font-weight: 600; }
.aviso-flotante .ic { color: var(--bien); flex: none; }
.aviso-flotante.saliendo { opacity: 0; }

/* Panel lateral (agregar una persona) */
.panel-lateral > summary { list-style: none; }
.panel-lateral > summary::-webkit-details-marker { display: none; }
.panel-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); margin-bottom: var(--e2); }
.panel-cab h2 { margin: 0; }
.panel-cuerpo { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: var(--e4) var(--e5); margin-top: var(--e3); }
.con-js .panel-lateral[open] > .panel-cuerpo { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(26rem, 100vw); margin: 0; overflow-y: auto;
  border-radius: 12px 0 0 12px; box-shadow: -12px 0 40px rgba(20, 24, 35, .18); padding: var(--e5) var(--e5); }
.con-js .panel-lateral[open]::before { content: ""; position: fixed; inset: 0; z-index: 39; background: rgba(29, 34, 48, .35); }
.panel-cuerpo .formulario input, .panel-cuerpo .formulario select { max-width: none; }

/* Menú de la tarjeta de empresa */
.empresa-tarjeta { position: relative; }
.empresa-texto { flex: 1; min-width: 0; }
.menu-tarjeta { position: relative; flex: none; }
.menu-tarjeta > summary { list-style: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 8px; color: var(--tenue); cursor: pointer; }
.menu-tarjeta > summary::-webkit-details-marker { display: none; }
.menu-tarjeta > summary:hover, .menu-tarjeta[open] > summary { background: var(--acento-suave); color: var(--acento-fuerte); }
.menu-cuerpo { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20; width: min(20rem, calc(100vw - 3rem));
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 14px 40px rgba(20, 24, 35, .16); padding: var(--e2); }
.menu-cuerpo > a { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); border-radius: 8px; color: var(--texto); text-decoration: none; }
.menu-cuerpo > a:hover { background: var(--acento-suave); }
.menu-cuerpo > a .ic { color: var(--acento); }
.menu-peligro { border-top: 1px solid #e6e9ee; margin-top: var(--e1); padding: var(--e3) var(--e2) var(--e2); }
.menu-peligro .mantener-detalle { font-size: .9rem; color: var(--tenue); }
.menu-peligro .boton-mantener { width: 100%; justify-content: center; font-size: .9rem; }
.marca-admin { text-decoration: none; color: var(--texto); }
.marca-admin:hover { color: var(--acento); }
.empresas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

/* ---------- Ronda 4 · C y D: movimiento y orden ---------- */
.visto { width: 3.25rem; height: 3.25rem; color: var(--bien); }
.cierre-marca { display: flex; justify-content: center; }
.vacio-guia .dibujo, .primer-uso .dibujo { width: 7.5rem; height: 5rem; color: #8a909c; margin: 0 auto var(--e2); display: block; }
.dibujo .d-acento { stroke: var(--acento); }
.cuenta-pestana { font-size: .8rem; font-weight: 600; background: #e9ecf1; color: var(--tenue); border-radius: 999px; padding: 0 var(--e2); }
.pestanas a[aria-current] .cuenta-pestana { background: var(--acento-suave); color: var(--acento-fuerte); }
.pestanas ul.mas-derecha { -webkit-mask-image: linear-gradient(to right, #000 80%, transparent); mask-image: linear-gradient(to right, #000 80%, transparent); }
.pestanas ul.mas-izquierda.mas-derecha { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 80%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 80%, transparent); }
.pestanas ul.mas-izquierda:not(.mas-derecha) { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%); mask-image: linear-gradient(to right, transparent, #000 12%); }
/* Reordenar arrastrando */
.asa { display: none; width: 1.5rem; height: 2rem; place-items: center; color: #8a909c; cursor: grab; touch-action: none; }
.arrastrando { opacity: .55; background: var(--acento-suave); border-radius: 8px; }
@media (hover: hover) and (pointer: fine) {
  .asa { display: inline-grid; }
  /* Menos ruido: los controles de cada pregunta aparecen al pasar el mouse o con el foco. */
  .preguntas-edit li .controles, .competencia-cab .controles { opacity: 0; }
  .preguntas-edit li:hover .controles, .preguntas-edit li:focus-within .controles,
  .competencia:hover > .competencia-cab .controles, .competencia-cab:focus-within .controles { opacity: 1; }
}
/* Celular: tablas de personas e informes como tarjetas */
@media (max-width: 640px) {
  .tabla-personas thead, .tabla-informes thead { display: none; }
  .tabla-personas, .tabla-personas tbody, .tabla-informes, .tabla-informes tbody { display: block; }
  .tabla-personas tr, .tabla-informes tr { display: grid; grid-template-columns: 1fr auto; column-gap: var(--e3); padding: var(--e3) var(--e3); border-bottom: 1px solid #e6e9ee; }
  .tabla-personas td, .tabla-informes td { border: 0; padding: .15rem 0; }
  .tabla-personas td:nth-child(2) { grid-column: 1; }
  .tabla-personas td:nth-child(3) { grid-column: 1 / -1; }
  .tabla-personas td.celda-quitar { grid-column: 2; grid-row: 1; align-self: start; }
  .tabla-personas .lider select { flex: 1 1 auto; }
  .tabla-informes td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .tabla-informes td:nth-child(3) { grid-column: 1 / -1; }
  .tabla-informes td.acciones-fila { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Paso suave entre páginas */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
  /* Pliegues que se abren y cierran en vez de saltar */
  :root { interpolate-size: allow-keywords; }
  details.tarjeta::details-content, details.guia-accion::details-content, details.ejemplo-correo::details-content, details.avanzadas::details-content {
    transition: height .25s ease, content-visibility .25s allow-discrete; height: 0; overflow: clip; }
  details.tarjeta[open]::details-content, details.guia-accion[open]::details-content, details.ejemplo-correo[open]::details-content, details.avanzadas[open]::details-content { height: auto; }
  /* Avisos flotantes */
  .aviso-flotante { animation: flotar-entra .3s cubic-bezier(.2, .7, .2, 1) both; transition: opacity .3s, transform .3s; }
  .aviso-flotante.saliendo { transform: translate(-50%, 8px); }
  @keyframes flotar-entra { from { opacity: 0; transform: translate(-50%, 12px); } }
  /* Campo que aparece */
  .campo-condicional:not([hidden]) { animation: aparecer-abajo .25s ease-out both; }
  @keyframes aparecer-abajo { from { opacity: 0; transform: translateY(-4px); } }
  /* Panel lateral y menú */
  .con-js .panel-lateral[open] > .panel-cuerpo { animation: panel-entra .28s cubic-bezier(.2, .7, .2, 1) both; }
  .con-js .panel-lateral[open]::before { animation: fondo-entra .28s ease-out both; }
  @keyframes panel-entra { from { transform: translateX(100%); } }
  .menu-tarjeta[open] > .menu-cuerpo { animation: menu-entra .16s ease-out both; }
  @keyframes menu-entra { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
  /* Tarjetas del panel que se levantan */
  .vivo, .empresa-tarjeta { transition: border-color .15s, box-shadow .2s, transform .2s; }
  .vivo:hover, .empresa-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 24, 35, .08); }
  /* Evaluador: el punto elegido responde, la parte actual avanza, el visto se dibuja */
  .punto.recien .punto-n { animation: marcar .35s ease-out; }
  .progreso span.actual { animation: llenar-parte .6s ease-out both; transform-origin: left; }
  @keyframes llenar-parte { from { transform: scaleX(0); } }
  .visto circle { stroke-dasharray: 145; stroke-dashoffset: 145; animation: trazo .55s ease-out forwards; }
  .visto path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: trazo .35s .45s ease-out forwards; }
  @keyframes trazo { to { stroke-dashoffset: 0; } }
  /* Informe: se anima lo que aparece en pantalla */
  .informe .esperando .rel-barra, .informe .esperando .item-barra span { animation: none; transform: scaleX(0); transform-origin: left; }
  .informe .visible .rel-barra, .informe .visible .item-barra span { animation: none; transform: scaleX(1); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
  .informe .esperando .punto-g, .informe .esperando .tramo { opacity: 0; }
  .informe .visible .punto-g, .informe .visible .tramo { opacity: 1; transition: opacity .45s .15s; }
  /* Controles del cuestionario al pasar el mouse */
  .preguntas-edit li .controles, .competencia-cab .controles { transition: opacity .15s; }
  .zona-archivo { transition: border-color .15s, background-color .15s; }
}
.plan-anual { display: flex; align-items: center; gap: var(--e2); margin: var(--e1) 0 0; color: var(--tenue); font-size: .9rem; }
.plan-anual .ic { color: var(--acento); }
.nota-casilla { margin: -.15rem 0 var(--e2) var(--e6); }
.autorizar-informe { border-top: 4px solid var(--acento); margin-top: var(--e5); }

/* ======================================================================
   Sistema visual: informe de perfil
   Cada pantalla es una hoja: papel blanco con sombra corta sobre la mesa,
   banda de sección con la tinta de la consultora, reglas graduadas en vez
   de barras lisas y la leyenda de relaciones como color de la plataforma.
   ====================================================================== */

/* Superficies del navegador, en la paleta */
::selection { background: color-mix(in srgb, var(--marca) 22%, #fff); color: var(--texto); }
input, textarea, select { caret-color: var(--marca); accent-color: var(--marca); }
html { scrollbar-color: var(--borde-fuerte) var(--fondo); }
body { font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

/* Cabecera: la marca de la consultora y, debajo, la leyenda de las cuatro relaciones,
   rotulada y al ancho del contenido, como la clave de color de un informe */
.cabecera { position: relative; border-bottom: 0; }
@media (max-width: 520px) {
  .cabecera-in { gap: var(--e2); }
}
/* Venteris, solo en las pantallas de quien administra (JF, 2026-09-27): abajo a la derecha,
   pequeño y en gris; a color al pasar encima. Quien evalúa nunca lo ve. */
.firma-venteris { max-width: 1080px; margin: calc(-1 * var(--e7)) auto 0; padding: 0 var(--e4) var(--e5); display: flex; justify-content: flex-end; }
.firma-venteris a { display: inline-flex; align-items: center; gap: var(--e2); font-size: .8rem; color: var(--tenue); text-decoration: none; }
.firma-venteris img { height: 1rem; width: auto; filter: grayscale(1); opacity: .7; }
.firma-venteris a:hover span, .firma-venteris a:focus-visible span { text-decoration: underline; }
.firma-venteris a:hover img, .firma-venteris a:focus-visible img { filter: none; opacity: 1; }
.leyenda-rel { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.leyenda-rel .cabecera-in { padding-top: 0; padding-bottom: var(--e1); gap: 0; }
.rel-banda { flex: 1; min-width: 0; padding-top: var(--e1); border-top: 4px solid var(--c); font-size: .8rem; font-weight: 600; color: var(--tenue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-banda + .rel-banda { margin-left: 3px; }
.rel-banda { padding-right: var(--e3); }
@media (max-width: 520px) {
  .rel-banda .solo-ancho { display: none; }
  .portada-entrada { padding: var(--e6) var(--e5) var(--e5); }
}
.cabecera-in { padding-top: var(--e4); padding-bottom: var(--e4); }
.marca, .marca-evaluador, .marca-admin { font-family: "Titulos", Georgia, serif; font-weight: 650; font-size: 1.25rem; letter-spacing: -.01em; color: var(--marca); }
.marca-admin:hover { color: var(--acento-fuerte); }
.contenido { padding-top: 2.25rem; }
.cuenta a[aria-current], .cuenta a:hover { color: var(--acento-fuerte); background: var(--acento-suave); }

/* Tipografía de hoja de informe */
h1 { font-size: 2.1rem; line-height: 1.15; letter-spacing: -.015em; }
h2 { font-family: "Titulos", Georgia, serif; font-weight: 600; letter-spacing: -.005em; }
.tarjeta h2, .lista-tarjetas h2, .guia h2, .acciones-proceso h2, .avanzadas h2 { font-family: inherit; font-weight: 700; letter-spacing: 0; }
.migas a { color: var(--tenue); }
.migas a:hover { color: var(--acento-fuerte); }

/* Títulos de sección: el título y una raya que corre hasta el borde, como en el informe */
.seccion-t { display: flex; align-items: center; gap: var(--e4); font: 600 1.25rem/1.25 "Titulos", Georgia, serif;
  letter-spacing: -.005em; text-transform: none; color: var(--texto); margin: 2.25rem 0 var(--e4); }
.seccion-t::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

/* Hojas: papel con sombra corta */
.tarjeta, .vivo, .empresa-tarjeta, .lista-fina, .tabla, .evaluado, .avance-total, .enviada, .cierre, .revision,
.pesas, .rel-comp, .items li, .comentarios li, .portada, .mensaje-consultora, .panel-cuerpo, .evaluacion .pregunta {
  border-color: var(--borde); box-shadow: var(--sombra); }
.tarjeta { border-radius: 8px; padding: var(--e5) var(--e5); }
.tabla { border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.tabla thead th { background: var(--papel-2); color: var(--tenue); font-weight: 600; border-bottom: 1px solid var(--borde); }
.tabla tbody tr:last-child > * { border-bottom: 0; }

/* Botones: la acción principal en la tinta de la consultora; lo secundario, en tinta */
.boton { border-radius: 8px; padding: var(--e2) var(--e4); box-shadow: 0 1px 0 rgba(21, 26, 36, .08), inset 0 1px 0 rgba(255, 255, 255, .12); }
.boton.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); box-shadow: 0 1px 0 rgba(21, 26, 36, .04); }
.boton.secundario:hover { background: var(--papel-2); color: var(--texto); border-color: var(--marca); }
.boton-grande { padding: var(--e3) var(--e5); }
input[type=text], input:not([type]), input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea {
  border-color: var(--borde-fuerte); }
input:hover:not(:focus):not([disabled]), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--tenue); }
input:focus, select:focus, textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 16%, transparent); outline: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* Pestañas del proceso: separadores de carpeta con la marca */
.pestanas a { color: var(--tenue); font-weight: 600; }
.pestanas a:hover { color: var(--texto); }
.pestanas a[aria-current] { color: var(--texto); border-color: var(--marca); }

/* Reglas graduadas: toda barra de avance tiene marcas cada décimo, como la escala del informe */
.barra-grande, .avance-barra, .item-barra {
  background:
    repeating-linear-gradient(to right, transparent 0 calc(10% - 1px), rgba(21, 26, 36, .16) calc(10% - 1px) 10%),
    var(--linea);
  border-radius: 4px; }
.barra-grande { height: .75rem; }
.avance-barra { height: .6rem; width: 104px; }
.barra-grande span, .avance-barra > span { background: var(--marca); border-radius: 4px; }
.progreso { gap: 3px; }
.progreso span { height: 8px; border-radius: 4px; background: var(--linea); }
.progreso span.hecho { background: var(--marca); }
.progreso span.actual { background: color-mix(in srgb, var(--marca) 45%, #fff); }

/* Procesos en curso: hojas con banda de sección */
.vivo { border-top: 4px solid var(--marca); border-radius: 8px; padding: var(--e4) var(--e5) var(--e4); gap: var(--e3); }
.vivo-cab p { color: var(--tenue); font-size: .9rem; }
.vivo-pct { color: var(--marca); }
.empresa-tarjeta { border-radius: 8px; }
.empresa-ic { border-radius: 8px; background: var(--acento-suave); color: var(--marca); }
.lista-fina { border-radius: 8px; }
.primer-uso, .sugerir, .autorizar-informe { border-top-color: var(--marca); }
.cifra-n { font-family: "Titulos", Georgia, serif; font-weight: 650; }

/* La leyenda como sistema: cada relación con su color, donde aparezca */
.rel { display: inline-flex; align-items: center; gap: var(--e2); font-size: .9rem; font-weight: 600; color: var(--texto); white-space: nowrap; }
.rel::before { content: ""; width: .65rem; height: .65rem; border-radius: 999px; background: var(--c, var(--g-demas)); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--g-demas)) 18%, transparent); }
.rel-auto { --c: var(--g-auto); } .rel-lider { --c: var(--g-lider); } .rel-par { --c: var(--g-par); } .rel-reporte { --c: var(--g-reporte); }

/* Etiquetas de estado */
.etiqueta { background: var(--linea); }

/* Evaluador: la escala es una regla segmentada; cada punto, una tecla. Sin marca de
   graduación arriba (ronda 6: JF no la quiso); el número y su nombre quedan centrados. */
.escala { gap: 0; }
.punto { border-radius: 0; margin-left: -1px; border-color: var(--borde-fuerte); min-height: 3.6rem; padding: var(--e2) var(--e1); }
.punto:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.punto:last-child { border-radius: 0 8px 8px 0; }
.punto:hover { border-color: var(--marca); z-index: 1; background: var(--acento-suave); }
.punto:has(input:checked) { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); z-index: 2; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.punto:has(input:focus-visible) { z-index: 3; }
.evaluacion .pregunta { border-radius: 8px; padding: var(--e4) var(--e4) var(--e3); }
.competencia-titulo { font-size: 1.75rem; }
.evaluado { border-radius: 8px; }
.evaluado-texto strong { font-size: 1.0625rem; }
.acciones-paso, .acciones-fijas { background: color-mix(in srgb, var(--fondo) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Hojas con banda de sección: la banda va recta, como en el informe impreso; solo se redondea abajo */
.vivo, .portada, .primer-uso, .sugerir, .autorizar-informe, .enlace-copiar { border-radius: 0 0 8px 8px; }
.portada { border-top-color: var(--marca); }
.enlace-copiar { border-top-color: var(--bien); }

/* El color de marca se gasta en acción y estado. El texto de enlace sobre la mesa gris va en
   la marca oscurecida: la consultora escoge un color legible sobre blanco, no sobre gris. */
a, .enlace { color: var(--marca-texto); }
.tabla a, .lista-fina a, .empresa-tarjeta h3 a, .vivo-cab h3 a { color: var(--texto); }
.tabla a:hover, .lista-fina a:hover, .empresa-tarjeta h3 a:hover, .vivo-cab h3 a:hover { color: var(--marca-texto); }
.vivo-pie a, .tabla .enlace, .acciones-evaluador .enlace { color: var(--marca-texto); }
.empresa-ic { background: var(--papel-2); color: var(--tenue); border: 1px solid var(--linea); }
.plan-anual .ic, .cupo .ic, .lista-hechos .ic { color: var(--tenue); }

/* El color de la consultora se guarda tal cual lo escoge. Como relleno va puro; como texto,
   en su versión que se lee sobre blanco y sobre la mesa. */
.marca, .marca-evaluador, .marca-admin, .vivo-pct, .portada-marca { color: var(--marca-texto); }
.marca-admin:hover { color: var(--marca-texto); text-decoration: underline; }

/* El enlace de una persona, para copiarlo a mano si el navegador no dejó copiarlo solo */
.enlace-a-mano { width: 100%; max-width: none; margin: 0 0 var(--e4); font-size: .9rem; }

/* Tu marca: el color con su muestra al lado */
.color-fila { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.muestra-marca { display: inline-flex; align-items: center; min-height: 2.5rem; padding: var(--e2) var(--e4); border-radius: 8px;
  background: var(--marca); color: var(--sobre-marca); font-weight: 600; }

/* Contexto debajo del título, nunca encima */
.contexto { color: var(--tenue); margin: -.2rem 0 var(--e4); }
.vivo-cab h3 { margin: 0 0 .1rem; }
.evaluando { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e3); margin: .1rem 0 var(--e2); }
.evaluando strong { font-size: 1.0625rem; }
.volver { display: inline-flex; align-items: center; gap: var(--e1); }
.volver::before { content: none; }
.ic-volver { transform: rotate(-90deg); width: 1rem; height: 1rem; }
.lista-hechas li { display: flex; align-items: center; gap: var(--e2); }
.lista-hechas .ic { color: var(--bien); }
.guia-n .ic { width: 1.1rem; height: 1.1rem; }

/* Chips de relación en la línea de cada persona y en los comentarios */
.rels { display: inline-flex; flex-wrap: wrap; gap: var(--e1) var(--e4); margin-left: var(--e2); vertical-align: middle; }
.rels .rel { font-weight: 400; color: var(--tenue); }
.rel-anonimos { --c: var(--g-anonimos); } .rel-otros { --c: var(--g-demas); }
.quienes .rel { font-weight: 400; }
.quienes .rel strong { color: var(--texto); }
.comentarios .rel { font-size: .8rem; font-weight: 600; color: var(--tenue); }
.comentarios .rel::before { width: .5rem; height: .5rem; box-shadow: none; }

/* Triángulo de los pliegues, en la paleta */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details.tarjeta > summary::before, details.avanzadas > summary::before, details.guia-accion > summary::before, details.ejemplo-correo > summary::before {
  content: ""; display: inline-block; width: .45rem; height: .45rem; margin: 0 var(--e3) .15rem .1rem;
  border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue); transform: rotate(-45deg); }
details[open].tarjeta > summary::before, details[open].avanzadas > summary::before, details[open].guia-accion > summary::before, details[open].ejemplo-correo > summary::before { transform: rotate(45deg); }

/* Las marcas de la regla también se leen sobre la parte llena */
.barra-grande, .avance-barra { position: relative; }
.barra-grande::after, .avance-barra::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to right, transparent 0 calc(10% - 1px), rgba(255, 255, 255, .55) calc(10% - 1px) 10%); }

/* En tablas y listas, los enlaces son nombres y acciones: sin subrayado hasta que se apuntan */
.tabla a, .lista-fina a, .empresa-tarjeta h3 a, .vivo-pie a { text-decoration: none; font-weight: 600; }
.tabla a:hover, .lista-fina a:hover, .empresa-tarjeta h3 a:hover, .vivo-pie a:hover { text-decoration: underline; }
.tabla a:focus-visible, .lista-fina a:focus-visible { text-decoration: underline; }

/* Entrada: una portada de informe. Hoja blanca con banda de marca recta arriba, el título
   adentro, un poco más abajo que el resto de las páginas. */
.ancho-angosto .contenido:has(> .portada-entrada) { padding-top: clamp(2.25rem, 10vh, 6rem); }
.portada-entrada { background: var(--superficie); border: 1px solid var(--borde); border-top: 6px solid var(--marca);
  border-radius: 0 0 8px 8px; box-shadow: var(--sombra); padding: 2.25rem 2.25rem var(--e6); }
.portada-entrada h1 { font-size: 2.1rem; margin-bottom: var(--e1); }
.portada-entrada > p { color: var(--tenue); margin-bottom: var(--e5); }
.portada-entrada .formulario { border-top: 1px solid var(--linea); padding-top: var(--e4); }
.portada-entrada .formulario label:first-child { margin-top: 0; }

/* Procesos en curso: la banda de sección llena, con el nombre del proceso en blanco */
.vivo { padding-top: 0; overflow: hidden; }
.vivo-cab { margin: 0 calc(-1 * var(--e5)) .1rem; padding: var(--e4) var(--e5) var(--e3); background: var(--marca); }
.vivo-cab h3 a, .vivo-cab h3 a:hover { color: var(--sobre-marca); }
.vivo-cab p { color: var(--sobre-marca); opacity: .9; margin: 0; }
.vivo-cab h3 a:focus-visible { outline-color: var(--sobre-marca); }

/* Evaluador en celular: la escala dice sus extremos debajo, sin tener que leer la clave */
.escala-anclas { display: none; }
@media (max-width: 520px) {
  .escala-anclas { display: flex; justify-content: space-between; gap: var(--e4); margin-top: var(--e1); font-size: .8rem; font-weight: 600; color: var(--tenue); }
}

/* Comentarios del informe en lista, con reglas finas, como en el informe impreso */
.comentarios { gap: 0; border-top: 1px solid var(--borde); }
.comentarios li { background: none; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; box-shadow: none; padding: var(--e3) 0; }
.comentarios p { margin-bottom: var(--e1); }

/* Ronda 5 · Logo de la empresa cliente: a la derecha del de la consultora, separado por una raya */
.portada-marca { display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; }
.portada-marca .logo-cliente { max-height: 40px; max-width: 180px; padding-left: var(--e5); border-left: 1px solid var(--borde); }
.marca-cliente { display: flex; align-items: center; padding-left: var(--e3); border-left: 1px solid var(--borde); }
.marca-cliente img { max-height: 28px; max-width: 120px; }
.logo-empresa { margin-top: var(--e5); }
.logo-empresa h2 { margin-top: 0; }

/* Ronda 5 · Textos propios: la vista previa es el papel donde va a salir el texto */
textarea[data-texto-propio] { max-width: 32rem; }
.vista-texto { max-width: 32rem; margin: .1rem 0 var(--e5); padding: var(--e3) var(--e4); background: var(--papel-2); border-left: 4px solid var(--marca); border-radius: 0 8px 8px 0; }
.vista-texto-t { display: block; font-size: .8rem; font-weight: 600; color: var(--tenue); margin-bottom: .2rem; }
.vista-texto p { margin: 0; white-space: pre-line; }
.saludo-consultora { margin: var(--e4) 0; padding-left: var(--e4); border-left: 4px solid var(--marca); font-family: "Titulos", Georgia, serif; font-size: 1.0625rem; line-height: 1.55; white-space: pre-line; }

/* Ronda 5 · Partes del informe: una casilla por parte, con lo que muestra debajo */
.lista-casillas { border: 0; padding: 0; margin: var(--e2) 0 var(--e4); display: grid; gap: var(--e3); }
.casilla-con-nota > span { display: flex; flex-direction: column; gap: .1rem; }

/* Ronda 5 · Comparación con la evaluación anterior */
.tabla-comparacion td { font-variant-numeric: tabular-nums; }
.cambio { font-weight: 600; white-space: nowrap; }
.cambio.sube { color: var(--bien); }
.cambio.baja { color: var(--alerta); }
.cambio.igual { color: var(--tenue); }
.cambio.sube::before { content: "▲ "; font-size: .8rem; }
.cambio.baja::before { content: "▼ "; font-size: .8rem; }
.sin-comparar { color: var(--tenue); padding-left: var(--e4); }

/* Ronda 5 · Plan de desarrollo: cada compromiso es una fila de qué, cómo y para cuándo */
.plan-filas { list-style: none; padding: 0; margin: var(--e2) 0 var(--e4); display: grid; gap: var(--e4); counter-reset: plan; }
.plan-fila { counter-increment: plan; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--e2) var(--e4); align-items: start;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: var(--e4) var(--e4) var(--e4) 2.6rem; position: relative; box-shadow: var(--sombra); }
.plan-fila::before { content: counter(plan); position: absolute; left: 1rem; top: .95rem; font-family: "Titulos", Georgia, serif; font-weight: 650; color: var(--marca-texto); }
.plan-fila label { margin-top: 0; }
.plan-fila input, .plan-fila textarea { max-width: none; width: 100%; }
.plan-fila input[type=date] { width: auto; }
.plan-vacio { color: var(--tenue); margin: var(--e1) 0 var(--e2); }
.plan-lista { padding-left: var(--e5); }
.plan-lista li { margin-bottom: var(--e3); }
.plan-lista p { margin: 0 0 .2rem; }
.plan-que { font-weight: 600; }
@media (max-width: 640px) {
  .plan-fila { grid-template-columns: minmax(0, 1fr); padding-left: 2.4rem; }
  .portada-marca .logo-cliente { padding-left: var(--e4); }
  .marca-cliente { padding-left: var(--e2); }
  .marca-cliente img { max-height: 24px; max-width: 88px; }
}

@media (max-width: 640px) {
  h1 { font-size: 1.75rem; }
  .contenido { padding-top: var(--e5); }
  .marca, .marca-evaluador, .marca-admin { font-size: 1.0625rem; }
  .competencia-titulo { font-size: 1.5rem; }
  .seccion-t { margin-top: var(--e6); }
}

@media (prefers-reduced-motion: no-preference) {
  .boton, input, select, textarea { transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s, transform .1s; }
  /* Recorrido de tecla: el punto baja al oprimirlo y, al quedar marcado, sube con un rebote corto */
  .punto:active { transform: translateY(2px); }
  .punto.recien { animation: tecla .3s cubic-bezier(.3, 1.7, .5, 1); }
  @keyframes tecla { 0% { transform: translateY(3px); } 100% { transform: none; } }
}

/* Ronda 6 · Toda la tarjeta se toca. El enlace principal de la tarjeta (.enlace-toda) la cubre
   entera con su ::after; los botones y campos de adentro quedan encima y hacen lo suyo.
   Un solo enlace para el lector de pantalla; el foco con teclado se dibuja en toda la tarjeta. */
.toda { position: relative; cursor: pointer; }
.enlace-toda::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.toda :is(a, button, summary, details, form, input, select, textarea, label):not(.enlace-toda) { position: relative; z-index: 2; }
.toda .enlace-toda:focus-visible { outline: 0; }
.toda:has(.enlace-toda:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
tr.toda:hover > td { background: var(--acento-suave); }
.lista-fina li.toda:hover { background: var(--acento-suave); }
.ir { display: inline-flex; align-items: center; gap: var(--e1); font-weight: 600; color: var(--marca-texto); }
.ir .ic { width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .toda:hover .ir .ic { transform: translateX(2px); transition: transform .15s; }
}

/* Ronda 6 · Lo que se acaba de mover en el cuestionario se marca un instante */
@media (prefers-reduced-motion: no-preference) {
  .movido { animation: movido .9s ease-out; }
  @keyframes movido { from { background-color: var(--acento-suave); } to { background-color: transparent; } }
}

/* Ronda 6 · Pasos para abrir: lo que falta se marca en rojo suave, con su frase y su botón */
.guia > li { scroll-margin-top: var(--e5); }
.guia > li:focus { outline: 0; }
.guia > li:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.guia > li.falta { background: var(--peligro-suave); border-top-color: transparent; border-radius: 8px; padding-left: var(--e3); padding-right: var(--e3); margin: var(--e1) 0; }
.guia > li.falta + li { border-top-color: transparent; }
.guia > li.falta .guia-n { border-color: var(--peligro-borde); color: var(--peligro-texto); background: #fff; }
.falta-paso { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--e2) var(--e2); margin: var(--e2) 0 var(--e3); color: var(--peligro-texto); }
.falta-paso[hidden] { display: none; }
.falta-paso .ic { margin-top: .2rem; }
.falta-paso p { margin: 0; font-weight: 600; }
.falta-paso .boton { grid-column: 2; justify-self: start; margin: 0; }
.boton .ic { width: 1rem; height: 1rem; }

/* Ronda 6 · En un formulario en línea, el campo de texto se estira: el ejemplo se lee entero */
.en-linea > input:not([type]), .en-linea > input[type=text], .en-linea > input[type=email] { flex: 1 1 16rem; min-width: 0; }

/* Ronda 6 · «Quién evalúa a quién»: lo que falta, los dos caminos y el resumen */
.asig-intro { margin: 0 0 var(--e4); }
.asig-intro h2 { margin: 0 0 var(--e1); }
.asig-intro p { margin: 0; }
.requisitos h2 { margin-top: 0; }
.req-lista { list-style: none; margin: 0; padding: 0; }
.req { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--e3); align-items: center; padding: var(--e3) 0; border-top: 1px solid var(--linea); }
.req:first-child { border-top: 0; padding-top: 0; }
.req strong { display: block; }
.req .tenue { font-size: .9rem; }
.req > a:not(.boton) { font-weight: 600; white-space: nowrap; }
.req > .boton { margin: 0; }
.req-est { width: 1.75rem; height: 1.75rem; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: .9rem;
  border: 1.5px solid var(--borde-fuerte); color: var(--tenue); background: #fff; }
.req-est .ic { width: 1rem; height: 1rem; }
.req.ok .req-est { background: var(--bien); border-color: var(--bien); color: #fff; }
.req.falta .req-est { background: var(--peligro-suave); border-color: var(--peligro-borde); color: var(--peligro-texto); }
.requisitos .cupo { margin: var(--e3) 0 0; }
.asig-caminos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e4); margin: var(--e3) 0 var(--e4); align-items: start; }
.asig-caminos > .tarjeta { margin: 0; }
.asig-caminos h3 { margin: 0 0 var(--e2); }
.camino-rec { border-top: 4px solid var(--marca); border-radius: 0 0 8px 8px; }
.sello { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--marca-texto); background: var(--acento-suave); padding: 0 var(--e2); border-radius: 999px; margin-bottom: var(--e2); }
.quien-evalua { list-style: none; padding: 0; margin: var(--e3) 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.asig-resumen { border-top: 4px solid var(--marca); border-radius: 0 0 8px 8px; }
.asig-resumen-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e4); }
.asig-resumen-cab h2 { margin: 0 0 var(--e1); }
.asig-resumen-cab p { margin: 0; }
.asig-resumen-cab .boton { margin: 0; }
.asig-resumen .cupo, .asig-resumen .aviso-anonimato { margin: var(--e4) 0 0; }
.asig-mas .asig-caminos { margin-top: var(--e4); }
.vacio-chico { padding: var(--e5) var(--e4); }
@media (max-width: 640px) {
  .asig-caminos { grid-template-columns: minmax(0, 1fr); }
  .req { grid-template-columns: 2rem minmax(0, 1fr); }
  .req > a, .req > .boton { grid-column: 2; justify-self: start; }
}
.vacio-guia .boton .ic { width: 1rem; height: 1rem; margin: 0; color: inherit; }
/* Con el paso marcado, su botón ya va en la frase de lo que falta: no se repite */
.guia > li.falta .sin-falta { display: none; }

/* ---------- Ronda 7 · Informe FORMATIO (la línea gráfica de Mari) ----------
   Su logo, su coral y su tinta; una sola familia tipográfica. Las barras van en coral fuerte
   (3,9:1 sobre blanco); el texto en tinta (15:1), el tenue (6,5:1) y el coral oscuro (5,8:1). */
.formatio {
  --f-tinta: #24243c; --f-tenue: #5f5c68; --f-coral: #e64a2e; --f-coral-texto: #b8391f; --f-rosa: #fdf3f0;
  --f-linea: #e8e2de; --f-verde: #2d7c6b; --f-dorado: #b7863b;
  --fx-nom: 11rem; --fx-val: 9rem;
  color: var(--f-tinta); max-width: 880px;
}
.formatio, .formatio h1, .formatio h2, .formatio h3 { font-family: "Texto", system-ui, sans-serif; }
.formatio h2, .formatio h3 { color: var(--f-tinta); }
.fx-portada { position: relative; background: #fff url("/formatio/portada.jpg") right bottom / cover no-repeat; border-radius: 12px; padding: var(--e6); min-height: 30rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: var(--e2); }
.fx-portada::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 255, 255, .96) 45%, rgba(255, 255, 255, .55)); }
.fx-portada > * { position: relative; z-index: 1; margin: 0; }
.fx-logo { width: 15rem; height: auto; margin-bottom: var(--e5); }
.fx-sobre { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--f-coral-texto); margin: 0; }
.fx-tipo { font-size: 1.25rem; font-weight: 600; }
.fx-portada h1 { font-size: 2.1rem; font-weight: 800; margin-top: var(--e4); }
.fx-cargo { color: var(--f-tenue); font-size: 1.0625rem; }
.fx-datos { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e6); margin: var(--e4) 0 0; }
.fx-datos dt { font-size: .8rem; color: var(--f-tenue); }
.fx-datos dd { margin: 0; font-weight: 600; }
.fx-lema { margin-top: auto; padding-top: var(--e5); font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--f-coral-texto); }
.fx-sec { background: #fff; border-radius: 12px; padding: var(--e6); margin-top: var(--e5); box-shadow: var(--sombra); }
.fx-banda { border-bottom: 2px solid var(--f-coral); padding-bottom: var(--e3); margin-bottom: var(--e4); }
.fx-banda h2 { font-size: 1.75rem; font-weight: 800; margin: var(--e1) 0 0; }
.fx-sec h3 { font-size: 1.0625rem; font-weight: 700; margin: var(--e5) 0 var(--e2); }
.fx-sec p { line-height: 1.6; }
.fx-raices { font-weight: 700; letter-spacing: .06em; color: var(--f-coral-texto); text-align: center; margin: var(--e5) 0; }
.fx-destacado, .fx-nota { background: var(--f-rosa); border-left: 4px solid var(--f-coral); border-radius: 0 8px 8px 0; padding: var(--e4) var(--e5); margin: var(--e4) 0 0; }
.fx-nota h3 { margin-top: 0; }
.fx-nota p:last-child { margin-bottom: 0; }
.fx-def { font-size: 1.0625rem; font-style: italic; color: var(--f-tenue); }
.fx-tenue { color: var(--f-tenue); font-size: .9rem; }
.fx-niveles { display: grid; gap: var(--e2); margin: 0; }
.fx-niveles div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--e4); padding: var(--e3) 0; border-top: 1px solid var(--f-linea); }
.fx-niveles dt { font-weight: 800; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; color: var(--f-coral-texto); }
.fx-niveles dd { margin: 0; }
.fx-lista { padding-left: var(--e5); }
.fx-lista li { margin: var(--e1) 0; }
/* Gráficas */
.fx-graf { margin: var(--e4) 0 0; }
.fx-sub { font-weight: 700; font-size: 1.0625rem; margin: var(--e5) 0 var(--e1); }
.fx-conv { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); padding: 0; margin: 0 0 var(--e3); font-size: .8rem; color: var(--f-tenue); }
.fx-conv li { display: inline-flex; align-items: center; gap: var(--e2); }
.fx-conv .fx-m { position: static; transform: none; }
.fx-conv .fx-m-otros { transform: rotate(45deg); }
.fx-sw-barra { display: inline-block; width: 1.25rem; height: .6rem; border-radius: 4px; background: var(--f-coral); }
.fx-filas { position: relative; }
.fx-fila { display: grid; grid-template-columns: var(--fx-nom) minmax(0, 1fr) var(--fx-val); gap: var(--e5); align-items: center; padding: var(--e2) 0; }
.fx-nom { font-size: .9rem; text-align: right; }
.fx-val { font-size: .9rem; white-space: nowrap; }
.fx-pista { position: relative; height: 1.25rem; background: repeating-linear-gradient(90deg, var(--f-linea) 0 1px, transparent 1px calc(100% / 3)); }
.fx-pista-fina::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--f-linea); }
.fx-barra { position: absolute; left: 0; top: 0; bottom: 0; background: var(--f-coral); border-radius: 0 4px 4px 0; }
.fx-barra-suave { top: 25%; bottom: 25%; }
.fx-m { position: absolute; top: 50%; width: .8rem; height: .8rem; transform: translate(-50%, -50%); }
.fx-m-otros { background: var(--f-verde); transform: translate(-50%, -50%) rotate(45deg); width: .7rem; height: .7rem; }
.fx-m-lider { width: 0; height: 0; border-left: .45rem solid transparent; border-right: .45rem solid transparent; border-bottom: .8rem solid var(--f-dorado); }
.fx-m-auto { border-radius: 999px; border: 3px solid var(--f-tinta); background: #fff; }
.fx-m-autolleno { border-radius: 999px; background: var(--f-tinta); }
.fx-m-global { border-radius: 999px; background: var(--f-coral); }
.fx-punto { position: absolute; top: 50%; width: .9rem; height: .9rem; border-radius: 999px; background: var(--f-tinta); transform: translate(-50%, -50%); }
.fx-punto-auto { background: #fff; border: 3px solid var(--f-tinta); }
.fx-refl { position: absolute; top: -.25rem; bottom: -.25rem; width: 2px; background: var(--f-coral); transform: translateX(-50%); }
.fx-tramo { position: absolute; top: 50%; height: 3px; background: var(--f-coral); transform: translateY(-50%); }
.fx-eje { position: relative; margin: var(--e1) 0 0; margin-left: calc(var(--fx-nom) + var(--e5)); margin-right: calc(var(--fx-val) + var(--e5)); height: 2.5rem; font-size: .8rem; color: var(--f-tenue); }
.fx-eje span { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.fx-eje b { font-weight: 600; }
.fx-eje i { font-style: normal; white-space: nowrap; }
.fx-conducta-lista { list-style: none; padding: 0; margin: 0; }
.fx-conducta-lista li { border-top: 1px solid var(--f-linea); padding: var(--e3) 0; }
.fx-conducta-lista p { margin: 0 0 var(--e1); }
.fx-fila-conducta { grid-template-columns: minmax(0, 1fr) var(--fx-val); padding: 0; }
.fx-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); margin: var(--e4) 0; }
.fx-kpis div { border: 1px solid var(--f-linea); border-radius: 8px; padding: var(--e3) var(--e4); }
.fx-kpis dt { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--f-tenue); }
.fx-kpis dd { margin: var(--e1) 0 0; display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.fx-kpis strong { font-size: 1.75rem; }
.fx-kpis span { font-size: .9rem; color: var(--f-tenue); }
.fx-kpis .fx-kpi-g { border-color: var(--f-coral); background: var(--f-rosa); }
.fx-kpi-g span { color: var(--f-coral-texto); font-weight: 700; }
.fx-comentarios { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--f-linea); }
.fx-comentarios li { padding: var(--e3) 0; border-bottom: 1px solid var(--f-linea); }
.fx-brechas .fx-val { white-space: normal; }
.fx-mapa + p { margin-top: var(--e3); }
.fx-mapa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); margin-top: var(--e4); }
.fx-cuad { border-radius: 8px; padding: var(--e4); border: 1px solid var(--f-linea); border-top: 4px solid var(--f-coral); }
.fx-cuad h3 { margin: 0 0 var(--e1); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; color: var(--f-coral-texto); }
.fx-cuad ul { list-style: none; padding: 0; margin: var(--e2) 0 0; }
.fx-cuad li { padding: var(--e1) 0; font-weight: 600; }
.fx-cuad-observar { border-top-color: var(--f-tinta); }
.fx-cuad-observar h3 { color: var(--f-tinta); }
.fx-vacio { color: var(--f-tenue); font-size: .9rem; font-style: italic; }
.fx-quiero { list-style: none; padding: 0; }
.fx-quiero li { font-weight: 700; padding: var(--e3) 0 var(--e5); border-bottom: 1px dashed var(--f-linea); }
.fx-cierre { background: #fff url("/formatio/cierre.jpg") center bottom / cover no-repeat; position: relative; min-height: 26rem; }
.fx-cierre::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .97) 55%, rgba(255, 255, 255, .6)); }
.fx-cierre > * { position: relative; z-index: 1; }
.fx-cierre h2 { font-size: 1.75rem; font-weight: 800; margin-top: 0; }
.formatio .pie-informe { margin-top: var(--e5); }
@media (max-width: 640px) {
  .formatio { --fx-nom: 6.5rem; --fx-val: 5.5rem; }
  .fx-portada, .fx-sec { padding: var(--e5) var(--e4); }
  .fx-portada h1 { font-size: 1.75rem; }
  .fx-banda h2 { font-size: 1.5rem; }
  .fx-niveles div { grid-template-columns: minmax(0, 1fr); gap: var(--e1); }
  .fx-kpis { grid-template-columns: minmax(0, 1fr); }
  .fx-mapa { grid-template-columns: minmax(0, 1fr); }
  .fx-nom { font-size: .8rem; }
  .fx-val { font-size: .8rem; white-space: normal; }
  .fx-eje i { display: none; }
}

/* ---------- Revisión de armonía (2026-09-29) ---------- */
/* El campo de archivo, con la forma de un botón secundario de la plataforma y no el gris del navegador. */
input[type=file] { color: var(--tenue); width: 26rem; max-width: 100%; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; color: var(--acento); background: #fff; border: 1px solid var(--acento);
  border-radius: 8px; padding: var(--e2) var(--e4); margin-right: var(--e3); cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--acento-suave); }
/* Los pasos de la guía, con el mismo margen por dentro estén marcados o no: el contenido no se corre. */
.guia > li { padding-left: var(--e3); padding-right: var(--e3); }
/* En las tablas, lo de cada fila centrado en su alto: nombres de dos líneas, selectores y botones. */
.tabla td { vertical-align: middle; }
/* Las acciones de una fila se ven iguales en todas las tablas: enlaces de la marca, subrayados. */
.tabla .acciones-fila a, .tabla .enlace { color: var(--marca-texto); font-weight: 600; text-decoration: underline; }
/* Las dos formas de armar las evaluaciones, del mismo alto. */
.asig-caminos { align-items: stretch; }
/* Tus textos: a la izquierda lo que escribe, a la derecha cómo se ve, a la altura de la casilla. */
.texto-con-vista { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "titulo ." "campo vista" "nota ."; column-gap: var(--e4); margin-bottom: var(--e4); }
.texto-con-vista > label { grid-area: titulo; }
.texto-con-vista > textarea { grid-area: campo; max-width: none; }
.texto-con-vista > p { grid-area: nota; }
.texto-con-vista > .vista-texto { grid-area: vista; max-width: none; margin: 0; }
@media (max-width: 760px) {
  .texto-con-vista { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "campo" "nota" "vista"; }
}
/* Las etiquetas no se parten en varias líneas. */
.etiqueta { white-space: nowrap; }
/* Celular: las solicitudes como tarjetas, igual que personas e informes. */
@media (max-width: 640px) {
  .tabla-solicitudes thead { display: none; }
  .tabla-solicitudes, .tabla-solicitudes tbody { display: block; }
  .tabla-solicitudes tr { display: grid; grid-template-columns: 1fr auto; column-gap: var(--e3); padding: var(--e3); border-bottom: 1px solid #e6e9ee; }
  .tabla-solicitudes td { border: 0; padding: .15rem 0; }
  .tabla-solicitudes td:nth-child(1) { grid-column: 1; }
  .tabla-solicitudes td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .tabla-solicitudes td:nth-child(3) { grid-column: 1 / -1; color: var(--tenue); }
  .tabla-solicitudes td:nth-child(4) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--e1); }
}
/* Celular: los botones de una barra, uno debajo del otro y del mismo ancho. */
@media (max-width: 640px) {
  .barra-acciones > .boton { width: 100%; justify-content: center; text-align: center; }
}