/* =====================================================================
   core/ui/componentes.css — Componentes reutilizables entre módulos
   ---------------------------------------------------------------------
   Depende de core/ui/tokens.css (cárgalo primero). Ningún módulo debe
   redefinir estos estilos: si un módulo necesita algo distinto, agrega
   una clase nueva en su propio modulos/<nombre>/assets/css, nunca
   sobreescribiendo estas reglas. Aplicación pendiente en index.html —
   ver docs/ARQUITECTURA.md, sección "Frontend (pendiente)".
   ===================================================================== */

.card{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--radio); box-shadow:var(--glass-sombra);
  backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
}

/* ---- Indicador (KPI) con sparkline ---- */
.kpi{padding:16px 16px 14px;display:flex;flex-direction:column;gap:8px}
.kpi-top{display:flex;align-items:center;justify-content:space-between}
.kpi .ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px}
.kpi .delta{font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:99px}
.delta.up{color:var(--verde);background:color-mix(in srgb, var(--verde) 14%, transparent)}
.delta.down{color:var(--rojo);background:color-mix(in srgb, var(--rojo) 14%, transparent)}
.kpi .num{font-size:1.85rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .lbl{font-size:12.5px;color:var(--gris-texto)}
.kpi svg{width:100%;height:28px;display:block;margin-top:2px}

/* ---- Pastilla de estatus ---- */
.pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.pill.ok{color:var(--verde);background:color-mix(in srgb, var(--verde) 14%, transparent)}
.pill.espera{color:var(--ambar);background:color-mix(in srgb, var(--ambar) 15%, transparent)}
.pill.alerta{color:var(--rojo);background:color-mix(in srgb, var(--rojo) 14%, transparent)}

/* ---- Tarjeta de selección (familia de acto, categoría, etc.) ---- */
.seleccionable{padding:16px 14px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:8px;transition:transform .15s,box-shadow .15s}
.seleccionable:hover{transform:translateY(-2px)}
.seleccionable .ico{width:32px;height:32px;border-radius:9px;background:var(--azul-suave);color:var(--azul);display:flex;align-items:center;justify-content:center;font-size:14px}
.seleccionable.activa{background:var(--azul);border-color:var(--azul);box-shadow:0 10px 22px color-mix(in srgb, var(--azul) 35%, transparent)}
.seleccionable.activa b{color:#fff}
.seleccionable.activa span{color:rgba(255,255,255,.75)}
.seleccionable.activa .ico{background:rgba(255,255,255,.2);color:#fff}

/* ---- Interruptor (switch) ---- */
.switch{width:40px;height:23px;border-radius:99px;background:var(--gris-borde);position:relative;cursor:pointer;flex-shrink:0;border:none;transition:background .15s}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.switch.on{background:var(--azul)}
.switch.on::after{transform:translateX(17px)}

/* ---- Flujo por pasos (stepper) ---- */
.stepper{display:flex;align-items:center;padding:14px 20px;gap:0}
.paso{display:flex;align-items:center;gap:9px;cursor:pointer;padding:6px 10px;border-radius:11px}
.paso .n{width:24px;height:24px;border-radius:99px;background:var(--gris-borde);color:var(--gris-texto);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.paso .t{font-size:12.5px;font-weight:600;color:var(--gris-texto);white-space:nowrap}
.paso.hecho .n{background:var(--verde);color:#fff}
.paso.activo .n{background:var(--azul);color:#fff}
.paso.activo .t{color:var(--texto)}
.paso-conector{flex:1;height:2px;background:var(--gris-borde);margin:0 4px;min-width:16px}

/* ---- Medidor circular reutilizable (cumplimiento, avance, capacidad) ---- */
.gauge-wrap{position:relative;width:128px;height:128px;margin:0 auto}
.gauge-wrap svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge-arco{transition:stroke-dashoffset .35s ease}
.gauge-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge-mid b{font-size:1.45rem;font-weight:700}
.gauge-mid span{font-size:10px;color:var(--gris-texto);text-align:center;padding:0 10px}

:focus-visible{outline:2px solid var(--azul); outline-offset:2px; border-radius:6px}