/* =========================================================
   Elemental W — Simulador: Ácidos y Bases
   Depende de (en este orden, en el <head>):
   design-tokens.css, themes.css, ui-components.css, motion.css,
   simuladores/_compartido/simuladores-widgets.css (chrome
   simc-widget__* compartido con péndulo/caída libre).
   ========================================================= */

/* Este simulador es discreto (no hay física continua que pausar
   ni "rebobinar"): la barra Pausar/Reiniciar del chrome compartido
   no aplica aquí — "Nuevo compuesto", dentro de los controles
   básicos, ya cumple ese rol con el texto correcto en ambos modos.
   Además, este simulador NUNCA debe llamar a api.reiniciar() (ver
   nota de arquitectura en acidos-bases.js), así que ocultar el
   botón real de la barra evita que alguien lo dispare por ahí. */
.simc-widget--acidos-bases .simc-widget__barra {
  display: none !important;
}

/* ---------- Lienzo: vasija + tira, centrados y en columna ---------- */

.acbs-lienzo {
  flex-direction: column;
  gap: var(--ew-space-2);
  padding: var(--ew-space-3) 0;
}

.acbs-vasija__etiqueta-modo {
  margin: 0;
  font-family: var(--ew-font-display);
  font-size: var(--ew-text-lg);
  color: var(--ew-color-plum);
  text-align: center;
  min-height: 1.3em;
  transition: color var(--ew-transition-base);
}

/* Fórmula química: subíndices <sub> reales (no unicode), en una
   fuente serif tipo "libro de texto" para que se lea como fórmula,
   no como el nombre del compuesto. */
.acbs-vasija__etiqueta-modo--formula {
  font-family: var(--ew-font-heading);
  font-style: italic;
  font-size: var(--ew-text-lg);
  letter-spacing: 0.01em;
  color: var(--ew-color-text);
}

.acbs-vasija__etiqueta-modo--formula sub {
  font-size: 0.7em;
}

.acbs-vasija__etiqueta-modo--misterio {
  font-size: var(--ew-text-2xl);
  color: var(--ew-color-magenta);
  animation: acbs-pulso-misterio 1.4s ease-in-out infinite;
}

@keyframes acbs-pulso-misterio {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.acbs-vasija__cuerpo {
  position: relative;
  width: 108px;
}

/* La probeta es más angosta y alta que el frasco/matraz — un poco
   más de ancho disponible se ve raro con su silueta recta. */
.acbs-vasija__cuerpo--probeta {
  width: 84px;
}

.acbs-vasija__svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

.acbs-vasija__vidrio {
  fill: color-mix(in srgb, var(--ew-color-surface) 55%, transparent);
  stroke: var(--ew-color-border-strong);
  stroke-width: 3;
}

.acbs-vasija__liquido {
  transition: fill 0.6s ease;
}

.acbs-vasija__superficie {
  transition: opacity 0.4s ease;
}

.acbs-vasija__brillo {
  stroke: white;
  stroke-width: 5;
  stroke-linecap: round;
  fill: none;
  opacity: 0.3;
}

/* --- Frasco de reactivo --- */

.acbs-vasija__tapa {
  fill: var(--ew-color-plum);
}

.acbs-vasija__tapa-linea {
  stroke: color-mix(in srgb, var(--ew-color-plum) 60%, black);
  stroke-width: 1;
}

.acbs-vasija__etiqueta-rotulo {
  fill: var(--ew-color-surface);
  stroke: var(--ew-color-border);
  stroke-width: 1.5;
}

.acbs-vasija__etiqueta-franja {
  fill: var(--ew-color-primary);
  opacity: 0.7;
}

.acbs-vasija__etiqueta-linea {
  stroke: var(--ew-color-border);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* --- Probeta --- */

.acbs-vasija__marca {
  stroke: var(--ew-color-border-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* --- Matraz Erlenmeyer --- */

.acbs-vasija__corcho {
  fill: #c9a874;
  stroke: color-mix(in srgb, #c9a874 60%, black);
  stroke-width: 1;
}

/* ---------- Tira universal: flota junto a la vasija ---------- */

.acbs-tira {
  position: absolute;
  right: -14px;
  top: 34px;
  width: 16px;
  height: 66px;
  transform: rotate(8deg);
  animation: ew-fade-in var(--ew-transition-base) ease both;
}

.acbs-tira__papel {
  width: 100%;
  height: 100%;
  border-radius: var(--ew-radius-sm);
  background: #f4f1e6;
  border: 2px solid var(--ew-color-border-strong);
  box-shadow: var(--ew-shadow-sm);
  transition: background 0.6s ease;
}

/* ---------- Controles básicos (ambos modos) ---------- */

.acbs-herramientas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ew-space-2);
}

.acbs-btn-herramienta {
  flex: 1 1 auto;
  font-size: var(--ew-text-sm);
  justify-content: center;
}

.acbs-nota {
  margin: 0;
  min-height: 1.3em;
  font-size: var(--ew-text-xs);
  color: var(--ew-color-text-muted);
  text-align: center;
}

.acbs-pregunta {
  display: grid;
  gap: var(--ew-space-2);
  padding: var(--ew-space-3);
  border-radius: var(--ew-radius-lg);
  background: var(--ew-color-primary-soft);
  border: 1px dashed var(--ew-color-border-strong);
}

.acbs-pregunta__texto {
  margin: 0;
  text-align: center;
  font-weight: 800;
  color: var(--ew-color-plum);
}

.acbs-pregunta__botones {
  display: flex;
  gap: var(--ew-space-2);
}

.acbs-btn-respuesta {
  flex: 1 1 0;
  font-size: var(--ew-text-sm);
}

.acbs-pregunta__ayuda {
  margin: 0;
  text-align: center;
  font-size: var(--ew-text-xs);
  color: var(--ew-color-text-muted);
}

.acbs-pregunta__ayuda--ok { color: var(--ew-color-success); font-weight: 700; }
.acbs-pregunta__ayuda--error { color: var(--ew-color-danger); font-weight: 700; }

.acbs-btn-siguiente {
  font-size: var(--ew-text-sm);
  justify-content: center;
}

/* ---------- Controles avanzados (solo modo completo) ---------- */

.acbs-marcador-completo {
  margin: 0;
  font-size: var(--ew-text-sm);
  font-weight: 700;
  color: var(--ew-color-text);
}

.acbs-escala-ph {
  display: flex;
  border-radius: var(--ew-radius-md);
  overflow: hidden;
  border: 1px solid var(--ew-color-border);
}

.acbs-escala-ph__seg {
  flex: 1 1 0;
  padding: var(--ew-space-2);
  font-size: var(--ew-text-xs);
  font-weight: 700;
  text-align: center;
  color: white;
}

.acbs-escala-ph__seg--acido { background: #e2543f; }
.acbs-escala-ph__seg--neutro { background: #7fbf6b; }
.acbs-escala-ph__seg--base { background: #4f5fbf; }