/* Estilos compartidos de Zoe 2.0 (fieles al canvas de Diseño).
 * Layout de escritorio: fluido de 1280 px a ~1800 px de contenido; por encima el contenido se centra
 * y fondo, barra superior y sidebar ocupan todo el ancho. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Corrección 108 (modo oscuro, etapa 1): TODOS los colores de la app viven aquí como variables. Las pantallas y api.js
 * usan var(--…), nunca un hex. Un futuro html[data-tema="oscuro"] solo redefine estos valores. Lista y uso por grupo en
 * docs/FRONT_GUIA.md («Colores: variables (corrección 108)»). Los nombres viejos (--texto, --gris, --borde, --fondo…)
 * quedan como alias de los nuevos y siguen valiendo. */
:root {
  /* ---- Superficies */
  --sup-pagina: #F9FAFB;      /* fondo de la página */
  --sup-tarjeta: #fff;        /* tarjetas, tablas y sus títulos fijos */
  --sup-elevada: #fff;        /* menús desplegables, segmento activo */
  --sup-barra: #fff;          /* barra superior, menú lateral, franja de migas fija */
  --sup-control: #fff;        /* campos, botones secundarios, interruptores, chips encendibles */
  --sup-suave: #F9FAFB;       /* hover de filas, botón suave gris */
  --sup-hundida: #F3F4F6;     /* segmentos, pistas, cajas grises */
  --ventana-fondo: #fff;      /* caja de toda ventana flotante */
  --ventana-velo: rgba(15,23,42,.45); /* fondo oscurecido detrás de las ventanas */
  /* ---- Texto */
  --txt-titulo: #0F172A; --txt-fuerte: #111827; --txt-normal: #374151; --txt-medio: #4B5563;
  --txt-suave: #6B7280; --txt-tenue: #9CA3AF; --txt-inverso: #fff;
  /* ---- Bordes y líneas */
  --borde-normal: #E5E7EB; --borde-fino: #F3F4F6; --borde-fuerte: #D1D5DB;
  /* ---- Alias de la etapa anterior (siguen valiendo en las pantallas) */
  --tinta: var(--txt-titulo); --texto: var(--txt-fuerte); --texto-2: var(--txt-normal); --gris: var(--txt-suave);
  --gris-2: var(--txt-tenue); --borde: var(--borde-normal); --borde-2: var(--borde-fino); --fondo: var(--sup-pagina);
  --blanco: var(--sup-tarjeta);
  /* ---- Números 1 a 5 deshabilitados no elegidos (hoja enviada): gris legible ≥4.5:1, sin opacidad (108 etapa 3) */
  --n5-inactivo-txt: var(--txt-suave); --n5-inactivo-borde: var(--borde-normal);
  /* ---- Contraste en claro (108, cierre): marcador de campos, gris suave sobre fondo tintado o hundido e iconos de acción */
  --txt-marcador: var(--txt-suave);      /* ::placeholder: #6B7280 sobre el campo blanco 4.83:1 (antes #9CA3AF 2.54:1) */
  --txt-suave-fondo: var(--txt-medio);   /* gris suave sobre fondo tintado o hundido (segmentos, «N sin ubicar», «Peso», resumen de grupo): #4B5563 */
  --ico-suave: var(--txt-suave);         /* iconos de acción: asa ⋮⋮ del plan, × de avisos y de Resultados: #6B7280 4.83:1 */
  /* ---- Sombras (box-shadow completo) y foco */
  --sombra-sutil: 0 1px 2px rgba(0,0,0,.06);
  --sombra-perilla: 0 1px 2px rgba(0,0,0,.15);
  --sombra-menu: 0 12px 28px rgba(0,0,0,.14);
  --sombra-aviso: 0 12px 28px rgba(0,0,0,.16);
  --sombra-modal: 0 20px 48px rgba(0,0,0,.25);
  --sombra-tip: 0 10px 24px rgba(15,23,42,.18);
  --sombra-burbuja: 0 14px 32px -10px rgba(15,23,42,.28), 0 2px 6px rgba(15,23,42,.06);
  --sombra-cab-tabla: 0 3px 6px -3px rgba(15,23,42,.18);
  --foco: #16A34A; --foco-anillo: 0 0 0 3px rgba(22,163,74,.12); --foco-info: #1D4ED8;
  /* ---- Verde de acción: todo texto verde y todo fondo verde con texto blanco (botones, enlaces, pestaña activa,
     avatares, celda Top Talent HNG). #15803D: 5.02:1 con blanco. Hover de botones y enlaces: #166534 (7.13:1). */
  --verde-solido: #15803D; --verde-solido-hover: #166534; --btn-txt: #fff;
  /* Verde decorativo, sin texto: barras, puntitos, anillos, líneas de gráficos, bordes de filtros activos, foco. */
  --verde-deco: #16A34A;
  --verde-texto: #166534; --verde-texto-osc: #14532D; --verde-suave: #F0FDF4; --verde-tinte: #DCFCE7;
  --verde-borde: #BBF7D0; --verde-borde-2: #86EFAC;
  /* ---- Familias de color (botones suaves, chips, cajas de pilar) */
  --teal: #0D9488; --teal-osc: #0F766E; --teal-hover: #115E59; --teal-suave: #F0FDFA; --teal-tinte: #CCFBF1; --teal-borde: #99F6E4;
  --coral: #DC5B4E; --coral-solido: #B4382C; --coral-osc: #9F1D1D; --coral-suave: #FFF1F0; --coral-tinte: #FFE4E0; --coral-borde: #FCA5A5;
  --azul: #1D4ED8; --azul-medio: #2563EB; --azul-suave: #EFF6FF; --azul-tinte: #DBEAFE; --azul-borde: #BFDBFE;
  --rojo: #DC2626; --rojo-hover: #B91C1C; --rojo-texto: #991B1B; --rojo-suave: #FEE2E2; --rojo-fondo: #FEF2F2; --rojo-borde: #FECACA;
  --ambar: #92400E; --ambar-medio: #B45309; --ambar-texto-osc: #78350F; --ambar-suave: #FEF3C7; --ambar-fondo: #FFFBEB; --ambar-borde: #FDE68A;
  --naranja: #EA580C; --naranja-osc: #C2410C; --naranja-texto: #9A3412; --naranja-suave: #FFF7ED; --naranja-tinte: #FFEDD5;
  --violeta: #7C3AED; --violeta-texto: #5B21B6; --violeta-suave: #F5F3FF; --violeta-tinte: #EDE9FE; --violeta-borde: #DDD6FE; --violeta-borde-2: #C4B5FD;
  --amarillo-tinte: #FEF9C3; --amarillo-texto: #854D0E;
  /* ---- Pilares: punto (encabezados, gráficos) y texto legible (valores) */
  --pilar-res: #0D9488; --pilar-res-txt: #0F766E;
  --pilar-comp: #2563EB; --pilar-comp-txt: #1D4ED8;
  --pilar-pot: #DC5B4E; --pilar-pot-txt: #B4382C;
  /* Etiquetas de pilar de «Pendiente y responsable» (ZoeApi.PILAR_CENTRO) */
  --pilar-res-etq-fondo: #CCFBF1; --pilar-res-etq-txt: #0F766E;
  --pilar-comp-etq-fondo: #DCFCE7; --pilar-comp-etq-txt: #166534;
  --pilar-pot-etq-fondo: #FFE4E0; --pilar-pot-etq-txt: #9F1D1D;
  --pilar-plan-etq-fondo: #EDE9FE; --pilar-plan-etq-txt: #5B21B6;
  /* ---- Estados. Texto con puntito (.st-*) */
  --est-ok-txt: #15803D; --est-amb-txt: #B45309; --est-gris-txt: #6B7280; --est-azul-txt: #1D4ED8;
  --est-rojo-txt: #B91C1C; --est-naranja-txt: #C2410C;
  /* Estados en caja (.ind, ZoeApi.ESTADO_EVAL): listo · pendiente · en curso · por evaluar · por calibrar · en espera */
  --est-listo-fondo: #DCFCE7; --est-listo-txt: #166534;
  --est-pend-fondo: #FEF3C7; --est-pend-txt: #92400E;
  --est-curso-fondo: #DBEAFE; --est-curso-txt: #1D4ED8;
  --est-evaluar-fondo: #FEF9C3; --est-evaluar-txt: #854D0E;
  --est-calibrar-fondo: #EA580C; --est-calibrar-solido: #C2410C; --est-calibrar-txt: #fff;
  --est-espera-fondo: #F3F4F6; --est-espera-txt: #4B5563;
  /* ---- Avisos (banners, .info, .aviso-amb, casilla y «Se perderá») */
  --aviso-info-fondo: #EFF6FF; --aviso-info-borde: #BFDBFE; --aviso-info-txt: #1D4ED8;
  --aviso-amb-fondo: #FFFBEB; --aviso-amb-borde: #FDE68A; --aviso-amb-txt: #92400E;
  --aviso-error-fondo: #FEF2F2; --aviso-error-borde: #FECACA; --aviso-error-txt: #991B1B; --aviso-error-acento: #DC2626;
  --aviso-ok-fondo: #F0FDF4; --aviso-ok-borde: #BBF7D0; --aviso-ok-txt: #166534;
  /* Círculo de icono de las ventanas (ZoeApi.confirmar / informar / exito) */
  --ico-peligro-fondo: #FEE2E2; --ico-peligro-txt: #DC2626;
  --ico-info-fondo: #DBEAFE; --ico-info-txt: #1D4ED8;
  --ico-aviso-fondo: #FEF3C7; --ico-aviso-txt: #92400E;
  --ico-exito-fondo: #DCFCE7; --ico-exito-txt: #16A34A;
  /* ---- Etiquetas y chips (.chip, .etq) */
  --etq-gris-fondo: #F3F4F6; --etq-gris-txt: #4B5563;
  --etq-ok-fondo: #DCFCE7; --etq-ok-txt: #166534;
  --etq-amb-fondo: #FEF3C7; --etq-amb-txt: #92400E;
  --etq-rojo-fondo: #FEE2E2; --etq-rojo-txt: #DC2626; --etq-baja-txt: #991B1B;
  --etq-azul-fondo: #DBEAFE; --etq-azul-suave: #EFF6FF; --etq-azul-txt: #1D4ED8;
  --etq-teal-fondo: #F0FDFA; --etq-teal-txt: #0F766E;
  /* ---- Niveles Bajo / Medio / Alto (ZoeApi.NIVEL, .niveles, .nv-pill, .nv-desc) */
  --niv-bajo-fondo: #FEE2E2; --niv-bajo-borde: #FECACA; --niv-bajo-txt: #DC2626; --niv-bajo-txt-osc: #991B1B;
  --niv-medio-fondo: #FEF3C7; --niv-medio-borde: #FDE68A; --niv-medio-txt: #92400E; --niv-medio-txt-osc: #78350F;
  --niv-alto-fondo: #DCFCE7; --niv-alto-borde: #BBF7D0; --niv-alto-txt: #166534; --niv-alto-txt-osc: #14532D;
  --niv-nulo-fondo: #F3F4F6; --niv-nulo-txt: #4B5563;
  /* ---- Nota final por nivel (ZoeApi.notaNivel, .nota-niv, ZoeApi.TONO_CORTE) */
  --nota-alto-txt: #166534; --nota-alto-fondo: #DCFCE7;
  --nota-medio-txt: #92400E; --nota-medio-fondo: #FEF3C7;
  --nota-bajo-txt: #991B1B; --nota-bajo-fondo: #FEE2E2;
  --nota-nulo-txt: #6B7280; --nota-nulo-fondo: #F3F4F6;
  /* ---- Color por equipo (ZoeApi.colorEquipo): sólido (avatar, franja), fondo y texto (caja), banda (cabecera de
     sección: el fondo aclarado un 55% hacia blanco). La clave guardada del equipo sigue siendo su hex (dato). */
  --eq-tinta: #fff;
  --eq-azul-solido: #2563EB; --eq-azul-fondo: #DBEAFE; --eq-azul-texto: #1D4ED8; --eq-azul-banda: #EFF6FF;
  --eq-violeta-solido: #7C3AED; --eq-violeta-fondo: #EDE9FE; --eq-violeta-texto: #5B21B6; --eq-violeta-banda: #F7F5FF;
  --eq-turquesa-solido: #0F766E; --eq-turquesa-fondo: #CCFBF1; --eq-turquesa-texto: #0F766E; --eq-turquesa-banda: #E8FDF9;
  --eq-rosa-solido: #DB2777; --eq-rosa-fondo: #FCE7F3; --eq-rosa-texto: #9D174D; --eq-rosa-banda: #FEF4FA;
  --eq-naranja-solido: #C2410C; --eq-naranja-fondo: #FFEDD5; --eq-naranja-texto: #9A3412; --eq-naranja-banda: #FFF7EC;
  --eq-indigo-solido: #4F46E5; --eq-indigo-fondo: #E0E7FF; --eq-indigo-texto: #3730A3; --eq-indigo-banda: #F1F4FF;
  --eq-lima-solido: #4D7C0F; --eq-lima-fondo: #ECFCCB; --eq-lima-texto: #3F6212; --eq-lima-banda: #F6FEE8;
  --eq-pizarra-solido: #64748B; --eq-pizarra-fondo: #E2E8F0; --eq-pizarra-texto: #334155; --eq-pizarra-banda: #F2F5F8;
  --eq-sin-solido: #E5E7EB; --eq-sin-tinta: #4B5563; --eq-sin-fondo: #F3F4F6; --eq-sin-texto: #4B5563;
  --eq-sin-banda: #FAFAFB; --eq-sin-franja: #9CA3AF;
  /* ---- Nine Box (ZoeApi.nineBox): fondo, borde y texto por celda; «vacia» = sin celda */
  --nb-desarrollo-fondo: #ECFCCB; --nb-desarrollo-borde: #D9F99D; --nb-desarrollo-txt: #3F6212;
  --nb-ascenso-fondo: #DCFCE7; --nb-ascenso-borde: #BBF7D0; --nb-ascenso-txt: #166534;
  --nb-top-fondo: #15803D; --nb-top-borde: #15803D; --nb-top-txt: #FFFFFF;
  --nb-atencion-fondo: #FFEDD5; --nb-atencion-borde: #FED7AA; --nb-atencion-txt: #9A3412;
  --nb-pilar-fondo: #EDE9FE; --nb-pilar-borde: #DDD6FE; --nb-pilar-txt: #5B21B6;
  --nb-referente-fondo: #CCFBF1; --nb-referente-borde: #99F6E4; --nb-referente-txt: #115E59;
  --nb-quiebre-fondo: #FFE4E6; --nb-quiebre-borde: #FECDD3; --nb-quiebre-txt: #9F1239;
  --nb-ajuste-fondo: #FEF9C3; --nb-ajuste-borde: #FEF08A; --nb-ajuste-txt: #854D0E;
  --nb-experto-fondo: #DBEAFE; --nb-experto-borde: #BFDBFE; --nb-experto-txt: #1E40AF;
  --nb-vacia-fondo: #F3F4F6; --nb-vacia-borde: #E5E7EB; --nb-vacia-txt: #374151;
  /* ---- Gráficos: series (Evolución, Estadísticas), anillos, barras, guías y ejes */
  --graf-res: #0D9488; --graf-comp: #2563EB; --graf-pot: #DC5B4E; --graf-nota: #16A34A; --graf-neutro: #6B7280;
  --graf-alto: #16A34A; --graf-medio: #F59E0B; --graf-bajo: #DC2626; --graf-semaforo-ambar: #D97706;
  --graf-guia: #F3F4F6; --graf-guia-base: #E5E7EB; --graf-eje-txt: #6B7280; --graf-punto-borde: #fff;
  --graf-anillo-pista: #E5E7EB; --graf-anillo-centro: #fff; --graf-barra-pista: #fff;
  /* ---- Burbujas, ventanas y avisos flotantes */
  --tip-fondo: #111827; --tip-txt: #fff;                                   /* ⓘ del título */
  --burbuja-fondo: #fff; --burbuja-borde: #E5E7EB; --burbuja-linea: #F3F4F6; /* burbuja del Nine Box */
  --av-neutro-fondo: #fff; --av-neutro-borde: #D1D5DB; --av-neutro-txt: #374151; /* círculos neutros */
  --cita-fondo: #F9FAFB; --cita-borde: #E5E7EB; --cita-borde-izq: #D1D5DB;  /* recuadro-cita de confirmar */
  --toast-fondo: #fff; --toast-borde: #BBF7D0; --toast-acento: #16A34A; --toast-txt: #166534;
  --toast-error-borde: #FECACA; --toast-error-acento: #DC2626; --toast-error-txt: #991B1B;
  /* ---- Medidas */
  --sidebar: 250px; --topbar: 60px; --max-contenido: 1800px;
  /* 108 — Shell, PanelCiclo y Perfil */
  --sombra-panel: 0 16px 40px rgba(15,23,42,.14);   /* panel de notificaciones (campana) */
  --sombra-cuenta: 0 12px 28px rgba(15,23,42,.16);  /* menú de cuenta (corrección 106) */
  --sombra-marcador: 0 1px 4px rgba(0,0,0,.25);     /* marcador de la banda de Mi Perfil */
  --foco-interno: inset 0 0 0 2px var(--txt-normal); /* foco de teclado en ítems del menú de cuenta */
  /* 108 — Estadisticas */
  --graf-plano-fondo: #FAFAFA;                                  /* fondo del plano de Compensación */
  --sombra-punto: 0 0 0 1px rgba(0,0,0,.08);                    /* aro de los puntos del plano */
  --sombra-celda-hover: inset 0 0 0 999px rgba(15,23,42,.03);   /* hover de celda del Nine Box chico */
  --naranja-borde: #FED7AA; --naranja-borde-2: #FDBA74;
  --celeste: #0284C7; --celeste-tinte: #E0F2FE; --celeste-borde: #BAE6FD; --celeste-texto: #075985; /* «En recuperación» */
  /* 108 — Desempeno y evaluaciones */
  --sombra-login: 0 20px 50px rgba(15,23,42,.08);               /* tarjeta de ingreso (Login) */
  /* 108 — Equipos, Evolucion y Resultados */
  --sup-hundida-hover: #E5E7EB;                                 /* hover de un botón sobre superficie hundida (⋯ de Equipos) */
  --sup-hover-verde: #FCFFFD;                                   /* hover de tarjeta-enlace (Resultados, lista de equipos) */
  --resaltado-busqueda: #BBF7D0;                                /* <mark> de coincidencia de búsqueda */
  --panel-velo: rgba(15,23,42,.28);                             /* velo detrás del panel lateral de Equipos */
  --sombra-panel-lateral: -12px 0 32px rgba(0,0,0,.16);         /* panel lateral de Equipos */
  --sombra-tip-suave: 0 10px 24px rgba(0,0,0,.14);              /* burbuja clara del estado del plan (Evolución) */
  --graf-cursor: #CBD5E1;                                       /* línea vertical del ciclo bajo el cursor (Evolución) */
  --sombra-punto-nota: 0 0 0 1px rgba(22,163,74,.35);           /* aro del punto de nota final (Evolución) */
  --sombra-punto-nota-ultimo: 0 0 0 4px rgba(22,163,74,.22);    /* aro del último punto de nota final */
  /* 108 etapa 2 — texto de tokens que también son fondo sólido (mismo valor en claro; en oscuro el texto se aclara) */
  --verde-accion-txt: #15803D; --verde-accion-txt-hover: #166534;   /* verde de acción como texto o enlace */
  --teal-txt: #0F766E; --coral-txt: #B4382C; --coral-osc-txt: #9F1D1D;
  --rojo-txt: #DC2626; --rojo-txt-hover: #B91C1C;
  --txt-borde: #D1D5DB;                                         /* texto muy tenue (guiones, «+») con el gris de borde */
  /* Interruptor «Apariencia» (Shell, corrección 108) */
  --tema-sel-fondo: #DCFCE7; --tema-sel-txt: #166534;
}
/* Corrección 108, etapa 2 — modo oscuro (canvas v160/v161, tablero «Modo oscuro»). tema.js pone data-tema="claro" u
 * "oscuro" en <html> antes de pintar (lo elegido por la persona; claro por defecto). Aquí solo se redefinen valores: ninguna
 * regla de la app cambia. Base de marca Verde Noche #061712, tarjetas #0B221C, elevado #12302A, bordes #1F3A32/#162F28,
 * textos #E8F3EE/#CFE0D8/#B4C9BF/#9DB4AA, verde de acción #15803D (texto #5FBF86), decorativo #34B06A. Todo texto
 * cumple 4.5:1 sobre su fondo oscuro. Lo que no aparece aquí se queda igual en los dos modos (sólidos con texto blanco:
 * botones, Top Talent HNG, color de cada equipo, rojo de peligro, burbuja ámbar, «Por calibrar»). */
