/* Extraído de laboratorio_stem.php para embeds de guía */

    /* Lab STEM: usar casi todo el ancho disponible (por encima del max-w-7xl global RGA) */
    .lab-stem-shell {
        width: 100%;
        max-width: min(100rem, calc(100vw - 1rem)) !important;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }
    @media (min-width: 640px) {
        .lab-stem-shell { padding-left: 1.5rem; padding-right: 1.5rem; }
    }
    @media (min-width: 1024px) {
        .lab-stem-shell { padding-left: 2rem; padding-right: 2rem; }
    }

    /* --- Animación paso a paso del analizador 3D --- */
    #an-result-panel .an-step {
        transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
    }
    #an-result-panel .an-step.an-step-hidden {
        opacity: 0.12;
        transform: translateY(6px);
        filter: blur(1px);
        pointer-events: none;
    }
    #an-result-panel .an-step.an-step-current {
        background: linear-gradient(90deg, rgba(13,138,154,0.12), rgba(13,138,154,0));
        border-left: 3px solid #0D8A9A;
        padding-left: 6px;
        border-radius: 6px;
        animation: anStepPulse 1.2s ease-in-out 1;
    }
    @keyframes anStepPulse {
        0% { box-shadow: 0 0 0 0 rgba(13,138,154,0.45); }
        70% { box-shadow: 0 0 0 10px rgba(13,138,154,0); }
        100% { box-shadow: 0 0 0 0 rgba(13,138,154,0); }
    }
    /* Lab STEM ↔ Aula: tinta → teal → cian (GUIA_MARCA_AULA) */
    .stem-shell {
        --stem-blue: #0A4F73;
        --stem-blue-deep: #083D5A;
        --stem-teal: #0D8A9A;
        --stem-teal-deep: #0A6B78;
        --stem-cyan: #2BB3C9;
        --stem-mist: #E6F6F8;
        --stem-pale: #E4F1F5;
        --stem-fog: #F4FAFB;
        --stem-slate: #163A4A;
        --stem-ink: #1E3A5F;
        --stem-muted: #64748B;
        --stem-border: rgba(22, 58, 74, 0.10);
        --stem-gold: #F0C000;
        --stem-navy: #083D5A;
        --stem-sun: #F0C000;
        --stem-lime: #0D8A9A;
        --stem-rose: #e96a73;
        --stem-paper: #F4FAFB;
        --stem-frame: linear-gradient(90deg, #0A4F73 0%, #0D8A9A 55%, #2BB3C9 100%);
        --stem-hero: linear-gradient(145deg, #083D5A 0%, #0A4F73 42%, #0D8A9A 100%);
        --stem-shadow: 0 12px 32px -12px rgba(13, 138, 154, 0.28);
        --stem-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        font-family: 'Space Grotesk', system-ui, sans-serif;
        color: var(--stem-ink);
        font-size: 17px;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
    }

    .stem-shell h1,
    .stem-shell h2,
    .stem-shell h3 {
        letter-spacing: -0.025em;
    }
    .stem-shell h2:not([class*="text-"]),
    .stem-shell h3:not([class*="text-"]) {
        color: var(--stem-slate);
    }

    .stem-shell .stem-kicker {
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--stem-cyan);
    }

    .stem-grid {
        background-color: var(--stem-fog);
        background-image:
            linear-gradient(rgba(10, 79, 115, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(10, 79, 115, 0.035) 1px, transparent 1px);
        background-size: 28px 28px;
    }

    .panel-card {
        position: relative;
        overflow: visible;
        border: 1px solid var(--stem-border);
        border-radius: 1rem;
        box-shadow: var(--stem-shadow);
        background: #fff;
    }

    .panel-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--stem-frame);
        pointer-events: none;
        z-index: 1;
        border-radius: 1rem 1rem 0 0;
    }

    /* Chrome compartido: menos pastilla, más Aula */
    .stem-shell .stem-area-btn,
    .stem-shell .stem-tab-btn {
        transition: transform 0.15s var(--stem-ease), box-shadow 0.2s var(--stem-ease), background 0.2s ease, border-color 0.2s ease;
    }
    .stem-shell .stem-area-btn:hover,
    .stem-shell .stem-tab-btn:hover {
        transform: translateY(-1px);
    }
    .stem-shell .stem-area-btn:active,
    .stem-shell .stem-tab-btn:active {
        transform: scale(0.97);
    }

    .stem-shell input:focus,
    .stem-shell select:focus,
    .stem-shell textarea:focus,
    .stem-shell button:focus-visible {
        outline: 2px solid var(--stem-blue);
        outline-offset: 2px;
    }

    /* Sin morado: indigo/violet/purple/fuchsia → Aula (azul/teal/cian) */
    .stem-shell [class*="bg-indigo-"],
    .stem-shell [class*="bg-violet-"],
    .stem-shell [class*="bg-purple-"],
    .stem-shell [class*="bg-fuchsia-"] { background-color: var(--stem-mist) !important; }
    .stem-shell .bg-indigo-400, .stem-shell .bg-indigo-500, .stem-shell .bg-indigo-600,
    .stem-shell .bg-violet-400, .stem-shell .bg-violet-500, .stem-shell .bg-violet-600,
    .stem-shell .bg-purple-400, .stem-shell .bg-purple-500, .stem-shell .bg-purple-600,
    .stem-shell .bg-fuchsia-400, .stem-shell .bg-fuchsia-500, .stem-shell .bg-fuchsia-600,
    .stem-shell .hover\:bg-indigo-500:hover, .stem-shell .hover\:bg-violet-500:hover,
    .stem-shell .hover\:bg-purple-500:hover, .stem-shell .hover\:bg-fuchsia-500:hover {
        background-color: var(--stem-teal) !important;
    }
    .stem-shell .bg-indigo-700, .stem-shell .bg-indigo-800, .stem-shell .bg-indigo-900, .stem-shell .bg-indigo-950,
    .stem-shell .bg-violet-700, .stem-shell .bg-violet-800, .stem-shell .bg-violet-900, .stem-shell .bg-violet-950,
    .stem-shell .bg-purple-700, .stem-shell .bg-purple-800, .stem-shell .bg-purple-900, .stem-shell .bg-purple-950,
    .stem-shell .bg-fuchsia-700, .stem-shell .bg-fuchsia-800 {
        background-color: var(--stem-blue) !important;
    }
    .stem-shell .bg-indigo-50, .stem-shell .bg-violet-50, .stem-shell .bg-purple-50, .stem-shell .bg-fuchsia-50,
    .stem-shell .bg-indigo-100, .stem-shell .bg-violet-100, .stem-shell .bg-purple-100, .stem-shell .bg-fuchsia-100,
    .stem-shell .hover\:bg-indigo-50:hover, .stem-shell .hover\:bg-violet-50:hover,
    .stem-shell .hover\:bg-purple-50:hover, .stem-shell .hover\:bg-indigo-100:hover,
    .stem-shell .hover\:bg-violet-100:hover, .stem-shell .hover\:bg-purple-100:hover {
        background-color: var(--stem-pale) !important;
    }

    .stem-shell [class*="text-indigo-"],
    .stem-shell [class*="text-violet-"],
    .stem-shell [class*="text-purple-"],
    .stem-shell [class*="text-fuchsia-"] { color: var(--stem-blue) !important; }
    .stem-shell .text-indigo-200, .stem-shell .text-indigo-300,
    .stem-shell .text-violet-200, .stem-shell .text-violet-300,
    .stem-shell .text-purple-200, .stem-shell .text-fuchsia-200, .stem-shell .text-fuchsia-300 {
        color: #2BB3C9 !important;
    }
    /* Teoría FV (fondo oscuro): no aplastar violetas/ámbares a mist claro */
    .stem-shell .pv-theory [class*="bg-violet-"],
    .stem-shell .pv-theory [class*="bg-purple-"],
    .stem-shell .pv-theory [class*="bg-indigo-"] {
        background-color: rgba(56, 189, 248, 0.14) !important;
    }
    .stem-shell .pv-theory [class*="text-violet-"],
    .stem-shell .pv-theory [class*="text-purple-"],
    .stem-shell .pv-theory [class*="text-indigo-"],
    .stem-shell .pv-theory .text-violet-200,
    .stem-shell .pv-theory .text-violet-300 {
        color: #7dd3fc !important;
    }
    .stem-shell .pv-theory [class*="border-violet-"],
    .stem-shell .pv-theory [class*="border-purple-"],
    .stem-shell .pv-theory [class*="border-indigo-"] {
        border-color: rgba(125, 211, 252, 0.35) !important;
    }
    .pv-atm-card {
        border-radius: 1rem;
        background: #f8fafc;
        padding: 0.85rem 0.95rem;
        border: 1px solid rgba(18, 48, 71, 0.08);
    }
    .pv-atm-label {
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #475569;
        margin: 0;
    }
    .pv-atm-val {
        margin-top: 0.35rem;
        font-size: 1.5rem;
        font-weight: 900;
        color: #0f172a;
        line-height: 1.2;
    }

    .stem-shell [class*="border-indigo-"],
    .stem-shell [class*="border-violet-"],
    .stem-shell [class*="border-purple-"],
    .stem-shell [class*="border-fuchsia-"] { border-color: rgba(10, 79, 115, 0.18) !important; }

    .stem-shell [class*="ring-indigo-"],
    .stem-shell [class*="ring-violet-"],
    .stem-shell [class*="ring-purple-"],
    .stem-shell [class*="focus:ring-indigo-"]:focus,
    .stem-shell [class*="focus:ring-violet-"]:focus {
        --tw-ring-color: rgba(13, 138, 154, 0.45) !important;
    }

    .stem-shell [class*="shadow-indigo-"],
    .stem-shell [class*="shadow-violet-"],
    .stem-shell [class*="shadow-purple-"],
    .stem-shell [class*="shadow-fuchsia-"] {
        --tw-shadow-color: rgba(13, 138, 154, 0.35) !important;
        --tw-shadow: var(--tw-shadow-colored) !important;
    }

    .stem-shell .from-indigo-50, .stem-shell .from-violet-50, .stem-shell .from-purple-50, .stem-shell .from-fuchsia-50,
    .stem-shell .from-indigo-100, .stem-shell .from-violet-100 {
        --tw-gradient-from: #E4F1F5 var(--tw-gradient-from-position);
        --tw-gradient-to: rgb(228 241 245 / 0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }
    .stem-shell .from-indigo-400, .stem-shell .from-indigo-500, .stem-shell .from-indigo-600,
    .stem-shell .from-violet-400, .stem-shell .from-violet-500, .stem-shell .from-violet-600,
    .stem-shell .from-purple-500, .stem-shell .from-purple-600, .stem-shell .from-fuchsia-500 {
        --tw-gradient-from: #0D8A9A var(--tw-gradient-from-position);
        --tw-gradient-to: rgb(13 138 154 / 0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }
    .stem-shell .from-indigo-700, .stem-shell .from-indigo-800, .stem-shell .from-indigo-900, .stem-shell .from-indigo-950,
    .stem-shell .from-violet-700, .stem-shell .from-violet-800, .stem-shell .from-violet-900,
    .stem-shell .from-purple-700, .stem-shell .from-purple-800, .stem-shell .from-purple-900 {
        --tw-gradient-from: #0A4F73 var(--tw-gradient-from-position);
        --tw-gradient-to: rgb(10 79 115 / 0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }
    .stem-shell .via-indigo-500, .stem-shell .via-indigo-600, .stem-shell .via-indigo-700,
    .stem-shell .via-violet-500, .stem-shell .via-violet-600, .stem-shell .via-violet-700,
    .stem-shell .via-purple-600, .stem-shell .via-purple-700 {
        --tw-gradient-to: rgb(13 138 154 / 0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from), #0D8A9A var(--tw-gradient-via-position), var(--tw-gradient-to);
    }
    .stem-shell .to-indigo-50, .stem-shell .to-violet-50, .stem-shell .to-purple-50, .stem-shell .to-fuchsia-50 {
        --tw-gradient-to: #E6F6F8 var(--tw-gradient-to-position);
    }
    .stem-shell .to-indigo-400, .stem-shell .to-indigo-500, .stem-shell .to-indigo-600,
    .stem-shell .to-violet-400, .stem-shell .to-violet-500, .stem-shell .to-violet-600,
    .stem-shell .to-purple-500, .stem-shell .to-purple-600, .stem-shell .to-fuchsia-500 {
        --tw-gradient-to: #0D8A9A var(--tw-gradient-to-position);
    }
    .stem-shell .to-indigo-700, .stem-shell .to-indigo-800, .stem-shell .to-indigo-900, .stem-shell .to-indigo-950,
    .stem-shell .to-violet-700, .stem-shell .to-violet-800, .stem-shell .to-violet-900,
    .stem-shell .to-purple-700, .stem-shell .to-purple-800, .stem-shell .to-purple-900 {
        --tw-gradient-to: #083D5A var(--tw-gradient-to-position);
    }

    /* SVG / fill-stroke utilidades Tailwind moradas */
    .stem-shell .fill-indigo-500, .stem-shell .fill-violet-500, .stem-shell .fill-purple-500,
    .stem-shell .fill-indigo-600, .stem-shell .fill-violet-600 { fill: #0D8A9A !important; }
    .stem-shell .stroke-indigo-500, .stem-shell .stroke-violet-500, .stem-shell .stroke-purple-500,
    .stem-shell .stroke-indigo-600, .stem-shell .stroke-violet-600 { stroke: #0A4F73 !important; }

    /* accent- morado en ranges */
    .stem-shell .accent-indigo-500, .stem-shell .accent-violet-500, .stem-shell .accent-purple-500 {
        accent-color: #0D8A9A !important;
    }

    .stem-hero {
        background: var(--stem-hero);
    }
    .stem-hero-grid {
        background-image:
            linear-gradient(rgba(43, 179, 201, 0.12) 1px, transparent 1px),
            linear-gradient(90deg, rgba(43, 179, 201, 0.12) 1px, transparent 1px);
        background-size: 44px 44px;
    }
    .stem-hero-orb-a {
        background: radial-gradient(circle, rgba(43, 179, 201, 0.35), transparent 68%);
    }
    .stem-hero-orb-b {
        background: radial-gradient(circle, rgba(13, 138, 154, 0.28), transparent 70%);
    }
    .stem-hero-orb-c {
        background: radial-gradient(circle, rgba(240, 192, 0, 0.12), transparent 72%);
    }

    @media (prefers-reduced-motion: reduce) {
        .stem-shell .animate-pulse,
        .stem-shell .animate-ping,
        .stem-hero svg animate,
        .stem-hero svg animateTransform {
            animation: none !important;
        }
    }

    .solar-stage {
        position: relative;
        min-height: 310px;
        border-radius: 28px;
        overflow: hidden;
        background:
            radial-gradient(circle at 18% 14%, rgba(255,255,255,0.9), transparent 16%),
            radial-gradient(circle at 78% 16%, rgba(255,214,120,0.16), transparent 24%),
            linear-gradient(180deg, #9edcff 0%, #e7f6ff 42%, #f4efe3 53%, #d4b47c 100%);
    }

    .solar-orbit {
        position: absolute;
        left: 50%;
        top: 22px;
        width: 350px;
        height: 190px;
        margin-left: -175px;
        border: 2px solid rgba(255,255,255,0.14);
        border-bottom: none;
        border-radius: 350px 350px 0 0;
        box-shadow: inset 0 6px 0 rgba(255,255,255,0.08);
        opacity: 0.95;
    }

    .solar-earth {
        position: absolute;
        left: 20px;
        bottom: 24px;
        width: 78px;
        height: 78px;
        border-radius: 999px;
        background: radial-gradient(circle at 35% 30%, #7de2ff 0%, #1f7fb0 42%, #123047 100%);
        box-shadow: 0 16px 28px rgba(18,48,71,0.28);
    }

    .solar-earth::before {
        content: '';
        position: absolute;
        inset: 12px 14px 16px 12px;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(155,255,184,0.9), rgba(36,133,90,0.9));
        clip-path: polygon(16% 18%, 40% 8%, 64% 18%, 78% 32%, 90% 46%, 81% 66%, 66% 80%, 38% 90%, 18% 74%, 8% 52%, 10% 32%);
        opacity: 0.8;
    }

    .solar-axis {
        position: absolute;
        left: 74px;
        bottom: 84px;
        width: 52px;
        height: 3px;
        background: rgba(255,255,255,0.85);
        transform-origin: right center;
        transform: rotate(-23.4deg);
        border-radius: 999px;
        box-shadow: 0 0 10px rgba(255,255,255,0.4);
    }

    .solar-horizon {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 64px;
        background: linear-gradient(180deg, rgba(142,114,71,0.0), rgba(142,114,71,0.35) 25%, rgba(90,67,38,0.55) 100%);
    }

    .solar-season-track {
        position: relative;
        height: 16px;
        border-radius: 999px;
        background: linear-gradient(90deg, #d8ecff 0%, #c5f0da 33%, #fff3bf 66%, #ffd1a8 100%);
        box-shadow: inset 0 0 0 1px rgba(18,48,71,0.06);
        overflow: hidden;
    }

    .solar-season-track::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 70%);
        animation: spectrumMove 4s linear infinite;
    }

    .solar-season-marker {
        position: absolute;
        top: -8px;
        width: 24px;
        height: 32px;
        border-radius: 999px;
        background: radial-gradient(circle at 40% 35%, #fff4b5 0%, #ffd768 48%, #f3a524 100%);
        box-shadow: 0 0 0 5px rgba(246,183,60,0.16), 0 10px 20px rgba(243,165,36,0.24);
        border: 2px solid rgba(255,255,255,0.8);
    }

    .solar-season-labels {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        font-size: 11px;
        color: #5b6472;
        text-align: center;
        line-height: 1.2;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    @media (min-width: 640px) {
        .solar-season-labels {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    .alg-bracket-matrix {
        display: inline-flex;
        align-items: stretch;
        gap: 0.35rem;
        max-width: 100%;
    }

    .alg-bracket-matrix .alg-bracket {
        width: 10px;
        min-width: 10px;
        border-top: 2px solid rgba(99, 102, 241, 0.85);
        border-bottom: 2px solid rgba(99, 102, 241, 0.85);
    }

    .alg-bracket-matrix .alg-bracket.left {
        border-left: 2px solid rgba(99, 102, 241, 0.85);
    }

    .alg-bracket-matrix .alg-bracket.right {
        border-right: 2px solid rgba(99, 102, 241, 0.85);
    }

    .alg-matrix-grid {
        display: grid;
        gap: 0.2rem;
        overflow: auto;
        max-width: 100%;
    }

    .alg-matrix-cell {
        min-width: 3rem;
        padding: 0.3rem 0.4rem;
        border-radius: 0.55rem;
        border: 1px solid rgba(148, 163, 184, 0.35);
        background: rgba(248, 250, 252, 0.95);
        text-align: center;
        font-size: 11px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
        color: #1e293b;
    }

    .alg-matrix-cell.pivot {
        background: #e0e7ff;
        border-color: #a5b4fc;
        color: #3730a3;
        font-weight: 700;
    }

    .alg-matrix-cell.aug {
        background: #fff1f2;
        border-color: #fecdd3;
        color: #9f1239;
        font-weight: 700;
    }

    .pv-station-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .pv-station-card {
        background: linear-gradient(180deg, #ffffff, #f7fbff);
        border: 1px solid rgba(18,48,71,0.08);
        border-radius: 18px;
        padding: 0.9rem;
        box-shadow: 0 10px 24px rgba(18,48,71,0.06);
    }

    .solar-kpi {
        overflow: visible;
        color: #fff !important;
    }
    .solar-kpi .solar-kpi-label,
    .solar-kpi .solar-kpi-val {
        color: #fff !important;
        margin: 0;
        line-height: 1.35;
    }
    .solar-kpi .solar-kpi-label {
        font-size: 0.68rem;
        letter-spacing: 0.04em;
        opacity: 0.92;
    }
    .solar-kpi .solar-kpi-val {
        margin-top: 0.4rem;
        font-weight: 900;
    }
    .solar-formulas-box {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: linear-gradient(180deg, #ffffff, #fffbeb);
        color: #0f172a;
        border: 1px solid rgba(217, 119, 6, 0.25);
    }
    .solar-formulas-box .katex {
        font-size: 0.92em;
        white-space: normal;
    }
    .fv-gloss {
        border-bottom: 1px dotted #b45309;
        cursor: help;
        font-weight: 700;
        color: #9a3412;
        position: relative;
    }
    .fv-gloss::after {
        content: attr(data-tip);
        position: absolute;
        left: 50%;
        bottom: calc(100% + 0.45rem);
        transform: translateX(-50%) translateY(4px);
        width: min(18rem, 70vw);
        padding: 0.55rem 0.7rem;
        border-radius: 0.65rem;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.45;
        color: #0f172a;
        background: #fffbeb;
        border: 1px solid rgba(245, 158, 11, 0.45);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease, transform 0.15s ease;
        z-index: 50;
        text-align: left;
    }
    .fv-gloss:hover::after,
    .fv-gloss:focus::after,
    .fv-gloss:focus-visible::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    html[data-theme="dark"] .fv-gloss { color: #fbbf24; border-bottom-color: #fbbf24; }
    html[data-theme="dark"] .fv-gloss::after {
        color: #e2e8f0;
        background: #1a1408;
        border-color: rgba(251, 191, 36, 0.4);
    }
    html[data-theme="dark"] .solar-formulas-box {
        background: linear-gradient(180deg, #0f172a, #1e293b);
        color: #f1f5f9;
        border-color: rgba(148, 163, 184, 0.25);
    }

    .pv-chip {
        border-radius: 999px;
        padding: 0.35rem 0.7rem;
        font-size: 11px;
        font-weight: 700;
        background: rgba(18,48,71,0.06);
        color: #24435b;
    }

    .sensor-mini {
        width: 100%;
        height: 110px;
    }

    .graph-toolbar {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .graph-btn {
        border-radius: 999px;
        padding: 0.45rem 0.8rem;
        font-size: 12px;
        font-weight: 700;
        background: #eff6ff;
        color: #1d4ed8;
        border: 1px solid #bfdbfe;
        transition: transform 0.15s ease, background 0.15s ease;
    }

    .graph-btn:hover {
        background: #dbeafe;
        transform: translateY(-1px);
    }

    .graph-card {
        background: linear-gradient(180deg, #ffffff, #f8fbff);
        border: 1px solid rgba(18,48,71,0.08);
        border-radius: 22px;
        box-shadow: 0 12px 26px rgba(18,48,71,0.08);
    }

    .graph-svg {
        width: 100%;
        height: 260px;
    }

    .component-card {
        background: linear-gradient(180deg, #ffffff, #f8fbff);
        border: 1px solid rgba(18,48,71,0.08);
        border-radius: 22px;
        box-shadow: 0 12px 26px rgba(18,48,71,0.08);
    }

    .mirror-beam {
        fill: none;
        stroke: #f59e0b;
        stroke-width: 2.5;
        stroke-linecap: round;
    }

    .solar-title-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.55rem 0.9rem;
        border-radius: 999px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.15);
    }

    .solar-hero-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .solar-highlight {
        background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 22px;
        padding: 1rem;
        backdrop-filter: blur(10px);
    }

    .solar-spectrum {
        position: relative;
        height: 18px;
        border-radius: 999px;
        overflow: hidden;
        background: linear-gradient(90deg, #5b5bd6 0%, #2fb5ff 15%, #2ed6b4 33%, #fff29b 55%, #ffb04d 74%, #ea6a73 100%);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
    }

    .solar-spectrum::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(255,255,255,0.0) 20%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.0) 80%);
        animation: spectrumMove 4.5s linear infinite;
    }

    .blackbody-curve {
        width: 100%;
        height: 170px;
    }

    .sensor-card {
        border: 1px solid rgba(18,48,71,0.08);
        background: linear-gradient(180deg, #ffffff, #f6fbff);
        box-shadow: 0 12px 26px rgba(18,48,71,0.08);
    }

    .rotating-dot {
        animation: spinSlow 14s linear infinite;
        transform-origin: 50% 50%;
    }

    .floaty {
        animation: floaty 4.2s ease-in-out infinite;
    }

    .pulse-glow {
        animation: pulseGlow 2.8s ease-in-out infinite;
    }

    .solar-sun {
        position: absolute;
        width: 82px;
        height: 82px;
        border-radius: 999px;
        background: radial-gradient(circle, #fff4b5 0%, #ffd768 45%, #f3a524 75%, rgba(243,165,36,0.2) 100%);
        box-shadow: 0 0 28px rgba(243, 165, 36, 0.45);
        transition: left 0.6s ease, top 0.6s ease;
    }

    .solar-ray {
        position: absolute;
        height: 3px;
        background: linear-gradient(90deg, rgba(246,183,60,0), rgba(246,183,60,0.8), rgba(246,183,60,0));
        transform-origin: left center;
        opacity: 0.9;
    }

    .roof-base {
        position: absolute;
        bottom: 42px;
        left: 50%;
        width: 250px;
        height: 120px;
        margin-left: -125px;
        background: linear-gradient(180deg, #c9714a 0%, #89492f 100%);
        clip-path: polygon(50% 0%, 100% 55%, 100% 100%, 0% 100%, 0% 55%);
        filter: drop-shadow(0 10px 14px rgba(18, 48, 71, 0.18));
    }

    .solar-panel {
        position: absolute;
        left: 50%;
        bottom: 118px;
        width: 170px;
        height: 88px;
        margin-left: -85px;
        background:
            linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
            linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
            linear-gradient(135deg, #133f63 0%, #0c2238 100%);
        background-size: 21px 21px, 21px 21px, 100% 100%;
        border: 4px solid #d8eef7;
        border-radius: 8px;
        box-shadow: 0 12px 18px rgba(12,34,56,0.25);
        transform-origin: bottom center;
        transition: transform 0.6s ease;
    }

    .solar-panel::after {
        content: '';
        position: absolute;
        inset: 8px;
        background: linear-gradient(120deg, rgba(255,255,255,0.18), transparent 40%);
        border-radius: 4px;
    }

    .motion-track {
        position: relative;
        height: 96px;
        border-radius: 18px;
        background: linear-gradient(180deg, #eef8ff 0%, #dbeefe 100%);
        overflow: hidden;
    }

    .motion-track::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 22px;
        height: 8px;
        background: repeating-linear-gradient(90deg, #1b4d70 0 10px, #7ab7d3 10px 20px);
    }

    .motion-body {
        position: absolute;
        bottom: 30px;
        width: 44px;
        height: 28px;
        border-radius: 10px;
        background: linear-gradient(135deg, #e96a73, #af3e52);
        box-shadow: 0 10px 18px rgba(233,106,115,0.28);
        transition: left 0.5s ease, bottom 0.5s ease;
    }

    .motion-body::before,
    .motion-body::after {
        content: '';
        position: absolute;
        bottom: -8px;
        width: 12px;
        height: 12px;
        border-radius: 999px;
        background: #17354f;
    }

    .motion-body::before { left: 5px; }
    .motion-body::after { right: 5px; }

    .pulley-stage {
        position: relative;
        min-height: 220px;
        border-radius: 24px;
        background: linear-gradient(180deg, #fff9ef 0%, #fff0cf 100%);
        overflow: hidden;
    }

    .pulley-wheel {
        position: absolute;
        top: 34px;
        width: 74px;
        height: 74px;
        border-radius: 999px;
        border: 8px solid #485b6a;
        background: radial-gradient(circle, #eff4f8 0%, #b8c4cf 70%, #7b8b97 100%);
    }

    .pulley-rope {
        position: absolute;
        top: 12px;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, #9b6323 0%, #c68c48 100%);
    }

    .pulley-mass {
        position: absolute;
        bottom: 24px;
        width: 58px;
        height: 58px;
        border-radius: 14px;
        background: linear-gradient(135deg, #4fa3ca, #24597c);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        box-shadow: 0 12px 18px rgba(36,89,124,0.28);
    }

    .vector-stage {
        position: relative;
        min-height: 250px;
        border-radius: 24px;
        background:
            linear-gradient(rgba(18,48,71,0.08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(18,48,71,0.08) 1px, transparent 1px),
            #f6fbfd;
        background-size: 24px 24px;
    }

    .chem-lab-stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        min-height: 220px;
        padding: 1.25rem;
        border-radius: 1.5rem;
        background:
            radial-gradient(ellipse at 50% 0%, rgba(16,185,129,.12), transparent 55%),
            linear-gradient(180deg, #f0fdfa, #e0f2fe);
        border: 1px solid rgba(13,148,136,.18);
    }
    .chem-lab-cap {
        margin: 0;
        font-size: 0.78rem;
        font-weight: 700;
        color: #475569;
        text-align: center;
    }
    .chem-beaker {
        position: relative;
        width: 120px;
        height: 150px;
        border: 5px solid #1e3a5f;
        border-top: none;
        border-radius: 0 0 22px 22px;
        background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(226,232,240,.35));
        overflow: hidden;
        margin: 0 auto;
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.35),
            0 14px 28px rgba(30,58,95,.12);
    }
    .chem-beaker--lg { width: 150px; height: 190px; border-width: 6px; border-radius: 0 0 28px 28px; }
    .chem-beaker--sm { width: 88px; height: 110px; border-width: 4px; border-radius: 0 0 16px 16px; margin: 0; }
    .chem-beaker-rim {
        position: absolute;
        top: -10px;
        left: -14px;
        right: -14px;
        height: 12px;
        border-radius: 6px;
        background: linear-gradient(180deg, #334155, #1e3a5f);
        box-shadow: 0 2px 0 rgba(255,255,255,.15);
    }
    .chem-beaker-label {
        position: absolute;
        left: 50%;
        top: 18%;
        transform: translateX(-50%);
        z-index: 2;
        font: 800 0.72rem/1 'Plus Jakarta Sans', system-ui, sans-serif;
        color: #0f172a;
        background: rgba(255,255,255,.82);
        padding: 0.2rem 0.45rem;
        border-radius: 999px;
        white-space: nowrap;
    }

    .chem-liquid {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, rgba(59,180,193,0.85), rgba(34,113,141,0.95));
        transition: height 0.45s ease, background 0.35s ease;
    }
    .chem-liquid::after {
        content: '';
        position: absolute;
        left: 0; right: 0; top: -4px;
        height: 10px;
        background: rgba(255,255,255,.28);
        border-radius: 50%;
    }

    .chem-bubble {
        position: absolute;
        bottom: -10px;
        border-radius: 999px;
        background: rgba(255,255,255,0.55);
        animation: bubbleUp 4s infinite ease-in;
        z-index: 1;
    }
    .chem-ph-strip {
        position: relative;
        height: 18px;
        border-radius: 999px;
        background: linear-gradient(90deg,#dc2626,#ea580c,#facc15,#84cc16,#10b981,#0ea5e9,#3b82f6,#7c3aed);
        box-shadow: inset 0 1px 3px rgba(0,0,0,.15);
    }
    .chem-ph-mark {
        position: absolute;
        top: -6px;
        width: 5px;
        height: 30px;
        background: #1E3A5F;
        border-radius: 2px;
        transform: translateX(-50%);
        transition: left .25s ease;
        box-shadow: 0 0 0 2px #fff;
    }
    html[data-theme="dark"] .chem-lab-stage {
        background: linear-gradient(180deg, #0c1a1a, #0f172a);
        border-color: rgba(45,212,191,.22);
    }
    html[data-theme="dark"] .chem-lab-cap { color: #94a3b8; }
    html[data-theme="dark"] .chem-beaker {
        border-color: #64748b;
        background: rgba(15,23,42,.55);
    }
    html[data-theme="dark"] .chem-beaker-label {
        color: #f8fafc;
        background: rgba(15,23,42,.85);
    }
    html[data-theme="dark"] .chem-ph-mark { background: #f8fafc; box-shadow: 0 0 0 2px #0f172a; }

    .pendulum-stage {
        position: relative;
        min-height: 250px;
        border-radius: 24px;
        background: linear-gradient(180deg, #f4fbff 0%, #d8ecf8 100%);
        overflow: hidden;
    }

    .pendulum-anchor {
        position: absolute;
        top: 18px;
        left: 50%;
        width: 18px;
        height: 18px;
        margin-left: -9px;
        border-radius: 999px;
        background: #123047;
    }

    .pendulum-rod {
        position: absolute;
        top: 28px;
        left: 50%;
        width: 4px;
        background: linear-gradient(180deg, #435c70, #97a9b9);
        transform-origin: top center;
        transition: transform 0.35s ease;
    }

    .pendulum-bob {
        position: absolute;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        background: radial-gradient(circle at 30% 30%, #ffd98d 0%, #f6b73c 45%, #cf7b0b 100%);
        box-shadow: 0 12px 20px rgba(207,123,11,0.26);
        transition: left 0.35s ease, top 0.35s ease;
    }

    .circuit-stage {
        position: relative;
        min-height: 220px;
        border-radius: 24px;
        background: linear-gradient(180deg, #f5fdf8 0%, #e0f3e7 100%);
        overflow: hidden;
    }

    .wire {
        position: absolute;
        background: #1b6f4d;
        border-radius: 999px;
    }

    .circuit-node {
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 999px;
        background: #123047;
    }

    .battery {
        position: absolute;
        width: 38px;
        height: 70px;
        border-radius: 10px;
        background: linear-gradient(180deg, #1f3343 0%, #4e6474 100%);
        box-shadow: 0 10px 18px rgba(18,48,71,0.18);
    }

    .resistor {
        position: absolute;
        width: 88px;
        height: 26px;
        border-radius: 8px;
        background: linear-gradient(90deg, #f0c574 0%, #d78645 100%);
        box-shadow: inset 0 0 0 2px rgba(120,70,22,0.25);
    }

    .bulb {
        position: absolute;
        width: 54px;
        height: 54px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(255,241,161,0.95) 0%, rgba(246,183,60,0.85) 55%, rgba(246,183,60,0.2) 100%);
        box-shadow: 0 0 32px rgba(246,183,60,0.45);
        transition: opacity 0.35s ease;
    }

    @keyframes bubbleUp {
        0% { transform: translateY(0) scale(0.8); opacity: 0; }
        15% { opacity: 1; }
        100% { transform: translateY(-130px) scale(1.15); opacity: 0; }
    }

    @keyframes spectrumMove {
        from { transform: translateX(-60%); }
        to { transform: translateX(60%); }
    }

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

    @keyframes floaty {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-6px); }
    }

    @keyframes pulseGlow {
        0%, 100% { box-shadow: 0 0 0 rgba(246,183,60,0.0); }
        50% { box-shadow: 0 0 36px rgba(246,183,60,0.22); }
    }

    /* Three.js 3D Containers */
    .techdraw-3d-container {
        position: relative;
        width: 100%;
        height: 420px;
        border-radius: 20px;
        overflow: hidden;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border: 2px solid #cbd5e1;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
    }

    .techdraw-3d-canvas {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

    .techdraw-3d-info {
        position: absolute;
        bottom: 12px;
        left: 12px;
        right: 12px;
        background: rgba(30, 41, 59, 0.85);
        color: white;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 600;
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        pointer-events: none;
    }

    .techdraw-3d-info .label {
        display: inline-block;
        margin-right: 12px;
        color: #cbd5e1;
    }

    .techdraw-3d-info .value {
        color: #93c5fd;
        font-weight: 700;
    }
/* ── Modo oscuro Lab STEM ── */
html[data-theme="dark"] .stem-shell {
    --stem-mist: #1e293b;
    --stem-pale: #243447;
    --stem-fog: #0f172a;
    --stem-slate: #e2e8f0;
    --stem-ink: #f8fafc;
    --stem-muted: #b8c4d4;
    --stem-border: rgba(148, 163, 184, 0.28);
    --stem-paper: #0f172a;
    --stem-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.45);
    color: var(--stem-ink);
    background-color: var(--stem-paper);
}
html[data-theme="dark"] .stem-grid {
    background-color: #0f172a !important;
    background-image:
        linear-gradient(rgba(56, 189, 248, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.04) 1px, transparent 1px) !important;
}
html[data-theme="dark"] .stem-shell .panel-card,
html[data-theme="dark"] .stem-shell .bg-white,
html[data-theme="dark"] .lab-stem-shell .bg-white,
html[data-theme="dark"] .stem-shell [class*="rounded-[28px]"].bg-white,
html[data-theme="dark"] .stem-shell [class*="rounded-xl"].bg-white,
html[data-theme="dark"] .stem-shell [class*="rounded-2xl"].bg-white {
    background: var(--dm-bg-card, #1e293b) !important;
    border-color: var(--dm-border, #475569) !important;
    color: var(--dm-text-primary, #f8fafc) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .stem-shell .bg-slate-50,
html[data-theme="dark"] .stem-shell .bg-slate-100,
html[data-theme="dark"] .stem-shell .bg-gray-50,
html[data-theme="dark"] .stem-shell .bg-gray-100,
html[data-theme="dark"] .stem-shell .from-slate-50,
html[data-theme="dark"] .stem-shell .to-\[\#E6F6F8\],
html[data-theme="dark"] .stem-shell .from-\[\#F4FAFB\],
html[data-theme="dark"] .stem-shell .to-\[\#E6F6F8\] {
    background: rgba(15, 23, 42, 0.65) !important;
    background-image: none !important;
}
html[data-theme="dark"] .stem-shell .bg-sky-50,
html[data-theme="dark"] .stem-shell .bg-amber-50,
html[data-theme="dark"] .stem-shell .bg-emerald-50,
html[data-theme="dark"] .stem-shell .bg-rose-50,
html[data-theme="dark"] .stem-shell .bg-cyan-50,
html[data-theme="dark"] .stem-shell .bg-indigo-50,
html[data-theme="dark"] .stem-shell .bg-violet-50,
html[data-theme="dark"] .stem-shell .bg-blue-50,
html[data-theme="dark"] .stem-shell .bg-orange-50,
html[data-theme="dark"] .stem-shell .bg-teal-50,
html[data-theme="dark"] .stem-shell .bg-pink-50,
html[data-theme="dark"] .stem-shell .stem-chem-shells {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: var(--dm-border, #475569) !important;
}
html[data-theme="dark"] .stem-shell .text-slate-800,
html[data-theme="dark"] .stem-shell .text-slate-900,
html[data-theme="dark"] .stem-shell .text-slate-700,
html[data-theme="dark"] .stem-shell .text-gray-800,
html[data-theme="dark"] .stem-shell .text-gray-900,
html[data-theme="dark"] .stem-shell h2.text-2xl,
html[data-theme="dark"] .stem-shell h3.text-xl {
    color: var(--dm-text-primary, #f8fafc) !important;
}
html[data-theme="dark"] .stem-shell .text-slate-600,
html[data-theme="dark"] .stem-shell .text-slate-500,
html[data-theme="dark"] .stem-shell .text-slate-400,
html[data-theme="dark"] .stem-shell .text-gray-500,
html[data-theme="dark"] .stem-shell .text-gray-600 {
    color: var(--dm-text-muted, #b8c4d4) !important;
}
html[data-theme="dark"] .stem-shell .text-indigo-900,
html[data-theme="dark"] .stem-shell .text-indigo-800,
html[data-theme="dark"] .stem-shell .text-indigo-700,
html[data-theme="dark"] .stem-shell .text-sky-700,
html[data-theme="dark"] .stem-shell .text-amber-700,
html[data-theme="dark"] .stem-shell .text-emerald-700,
html[data-theme="dark"] .stem-shell .text-blue-800,
html[data-theme="dark"] .stem-shell .text-emerald-800 {
    color: #7dd3fc !important;
}
html[data-theme="dark"] .stem-shell .text-indigo-600,
html[data-theme="dark"] .stem-shell .text-sky-600,
html[data-theme="dark"] .stem-shell .text-amber-600,
html[data-theme="dark"] .stem-shell .text-rose-600,
html[data-theme="dark"] .stem-shell .text-cyan-600 {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .stem-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="dark"] .stem-shell select,
html[data-theme="dark"] .stem-shell textarea {
    background: #0f172a !important;
    border-color: var(--dm-border, #475569) !important;
    color: var(--dm-text-primary, #f8fafc) !important;
}
html[data-theme="dark"] .stem-shell input::placeholder,
html[data-theme="dark"] .stem-shell textarea::placeholder {
    color: #64748b !important;
}
html[data-theme="dark"] .stem-shell .border-slate-200,
html[data-theme="dark"] .stem-shell .border-slate-100,
html[data-theme="dark"] .stem-shell .border-gray-200,
html[data-theme="dark"] .stem-shell .border-blue-200,
html[data-theme="dark"] .stem-shell .border-indigo-200,
html[data-theme="dark"] .stem-shell .border-amber-200,
html[data-theme="dark"] .stem-shell .border-emerald-200,
html[data-theme="dark"] .stem-shell .border-rose-100,
html[data-theme="dark"] .stem-shell .border-sky-100 {
    border-color: var(--dm-border, #475569) !important;
}
html[data-theme="dark"] .stem-shell .stem-area-btn.bg-white,
html[data-theme="dark"] .stem-shell button.bg-slate-100,
html[data-theme="dark"] .stem-shell .bg-slate-100 {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
html[data-theme="dark"] .stem-shell .bg-gradient-to-br.from-slate-50,
html[data-theme="dark"] .stem-shell [class*="bg-gradient-to"][class*="from-slate"],
html[data-theme="dark"] .stem-shell [class*="bg-gradient-to"][class*="from-white"] {
    background: #1e293b !important;
    background-image: none !important;
}
html[data-theme="dark"] .stem-shell .pulley-stage {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
}
html[data-theme="dark"] .techdraw-3d-container {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border-color: #475569 !important;
}
html[data-theme="dark"] .stem-shell .text-\[var\(--stem-slate\)\],
html[data-theme="dark"] .stem-shell [style*="color:#1E3A5F"] {
    color: #f8fafc !important;
}
html[data-theme="dark"] .stem-shell .shadow-xl,
html[data-theme="dark"] .stem-shell .shadow-lg {
    box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .stem-shell .bg-amber-50,
html[data-theme="dark"] .stem-shell .bg-red-50 {
    color: #fde68a !important;
}
html[data-theme="dark"] .stem-shell .text-amber-700,
html[data-theme="dark"] .stem-shell .text-amber-800,
html[data-theme="dark"] .stem-shell .text-red-700 {
    color: #fde68a !important;
}
html[data-theme="dark"] .stem-shell .from-amber-100,
html[data-theme="dark"] .stem-shell .to-orange-100,
html[data-theme="dark"] .stem-shell .from-emerald-100,
html[data-theme="dark"] .stem-shell .to-teal-100 {
    background: rgba(30, 41, 59, 0.95) !important;
    background-image: none !important;
    color: #e2e8f0 !important;
}

/* SVG / sims: tokens de tema (clases — no depender del fill inline) */
.stem-shell .stem-sim-host {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.stem-shell .stem-sim-paper { fill: #f8fafc; }
.stem-shell .stem-sim-axis { stroke: #94a3b8; }
.stem-shell .stem-sim-tick { fill: #334155; }
.stem-shell .stem-sim-tick-num { fill: #475569; }
.stem-shell [data-stem-tex] .katex { font-size: 1.05em; }
.stem-shell [data-stem-tex] .katex-display { margin: 0; }
.stem-shell .bg-indigo-600 .katex,
.stem-shell .bg-indigo-600 .katex * {
    color: #fff !important;
}

html[data-theme="dark"] .stem-shell .stem-sim-host,
html[data-theme="dark"] .stem-shell .stem-sim-svg,
html[data-theme="dark"] .stem-shell svg.rounded-2xl.bg-slate-50,
html[data-theme="dark"] .stem-shell .rounded-2xl.bg-slate-50,
html[data-theme="dark"] .stem-shell .rounded-xl.bg-slate-50,
html[data-theme="dark"] .stem-shell .bg-white\/95,
html[data-theme="dark"] .stem-shell .stem-prob-subnav {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-color: #334155 !important;
}
html[data-theme="dark"] .stem-shell .stem-sim-paper { fill: #0f172a !important; }
html[data-theme="dark"] .stem-shell .stem-sim-axis { stroke: #64748b !important; }
html[data-theme="dark"] .stem-shell .stem-sim-tick { fill: #e2e8f0 !important; }
html[data-theme="dark"] .stem-shell .stem-sim-tick-num { fill: #cbd5e1 !important; }

html[data-theme="dark"] .stem-shell svg rect[fill="#f8fafc"],
html[data-theme="dark"] .stem-shell svg rect[fill="#fff"],
html[data-theme="dark"] .stem-shell svg rect[fill="#ffffff"],
html[data-theme="dark"] .stem-shell svg rect[fill="#eff6ff"],
html[data-theme="dark"] .stem-shell svg rect[fill="#f5f3ff"],
html[data-theme="dark"] .stem-shell svg rect[fill="#E6F6F8"],
html[data-theme="dark"] .stem-shell svg rect[fill="#e6f6f8"],
html[data-theme="dark"] .stem-shell svg rect[fill="#fde68a"],
html[data-theme="dark"] .stem-shell svg rect[fill="#F4FAFB"] {
    fill: #0f172a !important;
}
html[data-theme="dark"] .stem-shell .from-slate-50.to-\[\#E6F6F8\],
html[data-theme="dark"] .stem-shell [class*="from-slate-50"][class*="to-[#E6F6F8]"] {
    background: #0f172a !important;
    background-image: none !important;
}
/* Solo aclarar textos oscuros cuando el SVG ya tiene papel oscuro */
html[data-theme="dark"] .stem-shell svg:has(.stem-sim-paper) text[fill="#334155"],
html[data-theme="dark"] .stem-shell svg:has(.stem-sim-paper) text[fill="#475569"],
html[data-theme="dark"] .stem-shell svg:has(rect[fill="#0f172a"]) text[fill="#334155"],
html[data-theme="dark"] .stem-shell svg:has(rect[fill="#0f172a"]) text[fill="#475569"],
html[data-theme="dark"] .stem-shell svg:has(rect[fill="#0f172a"]) text[fill="#0f172a"],
html[data-theme="dark"] .stem-shell svg:has(rect[fill="#0f172a"]) text[fill="#1e3a8a"],
html[data-theme="dark"] .stem-shell svg:has(rect[fill="#0f172a"]) text[fill="#163A4A"] {
    fill: #e2e8f0 !important;
}
html[data-theme="dark"] .stem-shell .bg-red-50,
html[data-theme="dark"] .stem-shell .bg-green-50,
html[data-theme="dark"] .stem-shell .bg-amber-50,
html[data-theme="dark"] .stem-shell .bg-sky-50,
html[data-theme="dark"] .stem-shell .bg-teal-50,
html[data-theme="dark"] .stem-shell .bg-violet-50,
html[data-theme="dark"] .stem-shell .bg-pink-50,
html[data-theme="dark"] .stem-shell .bg-blue-50,
html[data-theme="dark"] .stem-shell .bg-\[\#E4F1F5\] {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #e2e8f0 !important;
}

/* Cabeceras de sección (logaritmos / inecuaciones / finanzas) */
.stem-shell .stem-sec-hero {
    border: 1px solid transparent;
}
.stem-shell .stem-sec-hero--teal {
    background: linear-gradient(135deg, #0D8A9A 0%, #0A6B78 55%, #2BB3C9 100%);
}
.stem-shell .stem-sec-hero--emerald {
    background: linear-gradient(135deg, #047857 0%, #0d9488 55%, #0f766e 100%);
}
.stem-shell .stem-sec-hero--violet {
    background: linear-gradient(135deg, #0A4F73 0%, #0D8A9A 50%, #6366f1 100%);
}
html[data-theme="dark"] .stem-shell .stem-sec-hero--teal {
    background: linear-gradient(135deg, #0e7490 0%, #155e75 50%, #22d3ee 100%) !important;
}
html[data-theme="dark"] .stem-shell .stem-sec-hero--emerald {
    background: linear-gradient(135deg, #064e3b 0%, #0f766e 60%, #115e59 100%) !important;
}
html[data-theme="dark"] .stem-shell .stem-sec-hero--violet {
    background: linear-gradient(135deg, #0369a1 0%, #0e7490 45%, #818cf8 100%) !important;
}

/* Azul oscuro remapeado ilegible en oscuro → acento claro */
html[data-theme="dark"] .stem-shell [class*="text-indigo-"],
html[data-theme="dark"] .stem-shell [class*="text-violet-"],
html[data-theme="dark"] .stem-shell [class*="text-purple-"],
html[data-theme="dark"] .stem-shell [class*="text-fuchsia-"],
html[data-theme="dark"] .stem-shell [class*="text-blue-"],
html[data-theme="dark"] .stem-shell [class*="text-sky-"],
html[data-theme="dark"] .stem-shell [class*="text-cyan-"],
html[data-theme="dark"] .stem-shell [class*="text-teal-"] {
    color: #7dd3fc !important;
}
html[data-theme="dark"] .stem-shell .text-white,
html[data-theme="dark"] .stem-shell .text-white\/85,
html[data-theme="dark"] .stem-shell [class*="text-indigo-1"],
html[data-theme="dark"] .stem-shell [class*="text-indigo-2"],
html[data-theme="dark"] .stem-shell [class*="text-violet-1"],
html[data-theme="dark"] .stem-shell [class*="text-violet-2"] {
    color: #f8fafc !important;
}
html[data-theme="dark"] .stem-shell .from-indigo-600,
html[data-theme="dark"] .stem-shell .from-indigo-700,
html[data-theme="dark"] .stem-shell .from-indigo-800,
html[data-theme="dark"] .stem-shell .from-violet-600,
html[data-theme="dark"] .stem-shell .from-violet-700,
html[data-theme="dark"] .stem-shell .to-indigo-900,
html[data-theme="dark"] .stem-shell .to-violet-800,
html[data-theme="dark"] .stem-shell .to-\[\#083D5A\] {
    --tw-gradient-from: #0e7490 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: #22d3ee var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html[data-theme="dark"] .stem-shell {
    --stem-blue: #38bdf8;
    --stem-blue-deep: #0ea5e9;
    --stem-navy: #38bdf8;
    --stem-slate: #e2e8f0;
    --stem-hero: linear-gradient(145deg, #0e7490 0%, #0369a1 42%, #22d3ee 100%);
}

/* Teclado matemático inecuaciones */
.stem-shell .ineq-kbd {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.65rem;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.stem-shell .ineq-kbd-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.3rem;
}
.stem-shell .ineq-kbd-row:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stem-shell .ineq-kbd-key {
    min-height: 2.4rem;
    border-radius: 0.65rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    font-weight: 800;
    font-size: 0.95rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s;
}
.stem-shell .ineq-kbd-key:hover {
    background: #e0f2fe;
    border-color: #7dd3fc;
}
.stem-shell .ineq-kbd-key:active { transform: scale(0.97); }
.stem-shell .ineq-kbd-key--op {
    background: #ede9fe;
    border-color: #c4b5fd;
    color: #5b21b6;
}
.stem-shell .ineq-kbd-key--act {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}
.stem-shell .ineq-line-wrap {
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 0.5rem 0.25rem;
}
.stem-shell .ineq-line-svg {
    width: 100%;
    max-width: 640px;
    height: auto;
    display: block;
    margin: 0 auto;
    color: #334155;
}
.stem-shell .ineq-axis { color: #475569; }
.stem-shell .ineq-axis-label { fill: #475569; }
.stem-shell .ineq-hint { fill: #64748b; }

.stem-shell .ineq-sign-table {
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 0.85rem 0.75rem 0.65rem;
    overflow-x: auto;
}
.stem-shell .ineq-sign-table__label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.45rem;
    text-align: center;
}
.stem-shell .ineq-sign-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    min-width: max-content;
    margin: 0 auto;
}
.stem-shell .ineq-sign-cell {
    min-width: 5.2rem;
    padding: 0.55rem 0.7rem 0.45rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    border-radius: 0.65rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    margin: 0 2px;
}
.stem-shell .ineq-sign-cell--sol {
    background: #ecfdf5;
    border-color: #6ee7b7;
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25);
}
.stem-shell .ineq-sign-iv {
    font-size: 0.68rem;
    color: #64748b;
    line-height: 1.2;
    white-space: nowrap;
}
.stem-shell .ineq-sign-iv .katex { font-size: 0.85em; }
.stem-shell .ineq-sg {
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1;
    font-family: ui-sans-serif, system-ui, sans-serif;
}
.stem-shell .ineq-sg--pos { color: #0284c7; }
.stem-shell .ineq-sg--neg { color: #e11d48; }
.stem-shell .ineq-sign-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.15rem 0.15rem;
    min-width: 3.2rem;
}
.stem-shell .ineq-root-dot {
    font-size: 0.95rem;
    color: #059669;
    line-height: 1;
}
.stem-shell .ineq-root-dot--hole {
    color: #e11d48;
}
.stem-shell .ineq-root-lab {
    font-size: 0.78rem;
    color: #334155;
    white-space: nowrap;
}
.stem-shell .ineq-root-lab .katex { font-size: 0.92em; }
.stem-shell .ineq-sign-caption {
    margin: 0.55rem 0 0;
    font-size: 0.72rem;
    color: #64748b;
    text-align: center;
}

/* Demostración visual del método + ejemplos resueltos */
.stem-shell .ineq-method-demo {
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 0.85rem 0.75rem;
    overflow-x: auto;
}
.stem-shell .ineq-method-demo__title {
    font-size: 0.75rem;
    font-weight: 800;
    color: #475569;
    margin-bottom: 0.55rem;
}
.stem-shell .ineq-method-demo__row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0.15rem;
    min-width: max-content;
    margin: 0 auto;
}
.stem-shell .ineq-method-demo__cell {
    min-width: 4.8rem;
    padding: 0.5rem 0.55rem;
    border-radius: 0.65rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}
.stem-shell .ineq-method-demo__cell--sol {
    background: #ecfdf5;
    border-color: #6ee7b7;
}
.stem-shell .ineq-method-demo__iv {
    font-size: 0.7rem;
    color: #64748b;
    white-space: nowrap;
}
.stem-shell .ineq-method-demo__root {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
    font-size: 0.72rem;
    color: #334155;
    gap: 0.1rem;
}
.stem-shell .ineq-method-demo__cap {
    margin: 0.5rem 0 0;
    font-size: 0.7rem;
    color: #64748b;
    text-align: center;
}
.stem-shell .ineq-method-demo__sys {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
    font-size: 0.85rem;
    color: #334155;
}
.stem-shell .ineq-method-demo__sys-cap {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0d9488;
}

.stem-shell .ineq-ex__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}
.stem-shell .ineq-ex__badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #ede9fe;
    color: #5b21b6;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.2rem 0.65rem;
}
.stem-shell .ineq-ex__steps {
    list-style: decimal;
    padding-left: 1.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.45;
}
.stem-shell .ineq-ex__sol {
    border-radius: 0.85rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
    font-weight: 800;
    text-align: center;
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
}
.stem-shell .ineq-root-fo {
    display: flex;
    justify-content: center;
    font-size: 11px;
    color: #334155;
    line-height: 1.1;
}
.stem-shell .ineq-root-fo .katex { font-size: 0.95em; }

html[data-theme="dark"] .stem-shell .ineq-sign-table {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border-color: #334155;
}
html[data-theme="dark"] .stem-shell .ineq-sign-cell {
    background: #1e293b;
    border-color: #475569;
}
html[data-theme="dark"] .stem-shell .ineq-sign-cell--sol {
    background: rgba(16, 185, 129, 0.14);
    border-color: #34d399;
}
html[data-theme="dark"] .stem-shell .ineq-sg--pos { color: #38bdf8; }
html[data-theme="dark"] .stem-shell .ineq-sg--neg { color: #fb7185; }
html[data-theme="dark"] .stem-shell .ineq-root-lab,
html[data-theme="dark"] .stem-shell .ineq-root-fo { color: #e2e8f0; }
html[data-theme="dark"] .stem-shell .ineq-sign-caption,
html[data-theme="dark"] .stem-shell .ineq-sign-iv,
html[data-theme="dark"] .stem-shell .ineq-sign-table__label { color: #94a3b8; }
html[data-theme="dark"] .stem-shell .ineq-method-demo {
    background: #0f172a;
    border-color: #334155;
}
html[data-theme="dark"] .stem-shell .ineq-method-demo__cell {
    background: #1e293b;
    border-color: #475569;
}
html[data-theme="dark"] .stem-shell .ineq-method-demo__cell--sol {
    background: rgba(16, 185, 129, 0.14);
    border-color: #34d399;
}
html[data-theme="dark"] .stem-shell .ineq-method-demo__title,
html[data-theme="dark"] .stem-shell .ineq-method-demo__iv,
html[data-theme="dark"] .stem-shell .ineq-method-demo__cap { color: #94a3b8; }
html[data-theme="dark"] .stem-shell .ineq-method-demo__root,
html[data-theme="dark"] .stem-shell .ineq-method-demo__sys { color: #e2e8f0; }
html[data-theme="dark"] .stem-shell .ineq-ex__badge {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
}
html[data-theme="dark"] .stem-shell .ineq-ex__steps { color: #cbd5e1; }
html[data-theme="dark"] .stem-shell .ineq-ex__sol {
    background: rgba(16, 185, 129, 0.14);
    border-color: #34d399;
    color: #6ee7b7;
}

html[data-theme="dark"] .stem-shell .ineq-kbd {
    background: #0f172a;
    border-color: #334155;
}
html[data-theme="dark"] .stem-shell .ineq-kbd-key {
    background: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}
html[data-theme="dark"] .stem-shell .ineq-kbd-key:hover {
    background: rgba(56, 189, 248, 0.14);
    border-color: #38bdf8;
}
html[data-theme="dark"] .stem-shell .ineq-kbd-key--op {
    background: rgba(129, 140, 248, 0.18);
    border-color: #818cf8;
    color: #c4b5fd;
}
html[data-theme="dark"] .stem-shell .ineq-kbd-key--act {
    background: rgba(240, 192, 0, 0.16);
    border-color: #f0c000;
    color: #fde68a;
}
html[data-theme="dark"] .stem-shell .ineq-line-wrap {
    background: #0f172a;
    border-color: #334155;
}
html[data-theme="dark"] .stem-shell .ineq-line-svg { color: #e2e8f0; }
html[data-theme="dark"] .stem-shell .ineq-axis-label,
html[data-theme="dark"] .stem-shell .ineq-hint { fill: #94a3b8; }

/* Magnitudes + campo gravitatorio (KaTeX + dark) */
.stem-shell .stem-grav-mag-lab {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #4f46e5;
}
.stem-shell .stem-grav-mag-lab .katex { font-size: 0.95em; color: inherit; }
.stem-shell .stem-grav-mag-lab--rose { color: #e11d48; }
.stem-shell .stem-grav-mag-lab--cyan { color: #0e7490; }
.stem-shell .stem-grav-mag-lab--em { color: #059669; }
.stem-shell .stem-grav-mag-lab--amber { color: #d97706; }
.stem-shell .stem-grav-mag-lab--violet { color: #7c3aed; }
.stem-shell .stem-grav-mag-formula {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #64748b;
}
.stem-shell .stem-grav-mag-formula .katex { font-size: 0.92em; color: inherit; }
html[data-theme="dark"] .stem-shell .stem-grav-mag-formula { color: #94a3b8; }
.stem-shell .stem-grav-note .stem-grav-k,
.stem-shell .stem-grav-note .katex { color: inherit; font-size: 0.95em; }
.stem-shell .stem-grav-field-wrap {
    background: #0f172a;
    border-radius: 1rem;
}
.stem-shell .stem-grav-field-cap {
    padding: 0.35rem 0.75rem 0.55rem;
    text-align: center;
    background: #0f172a;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}
.stem-shell .stem-grav-field-cap .stem-grav-k { color: #cbd5e1; font-size: 0.78rem; }
.stem-shell .stem-vec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    color: #1e293b;
}
.stem-shell .stem-vec-table th,
.stem-shell .stem-vec-table td {
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    text-align: right;
    white-space: nowrap;
}
.stem-shell .stem-vec-table th:first-child,
.stem-shell .stem-vec-table td:first-child { text-align: left; }
.stem-shell .stem-vec-table th {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}
html[data-theme="dark"] .stem-shell .stem-vec-table { color: var(--dm-text-primary, #e2e8f0); }
html[data-theme="dark"] .stem-shell .stem-vec-table th { color: var(--dm-text-muted, #94a3b8); }
html[data-theme="dark"] .stem-shell .stem-vec-table td,
html[data-theme="dark"] .stem-shell .stem-vec-table th { border-bottom-color: rgba(148, 163, 184, 0.22); }
.stem-shell .stem-efield-stage { background: #0b1220; cursor: crosshair; }
.stem-shell .stem-efield-stage svg { display: block; width: 100%; height: auto; }

html[data-theme="dark"] .stem-shell .stem-grav-mag-lab { color: #a5b4fc; }
html[data-theme="dark"] .stem-shell .stem-grav-mag-lab--rose { color: #fda4af; }
html[data-theme="dark"] .stem-shell .stem-grav-mag-lab--cyan { color: #67e8f9; }
html[data-theme="dark"] .stem-shell .stem-grav-mag-lab--em { color: #6ee7b7; }
html[data-theme="dark"] .stem-shell .stem-grav-mag-lab--amber { color: #fcd34d; }
html[data-theme="dark"] .stem-shell .stem-grav-mag-lab--violet { color: #c4b5fd; }
html[data-theme="dark"] .stem-shell .stem-grav-mags .text-slate-800 {
    color: #f8fafc !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-mags .bg-indigo-50 {
    background: rgba(49, 46, 129, 0.42) !important;
    border-color: #6366f1 !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-mags .bg-rose-50 {
    background: rgba(136, 19, 55, 0.38) !important;
    border-color: #fb7185 !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-mags .bg-cyan-50 {
    background: rgba(14, 116, 144, 0.38) !important;
    border-color: #22d3ee !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-mags .bg-emerald-50 {
    background: rgba(6, 78, 59, 0.48) !important;
    border-color: #34d399 !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-mags .bg-amber-50 {
    background: rgba(120, 53, 15, 0.42) !important;
    border-color: #fbbf24 !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-mags .bg-violet-50 {
    background: rgba(76, 29, 149, 0.42) !important;
    border-color: #a78bfa !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-rchip.bg-white,
html[data-theme="dark"] .stem-shell .stem-grav-rchip.text-amber-600 {
    background: #1c1917 !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-rchip .text-amber-600,
html[data-theme="dark"] .stem-shell .stem-grav-rchip .text-amber-700 {
    color: #fde68a !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-field-cap {
    color: #e2e8f0;
}
html[data-theme="dark"] .stem-shell .stem-grav-theory-card--field.panel-card {
    background: linear-gradient(145deg, #0c4a6e, #0f172a) !important;
    border: 1px solid #0369a1 !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-theory-card--kepler.panel-card {
    background: linear-gradient(145deg, #4c1d95, #0f172a) !important;
    border: 1px solid #7c3aed !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-theory-card .katex {
    color: inherit;
}
html[data-theme="dark"] .stem-shell .stem-on-amber {
    color: #1c1917 !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-multi .bg-amber-50 {
    background: rgba(120, 53, 15, 0.45) !important;
    border-color: #d97706 !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-multi .text-amber-700 {
    color: #fcd34d !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-del {
    background: rgba(127, 29, 29, 0.72) !important;
    color: #fecaca !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-freefall .bg-amber-50 {
    background: rgba(120, 53, 15, 0.42) !important;
    border-color: #fbbf24 !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-freefall .bg-indigo-50 {
    background: rgba(49, 46, 129, 0.42) !important;
    border-color: #818cf8 !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-freefall .text-amber-700 {
    color: #fcd34d !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-freefall .text-indigo-700 {
    color: #c7d2fe !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-note {
    background: rgba(15, 23, 42, 0.85) !important;
    color: #cbd5e1 !important;
    border: 1px solid #475569;
}
html[data-theme="dark"] .stem-shell .stem-grav-note .katex { color: #e2e8f0; }
html[data-theme="dark"] .stem-shell .stem-grav-neg-box {
    background: rgba(120, 53, 15, 0.28) !important;
    border-color: #b45309 !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-neg-box .text-amber-900 {
    color: #fcd34d !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-neg-copy,
html[data-theme="dark"] .stem-shell .stem-grav-neg-copy p {
    color: #e2e8f0 !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-neg-copy .katex { color: #fde68a; }

html[data-theme="dark"] .stem-shell .stem-grav-fgfc-box {
    background: rgba(14, 116, 144, 0.28);
    border-color: #0891b2;
}
html[data-theme="dark"] .stem-shell .stem-grav-fgfc-box .text-cyan-900 {
    color: #a5f3fc !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-fgfc-copy,
html[data-theme="dark"] .stem-shell .stem-grav-fgfc-copy p {
    color: #e2e8f0 !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-fgfc-copy .katex { color: #67e8f9; }

html[data-theme="dark"] .stem-shell .from-violet-50,
html[data-theme="dark"] .stem-shell .to-indigo-50 {
    --tw-gradient-from: rgba(49, 46, 129, 0.35) !important;
    --tw-gradient-to: rgba(30, 58, 138, 0.35) !important;
}
html[data-theme="dark"] .stem-shell .bg-gradient-to-r.from-violet-50 {
    background: linear-gradient(90deg, rgba(67, 56, 202, 0.28), rgba(30, 64, 175, 0.28)) !important;
}

/* Órbita gravitatoria — fondo según tema (claro / oscuro) */
.stem-shell .stem-grav-orbit-wrap,
.stem-shell .stem-grav-space {
    min-height: 280px;
    padding-bottom: 3.4rem;
    background: #dbeafe !important;
    background-color: #dbeafe !important;
    color: #1e293b;
    border-color: #cbd5e1 !important;
}
.stem-shell .stem-grav-orbit-wrap .stem-grav-orbit {
    display: block;
    width: 100%;
    height: auto;
    background: transparent !important;
}
/* Fondo del SVG: CSS manda (JS solo de refuerzo) */
.stem-shell .stem-grav-space-fill {
    fill: #dbeafe !important;
}
html[data-theme="dark"] .stem-shell .stem-grav-orbit-wrap,
html[data-theme="dark"] .stem-shell .stem-grav-space {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0;
}
html[data-theme="dark"] .stem-shell .stem-grav-space-fill {
    fill: #0f172a !important;
}
.stem-shell .stem-grav-hud {
    position: absolute;
    top: 0.55rem;
    z-index: 2;
    pointer-events: none;
    max-width: 46%;
}
.stem-shell .stem-grav-hud--left { left: 0.55rem; }
.stem-shell .stem-grav-hud--right { right: 0.55rem; text-align: right; }
.stem-shell .stem-grav-hud-inner {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.45);
    backdrop-filter: blur(4px);
}
html[data-theme="dark"] .stem-shell .stem-grav-hud-inner {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(148, 163, 184, 0.28);
}
.stem-shell .stem-grav-hud--right .stem-grav-hud-inner { align-items: flex-end; }
.stem-shell .stem-grav-k {
    display: inline-block;
    line-height: 1.25;
    font-size: 0.78rem;
    color: #334155;
}
.stem-shell .stem-grav-k .katex { font-size: 1em; color: inherit; }
.stem-shell .stem-grav-k--muted { color: #475569; }
.stem-shell .stem-grav-k--amber { color: #b45309; font-weight: 700; }
.stem-shell .stem-grav-k--rose { color: #be123c; font-weight: 700; }
.stem-shell .stem-grav-k--green { color: #15803d; font-weight: 700; }
.stem-shell .stem-grav-k--orange { color: #c2410c; }
.stem-shell .stem-grav-k--cyan { color: #0e7490; font-weight: 700; }
.stem-shell .stem-grav-k--violet { color: #6d28d9; }
html[data-theme="dark"] .stem-shell .stem-grav-k { color: #e2e8f0; }
html[data-theme="dark"] .stem-shell .stem-grav-k--muted { color: #cbd5e1; }
html[data-theme="dark"] .stem-shell .stem-grav-k--amber { color: #fde68a; }
html[data-theme="dark"] .stem-shell .stem-grav-k--rose { color: #fecdd3; }
html[data-theme="dark"] .stem-shell .stem-grav-k--green { color: #86efac; }
html[data-theme="dark"] .stem-shell .stem-grav-k--orange { color: #fdba74; }
html[data-theme="dark"] .stem-shell .stem-grav-k--cyan { color: #a5f3fc; }
html[data-theme="dark"] .stem-shell .stem-grav-k--violet { color: #c4b5fd; }
html[data-theme="dark"] .stem-shell .stem-grav-hud .katex,
html[data-theme="dark"] .stem-shell .stem-grav-legend .katex {
    color: inherit !important;
}
.stem-shell .stem-grav-legend {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.45rem;
    z-index: 2;
    pointer-events: none;
}
.stem-shell .stem-grav-legend-inner {
    padding: 0.4rem 0.65rem 0.35rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 1rem;
}
html[data-theme="dark"] .stem-shell .stem-grav-legend-inner {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(148, 163, 184, 0.3);
}
.stem-shell .stem-grav-leg {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.stem-shell .stem-grav-swatch {
    display: inline-block;
    width: 1.1rem;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}
.stem-shell .stem-grav-swatch--fg { background: #f43f5e; height: 4px; }
.stem-shell .stem-grav-swatch--fc { background: #22d3ee; height: 4px; }
.stem-shell .stem-grav-swatch--v { background: #4ade80; height: 3.5px; }
.stem-shell .stem-grav-legend-note {
    width: 100%;
    margin: 0;
    font-size: 0.68rem;
    color: #64748b;
    line-height: 1.3;
}
.stem-shell .stem-grav-legend-note .katex { font-size: 0.95em; color: inherit; }
html[data-theme="dark"] .stem-shell .stem-grav-legend-note { color: #94a3b8; }
.stem-shell .stem-grav-svg-lab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}
.stem-shell .stem-grav-svg-lab .katex { font-size: 1em; color: inherit; }

/* Comparativa planetas */
.stem-shell .stem-grav-cmp-tab {
    padding: 0.4rem 0.75rem;
    border-radius: 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.stem-shell .stem-grav-cmp-tab.is-on--g { background: #4f46e5; color: #fff; border-color: #4338ca; }
.stem-shell .stem-grav-cmp-tab.is-on--orb { background: #059669; color: #fff; border-color: #047857; }
.stem-shell .stem-grav-cmp-tab.is-on--esc { background: #d97706; color: #fff; border-color: #b45309; }
.stem-shell .stem-grav-cmp-row {
    display: grid;
    grid-template-columns: 4.5rem 1fr 5.5rem;
    gap: 0.55rem;
    align-items: center;
}
.stem-shell .stem-grav-cmp-name {
    font-size: 0.78rem;
    font-weight: 800;
    color: #334155;
    text-align: right;
}
.stem-shell .stem-grav-cmp-track {
    height: 1.15rem;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}
.stem-shell .stem-grav-cmp-bar {
    height: 100%;
    border-radius: 999px;
    min-width: 0.35rem;
    transition: width 0.45s ease;
}
.stem-shell .stem-grav-cmp-val {
    font-size: 0.78rem;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    text-align: right;
}
.stem-shell .stem-grav-cmp-unit {
    font-size: 0.65rem;
    font-weight: 600;
    color: #64748b;
}
html[data-theme="dark"] .stem-shell .stem-grav-cmp-tab {
    background: #1e293b;
    color: #cbd5e1;
    border-color: #475569;
}
html[data-theme="dark"] .stem-shell .stem-grav-cmp-name { color: #e2e8f0; }
html[data-theme="dark"] .stem-shell .stem-grav-cmp-track { background: #334155; }
html[data-theme="dark"] .stem-shell .stem-grav-cmp-val { color: #f8fafc; }
html[data-theme="dark"] .stem-shell .stem-grav-cmp-unit { color: #94a3b8; }
html[data-theme="dark"] .stem-shell .stem-grav-theory .text-slate-200,
html[data-theme="dark"] .stem-shell .stem-grav-theory .text-slate-300 { color: #cbd5e1; }

/* Deducciones (gravedad) — panel HTML + dark mode */
.stem-shell .stem-grav-deduc-modes {
    width: 100%;
}
.stem-shell .stem-grav-deduc-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: #f8fafc;
    color: #334155;
    border: 2px solid #e2e8f0;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}
.stem-shell .stem-grav-deduc-btn:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}
.stem-shell .stem-grav-deduc-btn__name {
    font-size: 0.92rem;
    font-weight: 800;
    color: inherit;
    line-height: 1.25;
}
.stem-shell .stem-grav-deduc-btn__formula {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}
.stem-shell .stem-grav-deduc-btn__formula .katex { font-size: 1em; color: inherit; }
.stem-shell .stem-grav-deduc-btn__hint {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 0.1rem;
}
.stem-shell .stem-grav-deduc-btn__hint .katex { font-size: 0.95em; color: inherit; }
.stem-shell .stem-grav-deduc-btn .katex { color: inherit; }
.stem-shell .stem-grav-deduc-btn.is-on--orb {
    background: #ecfdf5;
    color: #065f46;
    border-color: #059669;
    box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.25);
}
.stem-shell .stem-grav-deduc-btn.is-on--orb .stem-grav-deduc-btn__formula { color: #047857; }
.stem-shell .stem-grav-deduc-btn.is-on--orb .stem-grav-deduc-btn__hint { color: #059669; }
.stem-shell .stem-grav-deduc-btn.is-on--esc {
    background: #fffbeb;
    color: #92400e;
    border-color: #d97706;
    box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.25);
}
.stem-shell .stem-grav-deduc-btn.is-on--esc .stem-grav-deduc-btn__formula { color: #b45309; }
.stem-shell .stem-grav-deduc-btn.is-on--esc .stem-grav-deduc-btn__hint { color: #d97706; }
.stem-shell .stem-grav-deduc-btn.is-on--w {
    background: #f0f9ff;
    color: #0c4a6e;
    border-color: #0284c7;
    box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.25);
}
.stem-shell .stem-grav-deduc-btn.is-on--w .stem-grav-deduc-btn__formula { color: #0369a1; }
.stem-shell .stem-grav-deduc-btn.is-on--w .stem-grav-deduc-btn__hint { color: #0284c7; }
.stem-shell .stem-grav-deduc-nav {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}
.stem-shell .stem-grav-deduc-stage {
    align-items: start;
}
.stem-shell .stem-grav-deduc-anim {
    background: #0f172a;
    border: 1px solid #334155;
    min-height: 280px;
    position: sticky;
    top: 0.75rem;
}
.stem-shell .stem-grav-deduc-panel {
    background: #0f172a;
    border: 1px solid #334155;
    color: #e2e8f0;
    min-height: 280px;
    max-height: min(70vh, 640px);
    overflow-y: auto;
}
.stem-shell .stem-grav-deduc-panel-inner { display: flex; flex-direction: column; gap: 0.35rem; }
.stem-shell .stem-grav-deduc-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: #f8fafc; }
.stem-shell .stem-grav-deduc-stepn { margin: 0; font-size: 0.75rem; color: #94a3b8; font-weight: 600; }
.stem-shell .stem-grav-deduc-body { flex: 1; display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.5rem; }
.stem-shell .stem-grav-deduc-body--accum { gap: 0.85rem; }
.stem-shell .stem-grav-deduc-step {
    padding: 0.7rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid #334155;
}
.stem-shell .stem-grav-deduc-step.is-current {
    border-color: #38bdf8;
    background: rgba(14, 116, 144, 0.22);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25);
}
.stem-shell .stem-grav-deduc-step__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
}
.stem-shell .stem-grav-deduc-step__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    background: #334155;
    color: #e2e8f0;
    flex-shrink: 0;
}
.stem-shell .stem-grav-deduc-step.is-current .stem-grav-deduc-step__n {
    background: #0284c7;
    color: #fff;
}
.stem-shell .stem-grav-deduc-step__lab {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #94a3b8;
}
.stem-shell .stem-grav-deduc-step.is-current .stem-grav-deduc-step__lab { color: #7dd3fc; }
.stem-shell .stem-grav-deduc-line { margin: 0 0 0.4rem; font-size: 0.9rem; line-height: 1.5; color: #e2e8f0; }
.stem-shell .stem-grav-deduc-line:last-of-type { margin-bottom: 0; }
.stem-shell .stem-grav-deduc-line .katex { color: #f1f5f9; font-size: 1.02em; }
.stem-shell .stem-grav-deduc-step .stem-grav-deduc-hi {
    margin-top: 0.55rem;
    text-align: center;
    padding: 0.5rem 0.65rem;
    border-radius: 0.65rem;
    background: #1e293b;
    border: 1px solid #475569;
    color: #fbbf24;
    font-weight: 800;
}
.stem-shell .stem-grav-deduc-step.is-current .stem-grav-deduc-hi {
    border-color: #f59e0b;
    background: rgba(120, 53, 15, 0.35);
}
.stem-shell .stem-grav-deduc-hi .katex { color: #fbbf24; font-size: 1.05em; }
.stem-shell .stem-grav-deduc-card--orb { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.stem-shell .stem-grav-deduc-card--esc { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.stem-shell .stem-grav-deduc-card--w { background: #f0f9ff; border: 1px solid #bae6fd; color: #0c4a6e; }
.stem-shell .stem-grav-deduc-card .katex { color: inherit; }

html[data-theme="dark"] .stem-shell .stem-grav-deduc-btn {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}
html[data-theme="dark"] .stem-shell .stem-grav-deduc-btn:hover {
    background: #334155;
    border-color: #64748b;
}
html[data-theme="dark"] .stem-shell .stem-grav-deduc-btn__formula { color: #f1f5f9; }
html[data-theme="dark"] .stem-shell .stem-grav-deduc-btn__hint { color: #94a3b8; }
html[data-theme="dark"] .stem-shell .stem-grav-deduc-btn.is-on--orb {
    background: rgba(6, 78, 59, 0.45);
    color: #a7f3d0;
    border-color: #059669;
}
html[data-theme="dark"] .stem-shell .stem-grav-deduc-btn.is-on--orb .stem-grav-deduc-btn__formula { color: #6ee7b7; }
html[data-theme="dark"] .stem-shell .stem-grav-deduc-btn.is-on--orb .stem-grav-deduc-btn__hint { color: #34d399; }
html[data-theme="dark"] .stem-shell .stem-grav-deduc-btn.is-on--esc {
    background: rgba(120, 53, 15, 0.4);
    color: #fde68a;
    border-color: #d97706;
}
html[data-theme="dark"] .stem-shell .stem-grav-deduc-btn.is-on--esc .stem-grav-deduc-btn__formula { color: #fbbf24; }
html[data-theme="dark"] .stem-shell .stem-grav-deduc-btn.is-on--esc .stem-grav-deduc-btn__hint { color: #fcd34d; }
html[data-theme="dark"] .stem-shell .stem-grav-deduc-btn.is-on--w {
    background: rgba(12, 74, 110, 0.45);
    color: #bae6fd;
    border-color: #0284c7;
}
html[data-theme="dark"] .stem-shell .stem-grav-deduc-btn.is-on--w .stem-grav-deduc-btn__formula { color: #7dd3fc; }
html[data-theme="dark"] .stem-shell .stem-grav-deduc-btn.is-on--w .stem-grav-deduc-btn__hint { color: #38bdf8; }
html[data-theme="dark"] .stem-shell .stem-grav-deduc-nav {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}
html[data-theme="dark"] .stem-shell .stem-grav-deduc-card--orb {
    background: rgba(6, 78, 59, 0.45);
    border-color: #059669;
    color: #a7f3d0;
}
html[data-theme="dark"] .stem-shell .stem-grav-deduc-card--esc {
    background: rgba(120, 53, 15, 0.4);
    border-color: #d97706;
    color: #fde68a;
}
html[data-theme="dark"] .stem-shell .stem-grav-deduc-card--w {
    background: rgba(12, 74, 110, 0.45);
    border-color: #0284c7;
    color: #bae6fd;
}
html[data-theme="dark"] .stem-shell .stem-grav-deduc .text-slate-700 {
    color: #e2e8f0 !important;
}