/* ==========================================================================
   NEWENDO — BIOENERGETICS SUITE DESIGN SYSTEM (CSS)
   Evidence-Based Cellular & Metabolic Optimization Tools
   Compatible with Newendo Biophilic Theme System
   ========================================================================== */

:root {
    --bio-mitochondria: #d47a5b;
    --bio-mitochondria-glow: rgba(212, 122, 91, 0.25);
    --bio-hrv: #8fa691;
    --bio-hrv-glow: rgba(143, 166, 145, 0.25);
    --bio-bolt: #4fa89b;
    --bio-bolt-glow: rgba(79, 168, 155, 0.25);
    --bio-metabolic: #c5a880;
    --bio-metabolic-glow: rgba(197, 168, 128, 0.25);
    --bio-cryo: #91b8b2;
    --bio-cryo-glow: rgba(145, 184, 178, 0.3);
    --bio-sleep: #9b8ec4;
    --bio-sleep-glow: rgba(155, 142, 196, 0.25);
    --bio-cofactor: #e5b95f;
    --bio-cofactor-glow: rgba(229, 185, 95, 0.25);
    --bio-oculomotor: #72a4c8;
    --bio-oculomotor-glow: rgba(114, 164, 200, 0.25);
    --bio-vagal: #7aa899;
    --bio-vagal-glow: rgba(122, 168, 153, 0.25);
    --bio-quimio: #56b8a8;
    --bio-quimio-glow: rgba(86, 184, 168, 0.25);
    --bio-matriz: #e09f58;
    --bio-matriz-glow: rgba(224, 159, 88, 0.25);
    --bio-contraste: #38bdf8;
    --bio-contraste-glow: rgba(56, 189, 248, 0.25);
    --bio-contraste-heat: #f97316;
    --bio-contraste-cold: #38bdf8;
    --bio-ayuno: #f59e0b;
    --bio-ayuno-glow: rgba(245, 158, 11, 0.25);
    --bio-ayuno-refeed: #10b981;
    --bio-hydration: #38bdf8;
    --bio-hydration-glow: rgba(56, 189, 248, 0.25);
    --bio-glucolisis: #f59e0b;
    --bio-glucolisis-glow: rgba(245, 158, 11, 0.25);
    --bio-lactato: #ef4444;
    --bio-lactato-glow: rgba(239, 68, 68, 0.25);
    
    --bio-card-bg: rgba(20, 18, 16, 0.7);
    --bio-card-border: rgba(197, 168, 128, 0.18);
    --bio-card-hover: rgba(197, 168, 128, 0.35);
    --bio-inner-bg: rgba(10, 9, 8, 0.55);
}

[data-theme='light'] {
    --bio-card-bg: rgba(244, 242, 233, 0.85);
    --bio-card-border: rgba(37, 67, 52, 0.18);
    --bio-card-hover: rgba(37, 67, 52, 0.35);
    --bio-inner-bg: rgba(226, 231, 222, 0.65);
}

/* ─── Main Bioenergetics Section Container ─── */
.bioenergetics-section,
.cryo-standalone-section,
.bolt-standalone-section {
    position: relative;
    padding: clamp(3.5rem, 6vw, 6rem) clamp(1rem, 3.5vw, 2.5rem);
    background: linear-gradient(180deg, rgba(8, 7, 6, 0.4) 0%, rgba(16, 23, 20, 0.65) 50%, rgba(8, 7, 6, 0.4) 100%);
}

[data-theme='light'] .bioenergetics-section,
[data-theme='light'] .cryo-standalone-section,
[data-theme='light'] .bolt-standalone-section {
    background: linear-gradient(180deg, rgba(244, 242, 233, 0.5) 0%, rgba(219, 229, 217, 0.4) 50%, rgba(244, 242, 233, 0.5) 100%);
}

