/* ═══════════════════════════════════════════════════════════
   LIMPIAAI v20 — MOTOR QUIRÚRGICO
   Estética: instrumental de laboratorio. Números grandes,
   tipografía mono, cian clínico.
   ═══════════════════════════════════════════════════════════ */

.sg-sub {
  font-size: .84rem; line-height: 1.6;
  color: var(--t2, #94a3b8); margin-bottom: 1rem;
}

/* ─── Selector de foto ──────────────────────────────────── */
.sg-picker { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; flex-wrap: wrap; }
.sg-picker-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: .64rem; font-weight: 700; letter-spacing: .12em;
  color: #7dd3fc;
}
.sg-picker select {
  min-height: 40px; padding: 8px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(56,189,248,.3);
  border-radius: 10px; color: var(--t1, #f1f5f9);
  font-size: .84rem; cursor: pointer;
}

.sg-loading, .sg-err {
  display: flex; align-items: center; gap: 9px;
  padding: 1.2rem; justify-content: center;
  font-size: .85rem; color: var(--t3, #8595ab);
}
.sg-err { color: #fca5a5; }

/* ─── Anillo de calidad ─────────────────────────────────── */
.sg-quality {
  display: flex; align-items: center; gap: 16px;
  padding: 1.05rem; border-radius: 16px; margin-bottom: 1rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--q, #38bdf8) 13%, transparent), rgba(3,3,17,0));
  border: 1px solid color-mix(in srgb, var(--q, #38bdf8) 32%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .sg-quality { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.3); }
}
.sg-q-ring { position: relative; width: 88px; height: 88px; flex: 0 0 auto; }
.sg-q-ring svg { width: 100%; height: 100%; }
.sg-q-num {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem; font-weight: 700; color: var(--q, #38bdf8);
}
.sg-q-meta { min-width: 0; }
.sg-q-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem; font-weight: 700; letter-spacing: .13em;
  color: var(--q, #38bdf8);
}
.sg-q-d {
  font-size: .85rem; line-height: 1.55;
  color: var(--t1, #f1f5f9); margin-top: 6px;
}

/* ─── Incidencias ───────────────────────────────────────── */
.sg-issues { display: grid; gap: 9px; margin-bottom: 1.1rem; }
.sg-issue {
  padding: 12px; border-radius: 13px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid #fbbf24;
}
.sg-issue.sev-crit { border-left-color: #f87171; background: rgba(239,68,68,.07); }
.sg-issue-hd {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.sg-issue-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem; font-weight: 700; letter-spacing: .1em;
  color: #93c5fd; padding: 3px 7px; border-radius: 5px;
  background: rgba(59,130,246,.16);
  border: 1px solid rgba(96,165,250,.32);
}
.sg-issue-hd strong { font-size: .89rem; color: var(--t1, #f1f5f9); }
.sg-issue-x {
  font-size: .81rem; line-height: 1.6;
  color: var(--t2, #94a3b8); margin-bottom: 7px;
}
.sg-issue-fix {
  font-size: .81rem; line-height: 1.55; color: #6ee7b7;
  display: flex; gap: 8px; align-items: flex-start;
}
.sg-clean {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; border-radius: 12px; margin-bottom: 1.1rem;
  font-size: .85rem; color: #6ee7b7;
  background: rgba(52,211,153,.1);
  border: 1px solid rgba(52,211,153,.28);
}

/* ─── Métricas ──────────────────────────────────────────── */
.sg-block-t {
  font-size: .92rem; font-weight: 800; color: var(--t1, #f1f5f9);
  margin: 1.2rem 0 .35rem;
}
.sg-block-x {
  font-size: .79rem; line-height: 1.55;
  color: var(--t3, #8595ab); margin-bottom: .8rem;
}

.sg-metrics {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.sg-metric {
  padding: 11px; border-radius: 12px;
  background: rgba(255,255,255,.032);
  border: 1px solid rgba(255,255,255,.075);
  transition: border-color .2s;
}
.sg-metric:hover { border-color: rgba(56,189,248,.4); }
.sg-metric-v {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem; font-weight: 700; color: #7dd3fc;
  line-height: 1.15;
}
.sg-metric-l {
  display: block; margin-top: 3px;
  font-size: .76rem; font-weight: 700; color: var(--t1, #f1f5f9);
}
.sg-metric-h {
  display: block; margin-top: 4px;
  font-size: .68rem; line-height: 1.4; color: var(--t3, #8595ab);
}

/* ─── Perfil radial ─────────────────────────────────────── */
.sg-radial {
  display: flex; align-items: flex-end; gap: 6px;
  height: 130px; padding: 10px 12px;
  border-radius: 13px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.07);
}
.sg-rad-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%; gap: 5px;
}
.sg-rad-bar {
  width: 100%; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #7dd3fc, #0ea5e9 60%, #0369a1);
  min-height: 2px;
  transition: height .5s cubic-bezier(.34,1.3,.64,1);
}
.sg-rad-col span {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem; color: var(--t3, #8595ab);
}

/* ─── Consenso entre fotos ──────────────────────────────── */
.sg-consensus {
  padding: 1rem; border-radius: 15px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid #38bdf8;
}
.sg-consensus.agr-mid { border-left-color: #fbbf24; }
.sg-consensus.agr-low { border-left-color: #f87171; }
.sg-cons-grid {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  margin-bottom: .85rem;
}
.sg-cons-grid div {
  text-align: center; padding: 9px 6px;
  border-radius: 10px; background: rgba(0,0,0,.26);
}
.sg-cons-grid strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem; color: #7dd3fc;
}
.sg-cons-grid span {
  display: block; margin-top: 2px;
  font-size: .66rem; line-height: 1.3; color: var(--t3, #8595ab);
}
.sg-cons-x {
  font-size: .83rem; line-height: 1.6; color: var(--t2, #94a3b8);
}

/* ─── Aviso de fiabilidad (encabeza la lectura) ─────────── */
.sg-reli {
  padding: 1.05rem 1.1rem;
  border-radius: 16px;
  margin-bottom: 1rem;
  border: 1.5px solid rgba(251,191,36,.5);
  background: linear-gradient(180deg, rgba(251,191,36,.14), rgba(3,3,17,.35));
}
.sg-reli.is-bad {
  border-color: rgba(248,113,113,.6);
  background: linear-gradient(180deg, rgba(239,68,68,.17), rgba(3,3,17,.4));
}
.sg-reli-hd {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: .7rem;
}
.sg-reli-hd i { font-size: 1.35rem; color: #fbbf24; margin-top: 2px; }
.sg-reli.is-bad .sg-reli-hd i { color: #f87171; }
.sg-reli-hd strong {
  display: block; font-size: .96rem; line-height: 1.35;
  color: #fff; margin-bottom: 3px;
}
.sg-reli-hd span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; color: var(--t2, #94a3b8);
}
.sg-reli-x {
  font-size: .85rem; line-height: 1.65;
  color: #fef3c7; margin-bottom: .7rem;
}
.sg-reli.is-bad .sg-reli-x { color: #fee2e2; }
.sg-reli-x strong { color: #fff; }
.sg-reli-list { margin: 0 0 .7rem; padding-left: 1.2rem; display: grid; gap: 7px; }
.sg-reli-list li {
  font-size: .82rem; line-height: 1.6; color: var(--t2, #94a3b8);
}
.sg-reli-list strong { color: var(--t1, #f1f5f9); }
.sg-reli-foot {
  font-size: .76rem; color: var(--t3, #8595ab);
}
.sg-reli-foot em { color: #7dd3fc; font-style: normal; }

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 420px) {
  .sg-quality { flex-direction: column; text-align: center; }
  .sg-metrics { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .sg-rad-bar { transition: none; }
}

@media print {
  .sg-metric, .sg-issue, .sg-consensus { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════
   BLOQUE DE CONTENIDO ESTÁTICO (SEO)
   Texto real en el HTML de origen. Debe ser legible y cómodo:
   es contenido para personas, no relleno para buscadores.
   ═══════════════════════════════════════════════════════════ */
.seo-guide {
  margin: 2rem 0 1rem;
  padding: 1.35rem;
  border-radius: 20px;
  background: rgba(255,255,255,.026);
  border: 1px solid rgba(255,255,255,.075);
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.seo-guide h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.25rem, 4.6vw, 1.7rem);
  font-weight: 900; line-height: 1.2;
  margin-bottom: .85rem;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 55%, #d97706 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.seo-guide h3 {
  font-size: 1.02rem; font-weight: 800;
  color: var(--t1, #f1f5f9);
  margin: 1.5rem 0 .5rem;
  padding-left: 11px;
  border-left: 3px solid rgba(251,191,36,.65);
}
.seo-guide p {
  font-size: .875rem; line-height: 1.75;
  color: var(--t2, #94a3b8);
  margin-bottom: .8rem;
  max-width: 70ch;
}
.seo-guide strong { color: var(--t1, #f1f5f9); }
.seo-guide em { color: #fcd34d; font-style: italic; }

.seo-dl { margin: .5rem 0 1rem; }
.seo-dl dt {
  font-size: .87rem; font-weight: 800;
  color: #fcd34d; margin-top: .85rem;
}
.seo-dl dd {
  font-size: .85rem; line-height: 1.7;
  color: var(--t2, #94a3b8);
  margin: 4px 0 0; padding-left: 13px;
  border-left: 2px solid rgba(255,255,255,.1);
  max-width: 68ch;
}

.seo-disclaimer {
  margin-top: 1.3rem !important;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: .81rem !important;
  background: rgba(59,130,246,.1);
  border: 1px solid rgba(96,165,250,.3);
  color: #dbeafe !important;
}
.seo-disclaimer strong { color: #fff; }

@media print {
  .seo-guide { break-inside: auto; }
}