/* ============================================================
 * theme.css — TEMA de la guía de LA ELIPSE (capa LIBRE).
 * Leyenda (a / b / focos), dibujos SVG de la elipse, la elipse
 * interactiva (lab) y el detector de eje mayor.
 * Andamiaje en assets/guia-components.css; variables --guia-*.
 * Los hex que aparecen aquí son del tema (SVG/leyenda), no de marca.
 * ============================================================ */

/* ===== Leyenda de color ===== */
.el-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; }
.el-legend .it { display: flex; gap: 8px; align-items: center; }
.el-legend .it b { font-weight: 800; }
.el-legend .sw { width: 17px; height: 17px; border-radius: 4px; flex: 0 0 auto; }
.el-legend .sw.a { background: var(--guia-navy); }
.el-legend .sw.b { background: var(--guia-orange); }
.el-legend .sw.f { background: var(--guia-green-deep); border-radius: 50%; }

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

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

/* ===== Detector de eje mayor ===== */
.el-det { display: grid; gap: 13px; padding: 16px; border: 2px solid var(--guia-ink); border-radius: 14px; background: #fff; }
.el-det-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.el-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; }
.el-det-card:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--guia-ink); }
.el-det-card:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--guia-ink); }
.el-det-card.active { background: var(--guia-orange); color: #fff; }
.el-det-read { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-height: 2.6em; justify-content: center; }
.el-det-read .big { font-size: 18px; font-weight: 700; color: var(--guia-deep); }
.el-det-read .big b { font-weight: 800; color: var(--guia-orange); }
.el-det-read .cap { font-size: 17px; font-weight: 800; }
.el-det-read .cap.h { color: var(--guia-orange); }
.el-det-read .cap.v { color: var(--guia-navy); }
.el-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) {
  .el-slider { grid-template-columns: 1fr; gap: 4px; }
  .el-det-cards { grid-template-columns: 1fr; }
}

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