/* ============================================================
   15-problema.css · Restyle "diagnóstico de estado" de #problema
   Override TOTAL del tratamiento morado de .plinto (la metáfora
   base/plinto → readout de tensión ámbar/ink). El reveal vive en
   nav-reveal.js (.plinto ya es genericTarget) y la estructura/
   responsive base en 04-sections.css — NINGUNO se toca.
   ============================================================ */

/* ── Tokens de "falla" (ámbar muted, AA sobre blanco ≈4.7:1) ── */
:root {
  --vp-falla: #B45309;        /* ámbar-700 · acento de falla (status, punto, border-left) */
  --vp-falla-tint: #FCF3E8;   /* tint claro · hover de fila */
}

/* ── Sección: contenedor del accent-motif ── */
.problem { position: relative; }
.problem > .container { position: relative; z-index: 1; }
.problem .accent-motif { opacity: 0.045; }

/* ── Panel "readout" (card sobre el gris de .problem) ── */
.diag-panel {
  max-width: var(--content-max);
  margin: var(--space-xl) auto 0;
  background: var(--vp-blanco);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

/* ── Header: label diagnóstico + status inestable ── */
.diag-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-line);
}
.diag-panel__label {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink-soft);
}
.diag-panel__status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--vp-falla);
}
.diag-panel__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vp-falla); flex-shrink: 0;
  animation: diagPulse 1600ms ease-in-out infinite;
}
@keyframes diagPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── Onda sismógrafo (una traza continua, loop sutil) ── */
.diag-wave {
  display: block; width: 100%; height: 64px;
  margin: var(--space-md) 0 var(--space-lg);
  color: var(--vp-falla);
}
/* La traza conserva SOLO el loop translateX (transform-box: view-box). */
.diag-wave__trace {
  transform-box: view-box;
  animation: diagWave 7000ms linear infinite;
  transition: stroke 300ms var(--ease), stroke-width 300ms var(--ease);
}
/* La traza dibuja 2 periodos (2400u) en un viewBox de 1200u → el
   desplazamiento de un periodo es perfectamente cíclico (sin salto). */
@keyframes diagWave { from { transform: translateX(0); } to { transform: translateX(-1200px); } }

/* El grupo lleva la amplitud (scaleY) → no choca con el translateX de la
   traza. Pivota en el centro del bbox (y=40, la línea base). */
.diag-wave__amp {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 300ms var(--ease);
}

/* ── Reacción: al pasar por CUALQUIER falla, la inestabilidad responde ──
   Scoped a .diag-panel: NO afecta otras secciones. Touch (sin hover) →
   no se activa, la onda sigue su loop normal. */
.diag-panel:has(.plinto:hover) .diag-wave__amp { transform: scaleY(1.35); }
.diag-panel:has(.plinto:hover) .diag-wave__trace { stroke: var(--vp-falla); stroke-width: 2.5; }

/* ── Filas: OVERRIDE total del gradiente morado → lectura neutra ── */
.diag-panel .plinto-stack { margin-top: 0; max-width: none; gap: var(--space-sm); }

.diag-panel .plinto,
.diag-panel .plinto[data-stack-pos="1"],
.diag-panel .plinto[data-stack-pos="2"],
.diag-panel .plinto[data-stack-pos="3"],
.diag-panel .plinto[data-stack-pos="4"],
.diag-panel .plinto[data-stack-pos="5"] {
  grid-template-columns: 48px 1fr;
  gap: var(--space-md);
  align-items: start;
  background: var(--vp-blanco);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--vp-falla);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: var(--space-md);
}
/* pos5 ya no es "base" morada con peso extra */
.diag-panel .plinto[data-stack-pos="5"] {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  padding-bottom: var(--space-md);
}

/* Índice mono pequeño (sustituye al número display gigante) */
.diag-panel .plinto__num {
  font-family: var(--font-mono);
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em;
  line-height: 1.7;
  text-align: left;
  color: var(--color-ink-soft);
  opacity: 1;
}
.diag-panel .plinto__title { color: var(--color-ink); }
.diag-panel .plinto__conseq { color: var(--color-ink-soft); opacity: 1; }

/* Hover: intensifica la falla + eleva sutil (gana a pos4/pos5 morados) */
.diag-panel .plinto:hover,
.diag-panel .plinto[data-stack-pos="4"]:hover,
.diag-panel .plinto[data-stack-pos="5"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-line);
  border-left-color: var(--vp-falla);
  background: var(--vp-falla-tint);
}
.diag-panel .plinto:hover .plinto__num { color: var(--vp-falla); }

/* ── MÓVIL ── */
@media (max-width: 768px) {
  .diag-panel { padding: var(--space-md); }
  .diag-panel__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .diag-wave { height: 48px; }
}
@media (max-width: 700px) {
  .diag-panel .plinto { grid-template-columns: 40px 1fr; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
  .diag-panel .plinto__num { font-size: 0.8rem; }
}

/* ── Reduced motion: punto y onda estáticos, hover sin desplazamiento ── */
@media (prefers-reduced-motion: reduce) {
  .diag-panel__dot { animation: none; }
  .diag-wave__trace { animation: none; }
  /* La reacción a la falla se reduce a cambio de color: sin scaleY ni
     ensanchado de traza (onda base estática). */
  .diag-panel:has(.plinto:hover) .diag-wave__amp { transform: none; }
  .diag-panel:has(.plinto:hover) .diag-wave__trace { stroke-width: 2; }
  .diag-panel .plinto:hover { transform: none; box-shadow: var(--shadow-sm); }
}