/* ============================================================
   Definición, fórmula, ejemplo, tip, error y el botón de copiar LaTeX
   ------------------------------------------------------------
   Capa: componente
   Reúne, en este orden: cajas.css, formula-copiar.css
   ============================================================ */

/* ═══════════════════════════════════════════════════
   CAJAS DE CONTENIDO — identidades visuales distintas
═══════════════════════════════════════════════════ */

/* DEFINICIÓN — azul navy suave */
.def-box {
  position: relative;
  border-left: 4px solid var(--accent-2);
  background: linear-gradient(135deg, rgba(var(--accent-2-rgb),.05) 0%, rgba(var(--accent-2-rgb),.02) 100%);
  padding: 18px 22px 18px 24px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 20px 0;
  transition: background var(--t), transform .2s;
}
.def-box::before {
  content: 'Definición';
  display: block;
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2); opacity: .6;
  margin-bottom: 8px;
}
.def-box:hover { transform: translateX(3px); }
body.dark-mode .def-box {
  border-left-color: var(--def-borde, var(--accent));
  background: var(--def-bg, rgba(var(--accent-rgb),.06));
}
html.dark-mode .def-box::before, body.dark-mode .def-box::before { color: var(--def-icono, var(--accent)); }

/* FÓRMULA — acento, con glow en hover */
.formula-box {
  /* El segundo stop era rgba(240,130,26,.04): el naranja #F0821A de
     Premium, escrito a mano en un componente común. Al 4% de alpha la
     diferencia contra el acento propio es imperceptible, y así la caja
     deja de teñirse de naranja en Neo, Atlas y Aurora. */
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.06) 0%, rgba(var(--accent-rgb),.04) 100%);
  border: 1.5px solid rgba(var(--accent-rgb),.3);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 20px 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  transition: border-color .25s, box-shadow .25s, background var(--t);
  text-align: center;
}
.formula-box:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-accent), inset 0 0 40px rgba(var(--accent-rgb),.04);
}
body.dark-mode .formula-box {
  background: rgba(var(--accent-rgb),.05);
  border-color: rgba(var(--accent-rgb),.2);
}

/* EJEMPLO — card blanca con sombra */
.example-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin: 20px 0;
  box-shadow: var(--shadow-sm);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  transition: background var(--t), border-color var(--t), box-shadow .25s;
}
.example-box:hover { box-shadow: var(--shadow); }
.example-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 700;
  color: var(--accent-2); text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 16px;
  transition: color var(--t);
}
.example-title::before {
  content: '';
  display: inline-block; width: 18px; height: 2px;
  background: var(--accent); border-radius: 1px;
}
html.dark-mode .example-title, body.dark-mode .example-title { color: var(--accent); }
body.dark-mode .example-box { background: var(--card2); }

/* ERROR — rojo suave */
.error-box {
  position: relative;
  background: rgba(220,38,38,.04);
  border: 1px solid rgba(220,38,38,.18);
  border-radius: var(--radius);
  padding: 16px 20px 16px 52px;
  margin: 16px 0;
  transition: background var(--t);
}
.error-box::before {
  content: '⚠';
  position: absolute; left: 16px; top: 14px;
  font-size: 1.1rem; line-height: 1;
  filter: grayscale(1) brightness(.6) sepia(1) hue-rotate(-30deg) saturate(4);
}

/* TIP — dorado cálido */
.tip-box {
  position: relative;
  background: rgba(var(--accent-rgb),.06);
  border: 1px solid rgba(var(--accent-rgb),.28);
  border-radius: var(--radius);
  padding: 16px 20px 16px 52px;
  margin: 16px 0;
  transition: background var(--t);
}
.tip-box::before {
  content: '💡';
  position: absolute; left: 16px; top: 14px;
  font-size: 1rem; line-height: 1;
}
body.dark-mode .tip-box { background: rgba(var(--accent-rgb),.07); }

/* ═══════════════════════════════════════════════════
   COPIAR FÓRMULA — botón flotante sobre cada fórmula display
   En touch siempre visible (no hay :hover real).
═══════════════════════════════════════════════════ */
.formula-box { position: relative; }
.copy-latex-btn {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card2); color: var(--accent-strong);
  cursor: pointer; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; line-height: 1;
  transition: opacity .2s, background .2s, color .2s, transform .15s;
  z-index: 5;
}
.formula-box:hover .copy-latex-btn,
.copy-latex-btn:focus-visible { opacity: 1; }
.copy-latex-btn:hover { background: var(--accent); color: var(--card); transform: scale(1.08); }
html.dark-mode .copy-latex-btn, body.dark-mode .copy-latex-btn { color: var(--accent); }
/* El estado "copiado" va DESPUES de la regla de modo oscuro y con un
   selector mas especifico, porque si no pierde: `body.dark-mode
   .copy-latex-btn` es (0,2,1) y `.copy-latex-btn.copiado` (0,2,0), asi
   que en oscuro el boton confirmado se pintaba con el acento del layout
   encima del verde de --estado-ok y --on-estado no llegaba a aplicarse
   NUNCA, en ninguno de los cuatro. Medido: premium 1,30:1 · neo 1,71 ·
   atlas 1,07 · aurora 1,56. Con --on-estado: 5,04 / 9,19 / 10,86 / 10,77. */
.copy-latex-btn.copiado,
html.dark-mode .copy-latex-btn.copiado,
body.dark-mode .copy-latex-btn.copiado {
  background: var(--estado-ok);
  color: var(--on-estado, #fff);
  border-color: var(--estado-ok);
}
/* En touch lo dejamos visible con opacidad media (antes lo escondíamos del todo) */
@media(hover: none) {
  .copy-latex-btn { opacity: .55; }
  .copy-latex-btn:active { opacity: 1; background: var(--accent); color: var(--card); }
}