/* =====================================================================
   Sistema de Evaluación 360° — hoja de estilos principal
   Paleta pensada para transmitir calma y claridad: azules cielo suaves,
   verde salvia, grises cálidos y mucho espacio en blanco.
   ===================================================================== */

:root {
  /* Paleta calmada */
  --color-fondo: #f6f8f7;
  --color-superficie: #ffffff;
  --color-superficie-alterna: #eef4f2;
  --color-primario: #5b8a90;       /* azul-verde apagado */
  --color-primario-oscuro: #436a6f;
  --color-primario-claro: #cfe3e1;
  --color-acento: #9fb8a8;         /* verde salvia */
  --color-acento-oscuro: #7fa08d;
  --color-texto: #2f3b3a;
  --color-texto-suave: #5f6d6b;
  --color-borde: #dfe7e4;
  --color-exito: #6a9c78;
  --color-alerta: #c98a4b;
  --color-error: #b9584f;
  --color-error-fondo: #fbeceb;
  --color-exito-fondo: #eaf3ec;

  --fuente-base: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --radio: 12px;
  --radio-chico: 8px;
  --sombra: 0 2px 10px rgba(67, 106, 111, 0.08);
  --sombra-media: 0 8px 24px rgba(67, 106, 111, 0.12);
  --transicion: all 0.2s ease;
}

@media print {
  .no-imprimir, .admin-menu, .admin-topbar { display: none !important; }
  body { background: #fff; }
  .tarjeta { box-shadow: none; break-inside: avoid; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--fuente-base);
  background: var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primario-oscuro); }
a:hover { color: var(--color-primario); }

img { max-width: 100%; display: block; }

.contenedor {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

.contenedor-angosto {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------------- */
/* Encabezado público                                                */
/* ---------------------------------------------------------------- */
.barra-superior {
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
  padding: 18px 0;
}

.barra-superior .contenedor,
.barra-superior .contenedor-angosto {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-primario-oscuro);
  text-decoration: none;
}

.marca-icono {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primario-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primario-oscuro);
  font-weight: 700;
}

.logo-lifequiro {
  display: block;
  object-fit: contain;
}

.logo-lifequiro-login {
  width: 108px;
  height: 108px;
  margin: 0 auto 12px;
}

.logo-lifequiro-menu {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
}

/* ---------------------------------------------------------------- */
/* Tarjetas / superficies                                            */
/* ---------------------------------------------------------------- */
.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 32px;
  margin: 28px 0;
}

@media (max-width: 640px) {
  .tarjeta { padding: 22px; border-radius: var(--radio-chico); }
}

.tarjeta-suave {
  background: var(--color-superficie-alterna);
  border-radius: var(--radio);
  padding: 20px 24px;
}

/* ---------------------------------------------------------------- */
/* Tipografía                                                        */
/* ---------------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--color-primario-oscuro);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }

.subtitulo {
  color: var(--color-texto-suave);
  font-size: 1rem;
  margin-top: -6px;
}

.texto-suave { color: var(--color-texto-suave); }
.texto-centrado { text-align: center; }

/* ---------------------------------------------------------------- */
/* Botones                                                           */
/* ---------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radio-chico);
  padding: 12px 26px;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transicion);
}

.boton-primario {
  background: var(--color-primario);
  color: #fff;
}
.boton-primario:hover { background: var(--color-primario-oscuro); }

.boton-secundario {
  background: var(--color-superficie);
  color: var(--color-primario-oscuro);
  border: 1px solid var(--color-primario);
}
.boton-secundario:hover { background: var(--color-primario-claro); }

.boton-peligro {
  background: var(--color-error);
  color: #fff;
}
.boton-peligro:hover { background: #9c433b; }

.boton-chico { padding: 8px 16px; font-size: 0.85rem; }
.boton-ancho { width: 100%; }
.boton:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------------------------------------------------------------- */
/* Formularios                                                       */
/* ---------------------------------------------------------------- */
label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 6px;
  color: var(--color-texto);
}

.campo { margin-bottom: 20px; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  font-size: 0.98rem;
  font-family: inherit;
  color: var(--color-texto);
  background: var(--color-superficie);
  transition: var(--transicion);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px var(--color-primario-claro);
}

