/* ============================================================
 * theme.css — TEMA de la guía del espectro electromagnético (capa LIBRE).
 * SOLO estilos del tema (prefijo esp-): dibujos SVG, leyenda, y los
 * widgets explorador / verificador / prisma / ondita / bandaquiz /
 * ordenador, + el chip-atajo del hero y la tabla de bandas del M3.
 * NO redefine clases guia-* (andamiaje bloqueado). Colores de UI con
 * var(--guia-*); los hex viven solo dentro de los SVG (theme.js).
 * ============================================================ */

/* ===== Chip-atajo de doble intención (hero) ===== */
.esp-atajo {
  display: inline-block;
  margin: 14px 0 4px;
  padding: 10px 16px;
  border: 2px solid var(--guia-orange);
  border-radius: 999px;
  background: var(--guia-cream);
  color: var(--guia-deep);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}
.esp-atajo:hover { background: var(--guia-orange); color: #fff; }

/* ===== Tabla de las 7 bandas (ejemplo del M3) ===== */
.esp-tabla { list-style: none; padding: 0; margin: 12px 0 0; }
.esp-tabla li {
  padding: 10px 2px;
  border-bottom: 1px dashed var(--guia-line);
  font-size: 17px;
  line-height: 1.55;
}
.esp-tabla li:last-child { border-bottom: 0; }
.esp-tabla li > strong { color: var(--guia-navy); }

/* ===== Leyenda de color ===== */
.esp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 10px 0 6px;
  padding: 12px 14px;
  border: 1.5px solid var(--guia-line);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  color: var(--guia-ink);
}
.esp-legend i {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: -2px;
}

/* ===== Dibujos estáticos ===== */
.esp-visual { margin: 14px 0; text-align: center; }
.esp-svg { width: 100%; max-width: 430px; height: auto; display: inline-block; }

