/* ============================================================
 * theme.css — TEMA sistema-respiratorio (capa LIBRE).
 * Solo define las 12 vars --guia-* del contrato + estilos de los widgets
 * del diagrama (clases .sd-*). NO redefinir clases guia-* ni tocar _shared/.
 * ============================================================ */

:root {
  /* Acento principal: cian-teal (aire / respiración) */
  --guia-accent:          #0E7490;
  --guia-accent-bg:       #E1F2F7;
  --guia-accent-text:     #0A5566;

  /* Navy para modo ejercicio */
  --guia-navy:            #1B2A4A;
  --guia-navy-bg:         #EEF1F7;
  --guia-navy-text:       #0F1B32;

  /* Feedback */
  --guia-ok:              #1C7A3A;
  --guia-ok-bg:           #E6F4EA;
  --guia-miss:            #B91C1C;
  --guia-miss-bg:         #FEE2E2;

  /* Superficie y texto base */
  --guia-surface:         #FFFFFF;
  --guia-border:          #D1D5DB;
  --guia-text:            #111827;
  --guia-text-muted:      #4B5563;
}

/* ===== Widgets del diagrama respiratorio (capa libre del tema) ===== */
.sd-w { margin: 6px 0 4px; }
.sd-inst { font-size: 16px; color: var(--guia-text-muted); margin: 0 0 10px; }
.sd-ask { font-size: 17px; font-weight: 800; background: var(--guia-accent-bg); border: 2px solid var(--guia-accent); border-radius: 12px; padding: 11px 14px; margin-bottom: 10px; line-height: 1.35; color: var(--guia-text); }
.sd-ask .sd-n { font-size: 13px; font-weight: 800; color: var(--guia-accent-text); text-transform: uppercase; letter-spacing: .04em; }
.sd-fig-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--guia-border); border-radius: 14px; background: #fff; padding: 8px; }
.sd-fig { min-width: 430px; }
.sd-fig .sd-svg { width: 100%; height: auto; display: block; }
.sd-fig .sd-lbl { font-weight: 700; }
.sd-fig .sd-lbl.sd-sel { font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.sd-hint { font-size: 13px; font-weight: 800; text-align: center; color: var(--guia-text); background: var(--guia-accent-bg); border: 1.5px solid var(--guia-accent); border-radius: 11px; padding: 8px; margin: 8px 0 0; }
.sd-fb { margin-top: 10px; font-size: 16px; font-weight: 700; min-height: 44px; border-radius: 10px; padding: 10px 12px; }
.sd-fb.sd-idle { color: var(--guia-text-muted); font-weight: 500; background: #f6f7f9; }
.sd-fb.sd-ok { background: var(--guia-ok-bg); color: var(--guia-ok); }
.sd-fb.sd-bad { background: var(--guia-miss-bg); color: var(--guia-miss); }
.sd-bar { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.sd-score { font-size: 14px; font-weight: 800; color: var(--guia-text-muted); }
.sd-btn { appearance: none; border: 2px solid var(--guia-accent); background: var(--guia-accent); color: #fff; font-weight: 800; font-size: 15px; border-radius: 10px; padding: 9px 14px; cursor: pointer; }
.sd-btn.ghost { background: #fff; color: var(--guia-accent-text); }
.sd-btn.sd-next { margin-left: auto; }
.sd-btn[disabled] { opacity: .4; cursor: default; }
.sd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sd-chip { appearance: none; border: 1.5px solid var(--guia-accent); background: var(--guia-accent-bg); color: var(--guia-accent-text); font-weight: 700; font-size: 14px; border-radius: 999px; padding: 7px 13px; cursor: pointer; }

.sd-load-err { margin: 10px 0; padding: 12px; border-radius: 10px; background: var(--guia-miss-bg); color: var(--guia-miss); font-weight: 700; text-align: center; }