html[data-tema="claro"] { color-scheme: light; }
html[data-tema="oscuro"] {
  color-scheme: dark;
  /* ---- Superficies */
  --sup-pagina: #061712; --sup-tarjeta: #0B221C; --sup-elevada: #0B221C; --sup-barra: #0B221C; --sup-control: #0B221C;
  --sup-suave: #061712; --sup-hundida: #12302A; --ventana-fondo: #0B221C; --ventana-velo: rgba(1,8,6,.66);
  --sup-hundida-hover: #1B3A32; --sup-hover-verde: #0D261F; --resaltado-busqueda: #1B5A41; --panel-velo: rgba(1,8,6,.5);
  /* ---- Texto */
  --txt-titulo: #E8F3EE; --txt-fuerte: #E8F3EE; --txt-normal: #CFE0D8; --txt-medio: #B4C9BF;
  --txt-suave: #9DB4AA; --txt-tenue: #A8BFB5; --txt-inverso: #fff; --txt-borde: #A8BFB5;
  --txt-marcador: var(--txt-tenue); --txt-suave-fondo: var(--txt-suave); --ico-suave: var(--txt-tenue); /* mismos valores de antes en oscuro */
  /* ---- Bordes */
  --borde-normal: #1F3A32; --borde-fino: #162F28; --borde-fuerte: #2E4D43;
  /* ---- Sombras (más densas: sobre fondo oscuro la sombra clara no se ve) y foco */
  --sombra-sutil: 0 1px 2px rgba(0,0,0,.3);
  --sombra-perilla: 0 1px 2px rgba(0,0,0,.45);
  --sombra-menu: 0 12px 28px rgba(0,0,0,.45);
  --sombra-aviso: 0 12px 28px rgba(0,0,0,.45);
  --sombra-modal: 0 20px 48px rgba(0,0,0,.6);
  --sombra-tip: 0 10px 24px rgba(0,0,0,.45);
  --sombra-burbuja: 0 14px 32px -10px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3);
  --sombra-cab-tabla: 0 3px 6px -3px rgba(0,0,0,.6);
  --sombra-panel: 0 16px 40px rgba(0,0,0,.45); --sombra-cuenta: 0 12px 28px rgba(0,0,0,.45);
  --sombra-marcador: 0 1px 4px rgba(0,0,0,.6); --sombra-login: 0 20px 50px rgba(0,0,0,.4);
  --sombra-panel-lateral: -12px 0 32px rgba(0,0,0,.45); --sombra-tip-suave: 0 10px 24px rgba(0,0,0,.4);
  --sombra-punto: 0 0 0 1px rgba(255,255,255,.12); --sombra-celda-hover: inset 0 0 0 999px rgba(255,255,255,.04);
  --sombra-punto-nota: 0 0 0 1px rgba(52,176,106,.45); --sombra-punto-nota-ultimo: 0 0 0 4px rgba(52,176,106,.3);
  --foco: #34B06A; --foco-anillo: 0 0 0 3px rgba(52,176,106,.28); --foco-info: #8DB4F5;
  /* ---- Verde: el sólido de acción no cambia (texto blanco encima); como texto o enlace, #5FBF86 */
  --verde-accion-txt: #5FBF86; --verde-accion-txt-hover: #86D6A4;
  --verde-deco: #34B06A; --verde-texto: #86D6A4; --verde-texto-osc: #86D6A4; --verde-suave: #0F2B22; --verde-tinte: #124030;
  --verde-borde: #1E6B4A; --verde-borde-2: #2A8A5A;
  /* ---- Familias (los sólidos con texto blanco se quedan; texto, fondos suaves y bordes pasan a su versión oscura) */
  --teal-txt: #5FCFC0; --teal-suave: #0E2B29; --teal-tinte: #11403B; --teal-borde: #1C6E66;
  --coral-txt: #F0948A; --coral-osc-txt: #F0948A; --coral-suave: #321A18; --coral-tinte: #46231F; --coral-borde: #8A3A3A;
  --azul: #8DB4F5; --azul-medio: #7FA8F0; --azul-suave: #0F2340; --azul-tinte: #14325A; --azul-borde: #2A4F85;
  --rojo-txt: #F58A8A; --rojo-txt-hover: #F29B9B; --rojo-texto: #F2A1A1; --rojo-suave: #442022; --rojo-fondo: #321618; --rojo-borde: #6B2A2A;
  --ambar: #E8B76A; --ambar-texto-osc: #E8B76A; --ambar-suave: #3D2E0E; --ambar-fondo: #2A2008; --ambar-borde: #6B5214;
  --naranja-osc: #F2A06B; --naranja-texto: #F2A06B; --naranja-suave: #33200E; --naranja-tinte: #43270F;
  --naranja-borde: #7A4A1F; --naranja-borde-2: #8A5A2A;
  --violeta-texto: #B9A2F0; --violeta-suave: #1E1A3A; --violeta-tinte: #2A2352; --violeta-borde: #4A3E8A; --violeta-borde-2: #5B4BB0;
  --amarillo-tinte: #3A3410; --amarillo-texto: #E2C45E;
  --celeste: #6CC0EA; --celeste-tinte: #0F2A3D; --celeste-borde: #24506B; --celeste-texto: #8FD0F2;
  /* ---- Pilares (tablero: Resultados #5FCFC0, Competencias #8DB4F5, Potencial #F0948A) */
  --pilar-res: #5FCFC0; --pilar-res-txt: #5FCFC0;
  --pilar-comp: #8DB4F5; --pilar-comp-txt: #8DB4F5;
  --pilar-pot: #F0948A; --pilar-pot-txt: #F0948A;
  --pilar-res-etq-fondo: #11403B; --pilar-res-etq-txt: #5FCFC0;
  --pilar-comp-etq-fondo: #124030; --pilar-comp-etq-txt: #86D6A4;
  --pilar-pot-etq-fondo: #46231F; --pilar-pot-etq-txt: #F0948A;
  --pilar-plan-etq-fondo: #2A2352; --pilar-plan-etq-txt: #B9A2F0;
  /* ---- Estados */
  --est-ok-txt: #5FBF86; --est-amb-txt: #EDAF5C; --est-gris-txt: #9DB4AA; --est-azul-txt: #8DB4F5;
  --est-rojo-txt: #F29B9B; --est-naranja-txt: #F2A06B;
  --est-listo-fondo: #124030; --est-listo-txt: #86D6A4;
  --est-pend-fondo: #3D2E0E; --est-pend-txt: #E8B76A;
  --est-curso-fondo: #14325A; --est-curso-txt: #8DB4F5;
  --est-evaluar-fondo: #3A3410; --est-evaluar-txt: #E2C45E;
  --est-espera-fondo: #12302A; --est-espera-txt: #B4C9BF;
  /* ---- Avisos e iconos de ventana */
  --aviso-info-fondo: #0F2340; --aviso-info-borde: #2A4F85; --aviso-info-txt: #8DB4F5;
  --aviso-amb-fondo: #2A2008; --aviso-amb-borde: #6B5214; --aviso-amb-txt: #E8B76A;
  --aviso-error-fondo: #321618; --aviso-error-borde: #6B2A2A; --aviso-error-txt: #F2A1A1;
  --aviso-ok-fondo: #0F2B22; --aviso-ok-borde: #1E6B4A; --aviso-ok-txt: #86D6A4;
  --ico-peligro-fondo: #442022; --ico-peligro-txt: #F58A8A;
  --ico-info-fondo: #14325A; --ico-info-txt: #8DB4F5;
  --ico-aviso-fondo: #3D2E0E; --ico-aviso-txt: #E8B76A;
  --ico-exito-fondo: #124030; --ico-exito-txt: #4CBF7E;
  /* ---- Etiquetas y chips */
  --etq-gris-fondo: #12302A; --etq-gris-txt: #B4C9BF;
  --etq-ok-fondo: #124030; --etq-ok-txt: #86D6A4;
  --etq-amb-fondo: #3D2E0E; --etq-amb-txt: #E8B76A;
  --etq-rojo-fondo: #442022; --etq-rojo-txt: #F58A8A; --etq-baja-txt: #F2A1A1;
  --etq-azul-fondo: #14325A; --etq-azul-suave: #0F2340; --etq-azul-txt: #8DB4F5;
  --etq-teal-fondo: #0E2B29; --etq-teal-txt: #5FCFC0;
  /* ---- Niveles Bajo / Medio / Alto */
  --niv-bajo-fondo: #442022; --niv-bajo-borde: #6B2A2A; --niv-bajo-txt: #F58A8A; --niv-bajo-txt-osc: #F2A1A1;
  --niv-medio-fondo: #3D2E0E; --niv-medio-borde: #6B5214; --niv-medio-txt: #E8B76A; --niv-medio-txt-osc: #E8B76A;
  --niv-alto-fondo: #124030; --niv-alto-borde: #1E6B4A; --niv-alto-txt: #86D6A4; --niv-alto-txt-osc: #86D6A4;
  --niv-nulo-fondo: #12302A; --niv-nulo-txt: #B4C9BF;
  /* ---- Nota final por nivel */
  --nota-alto-txt: #86D6A4; --nota-alto-fondo: #124030;
  --nota-medio-txt: #E8B76A; --nota-medio-fondo: #3D2E0E;
  --nota-bajo-txt: #F2A1A1; --nota-bajo-fondo: #442022;
  --nota-nulo-txt: #9DB4AA; --nota-nulo-fondo: #12302A;
  /* ---- Equipos: caja (fondo/texto) y banda de la cabecera de sección en su versión oscura; el sólido no cambia */
  --eq-azul-fondo: #14325A; --eq-azul-texto: #8DB4F5; --eq-azul-banda: #0F2340;
  --eq-violeta-fondo: #2A2352; --eq-violeta-texto: #B9A2F0; --eq-violeta-banda: #192234;
  --eq-turquesa-fondo: #11403B; --eq-turquesa-texto: #5FCFC0; --eq-turquesa-banda: #0E302A;
  --eq-rosa-fondo: #43203A; --eq-rosa-texto: #F09BC2; --eq-rosa-banda: #24212A;
  --eq-naranja-fondo: #43270F; --eq-naranja-texto: #F2A06B; --eq-naranja-banda: #242416;
  --eq-indigo-fondo: #232A5A; --eq-indigo-texto: #A9B0F5; --eq-indigo-banda: #162638;
  --eq-lima-fondo: #2B3A12; --eq-lima-texto: #B4D96A; --eq-lima-banda: #192D18;
  --eq-pizarra-fondo: #243543; --eq-pizarra-texto: #C3CFDD; --eq-pizarra-banda: #162B2E;
  --eq-sin-solido: #1B3A32; --eq-sin-tinta: #B4C9BF; --eq-sin-fondo: #12302A; --eq-sin-texto: #B4C9BF;
  --eq-sin-banda: #0E2822; --eq-sin-franja: #5A756B;
  /* ---- Nine Box (tablero: fondo · borde · texto por celda; Top Talent HNG sigue sólida con texto blanco) */
  --nb-desarrollo-fondo: #2B3A12; --nb-desarrollo-borde: #5C7A24; --nb-desarrollo-txt: #B4D96A;
  --nb-ascenso-fondo: #124030; --nb-ascenso-borde: #1E6B4A; --nb-ascenso-txt: #86D6A4;
  --nb-atencion-fondo: #43270F; --nb-atencion-borde: #7A4A1F; --nb-atencion-txt: #F2A06B;
  --nb-pilar-fondo: #2A2352; --nb-pilar-borde: #4A3E8A; --nb-pilar-txt: #B9A2F0;
  --nb-referente-fondo: #11403B; --nb-referente-borde: #1C6E66; --nb-referente-txt: #5FCFC0;
  --nb-quiebre-fondo: #46202A; --nb-quiebre-borde: #7A2A3A; --nb-quiebre-txt: #F29AB0;
  --nb-ajuste-fondo: #3A3410; --nb-ajuste-borde: #7A6A1E; --nb-ajuste-txt: #E2C45E;
  --nb-experto-fondo: #14325A; --nb-experto-borde: #2A4F85; --nb-experto-txt: #8DB4F5;
  --nb-vacia-fondo: #12302A; --nb-vacia-borde: #1F3A32; --nb-vacia-txt: #CFE0D8;
  /* ---- Gráficos (trazos del tablero; la línea azul de Competencias de Evolución, más clara: #93B6F5) */
  --graf-res: #3FC2B3; --graf-comp: #93B6F5; --graf-pot: #F0948A; --graf-nota: #4CBF7E; --graf-neutro: #9DB4AA;
  --graf-alto: #4CBF7E; --graf-bajo: #F58A8A; --graf-semaforo-ambar: #EDAF5C;
  --graf-guia: #1A332C; --graf-guia-base: #1F3A32; --graf-eje-txt: #9DB4AA; --graf-punto-borde: #0B221C;
  --graf-anillo-pista: #1B3A32; --graf-anillo-centro: #0B221C; --graf-barra-pista: #0B221C;
  --graf-cursor: #2E4D43; --graf-plano-fondo: #0E2822;
  /* ---- Burbujas, ventanas y avisos flotantes */
  --burbuja-fondo: #0B221C; --burbuja-borde: #1F3A32; --burbuja-linea: #162F28;
  --av-neutro-fondo: #0B221C; --av-neutro-borde: #2E4D43; --av-neutro-txt: #CFE0D8;
  --cita-fondo: #061712; --cita-borde: #1F3A32; --cita-borde-izq: #2E4D43;
  --toast-fondo: #0B221C; --toast-borde: #1E6B4A; --toast-acento: #34B06A; --toast-txt: #86D6A4;
  --toast-error-borde: #6B2A2A; --toast-error-txt: #F2A1A1;
  /* ---- Interruptor «Apariencia» */
  --tema-sel-fondo: #124030; --tema-sel-txt: #86D6A4;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); }
