/* =========================================================================
   Sistema visual de Healthy Co.
   Tomado del prototipo (docs/prototipo/parts/p1_head.html) tal cual: los
   valores no se ajustan "a ojo", se copian. T06 completa lo que falta —
   tablas, tarjetas, pastillas, gráficos—; acá está lo que necesitan las
   pantallas de acceso y la barra superior.
   ========================================================================= */

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/Montserrat.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /*
     LA MARCA DEL CLIENTE — dos valores, y nada más.
     El layout los reescribe con los de la empresa de la sesión. Todo lo demás se deriva de acá
     con color-mix(): el degradado del menú, los fondos suaves, el anillo de los campos activos.
     Nada de tintes escritos a mano, porque un tinte a mano no cambia cuando cambia la marca.
  */
  --violeta:#6e00db; --lila:#9c48ec;

  /*
     LOS COLORES QUE SIGNIFICAN — estos NO cambian con la marca del cliente.
     Si cambiaran, el mismo informe diría cosas distintas en cada empresa: el verde de cumplido
     dejaría de leerse como cumplido en el cliente que eligió verde institucional.
  */
  --cumplido:#1D9E75;        /* verde  · la fuente cumplió, el estado está cerrado */
  --alerta:#ff8a3d;          /* naranja · algo pide atención */
  --alerta-texto:#b3591c;    /* el naranja no tiene contraste suficiente sobre blanco */
  --riesgo:#c22c2c;          /* rojo   · brecha o incumplimiento */
  --autoevaluacion:#120faa;  /* azul   · la mirada de la propia persona, en los gráficos */

  /* Nombres del prototipo, para no reescribir el CSS que se copió tal cual. */
  --wa:var(--cumplido); --mango:var(--alerta); --rojo:var(--riesgo); --azul:var(--autoevaluacion);

  --tinta:#1b1b22;   --humo:#6b6b76; --gris:#c4c4c6;
  --nube:#f7f7f9;    --papel:#fff;   --noche:#1a0040;
  --radio:10px; --radio-sm:8px;
  --sombra:0 2px 10px rgba(27,27,34,.09);
  --grad:linear-gradient(90deg,var(--violeta),var(--lila));
  /* tintes derivados de la marca: cambian solos al cambiar el color de la empresa */
  --tinte:color-mix(in srgb, var(--violeta) 6%, #fff);
  --tinte2:color-mix(in srgb, var(--violeta) 13%, #fff);
  --sombra-pri:0 3px 10px color-mix(in srgb, var(--violeta) 26%, transparent);
  --anillo:color-mix(in srgb, var(--lila) 22%, transparent);
  --linea:#ececf0;
}

* { box-sizing:border-box }
html, body { margin:0; padding:0; height:100% }
body {
  font-family:'Montserrat',system-ui,sans-serif; font-size:14.5px; color:var(--tinta);
  background:var(--nube); -webkit-font-smoothing:antialiased;
}
h1 { font-size:27px; font-weight:800; letter-spacing:-.02em; margin:0 }
h2 { font-size:15px; font-weight:700; margin:0 }
h3 { font-size:14px; font-weight:700; margin:0 }
p  { margin:0 }
button { font-family:inherit }
i { display:inline-block; width:16px; height:16px; line-height:0; flex:0 0 auto }
i > svg { display:block; width:100%; height:100% }

.lectura { font-size:13.5px; font-weight:500; line-height:1.75; color:var(--tinta) }
.field-lbl {
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--humo); display:block; margin-bottom:6px;
}

