/* ============================================================
 * theme.css — TEMA de la guía de LA HIPÉRBOLA (capa LIBRE).
 * Leyenda (a / b / focos / asíntotas), dibujos SVG de la hipérbola,
 * la hipérbola interactiva (lab) y el detector de orientación.
 * Andamiaje en assets/guia-components.css; variables --guia-*.
 * Los hex que aparecen aquí son del tema (SVG/leyenda), no de marca.
 * ============================================================ */

/* ===== Leyenda de color ===== */
.hp-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; background: #fff; border: 1.5px solid var(--guia-line); border-radius: 12px; padding: 10px 14px; font-size: 15px; font-weight: 600; }
.hp-legend .it { display: flex; gap: 8px; align-items: center; }
.hp-legend .it b { font-weight: 800; }
.hp-legend .sw { width: 17px; height: 17px; border-radius: 4px; flex: 0 0 auto; }
.hp-legend .sw.a { background: var(--guia-navy); }
.hp-legend .sw.b { background: var(--guia-orange); }
.hp-legend .sw.f { background: var(--guia-green-deep); border-radius: 50%; }
.hp-legend .sw.y { background: #9a6a00; }

/* ===== Dibujos SVG estáticos del concepto ===== */
.hp-visual { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 2px 0; }
.hp-visual .vcap { font-size: 15px; font-weight: 700; color: var(--guia-muted); text-align: center; max-width: 44ch; }
.hp-svg { width: 100%; max-width: 320px; height: auto; display: block; }

/* ===== Hipérbola interactiva (lab) ===== */
.hp-lab { display: grid; gap: 13px; padding: 16px; border: 2px solid var(--guia-ink); border-radius: 14px; background: var(--guia-cream); }
.hp-lab-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hp-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; }
.hp-inst { font-size: 15px; font-weight: 700; color: var(--guia-deep); }
.hp-inst b { font-weight: 800; }
.hp-stage { text-align: center; }
.hp-lab-svg { width: 100%; max-width: 300px; height: auto; display: inline-block; }
.hp-eq { text-align: center; font-size: 20px; min-height: 2em; display: flex; align-items: center; justify-content: center; }
.hp-facts { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; }
.hp-facts .fact { font-size: 16px; font-weight: 700; color: var(--guia-deep); background: #fff; border: 1.5px solid var(--guia-line); border-radius: 9px; padding: 5px 11px; }
.hp-facts .fact b { font-weight: 800; }
.hp-facts .fact.a b { color: var(--guia-navy); }
.hp-facts .fact.b b { color: var(--guia-orange); }
.hp-facts .fact.c b { color: #6B3FA0; }
.hp-facts .fact.y { color: #9a6a00; }
.hp-facts .fact.y b { color: #9a6a00; }
.hp-ctrl { display: grid; gap: 10px; }
.hp-slider { display: grid; grid-template-columns: minmax(96px, auto) 1fr; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; color: var(--guia-deep); }
.hp-slider.a { color: var(--guia-navy); }
.hp-slider.b { color: var(--guia-orange); }
.hp-slider input[type="range"] { width: 100%; height: 30px; cursor: pointer; accent-color: var(--guia-orange); }
.hp-slider.a input[type="range"] { accent-color: var(--guia-navy); }

/* ===== Toggle de orientación (horizontal / vertical) del lab ===== */
.hp-orient { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hp-otab { font: inherit; font-weight: 700; font-size: 15px; padding: 9px 8px; border: 2px solid var(--guia-ink); border-radius: 10px; background: #fff; color: var(--guia-ink); cursor: pointer; box-shadow: 2px 2px 0 var(--guia-ink); transition: transform .1s, box-shadow .1s, background .1s; }
.hp-otab:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--guia-ink); }
.hp-otab:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--guia-ink); }
.hp-otab.active { background: var(--guia-navy); color: #fff; }

/* ===== Detector de orientación ===== */
.hp-det { display: grid; gap: 13px; padding: 16px; border: 2px solid var(--guia-ink); border-radius: 14px; background: #fff; }
.hp-det-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hp-det-card { font: inherit; font-weight: 800; font-size: 17px; padding: 12px 10px; border: 2px solid var(--guia-ink); border-radius: 11px; background: var(--guia-cream); color: var(--guia-ink); cursor: pointer; box-shadow: 2px 2px 0 var(--guia-ink); transition: transform .1s, box-shadow .1s, background .1s; }
.hp-det-card:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--guia-ink); }
.hp-det-card:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--guia-ink); }
.hp-det-card.active { background: var(--guia-orange); color: #fff; }
.hp-det-read { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-height: 2.6em; justify-content: center; }
.hp-det-read .big { font-size: 18px; font-weight: 700; color: var(--guia-deep); }
.hp-det-read .big b { font-weight: 800; color: var(--guia-orange); }
.hp-det-read .cap { font-size: 17px; font-weight: 800; }
.hp-det-read .cap.h { color: var(--guia-orange); }
.hp-det-read .cap.v { color: var(--guia-navy); }
.hp-det-read .cap:not(.h):not(.v) { color: var(--guia-muted); font-weight: 600; }

/* ===== En pantallas chicas, los controles a una sola columna ===== */
@media (max-width: 420px) {
  .hp-slider { grid-template-columns: 1fr; gap: 4px; }
  .hp-det-cards { grid-template-columns: 1fr; }
  .hp-orient { grid-template-columns: 1fr; }
}

/* ===== Impresión: oculta lo interactivo del tema ===== */
@media print {
  .hp-lab, .hp-det { display: none !important; }
}