.bio-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    background: rgba(197, 168, 128, 0.12);
    border: 1px solid rgba(197, 168, 128, 0.28);
    color: var(--gold-bright, #d3b06a);
    font-size: 0.825rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ─── Navigation Tabs for Bioenergetics Hub & Cuerpo Hub ─── */
.bio-hub-nav,
.cuerpo-hub-nav,
.hormesis-hub-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
    max-width: 1100px;
    margin: 2.5rem auto 3rem;
    padding: 0.5rem;
    background: var(--bio-card-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.bio-nav-btn,
.cuerpo-nav-btn,
.hormesis-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.85rem 0.65rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text-muted, #a8a096);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
    font-family: var(--font-body, system-ui);
    position: relative;
    user-select: none;
}

.bio-nav-btn i,
.cuerpo-nav-btn i,
.hormesis-nav-btn i {
    font-size: 1.25rem;
    transition: transform 0.25s ease, color 0.25s ease;
}

.bio-nav-btn strong,
.cuerpo-nav-btn strong,
.hormesis-nav-btn strong {
    font-size: 0.875rem;
    font-weight: 600;
    color: inherit;
}

.bio-nav-btn span,
.cuerpo-nav-btn span,
.hormesis-nav-btn span {
    font-size: 0.72rem;
    opacity: 0.8;
}

.bio-nav-btn:hover,
.cuerpo-nav-btn:hover,
.hormesis-nav-btn:hover {
    background: var(--glass-bg-hover, rgba(234, 238, 228, 0.06));
    color: var(--text-light, #f1eee6);
    border-color: var(--bio-card-border);
    transform: translateY(-2px);
}

.bio-nav-btn:hover i,
.cuerpo-nav-btn:hover i,
.hormesis-nav-btn:hover i {
    transform: scale(1.15);
}

.bio-nav-btn.active,
.cuerpo-nav-btn.active,
.hormesis-nav-btn.active {
    background: var(--bio-inner-bg);
    border-color: var(--gold-bright, #d3b06a);
    color: var(--text-light, #f1eee6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bio-nav-btn.active strong,
.cuerpo-nav-btn.active strong,
.hormesis-nav-btn.active strong {
    color: var(--gold-bright, #d3b06a);
}

/* Color accents per tool */
.bio-nav-btn[data-bio-tool="mitochondria"].active { border-color: var(--bio-mitochondria); }
.bio-nav-btn[data-bio-tool="mitochondria"].active strong,
.bio-nav-btn[data-bio-tool="mitochondria"].active i { color: var(--bio-mitochondria); }

.bio-nav-btn[data-bio-tool="hrv"].active { border-color: var(--bio-hrv); }
.bio-nav-btn[data-bio-tool="hrv"].active strong,
.bio-nav-btn[data-bio-tool="hrv"].active i { color: var(--bio-hrv); }

.bio-nav-btn[data-bio-tool="bolt"].active,
.hormesis-nav-btn[data-hormesis-tool="bolt"].active { border-color: var(--bio-bolt); }
.bio-nav-btn[data-bio-tool="bolt"].active strong,
.bio-nav-btn[data-bio-tool="bolt"].active i,
.hormesis-nav-btn[data-hormesis-tool="bolt"].active strong,
.hormesis-nav-btn[data-hormesis-tool="bolt"].active i { color: var(--bio-bolt); }

.bio-nav-btn[data-bio-tool="metabolic"].active,
.cuerpo-nav-btn[data-cuerpo-tool="metabolic"].active { border-color: var(--bio-metabolic); }
.bio-nav-btn[data-bio-tool="metabolic"].active strong,
.bio-nav-btn[data-bio-tool="metabolic"].active i,
.cuerpo-nav-btn[data-cuerpo-tool="metabolic"].active strong,
.cuerpo-nav-btn[data-cuerpo-tool="metabolic"].active i { color: var(--bio-metabolic); }

.bio-nav-btn[data-bio-tool="cryo"].active,
.hormesis-nav-btn[data-hormesis-tool="cryo"].active { border-color: var(--bio-cryo); }
.bio-nav-btn[data-bio-tool="cryo"].active strong,
.bio-nav-btn[data-bio-tool="cryo"].active i,
.hormesis-nav-btn[data-hormesis-tool="cryo"].active strong,
.hormesis-nav-btn[data-hormesis-tool="cryo"].active i { color: var(--bio-cryo); }

.bio-nav-btn[data-bio-tool="sleep"].active,
.cuerpo-nav-btn[data-cuerpo-tool="sleep"].active { border-color: var(--bio-sleep); }
.bio-nav-btn[data-bio-tool="sleep"].active strong,
.bio-nav-btn[data-bio-tool="sleep"].active i,
.cuerpo-nav-btn[data-cuerpo-tool="sleep"].active strong,
.cuerpo-nav-btn[data-cuerpo-tool="sleep"].active i { color: var(--bio-sleep); }

.bio-nav-btn[data-bio-tool="cofactor"].active { border-color: var(--bio-cofactor); }
.bio-nav-btn[data-bio-tool="cofactor"].active strong,
.bio-nav-btn[data-bio-tool="cofactor"].active i { color: var(--bio-cofactor); }

.bio-nav-btn[data-bio-tool="glucolisis"].active { border-color: var(--bio-glucolisis); }
.bio-nav-btn[data-bio-tool="glucolisis"].active strong,
.bio-nav-btn[data-bio-tool="glucolisis"].active i { color: var(--bio-glucolisis); }

.bio-quick-btn[data-bio-tool="glucolisis"].active {
    background: rgba(245, 158, 11, 0.18);
    border-color: var(--bio-glucolisis);
    color: var(--bio-glucolisis);
}

.bio-nav-btn[data-bio-tool="lactato"].active { border-color: var(--bio-lactato); }
.bio-nav-btn[data-bio-tool="lactato"].active strong,
.bio-nav-btn[data-bio-tool="lactato"].active i { color: var(--bio-lactato); }

.bio-quick-btn[data-bio-tool="lactato"].active {
    background: rgba(239, 68, 68, 0.18);
    border-color: var(--bio-lactato);
    color: var(--bio-lactato);
}

.bio-nav-btn[data-bio-tool="hydration"].active { border-color: var(--bio-hydration); }
.bio-nav-btn[data-bio-tool="hydration"].active strong,
.bio-nav-btn[data-bio-tool="hydration"].active i { color: var(--bio-hydration); }

.bio-quick-btn[data-bio-tool="hydration"].active {
    background: rgba(56, 189, 248, 0.18);
    border-color: var(--bio-hydration);
    color: var(--bio-hydration);
}

.bio-nav-btn[data-bio-tool="oculomotor"].active,
.cuerpo-nav-btn[data-cuerpo-tool="oculomotor"].active { border-color: var(--bio-oculomotor); }
.bio-nav-btn[data-bio-tool="oculomotor"].active strong,
.bio-nav-btn[data-bio-tool="oculomotor"].active i,
.cuerpo-nav-btn[data-cuerpo-tool="oculomotor"].active strong,
.cuerpo-nav-btn[data-cuerpo-tool="oculomotor"].active i { color: var(--bio-oculomotor); }

.cuerpo-nav-btn[data-cuerpo-tool="fascia"].active { border-color: var(--gold-bright, #d4a539); }
.cuerpo-nav-btn[data-cuerpo-tool="fascia"].active strong,
.cuerpo-nav-btn[data-cuerpo-tool="fascia"].active i { color: var(--gold-bright, #d4a539); }

.cuerpo-nav-btn[data-cuerpo-tool="nutricion"].active { border-color: #79b77b; }
.cuerpo-nav-btn[data-cuerpo-tool="nutricion"].active strong,
.cuerpo-nav-btn[data-cuerpo-tool="nutricion"].active i { color: #79b77b; }

.cuerpo-nav-btn[data-cuerpo-tool="ayuno"].active { border-color: var(--bio-ayuno); }
.cuerpo-nav-btn[data-cuerpo-tool="ayuno"].active strong,
.cuerpo-nav-btn[data-cuerpo-tool="ayuno"].active i { color: var(--bio-ayuno); }

.cuerpo-nav-btn[data-cuerpo-tool="photobiology"].active,
.cuerpo-quick-btn[data-cuerpo-tool="photobiology"].active { border-color: #ffd166; }
.cuerpo-nav-btn[data-cuerpo-tool="photobiology"].active strong,
.cuerpo-nav-btn[data-cuerpo-tool="photobiology"].active i,
.cuerpo-quick-btn[data-cuerpo-tool="photobiology"].active i,
.cuerpo-quick-btn[data-cuerpo-tool="photobiology"].active span { color: #ffd166; }

.hormesis-nav-btn[data-hormesis-tool="vagal"].active,
.hormesis-quick-btn[data-hormesis-tool="vagal"].active { border-color: var(--bio-vagal); }
.hormesis-nav-btn[data-hormesis-tool="vagal"].active strong,
.hormesis-nav-btn[data-hormesis-tool="vagal"].active i,
.hormesis-quick-btn[data-hormesis-tool="vagal"].active i,
.hormesis-quick-btn[data-hormesis-tool="vagal"].active span { color: var(--bio-vagal); }

.hormesis-nav-btn[data-hormesis-tool="quimio"].active,
.hormesis-quick-btn[data-hormesis-tool="quimio"].active { border-color: var(--bio-quimio); }
.hormesis-nav-btn[data-hormesis-tool="quimio"].active strong,
.hormesis-nav-btn[data-hormesis-tool="quimio"].active i,
.hormesis-quick-btn[data-hormesis-tool="quimio"].active i,
.hormesis-quick-btn[data-hormesis-tool="quimio"].active span { color: var(--bio-quimio); }

.hormesis-nav-btn[data-hormesis-tool="matriz"].active,
.hormesis-quick-btn[data-hormesis-tool="matriz"].active { border-color: var(--bio-matriz); }
.hormesis-nav-btn[data-hormesis-tool="matriz"].active strong,
.hormesis-nav-btn[data-hormesis-tool="matriz"].active i,
.hormesis-quick-btn[data-hormesis-tool="matriz"].active i,
.hormesis-quick-btn[data-hormesis-tool="matriz"].active span { color: var(--bio-matriz); }

.hormesis-nav-btn[data-hormesis-tool="contraste"].active,
.hormesis-quick-btn[data-hormesis-tool="contraste"].active { border-color: var(--bio-contraste); }
.hormesis-nav-btn[data-hormesis-tool="contraste"].active strong,
.hormesis-nav-btn[data-hormesis-tool="contraste"].active i,
.hormesis-quick-btn[data-hormesis-tool="contraste"].active i,
.hormesis-quick-btn[data-hormesis-tool="contraste"].active span { color: var(--bio-contraste); }

/* ─── Tool Panels & Modal Execution Container ─── */
.bio-panels-modal-wrapper,
.cuerpo-panels-modal-wrapper,
.hormesis-panels-modal-wrapper {
    width: 100%;
    position: relative;
}

.bio-modal-backdrop,
.cuerpo-modal-backdrop,
.hormesis-modal-backdrop {
    display: none;
}

.bio-modal-container,
.cuerpo-modal-container,
.hormesis-modal-container {
    width: 100%;
}

.bio-modal-mobile-header,
.cuerpo-modal-mobile-header,
.hormesis-modal-mobile-header {
    display: none;
}

.bio-modal-quick-nav,
.cuerpo-modal-quick-nav,
.hormesis-modal-quick-nav {
    display: none;
}

.bio-modal-body,
.cuerpo-modal-body,
.hormesis-modal-body {
    width: 100%;
}

.bio-panel,
.cuerpo-panel,
.hormesis-panel {
    display: none;
    max-width: 1100px;
    margin: 0 auto;
    animation: bioFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bio-panel.active,
.cuerpo-panel.active,
.hormesis-panel.active {
    display: block;
}

@keyframes bioFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Respiración CO2 Evaluation Section ─── */
#evaluacion-co2 .eval-co2-panels-wrapper {
    width: 100%;
    position: relative;
}

#evaluacion-co2 .hormesis-panel {
    display: none;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    animation: bioFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#evaluacion-co2 .hormesis-panel.active {
    display: block;
}

@media (max-width: 900px) {
    #evaluacion-co2 .hormesis-panel .bio-tool-card {
        padding: 1.25rem 1rem;
        background: var(--bg-card, rgba(16, 24, 20, 0.7));
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
        border-radius: 16px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE FLOATING EXECUTION SCREEN (MODAL OVERLAY)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Hub Navigation button enhanced touch targets & badges on mobile */
    .bio-hub-nav,
    .cuerpo-hub-nav,
    .hormesis-hub-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
        margin: 1.5rem auto 2rem;
        padding: 0.65rem;
    }

    .bio-nav-btn,
    .cuerpo-nav-btn,
    .hormesis-nav-btn {
        padding: 0.95rem 0.5rem;
        border: 1px solid var(--bio-card-border);
        background: rgba(255, 255, 255, 0.03);
    }

    .bio-nav-btn strong,
    .cuerpo-nav-btn strong,
    .hormesis-nav-btn strong {
        font-size: 0.82rem;
    }

    .bio-nav-btn span,
    .cuerpo-nav-btn span,
    .hormesis-nav-btn span {
        font-size: 0.68rem;
    }

    /* Fixed Modal Wrapper on Mobile */
    .bio-panels-modal-wrapper,
    .cuerpo-panels-modal-wrapper,
    .hormesis-panels-modal-wrapper {
        position: fixed;
        inset: 0;
        z-index: 2200;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
    }

    .bio-panels-modal-wrapper.is-open,
    .cuerpo-panels-modal-wrapper.is-open,
    .hormesis-panels-modal-wrapper.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .bio-modal-backdrop,
    .cuerpo-modal-backdrop,
    .hormesis-modal-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(7, 9, 8, 0.88);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        opacity: 0;
        transition: opacity 0.3s ease;
        cursor: pointer;
    }

    .bio-panels-modal-wrapper.is-open .bio-modal-backdrop,
    .cuerpo-panels-modal-wrapper.is-open .cuerpo-modal-backdrop,
    .hormesis-panels-modal-wrapper.is-open .hormesis-modal-backdrop {
        opacity: 1;
    }

    .bio-modal-container,
    .cuerpo-modal-container,
    .hormesis-modal-container {
        position: relative;
        z-index: 2;
        width: 100%;
        max-height: 93vh;
        height: 93vh;
        background: #0f1412;
        border-top: 1px solid rgba(212, 165, 57, 0.35);
        border-radius: 24px 24px 0 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.7);
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    [data-theme='light'] .bio-modal-container,
    [data-theme='light'] .cuerpo-modal-container,
    [data-theme='light'] .hormesis-modal-container {
        background: #fbf9f4;
        border-top: 1px solid rgba(37, 67, 52, 0.3);
        box-shadow: 0 -12px 48px rgba(25, 45, 35, 0.25);
    }

    .bio-panels-modal-wrapper.is-open .bio-modal-container,
    .cuerpo-panels-modal-wrapper.is-open .cuerpo-modal-container,
    .hormesis-panels-modal-wrapper.is-open .hormesis-modal-container {
        transform: translateY(0);
    }

    /* Modal Top Header */
    .bio-modal-mobile-header,
    .cuerpo-modal-mobile-header,
    .hormesis-modal-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 1.25rem 0.75rem;
        background: var(--bio-card-bg);
        border-bottom: 1px solid var(--bio-card-border);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        flex-shrink: 0;
        gap: 0.75rem;
    }

    .bio-modal-header-text,
    .cuerpo-modal-header-text,
    .hormesis-modal-header-text,
    .bio-modal-title-wrap,
    .cuerpo-modal-title-wrap,
    .hormesis-modal-title-wrap {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        min-width: 0;
    }

    .bio-modal-badge,
    .cuerpo-modal-badge,
    .hormesis-modal-badge {
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--gold-bright, #d3b06a);
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .bio-modal-title,
    .cuerpo-modal-title,
    .hormesis-modal-title {
        font-family: var(--font-heading, 'EB Garamond', serif);
        font-size: 1.25rem;
        color: var(--text-light, #f1eee6);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    [data-theme='light'] .bio-modal-title,
    [data-theme='light'] .cuerpo-modal-title,
    [data-theme='light'] .hormesis-modal-title {
        color: #17241e;
    }

    .bio-modal-close-btn,
    .cuerpo-modal-close-btn,
    .hormesis-modal-close-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid var(--bio-card-border);
        color: var(--text-light, #fff);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    [data-theme='light'] .bio-modal-close-btn,
    [data-theme='light'] .cuerpo-modal-close-btn,
    [data-theme='light'] .hormesis-modal-close-btn {
        background: rgba(0, 0, 0, 0.06);
        color: #17241e;
    }

    .bio-modal-close-btn:hover,
    .bio-modal-close-btn:active,
    .cuerpo-modal-close-btn:hover,
    .cuerpo-modal-close-btn:active,
    .hormesis-modal-close-btn:hover,
    .hormesis-modal-close-btn:active {
        background: rgba(212, 165, 57, 0.25);
        color: var(--gold-bright);
        transform: scale(1.08);
    }

    /* Modal Quick Switcher Bar */
    .bio-modal-quick-nav,
    .cuerpo-modal-quick-nav,
    .hormesis-modal-quick-nav {
        display: flex;
        gap: 0.45rem;
        padding: 0.55rem 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid var(--bio-card-border);
        background: rgba(0, 0, 0, 0.25);
        flex-shrink: 0;
        scrollbar-width: none;
    }

    [data-theme='light'] .bio-modal-quick-nav,
    [data-theme='light'] .cuerpo-modal-quick-nav,
    [data-theme='light'] .hormesis-modal-quick-nav {
        background: rgba(0, 0, 0, 0.04);
    }

    .bio-modal-quick-nav::-webkit-scrollbar,
    .cuerpo-modal-quick-nav::-webkit-scrollbar,
    .hormesis-modal-quick-nav::-webkit-scrollbar {
        display: none;
    }

    .bio-quick-btn,
    .cuerpo-quick-btn,
    .hormesis-quick-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.8rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--bio-card-border);
        color: var(--text-muted, #a8a096);
        font-size: 0.78rem;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: var(--font-body, system-ui);
    }

    .bio-quick-btn i,
    .cuerpo-quick-btn i,
    .hormesis-quick-btn i {
        font-size: 0.85rem;
    }

    .bio-quick-btn:hover,
    .cuerpo-quick-btn:hover,
    .hormesis-quick-btn:hover {
        color: var(--text-light, #f1eee6);
        background: rgba(255, 255, 255, 0.08);
    }

    .bio-quick-btn.active,
    .cuerpo-quick-btn.active,
    .hormesis-quick-btn.active {
        background: var(--bio-inner-bg);
        border-color: var(--gold-bright, #d3b06a);
        color: var(--gold-bright, #d3b06a);
        font-weight: 600;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    }

    /* Modal Scrollable Execution Body */
    .bio-modal-body,
    .cuerpo-modal-body,
    .hormesis-modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 1rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
    }

    /* Tool Card adjustments inside modal */
    .bio-panel .bio-tool-card,
    .cuerpo-panel .bio-tool-card,
    .hormesis-panel .bio-tool-card {
        padding: 0.5rem 0.25rem;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .bio-panel .bio-tool-header,
    .cuerpo-panel .bio-tool-header,
    .hormesis-panel .bio-tool-header {
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;
        gap: 1rem;
    }

    .bio-panel .bio-tool-title-group h3,
    .cuerpo-panel .bio-tool-title-group h3,
    .hormesis-panel .bio-tool-title-group h3 {
        font-size: 1.35rem;
    }

    .bio-panel .bio-tool-title-group p,
    .cuerpo-panel .bio-tool-title-group p,
    .hormesis-panel .bio-tool-title-group p {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .bio-tool-grid {
        gap: 1.25rem;
    }
}

@media (max-width: 480px) {
    .bio-hub-nav,
    .cuerpo-hub-nav,
    .hormesis-hub-nav {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* Prevent body scroll when bio/cuerpo modal is open */
body.bio-modal-open,
body.cuerpo-modal-open,
body.hormesis-modal-open {
    overflow: hidden !important;
    touch-action: none;
}

.bio-tool-card {
    background: var(--bio-card-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 20px;
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.bio-tool-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--bio-card-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.bio-tool-title-group h3 {
    font-family: var(--font-heading, 'EB Garamond', serif);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    color: var(--text-light, #f1eee6);
    margin: 0.3rem 0 0.5rem;
    letter-spacing: -0.01em;
}

.bio-tool-title-group p {
    color: var(--text-muted, #a8a096);
    font-size: 1rem;
    max-width: 680px;
    line-height: 1.6;
    margin: 0;
}

.bio-scientific-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.775rem;
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    background: rgba(145, 184, 178, 0.12);
    border: 1px solid rgba(145, 184, 178, 0.28);
    color: var(--terrain-water, #91b8b2);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bio-scientific-tag:hover {
    background: rgba(145, 184, 178, 0.22);
    color: #fff;
    border-color: var(--terrain-water, #91b8b2);
    transform: translateY(-1px);
}

/* ─── GRID LAYOUT FOR TOOLS ─── */
.bio-tool-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

@media (max-width: 900px) {
    .bio-tool-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERRAMIENTA 1: MOTOR MITOCONDRIAL (ATP SIMULATOR & ETC PHYSIOLOGY)
   ══════════════════════════════════════════════════════════════════════════ */
.mitochondria-visualizer {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 16px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Preset selector bar */
.mito-presets-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.25);
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    margin: 0.75rem 0 1.25rem;
}

.mito-preset-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 0.25rem;
    white-space: nowrap;
}

.mito-preset-btn {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-body);
    padding: 0.38rem 0.85rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    line-height: 1.4;
    box-sizing: border-box;
}

.mito-preset-btn:hover {
    background: rgba(212, 122, 91, 0.15);
    border-color: rgba(212, 122, 91, 0.5);
    color: var(--gold-bright);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(212, 122, 91, 0.15);
}

.mito-preset-btn:active {
    transform: translateY(0);
}

.mito-preset-btn.active {
    background: linear-gradient(135deg, rgba(212, 122, 91, 0.35), rgba(211, 176, 106, 0.28));
    border-color: var(--bio-mitochondria);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 14px var(--bio-mitochondria-glow), inset 0 1px 0 rgba(255,255,255,0.12);
}

.mito-canvas-wrap {
    position: relative;
    width: 100%;
    height: 300px;
    background: radial-gradient(ellipse at center, rgba(212, 122, 91, 0.08) 0%, rgba(8, 7, 6, 0.95) 80%);
    border-radius: 12px;
    border: 1px solid rgba(212, 122, 91, 0.25);
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
}

#mito-etc-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.mito-canvas-legend {
    position: absolute;
    bottom: 8px;
    right: 12px;
    display: flex;
    gap: 0.75rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

.mito-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.mito-legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

/* ─── Ticker de Loop Fisiológico Adaptativo ─── */
.mito-loop-tracker {
    background: rgba(18, 14, 11, 0.78);
    border: 1px solid rgba(212, 122, 91, 0.25);
    border-radius: 12px;
    padding: 0.75rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mito-loop-tracker.state-basal {
    border-color: rgba(104, 157, 143, 0.45);
    box-shadow: 0 4px 18px rgba(104, 157, 143, 0.1);
}
.mito-loop-tracker.state-zone2 {
    border-color: rgba(92, 225, 230, 0.5);
    box-shadow: 0 4px 20px rgba(92, 225, 230, 0.16);
}
.mito-loop-tracker.state-cryo {
    border-color: rgba(91, 155, 213, 0.55);
    box-shadow: 0 4px 20px rgba(91, 155, 213, 0.16);
}
.mito-loop-tracker.state-hypoxia {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.14);
}
.mito-loop-tracker.state-stress {
    border-color: rgba(255, 82, 82, 0.55);
    box-shadow: 0 4px 20px rgba(255, 82, 82, 0.2);
}

.mito-loop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mito-loop-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.76rem;
}

.mito-loop-state-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #689d8f;
    box-shadow: 0 0 8px #689d8f;
    animation: mitoDotPulse 2s infinite ease-in-out;
}

@keyframes mitoDotPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.25); }
}

.mito-loop-state-title {
    font-weight: 700;
    color: var(--text-primary, #fff);
    letter-spacing: 0.02em;
}

.mito-loop-state-sub {
    color: var(--text-muted, #a8a096);
    font-size: 0.7rem;
    padding-left: 0.35rem;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.mito-phase-steps {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(0, 0, 0, 0.32);
    padding: 0.2rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.mito-phase-step {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.24rem 0.55rem;
    font-size: 0.72rem;
    color: var(--text-muted, #a8a096);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
}

.mito-phase-step .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.62rem;
    font-weight: 700;
}

.mito-phase-step:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.mito-phase-step.active {
    background: rgba(212, 122, 91, 0.28);
    border-color: rgba(212, 122, 91, 0.65);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(212, 122, 91, 0.3);
}

.mito-phase-step.active .step-num {
    background: var(--bio-mitochondria, #d47a5b);
    color: #080706;
}

.mito-loop-narrative {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.mito-loop-progress-bar {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.mito-loop-progress-fill {
    height: 100%;
    width: 25%;
    background: linear-gradient(90deg, #d47a5b, #ffd15c);
    border-radius: 3px;
    transition: width 0.1s linear;
}

.mito-loop-text-row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.84rem;
    line-height: 1.48;
    color: #f3efe6;
}

.mito-loop-icon {
    margin-top: 0.18rem;
    font-size: 0.88rem;
    color: var(--bio-mitochondria, #d47a5b);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.mito-live-telemetry {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

@media (max-width: 768px) {
    .mito-live-telemetry {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mito-telemetry-box {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 0.65rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mito-telemetry-box:hover {
    border-color: rgba(212, 122, 91, 0.4);
    background: rgba(255, 255, 255, 0.04);
}

.mito-telemetry-box span {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.mito-telemetry-box strong {
    font-size: 1.15rem;
    font-family: var(--font-heading);
    color: var(--bio-mitochondria);
    line-height: 1.2;
}

.mito-telemetry-box small {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    font-family: monospace;
}

.mito-controls-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Substrate selector */
.mito-substrate-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
}

.mito-substrate-toggle label {
    font-size: 0.8rem;
    color: var(--text-body);
    font-weight: 500;
}

.mito-substrate-options {
    display: flex;
    gap: 0.35rem;
}

.mito-sub-btn {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-family: inherit;
    padding: 0.32rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-sizing: border-box;
}

.mito-sub-btn:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}

.mito-sub-btn.active {
    background: rgba(212, 122, 91, 0.3);
    border-color: var(--bio-mitochondria);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 8px var(--bio-mitochondria-glow);
}

.bio-slider-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bio-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-body);
}

.bio-slider-header strong {
    color: var(--gold-bright);
    font-family: monospace;
}

.bio-range-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    outline: none;
    transition: background 0.2s ease;
}

.bio-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gold-bright);
    cursor: pointer;
    box-shadow: 0 0 10px var(--gold-bright);
    transition: transform 0.15s ease;
}

.bio-range-input::-webkit-slider-thumb:hover {
    transform: scale(1.25);
}

.mito-insight-box {
    background: rgba(212, 122, 91, 0.08);
    border-left: 3px solid var(--bio-mitochondria);
    padding: 0.85rem 1rem;
    border-radius: 0 10px 10px 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-body);
}

/* ══════════════════════════════════════════════════════════════════════════
   HERRAMIENTA 2: PULSO COHERENTE (HRV & PPG MONITOR)
   ══════════════════════════════════════════════════════════════════════════ */
.bio-tool-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bio-sound-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--bio-card-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--bio-hrv);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.bio-sound-btn:hover {
    background: rgba(143, 166, 145, 0.2);
    border-color: var(--bio-hrv);
    transform: scale(1.08);
}

.bio-sound-btn.muted {
    color: var(--text-muted);
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 0.6;
}

.hrv-monitor-box {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.hrv-modes-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
    width: 100%;
    margin-bottom: 1.25rem;
    background: rgba(0, 0, 0, 0.35);
    padding: 0.35rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 600px) {
    .hrv-modes-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

.hrv-mode-tab {
    padding: 0.55rem 0.4rem;
    font-size: 0.78rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 500;
}

.hrv-mode-tab i {
    font-size: 0.85rem;
}

.hrv-mode-tab:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.04);
}

.hrv-mode-tab.active {
    background: var(--bio-card-bg);
    color: var(--bio-hrv);
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(143, 166, 145, 0.3);
}

.hrv-wave-container {
    width: 100%;
    height: 165px;
    background: radial-gradient(circle at center, rgba(14, 24, 18, 0.9) 0%, rgba(6, 10, 8, 0.98) 100%);
    border-radius: 14px;
    border: 1px solid rgba(143, 166, 145, 0.25);
    position: relative;
    overflow: hidden;
    margin-bottom: 1.25rem;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

#hrv-ecg-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.hrv-live-bpm-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(10, 16, 12, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(143, 166, 145, 0.3);
    border-radius: 20px;
    padding: 0.3rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bio-hrv);
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.hrv-live-bpm-overlay i {
    color: #ff5252;
    animation: hrvHeartPulse 1s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes hrvHeartPulse {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.3); }
    30% { transform: scale(1); }
    45% { transform: scale(1.2); }
}

.hrv-camera-preview {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--bio-hrv);
    overflow: hidden;
    background: #000;
    display: none;
    box-shadow: 0 0 15px rgba(143, 166, 145, 0.3);
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    z-index: 2;
}

.hrv-camera-preview.beat-pulse {
    transform: scale(1.15);
    border-color: #ff5252;
    box-shadow: 0 0 22px rgba(255, 82, 82, 0.8);
}

.hrv-camera-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    pointer-events: none;
}

.hrv-signal-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(10, 16, 12, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(143, 166, 145, 0.25);
    border-radius: 20px;
    padding: 0.35rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    color: var(--text-main);
    z-index: 2;
}

.hrv-signal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c5a880;
    transition: background-color 0.25s ease;
}

.hrv-signal-dot.good {
    background: #8fa691;
    box-shadow: 0 0 8px #8fa691;
    animation: hrvPulseDot 1.2s infinite ease-in-out;
}

.hrv-signal-dot.searching {
    background: #d47a5b;
    animation: hrvPulseDot 0.8s infinite ease-in-out;
}

.hrv-signal-dot.calibrating {
    background: #ffd15c;
    animation: hrvPulseDot 0.5s infinite ease-in-out;
}

@keyframes hrvPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

.hrv-mode-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 1. MODO TAP: Pad Circular Interactivo & SVG Progress Ring */
.hrv-tap-pad-wrapper {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0.5rem auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hrv-tap-progress-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}

.hrv-tap-progress-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 6;
}

.hrv-tap-progress-bar {
    fill: none;
    stroke: var(--bio-hrv);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 452.39;
    stroke-dashoffset: 452.39;
    transition: stroke-dashoffset 0.25s ease, stroke 0.3s ease;
}

.hrv-tap-pad {
    width: 136px;
    height: 136px;
    border-radius: 50%;
    border: 2px solid rgba(143, 166, 145, 0.4);
    background: radial-gradient(circle at 35% 35%, rgba(143, 166, 145, 0.18) 0%, rgba(10, 18, 14, 0.85) 100%);
    color: var(--bio-hrv);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(143, 166, 145, 0.15), inset 0 0 15px rgba(143, 166, 145, 0.1);
    transition: transform 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.hrv-tap-pad:hover {
    border-color: var(--bio-hrv);
    box-shadow: 0 0 28px rgba(143, 166, 145, 0.35);
    transform: scale(1.03);
}

.hrv-tap-pad:focus-visible {
    box-shadow: 0 0 0 3px rgba(143, 166, 145, 0.6);
}

.hrv-tap-pad:active,
.hrv-tap-pad.tap-active {
    transform: scale(0.92);
    border-color: #ff5252;
    background: radial-gradient(circle at center, rgba(255, 82, 82, 0.3) 0%, rgba(10, 18, 14, 0.9) 100%);
    box-shadow: 0 0 32px rgba(255, 82, 82, 0.6);
}

.hrv-heart-icon {
    font-size: 2.2rem;
    margin-bottom: 0.25rem;
    color: var(--bio-hrv);
    transition: transform 0.15s ease, color 0.15s ease;
}

.hrv-tap-pad.tap-active .hrv-heart-icon {
    transform: scale(1.25);
    color: #ff5252;
}

.hrv-tap-label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-main);
}

.hrv-tap-sub {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.hrv-tap-ripple {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(143, 166, 145, 0.4);
    opacity: 0;
    pointer-events: none;
}

.hrv-tap-pad.tap-active .hrv-tap-ripple {
    animation: hrvRipple 0.45s ease-out;
}

@keyframes hrvRipple {
    0% { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

.hrv-tap-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 0.25rem;
}

.hrv-pill-badge {
    background: rgba(143, 166, 145, 0.12);
    border: 1px solid rgba(143, 166, 145, 0.25);
    color: var(--bio-hrv);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

.hrv-mini-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    font-size: 0.72rem;
    padding: 0.25rem 0.65rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.hrv-mini-btn:hover {
    color: var(--text-main);
    border-color: var(--bio-hrv);
    background: rgba(255, 255, 255, 0.05);
}

/* 2. MODO CÁMARA PPG */
.hrv-cam-controls {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    width: 100%;
}

.hrv-sensitivity-wrapper {
    margin-top: 0.75rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(143, 166, 145, 0.15);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
}

.hrv-sensitivity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.hrv-sensitivity-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.hrv-sensitivity-title i {
    color: var(--bio-hrv);
}

.hrv-sensitivity-value {
    font-weight: 600;
    color: var(--gold-bright);
}

.hrv-sensitivity-pills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
    width: 100%;
}

.hrv-sens-pill {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(143, 166, 145, 0.18);
    border-radius: 6px;
    padding: 0.35rem 0.2rem;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}

.hrv-sens-pill:hover {
    color: var(--text-main);
    border-color: rgba(143, 166, 145, 0.4);
    background: rgba(255, 255, 255, 0.04);
}

.hrv-sens-pill.active {
    background: rgba(143, 166, 145, 0.18);
    border-color: var(--bio-hrv);
    color: var(--bio-hrv);
    font-weight: 600;
    box-shadow: 0 0 8px rgba(143, 166, 145, 0.25);
}

.hrv-cam-tip-box {
    margin-top: 0.85rem;
    background: rgba(143, 166, 145, 0.08);
    border: 1px solid rgba(143, 166, 145, 0.2);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    text-align: left;
    line-height: 1.45;
}

.hrv-cam-tip-box i {
    color: var(--bio-hrv);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.bio-action-btn.torch-active {
    background: #c5a880 !important;
    color: #0b0f0c !important;
    border-color: #c5a880 !important;
    box-shadow: 0 0 14px rgba(197, 168, 128, 0.6);
}

#hrv-video-stream {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3. MODO PACER RESONANCIA 0.1 HZ */
.hrv-pacer-visual-wrap {
    margin: 0.5rem auto 1rem;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hrv-pacer-sphere {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(143, 166, 145, 0.8) 0%, rgba(35, 60, 45, 0.95) 100%);
    box-shadow: 0 0 30px rgba(143, 166, 145, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 5s ease;
}

.hrv-pacer-sphere.inhale {
    transform: scale(1.55);
    box-shadow: 0 0 50px rgba(143, 166, 145, 0.8), inset 0 0 25px rgba(255, 255, 255, 0.5);
    background: radial-gradient(circle at 35% 35%, rgba(197, 168, 128, 0.9) 0%, rgba(143, 166, 145, 0.95) 100%);
}

.hrv-pacer-sphere.exhale {
    transform: scale(0.85);
    box-shadow: 0 0 15px rgba(143, 166, 145, 0.25), inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.hrv-pacer-sphere span {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hrv-pacer-sphere strong {
    font-size: 1.15rem;
    font-family: var(--font-heading);
}

.hrv-pacer-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.hrv-pacer-subinfo {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* 4. MODO SIMULADOR FISIOLÓGICO */
.hrv-demo-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    width: 100%;
    margin: 0.5rem 0;
}

@media (max-width: 550px) {
    .hrv-demo-buttons-grid {
        grid-template-columns: 1fr;
    }
}

.hrv-demo-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 0.85rem 0.65rem;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
}

.hrv-demo-btn i {
    font-size: 1.25rem;
    color: var(--bio-hrv);
    transition: transform 0.2s ease;
}

.hrv-demo-btn[data-demo-state="stress"] i { color: #d47a5b; }
.hrv-demo-btn[data-demo-state="rest"] i { color: #c5a880; }
.hrv-demo-btn[data-demo-state="coherent"] i { color: #8fa691; }

.hrv-demo-btn strong {
    font-size: 0.8rem;
    font-weight: 600;
}

.hrv-demo-btn small {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.hrv-demo-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(143, 166, 145, 0.4);
    transform: translateY(-2px);
}

.hrv-demo-btn.active {
    border-color: var(--bio-hrv);
    background: rgba(143, 166, 145, 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.hrv-status-instruction {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0.85rem 0 0;
    line-height: 1.45;
}

/* Columna Derecha de Telemetría */
.hrv-telemetry-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.hrv-coherence-gauge-wrap {
    margin-bottom: 1.25rem;
    width: 100%;
}

.hrv-gauge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    margin-bottom: 0.45rem;
    color: var(--text-light);
}

.hrv-coherence-score {
    font-size: 1.25rem;
    font-family: var(--font-heading);
    color: var(--bio-hrv);
    transition: color 0.3s ease;
}

.hrv-gauge-bar {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hrv-gauge-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #d47a5b 0%, #c5a880 45%, #8fa691 80%, #a8d5ba 100%);
    border-radius: 6px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 12px rgba(143, 166, 145, 0.5);
}

.hrv-gauge-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

.hrv-metrics-ribbon {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem;
    width: 100%;
    margin-bottom: 1.25rem;
}

@media (max-width: 500px) {
    .hrv-metrics-ribbon {
        grid-template-columns: repeat(2, 1fr);
    }
}

.hrv-metric-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 0.75rem 0.45rem;
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.hrv-metric-item:hover {
    border-color: rgba(143, 166, 145, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

.hrv-metric-item small {
    display: block;
    font-size: 0.66rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

.hrv-metric-item strong {
    font-size: 1.2rem;
    color: var(--bio-hrv);
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
}

.hrv-diagnostic-box {
    margin-top: 0;
    border-left-color: var(--bio-hrv);
    background: rgba(143, 166, 145, 0.07);
    padding: 1rem 1.15rem;
}

.hrv-diagnostic-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    color: var(--bio-hrv);
    font-size: 0.9rem;
}

.hrv-diagnostic-box p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-body);
}

.hrv-action-buttons-wrap {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.hrv-action-buttons-wrap .bio-action-btn {
    flex: 1;
    min-width: 140px;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   HERRAMIENTA 3: INTERRUPTOR METABÓLICO (SUITE DE FLEXIBILIDAD & RQ)
   ══════════════════════════════════════════════════════════════════════════ */
.metabolic-subnav {
    display: flex;
    gap: 0.5rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.35rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.metabolic-subnav-btn {
    flex: 1 1 auto;
    min-width: 140px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.metabolic-subnav-btn:hover {
    color: var(--text-light);
    background: rgba(212, 165, 57, 0.08);
}

.metabolic-subnav-btn.active {
    background: rgba(212, 165, 57, 0.18);
    color: var(--bio-metabolic, #d4a539);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.metabolic-subview {
    display: none;
    animation: fadeInBio 0.3s ease forwards;
}

.metabolic-subview.active {
    display: block;
}

.metabolic-evaluator {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.metabolic-question-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    transition: border-color 0.2s ease;
}

.metabolic-question-card:hover {
    border-color: var(--bio-card-hover);
}

.metabolic-question-card label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0.55rem;
    font-weight: 500;
}

.metabolic-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.5rem;
}

.metabolic-radio-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    color: var(--text-body);
    font-size: 0.825rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.metabolic-radio-btn:hover {
    background: rgba(255, 255, 255, 0.07);
}

.metabolic-radio-btn input {
    accent-color: var(--bio-metabolic);
}

.metabolic-result-display {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-metabolic);
    border-radius: 16px;
    padding: 1.35rem;
    text-align: center;
    position: relative;
}

.rq-meter-wrap {
    position: relative;
    width: 220px;
    height: 120px;
    margin: 0.85rem auto;
}

.rq-meter-svg {
    width: 100%;
    height: 100%;
}

.rq-needle {
    transform-origin: 110px 110px;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ══════════════════════════════════════════════════════════════════════════
   HERRAMIENTA 4: CRIOTERMIA ADAPTATIVA & HORMESIS TÉRMICA (SØBERG / HSPs & RBM3)
   ══════════════════════════════════════════════════════════════════════════ */
.cryo-subnav {
    display: flex;
    gap: 0.5rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.35rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.cryo-subnav-btn {
    flex: 1 1 auto;
    min-width: 140px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.cryo-subnav-btn:hover {
    color: var(--text-light);
    background: rgba(145, 184, 178, 0.08);
}

.cryo-subnav-btn.active {
    background: rgba(145, 184, 178, 0.18);
    color: var(--bio-cryo);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cryo-subview {
    display: none;
    animation: fadeInBio 0.3s ease forwards;
}

.cryo-subview.active {
    display: block;
}

/* 1. Cronómetro & Freno Vagal */
.cryo-protocol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.cryo-level-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.9rem 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.cryo-level-card:hover {
    border-color: var(--bio-cryo);
    transform: translateY(-2px);
}

.cryo-level-card.active {
    border-color: var(--bio-cryo);
    background: rgba(145, 184, 178, 0.12);
    box-shadow: 0 0 16px var(--bio-cryo-glow);
}

.cryo-level-card strong {
    display: block;
    color: var(--bio-cryo);
    font-size: 0.88rem;
    margin: 0.25rem 0;
}

.cryo-level-card span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cryo-timer-display {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cryo-clock {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: var(--bio-cryo);
    letter-spacing: 0.05em;
    margin: 0.75rem 0 0.5rem;
    text-shadow: 0 0 20px var(--bio-cryo-glow);
    line-height: 1.1;
}

.cryo-phase-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(145, 184, 178, 0.15);
    color: var(--bio-cryo);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Vagal Brake Pacer in Timer */
.cryo-vagal-pacer-box {
    background: rgba(10, 20, 26, 0.6);
    border: 1px solid rgba(145, 184, 178, 0.25);
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-align: left;
}

.cryo-pacer-halo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(145, 184, 178, 0.4) 0%, rgba(145, 184, 178, 0.05) 70%);
    border: 2px solid var(--bio-cryo);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 0 15px rgba(145, 184, 178, 0.3);
}

.cryo-pacer-halo.inhale {
    transform: scale(1.25);
    border-color: #8fa691;
    box-shadow: 0 0 22px rgba(143, 166, 145, 0.5);
}

.cryo-pacer-halo.exhale {
    transform: scale(0.85);
    border-color: #72a4c8;
    box-shadow: 0 0 10px rgba(114, 164, 200, 0.3);
}

.cryo-pacer-halo-inner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bio-cryo);
}

.cryo-pacer-text-wrap {
    flex: 1;
}

.cryo-pacer-action {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cryo-pacer-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    line-height: 1.4;
}

/* 2. Dosis Semanal Søberg */
.soberg-dose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.soberg-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.25rem;
    position: relative;
}

.soberg-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.soberg-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.soberg-target-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
}

.soberg-target-badge.cold {
    background: rgba(145, 184, 178, 0.15);
    color: var(--bio-cryo);
    border: 1px solid rgba(145, 184, 178, 0.3);
}

.soberg-target-badge.heat {
    background: rgba(212, 122, 91, 0.15);
    color: #d47a5b;
    border: 1px solid rgba(212, 122, 91, 0.3);
}

.soberg-progress-container {
    margin-bottom: 1rem;
}

.soberg-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
    color: var(--text-muted);
}

.soberg-progress-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.soberg-progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.soberg-progress-fill.cold {
    background: linear-gradient(90deg, #72a4c8 0%, #91b8b2 100%);
    box-shadow: 0 0 10px rgba(145, 184, 178, 0.5);
}

.soberg-progress-fill.heat {
    background: linear-gradient(90deg, #e5b95f 0%, #d47a5b 100%);
    box-shadow: 0 0 10px rgba(212, 122, 91, 0.5);
}

.soberg-quick-add {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.soberg-add-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--bio-card-border);
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    color: var(--text-body);
    cursor: pointer;
    transition: all 0.2s ease;
}

.soberg-add-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--text-muted);
    color: var(--text-light);
}

.soberg-status-summary {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: center;
}

.soberg-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.soberg-summary-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.soberg-summary-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-light);
}

/* 3. Estimador Metabólico & Vascular */
.cryo-estimator-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1.25rem;
}

@media (max-width: 820px) {
    .cryo-estimator-layout {
        grid-template-columns: 1fr;
    }
}

.cryo-input-panel {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cryo-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cryo-field-group label {
    font-size: 0.82rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}

.cryo-field-group input[type="range"] {
    accent-color: var(--bio-cryo);
    cursor: pointer;
}

.cryo-field-group input[type="number"],
.cryo-field-group select {
    background: rgba(10, 16, 22, 0.6);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    color: var(--text-light);
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
}

.cryo-field-group input[type="number"]:focus,
.cryo-field-group select:focus {
    border-color: var(--bio-cryo);
}

.cryo-presets-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.cryo-preset-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--bio-card-border);
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cryo-preset-btn:hover {
    color: var(--text-light);
    border-color: var(--bio-cryo);
}

.cryo-preset-btn.active {
    background: rgba(145, 184, 178, 0.2);
    border-color: var(--bio-cryo);
    color: var(--bio-cryo);
    font-weight: 600;
}

.cryo-results-panel {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cryo-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}

.cryo-metric-box {
    background: rgba(10, 16, 24, 0.5);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 0.85rem;
    text-align: left;
}

.cryo-metric-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.cryo-metric-val {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bio-cryo);
    margin-top: 0.25rem;
}

.cryo-metric-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.cryo-vascular-card {
    background: rgba(14, 24, 32, 0.7);
    border: 1px solid rgba(145, 184, 178, 0.25);
    border-radius: 10px;
    padding: 0.9rem;
    font-size: 0.82rem;
    color: var(--text-body);
    line-height: 1.5;
}

.cryo-vascular-card strong {
    color: var(--text-light);
}

/* ══════════════════════════════════════════════════════════════════════════
   HERRAMIENTA 5: CRONO-SUEÑO (SUITE DE FISIOLOGÍA CIRCADIANO-GLINFÁTICA)
   ══════════════════════════════════════════════════════════════════════════ */
.sleep-subnav {
    display: flex;
    gap: 0.5rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.35rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.sleep-subnav-btn {
    flex: 1 1 auto;
    min-width: 140px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.sleep-subnav-btn:hover {
    color: var(--text-light);
    background: rgba(155, 142, 196, 0.08);
}

.sleep-subnav-btn.active {
    background: rgba(155, 142, 196, 0.2);
    color: var(--bio-sleep, #9b8ec4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sleep-subview {
    display: none;
    animation: fadeInBio 0.3s ease forwards;
}

.sleep-subview.active {
    display: block;
}

.sleep-diary-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 600px) {
    .sleep-diary-form {
        grid-template-columns: 1fr;
    }
}

.sleep-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sleep-input-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.sleep-input-group input[type="time"],
.sleep-input-group input[type="number"],
.sleep-input-group input[type="range"],
.sleep-input-group select {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    color: var(--text-light);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.sleep-input-group input[type="range"] {
    padding: 0.25rem 0;
    accent-color: var(--bio-sleep);
}

.sleep-input-group input:focus,
.sleep-input-group select:focus {
    border-color: var(--bio-sleep);
}

.hypnogram-canvas-wrap {
    width: 100%;
    height: 180px;
    background: var(--bio-inner-bg);
    border: 1px solid rgba(155, 142, 196, 0.25);
    border-radius: 12px;
    position: relative;
    margin: 1.25rem 0 0.85rem 0;
    overflow: hidden;
}

#hypnogram-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.sleep-stages-breakdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
}

@media (max-width: 550px) {
    .sleep-stages-breakdown {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sleep-stage-pill {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    font-size: 0.75rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
}

.stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.two-process-canvas-wrap {
    width: 100%;
    height: 210px;
    background: var(--bio-inner-bg);
    border: 1px solid rgba(155, 142, 196, 0.25);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

#two-process-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
   HERRAMIENTA 6: MATRIZ MITOCONDRIAL (COFACTORS RADAR)
   ══════════════════════════════════════════════════════════════════════════ */
.cofactor-radar-box {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.cofactor-global-status {
    width: 100%;
    margin-bottom: 0.5rem;
}

.cofactor-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.cofactor-gauge-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}

.cofactor-gauge-fill {
    height: 100%;
    background: linear-gradient(90deg, #d47a5b 0%, #e5b95f 50%, #8fa691 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.cofactor-status-badge {
    font-size: 0.75rem;
    color: var(--bio-cofactor);
    font-weight: 500;
}

.radar-canvas-wrap {
    width: 100%;
    max-width: 290px;
    height: 290px;
    position: relative;
    margin: 0.25rem auto;
}

#cofactor-radar-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.cofactor-presets-bar {
    width: 100%;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}

.cofactor-presets-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.cofactor-presets-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    width: 100%;
}

.cofactor-preset-pill {
    flex: 1 1 calc(50% - 0.4rem);
    padding: 0.35rem 0.5rem;
    font-size: 0.72rem;
    border-radius: 6px;
    border: 1px solid rgba(229, 185, 95, 0.2);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}

.cofactor-preset-pill:hover {
    border-color: var(--bio-cofactor);
    color: var(--text-body);
    background: rgba(229, 185, 95, 0.08);
}

.cofactor-preset-pill.active {
    border-color: var(--bio-cofactor);
    background: rgba(229, 185, 95, 0.15);
    color: var(--bio-cofactor);
    font-weight: 600;
}

.cofactor-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    width: 100%;
}

@media (max-width: 600px) {
    .cofactor-list-grid {
        grid-template-columns: 1fr;
    }
}

.cofactor-item-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cofactor-item-card:hover,
.cofactor-item-card.active {
    border-color: var(--bio-cofactor);
    background: rgba(229, 185, 95, 0.08);
    box-shadow: 0 2px 12px rgba(229, 185, 95, 0.08);
}

.cofactor-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cofactor-card-header h5 {
    font-size: 0.85rem;
    color: var(--bio-cofactor);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.cofactor-val-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: rgba(229, 185, 95, 0.15);
    color: var(--bio-cofactor);
    border: 1px solid rgba(229, 185, 95, 0.3);
}

.cofactor-item-card p {
    font-size: 0.73rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.35;
}

.cofactor-slider-wrap {
    margin-top: 0.2rem;
    padding-top: 0.2rem;
}

.cofactor-slider {
    width: 100%;
    margin: 0;
    height: 4px;
    accent-color: var(--bio-cofactor);
}

/* ─── Generic & Core Bio Buttons ─── */
.bio-btn-primary,
.bio-btn-secondary,
.bio-btn-warning,
.bio-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1.4rem;
    border-radius: 10px;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    text-decoration: none;
    line-height: 1.3;
    min-height: 46px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.bio-btn-primary,
.bio-action-btn.primary {
    background: linear-gradient(135deg, var(--bio-bolt, #4fa89b) 0%, #357a70 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(79, 168, 155, 0.3);
}

.bio-btn-primary:hover,
.bio-action-btn.primary:hover {
    background: linear-gradient(135deg, #5fc2b3 0%, #3f8f84 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(79, 168, 155, 0.42);
    color: #ffffff;
}

.bio-btn-primary:active,
.bio-action-btn.primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(79, 168, 155, 0.25);
}

.bio-btn-secondary,
.bio-action-btn.secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--bio-card-border, rgba(255, 255, 255, 0.12));
    color: var(--text-light, #e8ede7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.bio-btn-secondary:hover,
.bio-action-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(79, 168, 155, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.bio-btn-secondary:active,
.bio-action-btn.secondary:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.04);
}

.bio-btn-warning {
    background: linear-gradient(135deg, #d47a5b 0%, #ba5d3d 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(212, 122, 91, 0.35);
}

.bio-btn-warning:hover {
    background: linear-gradient(135deg, #df896c 0%, #c86948 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(212, 122, 91, 0.45);
    color: #ffffff;
}

.bio-btn-warning:active {
    transform: translateY(0);
}

/* Light theme overrides for Bio Buttons */
[data-theme='light'] .bio-btn-primary,
[data-theme='light'] .bio-action-btn.primary {
    background: linear-gradient(135deg, #2f756b 0%, #20534c 100%);
    border-color: rgba(0, 0, 0, 0.1);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(47, 117, 107, 0.25);
}

[data-theme='light'] .bio-btn-primary:hover,
[data-theme='light'] .bio-action-btn.primary:hover {
    background: linear-gradient(135deg, #3d887d 0%, #28645b 100%);
    color: #ffffff;
}

[data-theme='light'] .bio-btn-secondary,
[data-theme='light'] .bio-action-btn.secondary {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.14);
    color: #17241e;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

[data-theme='light'] .bio-btn-secondary:hover,
[data-theme='light'] .bio-action-btn.secondary:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: #3d887d;
    color: #0f1c16;
}

[data-theme='light'] .bio-btn-warning {
    background: linear-gradient(135deg, #bd5b38 0%, #9e4425 100%);
    border-color: rgba(0, 0, 0, 0.1);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(189, 91, 56, 0.25);
}

.bio-disclaimer-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding: 0.85rem 1.15rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.8rem;
    color: var(--text-faint, #708078);
    line-height: 1.5;
}

.bio-disclaimer-note i {
    color: var(--gold-bright);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   D3 POINCARÉ SCATTER PLOT & COHERENCE ZONE (HRV)
   ══════════════════════════════════════════════════════════════════════════ */
.hrv-scatter-wrapper {
    margin-top: 1.75rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 16px;
    padding: 1.35rem 1.5rem;
    position: relative;
}

.hrv-scatter-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.15rem;
    flex-wrap: wrap;
}

.hrv-scatter-title-group {
    flex: 1;
    min-width: 260px;
}

.hrv-scatter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bio-hrv);
    margin-bottom: 0.3rem;
}

.hrv-scatter-title {
    font-family: var(--font-heading, 'EB Garamond', serif);
    font-size: 1.2rem;
    color: var(--text-light, #f1eee6);
    margin: 0 0 0.35rem 0;
    line-height: 1.3;
}

[data-theme='light'] .hrv-scatter-title {
    color: #17241e;
}

.hrv-scatter-desc {
    font-size: 0.82rem;
    color: var(--text-muted, #a8a096);
    line-height: 1.5;
    margin: 0;
}

.hrv-scatter-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.65rem;
}

.hrv-scatter-legend {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.legend-chip .legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.legend-chip.zone-coherence {
    background: rgba(143, 166, 145, 0.12);
    border-color: rgba(143, 166, 145, 0.4);
    color: #b8d4be;
}
.legend-chip.zone-coherence .legend-dot {
    background: #8fa691;
    box-shadow: 0 0 6px rgba(143, 166, 145, 0.8);
}

.legend-chip.zone-balanced {
    background: rgba(211, 176, 106, 0.1);
    border-color: rgba(211, 176, 106, 0.35);
    color: #f1dbaa;
}
.legend-chip.zone-balanced .legend-dot {
    background: #d3b06a;
}

.legend-chip.zone-stress {
    background: rgba(212, 122, 91, 0.1);
    border-color: rgba(212, 122, 91, 0.35);
    color: #f2aba0;
}
.legend-chip.zone-stress .legend-dot {
    background: #d47a5b;
}

[data-theme='light'] .legend-chip.zone-coherence {
    background: rgba(37, 67, 52, 0.08);
    border-color: rgba(37, 67, 52, 0.3);
    color: #1f4231;
}
[data-theme='light'] .legend-chip.zone-balanced {
    background: rgba(184, 134, 11, 0.08);
    border-color: rgba(184, 134, 11, 0.3);
    color: #8c670b;
}
[data-theme='light'] .legend-chip.zone-stress {
    background: rgba(166, 77, 57, 0.08);
    border-color: rgba(166, 77, 57, 0.3);
    color: #8c3826;
}

/* ─── D3 Chart Container ─── */
.hrv-scatter-chart-wrap {
    position: relative;
    width: 100%;
    height: 330px;
    background: #080c0a;
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme='light'] .hrv-scatter-chart-wrap {
    background: #f7f5ee;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

.hrv-d3-scatter-chart {
    width: 100%;
    height: 100%;
    position: relative;
}

.d3-lazy-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    color: var(--text-muted, #a8a096);
    font-size: 0.82rem;
    background: transparent;
    transition: opacity 0.3s ease;
}

.d3-lazy-loader i {
    font-size: 1.35rem;
    color: var(--bio-hrv);
}

.hrv-d3-scatter-chart svg {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
}

/* D3 SVG Axis & Grid Styling */
.hrv-d3-scatter-chart .d3-grid line {
    stroke: rgba(143, 166, 145, 0.08);
    stroke-dasharray: 2, 3;
}

[data-theme='light'] .hrv-d3-scatter-chart .d3-grid line {
    stroke: rgba(0, 0, 0, 0.06);
}

.hrv-d3-scatter-chart .d3-axis path,
.hrv-d3-scatter-chart .d3-axis line {
    stroke: rgba(143, 166, 145, 0.25);
}

[data-theme='light'] .hrv-d3-scatter-chart .d3-axis path,
[data-theme='light'] .hrv-d3-scatter-chart .d3-axis line {
    stroke: rgba(0, 0, 0, 0.15);
}

.hrv-d3-scatter-chart .d3-axis text {
    fill: var(--text-muted, #a8a096);
    font-family: var(--font-body, system-ui);
    font-size: 10px;
}

.hrv-d3-scatter-chart .d3-axis-label {
    fill: var(--text-muted, #a8a096);
    font-family: var(--font-body, system-ui);
    font-size: 11px;
    font-weight: 500;
}

/* Diagonal Identity Line (y = x) */
.hrv-d3-scatter-chart .d3-identity-line {
    stroke: rgba(143, 166, 145, 0.28);
    stroke-dasharray: 4, 4;
    stroke-width: 1.2px;
}

.hrv-d3-scatter-chart .d3-identity-label {
    fill: rgba(143, 166, 145, 0.55);
    font-size: 9px;
    font-style: italic;
}

/* Coherence Zone Ellipse */
.hrv-d3-scatter-chart .d3-coherence-zone {
    stroke: #8fa691;
    stroke-width: 1.5px;
    stroke-dasharray: 4, 3;
    fill: url(#hrv-coherence-gradient);
    filter: drop-shadow(0 0 8px rgba(143, 166, 145, 0.3));
    transition: all 0.3s ease;
}

.hrv-d3-scatter-chart .d3-coherence-zone-label {
    fill: #b3d4bb;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

[data-theme='light'] .hrv-d3-scatter-chart .d3-coherence-zone-label {
    fill: #1f4231;
    text-shadow: none;
}

/* SD1/SD2 Dynamic Confidence Ellipse */
.hrv-d3-scatter-chart .d3-sd-ellipse {
    stroke: var(--gold-bright, #d3b06a);
    stroke-width: 1.2px;
    stroke-opacity: 0.75;
    fill: rgba(211, 176, 106, 0.08);
    stroke-dasharray: 3, 3;
}

/* Trajectory Path between consecutive beats */
.hrv-d3-scatter-chart .d3-trajectory-path {
    fill: none;
    stroke: rgba(211, 176, 106, 0.22);
    stroke-width: 1.2px;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Scatter Data Dots */
.hrv-d3-scatter-chart .d3-scatter-dot {
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), stroke-width 0.2s ease;
}

.hrv-d3-scatter-chart .d3-scatter-dot:hover {
    stroke-width: 2.5px !important;
    filter: drop-shadow(0 0 6px currentColor);
}

/* Latest Beat Pulse Ping Animation */
@keyframes hrvPingAnimation {
    0% {
        r: 6px;
        opacity: 0.9;
    }
    100% {
        r: 22px;
        opacity: 0;
    }
}

.hrv-d3-scatter-chart .d3-ping-circle {
    fill: none;
    stroke: var(--gold-bright, #ffd15c);
    stroke-width: 1.8px;
    animation: hrvPingAnimation 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    pointer-events: none;
}

/* Floating Tooltip */
.hrv-scatter-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    background: rgba(11, 16, 13, 0.95);
    border: 1px solid var(--gold-bright);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    color: #f1eee6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    z-index: 20;
    transition: opacity 0.15s ease, transform 0.1s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
    line-height: 1.4;
}

[data-theme='light'] .hrv-scatter-tooltip {
    background: rgba(251, 249, 244, 0.96);
    border: 1px solid var(--gold-bright);
    color: #17241e;
    box-shadow: 0 8px 24px rgba(25, 45, 35, 0.18);
}

.hrv-scatter-tooltip strong {
    color: var(--gold-bright);
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.82rem;
}

/* ─── Poincaré Telemetry Metric Pills ─── */
.hrv-scatter-telemetry-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.65rem;
    margin-top: 1rem;
}

.hrv-scatter-stat-pill {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: border-color 0.2s ease;
}

.hrv-scatter-stat-pill:hover {
    border-color: var(--gold-bright);
}

[data-theme='light'] .hrv-scatter-stat-pill {
    background: rgba(0, 0, 0, 0.02);
}

.hrv-scatter-stat-pill .stat-label {
    font-size: 0.72rem;
    color: var(--text-muted, #a8a096);
    white-space: nowrap;
}

.hrv-scatter-stat-pill .stat-val {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-light, #f1eee6);
    font-family: var(--font-body, system-ui);
}

[data-theme='light'] .hrv-scatter-stat-pill .stat-val {
    color: #17241e;
}

#hrv-scatter-zone-pct {
    color: var(--bio-hrv);
}

#hrv-scatter-sd1 {
    color: var(--gold-bright);
}

/* ─── Poincaré Interpretation Guide Box ─── */
.hrv-poincare-guide-box {
    margin-top: 1.15rem;
    padding: 1.1rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
}

[data-theme='light'] .hrv-poincare-guide-box {
    background: rgba(0, 0, 0, 0.02);
}

.hrv-guide-header {
    margin-bottom: 0.85rem;
}

.hrv-guide-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-light, #f1eee6);
    letter-spacing: 0.02em;
}

[data-theme='light'] .hrv-guide-title {
    color: #17241e;
}

.hrv-guide-title i {
    color: var(--bio-hrv);
}

.hrv-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
}

.hrv-guide-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 0.85rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.hrv-guide-card:hover {
    border-color: var(--bio-hrv);
    transform: translateY(-2px);
}

[data-theme='light'] .hrv-guide-card {
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.hrv-guide-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bio-hrv);
    margin-bottom: 0.15rem;
}

.hrv-guide-badge.alert {
    color: var(--bio-mitochondria);
}

.hrv-guide-badge.gold {
    color: var(--gold-bright);
}

.hrv-guide-card h5 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-light, #f1eee6);
    margin: 0;
    line-height: 1.35;
}

[data-theme='light'] .hrv-guide-card h5 {
    color: #17241e;
}

.hrv-guide-card p {
    font-size: 0.78rem;
    color: var(--text-muted, #a8a096);
    line-height: 1.45;
    margin: 0;
}

.hrv-guide-card p strong {
    color: var(--text-light, #f1eee6);
}

[data-theme='light'] .hrv-guide-card p strong {
    color: #17241e;
}

/* Mobile Adjustments for D3 Scatter Plot */
@media (max-width: 900px) {
    .hrv-scatter-wrapper {
        padding: 1rem;
        margin-top: 1.25rem;
    }

    .hrv-scatter-actions {
        align-items: flex-start;
        width: 100%;
    }

    .hrv-scatter-chart-wrap {
        height: 290px;
    }

    .hrv-scatter-telemetry-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .hrv-guide-grid {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }
}

@media (max-width: 480px) {
    .hrv-scatter-chart-wrap {
        height: 260px;
    }

    .hrv-scatter-telemetry-row {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   10. SOMATIC TELEMETRY & HRV HISTORY LOG
   ═══════════════════════════════════════════════════════════════════ */
.hrv-history-wrapper {
    margin-top: 1.5rem;
    padding: 1.35rem 1.5rem;
    background: rgba(13, 20, 16, 0.75);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

[data-theme='light'] .hrv-history-wrapper {
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(25, 45, 35, 0.06);
    border-color: var(--bio-card-border);
}

.hrv-history-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 0.9rem;
}

[data-theme='light'] .hrv-history-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.hrv-history-title-group {
    flex: 1;
    min-width: 260px;
}

.hrv-history-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(143, 166, 145, 0.12);
    border: 1px solid rgba(143, 166, 145, 0.3);
    color: var(--bio-hrv, #8fa691);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

.hrv-history-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-light, #f1eee6);
    margin: 0 0 0.25rem 0;
}

[data-theme='light'] .hrv-history-title {
    color: #17241e;
}

.hrv-history-desc {
    font-size: 0.8rem;
    color: var(--text-muted, #a8a096);
    margin: 0;
    line-height: 1.45;
}

.hrv-history-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hrv-mini-btn.danger {
    color: #f2aba0;
    border-color: rgba(212, 122, 91, 0.3);
}

.hrv-mini-btn.danger:hover {
    background: rgba(212, 122, 91, 0.15);
    border-color: #d47a5b;
    color: #fff;
}

/* History Sessions Cards List */
.hrv-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.hrv-history-list::-webkit-scrollbar {
    width: 6px;
}

.hrv-history-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 999px;
}

.hrv-history-list::-webkit-scrollbar-thumb {
    background: rgba(143, 166, 145, 0.25);
    border-radius: 999px;
}

/* Single Session Card */
.hrv-history-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.hrv-history-card:hover {
    border-color: var(--bio-hrv);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

[data-theme='light'] .hrv-history-card {
    background: #faf8f2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.hrv-card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.hrv-card-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.hrv-card-date {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-light, #f1eee6);
}

[data-theme='light'] .hrv-card-date {
    color: #17241e;
}

.hrv-card-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted, #a8a096);
    border: 1px solid var(--bio-card-border);
}

.hrv-card-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    background: rgba(143, 166, 145, 0.15);
    border: 1px solid rgba(143, 166, 145, 0.4);
    color: var(--bio-hrv, #8fa691);
}

.hrv-card-score-badge.high {
    background: rgba(143, 166, 145, 0.18);
    border-color: var(--bio-hrv);
    color: #b8d4be;
}

.hrv-card-score-badge.med {
    background: rgba(211, 176, 106, 0.15);
    border-color: var(--gold-bright);
    color: #f1dbaa;
}

.hrv-card-score-badge.low {
    background: rgba(212, 122, 91, 0.15);
    border-color: #d47a5b;
    color: #f2aba0;
}

/* History Card Metrics Grid */
.hrv-card-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}

[data-theme='light'] .hrv-card-metrics-grid {
    background: rgba(0, 0, 0, 0.03);
}

.hrv-card-m-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hrv-card-m-item small {
    font-size: 0.68rem;
    color: var(--text-muted, #a8a096);
    white-space: nowrap;
}

.hrv-card-m-item strong {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-light, #f1eee6);
}

[data-theme='light'] .hrv-card-m-item strong {
    color: #17241e;
}

.hrv-card-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.hrv-card-status-text {
    font-size: 0.76rem;
    color: var(--text-muted, #a8a096);
    flex: 1;
    min-width: 180px;
}

.hrv-card-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hrv-card-action-btn {
    background: transparent;
    border: 1px solid var(--bio-card-border);
    color: var(--text-muted, #a8a096);
    border-radius: 6px;
    padding: 0.28rem 0.6rem;
    font-size: 0.72rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s ease;
}

.hrv-card-action-btn:hover {
    border-color: var(--bio-hrv);
    color: var(--text-light, #f1eee6);
    background: rgba(255, 255, 255, 0.05);
}

.hrv-card-action-btn.delete:hover {
    border-color: #d47a5b;
    color: #f2aba0;
    background: rgba(212, 122, 91, 0.12);
}

/* Empty State */
.hrv-history-empty {
    padding: 2.2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    border: 1px dashed var(--bio-card-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.015);
}

.hrv-history-empty i {
    font-size: 2rem;
    color: var(--bio-hrv);
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.hrv-history-empty strong {
    font-size: 0.95rem;
    color: var(--text-light, #f1eee6);
}

[data-theme='light'] .hrv-history-empty strong {
    color: #17241e;
}

.hrv-history-empty p {
    font-size: 0.8rem;
    color: var(--text-muted, #a8a096);
    max-width: 480px;
    margin: 0;
    line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════════════════════
   11. OCULOMOTOR MODULATOR & TRIGEMINO-VAGAL REFLEX (PANORAMIC VISION)
   ══════════════════════════════════════════════════════════════════════════ */

.oculo-mode-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.oculo-mode-btn {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    color: var(--text-muted);
    cursor: pointer;
    text-align: left;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
}

.oculo-mode-btn i {
    font-size: 1.35rem;
    color: var(--bio-oculomotor);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.oculo-mode-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.oculo-mode-text strong {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light, #f1eee6);
}

[data-theme='light'] .oculo-mode-text strong {
    color: #17241e;
}

.oculo-mode-text span {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oculo-mode-btn:hover {
    border-color: var(--bio-oculomotor);
    background: rgba(114, 164, 200, 0.08);
    transform: translateY(-2px);
}

.oculo-mode-btn:hover i {
    transform: scale(1.15);
}

.oculo-mode-btn.active {
    border-color: var(--bio-oculomotor);
    background: rgba(114, 164, 200, 0.14);
    box-shadow: 0 0 20px var(--bio-oculomotor-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.oculo-mode-btn.active .oculo-mode-text strong {
    color: var(--bio-oculomotor);
}

/* ─── Interactive Stage Wrapper ─── */
.oculo-stage-wrapper {
    position: relative;
    background: radial-gradient(ellipse at center, rgba(16, 26, 36, 0.85) 0%, rgba(8, 12, 18, 0.98) 100%);
    border: 1px solid rgba(114, 164, 200, 0.25);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(114, 164, 200, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme='light'] .oculo-stage-wrapper {
    background: radial-gradient(ellipse at center, rgba(235, 244, 250, 0.95) 0%, rgba(215, 230, 242, 0.95) 100%);
    border-color: rgba(60, 110, 145, 0.28);
    box-shadow: 0 16px 40px rgba(30, 60, 80, 0.12), inset 0 0 30px rgba(114, 164, 200, 0.08);
}

/* Fullscreen Mode */
.oculo-stage-wrapper.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    border-radius: 0;
    border: none;
    padding: 1.5rem;
    height: 100vh;
    width: 100vw;
    background: #06090e;
    box-shadow: none;
}

[data-theme='light'] .oculo-stage-wrapper.is-fullscreen {
    background: #eef5fa;
}

.oculo-stage-wrapper.is-fullscreen .oculo-canvas-container {
    height: calc(100vh - 160px);
}

/* HUD Header */
.oculo-stage-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem;
}

.oculo-hud-left,
.oculo-hud-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.oculo-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.65rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--bio-card-border);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

[data-theme='light'] .oculo-live-badge {
    background: rgba(255, 255, 255, 0.6);
}

.oculo-pulsing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #888;
    transition: background 0.3s ease;
}

.oculo-stage-wrapper.is-running .oculo-pulsing-dot {
    background: var(--bio-oculomotor);
    box-shadow: 0 0 10px var(--bio-oculomotor);
    animation: oculoPulseDot 1.4s infinite alternate;
}

@keyframes oculoPulseDot {
    0% { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 1; }
}

.oculo-mode-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bio-oculomotor);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.65rem;
    background: rgba(114, 164, 200, 0.12);
    border-radius: 6px;
    border: 1px solid rgba(114, 164, 200, 0.25);
}

.oculo-timer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    font-family: var(--font-heading, 'EB Garamond', monospace);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-light, #f1eee6);
}

[data-theme='light'] .oculo-timer-badge {
    background: rgba(255, 255, 255, 0.7);
    color: #17241e;
}

.oculo-timer-badge i {
    color: var(--gold-bright);
    font-size: 0.9rem;
}

.oculo-mini-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--bio-card-border);
    color: var(--text-light, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-theme='light'] .oculo-mini-action-btn {
    background: rgba(0, 0, 0, 0.05);
    color: #17241e;
}

.oculo-mini-action-btn:hover {
    background: rgba(114, 164, 200, 0.25);
    color: var(--bio-oculomotor);
    transform: scale(1.08);
}

/* Canvas Area */
.oculo-canvas-container {
    position: relative;
    width: 100%;
    height: 380px;
    background: #070b10;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(114, 164, 200, 0.15);
}

[data-theme='light'] .oculo-canvas-container {
    background: #111a24;
}

#oculo-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Palming Mode Overlay */
.oculo-palming-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 12, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 10;
    animation: bioFadeIn 0.3s ease;
}

.oculo-palming-card {
    max-width: 480px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: rgba(20, 30, 42, 0.75);
    border: 1px solid rgba(114, 164, 200, 0.3);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}

.oculo-palming-step-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bio-oculomotor);
    background: rgba(114, 164, 200, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(114, 164, 200, 0.3);
}

.oculo-palming-title {
    font-family: var(--font-heading, 'EB Garamond', serif);
    font-size: 1.35rem;
    color: var(--text-light, #f1eee6);
    margin: 0;
}

.oculo-palming-icon-wrap {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(114, 164, 200, 0.12);
    border: 1px solid rgba(114, 164, 200, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--bio-oculomotor);
    margin: 0.25rem 0;
    animation: oculoPalmingFloat 3s ease-in-out infinite alternate;
}

@keyframes oculoPalmingFloat {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-6px) scale(1.06); }
}

.oculo-palming-desc {
    font-size: 0.88rem;
    color: var(--text-body, #d0c8b8);
    line-height: 1.55;
    margin: 0;
}

.oculo-palming-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.oculo-palming-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--bio-oculomotor), var(--gold-bright));
    border-radius: 999px;
    transition: width 0.2s linear;
}

.oculo-palming-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.oculo-palming-hint i {
    color: var(--bio-hrv);
}

/* Stage Bottom Controls */
.oculo-stage-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.oculo-controls-group-left,
.oculo-controls-group-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.oculo-main-btn {
    min-width: 150px;
}

.oculo-stage-wrapper.is-running .oculo-main-btn {
    background: linear-gradient(135deg, #d47a5b 0%, #b85c3e 100%);
    border-color: rgba(212, 122, 91, 0.4);
    box-shadow: 0 4px 18px rgba(212, 122, 91, 0.35);
}

.oculo-toggle-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    position: relative;
}

.oculo-chip-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(114, 164, 200, 0.2);
    color: var(--bio-oculomotor);
    margin-left: 0.2rem;
    letter-spacing: 0.02em;
}

.oculo-info-icon-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    position: relative;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--bio-card-border);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    touch-action: manipulation;
}

/* Touch hitbox extension to 44px minimum for accessibility */
.oculo-info-icon-btn::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
}

.oculo-info-icon-btn:hover {
    color: var(--gold-bright);
    border-color: var(--gold-bright);
    background: rgba(212, 165, 57, 0.15);
    transform: scale(1.08);
}

.oculo-info-icon-btn:active {
    transform: scale(0.95);
}

/* ─── Modal Explicativo: Resonancia & Audio 8D ─── */
.oculo-info-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 11, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.oculo-info-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.oculo-info-modal-card {
    background: #0d1520;
    border: 1px solid rgba(114, 164, 200, 0.35);
    border-radius: 18px;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 30px rgba(114, 164, 200, 0.15);
    overflow: hidden;
    animation: oculoModalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-theme='light'] .oculo-info-modal-card {
    background: #fbf9f4;
    border-color: rgba(60, 110, 145, 0.3);
    box-shadow: 0 24px 60px rgba(10, 25, 40, 0.25), 0 0 30px rgba(114, 164, 200, 0.1);
}

@keyframes oculoModalPop {
    0% { transform: scale(0.92) translateY(12px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.oculo-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.4rem;
    border-bottom: 1px solid var(--bio-card-border);
    gap: 1rem;
}

.oculo-modal-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.oculo-modal-title {
    font-family: var(--font-heading, 'EB Garamond', serif);
    font-size: 1.25rem;
    color: var(--text-light, #f1eee6);
    margin: 0;
    line-height: 1.3;
}

[data-theme='light'] .oculo-modal-title {
    color: #17241e;
}

.oculo-modal-close-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    position: relative;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--bio-card-border);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    touch-action: manipulation;
}

.oculo-modal-close-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 8px;
}

.oculo-modal-close-btn:hover {
    color: var(--text-light);
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.08);
}

.oculo-modal-close-btn:active {
    transform: scale(0.95);
}

[data-theme='light'] .oculo-modal-close-btn {
    background: rgba(0, 0, 0, 0.05);
    color: #2c3a33;
    border-color: rgba(60, 110, 145, 0.25);
}

[data-theme='light'] .oculo-modal-close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #17241e;
}

.oculo-modal-body {
    padding: 1.25rem 1.4rem;
    overflow-y: auto;
    max-height: calc(90vh - 160px);
}

.oculo-modal-concept-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.oculo-concept-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
}

[data-theme='light'] .oculo-concept-card {
    background: rgba(0, 0, 0, 0.02);
}

.oculo-concept-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.oculo-concept-content {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.oculo-concept-content h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-light, #f1eee6);
    margin: 0;
}

[data-theme='light'] .oculo-concept-content h5 {
    color: #17241e;
}

.oculo-concept-content p {
    font-size: 0.825rem;
    color: var(--text-body, #d0c8b8);
    line-height: 1.45;
    margin: 0;
}

[data-theme='light'] .oculo-concept-content p {
    color: #2b3b33;
}

.oculo-concept-detail {
    font-size: 0.78rem !important;
    color: var(--text-muted, #a8a096) !important;
    margin-top: 0.2rem !important;
}

[data-theme='light'] .oculo-concept-detail {
    color: #4a5c53 !important;
}

.oculo-modal-list {
    margin: 0.35rem 0 0;
    padding-left: 1.2rem;
    font-size: 0.8rem;
    color: var(--text-body, #d0c8b8);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[data-theme='light'] .oculo-modal-list {
    color: #2b3b33;
}

.oculo-modal-footer {
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--bio-card-border);
    background: rgba(0, 0, 0, 0.2);
}

[data-theme='light'] .oculo-modal-footer {
    background: rgba(0, 0, 0, 0.04);
}

.oculo-toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.oculo-toggle-chip i {
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.oculo-toggle-chip:hover {
    color: var(--text-light);
    border-color: var(--bio-oculomotor);
}

.oculo-toggle-chip.active {
    background: rgba(114, 164, 200, 0.15);
    border-color: var(--bio-oculomotor);
    color: var(--bio-oculomotor);
    box-shadow: 0 0 12px var(--bio-oculomotor-glow);
}

.oculo-toggle-chip.active i {
    transform: scale(1.15);
}

/* ─── Settings & Telemetry Grid ─── */
.oculo-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

.oculo-config-card,
.oculo-telemetry-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.oculo-card-heading {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-light, #f1eee6);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[data-theme='light'] .oculo-card-heading {
    color: #17241e;
}

.oculo-card-heading i {
    color: var(--bio-oculomotor);
}

/* Frequency & Duration Chips */
.oculo-freq-chips,
.oculo-duration-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.oculo-freq-chip,
.oculo-dur-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.4rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

[data-theme='light'] .oculo-freq-chip,
[data-theme='light'] .oculo-dur-chip {
    background: rgba(0, 0, 0, 0.03);
}

.oculo-freq-chip strong,
.oculo-dur-chip strong {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light, #f1eee6);
}

[data-theme='light'] .oculo-freq-chip strong,
[data-theme='light'] .oculo-dur-chip strong {
    color: #17241e;
}

.oculo-freq-chip small {
    font-size: 0.68rem;
    opacity: 0.8;
}

.oculo-freq-chip:hover,
.oculo-dur-chip:hover {
    border-color: var(--bio-oculomotor);
    color: var(--text-light);
}

.oculo-freq-chip.active,
.oculo-dur-chip.active {
    background: rgba(114, 164, 200, 0.15);
    border-color: var(--bio-oculomotor);
    color: var(--bio-oculomotor);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.oculo-freq-chip.active strong,
.oculo-dur-chip.active strong {
    color: var(--bio-oculomotor);
}

/* Metrics Row */
.oculo-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
}

.oculo-metric-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

[data-theme='light'] .oculo-metric-box {
    background: rgba(255, 255, 255, 0.6);
}

.oculo-metric-box small {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.oculo-metric-box strong {
    font-size: 1.25rem;
    font-family: var(--font-heading, 'EB Garamond', monospace);
    font-weight: 700;
}

.oculo-metric-box span {
    font-size: 0.65rem;
    color: var(--text-muted);
    opacity: 0.8;
}

/* Somatic Rating Box */
.oculo-somatic-rating-box {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[data-theme='light'] .oculo-somatic-rating-box {
    background: rgba(0, 0, 0, 0.02);
}

.oculo-rating-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.oculo-rating-score {
    font-weight: 700;
    color: var(--gold-bright);
}

.oculo-rating-selector {
    display: flex;
    gap: 0.4rem;
}

.oculo-rate-btn {
    flex: 1;
    height: 34px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--bio-card-border);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

[data-theme='light'] .oculo-rate-btn {
    background: rgba(0, 0, 0, 0.04);
}

.oculo-rate-btn:hover {
    background: rgba(114, 164, 200, 0.15);
    border-color: var(--bio-oculomotor);
    color: var(--text-light);
}

.oculo-rate-btn.active {
    background: var(--bio-oculomotor);
    border-color: var(--bio-oculomotor);
    color: #fff;
    box-shadow: 0 0 12px var(--bio-oculomotor-glow);
}

.oculo-rating-feedback {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.oculo-rating-feedback i {
    color: var(--bio-oculomotor);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.oculo-export-actions {
    display: flex;
    gap: 0.65rem;
    margin-top: 0.25rem;
}

.oculo-export-actions .hrv-mini-btn {
    flex: 1;
}

/* ─── Responsive Queries for Mobile & Small Displays ─── */
@media (max-width: 768px) {
    .oculo-canvas-container {
        height: 300px;
    }
    
    .oculo-stage-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .oculo-controls-group-left,
    .oculo-controls-group-right {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .oculo-controls-group-left .bio-btn-primary,
    .oculo-controls-group-left .bio-btn-secondary {
        flex: 1;
        min-width: 120px;
    }

    .oculo-toggle-wrapper {
        flex: 1;
        min-width: calc(50% - 0.3rem);
        display: flex;
    }

    .oculo-toggle-chip {
        flex: 1;
        justify-content: center;
        padding: 0.5rem 0.6rem;
        font-size: 0.76rem;
    }

    .oculo-metrics-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }

    .oculo-telemetry-box {
        padding: 0.5rem 0.3rem;
    }

    .oculo-telemetry-box strong {
        font-size: 1.05rem;
    }

    /* Palming overlay mobile responsiveness */
    .oculo-palming-overlay {
        padding: 0.75rem;
    }

    .oculo-palming-card {
        padding: 1.25rem 1rem;
        gap: 0.6rem;
        max-height: 92%;
        overflow-y: auto;
    }

    .oculo-palming-title {
        font-size: 1.15rem;
    }

    .oculo-palming-desc {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .oculo-palming-icon-wrap {
        width: 52px;
        height: 52px;
        font-size: 1.4rem;
    }

    /* Concept Modal Mobile adjustments */
    .oculo-concept-card {
        flex-direction: column;
        gap: 0.6rem;
        padding: 0.85rem;
    }

    .oculo-concept-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .oculo-canvas-container {
        height: 260px;
    }

    .oculo-stage-hud {
        gap: 0.4rem;
    }

    .oculo-mode-tag {
        font-size: 0.68rem;
        padding: 0.2rem 0.45rem;
    }

    .oculo-timer-badge {
        font-size: 0.9rem;
        padding: 0.2rem 0.5rem;
    }

    .oculo-toggle-wrapper {
        min-width: 100%;
    }
}

/* ==========================================================================
   8. TEST BOLT & QUIMIORREFLEX CO2 (EFECTO BOHR & EQUILIBRIO ÁCIDO-BASE)
   ========================================================================== */

/* Subnavegación Interna */
.bolt-subnav-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0 1.5rem;
    padding: 0.35rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
}

.bolt-subnav-btn {
    flex: 1 1 calc(25% - 0.5rem);
    min-width: 170px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.bolt-subnav-btn:hover {
    color: var(--text-main, #e8ede7);
    background: rgba(255, 255, 255, 0.04);
}

.bolt-subnav-btn.active {
    color: var(--bio-bolt, #4fa89b);
    background: rgba(79, 168, 155, 0.12);
    border-color: rgba(79, 168, 155, 0.35);
    box-shadow: 0 4px 14px var(--bio-bolt-glow, rgba(79, 168, 155, 0.2));
}

.bolt-subview {
    display: none;
    animation: bioFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bolt-subview.active {
    display: block;
}

/* Instructions card */
.bolt-instructions-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 1.15rem 1.35rem;
    margin-bottom: 1.25rem;
}

.bolt-inst-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--bio-bolt, #4fa89b);
    font-size: 0.92rem;
    margin-bottom: 0.65rem;
}

.bolt-inst-steps {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--text-body, #c2ccc0);
    font-size: 0.86rem;
    line-height: 1.6;
}

.bolt-inst-steps li {
    margin-bottom: 0.35rem;
}

.bolt-inst-steps li strong {
    color: var(--text-main, #e8ede7);
}

/* Stage Grid */
.bolt-stage-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1.25rem;
    align-items: stretch;
}

/* Timer card */
.bolt-timer-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.bolt-phase-badge-wrap {
    margin-bottom: 1.25rem;
}

.bolt-phase-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    background: rgba(79, 168, 155, 0.1);
    border: 1px solid rgba(79, 168, 155, 0.28);
    border-radius: 999px;
    color: var(--bio-bolt, #4fa89b);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bolt-halo-wrapper {
    position: relative;
    width: 190px;
    height: 190px;
    margin: 0.5rem 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bolt-pacer-halo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px dashed rgba(79, 168, 155, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.bolt-pacer-halo.running {
    border-color: var(--bio-bolt, #4fa89b);
    border-style: solid;
    animation: boltPulseGlow 2.5s infinite ease-in-out;
}

@keyframes boltPulseGlow {
    0% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(79, 168, 155, 0.4); }
    50% { transform: scale(1.04); box-shadow: 0 0 24px 6px rgba(79, 168, 155, 0.25); }
    100% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(79, 168, 155, 0); }
}

.bolt-halo-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bolt-clock-display {
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--text-main, #e8ede7);
    line-height: 1;
    letter-spacing: -0.02em;
}

.bolt-clock-unit {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bolt-timer-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    max-width: 320px;
    margin: 0.5rem auto 0;
    box-sizing: border-box;
    align-items: stretch;
}

.bolt-main-btn {
    width: 100%;
    padding: 0.85rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    box-sizing: border-box;
}

.bolt-impulse-btn {
    width: 100%;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, #d47a5b 0%, #b85e40 100%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    box-sizing: border-box;
    animation: impulsePulse 1.2s infinite ease-in-out;
}

.bolt-timer-actions .bio-btn-secondary {
    width: 100%;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
}

@keyframes impulsePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 122, 91, 0.4); }
    50% { transform: scale(1.02); box-shadow: 0 0 16px 4px rgba(212, 122, 91, 0.3); }
}

.bolt-audio-toggle-wrap {
    margin-top: 0.85rem;
    display: flex;
    justify-content: center;
    width: 100%;
}

.cryo-toggle-btn,
.bolt-audio-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--bio-card-border, rgba(255, 255, 255, 0.12));
    border-radius: 999px;
    color: var(--text-muted, #a8a096);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    min-height: 40px;
    max-width: 100%;
    text-decoration: none;
    user-select: none;
}

.cryo-toggle-btn:hover,
.bolt-audio-toggle-btn:hover {
    color: var(--text-main, #e8ede7);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(79, 168, 155, 0.35);
}

.cryo-toggle-btn.active,
.bolt-audio-toggle-btn.active {
    background: rgba(79, 168, 155, 0.14);
    border-color: rgba(79, 168, 155, 0.45);
    color: var(--bio-bolt, #4fa89b);
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(79, 168, 155, 0.15);
}

[data-theme='light'] .cryo-toggle-btn,
[data-theme='light'] .bolt-audio-toggle-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.12);
    color: #5a6660;
}

[data-theme='light'] .cryo-toggle-btn:hover,
[data-theme='light'] .bolt-audio-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #17241e;
}

[data-theme='light'] .cryo-toggle-btn.active,
[data-theme='light'] .bolt-audio-toggle-btn.active {
    background: rgba(47, 117, 107, 0.12);
    border-color: rgba(47, 117, 107, 0.4);
    color: #20534c;
    box-shadow: 0 2px 8px rgba(47, 117, 107, 0.15);
}

/* Results & Stratification Card */
.bolt-results-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
}

.bolt-card-heading {
    margin: 0 0 1rem;
    font-size: 0.96rem;
    color: var(--text-main, #e8ede7);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bolt-card-heading i {
    color: var(--bio-bolt, #4fa89b);
}

/* Spectrum bar */
.bolt-spectrum-container {
    margin-bottom: 1.15rem;
}

.bolt-spectrum-bar {
    position: relative;
    display: flex;
    height: 18px;
    border-radius: 999px;
    overflow: visible;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--bio-card-border);
}

.bolt-spectrum-segment {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.seg-poor { background: #b84a39; border-radius: 999px 0 0 999px; }
.seg-low { background: #d47a5b; }
.seg-med { background: #c5a880; }
.seg-good { background: #8fa691; }
.seg-elite { background: #4fa89b; border-radius: 0 999px 999px 0; }

.bolt-spectrum-needle {
    position: absolute;
    top: -6px;
    width: 6px;
    height: 30px;
    background: #ffffff;
    border: 2px solid #141210;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    transform: translateX(-50%);
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bolt-spectrum-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.45rem;
}

/* Score Card */
.bolt-score-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}

.bolt-score-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.bolt-score-badge {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    background: rgba(79, 168, 155, 0.15);
    color: var(--bio-bolt, #4fa89b);
}

.bolt-score-value {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.45rem;
    color: var(--bio-bolt, #4fa89b);
}

.bolt-diag-title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    color: var(--text-main, #e8ede7);
}

.bolt-diag-desc {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Telemetry Grid */
.bolt-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
}

.bolt-tel-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
}

.bolt-tel-box small {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.bolt-tel-box strong {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.15rem;
    margin: 0.15rem 0;
}

.bolt-tel-box span {
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* CO2 Stream flow anim */
.co2-flow-anim-wrap {
    position: relative;
    width: 200px;
    height: 190px;
    margin: 0.5rem 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197, 168, 128, 0.08) 0%, transparent 70%);
}

.co2-flow-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.co2-stream-particles {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(197, 168, 128, 0.35);
    pointer-events: none;
    transition: all 0.3s;
}

.co2-stream-particles.active {
    border-color: #c5a880;
    animation: co2Spin 8s linear infinite;
}

@keyframes co2Spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.co2-buffer-bars-wrap {
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 1rem 1.15rem;
}

/* Instant Recommendation Banners in Tests */
.bolt-instant-rec-banner {
    margin-top: 1.15rem;
    background: linear-gradient(135deg, rgba(79, 168, 155, 0.14) 0%, rgba(197, 168, 128, 0.08) 100%);
    border: 1px solid rgba(79, 168, 155, 0.35);
    border-radius: 12px;
    padding: 0.95rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: bioFadeIn 0.35s ease forwards;
}

.bolt-instant-rec-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(79, 168, 155, 0.2);
    color: var(--bio-bolt, #4fa89b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.bolt-instant-rec-info {
    flex: 1;
    min-width: 0;
}

.bolt-instant-rec-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bio-bolt, #4fa89b);
    display: block;
    margin-bottom: 0.15rem;
}

.bolt-instant-rec-info h5 {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    color: var(--text-main, #e8ede7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bolt-instant-rec-info p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.bolt-instant-rec-btn {
    padding: 0.6rem 1.1rem;
    font-size: 0.82rem;
    border-radius: 8px;
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

/* Adaptive Prescriptions Header */
.bolt-presc-header-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 1.15rem 1.35rem;
    margin-bottom: 1.25rem;
}

.bolt-presc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bolt-presc-summary h4 {
    margin: 0.2rem 0 0;
    font-size: 1.1rem;
    color: var(--text-main, #e8ede7);
}

.bolt-presc-badge-box {
    background: rgba(79, 168, 155, 0.1);
    border: 1px solid rgba(79, 168, 155, 0.25);
    border-radius: 10px;
    padding: 0.6rem 0.95rem;
    text-align: right;
    flex-shrink: 0;
}

.bolt-presc-badge-box small {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.bolt-presc-badge-box strong {
    font-size: 0.88rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   GENERADOR DE MICRO-PRÁCTICAS ADAPTATIVAS (BUTEYKO / CAJA)
   ══════════════════════════════════════════════════════════════════════════ */
.bolt-generator-card {
    background: var(--bio-inner-bg);
    border: 1px solid rgba(79, 168, 155, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18), 0 0 16px rgba(79, 168, 155, 0.08);
    border-radius: 14px;
    padding: 1.35rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.bolt-generator-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bio-bolt, #4fa89b), #c5a880, #8fa691);
}

.bolt-gen-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bio-card-border);
}

.bolt-gen-title-block {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bolt-gen-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(79, 168, 155, 0.15);
    border: 1px solid rgba(79, 168, 155, 0.3);
    color: var(--bio-bolt, #4fa89b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.bolt-gen-title {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    color: var(--text-main, #e8ede7);
    font-weight: 700;
}

.bolt-gen-subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.bolt-gen-telemetry-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.bolt-gen-telemetry-pill strong {
    color: var(--bio-bolt, #4fa89b);
    font-family: 'Space Grotesk', system-ui, sans-serif;
}

.bolt-gen-pipe {
    opacity: 0.35;
}

/* Controls */
.bolt-gen-controls-row {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 0.95rem 1.15rem;
    margin-bottom: 1.15rem;
}

.bolt-gen-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.bolt-gen-label i {
    color: var(--bio-bolt, #4fa89b);
}

.bolt-gen-context-buttons,
.bolt-gen-tech-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.bolt-context-btn,
.bolt-tech-btn {
    flex: 1 1 calc(25% - 0.45rem);
    min-width: 140px;
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bolt-context-btn:hover,
.bolt-tech-btn:hover {
    color: var(--text-main, #e8ede7);
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.bolt-context-btn.active,
.bolt-tech-btn.active {
    color: var(--bio-bolt, #4fa89b);
    border-color: rgba(79, 168, 155, 0.45);
    background: rgba(79, 168, 155, 0.12);
    box-shadow: 0 2px 10px rgba(79, 168, 155, 0.15);
}

/* Generated Recipe Card */
.bolt-generated-recipe-card {
    background: linear-gradient(135deg, rgba(79, 168, 155, 0.08) 0%, rgba(197, 168, 128, 0.04) 100%);
    border: 1px solid rgba(79, 168, 155, 0.28);
    border-radius: 12px;
    padding: 1.15rem 1.35rem;
}

.bolt-recipe-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.1rem;
}

.bolt-recipe-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bio-bolt, #4fa89b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.bolt-recipe-name {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    color: var(--text-main, #e8ede7);
    font-weight: 700;
    line-height: 1.3;
}

.bolt-recipe-rationale {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 680px;
}

.bolt-recipe-launch-btn {
    padding: 0.75rem 1.35rem;
    font-size: 0.88rem;
    border-radius: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(79, 168, 155, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}

.bolt-recipe-launch-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 168, 155, 0.35);
}

.bolt-recipe-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
    margin-top: 0.95rem;
    padding-top: 0.95rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.bolt-recipe-metric-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
}

.bolt-rm-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.bolt-rm-val {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.96rem;
    margin: 0.2rem 0;
}

.bolt-rm-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.bolt-protocols-section-title {
    margin-top: 1rem;
    margin-bottom: 0.4rem;
}

/* Responsive tweaks for Generator */
@media (max-width: 860px) {
    .bolt-recipe-top {
        flex-direction: column;
    }
    .bolt-recipe-launch-btn {
        width: 100%;
        justify-content: center;
    }
    .bolt-recipe-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bolt-instant-rec-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .bolt-instant-rec-btn {
        width: 100%;
        justify-content: center;
    }
}

.bolt-protocols-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.bolt-proto-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.bolt-proto-card:hover {
    border-color: var(--bio-card-hover);
}

.bolt-proto-card.active {
    border-color: var(--bio-bolt, #4fa89b);
    box-shadow: 0 4px 18px var(--bio-bolt-glow, rgba(79, 168, 155, 0.2));
}

.bolt-proto-header {
    margin-bottom: 0.5rem;
}

.bolt-proto-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bio-bolt, #4fa89b);
    margin-bottom: 0.35rem;
}

.bolt-proto-card h5 {
    margin: 0;
    font-size: 0.94rem;
    color: var(--text-main, #e8ede7);
    line-height: 1.35;
}

.bolt-proto-card p {
    margin: 0.4rem 0 0.85rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
    flex: 1;
}

.bolt-proto-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-body);
    margin-bottom: 0.85rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.bolt-run-proto-btn {
    width: 100%;
    padding: 0.55rem;
    font-size: 0.8rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
}

/* Live Pacer Box */
.bolt-live-pacer-box {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 1.35rem;
}

.bolt-pacer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.15rem;
}

.bolt-pacer-header h5 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    color: var(--text-main, #e8ede7);
}

.bolt-pacer-visual-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0;
}

.bolt-pacer-ring {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 3px solid rgba(79, 168, 155, 0.35);
    background: radial-gradient(circle, rgba(79, 168, 155, 0.12) 0%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.bolt-pacer-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bolt-pacer-cue-action {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bio-bolt, #4fa89b);
}

#bolt-pacer-cue-sec {
    font-size: 1.15rem;
    color: var(--text-main, #e8ede7);
    margin-top: 0.15rem;
}

.bolt-pacer-instructions-line {
    margin-top: 1rem;
    font-size: 0.86rem;
    color: var(--text-muted);
    text-align: center;
}

.bolt-pacer-controls {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.15rem;
}

.bolt-pacer-controls .bio-btn-primary,
.bolt-pacer-controls .bio-btn-secondary {
    padding: 0.65rem 1.35rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* Bohr Canvas container */
.bohr-canvas-container {
    background: rgba(10, 9, 8, 0.75);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    overflow: hidden;
}

[data-theme='light'] .bohr-canvas-container {
    background: rgba(235, 239, 233, 0.85);
}

/* Responsive tweaks for BOLT & Mobile Containment */
@media (max-width: 900px) {
    .bolt-stage-grid {
        grid-template-columns: 1fr;
        gap: 1.15rem;
    }
    .bolt-protocols-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bolt-subnav-btn {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

@media (max-width: 680px) {
    .bolt-timer-card,
    .bolt-results-card,
    .bolt-instructions-card,
    .bolt-generator-card,
    .bolt-generated-recipe-card,
    .bolt-live-pacer-box {
        padding: 1.15rem 0.95rem;
        border-radius: 12px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .bolt-subnav-bar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
        padding: 0.3rem;
    }

    .bolt-subnav-btn {
        min-width: 0;
        width: 100%;
        font-size: 0.78rem;
        padding: 0.55rem 0.4rem;
        white-space: normal;
        text-align: center;
    }

    .bolt-timer-actions {
        width: 100%;
        max-width: 100%;
    }

    .bolt-main-btn,
    .bolt-impulse-btn,
    .bolt-timer-actions .bio-btn-secondary {
        width: 100%;
        min-height: 48px;
    }

    .bolt-audio-toggle-wrap {
        width: 100%;
    }

    .cryo-toggle-btn,
    .bolt-audio-toggle-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .bolt-instant-rec-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 0.75rem;
        padding: 0.85rem;
    }

    .bolt-instant-rec-icon {
        margin: 0 auto;
    }

    .bolt-instant-rec-info h5 {
        white-space: normal;
    }

    .bolt-instant-rec-btn {
        width: 100%;
        justify-content: center;
    }

    .bolt-protocols-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .bolt-halo-wrapper,
    .co2-flow-anim-wrap {
        width: 165px;
        height: 165px;
        margin: 0.25rem auto 1rem;
    }

    .bolt-clock-display {
        font-size: 2.3rem;
    }

    .bolt-telemetry-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .bolt-subnav-bar {
        grid-template-columns: 1fr;
    }

    .bolt-subnav-btn {
        font-size: 0.8rem;
        padding: 0.6rem 0.75rem;
    }

    .bolt-spectrum-segment {
        font-size: 0.6rem;
        padding: 0 1px;
    }

    .bolt-spectrum-labels {
        font-size: 0.65rem;
    }

    .bolt-inst-steps {
        padding-left: 1.15rem;
        font-size: 0.82rem;
    }

    .bolt-pacer-ring {
        width: 140px;
        height: 140px;
    }

    .bolt-pacer-controls {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
        gap: 0.5rem;
    }

    .bolt-pacer-controls .bio-btn-primary,
    .bolt-pacer-controls .bio-btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY, FOCUS RINGS, REDUCED MOTION, SAFE AREAS & TOUCH RESILIENCE
   (UI/UX Pro Max Intelligence Standards)
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 0. Universal Safe Area CSS Utilities (P5 Layout & Responsive) ─── */
.safe-area-top {
    padding-top: max(16px, env(safe-area-inset-top, 0px));
}

.safe-area-bottom {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

.safe-area-x {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Fullscreen stage safe areas */
.oculo-stage-wrapper.is-fullscreen {
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

/* ─── 1. Focus Visible Biophilic Rings (P1 Accessibility) ─── */
.bio-nav-btn:focus-visible,
.cuerpo-nav-btn:focus-visible,
.hormesis-nav-btn:focus-visible,
.bio-quick-btn:focus-visible,
.cuerpo-quick-btn:focus-visible,
.hormesis-quick-btn:focus-visible,
.bio-btn-primary:focus-visible,
.bio-btn-secondary:focus-visible,
.bio-modal-close:focus-visible,
.oculo-control-btn:focus-visible,
.oculo-mode-btn:focus-visible,
.oculo-toggle-chip:focus-visible,
.oculo-info-icon-btn:focus-visible,
.oculo-modal-close-btn:focus-visible,
.oculo-timer-chip:focus-visible,
#oculo-modal-got-it:focus-visible,
.cryo-protocol-card:focus-visible,
.bio-tab-btn:focus-visible,
.bolt-subnav-btn:focus-visible,
.bio-range-slider:focus-visible {
    outline: 2px solid var(--gold-bright, #d4a539) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(212, 165, 57, 0.28) !important;
}

/* ─── 2. Accessible Touch Targets & Touch Manipulation (P2 Touch & Interaction) ─── */
.bio-nav-btn,
.cuerpo-nav-btn,
.hormesis-nav-btn,
.bio-btn-primary,
.bio-btn-secondary,
.bio-modal-close,
.oculo-control-btn,
.oculo-mode-btn,
.oculo-toggle-chip,
.oculo-info-icon-btn,
.oculo-modal-close-btn,
.oculo-timer-chip,
.bio-tab-btn,
.bolt-subnav-btn {
    touch-action: manipulation;
}

/* Tactile active feedback for all controls */
.bio-btn-primary:active:not(:disabled),
.bio-btn-secondary:active:not(:disabled),
.oculo-control-btn:active:not(:disabled),
.oculo-mode-btn:active:not(:disabled),
.oculo-toggle-chip:active:not(:disabled),
.oculo-info-icon-btn:active:not(:disabled),
.oculo-modal-close-btn:active:not(:disabled),
.oculo-timer-chip:active:not(:disabled),
.bio-tab-btn:active:not(:disabled) {
    transform: scale(0.97);
    transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
    .bio-nav-btn,
    .cuerpo-nav-btn,
    .hormesis-nav-btn,
    .bio-btn-primary,
    .bio-btn-secondary,
    .oculo-control-btn,
    .oculo-mode-btn,
    .oculo-toggle-chip,
    .bolt-subnav-btn,
    .bio-modal-close {
        min-height: 44px;
    }

    .oculo-info-icon-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
    }

    .oculo-info-icon-btn::after {
        inset: -4px;
    }

    .oculo-modal-close-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .oculo-modal-close-btn::after {
        inset: -2px;
    }
}

/* ─── 3. Screen Reader Live Announcements & Accessibility Utilities (P1) ─── */
.bio-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ─── 4. Prefers-Reduced-Motion Safeguards (P7 Animation & Vestibular Comfort) ─── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .bio-breathing-ring,
    .bolt-pacer-ring,
    .bolt-halo-wrapper,
    .co2-flow-anim-wrap,
    .mito-atp-particle,
    .hrv-pulse-ring,
    .wh-circle-container,
    .oculo-info-modal-card,
    .oculo-palming-card,
    .oculo-palming-icon-wrap {
        animation: none !important;
        transform: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PROTOCOLO DE CONTRASTE TÉRMICO (TERMAS & LAGOS DE PUCÓN) COMPONENT STYLES
   ══════════════════════════════════════════════════════════════════════════ */

.contraste-goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin: 0.75rem 0 1.25rem;
}

.contraste-goal-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.1rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    text-align: left;
    color: var(--text-body);
}

.contraste-goal-card:hover {
    border-color: var(--bio-contraste);
    background: rgba(56, 189, 248, 0.08);
    transform: translateY(-2px);
}

.contraste-goal-card.active {
    border-color: var(--bio-contraste);
    background: rgba(56, 189, 248, 0.14);
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.contraste-goal-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.18);
    color: var(--bio-contraste);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 0.65rem;
    transition: transform 0.25s ease;
}

.contraste-goal-card.active .contraste-goal-icon {
    background: var(--bio-contraste);
    color: #061118;
    transform: scale(1.05);
}

.contraste-goal-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-light, #f1eee6);
    margin-bottom: 0.25rem;
}

.contraste-goal-tag {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bio-contraste);
    margin-bottom: 0.35rem;
}

.contraste-goal-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* Pills row for level, environment, and circadian time */
.contraste-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.contraste-level-pill,
.contraste-env-pill,
.contraste-time-pill {
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    color: var(--text-body);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.contraste-level-pill:hover,
.contraste-env-pill:hover,
.contraste-time-pill:hover {
    border-color: var(--bio-contraste);
    color: var(--text-light, #f1eee6);
}

.contraste-level-pill.active,
.contraste-env-pill.active,
.contraste-time-pill.active {
    background: rgba(56, 189, 248, 0.16);
    border-color: var(--bio-contraste);
    color: var(--text-light, #f1eee6);
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.2);
}

/* Prescription Card & Rounds Flow */
.contraste-rx-card {
    background: var(--bio-inner-bg);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 16px;
    padding: 1.35rem;
    position: relative;
    backdrop-filter: blur(12px);
}

.contraste-rx-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
    margin-bottom: 1rem;
}

.contraste-round-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.85rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s ease;
}

.contraste-round-card:hover {
    border-color: rgba(56, 189, 248, 0.3);
}

.contraste-round-badge {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold-bright, #d3b06a);
    margin-bottom: 0.6rem;
}

.contraste-steps-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.contraste-step-item {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: var(--bio-inner-bg);
    border: 1px solid transparent;
}

.contraste-step-item.step-heat {
    border-color: rgba(249, 115, 22, 0.3);
    background: rgba(249, 115, 22, 0.08);
}
.contraste-step-item.step-heat i { color: var(--bio-contraste-heat, #f97316); }

.contraste-step-item.step-cold {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.08);
}
.contraste-step-item.step-cold i { color: var(--bio-contraste-cold, #38bdf8); }

.contraste-step-item.step-rest {
    border-color: rgba(143, 166, 145, 0.3);
    background: rgba(143, 166, 145, 0.08);
}
.contraste-step-item.step-rest i { color: var(--bio-hrv, #8fa691); }

.contraste-step-arrow {
    color: var(--text-muted);
    font-size: 0.75rem;
    opacity: 0.6;
}

.step-meta {
    display: flex;
    flex-direction: column;
}
.step-meta small {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
}
.step-meta strong {
    font-size: 0.82rem;
    color: var(--text-light, #f1eee6);
}

.contraste-last-badge {
    margin-top: 0.5rem;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    background: rgba(211, 176, 106, 0.12);
    border: 1px dashed rgba(211, 176, 106, 0.3);
    font-size: 0.74rem;
    color: var(--gold-bright, #d3b06a);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Timer Stage Visualizer */
.contraste-timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.contraste-circle-wrap {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.25rem 0;
}

.contraste-circle-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.contraste-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 6;
}

.contraste-circle-bar {
    fill: none;
    stroke: var(--bio-contraste);
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s ease, stroke 0.4s ease;
}

.contraste-time-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contraste-clock-digits {
    font-size: 2.85rem;
    font-weight: 700;
    font-family: var(--font-heading, monospace);
    letter-spacing: 0.04em;
    color: var(--bio-contraste);
    line-height: 1;
}

.contraste-progress-bar-container {
    width: 100%;
    max-width: 400px;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 1rem;
}

.contraste-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--bio-contraste-heat, #f97316), var(--bio-contraste-cold, #38bdf8));
    width: 0%;
    transition: width 0.4s ease;
}

/* ==========================================================================
   NEWENDO — AYUNO INTERMITENTE & PROTOCOLO DE SALIDA (REFEEDING)
   ========================================================================== */

/* Subnavigation */
.ayuno-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bio-card-border);
    padding-bottom: 0.75rem;
}

.ayuno-subnav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--bio-card-border);
    color: var(--text-muted, #a8a096);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: var(--font-body, system-ui);
}

.ayuno-subnav-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-light, #f1eee6);
    border-color: var(--bio-ayuno);
}

.ayuno-subnav-btn.active {
    background: var(--bio-inner-bg);
    border-color: var(--bio-ayuno);
    color: var(--bio-ayuno);
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
}

.ayuno-subnav-btn i {
    font-size: 0.95rem;
}

/* Subviews */
.ayuno-subview {
    display: none;
    animation: ayunoFadeIn 0.3s ease forwards;
}

.ayuno-subview.active {
    display: block;
}

@keyframes ayunoFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Protocol Cards Grid */
.ayuno-proto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.ayuno-proto-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1rem 0.85rem;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    position: relative;
}

.ayuno-proto-card:hover {
    border-color: var(--bio-ayuno);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.ayuno-proto-card.active {
    border-color: var(--bio-ayuno);
    background: rgba(245, 158, 11, 0.08);
    box-shadow: 0 0 0 1px var(--bio-ayuno), 0 6px 20px rgba(245, 158, 11, 0.15);
}

.ayuno-proto-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.ayuno-proto-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--gold-bright, #d3b06a);
    text-transform: uppercase;
}

.ayuno-proto-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-light, #f1eee6);
    margin: 0.2rem 0;
}

.ayuno-proto-sub {
    font-size: 0.8rem;
    color: var(--text-muted, #a8a096);
    line-height: 1.4;
    margin: 0;
}

/* Fasting Tracker Container */
.ayuno-tracker-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 20px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 860px) {
    .ayuno-tracker-wrapper {
        grid-template-columns: 1fr;
    }
}

.ayuno-tracker-clock-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ayuno-circle-wrap {
    position: relative;
    width: 210px;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.75rem 0;
}

.ayuno-circle-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.ayuno-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 8;
}

.ayuno-circle-bar {
    fill: none;
    stroke: var(--bio-ayuno);
    stroke-width: 9;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.4s ease, stroke 0.4s ease;
}

.ayuno-time-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ayuno-clock-digits {
    font-size: 2.2rem;
    font-weight: 700;
    font-family: var(--font-heading, monospace);
    letter-spacing: 0.04em;
    color: var(--text-light, #f1eee6);
    line-height: 1;
}

.ayuno-percent-badge {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bio-ayuno);
    margin-top: 0.35rem;
    background: rgba(245, 158, 11, 0.12);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}

.ayuno-tracker-info-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ayuno-phase-info-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.1rem;
    margin-bottom: 1rem;
}

.ayuno-phase-tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    display: inline-block;
}

/* Tracker Controls */
.ayuno-controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.ayuno-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.25rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body, system-ui);
    border: 1px solid transparent;
}

.ayuno-btn-start {
    background: var(--bio-ayuno);
    color: #141210;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.ayuno-btn-start:hover {
    background: #fbbf24;
    transform: translateY(-1px);
}

.ayuno-btn-pause {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-light, #f1eee6);
    border-color: var(--bio-card-border);
}

.ayuno-btn-pause:hover {
    background: rgba(255, 255, 255, 0.14);
}

.ayuno-btn-finish {
    background: #10b981;
    color: #06281e;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.ayuno-btn-finish:hover {
    background: #34d399;
}

.ayuno-btn-reset {
    background: transparent;
    color: var(--text-muted, #a8a096);
    border-color: var(--bio-card-border);
}

.ayuno-btn-reset:hover {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}

/* Refeeding Steps Styles */
.ayuno-refeed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.ayuno-refeed-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
}

.ayuno-refeed-card:hover {
    border-color: var(--bio-ayuno-refeed);
    transform: translateY(-2px);
}

.ayuno-refeed-card.active {
    border-color: var(--bio-ayuno-refeed);
    background: rgba(16, 185, 129, 0.08);
    box-shadow: 0 0 0 1px var(--bio-ayuno-refeed), 0 6px 20px rgba(16, 185, 129, 0.15);
}

.ayuno-refeed-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.ayuno-refeed-step-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.25rem;
    position: relative;
}

.refeed-step-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bio-ayuno-refeed);
    background: rgba(16, 185, 129, 0.12);
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    margin-bottom: 0.6rem;
}

.ayuno-refeed-step-card h4 {
    color: var(--text-light, #f1eee6);
    font-size: 1.05rem;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.ayuno-refeed-step-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ayuno-refeed-step-card li {
    font-size: 0.88rem;
    color: var(--text-muted, #a8a096);
    line-height: 1.5;
    position: relative;
    padding-left: 1.1rem;
}

.ayuno-refeed-step-card li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--bio-ayuno-refeed);
    font-weight: bold;
}

/* Checklist */
.ayuno-checklist-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.25rem;
    margin-top: 1.25rem;
}

.ayuno-checklist-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.ayuno-check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    font-size: 0.86rem;
    color: var(--text-muted, #a8a096);
}

.ayuno-check-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.ayuno-check-item input[type="checkbox"] {
    margin-top: 0.2rem;
    accent-color: #10b981;
}

/* Biomarker Simulation Cards */
.ayuno-biomarkers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.ayuno-biomarker-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.1rem;
}

.ayuno-biomarker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.ayuno-biomarker-val {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--font-heading, monospace);
    color: var(--text-light, #f1eee6);
}

.ayuno-meter-bar-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin: 0.6rem 0 0.4rem 0;
}

.ayuno-meter-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s ease;
}

/* Liquids Table */
.ayuno-liquids-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.ayuno-liquids-table th,
.ayuno-liquids-table td {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--bio-card-border);
    text-align: left;
    font-size: 0.88rem;
}

.ayuno-liquids-table th {
    color: var(--gold-bright, #d3b06a);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.02);
}

.ayuno-liquids-table td {
    color: var(--text-muted, #a8a096);
}

.ayuno-liquids-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.ayuno-allowed-badge {
    color: #10b981;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.ayuno-forbidden-badge {
    color: #ef4444;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* ==========================================================================
   HIDRATACIÓN FISIOLÓGICA & OSMOLARIDAD CELULAR (SUITE BIOENERGÉTICA)
   ========================================================================== */
.hydration-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hydration-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .hydration-grid {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

.hydration-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.5rem;
    position: relative;
    transition: border-color 0.2s ease;
}

.hydration-card:hover {
    border-color: rgba(56, 189, 248, 0.35);
}

.hydration-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hydration-card-title h4 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-light, #f1eee6);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.hydration-card-title h4 i {
    color: var(--bio-hydration);
}

.hydration-card-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: var(--bio-hydration);
    font-weight: 500;
}

.hydration-param-group {
    margin-bottom: 1.25rem;
}

.hydration-param-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.hydration-param-label {
    font-size: 0.88rem;
    color: var(--text-body, #d1cbbf);
    font-weight: 500;
}

.hydration-param-val {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bio-hydration);
    font-variant-numeric: tabular-nums;
}

.hydration-btn-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
}

.hydration-toggle-btn {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted, #a8a096);
    padding: 0.65rem 0.5rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
    line-height: 1.3;
}

.hydration-toggle-btn i {
    font-size: 1rem;
    color: var(--text-muted, #a8a096);
    transition: color 0.2s ease;
}

.hydration-toggle-btn:hover {
    background: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.4);
    color: var(--text-light, #f1eee6);
    transform: translateY(-1px);
}

.hydration-toggle-btn:hover i {
    color: #38bdf8;
}

.hydration-toggle-btn:active {
    transform: translateY(0);
}

.hydration-toggle-btn.active {
    background: rgba(56, 189, 248, 0.18);
    border-color: var(--bio-hydration);
    border-width: 2px;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.hydration-toggle-btn.active i {
    color: var(--bio-hydration);
}

/* Big Net Metrics Banner */
.hydration-net-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.25rem;
}

.hydration-metric-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.85rem;
    text-align: center;
}

.hydration-metric-tile.highlight {
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.3);
}

.hydration-metric-tile .tile-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #a8a096);
    margin-bottom: 0.25rem;
}

.hydration-metric-tile .tile-val {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-light, #f1eee6);
    font-variant-numeric: tabular-nums;
}

.hydration-metric-tile.highlight .tile-val {
    color: var(--bio-hydration);
}

.hydration-metric-tile .tile-sub {
    font-size: 0.72rem;
    color: var(--text-muted, #a8a096);
    margin-top: 0.15rem;
}

/* Circadian Breakdown */
.hydration-circadian-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.hydration-phase-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.75rem 0.6rem;
    text-align: center;
}

.hydration-phase-card .phase-time {
    font-size: 0.7rem;
    color: var(--gold-bright, #d3b06a);
    font-weight: 600;
    display: block;
    margin-bottom: 0.2rem;
}

.hydration-phase-card .phase-title {
    font-size: 0.78rem;
    color: var(--text-body, #d1cbbf);
    font-weight: 500;
    display: block;
}

.hydration-phase-card .phase-vol {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bio-hydration);
    margin-top: 0.35rem;
    display: block;
}

/* Daily Logger & Progress */
.hydration-progress-container {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.hydration-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.6rem;
}

.hydration-logged-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.hydration-logged-nums {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--bio-hydration);
    font-variant-numeric: tabular-nums;
}

.hydration-progress-track {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.hydration-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
    border-radius: 999px;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

.hydration-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.hydration-quick-btn {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 calc(33.333% - 0.5rem);
    min-width: 90px;
    background: rgba(56, 189, 248, 0.12);
    border: 1.5px solid rgba(56, 189, 248, 0.38);
    color: var(--text-light, #f1eee6);
    padding: 0.65rem 0.5rem;
    border-radius: 8px;
    font-size: 0.825rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
    line-height: 1.3;
}

.hydration-quick-btn:hover {
    background: rgba(56, 189, 248, 0.25);
    border-color: var(--bio-hydration);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(56, 189, 248, 0.2);
}

.hydration-quick-btn:active {
    transform: translateY(0);
}

.hydration-quick-btn.secondary {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-muted);
}

.hydration-quick-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-light);
    box-shadow: none;
}

/* Urine Armstrong Swatch Grid */
.urine-swatch-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.4rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.urine-swatch-card {
    border-radius: 6px;
    padding: 0.6rem 0.2rem;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s ease, border-color 0.2s ease;
    user-select: none;
}

.urine-swatch-card:hover {
    transform: scale(1.05);
}

.urine-swatch-card.active {
    border-color: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    transform: scale(1.08);
}

.urine-swatch-lvl {
    font-size: 0.75rem;
    font-weight: 700;
    color: #1a1a1a;
}

.urine-swatch-1 { background: #fdfae7; }
.urine-swatch-2 { background: #fbf3aa; }
.urine-swatch-3 { background: #f6e568; }
.urine-swatch-4 { background: #eab308; }
.urine-swatch-5 { background: #ca8a04; }
.urine-swatch-6 { background: #854d0e; }
.urine-swatch-6 .urine-swatch-lvl { color: #fdfae7; }

/* ==========================================================================
   HERRAMIENTA 5: GLUCÓLISIS, COMPLEJO PDH & CICLO DE KREBS (.gk-*)
   ========================================================================== */
.gk-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.gk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 900px) {
    .gk-grid {
        grid-template-columns: 1fr;
    }
}

.gk-card {
    background: var(--bio-card-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 1.25rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.gk-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gk-card-title h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-light, #f8fafc);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gk-card-title h4 i {
    color: var(--bio-glucolisis);
}

.gk-badge {
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--bio-glucolisis);
    font-weight: 600;
}

.gk-presets-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}

.gk-preset-btn {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gk-preset-btn:hover {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.4);
    color: #f8fafc;
}

.gk-preset-btn.active {
    background: rgba(245, 158, 11, 0.18);
    border-color: var(--bio-glucolisis);
    color: var(--bio-glucolisis);
    font-weight: 700;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.gk-param-group {
    margin-bottom: 1.15rem;
}

.gk-param-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.gk-param-label {
    font-size: 0.85rem;
    color: var(--text-light, #e2e8f0);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gk-param-val {
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bio-glucolisis);
}

.gk-canvas-wrapper {
    position: relative;
    width: 100%;
    border-radius: 10px;
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.8) 0%, rgba(5, 7, 10, 0.95) 100%);
    border: 1px solid rgba(245, 158, 11, 0.22);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    margin-bottom: 1rem;
}

.gk-canvas-wrapper canvas {
    display: block;
    width: 100%;
    height: 280px;
}

.gk-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    margin-bottom: 1.1rem;
}

@media (max-width: 600px) {
    .gk-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.gk-metric-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    padding: 0.65rem 0.5rem;
    text-align: center;
}

.gk-metric-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.gk-metric-value {
    font-size: 1.15rem;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    color: #f8fafc;
}

.gk-bars-container {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}

.gk-bar-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.gk-bar-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.gk-bar-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    overflow: hidden;
}

.gk-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.gk-transfer-btn {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(6, 182, 212, 0.25));
    border: 1px solid var(--bio-glucolisis);
    border-radius: 8px;
    padding: 0.85rem 1.25rem;
    color: #f8fafc;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
    transition: all 0.25s ease;
}

.gk-transfer-btn:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(6, 182, 212, 0.4));
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.35);
}

.gk-transfer-btn:active {
    transform: translateY(0);
}

.gk-insight-box {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #e2e8f0;
}

.gk-insight-box code {
    background: rgba(245, 158, 11, 0.15);
    color: var(--bio-glucolisis);
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-weight: 600;
}

/* ==========================================================================
   HERRAMIENTA 6: UMBRAL LÁCTICO & ZONAS METABÓLICAS (.lt-*)
   ========================================================================== */
.lt-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.lt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 900px) {
    .lt-grid {
        grid-template-columns: 1fr;
    }
}

.lt-card {
    background: var(--bio-card-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 1.25rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.lt-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lt-card-title h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-light, #f8fafc);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lt-card-title h4 i {
    color: var(--bio-lactato);
}

.lt-badge {
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--bio-lactato);
    font-weight: 600;
}

.lt-presets-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}

.lt-preset-btn {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lt-preset-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f8fafc;
}

.lt-preset-btn.active {
    background: rgba(239, 68, 68, 0.18);
    border-color: var(--bio-lactato);
    color: var(--bio-lactato);
    font-weight: 700;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.lt-canvas-wrapper {
    position: relative;
    width: 100%;
    border-radius: 10px;
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.85) 0%, rgba(5, 7, 10, 0.98) 100%);
    border: 1px solid rgba(239, 68, 68, 0.25);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    margin-bottom: 1rem;
    cursor: crosshair;
}

.lt-canvas-wrapper canvas {
    display: block;
    width: 100%;
    height: 300px;
}

.lt-zones-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}

@media (max-width: 768px) {
    .lt-zones-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lt-zone-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.65rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.lt-zone-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.lt-zone-card.active {
    border-color: var(--bio-lactato);
    background: rgba(239, 68, 68, 0.12);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.28);
    transform: scale(1.02);
}

.lt-zone-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    margin-bottom: 0.3rem;
}

.lt-zone-card[data-zone="1"] .lt-zone-badge { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.lt-zone-card[data-zone="2"] .lt-zone-badge { background: rgba(6, 182, 212, 0.2); color: #06b6d4; }
.lt-zone-card[data-zone="3"] .lt-zone-badge { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.lt-zone-card[data-zone="4"] .lt-zone-badge { background: rgba(249, 115, 22, 0.2); color: #f97316; }
.lt-zone-card[data-zone="5"] .lt-zone-badge { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

.lt-zone-title {
    font-size: 0.74rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lt-zone-range {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
}

.lt-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
    margin-bottom: 1.1rem;
}

@media (max-width: 650px) {
    .lt-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lt-metric-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    padding: 0.65rem 0.5rem;
    text-align: center;
}

.lt-metric-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.lt-metric-value {
    font-size: 1.15rem;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    color: #f8fafc;
}

.lt-insight-box {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #e2e8f0;
}

.lt-insight-box code {
    background: rgba(239, 68, 68, 0.15);
    color: var(--bio-lactato);
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-weight: 600;
}

/* ==========================================================================
   CALCULADOR DINÁMICO DE OSMOLARIDAD PLASMÁTICA (.hydration-osm-*)
   ========================================================================== */
.hydration-osm-card {
    background: rgba(56, 189, 248, 0.04);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.hydration-osm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.hydration-osm-badge {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    border: 1px solid currentColor;
    background: rgba(56, 189, 248, 0.08);
}

.hydration-osm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

@media (max-width: 600px) {
    .hydration-osm-grid {
        grid-template-columns: 1fr;
    }
}

.hydration-osm-param {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hydration-osm-param-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.76rem;
    color: var(--text-light);
}

.hydration-osm-result-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.65rem;
}

.hydration-osm-val {
    font-family: var(--font-mono, monospace);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bio-hydration);
}

.hydration-osm-presets {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.hydration-osm-preset-btn {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hydration-osm-preset-btn:hover {
    background: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.3);
    color: #f8fafc;
}

/* ══════════════════════════════════════════════════════════════════════════
   HERRAMIENTA FOTOBIOLOGÍA CIRCADIANO & VENTANAS LUMÍNICAS (PUNTO NADIR cBT)
   ══════════════════════════════════════════════════════════════════════════ */
.photobio-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
}

.photobio-api-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.photobio-api-badge.connected {
    color: #8fa691;
}

.photobio-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8fa691;
    display: inline-block;
    box-shadow: 0 0 8px rgba(143, 166, 145, 0.6);
    animation: photobioPulse 2s infinite ease-in-out;
}

@keyframes photobioPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

.photobio-api-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.photobio-sync-btn {
    appearance: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.photobio-sync-btn:hover {
    background: rgba(255, 209, 102, 0.12);
    border-color: rgba(255, 209, 102, 0.4);
    color: #ffd166;
}

.photobio-status-banner {
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.06), rgba(155, 142, 196, 0.06));
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.photobio-status-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-light);
}

.photobio-countdown {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gold-bright);
    background: rgba(0, 0, 0, 0.25);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.photobio-canvas-container {
    position: relative;
    width: 100%;
    background: #0d131a;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--bio-card-border);
    margin-bottom: 1.25rem;
}

.photobio-canvas-legend {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.6rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.photobio-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.photobio-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.photobio-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 1.1rem;
    margin-bottom: 0.85rem;
    transition: all 0.2s ease;
}

.photobio-card:hover {
    border-color: rgba(255, 209, 102, 0.25);
}

.photobio-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.photobio-val-hero {
    font-size: 1.8rem;
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.photobio-card-desc {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-body);
}

.photobio-warning-box {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #ffd166;
    background: rgba(255, 209, 102, 0.08);
    border-left: 3px solid #ffd166;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
}

.photobio-timer-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.85rem;
}

.photobio-timer-display {
    font-size: 2.5rem;
    font-family: monospace;
    font-weight: 700;
    color: #ffd166;
    letter-spacing: 2px;
}

.photobio-progress-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.photobio-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd166, #8fa691);
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
}

.photobio-timer-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.photobio-presets {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.photobio-preset-btn {
    appearance: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.photobio-preset-btn:hover,
.photobio-preset-btn.active {
    background: rgba(255, 209, 102, 0.12);
    border-color: rgba(255, 209, 102, 0.4);
    color: #f8fafc;
}

.photobio-weather-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.photobio-weather-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.photobio-weather-label:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-light);
}

.photobio-weather-label input[type="radio"] {
    accent-color: #ffd166;
}

/* ==========================================================================
   HERRAMIENTA: NUTRICIÓN & PIRÁMIDE MEDITERRÁNEA (BACH-FAIG ET AL., 2011)
   ========================================================================== */

.nutri-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bio-card-border);
    padding-bottom: 0.75rem;
}

.nutri-subnav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--bio-card-border);
    color: var(--text-muted, #a8a096);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: var(--font-body, system-ui);
}

.nutri-subnav-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-light, #f1eee6);
    border-color: #10b981;
}

.nutri-subnav-btn.active {
    background: var(--bio-inner-bg);
    border-color: #10b981;
    color: #34d399;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15);
}

.nutri-subnav-btn i {
    font-size: 0.95rem;
}

.nutri-view {
    display: none;
    animation: nutriFadeIn 0.3s ease forwards;
}

.nutri-view.active {
    display: block;
}

@keyframes nutriFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tier Selector Grid */
.nutri-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.nutri-tier-btn {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nutri-tier-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--gold-bright, #d3b06a);
    transform: translateY(-2px);
}

.nutri-tier-btn.active {
    border-color: var(--gold-bright, #d3b06a);
    box-shadow: 0 0 0 2px rgba(212, 165, 57, 0.3);
    background: rgba(212, 165, 57, 0.08);
}

.nutri-tier-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nutri-tier-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-light, #f1eee6);
}

.nutri-tier-sub {
    font-size: 0.78rem;
    color: var(--text-muted, #a8a096);
    line-height: 1.35;
}

/* Plate Builder Controls */
.nutri-plate-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 900px) {
    .nutri-plate-grid {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

.nutri-plate-option-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-light, #f1eee6);
    transition: all 0.2s ease;
}

.nutri-plate-option-card:hover {
    background: rgba(255, 255, 255, 0.06);
}

.nutri-plate-option-card input[type="radio"],
.nutri-plate-option-card input[type="checkbox"] {
    accent-color: #10b981;
}

/* Filter buttons for portions */
.nutri-portions-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.nutri-portions-filter-btn {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--bio-card-border);
    color: var(--text-muted, #a8a096);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nutri-portions-filter-btn:hover {
    color: var(--text-light, #f1eee6);
    background: rgba(255, 255, 255, 0.08);
}

.nutri-portions-filter-btn.active {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: #10b981;
}

/* Portions Table Wrapper */
.nutri-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    background: var(--bio-inner-bg);
}

.nutri-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    text-align: left;
}

.nutri-table th {
    background: rgba(255, 255, 255, 0.03);
    padding: 0.85rem 1rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gold-bright, #d3b06a);
    border-bottom: 1px solid var(--bio-card-border);
    font-weight: 700;
}

.nutri-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.nutri-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Light Theme Adjustments */
[data-theme='light'] .nutri-subnav-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: #4b5563;
}

[data-theme='light'] .nutri-subnav-btn.active {
    background: #ffffff;
    border-color: #10b981;
    color: #059669;
}

[data-theme='light'] .nutri-tier-btn {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme='light'] .nutri-tier-name {
    color: #1e293b;
}

[data-theme='light'] .nutri-table-wrapper {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme='light'] .nutri-table th {
    background: #f8fafc;
    color: #92400e;
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme='light'] .nutri-table td {
    border-bottom-color: rgba(0, 0, 0, 0.06);
    color: #334155;
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL CIRCADIAN & SOMATIC ALARM SYSTEM STYLES
   ══════════════════════════════════════════════════════════════════════════ */

.newendo-alarm-dock-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 34px;
    padding: 0.4rem 0.85rem;
    background: rgba(211, 176, 106, 0.08);
    border: 1px solid rgba(211, 176, 106, 0.28);
    border-radius: 999px;
    color: var(--gold-bright, #d3b06a);
    font-family: var(--font-accent, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    box-sizing: border-box;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
    text-decoration: none;
}

.newendo-alarm-dock-trigger:hover {
    background: rgba(211, 176, 106, 0.2);
    border-color: var(--gold-bright, #d3b06a);
    color: #fff;
    box-shadow: 0 0 16px rgba(211, 176, 106, 0.25);
    transform: translateY(-1px);
}

.newendo-alarm-dock-trigger.floating-corner {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 999;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
    background: rgba(18, 16, 14, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.alarm-dock-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-bright, #d4a539);
}

.alarm-dock-pulse {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    display: none;
    animation: alarmDockBlink 2s infinite ease-in-out;
}

@keyframes alarmDockBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.alarm-dock-next-label {
    white-space: nowrap;
}

/* Modal Overlay & Card */
.newendo-alarm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(8, 7, 6, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    animation: alarmFadeIn 0.25s ease-out;
}

@keyframes alarmFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.newendo-alarm-card {
    background: #181512;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.newendo-alarm-card.manager-card {
    max-width: 680px;
    max-height: 85vh;
}

.animate-pop {
    animation: alarmPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes alarmPopIn {
    from { opacity: 0; transform: scale(0.94) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.alarm-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.alarm-category-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.alarm-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted, #a8a096);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.alarm-close-btn:hover {
    color: #fff;
}

.alarm-card-body {
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.alarm-ringing-bell {
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

.ringing-animation {
    animation: bellRing 1.4s infinite ease-in-out;
    transform-origin: 50% 0%;
}

@keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(18deg); }
    30% { transform: rotate(-16deg); }
    45% { transform: rotate(12deg); }
    60% { transform: rotate(-8deg); }
    75% { transform: rotate(4deg); }
}

.alarm-title {
    font-size: 1.35rem;
    color: var(--text-light, #f1eee6);
    margin: 0 0 0.6rem 0;
    line-height: 1.3;
}

.alarm-message {
    font-size: 0.95rem;
    color: var(--text-muted, #a8a096);
    line-height: 1.6;
    margin: 0;
}

.alarm-card-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1.1rem 1.4rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.alarm-action-btn {
    flex: 1;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.18s ease;
    font-family: inherit;
}

.alarm-action-btn.primary {
    background: var(--gold-bright, #d4a539);
    color: #12100e;
}

.alarm-action-btn.primary:hover {
    background: #e2b449;
    transform: translateY(-1px);
}

.alarm-action-btn.secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-light, #f1eee6);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.alarm-action-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* Manager modal internal styles */
.alarm-settings-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding: 0.9rem 1.4rem;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.85rem;
}

.alarm-toggle-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted, #a8a096);
    cursor: pointer;
}

.alarm-toggle-item input {
    cursor: pointer;
    accent-color: var(--gold-bright, #d4a539);
}

.btn-notif-perm {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: var(--text-muted, #a8a096);
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.btn-notif-perm.active {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}

.alarm-providers-badge-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
}

.provider-pill {
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted, #a8a096);
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.provider-pill.active {
    background: rgba(212, 165, 57, 0.1);
    color: var(--gold-bright, #d4a539);
    border-color: rgba(212, 165, 57, 0.3);
}

.alarm-queue-container {
    padding: 1.25rem 1.4rem;
    overflow-y: auto;
    flex: 1;
}

.alarm-queue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
    font-size: 0.88rem;
    color: var(--text-light, #f1eee6);
}

.btn-resync-alarms {
    background: transparent;
    border: none;
    color: var(--gold-bright, #d4a539);
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-resync-alarms:hover {
    text-decoration: underline;
}

.alarm-queue-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.alarm-queue-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    transition: background 0.15s ease;
}

.alarm-queue-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.alarm-item-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.alarm-item-time strong {
    font-size: 1.15rem;
    line-height: 1;
}

.alarm-item-time small {
    font-size: 0.72rem;
    margin-top: 0.25rem;
    opacity: 0.85;
}

.alarm-item-info {
    flex: 1;
}

.alarm-item-info h4 {
    margin: 0 0 0.2rem 0;
    font-size: 0.95rem;
    color: var(--text-light, #f1eee6);
}

.alarm-item-info p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted, #a8a096);
    line-height: 1.4;
}

.alarm-item-actions {
    display: flex;
    gap: 0.4rem;
}

.alarm-mini-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted, #a8a096);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.alarm-mini-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.alarm-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted, #a8a096);
}

.alarm-empty-state i {
    font-size: 2.2rem;
    color: var(--gold-bright, #d4a539);
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

.alarm-test-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.1);
}

/* Light Theme overrides for Alarm Modal */
[data-theme='light'] .newendo-alarm-dock-trigger {
    background: rgba(180, 130, 20, 0.08);
    border-color: rgba(180, 130, 20, 0.25);
    color: #2b2621;
}

[data-theme='light'] .newendo-alarm-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

[data-theme='light'] .alarm-card-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme='light'] .alarm-title {
    color: #1e1b18;
}

[data-theme='light'] .alarm-message {
    color: #615951;
}

[data-theme='light'] .alarm-card-footer {
    background: #f9f8f6;
    border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme='light'] .alarm-action-btn.secondary {
    background: #f3f1ed;
    color: #2b2621;
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme='light'] .alarm-settings-bar {
    background: #f9f8f6;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme='light'] .alarm-queue-item {
    background: #fcfbf9;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme='light'] .alarm-item-info h4 {
    color: #1e1b18;
}

[data-theme='light'] .alarm-item-info p {
    color: #615951;
}

/* ==========================================================================
   NEWENDO — TESTOSTERONA & SOMATOTROPINA (GH) TOOL STYLES
   ========================================================================== */
:root {
    --bio-testo-amber: #e5a93b;
    --bio-testo-amber-glow: rgba(229, 169, 59, 0.22);
    --bio-testo-green: #95de64;
    --bio-testo-red: #f56565;
}

.testo-presets-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.8rem;
    padding: 0.75rem 1rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    align-items: center;
}

.testo-presets-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.testo-preset-btn {
    padding: 0.45rem 0.9rem;
    background: transparent;
    border: 1px solid rgba(229, 169, 59, 0.25);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.testo-preset-btn:hover {
    background: rgba(229, 169, 59, 0.12);
    color: var(--gold-bright, #d3b06a);
    border-color: rgba(229, 169, 59, 0.45);
    transform: translateY(-1px);
}

.testo-preset-btn.active {
    background: linear-gradient(135deg, rgba(229, 169, 59, 0.25) 0%, rgba(229, 169, 59, 0.1) 100%);
    color: #f7eed8;
    border-color: var(--bio-testo-amber);
    box-shadow: 0 0 12px var(--bio-testo-amber-glow);
}

/* ── Telemetry Hero & Gauge ── */
.testo-telemetry-hero {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    background: var(--bio-card-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 16px;
    padding: 1.6rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 860px) {
    .testo-telemetry-hero {
        grid-template-columns: 1fr;
    }
}

.testo-gauge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    text-align: center;
}

.testo-gauge-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 0.85rem;
}

.testo-gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.testo-gauge-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 8;
}

.testo-gauge-circle {
    fill: none;
    stroke: var(--bio-testo-amber);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 282.7;
    stroke-dashoffset: 70;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease;
}

.testo-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.testo-gauge-score {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-light, #f1eee6);
    font-family: var(--font-heading, serif);
}

.testo-gauge-unit {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 2px;
}

.testo-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
    border: 1px solid rgba(229, 169, 59, 0.3);
    background: rgba(229, 169, 59, 0.12);
    color: var(--bio-testo-amber);
}

.testo-status-text {
    font-size: 0.88rem;
    color: var(--text-light, #f1eee6);
    font-weight: 500;
}

/* ── Metrics Grid ── */
.testo-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}

@media (max-width: 520px) {
    .testo-metrics-grid {
        grid-template-columns: 1fr;
    }
}

.testo-metric-box {
    padding: 1rem 1.1rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testo-metric-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.testo-metric-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}

.testo-metric-icon {
    color: var(--bio-testo-amber);
    font-size: 0.9rem;
}

.testo-metric-val {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-light, #f1eee6);
    font-family: var(--font-heading, serif);
}

.testo-metric-unit {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 0.25rem;
    font-family: var(--font-body, system-ui);
}

.testo-metric-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
    line-height: 1.4;
}

/* ── Bottleneck Diagnostic Card ── */
.testo-bottle-card {
    margin-top: 0.95rem;
    padding: 0.95rem 1.1rem;
    border-radius: 12px;
    background: rgba(229, 169, 59, 0.08);
    border: 1px solid rgba(229, 169, 59, 0.28);
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.testo-bottle-card.is-optimal {
    background: rgba(149, 222, 100, 0.08);
    border-color: rgba(149, 222, 100, 0.28);
}

.testo-bottle-card.is-cortisol {
    background: rgba(245, 101, 101, 0.1);
    border-color: rgba(245, 101, 101, 0.35);
}

.testo-bottle-icon {
    font-size: 1.25rem;
    margin-top: 0.15rem;
    color: var(--bio-testo-amber);
    flex-shrink: 0;
}

.testo-bottle-card.is-optimal .testo-bottle-icon {
    color: #95de64;
}

.testo-bottle-card.is-cortisol .testo-bottle-icon {
    color: #f56565;
}

.testo-bottle-content h5 {
    font-size: 0.88rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--text-light, #f1eee6);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.testo-bottle-badge {
    font-size: 0.68rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.testo-bottle-content p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
}

/* ── 3 Pillars Grid ── */
.testo-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2.2rem 0 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--bio-card-border);
}

.testo-section-heading h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-light, #f1eee6);
    font-family: var(--font-heading, serif);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.testo-section-heading h4 i {
    color: var(--bio-testo-amber);
}

.testo-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

@media (max-width: 980px) {
    .testo-pillars-grid {
        grid-template-columns: 1fr;
    }
}

.testo-pillar-card {
    background: var(--bio-card-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.testo-pillar-card:hover {
    border-color: rgba(229, 169, 59, 0.35);
    transform: translateY(-2px);
}

.testo-pillar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.testo-pillar-title-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.testo-pillar-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(229, 169, 59, 0.12);
    border: 1px solid rgba(229, 169, 59, 0.25);
    color: var(--bio-testo-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.testo-pillar-card h5 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-light, #f1eee6);
}

.testo-pillar-card p.testo-pillar-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0.2rem 0 0.85rem;
    line-height: 1.45;
}

.testo-progress-bar-bg {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 1.1rem;
}

.testo-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #e5a93b 0%, #95de64 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* ── Checklist Items ── */
.testo-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.1rem;
}

.testo-check-label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-light, #f1eee6);
    line-height: 1.4;
    user-select: none;
}

.testo-check-label input[type="checkbox"] {
    margin-top: 0.2rem;
    accent-color: var(--bio-testo-amber);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.testo-check-label small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.testo-warning-callout {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: rgba(245, 101, 101, 0.1);
    border: 1px solid rgba(245, 101, 101, 0.25);
    color: #fca5a5;
    font-size: 0.74rem;
    line-height: 1.35;
    margin-top: 0.6rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.testo-warning-callout i {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ── Interactive Sliders & Radio Groups ── */
.testo-control-group {
    margin-bottom: 1rem;
}

.testo-control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.testo-control-header label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-light, #f1eee6);
}

.testo-control-val {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bio-testo-amber);
}

.testo-slider {
    width: 100%;
    accent-color: var(--bio-testo-amber);
    cursor: pointer;
    margin-bottom: 0.2rem;
}

.testo-radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.testo-radio-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.65rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--text-light, #f1eee6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.testo-radio-label:hover {
    border-color: rgba(229, 169, 59, 0.35);
}

.testo-radio-label input[type="radio"] {
    accent-color: var(--bio-testo-amber);
}

/* ── Inter-Tool Action Link ── */
.testo-tool-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.55rem 0.85rem;
    background: rgba(229, 169, 59, 0.08);
    border: 1px solid rgba(229, 169, 59, 0.25);
    border-radius: 8px;
    color: var(--gold-bright, #d3b06a);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.85rem;
}

.testo-tool-link-btn:hover {
    background: rgba(229, 169, 59, 0.18);
    color: #f7eed8;
    border-color: var(--bio-testo-amber);
    transform: translateY(-1px);
}

/* ── Obstacles & Allies Bento Grid ── */
.testo-secondary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

@media (max-width: 860px) {
    .testo-secondary-grid {
        grid-template-columns: 1fr;
    }
}

.testo-secondary-card {
    background: var(--bio-card-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.3rem;
}

/* ── Ecosystem Hub Grid ── */
.testo-ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.95rem;
    margin-top: 1.2rem;
}

.testo-eco-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.testo-eco-item:hover {
    border-color: rgba(229, 169, 59, 0.45);
    transform: translateY(-2px);
    background: rgba(229, 169, 59, 0.05);
}

.testo-eco-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.testo-eco-top i {
    color: var(--bio-testo-amber);
    font-size: 1rem;
}

.testo-eco-top h6 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-light, #f1eee6);
}

.testo-eco-item p {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}

.testo-eco-action {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--bio-testo-amber);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Light Mode Overrides */
[data-theme='light'] .testo-telemetry-hero,
[data-theme='light'] .testo-pillar-card,
[data-theme='light'] .testo-secondary-card {
    background: var(--bio-card-bg);
    border-color: var(--bio-card-border);
}

[data-theme='light'] .testo-gauge-bg {
    stroke: rgba(0, 0, 0, 0.08);
}

[data-theme='light'] .testo-gauge-score {
    color: #1e1b18;
}

[data-theme='light'] .testo-status-text {
    color: #1e1b18;
}

[data-theme='light'] .testo-metric-val {
    color: #1e1b18;
}

[data-theme='light'] .testo-pillar-card h5,
[data-theme='light'] .testo-section-heading h4,
[data-theme='light'] .testo-eco-top h6 {
    color: #1e1b18;
}

[data-theme='light'] .testo-check-label {
    color: #2b2621;
}

[data-theme='light'] .testo-radio-label {
    background: #f7f6f2;
    color: #2b2621;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERRAMIENTA: FLEXIBILIDAD METABÓLICA, β-OXIDACIÓN & CICLO DE RANDLE
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --bio-randle-teal: #4ecdc4;
    --bio-randle-amber: #ff6b6b;
    --bio-randle-gold: #d4a539;
    --bio-randle-blue: #38bdf8;
}

/* Presets Bar */
.randle-presets-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.75rem 1.1rem;
    margin-bottom: 1.5rem;
}

.randle-presets-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.randle-preset-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.randle-preset-btn:hover {
    background: rgba(78, 205, 196, 0.1);
    border-color: rgba(78, 205, 196, 0.35);
    color: var(--bio-randle-teal);
    transform: translateY(-1px);
}

.randle-preset-btn.active {
    background: rgba(78, 205, 196, 0.18);
    border-color: var(--bio-randle-teal);
    color: #fff;
    box-shadow: 0 0 14px rgba(78, 205, 196, 0.25);
}

/* Telemetry Hero */
.randle-telemetry-hero {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    background: linear-gradient(145deg, rgba(78, 205, 196, 0.04), rgba(212, 165, 57, 0.03));
    border: 1px solid var(--bio-card-border);
    border-radius: 16px;
    padding: 1.6rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.randle-telemetry-hero::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(78, 205, 196, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.randle-gauge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.5rem 1rem;
}

.randle-gauge-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    margin-bottom: 0.8rem;
}

.randle-gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.randle-gauge-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 8;
}

.randle-gauge-circle {
    fill: none;
    stroke: var(--bio-randle-teal);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease, stroke 0.4s ease;
}

.randle-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.randle-gauge-score {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-light);
    line-height: 1;
    font-family: var(--font-mono, monospace);
    letter-spacing: -0.02em;
}

.randle-gauge-unit {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.25rem;
}

.randle-status-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(78, 205, 196, 0.15);
    color: var(--bio-randle-teal);
    border: 1px solid rgba(78, 205, 196, 0.4);
    margin-bottom: 0.4rem;
}

.randle-status-text {
    font-size: 0.82rem;
    color: var(--text-light);
    font-weight: 600;
}

/* Metrics Container */
.randle-metrics-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Substrate Partition Dual Bar */
.randle-substrate-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
}

.randle-substrate-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.55rem;
    font-size: 0.82rem;
}

.randle-sub-label.fat {
    color: var(--bio-randle-teal);
    font-weight: 700;
}

.randle-sub-label.carb {
    color: var(--bio-randle-amber);
    font-weight: 700;
}

.randle-sub-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.randle-dual-bar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.randle-bar-fat {
    background: linear-gradient(90deg, #38bdf8, var(--bio-randle-teal));
    transition: width 0.4s ease;
}

.randle-bar-carb {
    background: linear-gradient(90deg, var(--gold-primary), var(--bio-randle-amber));
    transition: width 0.4s ease;
}

/* Metrics Grid */
.randle-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}

.randle-metric-box {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.randle-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.randle-metric-title {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.randle-metric-icon {
    font-size: 0.82rem;
    color: var(--bio-randle-teal);
    opacity: 0.8;
}

.randle-metric-val {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-light);
    font-family: var(--font-mono, monospace);
    line-height: 1.2;
}

.randle-metric-unit {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.randle-metric-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
    line-height: 1.3;
}

/* Bottleneck Card */
.randle-bottle-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.95rem 1.2rem;
    transition: all 0.3s ease;
}

.randle-bottle-card.is-optimal {
    border-color: rgba(78, 205, 196, 0.4);
    background: rgba(78, 205, 196, 0.07);
}

.randle-bottle-card.is-optimal .randle-bottle-icon {
    color: var(--bio-randle-teal);
}

.randle-bottle-card.is-lactate-blocked {
    border-color: rgba(255, 107, 107, 0.45);
    background: rgba(255, 107, 107, 0.08);
}

.randle-bottle-card.is-lactate-blocked .randle-bottle-icon {
    color: var(--bio-randle-amber);
}

.randle-bottle-card.is-malonyl-blocked {
    border-color: rgba(212, 165, 57, 0.45);
    background: rgba(212, 165, 57, 0.08);
}

.randle-bottle-card.is-malonyl-blocked .randle-bottle-icon {
    color: var(--gold-primary);
}

.randle-bottle-card.is-carnitine-low,
.randle-bottle-card.is-cofactor-low {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.08);
}

.randle-bottle-card.is-carnitine-low .randle-bottle-icon,
.randle-bottle-card.is-cofactor-low .randle-bottle-icon {
    color: var(--bio-randle-blue);
}

.randle-bottle-icon {
    font-size: 1.4rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.randle-bottle-content {
    flex: 1;
}

.randle-bottle-content h5 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.randle-bottle-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--bio-card-border);
    color: var(--text-light);
}

.randle-bottle-content p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
}

/* Section Headings */
.randle-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bio-card-border);
}

.randle-section-heading h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Pillars Grid */
.randle-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.8rem;
}

.randle-pillar-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.2rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.randle-pillar-card:hover {
    border-color: rgba(78, 205, 196, 0.35);
    transform: translateY(-2px);
}

.randle-pillar-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.6rem;
}

.randle-pillar-title-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.randle-pillar-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(78, 205, 196, 0.12);
    border: 1px solid rgba(78, 205, 196, 0.3);
    color: var(--bio-randle-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.randle-pillar-header h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0;
    line-height: 1.25;
}

.randle-pillar-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 1rem;
}

/* Controls inside Pillars */
.randle-control-group {
    margin-bottom: 1rem;
}

.randle-control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}

