/* ============================================================
   BOTTLENECK — secuencia de análisis del motor.
   Siluetas de CPU y GPU dibujadas trazo a trazo (stroke-dashoffset),
   bus de datos, barrido y veredicto. Todo vectorial: pesa unos KB,
   se adapta al tema y muestra los datos reales del usuario.
   ============================================================ */

.bnb {
    position: relative;
    margin-top: 2rem;
    padding: 2rem 1.5rem 1.6rem;
    background: var(--bx-bg, #121212);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    overflow: hidden;
    transition: opacity 0.3s ease;
}
.bnb.done { opacity: 0; }
.light-theme .bnb,
html.light-theme .bnb {
    background: #f7f7f7;
    border-color: rgba(0,0,0,0.09);
}

/* Rejilla tenue de fondo, como un visor técnico */
.bnb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}
html.light-theme .bnb::before,
.light-theme .bnb::before {
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}

.bnb-stage { position: relative; max-width: 700px; margin: 0 auto; }

/* ── Escena vectorial ───────────────────────────────────── */
.bnb-svg { display: block; width: 100%; height: auto; overflow: visible; }

.bnb-svg [data-draw] {
    fill: none;
    stroke: var(--bnb-line, rgba(255,255,255,0.55));
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
html.light-theme .bnb-svg [data-draw],
.light-theme .bnb-svg [data-draw] { stroke: rgba(0,0,0,0.5); }

.bnb.play .bnb-svg [data-draw] {
    animation: bnbDraw 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--d, 0ms);
}
@keyframes bnbDraw { to { stroke-dashoffset: 0; } }

/* Los trazos "vivos" (núcleo del chip, hub de los ventiladores) se
   quedan encendidos en el color de acento al terminar de dibujarse. */
.bnb-svg [data-glow] { stroke: var(--primary-color, #ff6b35); }
.bnb.play .bnb-svg [data-glow] {
    animation: bnbDraw 0.5s cubic-bezier(0.4,0,0.2,1) forwards, bnbPulse 1.6s ease-in-out infinite;
    animation-delay: var(--d, 0ms), calc(var(--d, 0ms) + 500ms);
}
@keyframes bnbPulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* Bus de datos: se dibuja y luego fluye */
.bnb-bus-flow {
    fill: none;
    stroke: var(--primary-color, #ff6b35);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 5 13;
    opacity: 0;
}
.bnb.play .bnb-bus-flow {
    animation: bnbFlowIn 0.3s ease 1100ms forwards, bnbFlow 0.75s linear 1100ms infinite;
}
@keyframes bnbFlowIn { to { opacity: 1; } }
@keyframes bnbFlow  { to { stroke-dashoffset: -18; } }

/* Barrido de análisis */
.bnb-scan {
    stroke: var(--primary-color, #ff6b35);
    stroke-width: 1.2;
    opacity: 0;
}
.bnb.play .bnb-scan { animation: bnbScan 1.15s ease-in-out 1250ms 1; }
@keyframes bnbScan {
    0%   { opacity: 0;    transform: translateX(0); }
    12%  { opacity: 0.85; }
    88%  { opacity: 0.85; }
    100% { opacity: 0;    transform: translateX(560px); }
}

/* ── Etiquetas de los dos componentes ───────────────────── */
.bnb-tags {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: -0.4rem;
}
.bnb-tag {
    flex: 0 1 46%;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
}
.bnb-tag-gpu { text-align: right; }
.bnb-tag small {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 2px;
}
html.light-theme .bnb-tag,
.light-theme .bnb-tag { color: rgba(0,0,0,0.72); }
html.light-theme .bnb-tag small,
.light-theme .bnb-tag small { color: rgba(0,0,0,0.4); }
.bnb.play .bnb-tag { animation: bnbFadeUp 0.4s ease forwards; animation-delay: var(--d, 0ms); }
@keyframes bnbFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ── Registro de etapas del motor ───────────────────────── */
.bnb-log {
    list-style: none;
    margin: 1.3rem 0 0;
    padding: 0;
    font-size: 0.73rem;
    line-height: 1.9;
    color: rgba(255,255,255,0.42);
}
html.light-theme .bnb-log,
.light-theme .bnb-log { color: rgba(0,0,0,0.5); }
.bnb-log li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    opacity: 0;
}
.bnb.play .bnb-log li { animation: bnbFadeUp 0.3s ease forwards; animation-delay: var(--d, 0ms); }
.bnb-log b {
    color: rgba(255,255,255,0.78);
    font-weight: 600;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
html.light-theme .bnb-log b,
.light-theme .bnb-log b { color: rgba(0,0,0,0.8); }
.bnb-log i {
    font-style: normal;
    color: var(--primary-color, #ff6b35);
    font-size: 0.6rem;
}

/* ── Medidor final ──────────────────────────────────────── */
.bnb-meter {
    position: relative;
    height: 3px;
    margin-top: 1.3rem;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
html.light-theme .bnb-meter,
.light-theme .bnb-meter { background: rgba(0,0,0,0.08); }
.bnb-meter span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--primary-color, #ff6b35);
    transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bnb-meter.balanced span { background: #4caf50; }
.bnb-meter.moderate span { background: #ffc107; }
.bnb-meter.severe   span { background: #f44336; }

.bnb-readout {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.7rem;
    opacity: 0;
}
.bnb.play .bnb-readout { animation: bnbFadeUp 0.35s ease 2050ms forwards; }
.bnb-readout-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}
html.light-theme .bnb-readout-label,
.light-theme .bnb-readout-label { color: rgba(0,0,0,0.45); }
.bnb-pct {
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--primary-color, #ff6b35);
}
.bnb-meter.balanced ~ .bnb-readout .bnb-pct { color: #4caf50; }
.bnb-meter.moderate ~ .bnb-readout .bnb-pct { color: #ffc107; }
.bnb-meter.severe   ~ .bnb-readout .bnb-pct { color: #f44336; }

/* ── Saltar ─────────────────────────────────────────────── */
.bnb-skip {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 3px;
    padding: 0.25rem 0.6rem;
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.bnb-skip:hover { color: #fff; border-color: rgba(255,255,255,0.35); }
html.light-theme .bnb-skip,
.light-theme .bnb-skip { border-color: rgba(0,0,0,0.16); color: rgba(0,0,0,0.5); }
html.light-theme .bnb-skip:hover,
.light-theme .bnb-skip:hover { color: #111; border-color: rgba(0,0,0,0.35); }

@media (max-width: 640px) {
    .bnb { padding: 1.5rem 1rem 1.2rem; }
    .bnb-log { font-size: 0.68rem; line-height: 1.75; }
    .bnb-tag { font-size: 0.66rem; }
}

/* Quien pide menos movimiento no ve la secuencia: el JS la retira
   directamente y muestra el resultado al instante. */
@media (prefers-reduced-motion: reduce) {
    .bnb { display: none !important; }
}