/* Mínimo de diseño 1280 px de ventana; el cuerpo descuenta la barra de desplazamiento (hasta 20 px: 15 en Mac con barras
   visibles, 17 en Windows) para no desbordar en horizontal. */
body { font-family: 'Inter', sans-serif; color: var(--texto); -webkit-font-smoothing: antialiased; min-width: 1260px; }
a { color: var(--verde-accion-txt); text-decoration: none; }
a:hover { color: var(--verde-accion-txt-hover); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
::placeholder { color: var(--txt-marcador); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ------------------------------------------------ esqueleto de página */
.zoe-main { margin-left: var(--sidebar); padding-top: var(--topbar); min-height: 100vh; }
.zoe-contenido { max-width: var(--max-contenido); margin: 0 auto; padding: 32px; }
.zoe-contenido.angosto { max-width: 1100px; margin: 0; }
.migas { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--gris-2); margin-bottom: 10px; }
.migas a { color: var(--gris); }
.migas .aqui { color: var(--texto-2); }
.migas .atras { margin-left: 12px; font-size: 12px; font-weight: 700; color: var(--verde-accion-txt); }
h1.titulo { margin: 0; font-size: 22px; font-weight: 800; color: var(--tinta); }
h2.subtitulo { margin: 0; font-size: 18px; font-weight: 800; color: var(--tinta); }
.meta { margin: 4px 0 0; font-size: 13.5px; color: var(--gris); }
.fila { display: flex; align-items: center; gap: 12px; }
.fila.entre { justify-content: space-between; }
.pila { display: flex; flex-direction: column; gap: 16px; }
.cargando { padding: 48px; text-align: center; color: var(--gris); font-size: 13.5px; }
.vacio { padding: 28px; text-align: center; color: var(--gris); font-size: 13.5px; }

/* ------------------------------------------------ piezas */
.card { background: var(--blanco); border: 1px solid var(--borde); border-radius: 16px; padding: 24px; }
.card.pad-lg { padding: 28px; }
.lbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); margin: 0 0 4px; }
.lbl.seccion { color: var(--verde-accion-txt); margin-bottom: 10px; }
.val { font-size: 14px; font-weight: 600; color: var(--texto); margin: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent;
  background: var(--verde-solido); color: var(--btn-txt); font-weight: 700; font-size: 13.5px; padding: 11px 18px; border-radius: 10px;
  text-decoration: none; min-height: 40px; }
.btn:hover { background: var(--verde-solido-hover); color: var(--btn-txt); }
.btn.sec { background: var(--sup-control); border-color: var(--borde); color: var(--texto-2); }
.btn.sec:hover { background: var(--fondo); color: var(--texto); }
.btn.teal { background: var(--teal-osc); } .btn.teal:hover { background: var(--teal-hover); }
.btn.coral { background: var(--coral-solido); } .btn.coral:hover { background: var(--coral-osc); }
.btn.peligro { background: var(--rojo); } .btn.peligro:hover { background: var(--rojo-hover); }
.btn.chico { font-size: 12.5px; padding: 7px 12px; min-height: 32px; border-radius: 8px; }
.btn[disabled], .btn.off { opacity: .45; cursor: not-allowed; pointer-events: none; }
.link { background: none; border: none; padding: 0; color: var(--verde-accion-txt); font-weight: 700; font-size: 13px; }
.link:hover { color: var(--verde-accion-txt-hover); }
.link.gris { color: var(--gris); }
.link.rojo { color: var(--rojo-txt); }