textarea { min-height: 110px; resize: vertical; }

.ayuda-campo {
  font-size: 0.82rem;
  color: var(--color-texto-suave);
  margin-top: 4px;
}

.fila-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

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

/* ---------------------------------------------------------------- */
/* Alertas / mensajes                                                */
/* ---------------------------------------------------------------- */
.alerta {
  border-radius: var(--radio-chico);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.alerta-error { background: var(--color-error-fondo); color: var(--color-error); border: 1px solid #f1cfcb; }
.alerta-exito { background: var(--color-exito-fondo); color: #3f6a4c; border: 1px solid #cfe3d5; }
.alerta-info  { background: var(--color-primario-claro); color: var(--color-primario-oscuro); border: 1px solid #bcd7d4; }

/* ---------------------------------------------------------------- */
/* Escala de calificación (radio "chips")                            */
/* ---------------------------------------------------------------- */
.pregunta-360 {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-borde);
}
.pregunta-360:last-child { border-bottom: none; }

.pregunta-360 p {
  margin: 0 0 12px;
  font-weight: 500;
}

.escala {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

@media (max-width: 640px) {
  .escala { grid-template-columns: repeat(5, 1fr); gap: 6px; }
}

.escala label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  padding: 10px 4px;
  font-weight: 400;
  font-size: 0.76rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transicion);
  color: var(--color-texto-suave);
}

.escala input[type="radio"] {
  margin: 0 0 2px;
  accent-color: var(--color-primario);
}

.escala label:hover { border-color: var(--color-primario); background: var(--color-primario-claro); }

.escala input[type="radio"]:checked + span,
.escala label:has(input:checked),
.escala label.seleccionada {
  border-color: var(--color-primario);
  background: var(--color-primario-claro);
  color: var(--color-primario-oscuro);
  font-weight: 600;
}

.pregunta-360.pregunta-pendiente {
  animation: resaltarPendiente 1.8s ease;
  border-radius: var(--radio-chico);
}

@keyframes resaltarPendiente {
  0%   { background: var(--color-error-fondo); }
  100% { background: transparent; }
}

/* ---------------------------------------------------------------- */
/* Encabezado de competencia dentro del formulario                   */
/* ---------------------------------------------------------------- */
.competencia-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
  padding-top: 8px;
}

.competencia-numero {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-acento);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* El contenido permanece visible sin JavaScript; al inicializarse, se
   presenta una sola competencia por bloque. */
.cuestionario-por-bloques .bloque-cuestionario {
  display: none;
}

.cuestionario-por-bloques .bloque-cuestionario.bloque-cuestionario-activo {
  display: block;
}

.indicador-paso {
  margin: 0 0 6px;
  color: var(--color-primario-oscuro);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.navegacion-pasos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--color-borde);
}

.navegacion-pasos-final .boton-primario {
  min-width: 210px;
}

@media (max-width: 520px) {
  .navegacion-pasos .boton { flex: 1; }
  .navegacion-pasos-final .boton-primario { min-width: 0; }
}

/* ---------------------------------------------------------------- */
/* Barra de progreso                                                 */
/* ---------------------------------------------------------------- */
.barra-progreso {
  height: 8px;
  background: var(--color-superficie-alterna);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.barra-progreso-relleno {
  height: 100%;
  background: var(--color-primario);
  transition: width 0.3s ease;
}

/* ---------------------------------------------------------------- */
/* Pie de página público                                             */
/* ---------------------------------------------------------------- */
.pie-publico {
  text-align: center;
  color: var(--color-texto-suave);
  font-size: 0.82rem;
  padding: 30px 20px 50px;
}

.mfa-qr-contenedor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  margin: 4px 0 14px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: #fff;
}

.mfa-qr {
  display: block;
  width: 260px;
  height: 260px;
  max-width: 100%;
  image-rendering: pixelated;
}

.mfa-configuracion-manual {
  margin: 18px 0;
  padding: 12px 14px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
}

.mfa-codigo {
  max-width: 220px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-align: center;
}

/* ---------------------------------------------------------------- */
/* Tablas (panel administrativo)                                     */
/* ---------------------------------------------------------------- */
.tabla-envoltura { overflow-x: auto; }