.randle-control-header label {
    font-weight: 600;
    color: var(--text-light);
}

.randle-control-val {
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    color: var(--bio-randle-teal);
}

.randle-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    -webkit-appearance: none;
    accent-color: var(--bio-randle-teal);
    cursor: pointer;
}

/* Radio Groups */
.randle-radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
}

.randle-radio-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.randle-radio-label:hover {
    background: rgba(78, 205, 196, 0.08);
    border-color: rgba(78, 205, 196, 0.3);
}

.randle-radio-label input[type="radio"] {
    accent-color: var(--bio-randle-teal);
    cursor: pointer;
}

.randle-radio-label input[type="radio"]:checked + span {
    color: var(--bio-randle-teal);
    font-weight: 700;
}

/* Warning Callout */
.randle-warning-callout {
    display: none;
    align-items: flex-start;
    gap: 0.6rem;
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.35);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin-top: 0.75rem;
    font-size: 0.76rem;
    color: #ff9b9b;
    line-height: 1.4;
}

.randle-warning-callout i {
    color: var(--bio-randle-amber);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* Checklists */
.randle-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.randle-check-label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.78rem;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.randle-check-label:hover {
    background: rgba(78, 205, 196, 0.08);
    border-color: rgba(78, 205, 196, 0.3);
}

.randle-check-label input[type="checkbox"] {
    accent-color: var(--bio-randle-teal);
    margin-top: 0.2rem;
    cursor: pointer;
    flex-shrink: 0;
}

.randle-check-label strong {
    display: block;
    font-size: 0.8rem;
    line-height: 1.25;
}

.randle-check-label small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 0.15rem;
}