.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; background: var(--etq-gris-fondo); color: var(--etq-gris-txt); white-space: nowrap; }
.chip.verde { background: var(--etq-ok-fondo); color: var(--etq-ok-txt); }
.chip.ambar { background: var(--etq-amb-fondo); color: var(--etq-amb-txt); }
.chip.rojo { background: var(--etq-rojo-fondo); color: var(--etq-rojo-txt); }
.chip.azul { background: var(--etq-azul-suave); color: var(--etq-azul-txt); }
.chip.teal { background: var(--etq-teal-fondo); color: var(--etq-teal-txt); }

.avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--verde-tinte); color: var(--verde-texto);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; flex-shrink: 0; }
.avatar.chico { width: 24px; height: 24px; font-size: 10px; }
.avatar.grande { width: 48px; height: 48px; font-size: 15px; }

.banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.banner.azul { background: var(--aviso-info-fondo); border: 1px solid var(--aviso-info-borde); color: var(--aviso-info-txt); }
.banner.ambar { background: var(--aviso-amb-fondo); border: 1px solid var(--aviso-amb-borde); color: var(--aviso-amb-txt); }
.banner.verde { background: var(--aviso-ok-fondo); border: 1px solid var(--aviso-ok-borde); color: var(--aviso-ok-txt); }
.banner.rojo { background: var(--aviso-error-fondo); border: 1px solid var(--aviso-error-borde); color: var(--aviso-error-txt); }

/* pestañas */
.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--borde); }
.tab { padding: 10px 2px; font-size: 14px; font-weight: 700; color: var(--gris); border: none; border-bottom: 2px solid transparent;
  background: none; margin-bottom: -1px; }
.tab:hover { color: var(--texto-2); }
.tab.activa { color: var(--verde-accion-txt); border-bottom-color: var(--verde-deco); }
.segmento { display: inline-flex; background: var(--borde-2); border-radius: 999px; padding: 3px; gap: 2px; }
.segmento button { border: none; background: none; font-size: 12.5px; font-weight: 600; color: var(--gris); padding: 6px 14px; border-radius: 999px; }
.segmento button.activa { background: var(--sup-elevada); color: var(--verde-texto); font-weight: 800; box-shadow: var(--sombra-sutil); }

/* tablas */
table.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 11px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 14px; border-bottom: 1px solid var(--borde-2); background: var(--fondo); }
.tabla td { font-size: 13.5px; color: var(--texto-2); padding: 12px 14px; border-bottom: 1px solid var(--borde-2); vertical-align: middle; }
.tabla td.fuerte { font-weight: 600; color: var(--texto); }
.tabla tr:last-child td { border-bottom: none; }

/* formularios */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
.input, select.input, textarea.input { width: 100%; padding: 11px 13px; border: 1px solid var(--borde); border-radius: 10px; font-size: 13.5px;
  color: var(--texto); background: var(--sup-control); }
.input:focus { border-color: var(--foco); outline: none; box-shadow: var(--foco-anillo); }
.buscador { position: relative; }
.buscador .input { padding-left: 36px; }
.buscador svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); }
.error-campo { font-size: 12px; color: var(--rojo-txt); font-weight: 600; }

/* modales */
.modal-fondo { position: fixed; inset: 0; background: var(--ventana-velo); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 24px; }
.modal { width: 520px; max-width: 100%; max-height: calc(100vh - 48px); overflow: auto; background: var(--ventana-fondo); border-radius: 16px;
  box-shadow: var(--sombra-modal); padding: 28px; }
.modal.chico { width: 500px; }  /* confirmaciones (familia 9: anchos por tipo, más abajo) */
.modal .cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--tinta); }
.modal .cerrar { background: none; border: none; color: var(--gris); font-size: 22px; line-height: 1; width: 36px; height: 36px; border-radius: 8px; }
.modal .cerrar:hover { background: var(--borde-2); }
.modal .acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.icono-alerta { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Bajo/Medio/Alto (los números 1 a 5 son .n5, más abajo) */
.niveles { display: flex; gap: 8px; }
.niveles button { min-width: 84px; height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--borde); background: var(--sup-control);
  font-weight: 800; font-size: 13.5px; color: var(--texto-2); }
.niveles button.bajo.sel { background: var(--niv-bajo-fondo); border-color: var(--niv-bajo-txt); color: var(--niv-bajo-txt); }
.niveles button.medio.sel { background: var(--niv-medio-fondo); border-color: var(--niv-medio-txt); color: var(--niv-medio-txt); }
.niveles button.alto.sel { background: var(--niv-alto-fondo); border-color: var(--niv-alto-txt); color: var(--niv-alto-txt); }
.niveles button[disabled] { cursor: default; }
.niveles button[disabled]:not(.sel) { opacity: .45; }

/* switch de acceso TAC */
.tswitch { position: relative; display: inline-block; width: 44px; height: 24px; border-radius: 999px; background: var(--borde-fuerte); border: none; padding: 0; vertical-align: middle; }
.tswitch .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--sup-control); border-radius: 999px; box-shadow: var(--sombra-perilla); transition: left .15s; }
.tswitch.on { background: var(--verde-deco); }
.tswitch.on .knob { left: 23px; }
.tswitch[disabled] { opacity: .55; cursor: not-allowed; }

/* tarjetas de pilar */
.pilar { border: 1px solid var(--borde); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; text-decoration: none; }
.pilar .nombre { font-size: 14px; font-weight: 800; }
.pilar .peso { background: var(--sup-control); font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.pilar .texto { font-size: 13px; }
.pilar .cta { color: var(--btn-txt); font-weight: 700; font-size: 13px; padding: 10px 14px; border-radius: 10px; text-align: center; margin-top: auto; }
.pilar.resultados { background: var(--teal-suave); border-color: var(--teal-borde); color: var(--teal-txt); }
.pilar.resultados .peso { color: var(--teal-txt); } .pilar.resultados .cta { background: var(--teal-osc); }
.pilar.competencias { background: var(--verde-suave); border-color: var(--verde-borde); color: var(--verde-texto); }
.pilar.competencias .peso { color: var(--verde-texto); } .pilar.competencias .cta { background: var(--verde-solido); }
.pilar.potencial { background: var(--coral-suave); border-color: var(--coral-borde); color: var(--coral-osc-txt); }
.pilar.potencial .peso { color: var(--coral-osc-txt); } .pilar.potencial .cta { background: var(--coral-suave); color: var(--coral-txt); border: 1px solid var(--coral-solido); }
a.pilar:hover { filter: brightness(.985); }
.metrica { background: var(--sup-tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 18px 20px; }
.metrica .num { font-size: 28px; font-weight: 800; color: var(--tinta); margin-top: 4px; }

/* tablas hechas con divs: <table> NO sirve con sc-for/sc-if (el navegador saca los bucles de la tabla).
 * Uso: <div class="tbl" role="table" style="--cols: 2fr 1fr 120px"> <div class="tbl-cab" role="row"><span role="columnheader">…</span></div>
 *      <sc-for …><div class="tbl-fila" role="row"><span role="cell">…</span></div></sc-for> </div> */
.tbl { width: 100%; }
.tbl-cab, .tbl-fila { display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: 14px; padding: 0 14px; }
.tbl-cab { background: var(--sup-tarjeta); border-bottom: 1px solid var(--borde-2); border-radius: 8px 8px 0 0; }
.tbl-cab > * { padding: 10px 0; }  /* tipografía y fijación: ver «Corrección 89» al final */
.tbl-fila { border-bottom: 1px solid var(--borde-2); min-height: 48px; }
.tbl-fila > * { font-size: 13.5px; color: var(--texto-2); padding: 11px 0; min-width: 0; }
.tbl-fila > .fuerte { font-weight: 600; color: var(--texto); }
.tbl-fila:last-child { border-bottom: none; }
.tbl-fila.clic:hover { background: var(--fondo); }
.der { text-align: right; justify-self: end; }

/* ------------------------------------------------ ventana flotante única (puntos 3 y 34) */
.modal-fondo { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
/* Corrección 103: el fondo NO se bloquea con overflow (movía scrollY a 0 y quitaba la barra: 1425 → 1440 px).
   Lo congela api.js (bloqueo del fondo) sin tocar el diseño; `html.con-ventana` queda solo como marca. */
.modal { position: relative; }
.modal h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--tinta); }
.modal .cerrar.esquina { position: absolute; top: 12px; right: 14px; }
.modal.exito { text-align: center; }
.modal.exito .icono-alerta { margin: 0 auto 16px; }
.modal.exito h2 { margin-bottom: 8px; }
.modal.exito .exito-texto { margin: 0 0 20px; font-size: 13px; color: var(--gris); }
.modal.exito .btn { padding: 11px 28px; }
.modal.exito .exito-nota { margin: 12px 0 0; font-size: 11.5px; color: var(--gris); }
.icono-alerta.grande { width: 52px; height: 52px; }
.casilla-confirmar { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--aviso-error-fondo); border: 1px solid var(--aviso-error-borde); font-size: 13px; font-weight: 600; color: var(--aviso-error-txt); cursor: pointer; }
.casilla-confirmar input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--aviso-error-acento); }

/* Corrección 84(b) familia 9 · ventanas y avisos (canvas v141, ComponenteVentanaFlotante + *Modal + AntesDe*).
 * Una sola estructura: fondo oscurecido y borroso, caja blanca de radio 16, sombra 0 20 48, relleno 28; cabecera con
 * título (y círculo de icono en las confirmaciones) y ×; Cancelar a la izquierda y la acción a la derecha; rojo solo en
 * lo destructivo. Un ancho por tipo (el de cada ventana del canvas):
 *   .modal.chico 500 (confirmaciones y copiar) · .modal 520 (formularios) · .modal.medio 560 (asignar, pregunta de
 *   Potencial) · .modal.antes 560 («Antes de empezar») · .modal.ancho 600 (consultas y carga masiva) ·
 *   .modal.grande 640 (unidad y equipo) · .modal.amplio 680 (precargar persona) · .modal.consulta 460 (Nine Box). */
.modal.consulta { width: 460px; }
.modal.medio, .modal.antes { width: 560px; }
.modal.ancho { width: 600px; }
.modal.grande { width: 640px; }
.modal.amplio { width: 680px; }
/* Subtítulo gris bajo el título (Asignar a X, celda del Nine Box). */
.modal .cabeza:has(+ .modal-sub) { margin-bottom: 6px; }
.modal-sub { margin: 0 0 16px; font-size: 13px; color: var(--gris); line-height: 1.5; overflow-wrap: anywhere; }
/* Cabecera de confirmación (ZoeApi.confirmar / informar): círculo de icono · título y texto · ×. */
.cab-conf { display: flex; align-items: flex-start; gap: 14px; }
.cab-conf .txt { flex: 1; min-width: 0; }
.cab-conf h2 { margin-bottom: 6px; }
.cab-conf p { margin: 0 0 6px; font-size: 13px; color: var(--gris); line-height: 1.5; }
.cab-conf .cerrar { margin: -6px -8px 0 0; flex-shrink: 0; }
/* «Antes de empezar» (Autoevaluación, Evaluación líder, Evaluación de Potencial): título de 19 px, línea gris, tres
 * puntos con icono en caja suave del pilar (verde; .teal líder; .coral Potencial) y nota opcional. */
.modal.antes .cabeza { align-items: flex-start; gap: 16px; margin-bottom: 6px; }
.modal.antes h2 { font-size: 19px; margin-top: 6px; }
.modal.antes .modal-sub { margin-bottom: 22px; }
.antes-pts { display: flex; flex-direction: column; gap: 22px; }
.antes-pt { display: flex; align-items: flex-start; gap: 14px; }
.antes-pt .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--verde-suave); color: var(--verde-accion-txt);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.modal.antes.teal .antes-pt .ic { background: var(--teal-suave); color: var(--teal-txt); }
.modal.antes.coral .antes-pt .ic { background: var(--coral-suave); color: var(--coral-txt); }
.antes-pt .t { margin: 0 0 2px; font-size: 14.5px; font-weight: 700; color: var(--texto); }
.antes-pt .d { margin: 0; font-size: 13px; color: var(--gris); line-height: 1.5; }
.antes-nota { margin: 22px 0 0; font-size: 12.5px; color: var(--gris); }
.modal.antes .acciones { margin-top: 24px; }

