/* ── Panel personal de KPIs (Mi portal › Mis KPIs, #pk-host) ─────────────
   Cifras sin caja (piezas §05: .tiles/.tile), con el anillo en vez del número.
   Solo tokens de base.css: el tono va por color (ok/mid/bad) y el fondo suave
   del anillo vacío sale de surface2, así vale en claro y en oscuro. */
#view-miskpis{overflow-y:auto}

/* Anillo de progreso (SVG, pkAnilloHtml): el tono pone el color (currentColor),
   la pista es ese mismo color muy suave y el arco se dibuja al cargar */
.pk-anillo{position:relative;width:104px;height:104px;margin:8px 0 4px;display:grid;place-items:center}
.pk-anillo svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pk-anillo circle{fill:none;stroke-width:9}
.pk-pista{stroke:color-mix(in srgb,currentColor 14%,transparent)}
.pk-arco{stroke:currentColor;stroke-linecap:round;stroke-dasharray:var(--p) 100;animation:pkArco 1.1s var(--ease-out) backwards}
@keyframes pkArco{from{stroke-dasharray:0 100}}
@media (prefers-reduced-motion:reduce){.pk-arco{animation:none}}
.pk-anillo span{position:relative;font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--c-text);font-variant-numeric:tabular-nums}
.pk-anillo span small{font-size:13px;font-weight:600;margin-left:1px;color:var(--c-text2)}
.pk-anillo span .ic{font-size:30px;vertical-align:middle;color:currentColor}
.pk-ok{color:var(--c-green)}
.pk-mid{color:var(--c-warning)}
.pk-bad{color:var(--c-red)}
.pk-vacio{color:var(--c-text3)}
.pk-vacio .pk-pista{stroke:var(--c-surface2)}
.pk-vacio span{color:var(--c-text3)}

/* Asignación de KPIs (ficha RRHH): pkAsignar lee '.pk-asig input:checked' */
.pk-asig{margin-bottom:4px}

/* Tu bonus: un factor por fila — nombre y peso · su dato · barra · % */
.pk-factor{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 110px 40px;align-items:center;gap:14px}
.pk-factor .tile-barra{margin:0;height:8px;border-radius:4px}
.pk-factor .tile-barra i{background:currentColor;border-radius:4px}
.pk-factor .tile-barra:not([class*=pk-ok]):not([class*=pk-mid]):not([class*=pk-bad]) i{background:var(--c-text3)}
.pk-factor b{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:768px){.pk-factor{grid-template-columns:minmax(0,1fr) 40px}.pk-factor>.hint,.pk-factor .tile-barra{grid-column:1/-1}}
/* Las notas de cada cifra, una por línea aunque el anillo tenga todo el ancho */
#pk-host .tile-sub{flex-direction:column;align-items:flex-start;gap:2px}

/* Móvil: un anillo por fila y más grande (Unai 16/10); la rejilla de dos de
   .tiles (base.css) los dejaba pequeños y con la nota partida */
@media (max-width: 768px), ((hover: none) and (pointer: coarse) and (max-width: 1400px)) {
  #pk-host .tiles{grid-template-columns:1fr;gap:0}
  #pk-host .tiles>.tile,#pk-host .tiles>.tile:nth-child(even){padding:20px 0;border-left:0;border-top:1px solid var(--c-border)}
  #pk-host .tiles>.tile:first-child{padding-top:2px;border-top:0}
  #pk-host .tiles>.tile:last-child{padding-bottom:2px}
  #pk-host .pk-anillo{width:156px;height:156px;margin:12px 0 8px}
  #pk-host .pk-anillo circle{stroke-width:8}
  #pk-host .pk-anillo span{font-size:38px}
  #pk-host .pk-anillo span small{font-size:17px}
  #pk-host .pk-anillo span .ic{font-size:44px}
}