/* Tool Link Buttons */
.randle-tool-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed var(--bio-card-border);
    border-radius: 8px;
    padding: 0.55rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bio-randle-teal);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto;
}

.randle-tool-link-btn:hover {
    background: rgba(78, 205, 196, 0.12);
    border-color: var(--bio-randle-teal);
    color: #fff;
    transform: translateY(-1px);
}

/* Cycle Diagram & Lynen Stages */
.randle-cycle-diagram-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.randle-cycle-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.randle-step-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 1rem;
    position: relative;
    transition: all 0.3s ease;
}

.randle-step-box.is-disabled {
    opacity: 0.38;
    border-style: dashed;
}

.randle-step-num {
    position: absolute;
    top: -10px;
    left: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bio-randle-teal);
    color: #0b131b;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.randle-step-box h6 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0.35rem 0 0.4rem 0;
}

.randle-step-box p {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0 0 0.6rem 0;
}

.randle-step-yield {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bio-randle-teal);
    background: rgba(78, 205, 196, 0.12);
    border-radius: 6px;
    padding: 0.2rem 0.45rem;
}

.randle-cross-explanation {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(212, 165, 57, 0.08);
    border: 1px solid rgba(212, 165, 57, 0.3);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.randle-cross-icon {
    font-size: 1.4rem;
    color: var(--gold-primary);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.randle-cross-text h6 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gold-primary);
    margin: 0 0 0.3rem 0;
}