/* ------------------------------------------------ migas (punto 13): previos en verde, el último en negro */
.migas a { color: var(--verde-accion-txt); }
.migas a:hover { color: var(--verde-accion-txt-hover); text-decoration: underline; }
.migas .aqui { color: var(--tinta); }

/* ------------------------------------------------ color por equipo */
.chip-eq { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.avatar-eq { color: var(--eq-tinta); }
.borde-eq { border-left-width: 4px !important; border-left-style: solid !important; }

/* ------------------------------------------------ filtros */
.filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filtros-estado { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; color: var(--gris); }
.filtros-estado .activos { color: var(--verde-texto); background: var(--verde-suave); border-radius: 999px; padding: 3px 10px; }

/* ------------------------------------------------ Tanda 2: niveles Bajo/Medio/Alto con su descripción (punto 35)
 * Uso: .nv-grid > .nv-col (×3) > .nv-pill + .nv-desc; con .bajo|.medio|.alto y .sel en el elegido.
 * Sirve para la reunión (botones) y para todas las vistas de solo lectura (spans). */
.nv-preg { padding: 18px 0; border-bottom: 1px solid var(--borde-2); }
.nv-preg:last-child { border-bottom: none; }
.nv-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.nv-texto { margin: 0; font-size: 14px; font-weight: 600; color: var(--texto); flex: 1; }
.nv-peso { font-size: 12px; font-weight: 700; color: var(--gris); white-space: nowrap; }
.nv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nv-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nv-pill { display: inline-block; background: var(--sup-control); border: 1.5px solid var(--borde); color: var(--gris); font-size: 13px; font-weight: 700;
  padding: 7px 20px; border-radius: 999px; min-height: 36px; font-family: inherit; }
.nv-desc { display: block; width: 100%; text-align: left; background: var(--fondo); border: 1px solid var(--borde-2); border-radius: 10px;
  padding: 10px 12px; font-size: 12px; color: var(--gris); line-height: 1.45; min-height: 64px; font-family: inherit; }
button.nv-pill, button.nv-desc { cursor: pointer; }
button.nv-desc { display: flex; align-items: flex-start; }
button.nv-pill:hover, button.nv-desc:hover { border-color: var(--borde-fuerte); }
.nv-lectura .nv-desc { color: var(--gris); }
.nv-pill.bajo.sel { background: var(--niv-bajo-fondo); border-color: var(--niv-bajo-borde); color: var(--niv-bajo-txt); }
.nv-pill.medio.sel { background: var(--niv-medio-fondo); border-color: var(--niv-medio-borde); color: var(--niv-medio-txt); }
.nv-pill.alto.sel { background: var(--niv-alto-fondo); border-color: var(--niv-alto-borde); color: var(--niv-alto-txt); }
.nv-desc.sel { border-width: 1.5px; font-weight: 600; }
.nv-desc.bajo.sel { background: var(--niv-bajo-fondo); border-color: var(--niv-bajo-borde); color: var(--niv-bajo-txt-osc); }
.nv-desc.medio.sel { background: var(--niv-medio-fondo); border-color: var(--niv-medio-borde); color: var(--niv-medio-txt-osc); }
.nv-desc.alto.sel { background: var(--niv-alto-fondo); border-color: var(--niv-alto-borde); color: var(--niv-alto-txt-osc); }
button.nv-pill[disabled], button.nv-desc[disabled] { cursor: default; }
.oculto-visual { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------ Tanda 4: centros de control, Ranking y listas del líder
 * .dd: desplegable de selección múltiple (Unidad › Equipo). .tg: etiqueta encendible ("Pendiente en", estados).
 * .ind: indicador clickeable de pilar (Listo · 78% / Pendiente). .act: botón de acción por fila (ancho fijo). */
.dd { position: relative; }
.dd-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid var(--borde); border-radius: 10px; padding: 9px 13px; min-height: 40px; font-size: 13px; font-weight: 600; color: var(--texto-2); background: var(--sup-control); }
.dd-btn.on { border-color: var(--verde-borde); background: var(--verde-suave); color: var(--verde-texto); }
.dd-menu { position: absolute; top: 44px; left: 0; z-index: 20; background: var(--sup-elevada); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: var(--sombra-menu); padding: 6px; min-width: 220px; max-height: 340px; overflow: auto; }
.dd-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--texto-2); background: none; border: none; text-align: left; min-height: 36px; }
.dd-opt:hover { background: var(--fondo); }
.dd-bx { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--borde-fuerte); display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--txt-inverso); flex-shrink: 0; }
.dd-bx.on { background: var(--verde-deco); border-color: var(--verde-deco); }
.tg { font-size: 12px; font-weight: 700; padding: 6px 12px; min-height: 32px; border-radius: 999px; border: 1.5px solid var(--borde); color: var(--gris); background: var(--sup-control); }
.tg:hover { border-color: var(--borde-fuerte); }
.tg.on { background: var(--ambar-suave); border-color: var(--ambar-borde); color: var(--ambar); }
.tg.on.verde { background: var(--verde-suave); border-color: var(--verde-borde-2); color: var(--verde-texto); }
.tg.on.coral { background: var(--coral-suave); border-color: var(--coral-borde); color: var(--coral-osc-txt); }
.seg2 { display: inline-flex; background: var(--borde-2); border-radius: 10px; padding: 3px; }
.seg2 button { font-size: 12.5px; font-weight: 600; color: var(--txt-suave-fondo); padding: 6px 12px; border-radius: 8px; background: none; border: none; min-height: 32px; }
.seg2 button.on { background: var(--sup-elevada); color: var(--texto); font-weight: 700; box-shadow: var(--sombra-sutil); }
a.ind, span.ind { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ind.ok { background: var(--est-listo-fondo); color: var(--est-listo-txt); }
.ind.pend { background: var(--est-pend-fondo); color: var(--est-pend-txt); }
.ind.cur { background: var(--est-curso-fondo); color: var(--est-curso-txt); }
a.ind:hover { filter: brightness(.96); text-decoration: underline; }
.act { display: inline-flex; align-items: center; justify-content: center; width: 132px; min-height: 34px; font-weight: 700; font-size: 12px;
  border-radius: 8px; color: var(--btn-txt); background: var(--verde-solido); border: 1px solid var(--verde-solido); text-decoration: none; margin: 2px 0; }
.act:hover { color: var(--btn-txt); filter: brightness(.94); }
.act.res { background: var(--teal-osc); border-color: var(--teal-osc); }
.act.pot { background: var(--coral-solido); border-color: var(--coral-solido); }
.act.cal { background: var(--naranja); border-color: var(--naranja); }
.act.plan { background: var(--violeta); border-color: var(--violeta); }
.act.ver { background: var(--sup-control); border-color: var(--borde-fuerte); color: var(--texto-2); }
.act.ver:hover { color: var(--texto); background: var(--fondo); }
.act.off { background: var(--borde-2); border-color: var(--borde); color: var(--gris-2); cursor: default; }
.pyr { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.pyr-l { display: flex; align-items: center; column-gap: 6px; row-gap: 0; flex-wrap: wrap; min-width: 0; }
.pyr-l .q { white-space: nowrap; }
.pyr-l .chip { padding: 2px 8px; font-size: 10.5px; }
.pyr-l .a { color: var(--texto); font-weight: 600; }
.pyr-l .q { color: var(--gris); }
.sinub { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--txt-suave-fondo); background: var(--borde-2);
  border-radius: 999px; padding: 4px 10px; min-height: 28px; text-decoration: none; }
.sinub:hover { color: var(--texto-2); background: var(--borde); }

/* Ventana de confirmación: recuadro "Se perderá" (eliminar ciclo liberado, canvas v111) */
.se-perdera { margin-top: 18px; background: var(--aviso-error-fondo); border: 1px solid var(--aviso-error-borde); border-radius: 12px; padding: 14px 16px; }
.se-perdera .lbl { margin: 0 0 8px; color: var(--aviso-error-txt); }
.se-perdera .cifras { display: flex; gap: 10px; }
.se-perdera .cifra { flex: 1; background: var(--sup-tarjeta); border-radius: 10px; padding: 10px; text-align: center; }
.se-perdera .cifra strong { display: block; font-size: 20px; font-weight: 800; color: var(--aviso-error-txt); }
.se-perdera .cifra span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--txt-suave); }

/* ------------------------------------------------ Tanda 8 (ronda 2)
 * Punto 41. Migas fijas: el contenedor de <Migas> (hijo directo de .zoe-contenido) queda pegado bajo la barra
 * superior, con fondo blanco sólido y un borde inferior leve. Las sombras extienden el blanco hasta los bordes
 * de la pantalla sin generar scroll horizontal (el menú lateral queda por encima). El título no se fija. */
html { scroll-padding-top: calc(var(--topbar) + 56px); }
.zoe-contenido > .sc-host:has(> nav.migas) {
  position: sticky; top: var(--topbar); z-index: 25;
  margin: -32px -32px 18px; padding: 10px 32px;  /* 36 px de alto (corrección 89, canvas v143: tablas fijas a 96 px) */
  background: var(--sup-barra);
  box-shadow: 0 1px 0 var(--borde), 100vw 0 0 var(--sup-barra), 100vw 1px 0 var(--borde), -100vw 0 0 var(--sup-barra), -100vw 1px 0 var(--borde);
}
.zoe-contenido > .sc-host > nav.migas { margin-bottom: 0; min-height: 16px; }

/* Punto 42. Campo de texto libre que crece hacia abajo (helper ZoeApi.campoLibre), con altura máxima y scroll interno. */
textarea.crece { display: block; width: 100%; resize: none; overflow-y: auto; line-height: 1.45; min-height: 40px; max-height: 140px;
  field-sizing: content; white-space: pre-wrap; overflow-wrap: anywhere; }
.campo-libre { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.campo-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 3px; font-size: 11px; color: var(--gris); }
.campo-cont { font-weight: 700; color: var(--ambar); font-variant-numeric: tabular-nums; white-space: nowrap; }
.campo-cont.tope { color: var(--rojo-txt); }
/* Texto del usuario en listas: completo, con sus saltos de línea y sin desbordar. */
.texto-libre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Ventana de confirmación con cita (ZoeApi.confirmar({ cita })). Una sola regla: la ventana crece hacia abajo
 * hasta el alto de la pantalla menos el margen; si no alcanza, solo la cita hace scroll y el título y los botones quedan a la vista. */
.modal.confirmar { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100vh - 64px); }
.modal.confirmar > * { flex-shrink: 0; }
.modal.confirmar > .cita { flex: 1 1 auto; min-height: 60px; overflow: auto; }
.cita { margin: 16px 0 0; padding: 12px 14px; background: var(--cita-fondo); border: 1px solid var(--cita-borde); border-left: 4px solid var(--cita-borde-izq);
  border-radius: 10px; font-size: 13.5px; line-height: 1.5; color: var(--texto); white-space: pre-wrap; overflow-wrap: anywhere; }
.modal.confirmar > .nota-cita { margin: 14px 0 0; font-size: 13px; color: var(--gris); line-height: 1.5; }
/* Campos compactos (OKR, acciones): la ayuda de teclado se ve solo mientras se escribe en el campo. */
.campo-libre.compacto .campo-pie:not(:has(.campo-cont)) { display: none; }
.campo-libre.compacto:focus-within .campo-pie { display: flex; }
.campo-libre.compacto .campo-pie > span:first-child { visibility: hidden; }
.campo-libre.compacto:focus-within .campo-pie > span:first-child { visibility: visible; }

/* Ronda 2 · tanda 11: estados de evaluar (punto 50), botón "Ver plan" (55) y selector de ciclo (48). */
.ind.por-evaluar { background: var(--est-evaluar-fondo); color: var(--est-evaluar-txt); }
.ind.por-calibrar { background: var(--est-calibrar-fondo); color: var(--est-calibrar-txt); }
.act.plan.out { background: var(--sup-control); color: var(--violeta-texto); border-color: var(--violeta-borde-2); }
.act.plan.out:hover { color: var(--violeta-texto); background: var(--violeta-suave); }
.sel-ciclo .dd-btn { font-weight: 700; color: var(--texto); max-width: none; }
.sel-ciclo .dd-menu { min-width: 240px; }
.sel-ciclo.der .dd-menu { left: auto; right: 0; }

