/* ================================================================
   QUÍMICA INTERACTIVA 10° — Lic. Bryan Chavarría C.
   css/standards.css  |  FASE 1.5 — Estilos de los sistemas compartidos
   ================================================================
   Aditivo a main.css. Usa los mismos tokens (--cyan, --bg-card, …).
   No modifica ni depende de cambios en main.css.
================================================================ */

/* ── Glosario: término resaltado + popover ──────────────────── */
.qi-term {
  border-bottom: 1px dashed var(--cyan, #00BCD4);
  cursor: help;
  color: var(--cyan, #00BCD4);
}
.qi-term-popover {
  position: absolute;
  z-index: 9999;
  max-width: 280px;
  background: var(--bg-elevated, #1a2230);
  border: 1px solid var(--border, #2a3340);
  border-left: 3px solid var(--cyan, #00BCD4);
  border-radius: var(--radius-md, 10px);
  padding: .6rem .8rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  animation: fadeIn .15s ease;
}
.qi-term-popover strong { display: block; color: var(--cyan, #00BCD4); font-size: .85rem; margin-bottom: .2rem; }
.qi-term-popover span { font-size: .82rem; color: var(--text-secondary, #b8c2cc); line-height: 1.5; }

/* ── Imágenes universales ───────────────────────────────────── */
.qi-figure { margin: .8rem 0; text-align: center; }
.qi-img { max-width: 100%; border-radius: var(--radius-md, 10px); border: 1px solid var(--border, #2a3340); }
.qi-figcaption { font-size: .78rem; color: var(--text-muted, #7a8a99); margin-top: .35rem; }

/* ── Videos ─────────────────────────────────────────────────── */
.qi-video-grid { display: grid; gap: .8rem; margin: .8rem 0; }
.qi-video video { width: 100%; border-radius: var(--radius-md, 10px); background: #000; }
.qi-video-title { font-size: .82rem; color: var(--text-secondary, #b8c2cc); margin-top: .35rem; }
.qi-video-soon {
  display: flex; align-items: center; gap: .9rem;
  background: var(--bg-elevated, #1a2230);
  border: 1px dashed var(--border, #2a3340);
  border-radius: var(--radius-md, 10px);
  padding: .9rem 1.1rem;
}
.qi-video-soon-icon { font-size: 1.8rem; }
.qi-video-soon-text { display: flex; flex-direction: column; }
.qi-video-soon-text strong { font-size: .9rem; color: var(--text-primary, #e8eef4); }
.qi-video-soon-text span { font-size: .78rem; color: var(--text-muted, #7a8a99); }

/* ── Referencias cruzadas (chips) ───────────────────────────── */
.qi-xref-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .9rem; }
.qi-xref-label { font-size: .78rem; color: var(--text-muted, #7a8a99); }
.qi-xref {
  font-size: .78rem; padding: .3rem .7rem; cursor: pointer;
  background: var(--bg-elevated, #1a2230);
  color: var(--cyan, #00BCD4);
  border: 1px solid var(--cyan, #00BCD4);
  border-radius: var(--radius-full, 999px);
  transition: all .15s ease;
}
.qi-xref:hover { background: var(--cyan, #00BCD4); color: #04121a; }

/* ── Overlays (glosario y buscador) ─────────────────────────── */
.qi-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.6);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 1rem 1rem;
  animation: fadeIn .2s ease;
}
.qi-overlay-card {
  width: 100%; max-width: 560px;
  background: var(--bg-card, #141b24);
  border: 1px solid var(--border, #2a3340);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  max-height: 80vh;
}
.qi-overlay-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem .4rem; }
.qi-overlay-head h3 { margin: 0; font-size: 1.05rem; }
.qi-overlay-input {
  margin: .4rem 1.2rem 0; padding: .7rem .9rem;
  background: var(--bg-input, #0e141b);
  border: 1px solid var(--border, #2a3340);
  border-radius: var(--radius-md, 10px);
  color: var(--text-primary, #e8eef4); font-size: .95rem; outline: none;
}
.qi-overlay-input:focus { border-color: var(--cyan, #00BCD4); }
.qi-overlay-body { overflow-y: auto; padding: .8rem 1.2rem 1.2rem; }

/* ── Resultados de búsqueda ─────────────────────────────────── */
.qi-search-result {
  display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: .6rem .5rem; border-radius: var(--radius-sm, 6px);
  color: var(--text-primary, #e8eef4);
}
.qi-search-result:hover { background: var(--bg-elevated, #1a2230); }
.qi-search-ico { font-size: 1.2rem; }
.qi-search-main { display: flex; flex-direction: column; }
.qi-search-title { font-size: .9rem; font-weight: 600; }
.qi-search-sub { font-size: .74rem; color: var(--text-muted, #7a8a99); }

/* ── Glosario (listado) ─────────────────────────────────────── */
.qi-glossary-list { display: flex; flex-direction: column; gap: .55rem; }
.qi-glossary-item { border-left: 3px solid var(--cyan, #00BCD4); padding: .4rem .7rem; background: var(--bg-elevated, #1a2230); border-radius: 0 var(--radius-sm,6px) var(--radius-sm,6px) 0; }
.qi-glossary-term { font-weight: 700; font-size: .88rem; color: var(--cyan, #00BCD4); }
.qi-glossary-def { font-size: .82rem; color: var(--text-secondary, #b8c2cc); line-height: 1.5; }

/* ── Ayudas progresivas ─────────────────────────────────────── */
.qi-hints { margin-top: .8rem; }
.qi-hint-item {
  display: flex; gap: .5rem; align-items: flex-start;
  background: var(--bg-elevated, #1a2230);
  border-radius: var(--radius-sm, 6px);
  padding: .45rem .7rem; margin-bottom: .35rem;
  font-size: .84rem; color: var(--text-secondary, #b8c2cc);
}
.qi-hint-count { opacity: .8; font-size: .76rem; }
.qi-hint-done { font-size: .78rem; color: var(--text-muted, #7a8a99); }

/* ── Panel PNE / accesibilidad ──────────────────────────────── */
.qi-pne-panel { background: var(--bg-card, #141b24); border: 1px solid var(--border, #2a3340); border-radius: var(--radius-md, 10px); padding: 1rem; }
.qi-pne-title { font-weight: 700; margin-bottom: .6rem; }
.qi-pne-row { display: flex; justify-content: space-between; align-items: center; padding: .4rem 0; font-size: .9rem; }
.qi-pne-note { font-size: .76rem; color: var(--text-muted, #7a8a99); margin-top: .5rem; }

/* ── Clases aplicadas por PNE al <body> ─────────────────────── */
body.pne-contraste {
  --bg-main: #000; --bg-card: #0a0a0a; --bg-elevated: #141414;
  --text-primary: #fff; --text-secondary: #f0f0f0; --border: #ffffff55;
}
body.pne-texto-grande { font-size: 1.15rem; }
body.pne-texto-grande .btn { font-size: 1.02rem; }
body.pne-simplificado .qi-video-soon,
body.pne-simplificado .qi-xref-row { display: none !important; }
body.pne-simplificado * { animation: none !important; transition: none !important; }

/* ── Accesos rápidos ──────────────────────────────────────────
   EOP-023: ya no flotan sobre la interfaz. Viven de forma permanente
   en el sidebar — ver .mqc-quick-access en css/main.css. */

/* ════════════════════════════════════════════════════════════
   UNIDAD II — Biblioteca gráfica (viz), Método MQC, Mentor, Insights
   ════════════════════════════════════════════════════════════ */

/* ── viz.js ─────────────────────────────────────────────────── */
.viz-box { text-align:center; margin:1rem 0; }
.viz-svg { max-width:280px; width:100%; height:auto; }
.viz-cap { font-size:.78rem; color:var(--text-muted, #7a8a99); margin-top:.3rem; }
@keyframes vizSpin { from { transform:rotate(0deg);} to { transform:rotate(360deg);} }
.viz-rotate   { animation:vizSpin 18s linear infinite; }
.viz-rotate-1 { animation-duration:14s; }
.viz-rotate-2 { animation-duration:22s; animation-direction:reverse; }
.viz-rotate-3 { animation-duration:30s; }
body.pne-simplificado .viz-rotate { animation:none !important; }

/* ── MQC: experiencia, detonante, compromiso, conexión ──────── */
.mqc-experience {
  background:linear-gradient(135deg, color-mix(in srgb, var(--mqc-accent, var(--blue, #00A8CC)) 22%, transparent), transparent);
  border:1px solid var(--border, #2a3340); border-left:4px solid var(--mqc-accent, var(--blue, #00A8CC));
  border-radius:var(--radius-lg, 14px); padding:1.1rem 1.25rem; margin-bottom:1rem;
}
.mqc-exp-tag { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted, #7a8a99); }
.mqc-exp-name { margin:.15rem 0 .5rem; font-size:1.3rem; }
.mqc-exp-detonante { font-size:.92rem; color:var(--text-primary, #e8eef4); margin-bottom:.5rem; }
.mqc-exp-mision { font-size:.86rem; color:var(--text-secondary, #b8c2cc); background:var(--bg-elevated, #1a2230); border-radius:var(--radius-md,10px); padding:.55rem .8rem; }

.mqc-badge { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.04em; padding:.18rem .55rem; border-radius:var(--radius-full,999px); background:var(--bg-elevated,#1a2230); color:var(--blue,#00A8CC); margin-bottom:.4rem; }
.mqc-detonante { border-left:4px solid var(--blue,#00A8CC); background:var(--bg-elevated,#1a2230); border-radius:0 var(--radius-md,10px) var(--radius-md,10px) 0; padding:.7rem 1rem; margin:.2rem 0 .8rem; }
.mqc-detonante p { margin:0; font-size:.95rem; color:var(--text-primary,#e8eef4); font-weight:600; }

.mqc-commit { border:1px dashed var(--blue,#00A8CC); border-radius:var(--radius-md,10px); padding:.8rem 1rem; margin:0 0 1rem; background:color-mix(in srgb, var(--blue,#00A8CC) 7%, transparent); }
.mqc-commit > p { margin:.1rem 0 .5rem; font-weight:700; color:var(--text-primary,#e8eef4); }
.mqc-commit-hint { font-weight:400 !important; font-size:.8rem; color:var(--text-muted,#7a8a99) !important; }
.mqc-commit-opts { display:flex; flex-wrap:wrap; gap:.4rem; }
.mqc-commit-opt { white-space:normal; height:auto; }
.mqc-commit-result { margin-top:.6rem; font-size:.85rem; padding:.4rem .7rem; border-radius:var(--radius-sm,6px); }
.mqc-commit-result.ok { background:color-mix(in srgb, var(--green,#00C853) 14%, transparent); color:var(--green,#00C853); }
.mqc-commit-result.no { background:color-mix(in srgb, var(--gold,#FFD700) 14%, transparent); color:var(--gold,#FFD700); }
.mqc-commit-explica { font-size:.82rem; color:var(--text-secondary,#b8c2cc); margin:.4rem 0 0; }

.mqc-conexion { border-left:4px solid var(--green,#00C853); background:var(--bg-elevated,#1a2230); border-radius:0 var(--radius-md,10px) var(--radius-md,10px) 0; padding:.6rem 1rem; margin:.8rem 0; }
.mqc-conexion p { margin:0; font-size:.86rem; color:var(--text-secondary,#b8c2cc); }

/* ── Mentor MQC ─────────────────────────────────────────────── */
.mqc-mentor { display:flex; align-items:flex-start; gap:.7rem; background:var(--bg-card,#141b24); border:1px solid var(--border,#2a3340); border-left:3px solid var(--blue,#00A8CC); border-radius:var(--radius-md,10px); padding:.8rem 1rem; margin:.6rem 0; }
.mqc-mentor-avatar { font-size:1.5rem; }
.mqc-mentor-body { flex:1; }
.mqc-mentor-name { display:block; font-size:.78rem; color:var(--blue,#00A8CC); margin-bottom:.15rem; }
.mqc-mentor-body p { margin:0; font-size:.86rem; color:var(--text-secondary,#b8c2cc); line-height:1.55; }

/* ── Insights: curiosidades y errores frecuentes ────────────── */
.qi-insight { border-radius:var(--radius-md,10px); padding:.7rem 1rem; margin:.7rem 0; }
.qi-insight-badge { display:inline-block; font-size:.72rem; font-weight:700; margin-bottom:.3rem; }
.qi-insight p { margin:.2rem 0; font-size:.86rem; line-height:1.55; }
.qi-curiosidad { background:color-mix(in srgb, var(--gold,#FFD700) 10%, transparent); border-left:4px solid var(--gold,#FFD700); }
.qi-curiosidad .qi-insight-badge { color:var(--gold,#FFD700); }
.qi-insight-src { font-size:.74rem; color:var(--text-muted,#7a8a99); }
.qi-error { background:color-mix(in srgb, var(--red,#FF2266) 8%, transparent); border-left:4px solid var(--red,#FF2266); }
.qi-error .qi-insight-badge { color:var(--red,#FF2266); }
.qi-error-creencia { font-style:italic; color:var(--text-primary,#e8eef4); }
.qi-error-correc { color:var(--green,#00C853); }

/* ═══════════════════════════════════════════════════════════════
   UNIDAD III — Tabla Periódica: primitivas viz + puente MQC
   ═══════════════════════════════════════════════════════════════ */

/* Mini-tabla periódica (cuadrícula 18 columnas) */
.viz-ptable{
  display:grid;
  grid-template-columns:repeat(18, minmax(20px, 1fr));
  grid-auto-rows:1fr;
  gap:2px;
  max-width:760px;
  margin:.5rem auto;
}
.viz-ptable-cell{ display:flex; }
.viz-el-cell{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  min-height:24px;
  border-radius:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:var(--font-code, monospace);
  line-height:1;
  cursor:default;
  transition:transform .12s ease, box-shadow .12s ease;
  overflow:hidden;
}
.viz-el-cell:hover{ transform:scale(1.12); box-shadow:0 2px 10px rgba(0,0,0,.45); z-index:2; }
.viz-el-z{ position:absolute; top:1px; left:3px; font-size:.5rem; opacity:.85; }
.viz-el-sym{ font-size:.82rem; font-weight:800; }
.viz-el-sub{ font-size:.46rem; opacity:.95; margin-top:1px; }
.viz-el-active{ outline:2px solid #fff; outline-offset:-2px; }
.viz-el-dim{ opacity:.28; }

@media (max-width:640px){
  .viz-ptable{ grid-template-columns:repeat(18, minmax(14px,1fr)); gap:1px; }
  .viz-el-sym{ font-size:.6rem; }
  .viz-el-z{ font-size:.4rem; }
  .viz-el-sub{ display:none; }
}

/* Puente MQC entre unidades (antes · ahora · después) */
.mqc-bridge{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.6rem;
  margin:1rem 0;
}
.mqc-bridge-cell{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:.8rem .9rem;
  position:relative;
}
.mqc-bridge-antes{ border-top:3px solid var(--text-muted); }
.mqc-bridge-ahora{ border-top:3px solid var(--green, #00C853); }
.mqc-bridge-despues{ border-top:3px solid var(--gold, #F9A825); }
.mqc-bridge-head{
  font-size:.74rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-muted);
  margin-bottom:.35rem;
}
.mqc-bridge-ahora .mqc-bridge-head{ color:var(--green, #00C853); }
.mqc-bridge-despues .mqc-bridge-head{ color:var(--gold, #F9A825); }
.mqc-bridge-cell p{
  margin:0;
  font-size:.84rem;
  color:var(--text-secondary);
  line-height:1.5;
}
.mqc-bridge-link{ margin-top:.5rem; }

@media (max-width:640px){
  .mqc-bridge{ grid-template-columns:1fr; }
}

/* Fila de chips de navegación xref (refuerzo, por si standards base no lo cubre) */
.qi-xref-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.8rem 0; }
.qi-xref-label{ font-size:.78rem; color:var(--text-muted); }
.qi-xref{
  display:inline-flex; align-items:center; gap:.3rem;
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius-full, 999px); color:var(--text-secondary);
  font-size:.78rem; padding:.3rem .7rem; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.qi-xref:hover{ border-color:var(--green, #00C853); color:var(--text-primary); }

/* ════════════════════════════════════════════════════════════
   PRIMITIVAS DE LEWIS Y ENLACE (viz.js) — Unidad IV en adelante.
   Las primitivas usan fills inline; estas reglas dan encuadre y
   accesibilidad responsiva al SVG dentro de la teoría/simuladores.
   ════════════════════════════════════════════════════════════ */
.viz-box{ display:flex; justify-content:center; align-items:center; margin:.6rem 0; }
.viz-box .viz-svg{ max-width:240px; width:100%; height:auto; }
.viz-lewis-atom text{ user-select:none; }
.viz-ion text{ user-select:none; }
.viz-ion circle{ transition:opacity .2s ease; }
@media (max-width:480px){ .viz-box .viz-svg{ max-width:180px; } }