.randle-cross-text p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0;
}

/* Light Mode Overrides for Randle */
[data-theme='light'] .randle-telemetry-hero,
[data-theme='light'] .randle-pillar-card,
[data-theme='light'] .randle-cycle-diagram-card {
    background: var(--bio-card-bg);
    border-color: var(--bio-card-border);
}

[data-theme='light'] .randle-gauge-bg {
    stroke: rgba(0, 0, 0, 0.08);
}

[data-theme='light'] .randle-gauge-score,
[data-theme='light'] .randle-metric-val,
[data-theme='light'] .randle-status-text {
    color: #1e1b18;
}

[data-theme='light'] .randle-pillar-card h5,
[data-theme='light'] .randle-step-box h6,
[data-theme='light'] .randle-section-heading h4 {
    color: #1e1b18;
}

[data-theme='light'] .randle-check-label {
    color: #2b2621;
}

[data-theme='light'] .randle-radio-label {
    background: #f7f6f2;
    color: #2b2621;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .randle-telemetry-hero {
        grid-template-columns: 1fr;
    }
    .randle-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .randle-pillars-grid {
        grid-template-columns: 1fr;
    }
    .randle-cycle-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .randle-metrics-grid {
        grid-template-columns: 1fr;
    }
    .randle-cycle-steps-grid {
        grid-template-columns: 1fr;
    }
    .randle-presets-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .randle-radio-group {
        grid-template-columns: 1fr;
    }
    .randle-radio-label[style*="grid-column: span 2;"] {
        grid-column: span 1 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERRAMIENTA: TERMOGÉNESIS ADAPTATIVA, UCP-1 & BIOGÉNESIS (PGC-1α)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --bio-termo-cyan: #38bdf8;
    --bio-termo-orange: #fb923c;
    --bio-termo-purple: #c084fc;
    --bio-termo-fire: #f43f5e;
}