/* Ronda 3 · altas: "Evaluado · falta autoevaluación" (retoque B), gris y sin botón. */
.ind.por-espera { background: var(--est-espera-fondo); color: var(--est-espera-txt); white-space: normal; border-radius: 10px; line-height: 1.35; }

/* Ronda 5 · reglas A–F (docs/CAMBIOS_RONDA5.md; canvas v125 ComponenteReglasInterfaz). Valen para todas las tablas. */
/* A. Estado en tablas: texto con color y puntito del mismo color, sin caja, una línea; la explicación en title/aria-label. */
.st { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 12.5px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-decoration: none; cursor: default; vertical-align: middle; }
.st::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
a.st { cursor: pointer; }
a.st:hover { text-decoration: underline; }
.st-ok { color: var(--est-ok-txt); } .st-amb { color: var(--est-amb-txt); } .st-gr { color: var(--est-gris-txt); } .st-bl { color: var(--est-azul-txt); } .st-rd { color: var(--est-rojo-txt); }
.st-or { color: var(--est-naranja-txt); }   /* Por calibrar: naranja (4.5:1 sobre blanco), puntito del mismo color (canvas v136) */
/* Corrección 86 (canvas v136): calma para lo hecho, color para lo que pide acción. Lo que falta (ámbar/naranja) en
   peso medio-alto; lo listo, ✓ verde con el % en negrita (.ck). */
.st-amb, .st-or { font-weight: 600; }
.st.ck { font-weight: 700; color: var(--est-ok-txt); }
.st.ck::before { content: '✓'; width: auto; height: auto; background: none; border-radius: 0; font-size: 13px; font-weight: 800; }
.st-nada { color: var(--gris); font-weight: 500; }
.st-nada::before { display: none; }
/* B. Color solo en el estado: avatar en tono suave, equipo como texto con puntito, pilar en gris pequeño. */
.avs { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--borde);
  color: var(--txt-medio); font-size: 10px; font-weight: 700; flex-shrink: 0; }
.eqt { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 12.5px; color: var(--texto-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.eqt::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--c, var(--eq-sin-franja)); flex-shrink: 0; }
.ptag { font-size: 11px; font-weight: 500; color: var(--txt-suave-fondo); background: var(--borde-2); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.peso-gris { font-size: 11.5px; font-weight: 500; color: var(--txt-suave-fondo); }
/* C. Filas de una línea con .tbl.linea. (Los encabezados de tabla se definen en «Corrección 89», al final.) */
.tbl.linea .tbl-fila { min-height: 48px; height: 48px; }
.tbl.linea .tbl-fila > * { padding: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl.linea .tbl-fila > .lane { overflow: visible; }
.nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.persona-c { display: flex; align-items: center; gap: 9px; min-width: 0; }
.persona-c .nm { font-weight: 500; color: var(--texto); }
a.nm:hover { color: var(--verde-accion-txt); text-decoration: underline; }
/* D. Alineación: texto a la izquierda, números a la derecha, acciones en carriles fijos a la derecha (vacíos si no hay). */
.tbl .num, .tbl-cab .num { text-align: right; justify-self: stretch; font-variant-numeric: tabular-nums; }
.tbl-cab .acc { text-align: right; }
.lane { display: flex; gap: 6px; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.carril { display: inline-flex; justify-content: flex-end; flex-shrink: 0; width: var(--carril, 140px); }
.carril.mas { width: 52px; }
.lane .dd-menu { left: auto; right: 0; top: 36px; min-width: 200px; }
.mi { display: flex; align-items: center; width: 100%; padding: 8px 12px; min-height: 36px; font-size: 12.5px; font-weight: 500; border-radius: 8px;
  color: var(--texto-2); background: none; border: none; text-align: left; text-decoration: none; white-space: nowrap; }
.mi:hover { background: var(--borde-2); color: var(--texto); }
.mi[aria-disabled="true"] { color: var(--gris-2); cursor: not-allowed; }
.bsm { border: 1px solid var(--borde); background: var(--sup-control); color: var(--gris); font-size: 12px; font-weight: 500; border-radius: 8px; padding: 0 9px;
  min-height: 30px; white-space: nowrap; }
.bsm:hover { color: var(--texto-2); background: var(--fondo); }
/* E. Filtros desplegables: botón .ddl (activo con borde verde y numerito), menú .dd-menu con .bx (varias) o .rd (una). */
.filtros-r5 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filtros-r5 .buscador { width: 220px; }
.filtros-r5 .buscador .input { height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
.filtros-r5 .derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.filtros-r5 .mostrando, .filtros-r5 .cc-mostrando { display: none; }
@media (min-width: 1420px) { .filtros-r5 .mostrando, .filtros-r5 .cc-mostrando { display: inline; } .filtros-r5 .buscador { width: 220px; } }
@media (max-width: 1419px) { .filtros-r5 .buscador { width: 190px; } }
.ddl { display: inline-flex; align-items: center; gap: 4px; height: 36px; max-width: 260px; padding: 0 13px; border: 1px solid var(--borde);
  border-radius: 10px; background: var(--sup-control); font-size: 13px; font-weight: 600; color: var(--texto-2); white-space: nowrap; }
.ddl .ddl-t { overflow: hidden; text-overflow: ellipsis; }
.ddl:hover { border-color: var(--borde-fuerte); }
.ddl.on { border-color: var(--verde-deco); color: var(--verde-texto); background: var(--verde-suave); }
.ddl-n { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--verde-solido); color: var(--btn-txt); font-size: 10px; font-weight: 700; margin-left: 4px; }
.bx { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--borde-fuerte); display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--txt-inverso); flex-shrink: 0; }
.bx.on { background: var(--verde-deco); border-color: var(--verde-deco); }
.rd { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--borde-fuerte); display: inline-flex; flex-shrink: 0; }
.rd.on { border-color: var(--verde-deco); background: radial-gradient(var(--verde-deco) 42%, var(--sup-elevada) 46%); }
.dd-sep { height: 1px; background: var(--borde-2); margin: 4px 6px; }
.f-activos { font-size: 12.5px; color: var(--gris); white-space: nowrap; }
.f-activos .link { font-size: 12.5px; min-height: 28px; }
.dd-mas { padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 250px; max-height: min(72vh, 560px); }
.dd-mas .dd-menu { position: static; box-shadow: none; border: none; padding: 0; min-width: 0; max-height: 200px; flex-shrink: 0; }
.dd-mas .lbl { margin: 4px 4px 0; }
/* F. Botones de acción suaves: fondo tenue, texto oscuro del mismo color, borde fino, mismo tamaño, peso medio. */
.bs { display: inline-flex; align-items: center; justify-content: center; width: var(--carril, 140px); max-width: 100%; min-height: 32px; padding: 0 10px;
  font-size: 12px; font-weight: 500; line-height: 1.2; border-radius: 8px; border: 1px solid; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-decoration: none; cursor: pointer; background: var(--sup-suave); color: var(--texto-2); border-color: var(--borde); }
.bs:hover { filter: brightness(.97); }
.bs.auto { width: auto; }
.bs-teal { background: var(--teal-suave); color: var(--teal-txt); border-color: var(--teal-borde); } .bs-teal:hover { color: var(--teal-txt); }
.bs-green { background: var(--verde-suave); color: var(--verde-texto); border-color: var(--verde-borde); } .bs-green:hover { color: var(--verde-texto); }
.bs-coral { background: var(--coral-suave); color: var(--coral-txt); border-color: var(--coral-borde); } .bs-coral:hover { color: var(--coral-txt); }
.bs-purple { background: var(--violeta-suave); color: var(--violeta-texto); border-color: var(--violeta-borde); } .bs-purple:hover { color: var(--violeta-texto); }
.bs-gray { background: var(--sup-suave); color: var(--texto-2); border-color: var(--borde); } .bs-gray:hover { color: var(--texto); }
.bs-red { background: var(--rojo-fondo); color: var(--rojo-txt-hover); border-color: var(--rojo-borde); }
.bs-red:hover { color: var(--rojo-txt-hover); }
/* Corrección 83: sobre una tarjeta con fondo de color (tarjetas de pilar), el botón suave va con relleno BLANCO,
   borde y texto del color oscuro del pilar; el relleno tenue aparece solo en hover. Sobre blanco o gris, el tenue de arriba. */
.bs-sobre { background: var(--sup-control); font-weight: 600; }
.bs-sobre:hover { filter: none; }
.bs-sobre.bs-teal { color: var(--teal-txt); border-color: var(--teal-osc); } .bs-sobre.bs-teal:hover { background: var(--teal-suave); color: var(--teal-txt); }
.bs-sobre.bs-green { color: var(--verde-accion-txt); border-color: var(--verde-solido); } .bs-sobre.bs-green:hover { background: var(--verde-suave); color: var(--verde-accion-txt); }
.bs-sobre.bs-coral { color: var(--coral-txt); border-color: var(--coral-solido); } .bs-sobre.bs-coral:hover { background: var(--coral-suave); color: var(--coral-txt); }
.bs-sobre.bs-gray { color: var(--texto-2); border-color: var(--borde-fuerte); } .bs-sobre.bs-gray:hover { background: var(--sup-suave); color: var(--texto); }
.bs.off, .bs[aria-disabled="true"] { opacity: .55; cursor: not-allowed; filter: none; }
/* Secciones plegables por equipo (punto 72) en la tabla compartida del centro de control.
   Corrección 86 (canvas v136): banda con el tono del equipo (--banda), franja izquierda de 4 px (--c), nombre en su
   cajita suave (como en Estadísticas y Colaboradores), conteo en gris y barrita de avance (con nota final / personas). */
.gh { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 18px; background: var(--banda, var(--fondo));
  border-top: 1px solid var(--borde-2); border-left: 4px solid var(--c, var(--eq-sin-franja)); }
.gh-t { display: inline-flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; font: inherit; min-height: 36px; text-align: left; cursor: pointer; }
.gh-t .chev { font-size: 11px; color: var(--gris); width: 10px; }
.gh-eq { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 3px 12px; border-radius: 8px; white-space: nowrap; }
.gh-sub { font-size: 12.5px; color: var(--txt-suave-fondo); white-space: nowrap; }
.gh-barra { display: inline-block; width: 70px; height: 6px; border-radius: 999px; background: var(--graf-barra-pista); overflow: hidden; flex-shrink: 0; }
.gh-barra > span { display: block; height: 6px; border-radius: 999px; background: var(--c, var(--eq-sin-franja)); }
.gh .bs { margin-left: auto; }
/* Encabezados de los pilares: puntito de color (canvas v136 .gt .ph; texto negro desde la corrección 89). */
.ph { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ph::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--c); flex-shrink: 0; }
/* Corrección 89: el puntito conserva el color del pilar; el texto va en negro como los demás títulos. */
.ph-res { --c: var(--pilar-res); } .ph-comp { --c: var(--pilar-comp); } .ph-pot { --c: var(--pilar-pot); }
/* Campanita por fila (corrección 86): "Notificar" sin repetir el texto; solo en filas con algo pendiente de otra persona. */
.carril.campana { width: 30px; }
.bell { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--borde); background: var(--sup-control); color: var(--gris); cursor: pointer; flex-shrink: 0; }
.bell:hover { background: var(--borde-2); color: var(--texto-2); }
.bell.off, .bell[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.bell.off:hover { background: var(--sup-control); color: var(--gris); }

/* Ronda 5 · anillo y aviso (puntos 70 y 71; canvas v125 ComponenteReglasInterfaz: .ring y .aviso-flot).
 * Anillo (~90 px) arriba a la derecha de las pantallas de evaluación: parcial en tono suave, completo con el color
 * pleno del pilar (--c). El marcado sale del componente Anillo (web/Anillo.dc.html) y los datos de ZoeApi.anillo(). */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.anillo { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.ring { --p: 0; --c: var(--graf-nota); width: 90px; height: 90px; border-radius: 999px; flex-shrink: 0;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--graf-anillo-pista) 0); display: flex; align-items: center; justify-content: center;
  transition: --p .6s ease, opacity .3s ease; animation: ring-entra .6s ease; }
