.smi-card{
  --smi-text:#102736;
  --smi-muted:#5f7482;
  --smi-track:rgba(16,39,54,.14);
  --smi-c1:#d93025;
  --smi-c2:#ff7b00;
  --smi-c3:#f9bb00;
  --smi-c4:#34a853;
  --smi-c5:#0b8043;
  --smi-needle:#1f2a37;
  --smi-gauge-size:124px;
  --smi-ring-size:88px;
  --smi-min-height:164px;
  --smi-pill-min-height:112px;
  --smi-pill-width:100%;
  --smi-head-justify:space-between;
  --smi-score-position:end;
  --smi-risk-color:#0b8043;
  --smi-risk-badge-bg:rgba(255,255,255,.92);
  --smi-risk-badge-text:#102736;
  --smi-risk-badge-radius:999px;
  --smi-risk-badge-padding:6px;

  display:block;
  width:100%;
  min-height:var(--smi-min-height);
  text-decoration:none;
  color:var(--smi-text);
  border-radius:16px;
  padding:14px;
}

.smi-with-surface{}
.smi-no-surface{background:transparent;border:none;box-shadow:none;padding:0}

.smi-link:hover{color:var(--smi-text)}
.smi-head{display:flex;justify-content:var(--smi-head-justify);align-items:flex-start;gap:10px;margin-bottom:10px}
.smi-head-only-score{justify-content:var(--smi-score-position);margin-bottom:6px}
.smi-title{margin:0;font-size:1rem;line-height:1.2;color:var(--smi-text)}
.smi-score{font-weight:800;font-size:1.08rem;line-height:1;color:var(--smi-risk-color)}
.smi-risk{margin:0;font-size:.88rem;font-weight:700;text-align:center;color:var(--smi-risk-color)}
.smi-no-title .smi-gauge-wrap,
.smi-no-title .smi-ring-wrap,
.smi-no-title .smi-pill-wrap{margin-top:2px}
.smi-risk-chip .smi-risk{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:var(--smi-risk-badge-padding) calc(var(--smi-risk-badge-padding) + 6px);
  background:var(--smi-risk-badge-bg);
  color:var(--smi-risk-badge-text);
  border-radius:var(--smi-risk-badge-radius);
}

/* Model 1: Velocimetro */
.smi-gauge-wrap{display:grid;place-items:center;gap:6px}
.smi-gauge{
  position:relative;
  width:var(--smi-gauge-size);
  height:calc(var(--smi-gauge-size) / 2 + 2px);
  overflow:hidden;
}
.smi-gauge-arc{
  position:absolute;
  left:0;
  top:0;
  width:var(--smi-gauge-size);
  height:calc(var(--smi-gauge-size) / 2);
  border-radius:var(--smi-gauge-size) var(--smi-gauge-size) 0 0;
  overflow:hidden;
  background:linear-gradient(
    90deg,
    var(--smi-c1) 0% 20%,
    var(--smi-c2) 20% 40%,
    var(--smi-c3) 40% 60%,
    var(--smi-c4) 60% 80%,
    var(--smi-c5) 80% 100%
  );
}
.smi-gauge-arc::after{
  content:'';
  position:absolute;
  width:64%;
  aspect-ratio:1/1;
  left:18%;
  top:18%;
  border-radius:50%;
  background:rgba(255,255,255,.96);
}
.smi-gauge-needle{
  position:absolute;
  left:50%;
  bottom:4px;
  width:2px;
  height:calc(var(--smi-gauge-size) * .39);
  background:var(--smi-needle);
  transform-origin:center calc(100% - 1px);
  transform:translateX(-50%) rotate(var(--needle-deg, -90deg));
  border-radius:999px;
}
.smi-gauge-dot{
  position:absolute;
  left:50%;
  bottom:0;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--smi-needle);
  transform:translateX(-50%);
}

/* Model 2: Anillo */
.smi-ring-wrap{display:grid;place-items:center;gap:6px}
.smi-ring{
  --p:0;
  --pc:#34a853;
  width:var(--smi-ring-size);
  aspect-ratio:1/1;
  border-radius:50%;
  background:conic-gradient(var(--pc) calc(var(--p) * 1%), var(--smi-track) 0);
  display:grid;
  place-items:center;
}
.smi-ring-inner{
  width:72%;
  height:72%;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  display:grid;
  place-items:center;
}
.smi-ring-inner strong{font-size:1rem;line-height:1}

/* Model 3: Pildora */
.smi-model-pill{min-height:var(--smi-pill-min-height)}
.smi-pill-wrap{display:grid;gap:8px;align-content:center}
.smi-pill-track{width:var(--smi-pill-width);max-width:100%;justify-self:center}
.smi-pill-track{height:10px;background:var(--smi-track);border-radius:999px;overflow:hidden}
.smi-pill-fill{display:block;height:100%;border-radius:999px}
.smi-pill-meta{display:flex;align-items:center;justify-content:center;gap:8px}
.smi-pill-dot{width:8px;height:8px;border-radius:50%;display:inline-block}

@media (max-width:640px){
  .smi-card{padding:12px;min-height:140px}
  .smi-no-surface{padding:0}
  .smi-card{--smi-gauge-size:108px;--smi-ring-size:74px}
}