/* Presets Bar */
.termo-presets-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.75rem 1.1rem;
    margin-bottom: 1.5rem;
}

.termo-presets-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.termo-preset-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.termo-preset-btn:hover {
    background: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.35);
    color: var(--bio-termo-cyan);
    transform: translateY(-1px);
}

.termo-preset-btn.active {
    background: rgba(56, 189, 248, 0.18);
    border-color: var(--bio-termo-cyan);
    color: #fff;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.25);
}

/* Telemetry Hero */
.termo-telemetry-hero {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.04), rgba(251, 146, 60, 0.03));
    border: 1px solid var(--bio-card-border);
    border-radius: 16px;
    padding: 1.6rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.termo-telemetry-hero::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.termo-gauge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.5rem 1rem;
}

.termo-gauge-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    margin-bottom: 0.8rem;
}

.termo-gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.termo-gauge-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 8;
}

.termo-gauge-circle {
    fill: none;
    stroke: var(--bio-termo-cyan);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease, stroke 0.4s ease;
}

.termo-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.termo-gauge-score {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-light);
    line-height: 1;
    font-family: var(--font-mono, monospace);
    letter-spacing: -0.02em;
}

.termo-gauge-unit {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.25rem;
}

.termo-status-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(56, 189, 248, 0.15);
    color: var(--bio-termo-cyan);
    border: 1px solid rgba(56, 189, 248, 0.4);
    margin-bottom: 0.4rem;
}