.campos-colaborador { border: 0; padding: 0; margin: 0; min-width: 0; }
.campos-colaborador:disabled input {
  color: var(--color-texto);
  background: var(--color-superficie-alterna);
  opacity: 1;
  -webkit-text-fill-color: var(--color-texto);
}

.acciones-empleado { min-width: 155px; }
.acciones-empleado summary { cursor: pointer; list-style: none; }
.acciones-empleado summary::-webkit-details-marker { display: none; }
.acciones-empleado-lista {
  position: fixed;
  z-index: 1000;
  width: 190px;
  max-width: calc(100vw - 16px);
  overflow-y: auto;
  white-space: normal;
  box-shadow: var(--sombra-media);
  padding: 4px;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  background: var(--color-superficie);
}
.acciones-empleado-lista form { margin: 0; }
.acciones-empleado-lista a,
.acciones-empleado-lista button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-texto);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.acciones-empleado-lista a:hover,
.acciones-empleado-lista button:not(:disabled):hover { background: var(--color-superficie-alterna); }
.acciones-empleado-lista button:disabled { opacity: 0.5; cursor: not-allowed; }

table.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

table.tabla-datos th,
table.tabla-datos td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-borde);
  white-space: nowrap;
}

table.tabla-datos th {
  color: var(--color-texto-suave);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

table.tabla-datos tbody tr:hover { background: var(--color-superficie-alterna); }

.etiqueta-estado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}
.estado-pendiente  { background: #fdf1e2; color: var(--color-alerta); }
.estado-completada { background: var(--color-exito-fondo); color: #3f6a4c; }
.estado-expirada,
.estado-anulada    { background: var(--color-error-fondo); color: var(--color-error); }

/* ---------------------------------------------------------------- */
/* Panel administrativo: estructura general                          */
/* ---------------------------------------------------------------- */
.admin-layout {
  display: flex;
  min-height: 100vh;
}

.admin-menu {
  width: 240px;
  flex-shrink: 0;
  background: var(--color-superficie);
  border-right: 1px solid var(--color-borde);
  padding: 24px 0;
}

.admin-menu .marca { padding: 0 22px 20px; }

.admin-menu nav a,
.admin-menu nav .enlace-menu {
  display: block;
  padding: 11px 22px;
  color: var(--color-texto-suave);
  text-decoration: none;
  font-size: 0.93rem;
  border-left: 3px solid transparent;
  width: 100%;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.admin-menu nav a:hover,
.admin-menu nav .enlace-menu:hover {
  background: var(--color-superficie-alterna);
  color: var(--color-primario-oscuro);
}

.admin-menu nav a.activo {
  border-left-color: var(--color-primario);
  background: var(--color-primario-claro);
  color: var(--color-primario-oscuro);
  font-weight: 600;
}

.admin-menu .menu-padre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 22px;
  color: var(--color-texto-suave);
  font-size: 0.93rem;
  font-weight: 600;
  border-left: 3px solid transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.admin-menu .menu-padre:hover {
  background: var(--color-superficie-alterna);
  color: var(--color-primario-oscuro);
}

.admin-menu .grupo-menu.activo > .menu-padre {
  color: var(--color-primario-oscuro);
  border-left-color: var(--color-primario);
}

.admin-menu .submenu-admin a {
  padding: 8px 22px 8px 40px;
  font-size: 0.86rem;
}

.admin-menu .submenu-admin {
  display: none;
}

.admin-menu .grupo-menu.abierto .submenu-admin {
  display: block;
}

.admin-menu .menu-indicador {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
}

.admin-contenido {
  flex: 1;
  min-width: 0;
  padding: 30px 34px 60px;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-usuario {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--color-texto-suave);
}

.menu-movil-boton {
  display: none;
  background: none;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  padding: 8px 12px;
  cursor: pointer;
}

@media (max-width: 880px) {
  .admin-layout { flex-direction: column; }
  .admin-menu {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-borde);
    display: none;
  }
  .admin-menu.abierto { display: block; }
  .menu-movil-boton { display: inline-flex; }
  .admin-contenido { padding: 22px 18px 50px; }
}

/* ---------------------------------------------------------------- */
/* Tarjetas de estadísticas (dashboard)                               */
/* ---------------------------------------------------------------- */
.rejilla-estadisticas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}

.tarjeta-estadistica {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 20px 22px;
}

.tarjeta-estadistica .numero {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-primario-oscuro);
}