.ring .in { width: 68px; height: 68px; border-radius: 999px; background: var(--graf-anillo-centro); display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ring.parcial { opacity: .55; }
.anillo .ring-et { font-size: 11.5px; font-weight: 600; color: var(--gris); text-align: center; max-width: 130px; line-height: 1.3; }
@keyframes ring-entra { from { --p: 0; } }
@media (prefers-reduced-motion: reduce) { .ring { transition: none; animation: none; } }
/* Cabecera de las pantallas de evaluación: título a la izquierda, anillo a la derecha. */
.cab-anillo { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.cab-anillo > :first-child { min-width: 0; }
/* Punto 82: el anillo también en las vistas de lectura y de seguimiento. `.anillo-lado` agrupa el anillo con un dato
 * pequeño a su izquierda (la etiqueta de Potencial, solo para líder y TAC; el selector de ciclo). */
.anillo-lado { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.anillo-tag { font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
/* Aviso flotante verde al volver al origen ("Evaluación de X guardada" + "Evaluar siguiente (N pendientes)"). */
.aviso-flot { position: fixed; top: 78px; right: 28px; z-index: 60; background: var(--toast-fondo); border: 1px solid var(--toast-borde);
  border-left: 4px solid var(--toast-acento); border-radius: 12px; box-shadow: var(--sombra-aviso); padding: 10px 10px 10px 16px;
  display: flex; align-items: center; gap: 14px; max-width: 620px; animation: aviso-entra .25s ease; }
.aviso-flot .ok { font-size: 16px; font-weight: 800; color: var(--toast-txt); }
.aviso-flot .tx { font-size: 13.5px; font-weight: 700; color: var(--toast-txt); line-height: 1.35; }
.aviso-flot .bs { width: auto; padding: 0 12px; min-height: 34px; flex-shrink: 0; }
.aviso-flot .x { width: 40px; height: 40px; border: none; background: none; border-radius: 8px; color: var(--ico-suave); font-size: 20px; line-height: 1; flex-shrink: 0; }
.aviso-flot .x:hover { background: var(--fondo); color: var(--texto-2); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-6px); } }
/* Varios avisos a la vez se apilan arriba a la derecha (ZoeApi.aviso y el aviso al volver al origen). */
.avisos-flot { position: fixed; top: 78px; right: 28px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.avisos-flot .aviso-flot { position: relative; }
.aviso-flot.error { border-color: var(--toast-error-borde); border-left-color: var(--toast-error-acento); }
.aviso-flot.error .ok, .aviso-flot.error .tx { color: var(--toast-error-txt); }
/* Corrección 96: barra fina abajo que se vacía con el tiempo que le queda al aviso (ZoeApi.aviso la anima). */
.aviso-flot { overflow: hidden; }
.aviso-flot .barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--toast-acento); opacity: .55;
  transform-origin: left center; transform: scaleX(1); pointer-events: none; }
.aviso-flot.error .barra { background: var(--toast-error-acento); }
@media (prefers-reduced-motion: reduce) { .aviso-flot { animation: none; } .aviso-flot .barra { display: none; } }

/* Corrección 81 · color en tablas de datos (canvas v130, ComponenteReglasInterfaz regla B "Uso del color").
 * Color solo para identidad (equipo en su caja suave), pilar (puntito en el encabezado, valor en tono legible) y
 * nivel (estados, nota final y Nine Box). Lo demás es neutro; "Pendiente" y los guiones en gris (--gris, 4.8:1).
 * Los colores de equipo y de Nine Box vienen de ZoeApi.colorEquipo y ZoeApi.nineBox (api.js, mismo bloque).
 * No aplica al Centro de control ni a "Mi equipo", que siguen con las reglas A y B de la ronda 5. */
.caja-eq, .caja-nb { display: inline-flex; align-items: center; max-width: 100%; font-size: 11.5px; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; line-height: 1.35; }
.caja-eq { background: var(--eq-f, var(--eq-sin-fondo)); color: var(--eq-t, var(--txt-normal)); }
.caja-nb { background: var(--nb-f, var(--nb-vacia-fondo)); color: var(--nb-t, var(--nb-vacia-txt)); box-shadow: inset 0 0 0 1px var(--nb-b, transparent); }
.pil-cab { display: inline-flex; align-items: center; gap: 5px; }
.pil-cab::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--pc, var(--txt-tenue)); flex-shrink: 0; }
.pil-cab.resultados { --pc: var(--pilar-res); } .pil-cab.competencias { --pc: var(--pilar-comp); } .pil-cab.potencial { --pc: var(--pilar-pot); }
.pil-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.pil-v.resultados { color: var(--pilar-res-txt); } .pil-v.competencias { color: var(--pilar-comp-txt); } .pil-v.potencial { color: var(--pilar-pot-txt); }
a.pil-v { text-decoration: none; border-bottom: 1.5px dotted currentColor; }
a.pil-v:hover { filter: brightness(.8); }
.nota-niv { font-weight: 800; font-variant-numeric: tabular-nums; }
.nota-niv.alto { color: var(--nota-alto-txt); } .nota-niv.medio { color: var(--nota-medio-txt); } .nota-niv.bajo { color: var(--nota-bajo-txt); }
.nota-niv.nulo, .dato-nulo { color: var(--nota-nulo-txt); font-weight: 500; }

/* ------------------------------------------------ Corrección 84 (b) · plantilla común (canvas v138, ComponenteMapaPatrones)
 * Orden de toda pantalla de pilar, seguimiento o lista: migas · cabecera (.hdr) · barra de contexto (.ctx) · aviso azul
 * (.info) · contenido · botón principal abajo a la derecha (.pmain).
 * - .hdr: a la izquierda (.hdr-izq) avatar si es una persona (.av-hdr, color del equipo), título y caja de equipo
 *   (.caja-eq); a la derecha SOLO el anillo, dentro de .rgw (mismo ancho y altura en todas).
 * - .ctx: el ciclo SIEMPRE primero a la izquierda (<select class="cic"> o etiqueta fija .cic.fijo si la pantalla trabaja
 *   solo sobre el ciclo vigente), luego el selector de equipo (solo Resultados), las etiquetas de estado (.etq) y el
 *   dato suelto (.ctx-nota); las acciones van a la derecha en .der. Ayudantes en api.js: ZoeApi.opcionesCiclo y
 *   ZoeApi.cabecera.
 * - .vacio: el único estado vacío (texto gris centrado, sin dibujos), dentro de la propia tabla o tarjeta. */
.hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.hdr-izq { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; flex: 1; }
.hdr h1 { margin: 0; font-size: 22px; font-weight: 800; color: var(--tinta); }
.av-hdr { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; flex-shrink: 0; }
.rgw { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 120px; min-height: 128px; }
.rgw .anillo { width: 120px; }
.rgw .ring-et { max-width: 120px; }
/* Corrección 97 · posición del anillo, una sola regla para todas las pantallas con anillo.
 * Marcado: la barra de contexto va DENTRO de la cabecera, después del anillo:
 *   <div class="hdr"><div class="hdr-izq">título…</div><div class="rgw">Anillo</div><div class="ctx">…</div></div>
 * - Rejilla de dos columnas: a la izquierda el título (fila 1) y la barra de contexto (fila 2, pegada abajo); a la
 *   derecha el anillo ocupa las dos filas y queda centrado en vertical (con una o dos líneas de título, con o sin ciclo).
 * - La cabecera mide al menos lo que .rgw (128 px) y el grupo anillo + etiqueta se centra dentro de .rgw.
 * - Misma distancia arriba y abajo: 18 px de las migas a la cabecera (margen de las migas) y 18 px de la cabecera al
 *   primer bloque de abajo (tarjeta, aviso ámbar o vacío; se anula su margin-top propio). Así el centro del anillo
 *   queda a mitad de camino entre la franja de migas y la tarjeta.
 * - A la derecha (canvas v151 .hzn): .rgw (120 px) termina a 28 px del borde de la tarjeta; título, barra de contexto
 *   y sus acciones reservan 164 px (16 + 120 + 28), así las acciones de la barra quedan a la izquierda del círculo.
 * - Diferencia con el canvas: allí el anillo va en position:absolute y puede invadir los márgenes; aquí ocupa su
 *   columna (mín. 128 px de alto), así nunca toca las migas ni la tarjeta aunque la etiqueta tenga dos líneas. */
.hdr:has(> .rgw) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr;
  column-gap: 16px; align-items: start; margin-bottom: 18px; }
.hdr:has(> .rgw) > .hdr-izq { grid-column: 1; grid-row: 1; }
.hdr:has(> .rgw) > .ctx { grid-column: 1; grid-row: 2; align-self: end; }
.hdr > .rgw { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-content: center;
  margin-right: 28px; }
/* El primer bloque de abajo puede venir dentro de un componente (dc-import: .sc-host > div > .card). */
.hdr:has(> .rgw) + *, .hdr:has(> .rgw) + .sc-host > :first-child,
.hdr:has(> .rgw) + .sc-host > :first-child > :first-child { margin-top: 0 !important; }
.ctx { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; position: relative; }
.ctx .der { margin-left: auto; display: flex; align-items: center; gap: 10px; text-align: left; }
.cic { height: 36px; min-width: 200px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--texto-2);
  border: 1px solid var(--borde); border-radius: 10px; background: var(--sup-control); font-family: inherit; }
select.cic { cursor: pointer; }
select.cic:hover { border-color: var(--borde-fuerte); }
select.cic:focus { border-color: var(--foco); outline: none; box-shadow: var(--foco-anillo); }
.cic.fijo { display: inline-flex; align-items: center; min-width: 0; background: var(--fondo); cursor: default; white-space: nowrap; }
.etq { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--etq-gris-fondo); color: var(--etq-gris-txt); }
.etq.ok { background: var(--etq-ok-fondo); color: var(--etq-ok-txt); }
.etq.amb { background: var(--etq-amb-fondo); color: var(--etq-amb-txt); }
.etq.gr { background: var(--etq-gris-fondo); color: var(--etq-gris-txt); }
.etq.bl { background: var(--etq-azul-fondo); color: var(--etq-azul-txt); }
.ctx-nota { font-size: 12.5px; color: var(--gris); }
.ctx-nota b { color: var(--texto); font-weight: 700; }
.ctx .ddl { cursor: pointer; }
.ctx .bs.auto { min-height: 36px; padding: 0 14px; font-size: 13px; }
.info { display: flex; align-items: center; gap: 10px; background: var(--aviso-info-fondo); border: 1px solid var(--aviso-info-borde); color: var(--aviso-info-txt);
  border-radius: 12px; padding: 12px 16px; margin-top: 16px; font-size: 13px; font-weight: 600; }
.info svg { flex-shrink: 0; }
.aviso-amb { display: flex; align-items: center; gap: 10px; background: var(--aviso-amb-fondo); border: 1px solid var(--aviso-amb-borde); color: var(--aviso-amb-txt);
  border-radius: 12px; padding: 12px 16px; margin-top: 12px; font-size: 13px; font-weight: 700; }
.pmain { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 20px; }
/* Números 1 a 5 en círculo (canvas v141 .n5): un solo componente para toda la app.
 * - Para elegir: <button class="n5"> de 36 px dentro de .n5-fila (role="radiogroup"); elegido .n5.sel (verde de acción).
 *   .n5.sm = 28 px dentro de tablas (evaluación final). El área táctil crece con ::after (42 px / 36 px).
 *   Con disabled (hoja enviada) el elegido sigue verde y los demás van en --n5-inactivo-txt (sin opacidad: ≥4.5:1, 108 etapa 3).
 * - Solo lectura: <span class="n5 ro a|l|c"> con la tinta de su origen (.a autoevaluación verde, .l evaluación líder
 *   teal, .c evaluación final naranja; .vacia "Pendiente" o "—"). */
.n5 { width: 36px; height: 36px; border-radius: 999px; border: 1.5px solid var(--borde); display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 800; color: var(--gris); background: var(--sup-control); }
.n5-fila { display: flex; gap: 8px; flex-shrink: 0; }
button.n5 { position: relative; padding: 0; font-family: inherit; cursor: pointer; transition: border-color .12s, background .12s; }
button.n5::after { content: ''; position: absolute; inset: -3px; border-radius: 999px; }
button.n5:hover { border-color: var(--verde-deco); color: var(--texto-2); }
.n5.sel, button.n5.sel:hover { background: var(--verde-solido); border-color: var(--verde-solido); color: var(--btn-txt); }
.n5.sm { width: 28px; height: 28px; font-size: 12px; }
button.n5.sm::after { inset: -4px; }
button.n5[disabled] { cursor: default; }
button.n5[disabled]:not(.sel), button.n5[disabled]:hover:not(.sel) { border-color: var(--n5-inactivo-borde); color: var(--n5-inactivo-txt); }
.n5.ro { width: auto; min-width: 28px; height: 28px; padding: 0 8px; border-color: transparent; }
.n5.ro.a { background: var(--verde-suave); color: var(--verde-accion-txt); }
.n5.ro.l { background: var(--teal-suave); color: var(--teal-txt); }
.n5.ro.c { background: var(--naranja-suave); color: var(--naranja-osc); }
.n5.ro.vacia { background: var(--etq-gris-fondo); color: var(--etq-gris-txt); font-weight: 700; font-size: 11.5px; padding: 0 10px; }
.etq.baja { background: var(--etq-rojo-fondo); color: var(--etq-baja-txt); }