/* ===== Cascarón común de widgets ===== */
.esp-ondita, .esp-explorador, .esp-prisma, .esp-verificador, .esp-quiz, .esp-ordenador {
  margin: 16px 0;
  padding: 16px 14px;
  border: 2px solid var(--guia-line);
  border-radius: 16px;
  background: #fff;
}
.esp-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.esp-flag {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--guia-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.esp-inst { font-size: 15px; color: var(--guia-muted); font-weight: 600; line-height: 1.45; }

/* botones del tema */
.esp-btn {
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid var(--guia-navy);
  border-radius: 12px;
  background: #fff;
  color: var(--guia-navy);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.esp-btn:hover { background: var(--guia-navy); color: #fff; }
.esp-btn.mini { min-height: 40px; padding: 6px 14px; font-size: 15px; }
.esp-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 10px 0 4px; }

/* chips (prisma / verificador / quiz / ordenador) */
.esp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.esp-chips.center { justify-content: center; }
.esp-chip {
  min-height: 44px;
  padding: 9px 14px;
  border: 2px solid var(--guia-line);
  border-radius: 999px;
  background: var(--guia-cream);
  color: var(--guia-ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.esp-chip:hover { border-color: var(--guia-navy); }
.esp-chip.on { border-color: var(--guia-green); background: #EAF5EC; color: var(--guia-green-deep); }
.esp-chip.off { border-color: #B3261E; background: #FBEAE8; color: #B3261E; }
.esp-chip i {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: -2px;
  border: 1px solid var(--guia-line);
}

/* lectores λ / f */
.esp-read2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 4px; }
.esp-cell {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--guia-line);
  background: var(--guia-cream);
  text-align: center;
}
.esp-cell .lbl { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--guia-muted); }
.esp-cell strong { display: block; font-size: 22px; line-height: 1.25; }
.esp-cell.lam strong { color: var(--guia-navy); }
.esp-cell.fq strong { color: var(--guia-orange); }
.esp-cell .dir { display: block; font-size: 13px; font-weight: 800; color: var(--guia-muted); min-height: 1.2em; }

/* ===== ondita ===== */
.esp-onda-stage { text-align: center; }
.esp-onda { max-width: 380px; }
.esp-onda-mov { animation: esp-onda-scroll linear infinite; }
@keyframes esp-onda-scroll { to { transform: translateX(var(--esp-mov)); } }
@media (prefers-reduced-motion: reduce) { .esp-onda-mov { animation: none; } }
.esp-onda-msg { margin: 8px 2px 0; font-size: 15px; font-weight: 600; color: var(--guia-ink); text-align: center; min-height: 1.4em; }

/* ===== explorador ===== */
.esp-x-strip { touch-action: none; cursor: pointer; margin: 4px 0 2px; }
.esp-x-svg { width: 100%; height: auto; display: block; }
.esp-x-range { width: 100%; accent-color: var(--guia-orange); height: 28px; cursor: pointer; }
.esp-x-bandrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0; }
.esp-x-band { font-size: 19px; font-weight: 900; color: var(--guia-deep); text-align: center; min-width: 150px; }
.esp-x-obj {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 4px;
  padding: 8px 12px;
  border: 1.5px dashed var(--guia-line);
  border-radius: 12px;
}
.esp-x-objsvg { flex: none; width: 58px; height: 58px; }
.esp-obj-svg { width: 58px; height: 58px; }
.esp-x-objtxt { margin: 0; font-size: 16px; font-weight: 600; color: var(--guia-ink); }
.esp-x-objtxt strong { color: var(--guia-navy); }

/* semáforo ionizante (explorador + verificador) */
.esp-sema {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}
.esp-sema.ok { background: #EAF5EC; border: 1.5px solid var(--guia-green); color: #14592A; }
.esp-sema.bad { background: #FBEAE8; border: 1.5px solid #B3261E; color: #7E1A14; }

/* ===== prisma ===== */
.esp-pr-strip {
  position: relative;
  height: 56px;
  border-radius: 10px;
  border: 1.5px solid var(--guia-line);
  touch-action: none;
  cursor: pointer;
  background: linear-gradient(90deg,
    #5b0fa8 0%, #3b1fd1 8%, #2447e0 16%, #1e7fe0 24%, #15a8a0 32%, #1fae4d 42%,
    #7ec425 52%, #d6d020 60%, #f2b51b 68%, #ef8514 78%, #e54616 88%, #c81e10 100%);
}
.esp-pr-marker {
  position: absolute;
  display: none;
  top: -6px;
  bottom: -6px;
  width: 4px;
  margin-left: -2px;
  border-radius: 3px;
  background: var(--guia-ink);
  box-shadow: 0 0 0 2px #fff;
}
.esp-pr-scale { display: flex; justify-content: space-between; margin: 6px 2px; font-size: 13px; font-weight: 800; color: var(--guia-muted); }
.esp-pr-read { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border: 1.5px dashed var(--guia-line); border-radius: 12px; }
.esp-pr-read p { margin: 0; font-size: 16px; line-height: 1.5; }
.esp-pr-read .lamv { color: var(--guia-navy); }
.esp-pr-read .pos { font-size: 15px; color: var(--guia-muted); font-weight: 600; }
.esp-pr-swatch {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 2px solid var(--guia-line);
}

/* ===== verificador ===== */
.esp-v-result { margin-top: 6px; padding-top: 10px; border-top: 1.5px dashed var(--guia-line); }
.esp-minibar {
  position: relative;
  display: flex;
  height: 22px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--guia-line);
}
.esp-minibar i { display: block; height: 100%; }
.esp-minimark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 4px;
  margin-left: -2px;
  border-radius: 3px;
  background: var(--guia-ink);
  box-shadow: 0 0 0 2px #fff;
}
.esp-minibar-lbl { display: flex; justify-content: space-between; margin: 4px 2px 8px; font-size: 13px; font-weight: 800; color: var(--guia-muted); }
.esp-v-banda { margin: 8px 0 0; font-size: 16px; line-height: 1.5; }
.esp-v-why, .esp-v-prot { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--guia-ink); }
.esp-v-prot strong, .esp-v-why strong { color: var(--guia-deep); }

/* ===== bandaquiz / ordenador ===== */
.esp-quiz-q { margin: 6px 0; font-size: 18px; font-weight: 800; color: var(--guia-ink); line-height: 1.45; }
/* Feedback = callout con borde COMPLETO (espejo de .guia-why, prefijo esp-) */
.esp-quiz-why { display: none; margin: 8px 0 0; padding: 10px 14px; border: 1.5px solid #bfe6cd; border-radius: 10px; background: #eef7f0; font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--guia-green-deep); }
.esp-quiz-why.show { display: block; animation: esp-why-fade .3s ease; }
.esp-quiz-why.show.bad { border-color: #f0c8c5; background: #fdf0ee; color: #B3261E; }
@keyframes esp-why-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.esp-quiz-nav { display: flex; justify-content: flex-end; margin-top: 8px; }
.esp-ord-done {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 48px;
  margin: 6px 0;
  padding: 8px 12px;
  border: 1.5px dashed var(--guia-line);
  border-radius: 12px;
}
.esp-ord-done .lbl { font-size: 13px; font-weight: 800; color: var(--guia-muted); letter-spacing: 0.03em; }
.esp-ord-fill { flex: 1; font-size: 15px; font-weight: 800; color: var(--guia-green-deep); line-height: 1.6; }
.esp-ord-fill em { font-style: normal; white-space: nowrap; }

/* ===== Responsive 360px ===== */
@media (max-width: 540px) {
  .esp-read2 { grid-template-columns: 1fr; }
  .esp-cell strong { font-size: 20px; }
  .esp-x-band { font-size: 17px; min-width: 0; }
}

/* ===== Impresión: la chuleta manda; los interactivos no aportan en papel ===== */
@media print {
  .esp-ondita, .esp-explorador, .esp-prisma, .esp-verificador, .esp-quiz, .esp-ordenador { display: none !important; }
}