.tarjeta-estadistica .etiqueta {
  color: var(--color-texto-suave);
  font-size: 0.85rem;
  margin-top: 2px;
}

/* ---------------------------------------------------------------- */
/* Panel general renovado                                            */
/* ---------------------------------------------------------------- */
.dashboard-pagina {
  min-height: 100vh;
  background: #f7faf9;
  color: #163c4b;
}

.dashboard-cuerpo {
  display: flex;
  min-height: calc(100vh - 86px);
}

.dashboard-menu-lateral {
  min-height: calc(100vh - 86px);
  box-shadow: 4px 0 14px rgba(25, 70, 78, 0.05);
}

.dashboard-menu-boton {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 9px;
  color: #fff;
  background: transparent;
  font-size: 1.25rem;
  cursor: pointer;
}

.dashboard-cabecera {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 42px;
  color: #fff;
  background: linear-gradient(135deg, #08615e 0%, #176a69 52%, #0d615f 100%);
  box-shadow: 0 2px 7px rgba(7, 70, 69, 0.18);
}

.dashboard-cabecera-titulo,
.dashboard-usuario {
  display: flex;
  align-items: center;
}

.dashboard-cabecera-titulo {
  gap: 18px;
  font-size: 1.85rem;
  font-weight: 700;
}

.dashboard-cabecera-titulo > svg {
  width: 48px;
  height: 48px;
}

.dashboard-cabecera svg,
.dashboard-aviso svg,
.dashboard-indicador svg,
.dashboard-panel svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-usuario {
  gap: 12px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.dashboard-usuario:hover { color: #fff; }

.dashboard-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #748b91;
  background: #f8fbfb;
}

.dashboard-avatar svg { width: 30px; height: 30px; stroke-width: 1.5; }
.dashboard-chevron { width: 20px; height: 20px; }

.dashboard-contenido {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 32px 40px 70px;
}

.dashboard-aviso {
  position: relative;
  min-height: 112px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  padding: 24px 20px 24px 28px;
  border: 1px solid #c7e0de;
  border-radius: 15px;
  background:
    linear-gradient(153deg, transparent 0 65%, rgba(118, 201, 195, 0.11) 65% 77%, transparent 77%),
    linear-gradient(145deg, #f4fbfa 0%, #eff9f8 62%, #d9efed 100%);
  box-shadow: 0 2px 8px rgba(18, 78, 83, 0.08);
}

.dashboard-aviso::after {
  content: '';
  position: absolute;
  right: 200px;
  bottom: -72px;
  width: 420px;
  height: 125px;
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 50%;
  transform: rotate(-13deg);
  pointer-events: none;
}

.dashboard-aviso-icono {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  color: #07635f;
  border-radius: 50%;
  background: linear-gradient(145deg, #b6e5df, #78c5bd);
}

.dashboard-aviso-icono svg { width: 35px; height: 35px; stroke-width: 2.7; }

.dashboard-aviso-texto {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 30px;
  z-index: 1;
}

.dashboard-aviso-texto::before {
  content: '';
  position: absolute;
  left: 0;
  top: -6px;
  width: 1px;
  height: 58px;
  background: #15827f;
}

.dashboard-aviso-texto strong { font-size: 1.23rem; color: #073f4c; }
.dashboard-aviso-texto span { font-size: 1rem; color: #315667; }

.dashboard-accion {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #0b6c67, #045753);
  font-weight: 650;
  text-decoration: none;
  box-shadow: 0 5px 12px rgba(3, 78, 74, 0.18);
}

.dashboard-accion:hover { color: #fff; background: #064f4c; }
.dashboard-accion span { font-size: 2rem; font-weight: 300; line-height: 0.7; }

.dashboard-indicadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 31px;
}

.dashboard-indicador {
  --indicador: #0cae98;
  --indicador-suave: #c9f1ec;
  position: relative;
  min-height: 218px;
  overflow: hidden;
  padding: 20px 30px;
  border: 1px solid #dce7e8;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 16px rgba(28, 75, 87, 0.12);
}

.dashboard-indicador::after {
  content: '';
  position: absolute;
  width: 145px;
  height: 230px;
  right: -88px;
  top: -10px;
  border-radius: 50%;
  background: var(--indicador-suave);
  opacity: 0.42;
}

.dashboard-indicador-icono {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  color: var(--indicador);
  border-radius: 50%;
  background: var(--indicador-suave);
}

.dashboard-indicador-icono svg { width: 34px; height: 34px; stroke-width: 2.4; }
.dashboard-indicador-numero { color: #063f48; font-size: 2.05rem; font-weight: 750; line-height: 1.15; }
.dashboard-indicador-etiqueta { color: #315366; font-size: 1rem; }
.dashboard-indicador-linea { display: block; width: 60px; height: 5px; margin-top: 18px; border-radius: 4px; background: var(--indicador); }
.indicador-invitaciones { --indicador: #2f69ed; --indicador-suave: #d5e3ff; }
.indicador-evaluaciones { --indicador: #5c44d6; --indicador-suave: #e2dcff; }
.indicador-respuesta { --indicador: #4aa14e; --indicador-suave: #d8f0d8; }

.dashboard-paneles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 27px;
}

.dashboard-panel {
  position: relative;
  min-height: 248px;
  overflow: hidden;
  padding: 26px 28px;
  border: 1px solid #dce7e8;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 16px rgba(28, 75, 87, 0.12);
}

.dashboard-panel::after {
  content: '';
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 320px;
  height: 240px;
  border-radius: 50%;
  background: #dcf5f2;
  opacity: 0.6;
  pointer-events: none;
}

.dashboard-panel-actividad::after { background: #ebe7ff; }

.dashboard-panel-titulo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.dashboard-panel-icono {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #08736d;
  background: #c8ebe7;
}

.dashboard-panel-actividad .dashboard-panel-icono { color: #315be0; background: #dedcff; }
.dashboard-panel-icono svg { width: 35px; height: 35px; stroke-width: 2.5; }
.dashboard-panel h2 { margin: 6px 0 14px; color: #074854; font-size: 1.4rem; }
.dashboard-panel-actividad h2 { color: #18265e; }
.dashboard-panel p { margin: 0; color: #4b6573; font-size: 1rem; }

.dashboard-panel-acciones {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 12px;
  margin: 20px 0 0 82px;
}

.dashboard-panel-acciones a { color: #0a6965; font-size: 0.88rem; font-weight: 700; }

.dashboard-panel-decoracion {
  position: absolute;
  right: 24px;
  bottom: 16px;
  z-index: 1;
  width: 120px;
  height: 120px;
  color: rgba(29, 162, 151, 0.28);
  stroke-width: 4 !important;
  pointer-events: none;
}

.dashboard-panel-actividad .dashboard-panel-decoracion { color: rgba(62, 92, 196, 0.3); }
.dashboard-panel-contenido { position: relative; z-index: 3; min-width: 0; flex: 1; }
.dashboard-actividad-lista {
  position: relative;
  z-index: 4;
  height: 132px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  margin: 0;
  padding: 0 12px 0 0;
  list-style: none;
  outline: none;
}
.dashboard-actividad-lista:focus-visible { box-shadow: 0 0 0 2px rgba(49, 91, 224, 0.35); border-radius: 5px; }
.dashboard-actividad-lista::-webkit-scrollbar { width: 8px; }
.dashboard-actividad-lista::-webkit-scrollbar-track { background: #edf1f8; border-radius: 8px; }
.dashboard-actividad-lista::-webkit-scrollbar-thumb { background: #a9b9dc; border-radius: 8px; }
.dashboard-actividad-lista::-webkit-scrollbar-thumb:hover { background: #7f94c6; }
.dashboard-actividad-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #e5ecec; color: #294c5a; }
.dashboard-actividad-lista li span { color: #6b7d85; font-size: 0.85rem; }

@media (max-width: 1100px) {
  .dashboard-indicadores { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .dashboard-cabecera { height: 74px; padding: 0 18px; }
  .dashboard-cabecera-titulo { gap: 10px; font-size: 1.25rem; }
  .dashboard-cabecera-titulo > svg { width: 36px; height: 36px; }
  .dashboard-usuario > span:not(.dashboard-avatar) { display: none; }
  .dashboard-contenido { padding: 20px 16px 45px; }
  .dashboard-aviso { grid-template-columns: auto 1fr; gap: 16px; padding: 20px; }
  .dashboard-aviso-icono { width: 54px; height: 54px; }
  .dashboard-aviso-texto { padding-left: 0; }
  .dashboard-aviso-texto::before { display: none; }
  .dashboard-accion { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
  .dashboard-indicadores, .dashboard-paneles { grid-template-columns: 1fr; gap: 18px; }
  .dashboard-indicador { min-height: 190px; }
  .dashboard-panel { min-height: 260px; }
}

@media (max-width: 880px) {
  .dashboard-cuerpo { flex-direction: column; min-height: calc(100vh - 74px); }
  .dashboard-menu-lateral { width: 100%; min-height: auto; }
  .dashboard-menu-lateral.abierto { display: block; }
  .dashboard-menu-boton { display: inline-flex; }
}

/* ---------------------------------------------------------------- */
/* Mi cuenta                                                         */
/* ---------------------------------------------------------------- */
.perfil-moderno {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.perfil-tarjeta {
  position: relative;
  overflow: hidden;
  padding: 32px 42px 44px;
  border: 1px solid #cfe0e5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(30, 80, 90, 0.08);
}

.perfil-tarjeta + .perfil-tarjeta { margin-top: 38px; }

.perfil-tarjeta::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(211, 244, 240, 0.6), rgba(218, 236, 248, 0.55));
}

.perfil-password::after {
  width: 330px;
  height: 190px;
  right: -100px;
  top: -105px;
  transform: rotate(18deg);
}

.perfil-tarjeta svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.perfil-encabezado {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.perfil-icono {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #075b60;
  background: linear-gradient(145deg, #c8f2ed, #96ded7);
}

.perfil-icono svg { width: 46px; height: 46px; stroke-width: 2.3; }

.perfil-encabezado-texto {
  flex: 1;
  min-width: 0;
  padding-left: 28px;
  border-left: 2px solid #0f7778;
}

.perfil-encabezado h2 {
  margin: 7px 0 10px;
  color: #074952;
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: 700;
}

.perfil-encabezado p {
  margin: 0;
  color: #36566a;
  font-size: 1.08rem;
}

.perfil-formulario {
  position: relative;
  z-index: 2;
  margin-top: 42px;
}

.perfil-campo { margin-bottom: 28px; }
.perfil-campo label { margin-bottom: 9px; color: #074952; font-size: 1.08rem; font-weight: 700; }

.perfil-password-control { position: relative; }

.perfil-password-control input {
  width: 100%;
  min-height: 68px;
  padding: 15px 64px 15px 24px;
  border: 1px solid #b7d7e4;
  border-radius: 12px;
  color: #173f50;
  background: #fff;
  font-size: 1.02rem;
}

.perfil-password-control input::placeholder { color: #7993a6; opacity: 1; }
.perfil-password-control input:focus { border-color: #318c91; box-shadow: 0 0 0 3px rgba(49, 140, 145, 0.12); }

.perfil-ver-password {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  color: #7291a6;
  background: transparent;
  cursor: pointer;
}

.perfil-ver-password:hover,
.perfil-ver-password.activo { color: #08706f; }
.perfil-ver-password svg { width: 27px; height: 27px; }

.perfil-ayuda {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 9px 0 0;
  color: #3f6175;
  font-size: 0.9rem;
}

.perfil-ayuda span {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #7390a1;
  font-size: 0.82rem;
  font-weight: 700;
}

.perfil-boton-actualizar {
  width: 100%;
  min-height: 70px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 15px;
  margin-top: 36px;
  padding: 14px 28px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #08716f, #348f91);
  box-shadow: 0 6px 14px rgba(8, 103, 102, 0.18);
  font-size: 1.08rem;
  font-weight: 700;
  cursor: pointer;
}

.perfil-boton-actualizar:hover { background: linear-gradient(135deg, #065e5d, #267d7f); }
.perfil-boton-actualizar svg { justify-self: end; width: 30px; height: 30px; }
.perfil-boton-actualizar strong { justify-self: end; font-size: 2.2rem; font-weight: 300; line-height: 1; }

.perfil-mfa {
  min-height: 340px;
  padding-top: 34px;
}

.perfil-mfa::after {
  width: 390px;
  height: 330px;
  right: -150px;
  bottom: -170px;
}

.perfil-mfa .perfil-encabezado { max-width: 650px; }

.perfil-boton-mfa {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  padding: 14px 20px;
  border: 2px solid #08706f;
  border-radius: 12px;
  color: #074952;
  background: #fff;
  font-weight: 700;
  text-decoration: none;
}

.perfil-boton-mfa:hover { color: #fff; background: #08706f; }
.perfil-boton-mfa svg { width: 30px; height: 30px; }
.perfil-boton-mfa strong { margin-left: 10px; font-size: 1.9rem; font-weight: 300; line-height: 1; }

.perfil-mfa-ilustracion {
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: 16px;
  width: 270px;
  height: 245px;
  display: grid;
  place-items: center;
  color: #19797c;
}

.perfil-mfa-circulo {
  position: absolute;
  width: 245px;
  height: 245px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(203, 240, 236, 0.72), rgba(211, 230, 249, 0.72));
}

.perfil-mfa-ilustracion > svg { position: relative; width: 145px; height: 200px; stroke-width: 5; }
.perfil-mfa-ilustracion .perfil-escudo { fill: #29878a; fill-opacity: 0.92; stroke: #29878a; }

.perfil-mfa-codigo {
  position: absolute;
  right: 0;
  top: 110px;
  padding: 12px 15px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #2b8c8e, #50a2a5);
  box-shadow: 0 5px 12px rgba(25, 101, 104, 0.18);
  font-weight: 700;
}

@media (max-width: 900px) {
  .perfil-mfa-ilustracion { opacity: 0.35; right: -25px; }
  .perfil-mfa .perfil-encabezado { max-width: none; }
}

@media (max-width: 640px) {
  .perfil-tarjeta { padding: 24px 20px 30px; }
  .perfil-encabezado { gap: 15px; }
  .perfil-icono { width: 58px; height: 58px; flex-basis: 58px; }
  .perfil-icono svg { width: 32px; height: 32px; }
  .perfil-encabezado-texto { padding-left: 15px; }
  .perfil-encabezado h2 { margin-top: 2px; font-size: 1.45rem; }
  .perfil-encabezado p { font-size: 0.92rem; }
  .perfil-formulario { margin-top: 30px; }
  .perfil-password-control input { min-height: 58px; padding-left: 16px; font-size: 0.94rem; }
  .perfil-boton-actualizar { grid-template-columns: auto 1fr auto; min-height: 60px; padding: 12px 18px; font-size: 0.96rem; }
  .perfil-boton-actualizar svg { justify-self: start; }
  .perfil-mfa { min-height: 320px; }
  .perfil-mfa-ilustracion { opacity: 0.18; right: -80px; }
  .perfil-salto-escritorio { display: none; }
}

/* ---------------------------------------------------------------- */
/* Gráfico de barras horizontales, hecho con CSS puro (sin librerías) */
/* ---------------------------------------------------------------- */
.grafico-barras { display: flex; flex-direction: column; gap: 14px; }

.grafico-barra-fila { display: grid; grid-template-columns: 220px 1fr 46px; align-items: center; gap: 12px; }

@media (max-width: 640px) {
  .grafico-barra-fila { grid-template-columns: 1fr; gap: 4px; }
  .grafico-barra-valor { text-align: left !important; }
}

.grafico-barra-etiqueta { font-size: 0.86rem; color: var(--color-texto); }

.grafico-barra-pista {
  background: var(--color-superficie-alterna);
  border-radius: 6px;
  height: 14px;
  overflow: hidden;
}

.grafico-barra-relleno {
  height: 100%;
  background: linear-gradient(90deg, var(--color-acento), var(--color-primario));
  border-radius: 6px;
}

.grafico-barra-valor { text-align: right; font-weight: 700; color: var(--color-primario-oscuro); font-size: 0.9rem; }

.grafico-radar-contenedor {
  width: 100%;
  overflow-x: auto;
  text-align: center;
}

.grafico-radar {
  width: 100%;
  max-width: 860px;
  min-width: 620px;
  height: auto;
  font-family: var(--fuente-base);
}

.radar-nivel { fill: none; stroke: var(--color-borde); stroke-width: 1.3; }
.radar-eje { stroke: var(--color-borde); stroke-width: 1.2; }
.radar-escala { fill: var(--color-texto-suave); font-size: 11px; }
.radar-etiqueta { fill: var(--color-texto); font-size: 13px; font-weight: 600; }
.radar-leyenda { fill: var(--color-texto); font-size: 13px; }
.radar-serie {
  fill: var(--radar-color);
  fill-opacity: 0.16;
  stroke: var(--radar-color);
  stroke-width: 3;
  stroke-linejoin: round;
}

@media print {
  .grafico-radar {
    min-width: 0;
    max-height: 620px;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .grafico-radar-contenedor { overflow: visible; }
}

/* ---------------------------------------------------------------- */
/* Utilidades                                                        */
/* ---------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; }
.flex-entre { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.gap-10 { gap: 10px; }
.oculto { display: none; }

.chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  background: var(--color-superficie-alterna);
  color: var(--color-texto-suave);
  font-size: 0.78rem;
  font-weight: 600;
}

hr.separador {
  border: none;
  border-top: 1px solid var(--color-borde);
  margin: 26px 0;
}

/* ---------------------------------------------------------------- */
/* Informe individual                                                */
/* ---------------------------------------------------------------- */
.pagina-reporte {
  background: #f4f1e8;
  color: #17241f;
}

.reporte-evaluado { max-width: 760px; }

.reporte-resumen,
.reporte-competencias {
  padding: 28px 4px;
  border-bottom: 1px solid #d9d3c5;
}

.reporte-kicker,
.reporte-cargo,
.reporte-competencias > p {
  margin: 0;
  color: #677069;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.reporte-resumen h1 {
  margin: 4px 0 0;
  color: #17241f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 7vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.reporte-cargo { margin-top: 0; }

.reporte-meta {
  display: grid;
  grid-template-columns: minmax(100px, 0.8fr) minmax(170px, 1.6fr) minmax(120px, 0.8fr);
  gap: 22px;
  align-items: end;
  margin-top: 24px;
}

.reporte-meta > div:not(.reporte-promedio) { display: grid; gap: 4px; }
.reporte-meta span { color: #677069; font-size: 0.78rem; font-weight: 400; }
.reporte-meta strong { color: #17241f; font-size: 0.86rem; font-weight: 500; }

.reporte-meta .reporte-promedio {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  text-align: right;
}

.reporte-meta .reporte-promedio strong {
  color: #426f66;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.6rem;
  line-height: 0.9;
}

.reporte-competencias h2 {
  margin: 0;
  color: #17241f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 500;
}

.reporte-lista-competencias { margin-top: 22px; }

.reporte-fila-competencia {
  display: grid;
  grid-template-columns: minmax(190px, 1.65fr) minmax(120px, 1fr) 44px;
  gap: 18px;
  align-items: center;
  min-height: 62px;
  border-top: 1px solid #d9d3c5;
}

.reporte-competencia-nombre { display: grid; line-height: 1.25; }
.reporte-competencia-nombre strong { color: #17241f; font-size: 0.86rem; font-weight: 500; }
.reporte-competencia-nombre span { color: #68716b; font-size: 0.75rem; }

.reporte-competencia-barra {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e1d6;
}

.reporte-competencia-barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #426f66;
}

.reporte-competencia-valor {
  color: #17241f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  text-align: right;
}

@media (max-width: 540px) {
  .reporte-meta { grid-template-columns: 0.8fr 1.6fr 0.9fr; gap: 12px; }
  .reporte-meta .reporte-promedio strong { font-size: 2.2rem; }
  .reporte-fila-competencia { grid-template-columns: minmax(145px, 1.4fr) minmax(90px, 1fr) 38px; gap: 10px; }
}

@media print {
  .pagina-reporte { background: #f4f1e8 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .reporte-evaluado { max-width: none; padding: 0 14mm; }
  .reporte-resumen { padding-top: 10mm; }
  .reporte-fila-competencia { break-inside: avoid; }
  .reporte-competencia-barra span { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}