.termo-status-text {
    font-size: 0.82rem;
    color: var(--text-light);
    font-weight: 600;
}

/* Metrics Container */
.termo-metrics-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Dual Pathway Bar */
.termo-dual-pathway-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
}

.termo-pathway-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.55rem;
    font-size: 0.82rem;
}

.termo-path-label.atp {
    color: var(--gold-primary);
    font-weight: 700;
}

.termo-path-label.heat {
    color: var(--bio-termo-orange);
    font-weight: 700;
}

.termo-path-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.termo-dual-bar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.termo-bar-atp {
    background: linear-gradient(90deg, #d4a539, #f59e0b);
    transition: width 0.4s ease;
}

.termo-bar-heat {
    background: linear-gradient(90deg, #fb923c, #f43f5e);
    transition: width 0.4s ease;
}

/* Metrics Grid */
.termo-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}

.termo-metric-box {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.termo-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.termo-metric-title {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.termo-metric-icon {
    font-size: 0.82rem;
    color: var(--bio-termo-cyan);
    opacity: 0.85;
}

.termo-metric-val {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-light);
    font-family: var(--font-mono, monospace);
    line-height: 1.2;
}

.termo-metric-unit {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.termo-metric-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
    line-height: 1.3;
}

/* Diagnostic Card */
.termo-diag-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.95rem 1.2rem;
    transition: all 0.3s ease;
}

.termo-diag-card.is-optimal {
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(56, 189, 248, 0.07);
}

.termo-diag-card.is-optimal .termo-diag-icon {
    color: var(--bio-termo-cyan);
}

.termo-diag-card.is-soberg-gold {
    border-color: rgba(212, 165, 57, 0.45);
    background: rgba(212, 165, 57, 0.08);
}

.termo-diag-card.is-soberg-gold .termo-diag-icon {
    color: var(--gold-primary);
}

.termo-diag-card.is-shivering {
    border-color: rgba(251, 146, 60, 0.45);
    background: rgba(251, 146, 60, 0.08);
}

.termo-diag-card.is-shivering .termo-diag-icon {
    color: var(--bio-termo-orange);
}

.termo-diag-card.is-quiescent {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
}

.termo-diag-card.is-quiescent .termo-diag-icon {
    color: var(--text-muted);
}

.termo-diag-card.is-cofactor-brake {
    border-color: rgba(244, 63, 94, 0.45);
    background: rgba(244, 63, 94, 0.08);
}

.termo-diag-card.is-cofactor-brake .termo-diag-icon {
    color: var(--bio-termo-fire);
}

.termo-diag-icon {
    font-size: 1.4rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.termo-diag-content {
    flex: 1;
}

.termo-diag-content h5 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.termo-diag-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--bio-card-border);
    color: var(--text-light);
}