/* ============ shell ============ */
/*
  La barra lateral a la izquierda y el resto a la derecha (T58). Oscura y colapsable a iconos
  (T108): el contraste separa la navegación del contenido de un vistazo, y en pantallas de
  trabajo largas el modo compacto devuelve 170 píxeles de ancho a las tablas.
*/
.app { display:flex; min-height:100% }
.lateral {
  /* El fondo lleva el color del cliente (T109): oscurecido hasta que el texto blanco se lea,
     pero con su matiz, así la barra es de la empresa y no de una paleta ajena. */
  flex:0 0 268px; width:268px; color:#fff;
  background:color-mix(in srgb, var(--violeta) 30%, #101019);
  position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden; z-index:35;
  display:flex; flex-direction:column; gap:16px; padding:18px 14px;
  transition:flex-basis .16s, width .16s, padding .16s;
}
.lateral-hd { display:flex; align-items:center; gap:8px; padding:0 4px }

/* La marca del cliente, al pie y siempre a la vista. */
.lateral-pie {
  margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px 6px 2px;
  border-top:1px solid rgba(255,255,255,.13);
}
.emp-logo {
  width:34px; height:34px; flex:0 0 auto; border-radius:10px; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff;
  letter-spacing:.02em; box-shadow:0 2px 8px rgba(0,0,0,.28);
}
/* Elegir un archivo con el botón del sistema, no con el del navegador (T111). */
.archivo-campo { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.archivo-campo .btn { margin:0 }
.archivo-oculto {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* El foco del control escondido tiene que verse en su etiqueta, o se navega a ciegas. */
.archivo-oculto:focus-visible + .archivo-nombre,
.archivo-campo:focus-within .btn { box-shadow:0 0 0 3px var(--tinte2) }
.archivo-nombre { font-size:12.5px; color:var(--humo); overflow-wrap:anywhere }

/* El campo de carga del logo, en el formulario de la empresa. */
.emp-logo-campo { display:flex; align-items:flex-start; gap:14px }
.emp-logo-previa {
  width:82px; height:82px; flex:0 0 auto; border-radius:var(--radio-sm);
  border:1px dashed var(--linea); display:flex; align-items:center; justify-content:center;
  background:var(--nube); overflow:hidden;
}
.emp-logo-previa img { max-width:100%; max-height:100%; object-fit:contain; display:block }

/* El logo cargado por el cliente: entero, sin recortar ni deformar. Casi todos son apaisados,
   así que se le da el ancho de la barra y el nombre pasa debajo. */
.lateral-pie.con-logo { flex-direction:column; align-items:flex-start; gap:8px }
.emp-logo-img { max-width:100%; max-height:40px; width:auto; height:auto; display:block }
.app.compacto .lateral-pie.con-logo { align-items:center }
.app.compacto .emp-logo-img { max-width:38px; max-height:34px }
.emp-nombre {
  font-size:12.5px; font-weight:700; color:rgba(255,255,255,.86); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.logo { width:150px; display:block }
/* El isotipo reemplaza al logotipo cuando no hay ancho para las letras. El archivo es el del
   favicon, en violeta: sobre el fondo oscuro se pasa a blanco en vez de guardar otra copia. */
.logo-corto { width:26px; display:none; margin:0 auto; filter:brightness(0) invert(1) }
.compactar {
  margin-left:auto; width:28px; height:28px; flex:0 0 auto; display:inline-flex;
  align-items:center; justify-content:center; border:0; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.09); color:rgba(255,255,255,.75); transition:background .13s;
}
.compactar:hover { background:rgba(255,255,255,.18); color:#fff }
.compactar i { width:15px; height:15px; display:block }

/* Compacta: solo iconos, con el nombre en el título del enlace. */
.app.compacto .lateral { flex-basis:74px; width:74px; padding:18px 10px }
.app.compacto .logo { display:none }
.app.compacto .logo-corto { display:block }
.app.compacto .lateral-hd { flex-direction:column; gap:12px }
.app.compacto .compactar { margin-left:0 }
.app.compacto .nav-item { justify-content:center; padding:11px 0 }
.app.compacto .nav-item span, .app.compacto .nav-rotulo { display:none }
.app.compacto .looker-group .nav-item i:last-child { display:none }
.app.compacto .looker-menu { padding-left:0 }
.app.compacto .looker-menu a { justify-content:center; padding:9px 0 }
.app.compacto .looker-menu a span { display:none }
.app.compacto .lateral-pie { justify-content:center; padding:12px 0 2px }
.app.compacto .emp-nombre { display:none }

.cuerpo { flex:1; min-width:0; display:flex; flex-direction:column }
.lateral-fondo { display:none }
.menu-btn { display:none }
.topbar { background:var(--papel); box-shadow:var(--sombra); position:sticky; top:0; z-index:30 }
.topbar-main { display:flex; align-items:center; gap:18px; padding:12px 26px }
.page { padding:24px 26px 56px }
.page-hd { display:flex; align-items:flex-end; gap:18px; margin-bottom:20px }
.page-hd .txt { flex:1; min-width:0 }
.page-hd h1 { margin-top:5px }
.page-hd .sub { color:var(--humo); font-size:13.5px; margin-top:7px; line-height:1.6 }
.eyebrow {
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--lila);
}

/* ============ menú ============ */
/* La navegación es una columna: los grupos despliegan empujando, no tapando. */
.nav { display:flex; flex-direction:column; gap:2px }
/* Rótulo de sección, como el de las plantillas de tablero: ordena sin ocupar. */
.nav-rotulo {
  font-size:9.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  /* A 9,5 px, el 38 % de blanco quedaba en 3,3:1 sobre el fondo del menú (T120). */
  color:rgba(255,255,255,.58); padding:14px 12px 5px;
}
.nav-item {
  display:flex; align-items:center; gap:11px; width:100%; border:0; background:none;
  cursor:pointer; padding:9px 12px; border-radius:9px; font-size:13px; font-weight:600;
  color:rgba(255,255,255,.72); transition:background .13s, color .13s; text-decoration:none;
  text-align:left;
}
.nav-item:hover { background:rgba(255,255,255,.09); color:#fff }
.nav-item.on {
  background:var(--grad); color:#fff; font-weight:700;
  box-shadow:0 3px 12px color-mix(in srgb, var(--violeta) 45%, transparent);
}
.nav-item i { width:17px; height:17px; display:block; flex:0 0 auto }

.looker-group .nav-item i:last-child { margin-left:auto; transition:transform .15s }
.looker-group.open .nav-item i:last-child { transform:rotate(180deg) }
.looker-menu { display:none; padding:2px 0 6px 14px }
.looker-group.open .looker-menu { display:block }
.looker-menu a {
  display:flex; align-items:center; gap:11px; width:100%; border:0; background:none;
  text-align:left; padding:8px 11px; border-radius:var(--radio-sm); font-size:12.5px;
  font-weight:600; color:rgba(255,255,255,.62); cursor:pointer; text-decoration:none;
}
.looker-menu a:hover { background:rgba(255,255,255,.07); color:#fff }
.looker-menu a.on { color:#fff; background:rgba(255,255,255,.12) }
.looker-menu i { width:16px; height:16px; display:block; color:rgba(255,255,255,.45) }
.looker-menu a.on i { color:var(--lila) }

/* ============ chip de módulo ============ */
.chip-modulo {
  display:inline-flex; align-items:center; gap:7px; background:var(--tinte2); color:var(--violeta);
  border:0; border-radius:20px; padding:6px 12px; font-family:inherit; font-size:11.5px;
  font-weight:800; cursor:pointer; text-decoration:none;
}
.chip-modulo:hover { background:color-mix(in srgb, var(--violeta) 20%, #fff) }
.chip-modulo i { width:15px; height:15px; display:block }

/* ============ selector de módulo ============ */
.acceso-caja.ancha { max-width:860px }
.acceso-salir { margin-top:20px }
.mod-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; text-align:left;
}
.mod-card {
  border:1.5px solid var(--linea); border-radius:var(--radio); background:var(--papel);
  padding:18px 18px 16px; cursor:pointer; font-family:inherit; text-align:left; width:100%;
  transition:border-color .13s, box-shadow .13s, transform .13s;
}
.mod-card:hover { border-color:var(--violeta); box-shadow:var(--sombra-pri); transform:translateY(-2px) }
.mod-ico {
  width:40px; height:40px; border-radius:12px; background:var(--grad); color:#fff; display:flex;
  align-items:center; justify-content:center; margin-bottom:12px;
}
.mod-ico i { width:20px; height:20px; display:block }
.mod-card b { display:block; font-size:14.5px; margin-bottom:5px }
.mod-card p { font-size:12px; font-weight:500; color:var(--humo); line-height:1.6; margin-bottom:12px }
.mod-ir { display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; color:var(--violeta) }
.mod-nota {
  display:flex; gap:10px; align-items:flex-start; background:var(--tinte);
  border-radius:var(--radio-sm); padding:11px 13px; margin-top:16px; font-size:11.5px;
  font-weight:600; color:var(--tinta); line-height:1.6; text-align:left;
}
.mod-nota.tenue { background:var(--nube); color:var(--humo) }

.user { display:flex; align-items:center; gap:10px; position:relative; padding:4px 6px;
  border-radius:var(--radio-sm) }
.user .nm { font-size:13px; font-weight:700; line-height:1.25 }
.user .rl { font-size:11px; color:var(--humo); font-weight:600 }

/* ============ controles ============ */
.input {
  width:100%; border:1px solid var(--linea); border-radius:var(--radio-sm); padding:9px 11px;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--tinta);
  background:var(--papel); outline:none;
}
.input:focus { border-color:var(--lila); box-shadow:0 0 0 3px var(--anillo) }

/*
  El botón neutro lleva un borde con tinte de marca y una sombra leve (T91): sobre las
  tarjetas blancas, el borde gris solo se confundía con el fondo.
*/
.btn {
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid color-mix(in srgb, var(--violeta) 30%, var(--linea));
  background:var(--papel); color:var(--tinta); border-radius:var(--radio-sm); padding:9px 14px;
  font-size:13px; font-weight:700; cursor:pointer; transition:background .12s, box-shadow .12s;
  text-decoration:none; box-shadow:0 1px 3px color-mix(in srgb, var(--noche) 8%, transparent);
}
.btn:hover { background:var(--tinte2) }
.btn i { width:16px; height:16px; display:block }
.btn.btn-primary {
  background:var(--grad); border-color:transparent; color:#fff;
  box-shadow:0 3px 10px color-mix(in srgb, var(--violeta) 24%, transparent);
}
.btn.btn-primary:hover { filter:brightness(1.07) }
.btn:disabled { opacity:.45; cursor:not-allowed; filter:none }
.icon-btn {
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--linea); background:var(--papel); border-radius:var(--radio-sm);
  cursor:pointer; color:var(--humo);
}
.icon-btn:hover { background:var(--nube); color:var(--tinta) }

/* ============ avatares ============ */
.av {
  border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
  font-weight:800; flex:0 0 auto; letter-spacing:-.01em;
}
.av-24 { width:24px; height:24px; font-size:9px }
.av-32 { width:32px; height:32px; font-size:11px }
.av-38 { width:38px; height:38px; font-size:12.5px }
.av-56 { width:56px; height:56px; font-size:17px }
.av-96 { width:96px; height:96px; font-size:30px }
.av-0 { background:linear-gradient(140deg,var(--lila),var(--violeta)) }
.av-1 { background:linear-gradient(140deg,var(--violeta),var(--azul)) }
.av-2 { background:linear-gradient(140deg,color-mix(in srgb, var(--lila) 72%, #fff),var(--violeta)) }
.av-3 { background:linear-gradient(140deg,color-mix(in srgb, var(--lila) 55%, var(--azul)),var(--azul)) }
.av-4 { background:linear-gradient(140deg,var(--lila),color-mix(in srgb, var(--violeta) 72%, #000)) }
.av-foto {
  background-size:cover; background-position:50% 50%; color:transparent;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.10);
}
.av-editable { cursor:pointer; transition:box-shadow .15s; border:0; padding:0 }
.av-editable:hover { box-shadow:0 0 0 3px var(--anillo) }

/* ============ acceso ============ */
.acceso {
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px;
  background:linear-gradient(160deg,var(--tinte),var(--nube) 60%);
}
.acceso-caja {
  background:var(--papel); border-radius:18px; box-shadow:0 18px 50px rgba(27,27,34,.13);
  padding:34px 36px 28px; width:100%; max-width:420px; text-align:center;
}
.acceso-logo { width:150px; display:block; margin:0 auto 22px }
.acceso h1 { font-size:22px; margin-bottom:6px }
.acceso-sub { font-size:12.5px; font-weight:500; color:var(--humo); line-height:1.6; margin-bottom:22px }
.acceso-campo { display:block; text-align:left; margin-bottom:12px }

/* El ojo del campo de contraseña (T125): dentro del recuadro, contra el borde derecho. */
.campo-ojo { position:relative }
.campo-ojo .input { padding-right:40px }
.ojo {
  position:absolute; right:1px; top:1px; bottom:1px; width:38px;
  display:flex; align-items:center; justify-content:center;
  padding:0; border:0; background:none; cursor:pointer; color:var(--humo);
  border-radius:0 var(--radio-sm) var(--radio-sm) 0;
}
.ojo:hover { color:var(--violeta) }
.ojo:focus-visible { outline:2px solid var(--lila); outline-offset:-2px }
.ojo[hidden] { display:none }
.ojo .ojo-off, .ojo.abierto .ojo-on { display:none }
.ojo.abierto .ojo-off { display:block }
@media (max-width:880px) {
  .ojo { width:44px }
  .campo-ojo .input { padding-right:46px }
}
.acceso-btn { width:100%; justify-content:center; margin-top:6px }
.acceso-err {
  display:flex; align-items:center; gap:8px; margin-bottom:14px; padding:9px 11px; border-radius:10px;
  background:#FEF2F2; border:1px solid #FECACA; color:#B91C1C; font-size:12px; font-weight:700;
  text-align:left;
}
.acceso-err svg { flex:0 0 16px }

/* ============ modales ============ */
.overlay {
  position:fixed; inset:0; background:rgba(26,0,64,.42); display:none; align-items:center;
  justify-content:center; z-index:60; padding:24px;
}
.overlay.open { display:flex }
.modal {
  background:var(--papel); border-radius:var(--radio); width:100%; max-width:620px; max-height:86vh;
  overflow-y:auto; box-shadow:0 24px 60px rgba(26,0,64,.32);
}
.modal-hd { display:flex; align-items:center; gap:11px; padding:18px 22px; border-bottom:1px solid var(--linea) }
.modal-bd { padding:20px 22px }
.modal-foot { padding:16px 22px; border-top:1px solid var(--linea); display:flex; gap:9px; justify-content:flex-end }

/* ============ foto de perfil ============ */
.foto-caja { display:flex; gap:18px; align-items:flex-start }
.foto-acc { flex:1; min-width:0; display:grid; gap:10px }
.foto-acc .lectura { margin:0 }
.foto-file { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }
.foto-fila { display:flex; align-items:center; gap:10px }
.foto-fila .btn { cursor:pointer }
.foto-nom {
  font-size:11.5px; font-weight:700; color:var(--humo); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.foto-err { font-size:11.5px; font-weight:700; color:#B91C1C; min-height:14px }

/* ============ tarjetas ============ */
.card { background:var(--papel); border-radius:var(--radio); box-shadow:var(--sombra); padding:18px 20px }
.card-hd { display:flex; align-items:center; gap:12px; margin-bottom:14px }
.card-hd .der { margin-left:auto; display:flex; gap:8px; align-items:center }
.card-note { font-size:12px; color:var(--humo); font-weight:600 }
.col-card { background:var(--papel); border-radius:var(--radio); box-shadow:var(--sombra); padding:14px 16px }

.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start }
.grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:start }
/*
  Una fila de indicadores va toda al mismo alto (T115): con una tarjeta que lleva barra de
  avance y otras que no, la fila quedaba escalonada. Se resuelve acá y no vista por vista,
  igual que el icono a la par del número (T89): la regla mira si la grilla trae tarjetas de KPI.
*/
.grid-2:has(> .card > .kpi-ico),
.grid-3:has(> .card > .kpi-ico),
.grid-4:has(> .card > .kpi-ico) { align-items:stretch }
.stack { display:flex; flex-direction:column; gap:16px }
.stack-sm { display:flex; flex-direction:column; gap:9px }

/* ============ KPI ============ */
.kpi-ico {
  width:38px; height:38px; border-radius:var(--radio-sm); display:flex; align-items:center;
  justify-content:center; background:var(--tinte2); color:var(--violeta); margin-bottom:12px;
}
.kpi-ico i { width:20px; height:20px; display:block }
.kpi-ico.wa { background:#eaf6f1; color:var(--wa) }
.kpi-ico.mango { background:#fff1e6; color:#b3591c }
.kpi-ico.azul { background:#e8e8fa; color:var(--azul) }
.kpi-num { font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1 }
.kpi-num small { font-size:14px; font-weight:700; color:var(--humo); letter-spacing:0 }
.kpi-lbl { font-size:12px; color:var(--humo); font-weight:600; margin-top:8px; line-height:1.5 }

/*
  El icono va a la par del número, no encima (T89). Se resuelve acá y no vista por vista:
  el resto de la tarjeta (rótulo, barra, escala) sigue ocupando el ancho completo.
*/
.card:has(> .kpi-ico) {
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px;
  align-content:start; align-items:center;
}
.card:has(> .kpi-ico) > .kpi-ico { grid-area:1/1; margin-bottom:0 }
.card:has(> .kpi-ico) > .kpi-num { grid-area:1/2 }
.card:has(> .kpi-ico) > :not(.kpi-ico, .kpi-num) { grid-column:1/-1 }

.tag {
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
  border-radius:20px; padding:2px 9px; background:var(--tinte2); color:var(--violeta);
}
/*
  El texto de las pastillas es el que dice el diagnóstico ("se ve por debajo", "pocos datos"),
  y a 11 px en negrita necesita contraste de verdad (T120). Los tonos de los gráficos no
  sirven acá: sobre su propio fondo claro se quedan cerca de 3:1. Estos son los mismos
  colores llevados a la oscuridad que el texto pequeño pide.
*/
.tag-wa { background:#eaf6f1; color:#0e6b4c }
.tag-azul { background:#e8e8fa; color:var(--azul) }
.tag-mango { background:#fff1e6; color:#8c3f0c }

/* ============ filtros ============ */
.filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px }
.filters-lbl {
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--humo);
}
.chip {
  display:inline-block; text-decoration:none;
  border:1px solid var(--linea); background:var(--papel); border-radius:20px; padding:6px 13px;
  font-size:12.5px; font-weight:600; color:var(--humo); cursor:pointer;
}
.chip.on { background:var(--grad); border-color:transparent; color:#fff; font-weight:700 }

.select {
  appearance:none; border:1px solid var(--linea); background:var(--papel);
  border-radius:var(--radio-sm); padding:8px 30px 8px 11px; font-family:inherit; font-size:13px;
  font-weight:600; color:var(--tinta); cursor:pointer; outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236b6b76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 5 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.select:focus { border-color:var(--lila); box-shadow:0 0 0 3px var(--anillo) }

/* ============ tablas ============ */
/* Las tablas del prototipo son rejillas, no <table>: las columnas se declaran por pantalla. */
.tabla { display:flex; flex-direction:column }
.t-hd, .t-row { display:grid; align-items:center; gap:14px; padding:11px 12px }
.t-hd {
  font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--humo); border-bottom:1px solid var(--linea);
}
.t-row { border-bottom:1px solid var(--linea); font-size:13px }
.t-row:last-child { border-bottom:0 }
.t-row.click { cursor:pointer; border-radius:var(--radio-sm) }
.t-row.click:hover { background:var(--nube) }
.t-nm { font-weight:700 }
.t-mut { color:var(--humo); font-weight:600; font-size:12px }
.t-num { font-variant-numeric:tabular-nums; font-weight:800 }
.right { text-align:right; justify-self:end }

/* Una tabla ancha se desplaza sola, sin arrastrar la página entera con ella. */
.tabla-ancha { overflow-x:auto }
.tabla-ancha > .tabla { min-width:720px }

/* ============ pastillas de estado ============ */
/*
   Estos colores significan, y por eso NO se derivan de la marca del cliente: si cambiaran con
   ella, el mismo informe diría cosas distintas en cada empresa. Verde cumplido, naranja alerta,
   rojo riesgo, azul autoevaluación.
*/
.pill {
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  border-radius:20px; padding:4px 11px; white-space:nowrap;
}
.pill i { width:13px; height:13px; display:block }
.pill.env { background:#eaf6f1; color:var(--cumplido) }
.pill.pen { background:#fff1e6; color:var(--alerta-texto) }
.pill.err { background:#fbeaea; color:var(--riesgo) }
.pill.dlv { background:#f0f0f3; color:var(--humo) }

.ciclo-tag {
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
  border-radius:20px; padding:3px 10px;
}
.ciclo-tag.actual { background:var(--grad); color:#fff }
.ciclo-tag.hist { background:#f0f0f3; color:var(--humo) }
.ciclo-tag.prox { background:#e8e8fa; color:var(--autoevaluacion) }

/* ============ listas ============ */
.lista-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radio-sm);
  cursor:pointer;
}
.lista-item:hover { background:var(--nube) }
.lista-item.on {
  background:var(--tinte2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--violeta) 22%, transparent);
}
.log-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--linea) }
.log-item:last-child { border-bottom:0 }

.persona { display:flex; align-items:center; gap:11px; min-width:0 }
.persona .nm {
  font-weight:700; font-size:13px; line-height:1.3; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}
.persona .pu {
  font-size:11.5px; color:var(--humo); font-weight:600; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}

/* ============ barras ============ */
.bar { height:7px; border-radius:4px; background:#ececed; overflow:hidden }
.bar span { display:block; height:100%; border-radius:4px; background:var(--grad) }
.bar span.warn { background:var(--alerta) }

/* ============ banner ============ */
.banner {
  display:flex; align-items:center; gap:20px; background:var(--papel); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:16px 22px; margin-bottom:16px;
}
.banner-lbl {
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--humo);
}
.banner-val { font-size:14px; font-weight:700; margin-top:3px }
.vsep { width:1px; align-self:stretch; background:var(--linea) }

/* ============ avisos ============ */
.nota {
  border-radius:var(--radio-sm); padding:12px 14px; font-size:12.5px; font-weight:600;
  line-height:1.6; display:flex; gap:10px; align-items:flex-start;
}
.nota i { width:17px; height:17px; display:block; flex:0 0 17px; margin-top:1px }
.nota.lila { background:var(--tinte2); color:#4b0096 }
.nota.mango { background:#fff1e6; color:#8a4a12 }
.nota.verde { background:#eaf6f1; color:#116b4d }

.vacio { text-align:center; padding:44px 20px; color:var(--humo); font-size:13px; font-weight:600 }
.hint { font-size:11.5px; color:var(--humo); font-weight:600 }
.mono {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; background:var(--nube);
  border-radius:5px; padding:1px 6px; color:var(--azul); font-weight:600;
}


/* ============ pantallas angostas ============ */
/*
   El prototipo es de escritorio y fija el ancho en 1280 px. Acá no: el plan pide que en ventana
   angosta nada se salga ni aparezca barra horizontal. Lo que se desborda —una tabla ancha— se
   desplaza dentro de su propia caja, nunca arrastrando la página entera.
*/
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (max-width: 900px) {
  .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)) }

  /* En pantalla angosta la barra lateral se esconde y sale por encima con el botón. */
  .lateral {
    position:fixed; left:0; top:0; transform:translateX(-100%);
    transition:transform .18s; box-shadow:0 8px 28px rgba(27,27,34,.24);
  }
  .app.menu-abierto .lateral { transform:none }

  /*
    El modo compacto no rige acá: la barra ya está escondida, así que angostarla no gana ancho
    y solo deja iconos sin nombre. Se muestra entera aunque venga recordado del escritorio.
  */
  .app.compacto .lateral { flex-basis:236px; width:236px; padding:18px 12px }
  .app.compacto .logo { display:block }
  .app.compacto .logo-corto, .compactar { display:none }
  .app.compacto .lateral-hd { flex-direction:row }
  .app.compacto .nav-item, .app.compacto .looker-menu a { justify-content:flex-start }
  .app.compacto .nav-item { padding:9px 12px }
  .app.compacto .looker-menu a { padding:8px 11px }
  .app.compacto .nav-item span, .app.compacto .looker-menu a span,
  .app.compacto .nav-rotulo { display:inline }
  .app.compacto .looker-group .nav-item i:last-child { display:block }
  .app.compacto .looker-menu { padding-left:14px }
  /* el fondo es hermano de .app, no hijo: el selector va por adyacencia */
  .app.menu-abierto + .lateral-fondo {
    display:block; position:fixed; inset:0; background:rgba(27,27,34,.35); z-index:34;
  }
  .menu-btn {
    display:flex; align-items:center; justify-content:center; border:0; cursor:pointer;
    background:var(--nube); border-radius:10px; width:38px; height:38px; flex:0 0 38px;
  }
  .menu-btn i { width:18px; height:18px; display:block }
}

@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns:minmax(0,1fr) }
  .topbar-main { flex-wrap:wrap; gap:12px; padding:12px 16px }
  .logo { width:140px }
  .page { padding:20px 16px 40px }
  .page-hd { flex-direction:column; align-items:flex-start; gap:12px }
  .acceso-caja { padding:26px 20px 22px }
  .banner { flex-wrap:wrap; gap:14px }
  .vsep { display:none }
  h1 { font-size:22px }
}

/* ============ empresas del sistema ============ */
.em-cab, .em-fila {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(140px,1fr) 78px 106px 68px 190px 150px;
  gap:12px; align-items:center;
}
.em-tabla { min-width:940px }
.em-cab {
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--humo);
  padding-bottom:9px; border-bottom:1px solid var(--linea); margin-bottom:2px;
}
.em-cab .c { text-align:center }
.em-fila { padding:10px 0; border-bottom:1px solid var(--linea) }
.em-fila:last-of-type { border-bottom:0 }
.em-fila .lb { display:flex; align-items:center; gap:11px; min-width:0 }
.em-fila .lb b { display:block; font-size:13px; font-weight:700 }
.em-fila .lb small { display:block; font-size:11px; color:var(--humo); font-weight:600 }
.em-fila .c { text-align:center; font-variant-numeric:tabular-nums }
.em-ini {
  width:38px; height:38px; border-radius:11px; color:#fff; font-size:13px; font-weight:800;
  flex:0 0 38px; display:flex; align-items:center; justify-content:center;
}
.em-acc { display:flex; gap:6px; align-items:center; justify-content:flex-end }
.em-mods { display:flex; align-items:center; gap:5px }
.em-mod {
  width:26px; height:26px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; background:var(--nube); color:var(--gris);
  box-shadow:inset 0 0 0 1px var(--linea);
}
.em-mod.on { background:var(--tinte2); color:var(--violeta); box-shadow:none }
.em-mod i { width:14px; height:14px; display:block }
.em-color { width:14px; height:14px; border-radius:5px; display:block; margin-left:4px }

.btn-xs { padding:5px 10px; font-size:11.5px; border-radius:var(--radio-sm) }
.btn-sm { padding:7px 12px; font-size:12.5px }

/* casillas de módulos contratados */
.mod-check { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px }
.comp-box {
  display:flex; align-items:center; gap:8px; border:1.5px solid var(--linea);
  border-radius:var(--radio-sm); padding:9px 11px; cursor:pointer; font-size:12px;
  font-weight:600; transition:border-color .12s, background .12s;
}
.comp-box:hover { border-color:var(--lila) }
.comp-box.on { border-color:var(--violeta); background:var(--tinte) }
.mod-check .comp-box i { width:15px; height:15px; display:block; color:var(--violeta) }

.form-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form-2 .ancho { grid-column:1/-1 }

/* chip del cliente que se está administrando */
.chip-cliente {
  display:inline-flex; align-items:center; gap:8px; background:var(--nube); color:var(--tinta);
  border:1px solid var(--linea); border-radius:20px; padding:6px 12px; font-family:inherit;
  font-size:11.5px; font-weight:800; cursor:pointer;
}
.chip-cliente:hover { background:var(--tinte) }
.chip-color { width:11px; height:11px; border-radius:4px; display:block }

@media (max-width: 720px) {
  .form-2 { grid-template-columns:minmax(0,1fr) }
}

/* ============ padrón de personas ============ */
.pe-cab, .pe-fila {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(100px,.8fr) minmax(140px,1fr) minmax(140px,1fr) 90px 260px;
  gap:12px; align-items:center;
}
.pe-tabla { min-width:1020px }
.pe-cab {
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--humo);
  padding-bottom:9px; border-bottom:1px solid var(--linea); margin-bottom:2px;
}
.pe-cab .c { text-align:center }
.pe-fila { padding:10px 0; border-bottom:1px solid var(--linea) }
.pe-fila:last-of-type { border-bottom:0 }
.pe-fila .c { text-align:center }
.pe-cel { font-size:12.5px; font-weight:700 }
.pe-acc { display:flex; gap:6px; align-items:center; justify-content:flex-end }

.buscador { display:flex; gap:8px; align-items:center }
.buscador .input { width:220px }
.input.sm { padding:6px 9px; font-size:12.5px }

/* jefaturas: la primera es la de línea, y el orden se ve */
.jf-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px }
.jf-chip {
  display:inline-flex; align-items:center; gap:7px; background:var(--nube);
  border:1px solid var(--linea); border-radius:20px; padding:4px 6px 4px 11px; font-size:12px;
}
.jf-chip b { font-weight:700 }
.jf-tipo {
  font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--humo);
}
.jf-x {
  border:0; background:none; cursor:pointer; color:var(--humo); font-size:15px; line-height:1;
  padding:0 4px;
}
.jf-x:hover { color:var(--riesgo) }
.jf-vacio {
  font-size:11.5px; font-weight:600; color:var(--humo); background:var(--nube);
  border-radius:var(--radio-sm); padding:9px 11px; margin-bottom:8px;
}
.jf-alta { display:flex; gap:8px; align-items:center }

/* ============ acordeón de competencias ============ */
.comp {
  background:var(--papel); border-radius:var(--radio); box-shadow:var(--sombra);
  margin-bottom:12px; overflow:hidden;
}
.comp-hd { display:flex; align-items:center; gap:13px; padding:15px 18px; cursor:pointer }
.comp-hd:hover { background:var(--nube) }
.comp-hd .fl { width:16px; height:16px; flex:0 0 16px; color:var(--humo); transition:transform .16s }
.comp.abierta .comp-hd .fl { transform:rotate(90deg) }
.comp-bd { display:none; padding:0 18px 16px; border-top:1px solid var(--linea) }
.comp.abierta .comp-bd { display:block }

.beh { background:var(--nube); border-radius:var(--radio-sm); padding:14px 16px; margin-top:12px }
.beh-hd { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap }
.beh-hd .txt { flex:1; min-width:260px; font-size:13px; font-weight:700 }
.escala { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:12px }
.nivel { background:var(--papel); border-radius:var(--radio-sm); padding:10px 11px }
.nivel .n { display:flex; align-items:center; justify-content:space-between; gap:6px }
.nivel .n b { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em }
.nivel .n span {
  font-size:10.5px; font-weight:800; color:var(--violeta); font-variant-numeric:tabular-nums;
}
.nivel .d { font-size:11.5px; color:var(--humo); margin-top:6px; font-weight:500; line-height:1.5 }

.escala-fila { display:grid; grid-template-columns:160px 1fr 82px; gap:12px; align-items:center }

/* ============ matriz de niveles ============ */
/* Filas: nivel de rol. Columnas: nivel de contribución. Sin comportamientos, a propósito. */
.matriz-t {
  width:100%; border-collapse:separate; border-spacing:8px; min-width:1080px; table-layout:fixed;
}
.matriz-t th { padding:0; vertical-align:middle }
.matriz-t td { padding:0 }
.matriz-t thead th {
  background:#eef2fb; border-radius:var(--radio-sm); padding:12px 14px; text-align:center;
}
.matriz-t thead th .ch { font-size:13px; font-weight:800; color:var(--tinta); line-height:1.3 }
.matriz-t thead th .cd {
  font-size:10.5px; font-weight:600; color:var(--humo); line-height:1.45; margin-top:5px;
}
.matriz-t th.esq { background:var(--noche); border-radius:var(--radio-sm); width:190px }
.matriz-t th.esq .diag { display:flex; flex-direction:column; gap:8px; padding:12px 14px; text-align:left }
.matriz-t th.esq .a { font-size:10px; font-weight:800; color:#fff; text-align:right; font-style:italic }
.matriz-t th.esq .b { font-size:10px; font-weight:800; color:#fff; font-style:italic }
.matriz-t th.rh {
  background:var(--noche); border-radius:var(--radio-sm); color:#fff; padding:14px;
  text-align:left; width:190px;
}
.matriz-t th.rh .nm { font-size:12.5px; font-weight:800; line-height:1.35 }
.matriz-t th.rh .sg {
  font-size:11px; font-weight:700; margin-top:5px;
  color:color-mix(in srgb, var(--lila) 70%, #fff);
}

.mcelda {
  background:var(--papel); box-shadow:inset 0 0 0 1px var(--linea); border-radius:var(--radio-sm);
  padding:11px 12px; height:100%; min-height:96px; cursor:pointer; display:flex;
  flex-direction:column; gap:8px; transition:box-shadow .12s;
}
.mcelda:hover { box-shadow:inset 0 0 0 1.5px var(--violeta), 0 2px 10px rgba(27,27,34,.08) }
.mcelda .lista { display:flex; flex-direction:column; gap:3px }
.mcelda .ci { display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; line-height:1.4 }
.mcelda .ci span { flex:1; min-width:0 }
/* El aviso de que esa competencia no tiene conducta escrita para esta celda. */
.mcelda .ci i {
  font-style:normal; font-size:10px; font-weight:800; color:#fff; background:var(--alerta);
  border-radius:50%; width:14px; height:14px; display:flex; align-items:center;
  justify-content:center; flex:0 0 14px;
}
.mcelda .pie {
  margin-top:auto; font-size:10px; font-weight:700; color:var(--humo); padding-top:4px;
  border-top:1px solid var(--linea);
}
.mcelda.vacia {
  background:var(--nube); box-shadow:none; align-items:center; justify-content:center;
  text-align:center; color:var(--gris);
}
.mcelda.vacia:hover { box-shadow:inset 0 0 0 1.5px var(--lila) }
.mcelda.vacia .mas { font-size:20px; font-weight:800 }
.mcelda.vacia .ct { font-size:10.5px; font-weight:600; margin-top:2px }

.comp-box .nm { flex:1; min-width:0 }

@media (max-width: 900px) {
  .escala { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .escala-fila { grid-template-columns:1fr; gap:6px }
}

/* ============ competencias por persona ============ */
.asignacion { display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start }
.asignacion .lista-item { text-decoration:none; color:inherit }
.asignacion .lista-item .nm { font-weight:700; font-size:13px }

.num-pill {
  width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:var(--tinte2); color:var(--violeta); font-size:11px;
  font-weight:800;
}

.asig-comp { padding:14px 0; border-bottom:1px solid var(--linea) }
.asig-comp:last-of-type { border-bottom:0 }
.asig-hd { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.asig-beh {
  display:grid; grid-template-columns:1fr 230px 150px; gap:14px; align-items:center;
  margin-top:12px; padding-left:32px;
}
.asig-beh .txt { font-size:12.5px; font-weight:600 }
.asig-meta .field-lbl { margin-bottom:4px }
.select.sm { padding:6px 28px 6px 10px; font-size:12.5px }

@media (max-width: 1100px) {
  .asignacion { grid-template-columns:minmax(0,1fr) }
}
@media (max-width: 760px) {
  .asig-beh { grid-template-columns:minmax(0,1fr); padding-left:0 }
}

/* ============ reglas de medición ============ */
.opt {
  display:block; width:100%; height:100%; text-align:left; background:var(--papel);
  border:1.5px solid var(--linea); border-radius:var(--radio-sm); padding:11px 13px;
  cursor:pointer; transition:border-color .12s, background .12s; font-family:inherit;
}
.opt:hover { border-color:var(--lila) }
.opt.sel {
  border-color:var(--violeta); background:var(--tinte);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--violeta) 9%, transparent);
}
.opt .n { display:flex; align-items:center; gap:8px }
.opt .rd {
  width:15px; height:15px; border-radius:50%; border:2px solid var(--gris); flex:0 0 15px;
  position:relative;
}
.opt.sel .rd { border-color:var(--violeta) }
.opt.sel .rd:after {
  content:""; position:absolute; inset:2.5px; border-radius:50%; background:var(--violeta);
}
.opt .n b { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em }
.opt .n span {
  margin-left:auto; font-size:10.5px; font-weight:800; color:var(--humo);
  font-variant-numeric:tabular-nums;
}
.opt.sel .n span { color:var(--violeta) }
/* la descripción alineada con el título, no con el círculo */
.opt .d {
  display:block; font-size:12px; font-weight:500; color:var(--humo); line-height:1.6;
  margin-top:6px; padding-left:23px;
}

.peso-fila {
  display:grid; grid-template-columns:1fr 110px; gap:12px; align-items:center; padding:9px 0;
  border-bottom:1px solid var(--linea); font-size:13px; font-weight:600;
}
.peso-campo { display:flex; align-items:center; gap:6px }
.peso-campo .input { text-align:right }

.form-foot { display:flex; gap:9px; justify-content:flex-end; margin-top:18px }

/* ============ ciclos ============ */
.ci-tabla { min-width:900px }
.ci-fila { grid-template-columns:2fr 1.3fr 90px 1.2fr 300px }
.ci-acc { display:flex; gap:6px; align-items:center; justify-content:flex-end; flex-wrap:wrap }

/* selector de ciclo de la barra superior */

/* ============ evaluadores ============ */
.ev-cab, .ev-fila {
  display:grid; grid-template-columns:minmax(0,1.6fr) 150px 130px 70px; gap:12px; align-items:center;
}
.ev-cab {
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--humo);
  padding-bottom:9px; border-bottom:1px solid var(--linea); margin-bottom:2px;
}
.ev-fila { padding:8px 0; border-bottom:1px solid var(--linea) }
.ev-fila:last-of-type { border-bottom:0 }

.ev-sugs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.ev-grupo { border:1px solid var(--linea); border-radius:var(--radio-sm); padding:11px 12px }
.ev-tit {
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--humo);
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.ev-sug { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--linea) }
.ev-sug:last-child { border-bottom:0 }
.ev-sug .persona { flex:1; min-width:0 }
.ev-vacio { font-size:11.5px; font-weight:600; color:var(--gris); padding:6px 0 }
@media (max-width:1180px) { .ev-sugs { grid-template-columns:1fr } }

.ev-alta { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(150px,.8fr) auto; gap:12px; align-items:end }
.ev-alta .field-lbl { margin-bottom:5px }

/* ============ mapa consolidado de evaluadores ============ */
.me-tabla { display:grid; gap:2px; align-items:end; min-width:640px }
.me-esq {
  font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--humo);
  align-self:end; padding-bottom:6px;
}
.me-vert { height:120px; display:flex; align-items:flex-end; justify-content:center }
.me-vert span {
  writing-mode:vertical-rl; transform:rotate(180deg); font-size:10px; font-weight:700; color:var(--humo);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-height:116px;
}
.me-vert.tot span { color:var(--tinta); font-weight:800 }
.me-lb { display:flex; align-items:center; gap:8px; min-width:0; padding-right:10px; font-size:12px; height:30px }
.me-lb b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.me-lb.pie {
  font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--humo);
  padding-top:6px;
}
.me-c {
  height:30px; border-radius:5px; display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:800;
}
.me-c.vacia { background:var(--nube) }
/* el color dice en qué estado está el formulario; la letra, con qué relación entra esa mirada */
.me-c.pen, .sw.me-pen { background:#f0f0f3; color:#8a8a95 }
.me-c.pro, .sw.me-pro { background:#fff2e6; color:#c2610a }
.me-c.fin, .sw.me-fin { background:#eaf6f1; color:var(--wa) }
.sw.me-pen { box-shadow:inset 0 0 0 1px var(--linea) }
.me-tot {
  height:30px; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800;
  font-variant-numeric:tabular-nums; background:var(--nube); border-radius:5px;
}
.me-tot.col { margin-top:6px }
.me-tot.col.alto { background:#fdecec; color:var(--rojo) }

/* carga por evaluador */
.ca-fila {
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(70px,1fr) 108px; gap:12px; align-items:center;
  padding:6px 0; border-bottom:1px solid var(--linea);
}
.ca-fila:last-of-type { border-bottom:0 }
.ca-pista { height:8px; background:var(--papel); border-radius:4px; overflow:hidden; position:relative }
.ca-pista span { position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--violeta) }
.ca-pista span.alto { background:var(--rojo) }
.ca-fila .c { text-align:right; font-size:12px; font-variant-numeric:tabular-nums }
.ck { margin-bottom:8px }

.sub-card { border:1px solid var(--linea); border-radius:var(--radio); padding:16px 18px }
.leyenda {
  display:flex; gap:18px; flex-wrap:wrap; font-size:11.5px; color:var(--humo); font-weight:600; margin-top:10px;
}
.leyenda span { display:flex; align-items:center; gap:7px }
.sw { width:13px; height:13px; border-radius:3px; background:var(--grad); flex:0 0 13px }

/*
  Distribución de calificaciones (T128): la cifra de concentración, una figura por persona y el
  histograma. La rampa sale del color de la empresa, igual que el mapa de calor, así que los
  seis tramos se leen como más oscuro = más alto.
*/
.fig-1 { --tono:color-mix(in srgb, var(--violeta) 34%, #fff) }
.fig-2 { --tono:color-mix(in srgb, var(--violeta) 47%, #fff) }
.fig-3 { --tono:color-mix(in srgb, var(--violeta) 60%, #fff) }
.fig-4 { --tono:color-mix(in srgb, var(--violeta) 73%, #fff) }
.fig-5 { --tono:color-mix(in srgb, var(--violeta) 86%, #fff) }
.fig-6 { --tono:var(--violeta) }

.dist-hd { text-align:center; margin:6px 0 18px }
.dist-cifra {
  font-size:40px; font-weight:800; line-height:1.1; color:var(--violeta);
  font-variant-numeric:tabular-nums;
}
.dist-pie { font-size:12.5px; font-weight:600; color:var(--humo); margin-top:4px }

.dist-gente { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:16px }
.dist-gente .fig { width:26px; height:26px; color:var(--tono) }
.dist-gente .fig svg { width:100%; height:100% }

.leyenda .sw.fig { background:var(--tono) }
.dist-leyenda { justify-content:center; margin-bottom:18px }

.dist-tramos { display:grid; grid-template-columns:repeat(6, 1fr); gap:10px }
.dt { text-align:center }
.dt-lb { font-size:11px; font-weight:700; color:var(--humo); margin-bottom:6px }
.dt .bar { background:var(--linea) }
.dt .bar span.fig { background:var(--tono) }
.dt-n { font-size:16px; font-weight:800; margin-top:7px; font-variant-numeric:tabular-nums }
.dt-p { font-size:11px; font-weight:600; color:var(--humo); font-variant-numeric:tabular-nums }

/* En el teléfono los seis tramos no entran de a uno: van de a tres. */
@media (max-width:720px) {
  .dist-tramos { grid-template-columns:repeat(3, 1fr) }
  .dist-cifra { font-size:32px }
}

/* ============ formulario de evaluación ============ */
.ev-bandeja { grid-template-columns:1.7fr 130px 1.2fr 140px 110px }

.pregunta { padding:6px 0 18px }
.pregunta-hd { display:flex; gap:12px; align-items:baseline; margin-bottom:11px }
.pregunta-hd .tx { font-size:13.5px; font-weight:700; flex:1 }

.opt:disabled { cursor:default; opacity:.75 }
.opt:disabled:hover { border-color:var(--linea) }
.opt.sel:disabled { opacity:1 }
.opt.sel:disabled:hover { border-color:var(--violeta) }

/* ============ informe individual ============ */
.ctrl { display:flex; flex-direction:column; gap:3px }
.ctrl .field-lbl { margin:0 }
.sep { height:1px; background:var(--linea); margin:16px 0 }
.leyenda .fuerte { font-weight:800; color:var(--tinta) }

/* el color de cada categoría de competencia, para el punto que la identifica */
.pt { width:8px; height:8px; border-radius:50%; flex:0 0 8px; display:inline-block }
.cat-RES { background:#c2610a } .cat-EST { background:#1b3f8f } .cat-INT { background:#1f7a4d }
.cat-ADA { background:#3f7fd0 } .cat-TEC { background:#6e00db }

/* el color de cada fuente, el mismo en todo el informe */
.f-AUT { background:var(--azul) }
.f-JEF { background:var(--violeta) }
.f-PAR { background:var(--lila) }
.f-REP { background:color-mix(in srgb, var(--lila) 55%, #fff) }
.f-norma { background:var(--gris) }
.f-ENT { background:var(--violeta) }
.sw.hueca { background:transparent; border:2px dashed; box-sizing:border-box }
.bar span.auto { background:var(--azul) }

/* gap percibido */
.gap-escala {
  position:relative; height:6px; border-radius:3px; margin-top:12px;
  background:linear-gradient(90deg,#eaf6f1,#ececed 50%,#fff1e6);
}
.gap-escala .mk {
  position:absolute; top:-3px; width:3px; height:12px; border-radius:2px; background:var(--tinta);
}
.gap-lbls {
  display:flex; justify-content:space-between; font-size:9px; font-weight:700; color:var(--humo);
  margin-top:5px; letter-spacing:.04em;
}
.fuentes { display:flex; gap:12px; margin-top:10px; font-size:11px; font-weight:600; color:var(--humo) }
.fuentes b { font-weight:800; color:var(--tinta); margin-right:3px }

/* las dos arañas, lado a lado */
.aranas { align-items:stretch }
.aranas > .card { display:flex; flex-direction:column; margin-bottom:0 }
.aranas .card-hd { flex-wrap:wrap; align-items:flex-start; gap:6px; margin-bottom:8px }
.aranas .card-hd h2 { flex:1 0 100% }
.aranas .leyenda { margin-top:4px }
.aranas .nota { margin-top:auto }
@media screen and (max-width:1180px) { .aranas { grid-template-columns:1fr } }

/* mapa de calor */
.mc { overflow:hidden }
.mc-tabla { min-width:840px }
.mc-cab, .mc-fila { display:grid; gap:3px; align-items:center }
.mc-cab {
  font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--humo);
  padding-bottom:8px; margin-bottom:3px; border-bottom:1px solid var(--linea);
}
.mc-cab .c { text-align:center; line-height:1.25 }
.mc-cab .c.ref { color:var(--tinta) }
.mc-fila { margin-bottom:3px }
.mc-pie { margin-top:8px; padding-top:9px; border-top:1px solid var(--linea) }
.mc-pie .mc-lb {
  color:var(--humo); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:800;
}
.mc-lb {
  display:flex; align-items:center; gap:8px; min-width:0; padding-right:12px; font-size:12.5px;
  font-weight:600;
}
.mc-lb .mc-nm { min-width:0; line-height:1.25 }
.mc-lb b { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mc-lb small {
  display:block; font-size:10px; font-weight:600; color:var(--humo); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.mc-c {
  height:38px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums;
}
.mc-c.na { background:#f4f4f7; color:var(--gris); font-weight:600; box-shadow:inset 0 0 0 1px var(--linea) }
.mc-ref {
  height:38px; display:flex; align-items:center; justify-content:center; font-size:12.5px;
  font-weight:700; color:var(--humo); font-variant-numeric:tabular-nums; background:var(--nube);
  border-radius:6px;
}
.mc-ref.total { font-weight:800; color:var(--tinta) }
.mc-dif {
  height:38px; display:flex; align-items:center; justify-content:center; font-size:12px;
  font-weight:800; font-variant-numeric:tabular-nums;
}
.mc-dif.pos { color:var(--wa) } .mc-dif.neg { color:var(--mango) }
.mc-dif.na { color:var(--gris); font-weight:600 }

/*
  La rampa del mapa de calor sale de la marca del cliente, así que cambia sola cuando cambia el
  color de la empresa. Los tres tramos altos llevan tinta blanca porque el color ya es oscuro.
*/
.calor-1 { background:color-mix(in srgb, var(--violeta) 10%, #fff); color:var(--tinta) }
.calor-2 { background:color-mix(in srgb, var(--violeta) 26%, #fff); color:var(--tinta) }
.calor-3 { background:color-mix(in srgb, var(--violeta) 44%, #fff); color:var(--tinta) }
.calor-4 { background:color-mix(in srgb, var(--violeta) 62%, #fff); color:#fff }
.calor-5 { background:color-mix(in srgb, var(--violeta) 82%, #fff); color:#fff }
.calor-6 { background:var(--violeta); color:#fff }
.sw.vacia { background:#f4f4f7; box-shadow:inset 0 0 0 1px var(--linea) }

/* competencia por competencia: línea con punto, no barra desde cero */
.cv-comp { border:1px solid var(--linea); border-radius:var(--radio); padding:14px 16px; margin-bottom:10px }
.cv-comp summary { list-style:none; cursor:pointer }
.cv-comp summary::-webkit-details-marker { display:none }
.cv-hd { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; flex-wrap:wrap }
.cv-hd .pt { margin-top:5px; width:9px; height:9px; flex:0 0 9px }
.cv-nm { font-size:13.5px; font-weight:800 }
.cv-ds { font-size:11.5px; color:var(--humo); font-weight:500; margin-top:3px; line-height:1.5 }
.cv-fila { display:grid; grid-template-columns:132px 1fr 44px; gap:12px; align-items:center; padding:4px 0 }
.cv-lb { font-size:11px; font-weight:700; color:var(--humo) }
.cv-vl { font-size:12.5px; font-weight:800; text-align:right; font-variant-numeric:tabular-nums }
.cv-fila .pop { position:relative; height:16px }
.cv-fila .pop:before {
  content:""; position:absolute; left:0; right:0; top:7.5px; height:1px; background:#f0f0f3;
  border-radius:1px;
}
.cv-fila .pop .tramo { position:absolute; left:0; top:7px; height:2px; border-radius:1px; opacity:.34 }
.cv-fila .pop .p {
  position:absolute; top:2px; width:12px; height:12px; border-radius:50%;
  box-shadow:0 0 0 2px var(--papel);
}
.cv-fila .pop .meta {
  position:absolute; top:0; bottom:0; width:1.5px; background:var(--tinta); opacity:.26; border-radius:1px;
}
.cv-fila .pop .sin {
  position:absolute; left:0; top:1px; font-size:10.5px; font-weight:600; color:var(--gris);
  background:var(--papel); padding-right:8px;
}
.cv-fila.vacia .cv-lb, .cv-fila.vacia .cv-vl { color:var(--gris) }
.cv-fila .p.f-norma { border-radius:2px; transform:rotate(45deg); width:10px; height:10px; top:3px }
.cv-mas {
  margin-top:10px; padding:6px 0; font-size:10.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--violeta); display:flex; align-items:center; gap:6px;
}
.cv-mas i { width:13px; height:13px; transition:transform .16s }
.cv-comp[open] .cv-mas i { transform:rotate(90deg) }
.cv-det { border-top:1px solid var(--linea); padding-top:10px; margin-top:4px }

/* detalle de comportamiento: qué dijo cada fuente, ya promediada */
.bd { border-top:1px solid var(--linea); padding:12px 0 4px }
.bd:first-of-type { border-top:0; padding-top:4px }
.bd-txt { font-size:12.5px; font-weight:700; margin-bottom:9px }
.bd-fuentes { display:flex; flex-direction:column; gap:2px }
.bd-f { display:flex; align-items:center; gap:8px; font-size:11.5px; padding:3px 0 }
.bd-f.no .pt {
  background:repeating-linear-gradient(45deg,#e0e0e6,#e0e0e6 2px,#f4f4f7 2px,#f4f4f7 4px);
}
.bd-f .fn { font-weight:700; color:var(--humo); flex:0 0 140px }
.bd-f .fn em { font-style:normal; font-weight:600; color:var(--gris) }
.bd-f .niv { flex:1; font-weight:600; color:var(--tinta) }
.bd-f.no .niv { color:var(--humo); font-weight:500 }
.bd-f .pts {
  font-weight:800; font-variant-numeric:tabular-nums; min-width:26px; text-align:right; margin-left:auto;
}
.bd-f.no .pts { color:var(--gris) }
.bd-pie {
  display:flex; gap:18px; flex-wrap:wrap; margin-top:10px; padding-top:8px;
  border-top:1px dashed var(--linea); font-size:11px; color:var(--humo); font-weight:600;
}
.bd-pie b { color:var(--tinta); font-weight:800 }
.bd-dist { display:flex; align-items:center; gap:10px; margin-top:9px }
.bd-dist .lb {
  font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--humo);
}
.bd-dist .dist { flex:1; max-width:320px }
.dist { display:flex; gap:2px; height:18px; border-radius:4px; overflow:hidden }
.dist span {
  display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:800;
  color:#fff; min-width:14px;
}
.dist .d1 { background:var(--rojo) } .dist .d2 { background:var(--mango) }
.dist .d3 { background:var(--lila) } .dist .d4 { background:var(--wa) }

/* brecha de percepción: tablero por tipo de acción */
.bp-escala {
  display:flex; align-items:center; gap:10px; font-size:10px; font-weight:800; color:var(--humo);
  margin-bottom:12px;
}
.bp-escala .ln { flex:1; height:1px; background:var(--linea) }
.bp-escala .lg {
  display:flex; align-items:center; gap:5px; font-weight:700; text-transform:none; letter-spacing:0;
}
.bp-escala .mk {
  width:2px; height:11px; background:var(--tinta); opacity:.6; margin-left:12px; margin-right:1px;
}
.bp-tablero { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.bp-zona {
  border:1px solid var(--linea); border-radius:var(--radio); padding:12px 13px;
  border-top:3px solid var(--zc); background:var(--papel);
}
.bp-zona.z-ALTA { --zc:#c2610a } .bp-zona.z-SOBRE { --zc:#a1741f }
.bp-zona.z-ORO { --zc:var(--wa) } .bp-zona.z-SUB { --zc:#5c5c8a }
.bp-zona .z-hd { display:flex; align-items:center; gap:8px; color:var(--zc) }
.bp-zona .z-hd i { width:16px; height:16px; display:block }
.bp-zona .z-hd b { font-size:13px; font-weight:800 }
.bp-zona .z-hd .cnt {
  margin-left:auto; font-size:11px; font-weight:800; background:var(--nube); color:var(--humo);
  border-radius:20px; padding:1px 9px;
}
.bp-zona .z-ds { font-size:11px; font-weight:600; color:var(--humo); line-height:1.5; margin:5px 0 10px }
.bp-zona .z-vacia { font-size:11.5px; font-weight:600; color:var(--gris); padding:10px 0 4px }
.bp-it { border-top:1px solid var(--linea); padding:9px 0 8px }
.bp-it .t { display:flex; align-items:center; gap:7px }
.bp-it .t b {
  font-size:12.5px; font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.bp-it .t .dif { font-size:12px; font-weight:800; color:var(--zc); font-variant-numeric:tabular-nums }
.bp-it .v {
  display:flex; align-items:center; gap:12px; margin-top:5px; font-size:10.5px; font-weight:700;
  color:var(--humo);
}
.bp-it .v span { display:flex; align-items:center; gap:5px }
.bp-it .v .nv { margin-left:auto; color:var(--tinta) }
.bp-pista { position:relative; height:20px; background:var(--nube); border-radius:5px; margin-top:7px }
.bp-pista .tramo {
  position:absolute; top:8px; height:4px; border-radius:2px; min-width:2px; background:var(--zc);
}
.bp-pista .meta { position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--tinta); opacity:.5 }
.bp-pista .p {
  position:absolute; top:4px; width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 2px #fff;
}
.bp-pista .p.auto { background:var(--azul) }
.bp-pista .p.ent { background:var(--violeta) }
.bp-ok {
  margin-top:12px; border:1px dashed var(--linea); border-radius:var(--radio); padding:11px 13px;
  background:var(--nube);
}
.bp-ok .ok-hd { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--wa) }
.bp-ok .ok-hd i { width:15px; height:15px; display:block }
.bp-ok .ok-hd .t-mut { font-size:11px; font-weight:600; color:var(--humo) }
.bp-ok .ok-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px }
.chip-ok {
  display:inline-flex; align-items:center; gap:6px; background:var(--papel);
  border:1px solid var(--linea); border-radius:20px; padding:5px 11px; font-size:11.5px; font-weight:600;
}
.chip-ok b { font-weight:800; font-variant-numeric:tabular-nums }
@media screen and (max-width:900px) { .bp-tablero { grid-template-columns:1fr } }

/* rankings */
.rank-fila {
  display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--linea);
}
.rank-fila:last-of-type { border-bottom:0 }
.rank-num {
  width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:10.5px; font-weight:800; margin-top:2px;
}
.rank-num.ok { background:#eaf6f1; color:var(--wa) }
.rank-num.warn { background:#fff1e6; color:#b3591c }
.rank-txt { flex:1; min-width:0 }
.rank-txt .t { font-size:13px; font-weight:600; line-height:1.45 }
.rank-txt .c {
  font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--humo);
  margin-top:4px;
}
.rank-val { font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:1px }
.rank-pie {
  font-size:11px; color:var(--humo); font-weight:600; border-top:1px solid var(--linea);
  padding-top:11px; margin-top:11px;
}
.filters { display:flex; flex-wrap:wrap; gap:7px }
.filters .chip { user-select:none; border:0; font-family:inherit; cursor:pointer }

/* ============ panel del ciclo ============ */
.pn-fila { grid-template-columns:1.6fr 1.2fr 56px }
.pn-fila { text-decoration:none; color:inherit }
a.t-row:hover, a.pb-fila:hover { background:var(--nube) }

/* competencias con brecha: en cuánta gente falla cada una */
.cb-cab, .cb-fila { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(150px,1.6fr) 66px; gap:12px; align-items:center }
.cb-cab {
  font-size:9px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--humo);
  padding-bottom:9px; border-bottom:1px solid var(--linea); margin-bottom:2px;
}
.cb-cab .c, .cb-fila .c { text-align:center }
.cb-fila { padding:9px 0; border-bottom:1px solid var(--linea) }
.cb-fila:last-of-type { border-bottom:0 }
.cb-fila .lb { display:flex; align-items:center; gap:8px; min-width:0; font-size:12.5px }
.cb-fila .lb b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cb-pista { height:8px; background:var(--nube); border-radius:4px; overflow:hidden }
.cb-pista span { display:block; height:100%; border-radius:4px }
.cb-txt { font-size:11px; color:var(--humo); font-weight:600; margin-top:6px }
.cb-txt b { color:var(--tinta); font-weight:800 }

/* personas con más brechas */
.pb-cab, .pb-fila {
  display:grid; grid-template-columns:minmax(200px,1.5fr) 62px minmax(260px,2.4fr) 88px;
  gap:14px; align-items:center;
}
.pb-cab {
  font-size:9px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--humo);
  padding-bottom:9px; border-bottom:1px solid var(--linea); margin-bottom:2px;
}
.pb-cab .c, .pb-fila .c { text-align:center }
.pb-fila {
  padding:8px 0; border-bottom:1px solid var(--linea); text-decoration:none; color:inherit;
  border-radius:var(--radio-sm);
}
.pb-fila:last-of-type { border-bottom:0 }
.pb-fila .c { font-variant-numeric:tabular-nums; font-size:13px; font-weight:800 }
.pb-pista { height:8px; background:var(--nube); border-radius:4px; overflow:hidden }
.pb-pista span { display:block; height:100%; border-radius:4px }
.pb-txt { font-size:11px; color:var(--humo); font-weight:600; margin-top:6px }
.pb-txt b { color:var(--tinta); font-weight:800 }

/* el mismo semáforo en las dos barras: cuánta gente hay debajo, no cuánto */
.cb-pista .bajo, .pb-pista .bajo { background:var(--gris) }
.cb-pista .medio, .pb-pista .medio { background:var(--mango) }
.cb-pista .alto, .pb-pista .alto { background:var(--rojo) }
.cb-pista .gris { background:#d8d8de }

/* brechas por nivel */
.bn-tabla { min-width:760px }
.bn-cab, .bn-fila { display:grid; gap:3px; align-items:center }
.bn-cab {
  font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--humo);
  padding-bottom:8px; margin-bottom:3px; border-bottom:1px solid var(--linea);
}
.bn-cab .c { text-align:center; line-height:1.3 }
.bn-cab .c b { display:block; color:var(--tinta) }
.bn-cab .c small { display:block; font-size:8.5px; font-weight:700; letter-spacing:.04em; text-transform:none }
.bn-fila { margin-bottom:3px }
.bn-lb { display:flex; align-items:center; gap:8px; min-width:0; padding-right:12px; font-size:12.5px }
.bn-lb b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bn-c {
  height:38px; border-radius:6px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.bn-c small { font-size:8.5px; font-weight:700; opacity:.75 }

/*
  El tono dice qué parte del nivel queda por debajo. Con menos de tres personas no se pinta:
  un "uno de dos" es un 50 % que no significa nada, y pintarlo de rojo inventa un patrón.
*/
.t-ninguno { background:#eaf6f1; color:var(--wa) }
.t-tercio { background:#fdf0e2; color:#a15a10 }
.t-dostercios { background:#f8c99a; color:#7a3d05 }
.t-todos { background:var(--rojo); color:#fff }
.t-pocos { background:#f0f0f3; color:#8a8a95 }
.bn-c.na { background:#f4f4f7; color:var(--gris); font-weight:600; box-shadow:inset 0 0 0 1px var(--linea) }
.sw.t-ninguno, .sw.t-pocos { box-shadow:inset 0 0 0 1px var(--linea) }

/* ============ impresión del informe ============
   El PDF sale del navegador, cuando alguien lo pide. No hay nada que lo genere solo.
   Lo que cambia acá no es "una versión para imprimir": es la misma pantalla ajustada al papel.
   ================================================ */
.print-hd, .print-pie { display:none }

@media print {
  @page { size:A4 portrait; margin:11mm 10mm 16mm }

  html, body { min-width:0 !important; background:#fff !important; font-size:9.5px }
  .app, .cuerpo, .page { display:block !important }
  .page { padding:0 !important; max-width:none !important }

  /* nada de lo que se toca sirve en papel */
  .lateral, .lateral-fondo, .topbar, .no-print, .overlay, .select, .input, .btn, .icon-btn, .ctrl { display:none !important }
  .page-hd { display:none !important }

  /*
    El detalle de comportamientos no va en el PDF: son cuarenta filas por persona y convierten
    un informe de siete páginas en uno de veinte que nadie lee.
  */
  .cv-det, .cv-mas { display:none !important }
  .filters .chip:not(.on) { display:none }

  .card, .col-card, .sub-card, .banner, .cv-comp {
    box-shadow:none !important; border:1px solid #dcdce4 !important;
  }

  /* Las tarjetas grandes sí pueden partirse: si no, quedan huecos de media página. */
  .card { padding:10px 12px; margin-bottom:8px !important; break-inside:auto }

  /* Lo que no se parte son las piezas chicas, donde el corte deja una fila sin su número. */
  .banner, .cv-comp, .nota, .grid-4 > .card, .grid-3 > .card,
  .rank-fila, .t-row, .mc-fila, .mc-cab, .bp-it, .bp-zona, .bp-ok, .cv-fila, .bd,
  .card.tablero, .aranas > .card { break-inside:avoid }

  /* Un encabezado nunca queda solo al pie de una página. */
  .card-hd, .t-hd, .bp-escala, h1, h2, h3 { break-after:avoid; break-inside:avoid }

  .grid-2, .grid-3, .grid-4 { break-inside:auto }
  .grid-4 { grid-template-columns:repeat(4,1fr); gap:8px }
  .grid-2, .grid-3 { grid-template-columns:repeat(2,1fr); gap:8px }
  .aranas { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px }
  .aranas .leyenda { font-size:7.5px; gap:9px }

  /* el mapa de calor no puede desbordar: en papel no hay barra para arrastrar */
  .tabla-ancha { overflow:visible !important }
  .mc-tabla, .tabla { min-width:0 !important }
  .mc-c, .mc-ref, .mc-dif { height:26px; font-size:10.5px }
  .mc-lb { font-size:10px }

  h1 { font-size:17px } h2 { font-size:12px } h3 { font-size:11px }
  .kpi-num { font-size:20px }
  .kpi-ico { width:26px; height:26px; margin-bottom:7px }
  .kpi-ico i { width:14px; height:14px }
  .kpi-lbl { font-size:8.5px }
  .gap-lbls { font-size:7px }
  .fuentes { font-size:8px }
  .lectura { font-size:9.5px; line-height:1.55 }
  .nota { padding:8px 10px; font-size:9px }
  .leyenda { font-size:8.5px }
  .banner { padding:10px 14px; gap:14px }
  .banner-val { font-size:11px }
  .cv-comp { margin-bottom:7px; padding:9px 11px }
  .cv-nm { font-size:11px } .cv-ds { font-size:8.5px }
  .bp-tablero { gap:8px }
  .bp-zona { padding:8px 10px !important }
  .bp-zona .z-ds { margin:3px 0 6px; font-size:8.5px }
  .bp-it { padding:6px 0 5px }
  .bp-pista { height:16px !important; margin-top:5px }
  .bp-pista .p { top:2px } .bp-pista .tramo { top:6px }

  /*
    Sin esto el navegador imprime los fondos en blanco, y el mapa de calor —que es todo color—
    sale vacío. Vale para los avatares, las pastillas y las barras.
  */
  .mc-c, .av, .pill, .tag, .bar span, .dist span, .pt, .sw, .rank-num, .bp-pista .p,
  .cv-fila .pop .p, .cv-fila .pop .tramo, .kpi-ico, .gap-escala {
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }

  /* el encabezado se repite arriba de cada página; el pie, abajo */
  .print-hd {
    display:flex !important; align-items:center; gap:12px;
    border-bottom:2px solid var(--violeta); padding-bottom:8px; margin-bottom:12px;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .print-hd img { width:118px }
  .print-hd .ph-txt { flex:1 }
  .print-hd .ph-t { font-size:12px; font-weight:800; letter-spacing:-.01em }
  .print-hd .ph-s { font-size:9px; font-weight:600; color:#6b6b76; margin-top:2px }
  .print-pie {
    display:block !important; position:fixed; bottom:0; left:0; right:0; font-size:7.5px;
    font-weight:600; color:#8a8a95; border-top:1px solid #e4e4ea; padding-top:4px;
  }
}

/* ============ plan de acción ============ */
.plan-vacio-t { font-size:14px; font-weight:700; color:var(--tinta); margin-bottom:8px }
.plan-vacio-d { margin:0 auto 20px }
.plan-pie { display:flex; gap:14px; align-items:center; flex-wrap:wrap }

.pa-grupo { padding:14px 0; border-bottom:1px solid var(--linea) }
.pa-grupo:last-of-type { border-bottom:0 }
.pa-hd { display:flex; gap:9px; align-items:center; margin-bottom:11px; flex-wrap:wrap }
.pa-conducta { font-size:13px; font-weight:700 }
.pa-accion {
  display:grid; grid-template-columns:104px 1fr 156px 150px; gap:14px; align-items:start;
  padding:10px 0 10px 4px;
}
.pa-tipo { padding-top:3px }
.pa-accion textarea.input { resize:vertical; font-family:inherit; line-height:1.5 }
@media screen and (max-width:900px) { .pa-accion { grid-template-columns:1fr } }

.pr-fila { grid-template-columns:1fr 70px 90px 156px }

/* ============ rutas de carrera ============ */
.ru-fila { grid-template-columns:1.5fr 1.2fr 1.2fr 80px 130px }

/* ============ identidad visual por empresa ============ */
.mk-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:24px; align-items:start }
.mk-paletas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.mk-pal {
  display:flex; flex-direction:column; gap:7px; align-items:flex-start; border:1.5px solid var(--linea);
  background:var(--papel); border-radius:var(--radio-sm); padding:10px 11px; cursor:pointer;
  position:relative; font-family:inherit; text-align:left;
}
.mk-pal:hover { border-color:var(--lila) }
.mk-pal.on { border-color:var(--violeta); background:var(--tinte) }
.mk-duo { display:flex; gap:4px }
.mk-duo i { width:22px; height:22px; border-radius:6px; display:block; flex:0 0 22px }
.mk-nom { font-size:11.5px; font-weight:700; color:var(--tinta); line-height:1.25 }
.mk-ok { position:absolute; top:8px; right:8px; color:var(--violeta) }
.mk-ok i { width:15px; height:15px; display:block }
.mk-inputs { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.mk-inp { display:grid; grid-template-columns:34px 1fr; grid-template-areas:'t t' 'c i'; gap:8px; align-items:center }
.mk-inp span { grid-area:t; font-size:11.5px; font-weight:700; color:var(--humo) }
.mk-inp input[type=color] {
  grid-area:c; width:34px; height:34px; padding:0; border:1px solid var(--linea);
  border-radius:8px; background:none; cursor:pointer;
}
.mk-inp .input { grid-area:i; font-variant-numeric:tabular-nums; letter-spacing:.04em }
.mk-colores { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px }
.mk-color { display:flex; align-items:center; gap:9px; min-width:0 }
.mk-pastilla { width:26px; height:26px; border-radius:7px; flex:0 0 26px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08) }
.mk-lb { font-size:10.5px; font-weight:700; color:var(--humo) }
.mk-hex { font-size:10.5px; font-weight:800; font-variant-numeric:tabular-nums }

/*
  La mini aplicación de la vista previa. Sus colores salen de --pri y --sec, que el guion
  reescribe en vivo: elegir un color mirando una pastilla de 26 píxeles es elegir a ciegas.
*/
.mk-app { border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; background:var(--nube) }
.mk-top { background:var(--papel); display:flex; align-items:center; gap:10px; padding:9px 12px }
.mk-logo { width:96px; display:block }
.mk-emp { margin-left:auto; font-size:10.5px; font-weight:700; color:var(--humo) }
.mk-nav {
  background:var(--papel); display:flex; gap:6px; padding:0 12px 9px; font-size:10.5px;
  font-weight:600; color:var(--humo);
}
.mk-nav span { padding:5px 10px; border-radius:20px }
.mk-pill { background:linear-gradient(90deg,var(--pri),var(--sec)); color:#fff !important; font-weight:700 }
.mk-cuerpo { padding:12px; display:grid; gap:10px }
.mk-kpi { background:var(--papel); border-radius:var(--radio-sm); padding:11px 12px; box-shadow:var(--sombra) }
.mk-num { font-size:20px; font-weight:800 }
.mk-num small { font-size:11px; font-weight:700; color:var(--humo) }
.mk-cap { font-size:10px; font-weight:600; color:var(--humo); margin-top:2px }
.mk-bar { height:6px; border-radius:3px; background:#ececed; overflow:hidden; margin-top:8px }
.mk-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--pri),var(--sec)) }
.mk-mini { background:var(--papel); border-radius:var(--radio-sm); padding:11px 12px; display:grid; gap:7px }
.mk-fila { display:grid; grid-template-columns:64px 1fr; gap:9px; align-items:center; font-size:10px; font-weight:700; color:var(--humo) }
.mk-fila i { height:8px; border-radius:4px; display:block; max-width:100% }
.mk-fila .b-pri { background:var(--pri) }
.mk-fila .b-sec { background:var(--sec) }
.mk-fila .b-ter { background:color-mix(in srgb, var(--sec) 55%, #fff) }
.mk-heat { display:grid; grid-template-columns:repeat(6,1fr); gap:3px }
.mk-heat i { width:100%; height:22px; border-radius:5px; display:block }
.mk-heat .r-1 { background:color-mix(in srgb, var(--pri) 10%, #fff) }
.mk-heat .r-2 { background:color-mix(in srgb, var(--pri) 26%, #fff) }
.mk-heat .r-3 { background:color-mix(in srgb, var(--pri) 44%, #fff) }
.mk-heat .r-4 { background:color-mix(in srgb, var(--pri) 62%, #fff) }
.mk-heat .r-5 { background:color-mix(in srgb, var(--pri) 82%, #fff) }
.mk-heat .r-6 { background:var(--pri) }
.mk-btn {
  border:0; background:linear-gradient(90deg,var(--pri),var(--sec)); color:#fff;
  border-radius:var(--radio-sm); padding:9px 12px; font-size:11.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.mk-btn i { width:15px; height:15px; display:block }
@media (max-width:1180px) { .mk-grid { grid-template-columns:1fr } }

/* ============ mensajes del ciclo ============ */
.com-dest { display:flex; gap:14px; align-items:flex-end; margin-bottom:14px }
.com-dest > div { flex:1; min-width:0 }
.com-lista {
  background:var(--nube); border-radius:var(--radio-sm); padding:9px 11px; font-size:12px;
  font-weight:600; color:var(--tinta); line-height:1.6; max-height:64px; overflow:auto;
}
.com-textos { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:14px }
.com-caja { border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden }
.com-hd {
  display:flex; align-items:center; gap:10px; padding:8px 11px; background:var(--nube);
  border-bottom:1px solid var(--linea);
}
.com-hd .btn { margin-left:auto }
.com-canal { font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--humo) }
.com-canal.wa { color:var(--wa) }
.com-txt {
  padding:12px 13px; font-size:12px; font-weight:500; line-height:1.7; white-space:pre-wrap;
  color:var(--tinta); max-height:290px; overflow:auto;
}
@media (max-width:1180px) { .com-textos { grid-template-columns:1fr } }

/* ============ vista organizacional ============ */
.heat { border-collapse:separate; border-spacing:4px; min-width:840px; width:100% }
.heat th { padding:0 0 6px; text-align:center; font-size:10px; font-weight:800; color:var(--tinta) }
.heat th small {
  display:block; font-size:8.5px; font-weight:700; color:var(--humo); margin-top:2px; letter-spacing:.06em;
}
.heat th.rowh {
  text-align:left; min-width:210px; font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--humo);
}
.heat td { padding:0 }
.heat .hlab {
  font-size:12px; font-weight:600; padding-right:10px; display:flex; align-items:center; gap:7px; height:34px;
}
.heat .hlab span { width:8px; height:8px; border-radius:50%; flex:0 0 8px }
.hc {
  height:34px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; font-variant-numeric:tabular-nums;
}
.hc.prom { background:var(--nube); color:var(--tinta); box-shadow:inset 0 0 0 1px var(--linea) }
.hc.vacia { background:#f0f0f3; color:var(--gris); font-weight:600 }

/* severidad de cada evaluador: la nota promedio y el rango que usa */
.sev-fila {
  display:grid; grid-template-columns:170px 1fr 40px auto; gap:12px; align-items:center;
  padding:7px 0; border-bottom:1px solid var(--linea);
}
.sev-fila:last-of-type { border-bottom:0 }
.sev-fila .lb { font-size:12px; font-weight:600; line-height:1.3 }
.sev-fila .lb small { display:block; font-size:10px; color:var(--humo); font-weight:600 }
.sev-pista { position:relative; height:18px; background:var(--nube); border-radius:4px }
.sev-pista .rango {
  position:absolute; top:5px; height:8px; background:color-mix(in srgb, var(--lila) 34%, #fff);
  border-radius:4px;
}
.sev-pista .punto {
  position:absolute; top:4px; width:10px; height:10px; border-radius:50%; background:var(--violeta);
  box-shadow:0 0 0 2px #fff;
}
/* El promedio de la empresa: una marca vertical que cruza la pista entera, con el mismo
   dibujo en la leyenda (T114). Antes la leyenda mostraba un cuadrado que no se parecia a
   esta raya, asi que quien la buscaba en el grafico no la encontraba. */
.sev-pista .ref {
  position:absolute; top:-4px; bottom:-4px; width:3px; border-radius:2px;
  background:var(--noche);
}
.sev-fila .vl { font-size:12.5px; font-weight:800; text-align:right; font-variant-numeric:tabular-nums }
.sw.rango-sw { background:color-mix(in srgb, var(--lila) 34%, #fff) }
.sw.punto-sw { background:var(--violeta); border-radius:50% }
.sw.meta { width:3px; flex-basis:3px; height:15px; border-radius:2px; background:var(--noche) }

/* ============ evolución entre ciclos ============ */
.db-cab, .db-fila { display:grid; grid-template-columns:280px 52px 1fr 52px 64px; gap:14px; align-items:center }
.db-cab {
  font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--humo);
  padding-bottom:9px; border-bottom:1px solid var(--linea); margin-bottom:4px;
}
.db-cab .c { text-align:right } .db-cab .t { text-align:center }
.db-fila { padding:9px 0; border-bottom:1px solid var(--linea) }
.db-fila:last-of-type { border-bottom:0 }
/* la fila con plan se distingue: es la que dice si el proceso sirvió */
.db-fila.plan { background:var(--tinte); border-radius:var(--radio-sm); padding-left:8px; padding-right:8px; margin:0 -8px }
.db-fila .lb { font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:8px }
.db-fila .c { text-align:right; font-variant-numeric:tabular-nums; font-size:12.5px }
.db-fila .c.antes { color:var(--azul); font-weight:800 }
.db-pista { position:relative; height:22px; background:var(--nube); border-radius:4px }
.db-pista .tramo { position:absolute; top:9px; height:4px; border-radius:2px }
.db-pista .tramo.sube { background:linear-gradient(90deg,#c4c4c6,var(--wa)) }
.db-pista .tramo.baja { background:linear-gradient(90deg,var(--mango),#c4c4c6) }
.db-pista .p { position:absolute; border-radius:50%; box-shadow:0 0 0 2px #fff }
.db-pista .p.ini { top:6px; width:10px; height:10px; background:#c4c4c6 }
.db-pista .p.fin { top:5px; width:12px; height:12px }
.db-pista .p.fin.sube { background:var(--wa) }
.db-pista .p.fin.baja { background:var(--mango) }
.sw.p-base { background:#c4c4c6; border-radius:50%; width:10px; height:10px }
.sw.p-sube { background:var(--wa); border-radius:50%; width:12px; height:12px }
.sw.p-baja { background:var(--mango); border-radius:50%; width:12px; height:12px }

.evn-fila { grid-template-columns:1.6fr 70px 70px 1fr 70px }
.pista-div { position:relative; height:20px; background:var(--nube); border-radius:4px }
.pista-div .cero { position:absolute; left:50%; top:-3px; bottom:-3px; width:1.5px; background:var(--tinta); opacity:.55 }
.pista-div .bar { position:absolute; top:3px; bottom:3px; border-radius:3px }
.pista-div .bar.pos { background:var(--wa) }
.pista-div .bar.neg { background:var(--mango) }

/* ============ validez del instrumento ============ */
.al-cab, .al-fila {
  display:grid; grid-template-columns:minmax(200px,1.5fr) 74px minmax(160px,1.6fr) 62px 132px;
  gap:12px; align-items:center;
}
.al-cab {
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--humo);
  padding-bottom:9px; border-bottom:1px solid var(--linea); margin-bottom:2px;
}
.al-cab .c { text-align:center }
.al-fila { padding:8px 0; border-bottom:1px solid var(--linea) }
.al-fila:last-of-type { border-bottom:0 }
.al-fila .lb { display:flex; align-items:center; gap:8px; min-width:0 }
.al-fila .lb b { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.al-fila .c { text-align:center; font-variant-numeric:tabular-nums; font-size:12.5px }
.al-fila .c small { display:block; font-size:9px; font-weight:700; color:var(--gris) }
.al-pista { position:relative; height:10px; background:var(--nube); border-radius:5px }
.al-pista span:not(.mk) { position:absolute; left:0; top:0; bottom:0; border-radius:5px }
/* la marca es el umbral de 0,70: el mínimo aceptado para promediar ítems como medida única */
.al-pista .mk { position:absolute; left:70%; top:-4px; bottom:-4px; width:2px; background:var(--tinta); opacity:.6 }
.al-pista .a-exc { background:var(--wa) }
.al-pista .a-ace { background:#8fd3b8 }
.al-pista .a-cue { background:var(--mango) }
.al-pista .a-rev { background:var(--rojo) }
.al-pista .a-sin { background:transparent }

/* matriz de correlación entre competencias */
.cr-tabla { display:grid; gap:2px; align-items:end; min-width:640px }
.cr-vert { height:130px; display:flex; align-items:flex-end; justify-content:center }
.cr-vert span {
  writing-mode:vertical-rl; transform:rotate(180deg); font-size:10px; font-weight:700;
  color:var(--humo); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-height:126px;
}
.cr-lb {
  font-size:11.5px; font-weight:600; text-align:right; padding-right:10px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.cr-c {
  height:28px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; font-variant-numeric:tabular-nums;
}
.cr-c.vacia { background:transparent }
.cr-c.na { background:#f7f7f9; color:var(--gris) }
.cr-c.r-nula, .sw.r-nula { background:#eef0f4 }
.cr-c.r-baja, .sw.r-baja { background:#f3c78a }
.cr-c.r-media, .sw.r-media { background:var(--mango); color:#fff }
.cr-c.r-alta, .sw.r-alta { background:var(--rojo); color:#fff }

/* comportamientos flojos */
.fl-cab, .fl-fila { display:grid; grid-template-columns:minmax(0,2.4fr) 84px 96px 128px; gap:12px; align-items:center }
.fl-cab {
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--humo);
  padding-bottom:9px; border-bottom:1px solid var(--linea); margin-bottom:2px;
}
.fl-cab .c { text-align:center }
.fl-fila { padding:9px 0; border-bottom:1px solid var(--linea) }
.fl-fila:last-of-type { border-bottom:0 }
.fl-fila .lb .tx { font-size:12.5px; font-weight:600; line-height:1.4 }
.fl-fila .lb small {
  display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; color:var(--humo);
  margin-top:3px;
}
.fl-fila .lb small .pt { width:7px; height:7px }
.fl-fila .c { text-align:center; font-variant-numeric:tabular-nums; font-size:12.5px }

/* ============ higiene del 360 ============ */
.hg-fila {
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(80px,1fr) 96px; gap:12px;
  align-items:center; padding:8px 0; border-bottom:1px solid var(--linea);
}
.hg-fila.simple { grid-template-columns:minmax(0,1.4fr) minmax(80px,1fr) 54px }
.hg-fila:last-of-type { border-bottom:0 }
.hg-fila .lb { min-width:0 }
.hg-fila .lb small { display:block; font-size:10.5px; font-weight:600; color:var(--humo); margin-top:3px }
.hg-fila .lb b { font-size:12.5px; font-weight:600 }
.hg-fila .lb .nm { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hg-fila .c { text-align:center; font-variant-numeric:tabular-nums; font-size:12.5px }
.hg-pista { position:relative; height:8px; background:var(--nube); border-radius:4px; overflow:hidden }
.hg-pista span { position:absolute; left:0; top:0; bottom:0; border-radius:4px }
.hg-pista .hg-rojo { background:var(--rojo) }
.hg-pista .hg-mango { background:var(--mango) }
.hg-pista .hg-gris { background:var(--gris) }
.hg-pista .hg-marca { background:var(--violeta) }

/* reciprocidad entre pares */
.rc-cab, .rc-fila { display:grid; grid-template-columns:minmax(0,1.8fr) 58px 58px 58px; gap:10px; align-items:center }
.rc-cab {
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--humo);
  padding-bottom:8px; border-bottom:1px solid var(--linea); margin-bottom:2px;
}
.rc-cab .c { text-align:center }
.rc-fila { padding:8px 0; border-bottom:1px solid var(--linea) }
.rc-fila:last-of-type { border-bottom:0 }
.rc-fila .lb { font-size:12px; font-weight:600; min-width:0; display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.rc-fila .c { text-align:center; font-variant-numeric:tabular-nums; font-size:12.5px }

/* ============ equidad de la evaluación ============ */
.eq-bloque { margin-bottom:18px }
.eq-bloque:last-of-type { margin-bottom:0 }
.eq-tit {
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--violeta); margin-bottom:8px;
}
.eq-cab, .eq-fila {
  display:grid; grid-template-columns:minmax(0,1.6fr) 84px 132px 168px 176px; gap:12px;
  align-items:center;
}
.eq-cab {
  font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--humo);
  padding-bottom:8px; border-bottom:1px solid var(--linea); margin-bottom:2px;
}
.eq-cab .c { text-align:center }
.eq-fila { padding:8px 0; border-bottom:1px solid var(--linea) }
.eq-fila:last-of-type { border-bottom:0 }
.eq-fila .lb { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.eq-fila .c { text-align:center; font-variant-numeric:tabular-nums; font-size:12.5px }

/* ============ guía de devolución ============ */
.gd-aviso {
  display:flex; gap:11px; background:#fff2e6; border:1px solid #f3c78a; border-radius:var(--radio);
  padding:12px 14px; margin-bottom:16px; font-size:12.5px; font-weight:600; color:#8a4a12;
  line-height:1.6;
}
.gd-aviso svg { width:18px; height:18px; display:block; flex:0 0 18px; margin-top:1px }
.gd-paso { display:flex; gap:16px; align-items:flex-start; margin-bottom:16px }
.gd-num {
  width:34px; height:34px; flex:0 0 34px; border-radius:11px; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800;
}
.gd-num.alerta { background:linear-gradient(140deg, var(--mango), #c2610a) }
.gd-num.ok { background:linear-gradient(140deg, #4fc79f, #1d9e75) }
.gd-paso h2 { margin-bottom:8px }
.gd-paso p { font-size:13px; font-weight:500; line-height:1.7; color:var(--tinta); margin-bottom:9px }
.gd-frase {
  background:var(--nube); border-left:3px solid var(--violeta);
  border-radius:0 var(--radio-sm) var(--radio-sm) 0; padding:10px 13px; font-style:italic;
  font-weight:600!important;
}
.gd-tip {
  display:flex; gap:8px; align-items:flex-start; font-size:12px!important; color:var(--humo)!important;
  font-weight:600!important; background:var(--tinte); border-radius:var(--radio-sm); padding:9px 11px;
}
.gd-tip svg { width:15px; height:15px; display:block; flex:0 0 15px; margin-top:1px; color:var(--violeta) }
.gd-preg { background:var(--tinte); border-radius:var(--radio-sm); padding:11px 13px; margin-bottom:9px; font-size:12px }
.gd-q {
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio-sm);
  padding:9px 11px; margin-top:7px; font-size:12.5px; font-weight:600; line-height:1.5;
}
.gd-evitar {
  display:flex; gap:10px; padding:9px 0; border-bottom:1px solid #f3ddc4; font-size:12.5px;
  font-weight:500; line-height:1.65; color:#7a4208;
}
.gd-evitar:last-child { border-bottom:0 }
.gd-evitar svg { width:16px; height:16px; display:block; flex:0 0 16px; margin-top:2px; color:#c2610a }

/* ============ informe ejecutivo ============ */
.ej-hall { display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--linea) }
.ej-hall:last-of-type { border-bottom:0 }
.ej-ico {
  width:30px; height:30px; flex:0 0 30px; border-radius:9px; background:#fff2e6; color:#c2610a;
  display:flex; align-items:center; justify-content:center;
}
.ej-ico.ok { background:#eaf6f1; color:var(--wa) }
.ej-ico svg { width:16px; height:16px; display:block }
.ej-hall b { font-size:13.5px }
.ej-hall p { font-size:12.5px; font-weight:500; line-height:1.65; color:var(--humo); margin-top:4px }
.ej-dec { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--linea) }
.ej-dec:last-of-type { border-bottom:0 }
.ej-num {
  width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800;
}
.ej-dec b { font-size:13.5px }
.ej-dec p { font-size:12.5px; font-weight:500; line-height:1.7; color:var(--tinta); margin-top:4px }

/* ============ cuentas de acceso ============ */
.cu-form { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap }
.cu-form > div { min-width:0 }
.cu-form .select, .cu-form .input { min-width:220px }
.cu-tabla { min-width:720px }
.cu-cab, .cu-fila {
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.2fr) 140px 100px 90px;
  gap:12px; align-items:center;
}
.cu-cab {
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--humo);
  padding-bottom:9px; border-bottom:1px solid var(--linea); margin-bottom:2px;
}
.cu-cab .c { text-align:center }
.cu-fila { padding:9px 0; border-bottom:1px solid var(--linea) }
.cu-fila:last-of-type { border-bottom:0 }
.cu-fila .c { text-align:center }
.cu-correo { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cu-acciones { display:flex; justify-content:flex-end }
/* El detalle de una cuenta en el modal (T104): pares rótulo-valor y las acciones abajo. */
.cu-dato {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--linea); font-size:13px;
}
.cu-dato:last-of-type { border-bottom:0 }
.cu-modal-acciones { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px }
.cu-modal-acciones .btn { white-space:nowrap }

/* enlace secundario de las pantallas de acceso */
.acceso-enlace {
  display:block; margin-top:14px; text-align:center; font-size:12px; font-weight:700;
  color:var(--violeta); text-decoration:none;
}
.acceso-enlace:hover { text-decoration:underline }

/* ============ auditoría ============ */
.au-tabla { min-width:760px }
.au-cab, .au-fila {
  display:grid; grid-template-columns:150px minmax(0,1.2fr) 190px minmax(0,1.6fr); gap:12px;
  align-items:center;
}
.au-cab {
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--humo);
  padding-bottom:9px; border-bottom:1px solid var(--linea); margin-bottom:2px;
}
.au-fila { padding:7px 0; border-bottom:1px solid var(--linea); font-size:12.5px }
.au-fila:last-of-type { border-bottom:0 }
.au-correo { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600 }
.au-fila small.mono { font-size:11px; color:var(--humo) }

/* acceso con proveedores externos */
.acceso-externo { width:100%; margin-top:16px }
/* El borde violeta es el color del fondo del botón de entrar (T94): los tres caminos de
   acceso se ven de la misma familia. */
.acceso-btn-ext { background:var(--papel); border:1px solid var(--violeta); color:var(--tinta); margin-top:8px }
.acceso-btn-ext:hover { background:var(--tinte2) }
.cu-usuario { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ---- T43 · recordatorio por correo y respuesta por enlace ---- */

/* La página de responder sin cuenta: una competencia por página con todas sus conductas (T92),
   pensada para el teléfono pero cómoda en pantalla grande (T93): los niveles de la escala se
   acomodan solos en columnas, una en el teléfono y hasta cuatro con espacio. */
.rp{max-width:1040px;margin:0 auto;padding:20px 16px 44px}
.rp-comp-hd{margin-bottom:12px}
.rp-hd h1{font-size:20px;margin:4px 0 2px}
.rp-sub{font-size:13px;color:var(--gris);margin:0 0 14px}
.rp-prog{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rp-prog .bar{flex:1}
.rp-cuenta{font-size:12px;color:var(--gris);white-space:nowrap}
.rp-card{padding:18px}
.rp-comp{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violeta);margin-bottom:6px}
.rp-conducta{font-size:16.5px;font-weight:700;line-height:1.45;margin:0 0 10px}
.rp-desc{font-size:13.5px;color:var(--gris);line-height:1.6}
.rp-opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:14px}
.rp-opt{display:block;width:100%;text-align:left;padding:13px 14px;border:1.5px solid var(--linea);
  border-radius:12px;background:#fff;cursor:pointer;font:inherit}
.rp-opt b{display:block;font-size:14px;margin-bottom:3px}
.rp-opt span{display:block;font-size:12.5px;color:var(--gris);line-height:1.5}
.rp-opt{transition:border-color .15s, background .15s, box-shadow .15s}
.rp-opt.sel{border-color:var(--violeta);background:color-mix(in srgb, var(--violeta) 6%, #fff);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--violeta) 14%, transparent)}
.rp-opt.sel b::after{content:" ✓";color:var(--violeta)}
.rp-opt:disabled{cursor:default;opacity:.7}
.rp-opt:disabled.sel{opacity:1}
.rp-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.rp-nav.arriba{margin:0 0 16px}
/* Los botones de la navegación, con fondo (T93): son el camino entre competencias y tienen
   que verse sin buscarlos. */
.rp-nav .btn{background:var(--tinte2);border-color:transparent;color:var(--violeta);font-weight:800}
.rp-nav .btn:hover{background:color-mix(in srgb, var(--violeta) 22%, #fff)}
/*
  En el teléfono, pasar de competencia es la acción que más se repite y la hace gente que
  responde de pie o entre reuniones: el botón va al tamaño de dedo (T120). En el escritorio
  se queda como los demás botones chicos, que ahí se apunta con el ratón.
*/
@media (max-width:880px) {
  .rp-nav .btn { min-height:44px; padding-left:18px; padding-right:18px }
}
.rp-enviar{width:100%;justify-content:center;margin-top:12px}
.rp-pie{font-size:12px;color:var(--gris);text-align:center;margin-top:16px;line-height:1.6}

.com-propio{margin-top:16px}
.com-propio textarea{width:100%;resize:vertical;font:inherit}
.com-acciones{display:flex;justify-content:flex-end;margin-top:10px}

.com-pend{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.com-pend-row{display:grid;grid-template-columns:auto minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.4fr) auto;
  gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--linea);border-radius:10px}
.com-pend-row .np{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.com-pend-row .mut{color:var(--gris);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.com-sel-todo{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--gris);cursor:pointer}

@media (max-width:900px){.com-pend-row{grid-template-columns:auto 1fr auto}.com-pend-row .mut{display:none}}

/* ---- T49 · carga masiva desde Excel ---- */
.imp-errores{margin:8px 0 0 18px;line-height:1.7}
.imp-claves{display:flex;flex-direction:column;gap:6px}
.imp-clave{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.4fr) auto;gap:12px;
  align-items:center;padding:8px 10px;border:1px solid var(--linea);border-radius:10px}
.imp-clave .np{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-clave .mut{color:var(--gris);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-clave code{font-size:13px;font-weight:700;letter-spacing:.04em}

/* ---- T52 · el recordatorio manda; el mensaje propio va plegado ---- */
.com-detalle{margin-top:14px;border:1px solid var(--linea);border-radius:10px;padding:10px 14px}
.com-detalle summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--violeta)}
.com-detalle .com-propio{margin-top:12px}

/* ---- T67 · la puesta en marcha, paso a paso ---- */
.pasos { list-style:none; margin:0; padding:0 }
.paso { display:flex; gap:14px; align-items:flex-start; padding:14px 0 }
.paso + .paso { border-top:1px solid var(--linea) }
.paso-marca {
  width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:var(--nube);
  color:var(--humo); display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; margin-top:2px;
}
.paso-marca i { width:15px; height:15px; display:block }
.paso.hecho .paso-marca { background:#eaf6f1; color:var(--cumplido) }
.paso.actual .paso-marca { background:var(--grad); color:#fff; box-shadow:var(--sombra-pri) }
.paso-txt { flex:1; min-width:0 }
.paso-tit { display:flex; align-items:center; gap:9px; font-weight:700; flex-wrap:wrap }
.paso-det { font-size:12.5px; font-weight:500; color:var(--humo); line-height:1.6; margin:3px 0 0 }
.paso-aviso {
  display:flex; gap:7px; align-items:flex-start; margin:7px 0 0; font-size:12px; font-weight:600;
  color:var(--alerta-texto);
}
.paso-aviso i { width:14px; height:14px; flex:0 0 14px; display:block; margin-top:1px }
.paso > .btn { flex:none; align-self:center }
/* Los pasos que todavía no tocan se ven apagados: el orden se lee sin explicarlo. */
.paso:not(.actual):not(.hecho) { opacity:.55 }

/* ---- T70 · niveles de la matriz por empresa ---- */
.niv-fila { display:flex; gap:8px; align-items:center; padding:7px 0 }
.niv-fila + .niv-fila { border-top:1px solid var(--linea) }
.niv-edita { display:flex; gap:8px; align-items:center; flex:1; min-width:0 }
.niv-edita .input { flex:1; min-width:0 }
.niv-corta { flex:0 0 84px }
.niv-alta { margin-top:12px; padding-top:12px; border-top:1px solid var(--linea) }
.niv-alta .input { flex:1; min-width:0 }
.niv-sube i { transform:rotate(180deg) }
.niv-fila .btn { padding:8px 10px; flex:none }

/* ---- T71 · la escala de cumplimiento, editable por empresa ---- */
.nivel .input { width:100% }
.esc-puntos { margin-top:6px; display:flex; align-items:center; gap:6px }
.esc-puntos .input { width:80px; font-variant-numeric:tabular-nums }

/* ---- T78 · el acceso a dos columnas, con panel de servicios ---- */
.acceso-doble {
  display:flex; width:100%; max-width:980px; background:var(--papel); border-radius:18px;
  box-shadow:0 18px 50px rgba(27,27,34,.13); overflow:hidden;
}
.acceso-doble .acceso-caja { box-shadow:none; border-radius:0; max-width:none; flex:0 0 410px; padding:42px 38px 32px }
.acceso-promo {
  flex:1; min-width:0; background:linear-gradient(160deg, var(--tinte), var(--tinte2));
  padding:44px 42px; display:flex; flex-direction:column; justify-content:center; text-align:left;
}
.acceso-promo h2 { font-size:20px; line-height:1.3; margin-bottom:8px }
.acceso-promo p { font-size:13px; font-weight:500; color:var(--humo); line-height:1.7; margin-bottom:18px }
.promo-punto { display:flex; gap:10px; align-items:flex-start; font-size:12.5px; font-weight:600; margin-bottom:11px }
.promo-punto svg { flex:0 0 17px; margin-top:1px; color:var(--violeta) }
.promo-figura { width:100%; max-width:380px; margin:24px auto 0; display:block; filter:drop-shadow(0 10px 24px rgba(27,27,34,.10)) }
/* En el teléfono, solo el acceso: el panel de servicios no entra. */
@media (max-width:880px) {
  .acceso-promo { display:none }
  .acceso-doble { max-width:420px }
  .acceso-doble .acceso-caja { flex:1 }
}

/* ---- T80 · confirmación con modal y vista previa del recordatorio ---- */
#envio-previa, #mensaje-previa {
  background:var(--nube); border:1px solid var(--linea); border-radius:var(--radio-sm);
  margin-top:6px;
}

/* ---- T85 · los estados del ciclo como camino ---- */
.ci-camino {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px;
  background:var(--tinte); border-radius:var(--radio-sm); padding:12px 14px;
}
.ci-paso { display:flex; align-items:center; gap:8px }
.ci-paso .d { font-size:12px; font-weight:600; color:var(--humo) }
.ci-flecha i { width:15px; height:15px; display:block; color:var(--gris) }
.ci-regla { font-size:11.5px; font-weight:600; color:var(--humo); margin-left:auto }

/*
  Tablero embebido (T139): el iframe ocupa el alto de la pantalla menos la barra de arriba y
  los chips (T143 le sacó el encabezado de pantalla). Alto fijo y no porcentaje, porque un
  porcentaje sobre un contenedor sin alto propio colapsa a cero y el tablero no se ve.
*/
.tablero { padding:0; overflow:hidden }
.tablero-marco { display:block; width:100%; height:calc(100vh - 150px); min-height:520px; border:0 }
@media (max-width:880px) {
  .tablero-marco { height:calc(100vh - 190px); min-height:420px }
}