/* =========================================================
   CSS ESTABLE (copiado de tu último archivo “bueno” si estaba disponible)
   ========================================================= */
body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      min-width: 100vw;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url("https://aula.clasesdequimica.online/img/pizarra2.png");
      color: #fff;
      text-align: center;
      font-family: 'EraserDust', Arial, Helvetica, sans-serif;
    }

    /* ==== TÍTULO ==== */
    .tiza1-titulo {
      text-align: center;
      margin: 0;
      line-height: 0.6;
      margin-top: 30vh;
      animation: tiza1-subir 2s ease-in-out 2.5s forwards;
    }

    @keyframes tiza1-subir {
      from { margin-top: 30vh; }
      to   { margin-top: 2rem; }
    }

    .tiza1-titulo .ecuaciones {
      font-size: 1.5em;
      display: block;
    }

    .tiza1-titulo .redox {
      font-family: 'FFFT';
      font-size: 2em;
      display: block;
    }

    /* ==== COMPUESTOS ==== */
    p.compuesto {
      font-size: 2em;
      margin: 3.5em 0;
      cursor: pointer;
      letter-spacing: -0.45em;
      transition: letter-spacing 0.8s ease, transform 0.4s ease;
      display: inline-block;
    }

    p.compuesto.nox-visible {
      letter-spacing: 0.25em;
      transform: scale(1.03);
    }

    /* ==== UNIDAD SEMÁNTICA ==== */
    .par {
      display: inline-flex;
      align-items: baseline;
    }

    .elemento {
      display: inline-block;
      letter-spacing: 0.05em;
      vertical-align: baseline;
    }

    .valencia {
      position: relative;
      font-size: 0.7em;
      vertical-align: super;
      line-height: 1.2;
      display: inline-block;
      width: 1.2em;
      margin-left: -1em;
    }

    .compuesto.nox-visible .valencia {
      margin-left: 0.28em;
      margin-right: -1.2em;
    }


    .valencia sup {
      color: yellow;
      position: absolute;
      top: -2.5em;
      left: -1.2em;
      opacity: 0;
      transition: opacity 0.6s ease;
    }

    .compuesto.nox-visible .valencia sup {
      opacity: 1;
    }

    .compuesto.nox-visible .subindice {
      position: absolute;
      top: -0.5em;
      left: -0.7em;
    }


    .subindice {
    
      position: absolute;
      top: -0.5em;
      left: 0.9em;

    }
    .subindice2 {

      position: relative;
      top: 0.4em;
      left: -0.2em;
      font-size: 0.6em;

    }

    .coeficiente {
      margin-left: 10px;
      margin-right: 2px;
      font-size: 2.5em;
      display: inline-block;
    }

    .separador {
      margin-left: 10px;
      margin-right: 3px;
      font-size: 3em;
      display: inline-block;
    }

    .flecha {
      display: inline-block;
      width: 11%;
      margin: 0 15px;
      vertical-align: middle;
      transform: translateY(-4px);
    }

    @font-face {
      font-family: 'EraserDust';
      src: url("/fonts/EraserDust.woff2") format('woff2'),
           url("/fonts/EraserDust.woff") format('woff'),
           url("/fonts/EraserDust.ttf") format('truetype');
    }

    @font-face {
      font-family: 'FFFT';
      src: url("/fonts/FFFTusj-Bold.woff2") format('woff2'),
           url("/fonts/FFFTusj-Bold.woff") format('woff'),
           url("/fonts/FFFTusj-Bold.ttf") format('truetype');
    }
  
/* ==== TÍTULO ANIMADO REDOX ==== */
.tiza1-wrapper {
  margin-top: 30vh;
  text-align: center;
  animation: tiza1-subir 2s ease-in-out 2.5s forwards;
}

@keyframes tiza1-subir {
  from { margin-top: 30vh; }
  to   { margin-top: 2rem; }
}

.tiza1-efecto-latido {
  display: inline-block;
  transform-origin: center center;
  animation: tiza1-latido 2s ease-in-out 1;
}

@keyframes tiza1-latido {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.2); }
  50%  { transform: scale(1); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* =========================================================
   CSS HARNÉS DE PRUEBA (NO tocar selectores del núcleo químico)
   ========================================================= */

/* =========================================================
   BATERÍA DE MAQUETADO — HARNÉS (NO TOCAR NÚCLEO QUÍMICO)
   - Estos estilos SOLO maquetan la página de prueba (paneles, cajas, etc.)
   - Evitar selectores que afecten .compuesto internamente
   ========================================================= */

:root{
  --panel-bg: rgba(0,0,0,0.28);
  --panel-br: rgba(255,255,255,0.10);
}

body{ margin:0; padding:0; }

.bateria-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 14px 60px;
}

.bloque{ margin: 18px 0; }

.panel{
  background: var(--panel-bg);
  border: 1px solid var(--panel-br);
  border-radius: 18px;
  padding: 14px 14px 16px;
  backdrop-filter: blur(3px);
}

.panel h2{
  margin: 0 0 10px 0;
  font-size: 1.1rem;
}

.panel p.meta{
  margin: 0 0 10px 0;
  opacity: 0.9;
  font-size: 0.95rem;
}

.fila{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}

.caja{
  padding: 12px 12px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.18);
  min-width: 260px;
}

.etiqueta{
  display: block;
  font-size: 0.85rem;
  opacity: 0.9;
  margin-bottom: 10px;
}

.superindice2{
  font-size: 0.65em;
  vertical-align: super;
  line-height: 1;
  margin-left: 0.15em;
}


.demo-linea{ margin: 8px 0; }

/* =========================================================
   NOX oculto por defecto SOLO en compuestos interactivos.
   Usamos visibility (no display) para minimizar corrimientos.
   ========================================================= */
.compuesto[data-interactivo="nox"] .valencia sup{ visibility: hidden; }
.compuesto[data-interactivo="nox"].nox-visible .valencia sup{ visibility: visible; }

/* Flecha: SIEMPRE IMAGEN (reemplazar el src por tu asset real) */
.flecha-reaccion{
  height: 22px;
  width: auto;
  vertical-align: middle;
  display: inline-block;
}

  
/* =========================================================
   PATCH BATERÍA: ajustes por feedback
   ========================================================= */

/* Ocultar coeficiente 1 (sigue existiendo como dato/estructura) */
.reactivo[data-coef="1"] .coeficiente,
.producto[data-coef="1"] .coeficiente{ display: none; }

/* Ecuaciones: evitar saltos internos; permitir wrap por término */
.reaccion{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.reactivo, .producto{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.separador{ display: inline-block; padding: 0 4px; }
.coeficiente{ display: inline-block; margin: 0; padding: 0; }

/* Núcleo mínimo para grupos/paréntesis */
.compuesto{ display: inline-flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; }
.par{ display: inline-flex; align-items: baseline; white-space: nowrap; }
.grupo{ display: inline-flex; align-items: baseline; white-space: nowrap; }
.paren{ display: inline-block;
        margin-right: 10px; }
.flecha{ height: 22px; width: auto; vertical-align: middle; display: inline-block; }