/* ------------------------------------------------ Corrección 89 (canvas v143): encabezados de TODAS las tablas
 * Un solo estilo: títulos en #111827, peso 600, 12.5 px, sin mayúsculas (los pilares conservan su puntito de color).
 * Fijos al desplazar: justo bajo la barra superior (60 px) o bajo las migas fijas (60 + 36 = 96 px).
 * Para que «sticky» funcione, ningún antecesor puede ser contenedor de desplazamiento: las tarjetas con tabla
 * van con overflow visible. Las tablas con desplazamiento horizontal usan .tbl-hx (encabezado fuera del área que
 * se desplaza, sincronizado por api.js). Sombra suave con .scrolled en la tabla, que api.js pone al desplazar. */
:root { --alto-migas: 0px; --tope-tabla: calc(var(--topbar) + var(--alto-migas)); --alto-cab: 38px; }
html:has(.zoe-contenido > .sc-host > nav.migas) { --alto-migas: 36px; }
.tbl-cab { position: sticky; top: var(--tope-tabla); z-index: 12; min-height: var(--alto-cab); background: var(--sup-tarjeta); }
.tbl-cab > *, .tabla th { font-size: 12.5px; font-weight: 600; color: var(--txt-fuerte); text-transform: none; letter-spacing: 0; white-space: nowrap; }
/* Títulos de columna con palabras completas (cerebro): si no caben, se parten en dos líneas (nunca se abrevian ni se
   cortan con «…»), y la fila de títulos se alinea abajo para que los de una línea queden sobre la línea de base común. */
.tbl-cab { align-items: end; }
.tbl-cab > *, .tbl-cab > * > button, .tbl-cab > * > button > span { white-space: normal; overflow-wrap: normal; text-overflow: clip; overflow: visible; line-height: 1.25; }
.tabla th { position: sticky; top: var(--tope-tabla); z-index: 12; background: var(--sup-tarjeta); }
.card .tbl-cab { border-radius: 15px 15px 0 0; }
.card:has(.tbl-cab) { overflow: visible; }
.card:has(.tbl-cab) > .tbl > .tbl-fila:last-child { border-radius: 0 0 15px 15px; }
.tbl.scrolled > .tbl-cab, .tbl-hx.scrolled > .tbl-hx-cab { box-shadow: var(--sombra-cab-tabla); }
/* Dentro de una ventana el desplazamiento es de la ventana: el encabezado se fija a su borde superior. */
.modal .tbl-cab { top: 0; }
/* Tabla ancha con desplazamiento horizontal: <div class="card tbl-hx" role="table">
 *   <div class="tbl-hx-cab"><div class="tbl" role="rowgroup" style="--cols…"><div class="tbl-cab" role="row">…</div></div></div>
 *   <div class="tbl-hx-cuerpo"><div class="tbl" role="rowgroup" style="--cols…">filas</div></div></div>
 * Las dos rejillas usan las mismas --cols y el mismo min-width, así que las columnas coinciden. */
.tbl-hx { overflow: visible; }
.tbl-hx-cab { position: sticky; top: var(--tope-tabla); z-index: 12; overflow: hidden; background: var(--sup-tarjeta); border-radius: 15px 15px 0 0; }
.tbl-hx-cab .tbl-cab { position: static; }
.tbl-hx-cuerpo { overflow-x: auto; border-radius: 0 0 15px 15px; }
/* Centro de control y Mi equipo: cada equipo en su bloque (.tc-grupo); su cabecera queda fija bajo los títulos
 * mientras se recorren sus personas y la del equipo siguiente la reemplaza. */
.tc-grupo > .gh { position: sticky; top: calc(var(--tope-tabla) + var(--alto-cab)); z-index: 11; }

/* ------------------------------------------------ Corrección 92 · avisos informativos: abajo y en el ⓘ del título
 * Regla: lo que informa va abajo; lo que cambia lo que la persona puede hacer va arriba (ciclo cerrado con botones
 * deshabilitados, errores, avisos ámbar .aviso-amb). El azul .info ya no se usa bajo el título:
 * - .nota-pie: nota discreta al final de la pantalla, después del contenido y de los botones. Gris --gris
 *   (#6B7280: 4.63:1 sobre el fondo #F9FAFB, 4.83:1 sobre blanco), 12 px, sin caja, con el ícono ⓘ (canvas v147 .nota).
 * - .info-tit: ⓘ junto al título (<button class="info-tit-b"> real) con el mismo texto en .info-tip (role="tooltip",
 *   enlazado con aria-describedby). Se ve al pasar el mouse, con el foco del teclado o al hacer clic (el clic alterna
 *   y lo deja fijo); Esc lo cierra. El comportamiento lo pone api.js (Corrección 92): no hace falta estado en la pantalla. */
.nota-pie { display: flex; align-items: flex-start; gap: 6px; margin: 24px 0 0; font-size: 12px; font-weight: 500;
  line-height: 1.45; color: var(--gris); }
.nota-pie svg { flex-shrink: 0; margin-top: 1px; }
.info-tit { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.hdr-izq > .info-tit, .tit-fila > .info-tit { margin-left: -6px; }
.tit-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.info-tit-b { position: relative; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent;
  color: var(--gris); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; }
.info-tit-b::after { content: ''; position: absolute; inset: -6px; border-radius: 999px; }
.info-tit-b:hover, .info-tit[data-estado="abierto"] .info-tit-b { color: var(--texto-2); background: var(--borde-2); }
.info-tit-b:focus-visible { outline: 2px solid var(--foco-info); outline-offset: 1px; }
.info-tip { display: none; position: absolute; top: calc(100% + 8px); left: -8px; z-index: 40; width: max-content; max-width: 340px;
  background: var(--tip-fondo); border-radius: 8px; box-shadow: var(--sombra-tip);
  padding: 8px 10px; font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--tip-txt); text-align: left; white-space: normal; }
/* Puente invisible entre el ⓘ y la burbuja: el mouse puede pasar a la burbuja sin que se cierre. */
.info-tip::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
/* "cerrado" (Esc o segundo clic) la oculta aunque sigan el mouse o el foco encima, hasta que salgan. */
.info-tit:not([data-estado="cerrado"]):hover .info-tip, .info-tit:not([data-estado="cerrado"]):has(.info-tit-b:focus-visible) .info-tip,
.info-tit[data-estado="abierto"] .info-tip { display: block; }

/* ------------------------------------------------ Corrección 94: tablas con columnas «con aire» (.tbl.aire)
 * Mismo reparto que la tabla de «Mi equipo» (TablaCentro): las columnas se reparten el ancho con fracciones
 * (minmax(mín, Nfr)), con 28 px fijos entre columnas vecinas, y cada valor empieza en el mismo borde izquierdo
 * que su título (también los números). Para la caja del Nine Box, dar a su columna un mínimo de ~170 px.
 * Uso: <div class="tbl linea aire" style="--cols: …">. Sirve igual con .tbl-hx (poner .aire en las dos .tbl);
 * no toca el título fijo (corrección 89). Las acciones a la derecha (.lane/.acc) siguen a la derecha. */
.tbl.aire > .tbl-cab, .tbl.aire > .tbl-fila, .tbl.aire > * > .tbl-fila { column-gap: 28px; padding-left: 20px; padding-right: 20px; }
.tbl.aire .num, .tbl.aire .tbl-cab .num, .tbl.aire .der { text-align: left; justify-self: start; }

/* Corrección 98 · burbuja de una celda del Nine Box, compartida por el Ranking de Desempeño (líder y TAC) y el Resumen
 * de Estadísticas (TAC). La celda lleva .nb-tiphost (botón o celda enfocable) y adentro .nb-tip (role="tooltip", con
 * aria-describedby desde la celda). Se ve con el cursor o el foco del teclado; Esc la oculta (.tip-off) hasta salir.
 * Lado y desplazamiento: ZoeApi.ubicarNineBoxTip (api.js) → .tip-arriba y --tip-x; textos: ZoeApi.nineBoxTip.
 * Círculos neutros (blanco, borde #D1D5DB, iniciales #374151): el color con significado ya lo lleva la celda. */
.nb-tiphost { position: relative; }
.nb-tiphost:hover, .nb-tiphost:focus-visible { z-index: 5; }
.nb-tip { display: none; position: absolute; left: var(--tip-x, calc(50% - 160px)); top: calc(100% + 8px); width: 320px; z-index: 30;
  background: var(--burbuja-fondo); color: var(--txt-fuerte); border: 1px solid var(--burbuja-borde); border-radius: 14px;
  box-shadow: var(--sombra-burbuja); flex-direction: column; text-align: left;
  cursor: pointer; overflow: visible; font-weight: 400; }
.nb-tip.sin-clic { cursor: default; }
.nb-tip::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nb-tiphost:hover .nb-tip, .nb-tiphost:focus-visible .nb-tip { display: flex; }
.nb-tiphost.tip-off .nb-tip { display: none; }
.nb-tiphost.tip-arriba .nb-tip { top: auto; bottom: calc(100% + 8px); }
.nb-tiphost.tip-arriba .nb-tip::before { top: auto; bottom: -10px; }
.nb-tip-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 13px 13px 0 0; }
.nb-tip-cab .t { font-size: 14px; font-weight: 800; min-width: 0; }
.nb-tip-cab .c { font-size: 12px; font-weight: 700; white-space: nowrap; }
.nb-tip-txt { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px 8px; }
.nb-tip-txt .d { font-size: 12px; color: var(--txt-normal); line-height: 1.35; }
.nb-tip-txt .a { font-size: 12.5px; font-weight: 800; color: var(--txt-fuerte); }
.nb-tip-lista { display: flex; flex-direction: column; gap: 2px; padding: 4px 14px 8px; border-top: 1px solid var(--burbuja-linea); }
.nb-tip-p { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.nb-tip-av { width: 28px; height: 28px; border-radius: 999px; background: var(--av-neutro-fondo); border: 1px solid var(--av-neutro-borde); color: var(--av-neutro-txt); font-size: 10.5px;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; }
.nb-tip-nm { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nb-tip-nm .n { font-size: 13px; font-weight: 700; color: var(--txt-fuerte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-tip-nm .e { font-size: 11.5px; color: var(--txt-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-tip-nota { font-size: 13px; font-weight: 800; white-space: nowrap; }
.nb-tip-mas { font-size: 12px; color: var(--txt-suave); padding: 0 14px 8px; }
.nb-tip-mas .ver { color: var(--verde-accion-txt); font-weight: 700; text-decoration: underline; }
.nb-tip-vacio { font-size: 12.5px; color: var(--txt-suave); padding: 10px 14px 12px; border-top: 1px solid var(--burbuja-linea); }
.nb-tip-pie { font-size: 11.5px; color: var(--txt-suave); padding: 8px 14px 10px; border-top: 1px solid var(--burbuja-linea); }

/* Corrección 98 · ventana de una celda del Nine Box (role="dialog"), la misma en el Ranking de Desempeño y en el Resumen
 * de Estadísticas: cabecera con los colores de la celda, círculos neutros, caja del equipo y nota final a la derecha.
 * Valores: ZoeApi.nineBoxVentana; al cerrar, el foco vuelve a la celda (ZoeApi.volverFocoCelda). */
.nbm-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid;border-radius:12px;padding:12px 14px;margin-bottom:16px}
.nbm-cab h2{margin:0;font-size:17px;font-weight:800;color:inherit}
.nbm-cab p{margin:4px 0 0;font-size:12.5px;color:inherit}
.nbm-cab p.a{font-weight:800}
.nbm-cab .cerrar{color:inherit;flex-shrink:0;margin:-6px -8px 0 0}
.nbm-av{width:32px;height:32px;border-radius:999px;background:var(--av-neutro-fondo);border:1px solid var(--av-neutro-borde);color:var(--av-neutro-txt);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}
.nbm-p .nota{margin-left:auto;font-size:14px;font-weight:800;white-space:nowrap}
.nbm-lista{display:flex;flex-direction:column;gap:10px}
.nbm-p{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--borde-normal);border-radius:10px;text-decoration:none;min-height:52px}
.nbm-p:hover{border-color:var(--verde-borde);background:var(--verde-suave)}
.nbm-p .n{display:block;font-size:14px;font-weight:700;color:var(--txt-fuerte)}
.nbm-p .e{display:block;font-size:12px;color:var(--txt-suave);margin-top:1px}