/* ============================================================
 * theme.css — TEMA de la guía del PRINCIPIO DE ARQUÍMEDES (capa LIBRE).
 * Visuales del concepto (cubo de presiones, iceberg, apoyo en el fondo),
 * los 6 widgets por toque (estanque ⭐ · tabla de densidades · dinamómetro
 * · armado de fórmula · detective de la corona · lingote→casco) y las
 * notas desplegables de rigor (.arq-rigor).
 * Andamiaje en assets/guia-components.css; variables --guia-*.
 * Regla CSS+KaTeX: fondos de píldora/badge SOLO en `> span` (hijo directo).
 * Pisos de letra: lectura ≥17px · apoyo ≥15px · etiquetas MAYÚSCULAS ≥13px.
 * ============================================================ */

/* ===== Visual estático (SVG del concepto) ===== */
.arq-visual { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0; }
.arq-visual .vcap { font-size: 15px; font-weight: 700; color: var(--guia-muted); text-align: center; max-width: 46ch; }
.arq-svg { width: 100%; max-width: 340px; height: auto; display: block; }
.arq-svg.wide { max-width: 360px; }

/* ===== Caja base de laboratorio (todos los widgets) ===== */
.arq-lab { display: grid; gap: 12px; padding: 16px; border: 2px solid var(--guia-ink); border-radius: 14px; background: var(--guia-cream); }
.arq-lab-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arq-flag { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--guia-orange); border: 2px solid var(--guia-ink); border-radius: 999px; padding: 3px 11px; }
.arq-inst { font-size: 15px; font-weight: 700; color: var(--guia-deep); flex: 1 1 220px; }
.arq-stage { display: flex; justify-content: center; }
.arq-stage .arq-svg { background: #fff; border: 1.5px solid var(--guia-line); border-radius: 12px; padding: 6px; }

/* Botones y chips */
.arq-btnrow { display: flex; gap: 10px; flex-wrap: wrap; }
.arq-btn { font-size: 15px; font-weight: 800; padding: 12px 18px; border-radius: 999px; border: 2px solid var(--guia-ink); background: #fff; color: var(--guia-ink); cursor: pointer; }
.arq-btn.main { background: var(--guia-navy); color: #fff; }
.arq-btn:disabled { opacity: .45; cursor: not-allowed; }
.arq-btn.right { background: var(--guia-green); color: #fff; border-color: var(--guia-green); }
.arq-btn.wrong { background: #fff; color: #A33B2E; border-color: #A33B2E; }
.arq-chip { font-size: 15px; font-weight: 700; padding: 12px 14px; border-radius: 999px; border: 2px solid var(--guia-line); background: #fff; color: var(--guia-ink); cursor: pointer; }
.arq-chip.on { border-color: var(--guia-navy); background: var(--guia-navy); color: #fff; }
.arq-grp { display: grid; gap: 6px; }
.arq-grp > .lbl { font-size: 13px; font-weight: 800; letter-spacing: .05em; color: var(--guia-muted); }
.arq-grp .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.arq-grp.pred { border-top: 1.5px dashed var(--guia-line); padding-top: 10px; }
.arq-grp.pred > .lbl { color: var(--guia-deep); }
.arq-grp.pred .arq-chip.on { background: var(--guia-orange); border-color: var(--guia-orange); }

/* Salida / mensajes */
.arq-out { font-size: 15px; line-height: 1.55; color: var(--guia-ink); background: #fff; border: 1.5px solid var(--guia-line); border-radius: 10px; padding: 10px 12px; margin: 0; display: none; }
.arq-out.show { display: block; }
.arq-out.ok { border-color: var(--guia-green); }
.arq-out.miss { border-color: #A33B2E; }
.arq-verdict { font-size: 17px; font-weight: 700; margin: 0; padding: 10px 12px; border-radius: 10px; display: none; }
.arq-verdict.show { display: block; }
.arq-verdict.ok { background: #E7F3EA; border: 2px solid var(--guia-green); }
.arq-verdict.miss { background: #FBEDE9; border: 2px solid #A33B2E; }
.arq-read { display: none; gap: 4px; flex-direction: column; font-size: 15px; font-weight: 600; background: #fff; border: 1.5px solid var(--guia-line); border-radius: 10px; padding: 10px 12px; }
.arq-read.show { display: flex; }
.arq-read .e { color: #2B7DB8; }
.arq-read .n { color: var(--guia-deep); }

/* ===== ② Tabla viva de densidades ===== */
.arq-trows { display: grid; gap: 8px; }
.arq-trow, .arq-tref { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px; align-items: center; text-align: left; font-size: 15px; font-weight: 700; padding: 9px 12px; border-radius: 10px; }
.arq-trow { background: #fff; border: 2px solid var(--guia-line); cursor: pointer; color: var(--guia-ink); }
.arq-trow .sw, .arq-tref .sw { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--guia-ink); }
.arq-tref { background: var(--guia-navy); color: #fff; border: 2px solid var(--guia-navy); }
.arq-tref .sw { background: #CFE4F2; }
.arq-trow .rho { font-variant-numeric: tabular-nums; color: var(--guia-muted); }
.arq-trow .res { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--guia-muted); }
.arq-trow.revealed { cursor: default; }
.arq-trow.revealed .rho { color: var(--guia-ink); }
.arq-trow.flota { border-color: var(--guia-green); }
.arq-trow.flota .res { color: var(--guia-green); }
.arq-trow.hunde { border-color: var(--guia-navy); }
.arq-trow.hunde .res { color: var(--guia-navy); }

/* ===== ③ Dinamómetro ===== */
.arq-dina-read { font-size: 17px; font-weight: 700; color: var(--guia-deep); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.arq-dina-read b { font-size: 26px; font-weight: 900; color: var(--guia-ink); font-variant-numeric: tabular-nums; background: #fff; border: 2px solid var(--guia-ink); border-radius: 10px; padding: 2px 12px; }
.arq-slider { display: grid; gap: 6px; }
.arq-slider > .lbl { font-size: 13px; font-weight: 800; letter-spacing: .05em; color: var(--guia-muted); }
.arq-slider input[type="range"] { width: 100%; accent-color: var(--guia-orange); height: 28px; }

/* ===== ④ Armado de la fórmula ===== */
.arq-form-eq { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 19px; font-weight: 800; padding: 12px; background: #fff; border: 2px solid var(--guia-ink); border-radius: 12px; }
.arq-form-eq .fix { font-size: 24px; color: var(--guia-orange); }
.arq-form-eq .dot { color: var(--guia-muted); }
.arq-form-eq .slot { min-width: 64px; text-align: center; font-size: 15px; padding: 8px 10px; border: 2px dashed var(--guia-line); border-radius: 10px; color: var(--guia-muted); }
.arq-form-eq .slot.ok { border: 2px solid var(--guia-green); color: var(--guia-deep); background: #E7F3EA; }
.arq-form-eq.done { border-color: var(--guia-green); box-shadow: 0 0 0 3px #E7F3EA; }
.arq-pool { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.arq-piece { font-size: 15px; font-weight: 700; padding: 12px 16px; border-radius: 999px; border: 2px solid var(--guia-navy); background: #fff; color: var(--guia-navy); cursor: pointer; }
.arq-piece.used { opacity: .35; cursor: default; }
.arq-piece.shake { animation: arq-shake .35s; border-color: #A33B2E; color: #A33B2E; }
@keyframes arq-shake { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: translateX(0); } }

/* ===== ⑤ Detective de la corona ===== */
.arq-cor-verdict { display: grid; gap: 8px; background: #fff; border: 2px solid var(--guia-orange); border-radius: 12px; padding: 12px; }
.arq-cor-verdict .q { margin: 0; font-size: 16px; font-weight: 700; color: var(--guia-deep); }

/* ===== Notas desplegables de rigor (M3 y M5, en content.js) ===== */
.arq-rigor { margin: 10px 0 0; border: 1.5px solid var(--guia-line); border-radius: 12px; background: #fff; }
.arq-rigor > summary { cursor: pointer; font-size: 15px; font-weight: 800; color: var(--guia-navy); padding: 10px 14px; list-style-position: inside; }
.arq-rigor[open] > summary { border-bottom: 1.5px dashed var(--guia-line); }
.arq-rigor-body { padding: 4px 16px 12px; }
.arq-rigor-body p { font-size: 16px; line-height: 1.6; }

/* ===== Responsive (≤540px): nada exige más ancho que la columna ===== */
@media (max-width: 540px) {
  .arq-trow, .arq-tref { grid-template-columns: 18px 1fr auto; }
  .arq-trow .res, .arq-tref .res { grid-column: 2 / -1; }
  .arq-form-eq { font-size: 17px; }
  /* En pantallas chicas el SVG necesita TODO el ancho disponible para que
   * sus etiquetas queden ≥13px efectivos tras el escalado del viewBox. */
  .arq-lab { padding: 12px 8px; }
  .arq-stage .arq-svg { padding: 2px; }
}

@media print {
  .arq-lab { display: none !important; }
}