.termo-diag-content p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
}

/* Section Headings */
.termo-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bio-card-border);
}

.termo-section-heading h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Pillars Grid */
.termo-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.8rem;
}

.termo-pillar-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.2rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.termo-pillar-card:hover {
    border-color: rgba(56, 189, 248, 0.35);
    transform: translateY(-2px);
}

.termo-pillar-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.6rem;
}

.termo-pillar-title-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.termo-pillar-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: var(--bio-termo-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.termo-pillar-icon.heat {
    background: rgba(251, 146, 60, 0.12);
    border-color: rgba(251, 146, 60, 0.3);
    color: var(--bio-termo-orange);
}

.termo-pillar-icon.biogenesis {
    background: rgba(192, 132, 252, 0.12);
    border-color: rgba(192, 132, 252, 0.3);
    color: var(--bio-termo-purple);
}

.termo-pillar-header h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0;
    line-height: 1.25;
}

.termo-pillar-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 1rem;
}

/* Controls inside Pillars */
.termo-control-group {
    margin-bottom: 1rem;
}

.termo-control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}

.termo-control-header label {
    font-weight: 600;
    color: var(--text-light);
}

.termo-control-val {
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    color: var(--bio-termo-cyan);
}

.termo-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    -webkit-appearance: none;
    accent-color: var(--bio-termo-cyan);
    cursor: pointer;
}

.termo-slider.heat {
    accent-color: var(--bio-termo-orange);
}

.termo-slider.biogenesis {
    accent-color: var(--bio-termo-purple);
}

/* Checklists */
.termo-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.termo-check-label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.78rem;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.termo-check-label:hover {
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.3);
}

.termo-check-label input[type="checkbox"] {
    accent-color: var(--bio-termo-cyan);
    margin-top: 0.2rem;
    cursor: pointer;
    flex-shrink: 0;
}

.termo-check-label strong {
    display: block;
    font-size: 0.8rem;
    line-height: 1.25;
}

.termo-check-label small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 0.15rem;
}

/* Tool Link Buttons */
.termo-tool-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed var(--bio-card-border);
    border-radius: 8px;
    padding: 0.55rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bio-termo-cyan);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto;
}

.termo-tool-link-btn:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: var(--bio-termo-cyan);
    color: #fff;
    transform: translateY(-1px);
}

/* Cascada Molecular Card */
.termo-cascade-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.termo-cascade-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.termo-step-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 1rem;
    position: relative;
    transition: all 0.3s ease;
}

.termo-step-box.is-active {
    border-color: var(--bio-termo-cyan);
    background: rgba(56, 189, 248, 0.08);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.15);
}

.termo-step-num {
    position: absolute;
    top: -10px;
    left: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bio-termo-cyan);
    color: #0b131b;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.termo-step-box h6 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0.35rem 0 0.4rem 0;
}

.termo-step-box p {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0 0 0.6rem 0;
}

.termo-step-yield {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bio-termo-cyan);
    background: rgba(56, 189, 248, 0.12);
    border-radius: 6px;
    padding: 0.2rem 0.45rem;
}

.termo-cross-explanation {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(56, 189, 248, 0.06);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.termo-cross-icon {
    font-size: 1.4rem;
    color: var(--bio-termo-cyan);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.termo-cross-text h6 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bio-termo-cyan);
    margin: 0 0 0.3rem 0;
}

.termo-cross-text p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0;
}

/* Light Mode Overrides for Termogenesis */
[data-theme='light'] .termo-telemetry-hero,
[data-theme='light'] .termo-pillar-card,
[data-theme='light'] .termo-cascade-card {
    background: var(--bio-card-bg);
    border-color: var(--bio-card-border);
}

[data-theme='light'] .termo-gauge-bg {
    stroke: rgba(0, 0, 0, 0.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   HERRAMIENTA: BALANCE REDOX, FUGA DE ELECTRONES & GSH/GSSG (NRF2/ARE)
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --bio-redox-emerald: #10b981;
    --bio-redox-emerald-glow: rgba(16, 185, 129, 0.25);
    --bio-redox-cyan: #38bdf8;
    --bio-redox-cyan-glow: rgba(56, 189, 248, 0.22);
    --bio-redox-amber: #f59e0b;
    --bio-redox-danger: #f43f5e;
    --bio-redox-purple: #a855f7;
}

.redox-presets-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.8rem;
    padding: 0.75rem 1rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    align-items: center;
}

.redox-presets-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.redox-preset-btn {
    padding: 0.45rem 0.9rem;
    background: transparent;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.redox-preset-btn:hover {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.55);
    transform: translateY(-1px);
}

.redox-preset-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.28) 0%, rgba(16, 185, 129, 0.12) 100%);
    color: #ecfdf5;
    border-color: var(--bio-redox-emerald);
    box-shadow: 0 0 12px var(--bio-redox-emerald-glow);
}

/* ── Telemetry Hero & Circular Gauge ── */
.redox-telemetry-hero {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    background: var(--bio-card-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 16px;
    padding: 1.6rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.redox-gauge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    text-align: center;
}

.redox-gauge-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 0.85rem;
}

.redox-gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.redox-gauge-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 8;
}

.redox-gauge-circle {
    fill: none;
    stroke: var(--bio-redox-emerald);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 282.7;
    stroke-dashoffset: 40;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease;
}

.redox-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.redox-gauge-score {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-light, #f1eee6);
    font-family: var(--font-heading, serif);
}

.redox-gauge-unit {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 2px;
}

.redox-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.redox-status-badge.optimal {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.redox-status-badge.moderate {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.redox-status-badge.danger {
    background: rgba(244, 63, 94, 0.15);
    color: #fda4af;
    border: 1px solid rgba(244, 63, 94, 0.35);
}

.redox-status-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    max-width: 250px;
}

/* ── Métricas y Barra Dual Redox ── */
.redox-metrics-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.redox-dual-pathway-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
}

.redox-pathway-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.76rem;
}

.redox-path-title {
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.redox-path-label.leak {
    color: var(--bio-redox-danger);
    font-weight: 700;
}

.redox-path-label.gsh {
    color: var(--bio-redox-emerald);
    font-weight: 700;
}

.redox-dual-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    position: relative;
}

.redox-bar-leak {
    background: linear-gradient(90deg, #f43f5e, #fb7185);
    transition: width 0.5s ease;
}

.redox-bar-gsh {
    background: linear-gradient(90deg, #10b981, #34d399);
    transition: width 0.5s ease;
    margin-left: auto;
}

.redox-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}

.redox-metric-box {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.redox-metric-box:hover {
    border-color: rgba(16, 185, 129, 0.35);
    transform: translateY(-2px);
}

.redox-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.redox-metric-title {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}

.redox-metric-icon {
    font-size: 0.85rem;
    color: var(--bio-redox-emerald);
}

.redox-metric-val {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-light, #f1eee6);
    font-family: var(--font-heading, serif);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.redox-metric-unit {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-muted);
    font-family: var(--font-body, sans-serif);
}

.redox-metric-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
}

/* ── Cuello de Botella (Liebig) ── */
.redox-bottleneck-box {
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border-left: 4px solid var(--bio-redox-emerald);
    background: var(--bio-inner-bg);
    border-top: 1px solid var(--bio-card-border);
    border-right: 1px solid var(--bio-card-border);
    border-bottom: 1px solid var(--bio-card-border);
}

.redox-bottleneck-box.optimal {
    border-left-color: var(--bio-redox-emerald);
}

.redox-bottleneck-box.warning {
    border-left-color: var(--bio-redox-amber);
}

.redox-bottleneck-box.critical {
    border-left-color: var(--bio-redox-danger);
}

.redox-bottleneck-box.notice {
    border-left-color: var(--bio-redox-cyan);
}

.redox-bottleneck-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.35rem 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.redox-bottleneck-box.optimal .redox-bottleneck-title { color: #34d399; }
.redox-bottleneck-box.warning .redox-bottleneck-title { color: #fbbf24; }
.redox-bottleneck-box.critical .redox-bottleneck-title { color: #fb7185; }
.redox-bottleneck-box.notice .redox-bottleneck-title { color: #38bdf8; }

.redox-bottleneck-text {
    font-size: 0.83rem;
    color: var(--text-body);
    line-height: 1.5;
    margin: 0;
}

/* ── Los 3 Pilares Interactivos ── */
.redox-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin-bottom: 2.2rem;
}

.redox-pillar-card {
    background: var(--bio-card-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.redox-pillar-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--bio-card-border);
}

.redox-pillar-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-light, #f1eee6);
    margin: 0 0 0.2rem 0;
    font-family: var(--font-heading, serif);
}

.redox-pillar-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

.redox-pillar-badge {
    font-size: 0.68rem;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.redox-pillar-badge.cyan {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.redox-pillar-badge.emerald {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.redox-pillar-badge.purple {
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Parámetros dentro de cada pilar */
.redox-param-group {
    margin-bottom: 1.15rem;
}

.redox-param-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.redox-param-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-body);
}

.redox-param-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gold-warm, #d4a539);
    font-family: var(--font-heading, serif);
}

.redox-param-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 0.3rem;
}

.redox-select {
    width: 100%;
    padding: 0.5rem 0.8rem;
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 8px;
    color: var(--text-light, #f1eee6);
    font-size: 0.82rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.redox-select:focus {
    border-color: var(--bio-redox-emerald);
}

/* Checkboxes y switches estilizados */
.redox-checks-group {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.6rem;
}

.redox-check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    background: var(--bio-inner-bg);
    padding: 0.65rem 0.8rem;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.redox-check-item:hover {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(255, 255, 255, 0.03);
}

.redox-check-input {
    margin-top: 0.15rem;
    accent-color: var(--bio-redox-emerald);
    cursor: pointer;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.redox-check-text {
    display: flex;
    flex-direction: column;
}

.redox-check-label {
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--text-body);
}

.redox-check-sub {
    font-size: 0.71rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* ── Cascada Enzimática & Mecanismo Biológico ── */
.redox-cascade-section {
    margin-bottom: 2.2rem;
}

.redox-cascade-card {
    background: var(--bio-card-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 14px;
    padding: 1.5rem;
}

.redox-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--bio-card-border);
}

.redox-section-heading h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-light, #f1eee6);
    margin: 0;
    font-family: var(--font-heading, serif);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.redox-cascade-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.redox-step-box {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 10px;
    padding: 1rem;
    position: relative;
    transition: transform 0.2s ease;
}

.redox-step-box:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.4);
}

.redox-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.15);
    color: var(--bio-redox-cyan);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.redox-step-box h6 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-light, #f1eee6);
    margin: 0 0 0.35rem 0;
}

.redox-step-box p {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0;
}

/* ── Ecosistema e Integraciones (Cross-Tools) ── */
.redox-ecosystem-section {
    margin-bottom: 1.5rem;
}

.redox-eco-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}

.redox-eco-card {
    background: var(--bio-inner-bg);
    border: 1px solid var(--bio-card-border);
    border-radius: 12px;
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.redox-eco-card:hover {
    border-color: var(--gold-warm);
    transform: translateY(-2px);
}

.redox-eco-badge {
    font-size: 0.68rem;
    color: var(--gold-warm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.redox-eco-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-light, #f1eee6);
    margin: 0 0 0.45rem 0;
    font-family: var(--font-heading, serif);
}

.redox-eco-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0 0 1rem 0;
}

.redox-eco-btn {
    align-self: flex-start;
    padding: 0.38rem 0.8rem;
    background: rgba(212, 165, 57, 0.1);
    border: 1px solid rgba(212, 165, 57, 0.35);
    border-radius: 6px;
    color: var(--gold-warm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.redox-eco-btn:hover {
    background: var(--gold-warm);
    color: #080706;
    border-color: var(--gold-warm);
}

/* ── Light Mode Overrides ── */
[data-theme='light'] .redox-telemetry-hero,
[data-theme='light'] .redox-pillar-card,
[data-theme='light'] .redox-cascade-card {
    background: var(--bio-card-bg);
    border-color: var(--bio-card-border);
}

[data-theme='light'] .redox-gauge-bg {
    stroke: rgba(0, 0, 0, 0.08);
}

[data-theme='light'] .redox-gauge-score,
[data-theme='light'] .redox-metric-val,
[data-theme='light'] .redox-status-text {
    color: #1e1b18;
}

[data-theme='light'] .redox-pillar-card h5,
[data-theme='light'] .redox-step-box h6,
[data-theme='light'] .redox-section-heading h4 {
    color: #1e1b18;
}

[data-theme='light'] .redox-check-label {
    color: #2b2621;
}

/* ── Responsive Breakpoints ── */
@media (max-width: 1024px) {
    .redox-telemetry-hero {
        grid-template-columns: 1fr;
    }
    .redox-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .redox-pillars-grid {
        grid-template-columns: 1fr;
    }
    .redox-cascade-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .redox-eco-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .redox-metrics-grid {
        grid-template-columns: 1fr;
    }
    .redox-cascade-steps-grid {
        grid-template-columns: 1fr;
    }
    .redox-presets-bar {
        flex-direction: column;
        align-items: stretch;
    }
}