:root {
            --aq-primary: #3b82f6;
            --aq-primary-light: #e0e7ff;
            --aq-text-dark: #111827;
            --aq-text-secondary: #374151;
            --aq-bg-light: #f3f4f6;
            --aq-border: #93c5fd; 
            --aq-white: #ffffff;
            --aq-code-bg: #eef2ff;
        }

        html {
             scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #020617;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
            color: #D1D5DB; /* Color de texto base */
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        main {
             flex-grow: 1;
             display: flex;
             flex-direction: column;
             width: 100%;
        }
        
        

        /* --- ESTILO PANEL DE CONTROL MÓVIL (CORREGIDO v7.1) --- */
        @media (max-width: 767px) {
            .control-panel {
                /* Vuelve a ser un bloque normal que sigue el flujo */
                background-color: rgba(15, 23, 42, 0.95);
                backdrop-filter: blur(8px);
                border-top: 1px solid #334155;
            }
        }
        @media (min-width: 768px) {
            .control-panel {
                background-color: rgba(15, 23, 42, 0.8);
                backdrop-filter: blur(8px);
                height: 100vh; /* Altura completa en PC */
                position: sticky;
                top: 0;
                overflow-y: auto;
            }
        }
        /* --- FIN ESTILO PANEL MÓVIL --- */


        .control-panel::-webkit-scrollbar { width: 6px; }
        .control-panel::-webkit-scrollbar-track { background: transparent; }
        .control-panel::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 3px; }

        #gas-container-wrapper {
            position: relative;
            width: 98%;
            max-width: 550px;
            margin: 3rem auto 68px; /* Margen superior reducido */
            margin-left: -2px;
        }
        #gas-container {
            box-sizing: border-box; /* ancho físico del pistón incluye sus bordes */
            position: relative;
            /* width y transform se manejan por JS */
            height: 260px; 
            /* CAMBIO: Fondo más sutil y cristalino */
            background: rgba(255, 255, 255, 0.03); 
            backdrop-filter: blur(2px);
            /* CAMBIO: Borde más brillante y cian/azulado */
            border: 3px solid rgba(56, 189, 248, 0.3); /* sky-400 con transparencia */
            border-top: none; 
            border-radius: 0 0 12px 12px;
            /* CAMBIO: Sombra exterior (glow) para que resalte sobre el fondo oscuro */
            box-shadow: 
                inset 0 0 20px rgba(0,0,0,0.5),
                0 0 15px rgba(56, 189, 248, 0.1); 
            overflow: visible; 
            transition: border-color 0.3s;
        }
        #wall-handle {
            position: absolute;
            left: -8px; 
            top: 50%;
            transform: translateY(-50%);
            height: 80px;
            width: 16px;
            background: linear-gradient(90deg, #6b7280, #9ca3af);
            cursor: ew-resize;
            z-index: 15;
            border-radius: 4px;
            border: 1px solid #4b5563;
            box-shadow: 2px 0 5px rgba(0,0,0,0.4);
            display: none; 
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }
        #wall-handle::before, #wall-handle::after {
            content: ''; width: 2px; height: 20px; background-color: rgba(0,0,0,0.3); border-radius: 1px;
        }
        
        #gas-canvas {
            position: absolute;
            top: -150px; /* Espacio extra arriba para ver las partículas escapar */
            left: 0;
            width: 100%;
            height: calc(100% + 150px);
            z-index: 1;
        }

        #lid {
            position: absolute;
            top: -10px;
            left: 0;
            width: 100%; 
            height: 10px;
            background-color: #9ca3af;
            z-index: 10;
        }
        #lid-handle {
            position: absolute; top: -18px; right: -25px; width: 60px; height: 30px; 
            background: linear-gradient(145deg, #e0e0e0, #bcbcbc);
            border-radius: 6px; border: 1px solid #6b7280;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.4), inset 1px 1px 2px #fff;
            display: flex; align-items: center; justify-content: space-around;
            padding: 0 5px; cursor: ew-resize;
        }
        #lid-handle::before, #lid-handle::after {
            content: ''; display: block; width: 4px; height: 20px; background-color: rgba(0,0,0,0.15); border-radius: 2px;
        }
        
                        /* --- Animaciones para el Reactor de Temperatura --- */
                @keyframes shimmer {
                    0% { background-position: 0% 50%; }
                    100% { background-position: 200% 50%; }
                }
                .animate-shimmer {
                    animation: shimmer 3s linear infinite;
                }
                
                /* Clases para activar los efectos de Calor intenso */
                .heating-active #temp-controls {
                    border-color: rgba(249, 115, 22, 0.6); /* Naranja */
                    box-shadow: 0 0 20px rgba(249, 115, 22, 0.4), inset 0 0 20px rgba(249, 115, 22, 0.2);
                }
                .heating-active #temp-active-effect {
                    opacity: 1;
                    background: radial-gradient(circle at center, rgba(255, 87, 34, 0.4) 0%, transparent 70%);
                    animation: pulse-heat 0.8s infinite alternate;
                }
                .heating-active #temp-reactor-glow {
                    background: radial-gradient(circle, rgba(255,69,0,1) 0%, rgba(255,140,0,0.5) 100%);
                    scale: 1.1; opacity: 0.8;
                }
                @keyframes pulse-heat { 0% { opacity: 0.3; } 100% { opacity: 0.7; filter: brightness(1.2); } }
                
                /* Clases para activar los efectos de Frío intenso */
                .cooling-active #temp-controls {
                    border-color: rgba(34, 211, 238, 0.6); /* Cian */
                    box-shadow: 0 0 20px rgba(34, 211, 238, 0.4), inset 0 0 20px rgba(34, 211, 238, 0.2);
                }
                .cooling-active #temp-active-effect {
                    opacity: 1;
                    background: radial-gradient(circle at center, rgba(34, 211, 238, 0.4) 0%, transparent 70%);
                }
                .cooling-active #temp-reactor-glow {
                    background: radial-gradient(circle, rgba(0,255,255,1) 0%, rgba(0,191,255,0.5) 100%);
                    scale: 1.1; opacity: 0.8;
                }

        .temp-controls.disabled { opacity: 0.4; pointer-events: none; transition: opacity 0.3s; }
        .radio-label { position: relative; cursor: pointer; user-select: none; padding-left: 30px; }
        .radio-label input { position: absolute; opacity: 0; cursor: pointer; }
        .radio-dot { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #334155; border: 1px solid #475569; border-radius: 50%; transition: background-color: 0.2s; }
        .radio-label:hover input ~ .radio-dot { background-color: #475569; }
        .radio-label input:checked ~ .radio-dot { background-color: #4f46e5; border-color: #4f46e5; }
        .radio-dot:after { content: ""; position: absolute; display: none; top: 5px; left: 5px; width: 10px; height: 10px; border-radius: 50%; background: white; }
        .radio-label input:checked ~ .radio-dot:after { display: block; }
        
        .checkbox-label { position: relative; cursor: pointer; user-select: none; padding-left: 30px; }
        .checkbox-label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
        .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #334155; border: 1px solid #475569; border-radius: 4px; transition: background-color: 0.2s; }
        .checkbox-label:hover input ~ .checkmark { background-color: #475569; }
        .checkbox-label input:checked ~ .checkmark { background-color: #4f46e5; }
        .checkmark:after { content: ""; position: absolute; display: none; left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); }
        .checkbox-label input:checked ~ .checkmark:after { display: block; }

        #charles-options {
            padding-left: 20px;
            margin-top: 10px;
            border-left: 2px solid #334155;
        }
        
        #width-ruler {
            position: absolute; bottom: -30px; left: 0; height: 20px;
            display: none; /* Oculto por defecto */
            align-items: center; 
            justify-content: center;
        }
        #width-ruler-line {
            position: absolute; left: 0; top: 50%; width: 100%; height: 1px;
            border-top: 1px dashed #9ca3af;
        }
        #width-ruler-text {
            background-color: #e2e8f0; color: #1e293b; padding: 2px 8px; border-radius: 4px;
            font-size: 0.8rem; font-weight: 600; z-index: 1;
        }
        .ruler-end { position: absolute; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background-color: #9ca3af; }
        .ruler-end::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); border-style: solid; }
        .ruler-end.left::before { left: -4px; border-width: 4px 5px 4px 0; border-color: transparent #9ca3af transparent transparent;}
        .ruler-end.right::before { right: -4px; border-width: 4px 0 4px 5px; border-color: transparent transparent transparent #9ca3af;}

        .widget {
            background-color: rgba(30, 41, 59, 0.9);
            backdrop-filter: blur(5px);
            border: 1px solid #475569;
            border-radius: 8px;
            padding: 0.25rem 0.5rem;
        }

        .widget-btn {
            background-color: #334155;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #e2e8f0;
            transition: background-color 0.2s;
            font-size: 0.75rem;
        }
        .widget-btn:hover { background-color: #475569; }
        
        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        #popup-overlay {
            transition: opacity 0.3s;
        }
        #popup-box {
            transition: opacity 0.3s, transform 0.3s;
            max-height: 80vh; /* Para popups largos */
            overflow-y: auto; /* Para popups largos */
        }
        #popup-box::-webkit-scrollbar { width: 6px; }
        #popup-box::-webkit-scrollbar-track { background: #1e293b; }
        #popup-box::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 3px; }

        #popup-box.hidden {
            transform: translate(-50%, -50%) scale(0.95);
        }

        #data-table-container {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #334155;
            border-radius: 6px;
        }
        #data-table-container::-webkit-scrollbar { width: 5px; }
        #data-table-container::-webkit-scrollbar-track { background: #1e293b; }
        #data-table-container::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 3px; }
        #data-table {
            width: 100%;
            font-size: 0.7rem;
            text-align: center;
        }
        #data-table th, #data-table td {
            padding: 4px 2px;
        }
        #data-table thead {
            position: sticky;
            top: 0;
            background-color: #1e293b;
        }

        /* --- NUEVO: Estilos Gráficas Dinámicas --- */
        #dynamic-graphs-container {
            display: none; /* Oculto hasta que se marca el checkbox */
            background-color: #1e293b;
            padding: 1rem;
            border-radius: 8px;
            margin-top: 0.5rem;
        }
        .dynamic-chart-wrapper {
            background-color: #0f172a;
            border: 1px solid #334155;
            border-radius: 8px;
            padding: 0.5rem;
            margin-bottom: 1rem;
        }
        .dynamic-chart-wrapper canvas {
            max-height: 200px;
        }
        /* --- FIN: Estilos Gráficas Dinámicas --- */


        @keyframes container-shake {
            0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        .shake { animation: container-shake 0.5s ease-in-out; }
        @keyframes flashing-red-anim {
            0%, 100% { color: #ef4444; text-shadow: 0 0 5px #ef4444; } 50% { color: #f87171; text-shadow: 0 0 15px #f87171; }
        }
        .flashing-red { animation: flashing-red-anim 0.8s infinite; }

        /* Estilo para elementos ocultos por Aulaquest Preset */
        .aq-hidden {
            display: none !important;
        }

        @media (min-width: 1024px) {
            #gas-container-wrapper {
                max-width: 800px; /* Ancho mayor para PC */
            }
            #gas-container {
                height: 480px; /* Altura proporcional para mantener aspecto */
            }
        }
        
/* --- INICIO: Panel con ancho relativo (26%) --- */
.preset-section {
    display: none;
    position: relative;
    background-image: linear-gradient(to bottom right, #232d3f, #1f2937);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.75rem;
    color: #E5E7EB;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
                inset 0 1px 1px rgba(255, 255, 255, 0.05);
    width: 26%;          /* 🔹 ancho relativo en PC */
    min-width: 180px;    /* 🔹 evita que sea demasiado estrecho */
    max-width: 300px;    /* 🔹 evita que crezca demasiado */
}

/* --- Toggle visible siempre --- */
.toggle-preset-section { 
    position: absolute; 
    top: 0.75rem; 
    right: 0.75rem; 
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    color: #D1D5DB; 
    border-radius: 50%; 
    width: 28px; 
    height: 28px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    transition: background-color 0.2s, transform 0.2s; 
    z-index: 10; 
}
.toggle-preset-section:hover { 
    background: rgba(55, 65, 81, 0.7); 
    transform: scale(1.1);
}
.toggle-preset-section i { transition: transform 0.3s ease; }

/* --- Contenido colapsable --- */
.preset-section-content { 
    overflow: hidden; 
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out, margin-top 0.4s ease-out; 
    max-height: 1000px; 
    opacity: 1; 
    margin-top: 0.5rem; 
}
.preset-section.collapsed .preset-section-content { 
    max-height: 0; 
    opacity: 0; 
    margin-top: 0; 
    padding-top: 0; 
    padding-bottom: 0; 
    border-top-width: 0; 
    border-bottom-width: 0; 
}
.preset-section.collapsed .toggle-preset-section i { 
    transform: rotate(180deg); 
}

/* --- Logo y texto centrados verticalmente --- */
#preset-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
#preset-logo img {
    height: 70px;
    width: 70px;
    object-fit: contain;
    border-radius: 0.375rem;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

/* --- Títulos --- */
#preset-simulation-title {
    font-size: 0.7rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}
#preset-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
    color: #fff;
    text-align: center;
}

/* --- Instrucción inicial con scroll --- */
#preset-initial-instruction {
    width: 100%;
    word-break: break-word;
    font-size: 0.9rem;
    line-height: 1.4;
    background-color: rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0.4rem;
    border-radius: 0.25rem;
    box-sizing: border-box;
    margin-top: 0.5rem;
    max-height: 360px;           /* 🔹 altura controlada */
    overflow-y: auto;            /* 🔹 scroll vertical */
    scrollbar-width: thin;
}
#preset-initial-instruction::-webkit-scrollbar {
    width: 6px;
}
#preset-initial-instruction::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

/* --- Línea meta inferior --- */
.preset-meta-info-line {
    margin-top: 0.4rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.8rem;
    color: #9CA3AF;
    text-align: center;
    letter-spacing: 0.03em;
}
.preset-meta-info-line span {
    margin: 0 0.25rem;
}

/* --- Paneles de tareas y enlaces a 100% --- */
#preset-tasks,
#preset-links {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
#preset-tasks h3, #preset-links h4 { 
    font-size: 1.1rem; 
    font-weight: 600; 
    margin-top: 0; 
    margin-bottom: 1rem; 
    color: #E5E7EB; 
    padding-bottom: 0.5rem; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
}
#preset-tasks h3 i, #preset-links h4 i { 
    color: #9CA3AF; 
    font-size: 0.9em; 
}
#preset-tasks ul { 
    list-style: decimal; 
    margin-left: 1.5rem; 
    color: #D1D5DB; 
} 
#preset-tasks li { 
    margin-bottom: 0.5rem; 
    line-height: 1.6; 
}
.preset-link-item { 
    margin-bottom: 0.6rem; 
    line-height: 1.5; 
    display: flex; 
    align-items: baseline; 
    flex-wrap: wrap; 
    gap: 0.4rem; 
} 
.preset-link-item a.link-url { 
    color: #60A5FA; 
    text-decoration: underline; 
    word-break: break-all; 
    font-weight: 500; 
} 
.preset-link-item a.link-url:hover { 
    color: #93C5FD; 
} 
.preset-link-description { 
    color: #9CA3AF; 
    font-size: 0.85em; 
}

/* --- Actividad vinculada --- */
.preset-activity-section {
    background-color: #2b3a4f;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 1rem; 
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2),
                0 2px 4px rgba(0,0,0,0.1);
}
.preset-activity-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.preset-activity-header i { color: #60A5FA; }
#preset-activity-content { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    justify-content: space-between; 
    gap: 0.5rem 1rem; 
}
#activity-title { 
    font-size: 1.1rem; 
    font-weight: 600; 
    color: #fff; 
    text-decoration: none; 
}
#activity-title:hover { 
    text-decoration: underline; 
    color: #bfdbfe; 
}
#activity-key-wrapper { 
    display: inline-flex; 
    align-items: center; 
    gap: 0.5rem; 
    background-color: #111827; 
    padding: 0.25rem 0.75rem; 
    border-radius: 0.375rem; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
}
#activity-key-wrapper span { 
    font-size: 0.875rem; 
    color: #9CA3AF; 
}
#activity-key {
    font-family: monospace;
    font-size: 1rem;
    font-weight: 700;
    color: #FBBF24; 
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}
#copy-activity-key-btn { 
    background: none; 
    border: none; 
    color: #9CA3AF; 
    cursor: pointer; 
    transition: color 0.2s; 
}
#copy-activity-key-btn:hover { 
    color: #fff; 
}

/* --- RESPONSIVE --- */
@media (max-width: 995px) { 
    .preset-section {
        width: 98%;
        max-width: 98%;
    }
    #preset-header-content { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        gap: 1rem; 
    }
    #preset-info { align-items: center; }
    #preset-initial-instruction { 
        border-left: none; 
        padding-left: 0; 
        text-align: left; 
        max-height: 140px;
    }
    .preset-meta-info-line { justify-content: center; } 
    #preset-logo img { height: 60px; width: 60px; }
    #preset-header { margin: 0.5rem; } 
    #preset-activity-content { 
        flex-direction: column; 
        align-items: center; 
        gap: 0.75rem; 
    }
    body {
        overflow-x: hidden;
    }
}

/* 🎨 Scrollbar fino y azul (compatible con la mayoría de navegadores modernos) */
#preset-initial-instruction,
#preset-tasks-panel,
#preset-links-panel {
    scrollbar-width: thin;              /* Scroll fino (para Firefox) */
    scrollbar-color: #3b82f6 transparent; /* Azul (para Firefox) */
}

/* Chrome, Edge, Safari */
#preset-initial-instruction::-webkit-scrollbar,
#preset-tasks-panel::-webkit-scrollbar,
#preset-links-panel::-webkit-scrollbar {
    width: 6px; /* grosor */
    height: 6px;
}

#preset-initial-instruction::-webkit-scrollbar-thumb,
#preset-tasks-panel::-webkit-scrollbar-thumb,
#preset-links-panel::-webkit-scrollbar-thumb {
    background-color: #3b82f6; /* Azul */
    border-radius: 10px;
}

#preset-initial-instruction::-webkit-scrollbar-track,
#preset-tasks-panel::-webkit-scrollbar-track,
#preset-links-panel::-webkit-scrollbar-track {
    background: transparent; /* Fondo del track invisible */
}



/* --- FIN Estilos Preset v3.3 --- */

        
/* ==========================================================
   AULAQUEST · FOOTER DEL LABORATORIO
   ========================================================== */

.aq-footer {
    width: 100%;
    min-width: 0;
    margin-top: 24px;
    padding: 20px 0 12px;
    background: transparent;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    color: #e2e8f0;
}

/* Marca */

.aq-footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.aq-footer-brand img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.aq-footer-brand__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.aq-footer-brand__text strong {
    color: #f8fafc;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.aq-footer-brand__text span {
    color: #94a3b8;
    font-size: 9px;
    letter-spacing: 0.015em;
    line-height: 1.4;
}

/* Descripción */

.aq-footer-description {
    margin: 12px 0 16px;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

/* Accesos */

.aq-footer-links {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    min-width: 0;
}

.aq-footer-resource {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 10px 11px;
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.13);
    color: #e2e8f0;
    text-decoration: none;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.aq-footer-resource:hover {
    color: #fff;
    text-decoration: none;
    background: rgba(35, 52, 80, 0.8);
    border-color: rgba(96, 165, 250, 0.35);
    transform: translateY(-1px);
}

.aq-footer-resource:focus-visible {
    outline: 2px solid #7dd3fc;
    outline-offset: 3px;
}

.aq-footer-resource__icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.10);
    color: #7dd3fc;
    font-size: 12px;
}

.aq-footer-resource__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.aq-footer-resource__content strong {
    color: #f1f5f9;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.aq-footer-resource__content small {
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.aq-footer-resource__arrow {
    margin-left: auto;
    flex-shrink: 0;
    color: #64748b;
    font-size: 10px;
}

/* Acceso destacado a Studio */

.aq-footer-resource--primary {
    background: rgba(59, 130, 246, 0.09);
    border-color: rgba(59, 130, 246, 0.25);
}

.aq-footer-resource--primary .aq-footer-resource__icon {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.16);
}

.aq-footer-resource--primary:hover {
    background: rgba(59, 130, 246, 0.17);
    border-color: rgba(99, 102, 241, 0.55);
}

/* Firma discreta */

.aq-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
    padding-top: 11px;
    border-top: 1px solid rgba(148, 163, 184, 0.10);
    color: #64748b;
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
}

.aq-footer-bottom__dot {
    width: 3px;
    height: 3px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #475569;
}

/* Integración en iframe y móvil */

@media (max-width: 767px) {
    .aq-footer {
        margin-top: 18px;
        padding-top: 16px;
    }

    .aq-footer-links {
        gap: 8px;
    }

    .aq-footer-resource {
        padding: 11px 12px;
    }
}

@media (max-width: 340px) {
    .aq-footer-resource__icon {
        width: 28px;
        height: 28px;
    }

    .aq-footer-resource__content strong {
        font-size: 10px;
    }

    .aq-footer-description {
        font-size: 10px;
    }
}

        /* --- FIN: CSS Footer Profesional --- */
        
        
        
        /* =========================================================
   FASE 2A · REDISEÑO PANEL LATERAL
   ========================================================= */

.aq-sidebar {
    background:
        linear-gradient(180deg, rgba(5, 16, 38, 0.96) 0%, rgba(6, 18, 43, 0.92) 100%);
    backdrop-filter: blur(12px);
}

.aq-sidebar__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.aq-panel-stack {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.aq-actions-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding-bottom: 0.95rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.aq-top-btn {
    border: none;
    border-radius: 14px;
    padding: 0.82rem 1rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 24px rgba(0,0,0,0.22);
}

.aq-top-btn:hover {
    transform: translateY(-1px);
}

.aq-top-btn--info {
    background: linear-gradient(180deg, #1da1f2 0%, #1581c6 100%);
}

.aq-top-btn--reset {
    background: linear-gradient(180deg, #22c55e 0%, #169f49 100%);
}

.aq-panel-section {
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.aq-panel-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.aq-panel-heading {
    margin-bottom: 0.8rem;
}

.aq-panel-heading h3 {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.2;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: -0.01em;
}

.aq-panel-heading--icon h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
}

.aq-panel-heading--icon i {
    color: #38bdf8;
    font-size: 0.85rem;
}

.aq-soft-card {
    background: linear-gradient(180deg, rgba(17, 29, 57, 0.92) 0%, rgba(14, 25, 50, 0.88) 100%);
    border: 1px solid rgba(96, 165, 250, 0.08);
    border-radius: 18px;
    padding: 1rem;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 16px 28px rgba(0,0,0,0.16);
}

/* ----- LEYES ----- */

.aq-law-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.aq-law-option {
    display: block;
    cursor: pointer;
}

.aq-law-tile {
    min-height: 88px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.82) 0%, rgba(24, 36, 58, 0.88) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: #93a7c7;
    text-align: center;
    padding: 0.9rem 0.65rem;
    font-size: 0.98rem;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.aq-law-tile i {
    font-size: 1rem;
    opacity: 0.9;
}

.aq-law-option:hover .aq-law-tile {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.28);
}

.aq-law-option input:checked + .aq-law-tile {
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 12px 24px rgba(0,0,0,0.22);
}

.aq-law-option input:checked + .aq-law-tile--libre {
    background: linear-gradient(180deg, #5a4fff 0%, #5342dc 100%);
    border-color: rgba(167, 139, 250, 0.55);
}

.aq-law-option input:checked + .aq-law-tile--boyle {
    background: linear-gradient(180deg, #17b36b 0%, #0f8d53 100%);
    border-color: rgba(52, 211, 153, 0.55);
}

.aq-law-option input:checked + .aq-law-tile--gaylussac {
    background: linear-gradient(180deg, #e2a531 0%, #c67f0f 100%);
    border-color: rgba(251, 191, 36, 0.55);
}

.aq-law-option input:checked + .aq-law-tile--charles {
    background: linear-gradient(180deg, #ea4a73 0%, #c92a55 100%);
    border-color: rgba(251, 113, 133, 0.55);
}

.aq-subpanel {
    margin-top: 0.8rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: rgba(11, 20, 38, 0.72);
    border: 1px solid rgba(251, 113, 133, 0.15);
}

.aq-subpanel-title {
    margin: 0 0 0.75rem 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #fda4af;
}

.aq-inline-radio {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.83rem;
    color: #cbd5e1;
    margin-bottom: 0.6rem;
}

.aq-inline-radio:last-child {
    margin-bottom: 0;
}

.aq-inline-radio input {
    accent-color: #f43f5e;
}

/* ----- PARTÍCULAS ----- */

.aq-particle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.aq-particle-card {
    border-radius: 18px;
    padding: 1rem 0.95rem;
    background: linear-gradient(180deg, rgba(14, 27, 52, 0.96) 0%, rgba(12, 24, 46, 0.9) 100%);
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 16px 28px rgba(0,0,0,0.16);
}

.aq-particle-card--light {
    border-color: rgba(34, 211, 238, 0.22);
}

.aq-particle-card--heavy {
    border-color: rgba(244, 63, 94, 0.18);
}

.aq-particle-card__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.8rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-weight: 800;
}

.aq-particle-card--light .aq-particle-card__label {
    color: #44d9ff;
}

.aq-particle-card--heavy .aq-particle-card__label {
    color: #ff688d;
}

.aq-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.aq-dot--light {
    background: #22d3ee;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
}

.aq-dot--heavy {
    background: #f43f5e;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.65);
}

.aq-particle-card__value {
    text-align: center;
    font-size: 2rem;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

.aq-particle-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.aq-mini-btn {
    border-radius: 12px;
    padding: 0.75rem 0.25rem;
    font-size: 0.98rem;
    font-weight: 700;
    border: 1px solid transparent;
    background: rgba(15, 23, 42, 0.55);
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.aq-mini-btn:hover {
    transform: translateY(-1px);
}

.aq-mini-btn--light {
    color: #7ce8ff;
    border-color: rgba(34, 211, 238, 0.26);
    background: rgba(8, 47, 73, 0.36);
}

.aq-mini-btn--heavy {
    color: #ff9ab0;
    border-color: rgba(244, 63, 94, 0.24);
    background: rgba(79, 13, 28, 0.32);
}

/* ----- SWITCHES ----- */

.aq-switch-list {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.aq-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.95rem;
    color: #e5e7eb;
}

.aq-switch-row--compact {
    font-size: 0.84rem;
    color: #cbd5e1;
}

.aq-switch {
    position: relative;
    width: 48px;
    height: 28px;
    flex: 0 0 auto;
}

.aq-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.aq-switch-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    border-radius: 999px;
    background: #24344f;
    border: 1px solid rgba(148, 163, 184, 0.18);
    transition: background-color 0.2s ease;
}

.aq-switch-slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 4px;
    top: 3px;
    border-radius: 50%;
    background: #dbeafe;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.aq-switch input:checked + .aq-switch-slider {
    background: linear-gradient(90deg, #6558ff 0%, #4f46e5 100%);
    border-color: rgba(129, 140, 248, 0.45);
}

.aq-switch input:checked + .aq-switch-slider::before {
    transform: translateX(19px);
}

/* ----- TELEMETRÍA ----- */

.aq-telemetry-card {
    padding: 1rem;
}

.aq-telemetry-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.aq-metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.aq-metric-label {
    font-size: 0.84rem;
    color: #94a3b8;
}

.aq-metric-value {
    font-size: 1rem;
    font-weight: 800;
    color: #f8fafc;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.02em;
    text-align: right;
}

.aq-metric-value--warm {
    color: #fdba74;
}

.aq-metric-value--cool {
    color: #86efac;
}

.aq-telemetry-divider {
    height: 1px;
    background: rgba(148, 163, 184, 0.16);
    margin: 0.95rem 0;
}

.aq-total-particles-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.aq-badge-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2rem;
    padding: 0 0.6rem;
    border-radius: 10px;
    background: rgba(71, 85, 105, 0.55);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
}

.aq-particles-bar {
    display: flex;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.8);
    margin-bottom: 0.9rem;
}

.aq-particles-bar__light {
    background: linear-gradient(90deg, #22d3ee 0%, #38bdf8 100%);
    transition: width 0.3s ease;
}

.aq-particles-bar__heavy {
    background: linear-gradient(90deg, #f43f5e 0%, #fb7185 100%);
    transition: width 0.3s ease;
}

.aq-mini-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}

.aq-mini-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.54);
    padding: 0.75rem 0.8rem;
}

.aq-mini-stat__label {
    flex: 1;
    font-size: 0.8rem;
    color: #cbd5e1;
}

.aq-mini-stat__value {
    font-size: 1rem;
    font-weight: 800;
}

.aq-mini-stat__value--light {
    color: #67e8f9;
}

.aq-mini-stat__value--heavy {
    color: #fb7185;
}

/* ----- DATOS Y GRÁFICAS ----- */

.aq-data-card,
.aq-charts-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.aq-primary-btn {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 0.95rem 1rem;
    font-size: 1rem;
    font-weight: 800;
    color: white;
    background: linear-gradient(180deg, #6657ff 0%, #5547e5 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 24px rgba(55, 48, 163, 0.25);
    transition: transform 0.18s ease;
}

.aq-primary-btn:hover {
    transform: translateY(-1px);
}

.aq-data-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.aq-secondary-btn {
    border: none;
    border-radius: 12px;
    padding: 0.85rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    transition: transform 0.18s ease;
}

.aq-secondary-btn:hover {
    transform: translateY(-1px);
}

.aq-secondary-btn--success {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
}

.aq-secondary-btn--danger {
    background: linear-gradient(180deg, #f43f5e 0%, #e11d48 100%);
}

.aq-table-shell {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.08);
    background: rgba(15, 23, 42, 0.45);
}

.aq-helper-text {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #93a7c7;
    text-align: center;
}

/* Ajuste fino tabla */
#data-table {
    font-size: 0.78rem;
}

#data-table th,
#data-table td {
    padding: 0.45rem 0.3rem;
}

#data-table th {
    font-weight: 700;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.92);
}

/* Gráficas más respiradas */
.dynamic-chart-wrapper {
    background: rgba(12, 20, 37, 0.88);
    border: 1px solid rgba(96, 165, 250, 0.08);
    border-radius: 16px;
    padding: 0.8rem;
    margin-bottom: 0.9rem;
}

/* ----- RESPONSIVE PANEL ----- */

@media (min-width: 768px) {
    .control-panel {
        width: min(420px, 28vw);
        min-width: 350px;
    }
}

@media (max-width: 995px) {
    .aq-actions-bar,
    .aq-data-actions,
    .aq-law-grid,
    .aq-particle-grid,
    .aq-mini-stats-grid {
        grid-template-columns: 1fr;
    }

    .aq-law-tile {
        min-height: 76px;
    }

    .aq-panel-heading h3 {
        font-size: 0.9rem;
    }

    .aq-particle-card__value {
        font-size: 1.75rem;
    }

    .aq-top-btn,
    .aq-primary-btn,
    .aq-secondary-btn {
        font-size: 0.92rem;
    }
}

@media (max-width: 767px) {
    .aq-sidebar {
        border-left: none;
        border-top: 1px solid rgba(148, 163, 184, 0.12);
        box-shadow: 0 -10px 28px rgba(0,0,0,0.18);
    }

    .aq-panel-stack {
        gap: 1rem;
    }

    .aq-soft-card,
    .aq-particle-card {
        border-radius: 16px;
    }

    .aq-switch-row {
        font-size: 0.9rem;
    }
}

/* ==========================================================
   AULAQUEST · GASES IDEALES
   FASE 2A.1 — COMPACTACIÓN Y RESPONSIVE
   ========================================================== */

/* 1. PANEL MÁS COMPACTO */

.aq-sidebar {
    padding: 14px !important;
}

.aq-sidebar__content {
    gap: 10px;
}

.aq-panel-stack {
    gap: 12px;
}

.aq-panel-section {
    padding-top: 12px;
}

.aq-panel-heading {
    margin-bottom: 9px;
}

.aq-panel-heading h3,
.aq-panel-heading--icon h3 {
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.aq-soft-card {
    padding: 11px 12px;
    border-radius: 12px;
}

/* 2. PARTICULAS ARRIBA DEL SELECTOR DE LEYES */
/* Orden visual, preservando HTML e identificadores */

.aq-panel-stack {
    display: flex;
    flex-direction: column;
}

#panel-particulas-container {
    order: -2;
}

#panel-leyes-container {
    order: -1;
}

/* 3. INFO Y REINICIAR */

.aq-actions-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-bottom: 11px;
}

.aq-top-btn {
    min-width: 0;
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 9px;
    box-shadow: none;
}

/* 4. PARTICULAS: TARJETAS MÁS PEQUEÑAS */

.aq-particle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.aq-particle-card {
    min-width: 0;
    padding: 10px;
    border-radius: 12px;
    box-shadow: none;
}

.aq-particle-card__label {
    gap: 6px;
    margin-bottom: 8px;
    font-size: 10px;
    letter-spacing: 0.045em;
}

.aq-particle-card__value {
    font-size: 23px;
    line-height: 1.1;
    margin-bottom: 9px;
}

.aq-particle-card__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.aq-mini-btn {
    min-width: 0;
    padding: 7px 4px;
    font-size: 12px;
    border-radius: 7px;
}

/* 5. LEYES EN 2x2 EN TODAS LAS PANTALLAS */

.aq-law-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.aq-law-option {
    min-width: 0;
}

.aq-law-tile {
    min-height: 57px;
    padding: 9px 6px;
    gap: 5px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 650;
    box-shadow: none;
}

.aq-law-tile i {
    font-size: 13px;
}

.aq-law-option input:checked + .aq-law-tile {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

/* 6. SWITCHES E INSTRUMENTOS */

.aq-switch-list {
    gap: 10px;
}

.aq-switch-row {
    gap: 10px;
    font-size: 12px;
    line-height: 1.4;
}

.aq-switch {
    width: 38px;
    height: 22px;
}

.aq-switch-slider::before {
    width: 16px;
    height: 16px;
    top: 2px;
    left: 3px;
}

.aq-switch input:checked + .aq-switch-slider::before {
    transform: translateX(16px);
}

.aq-switch input:focus-visible + .aq-switch-slider {
    outline: 2px solid #93c5fd;
    outline-offset: 3px;
}

/* 7. TELEMETRIA */

.aq-telemetry-card {
    padding: 12px;
}

.aq-telemetry-metrics {
    gap: 7px;
}

.aq-metric-label {
    font-size: 11px;
}

.aq-metric-value {
    font-size: 12px;
}

.aq-telemetry-divider {
    margin: 10px 0;
}

.aq-mini-stats-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 7px;
}

.aq-mini-stat {
    min-width: 0;
    padding: 7px;
    border-radius: 8px;
}

.aq-mini-stat__label {
    font-size: 10px;
}

.aq-mini-stat__value {
    font-size: 12px;
}

.aq-particles-bar {
    height: 7px;
    margin-bottom: 8px;
}

/* 8. REGISTRO DE DATOS */

.aq-data-card,
.aq-charts-card {
    gap: 10px;
}

.aq-primary-btn {
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 9px;
    box-shadow: none;
}

.aq-data-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.aq-secondary-btn {
    min-width: 0;
    padding: 9px 5px;
    font-size: 11px;
    border-radius: 8px;
}

.aq-table-shell {
    max-width: 100%;
    overflow-x: auto;
    border-radius: 9px;
}

#data-table {
    font-size: 10px;
}

#data-table th,
#data-table td {
    padding: 6px 5px;
    white-space: nowrap;
}

.dynamic-chart-wrapper {
    padding: 9px;
    border-radius: 10px;
    margin-bottom: 8px;
}

/* 9. DESKTOP E IFRAME */

@media (min-width: 768px) {
    .control-panel.aq-sidebar {
        width: 27% !important;
        min-width: 0 !important;
        max-width: none;
        flex: 0 0 27%;
    }

    body > main {
        width: 73% !important;
        flex: 0 0 73%;
        min-width: 0;
    }
}

/* 10. MOVIL Y TABLET ESTRECHA */

@media (max-width: 767px) {
    .control-panel.aq-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
    }

    .aq-actions-bar,
    .aq-law-grid,
    .aq-particle-grid,
    .aq-mini-stats-grid,
    .aq-data-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aq-panel-stack {
        gap: 11px;
    }

    .aq-law-tile {
        min-height: 52px;
    }

    /* HUD: cuatro magnitudes en una sola fila */
    #info-hud {
        width: 100%;
        max-width: 100%;
        padding: 8px 5px;
        border-radius: 10px;
    }

    #info-hud > div {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
    }

    #info-hud > div > div {
        min-width: 0;
    }

    #info-hud p:first-child {
        font-size: 8px;
        letter-spacing: 0.015em;
        line-height: 1.4;
    }

    #info-hud #pressure-display,
    #info-hud #volume-display,
    #info-hud #particles-display,
    #info-hud #temp-display {
        font-size: 11px;
        line-height: 1.45;
        white-space: nowrap;
    }

    #simulation-container {
        padding-left: 9px;
        padding-right: 9px;
    }
}

/* Móviles especialmente estrechos */

@media (max-width: 360px) {
    #info-hud p:first-child {
        font-size: 7px;
    }

    #info-hud #pressure-display,
    #info-hud #volume-display,
    #info-hud #particles-display,
    #info-hud #temp-display {
        font-size: 9px;
    }

    .aq-particle-card {
        padding: 8px;
    }

    .aq-law-tile {
        font-size: 10px;
    }
}

/* ============================================================
   GASES IDEALES · FASE 3.1 · ANÁLISIS EXPERIMENTAL COMPACTO
   Cambios de presentación: conserva IDs, visibilidad y Chart.js.
   ============================================================ */
#panel-datos-container .aq-panel-heading,
#panel-graficas-datos-container .aq-panel-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 8px;
}
.aq-analysis-heading-note {
    margin: 0;
    color: #91a6c5;
    font-size: 10px;
    line-height: 1.35;
}
#panel-datos-container .aq-data-card,
#panel-graficas-datos-container .aq-charts-card {
    gap: 9px;
    padding: 11px;
    border-radius: 12px;
}
#panel-datos-container .aq-primary-btn {padding: 10px; font-size: 12px; border-radius: 9px;}
.aq-analysis-card-note {
    margin: -2px 0 1px;
    font-size: 10px;
    line-height: 1.5;
    color: #90a5c4;
}
#panel-datos-container .aq-table-shell {overflow-x: auto; overscroll-behavior-x: contain;}
#panel-datos-container #data-table {width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 10px;}
#panel-datos-container #data-table th,
#panel-datos-container #data-table td {padding: 7px 6px; white-space: nowrap;}
#panel-datos-container #data-table tbody tr:nth-child(even) {background: rgba(107, 137, 185, 0.05);}
#panel-datos-container #data-table tbody tr:hover {background: rgba(59, 130, 246, 0.1);}
#panel-graficas-datos-container #dynamic-graphs-container {
    padding: 0;
    background: transparent;
    border: 0;
    margin-top: 2px;
}
#panel-graficas-datos-container .dynamic-chart-wrapper {
    padding: 10px;
    margin-bottom: 9px;
    border-radius: 10px;
    border: 1px solid rgba(125, 155, 201, .17);
    background: rgba(11, 23, 42, .66);
}
#panel-graficas-datos-container .dynamic-chart-wrapper:last-child {margin-bottom: 0;}
.aq-analysis-chart-label {display:flex; flex-direction:column; gap:3px; margin-bottom: 9px;}
.aq-analysis-chart-label strong {color:#e8f0ff; font-size:11px; font-weight:700; line-height:1.35;}
.aq-analysis-chart-label span {color:#9eb2cf; font-size:10px; line-height:1.4;}
#panel-graficas-datos-container .dynamic-chart-wrapper canvas {max-height: 190px;}
@media (max-width: 767px) {
    #panel-datos-container .aq-data-card,
    #panel-graficas-datos-container .aq-charts-card {padding:10px;}
    #panel-graficas-datos-container .dynamic-chart-wrapper canvas {max-height: 210px;}
}


/* FASE 3.3 · Ampliación de gráficas, modal y exportación PNG */
.aq-analysis-chart-label{position:relative;padding-right:75px;min-height:27px}
.aq-chart-enlarge{position:absolute;right:0;top:0;padding:5px 8px;border-radius:7px;border:1px solid rgba(125,169,231,.35);background:rgba(65,105,166,.13);color:#bed8ff;font-size:10px;font-weight:650;cursor:pointer;white-space:nowrap}
.aq-chart-enlarge:hover{background:rgba(74,130,210,.27);color:#fff;border-color:#75b7ff}
.aq-chart-enlarge:focus-visible,.aq-chart-modal button:focus-visible{outline:2px solid #8cceff;outline-offset:3px}
.aq-chart-modal[hidden]{display:none!important}
.aq-chart-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,30px)}
.aq-chart-modal__shade{position:absolute;inset:0;background:rgba(2,8,20,.88);backdrop-filter:blur(8px)}
.aq-chart-modal__panel{position:relative;display:flex;flex-direction:column;width:min(1100px,100%);max-height:calc(100dvh - 24px);padding:clamp(12px,2.5vw,24px);border:1px solid #314866;border-radius:18px;background:#0e1b30;color:#e7efff;box-shadow:0 25px 90px rgba(0,0,0,.5);overflow-y:auto}
.aq-chart-modal__header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.aq-chart-modal__eyebrow{display:block;font-size:10px;letter-spacing:.13em;color:#7db4e7;font-weight:750;margin-bottom:5px}
.aq-chart-modal__header h2{font-size:clamp(15px,2.5vw,21px);font-weight:750;line-height:1.35;margin:0;color:#f4f8ff}
.aq-chart-modal__close{width:37px;height:37px;flex-shrink:0;border-radius:10px;border:1px solid #40516c;background:#1a2c49;color:#d6e9ff;font-size:27px;line-height:1;cursor:pointer}
.aq-chart-modal__plot{height:min(58vh,570px);min-height:260px;width:100%;border:1px solid #2a405e;border-radius:12px;background:#14253d;padding:10px}
.aq-chart-modal__plot canvas{width:100%!important;height:100%!important;max-height:none!important}
.aq-chart-modal__footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:16px;color:#94acca;font-size:11px}
.aq-chart-modal__download{border:1px solid #3b82f6;background:#1d4ed8;color:white;padding:10px 14px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer}
.aq-chart-modal__download:hover{background:#2563eb}
@media(max-width:600px){.aq-chart-modal{padding:8px}.aq-chart-modal__panel{padding:12px;max-height:calc(100dvh - 16px);border-radius:12px}.aq-chart-modal__plot{height:55vh;min-height:240px}.aq-chart-modal__footer{align-items:stretch}.aq-chart-modal__download{width:100%}}

/* ============================================================
   AulaQuest · HUD científico · Lecturas simultáneas y móvil scroll
   Mantiene IDs y contenedores existentes para visibilidad del Builder.
   ============================================================ */
#info-hud.aq-hud { width:100%; max-width:850px; padding:6px; background:rgba(9,18,35,.88); border:1px solid rgba(111,145,191,.22); border-radius:15px; overflow:visible; }
#info-hud.aq-hud > .aq-hud__track { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
#info-hud .aq-hud__metric { min-width:0; min-height:64px; padding:7px 10px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; border-radius:10px; background:rgba(25,41,66,.74); border:1px solid rgba(112,140,184,.12); position:relative; text-align:left; }
#info-hud .aq-hud__label { color:#98aecb; font-size:10px; font-weight:700; letter-spacing:.065em; text-transform:uppercase; line-height:1.4; }
#info-hud .aq-hud__value { color:#f3f7ff; font-size:clamp(14px,1.3vw,18px); font-weight:750; font-variant-numeric:tabular-nums; line-height:1.25; white-space:nowrap; }
#info-hud #pressure-display { color:#86efac; }
#info-hud .aq-hud__secondary { color:#8db9ed; font-size:10px; font-weight:550; line-height:1.25; white-space:nowrap; font-variant-numeric:tabular-nums; }
#info-hud .aq-hud__subtle {color:#7187a5;font-size:10px;}
#info-hud .aq-hud__label--help { display:flex; align-items:center; gap:7px; }
#info-hud .aq-hud__help { display:inline-flex; position:static; z-index:50; text-transform:none; letter-spacing:normal; }
#info-hud .aq-hud__help summary { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; cursor:pointer; list-style:none; color:#88bbeb; font-size:15px; border-radius:100%; }
#info-hud .aq-hud__help summary::-webkit-details-marker {display:none;}
#info-hud .aq-hud__help summary:focus-visible {outline:2px solid #67bafb;outline-offset:2px;}
#info-hud .aq-hud__tooltip { position:absolute; z-index:90; top:calc(100% + 6px); left:0; width:min(270px,80vw); padding:12px; border:1px solid #47617f; border-radius:10px; background:#101e34; box-shadow:0 12px 35px rgba(0,0,0,.46); color:#d4e1f2; font-size:12px; font-weight:400; line-height:1.55; }
#info-hud .aq-hud__tooltip strong { display:block; margin-bottom:5px; color:#93c5fd; }
/* AulaQuest · ajuste final del HUD: compacto y scroll táctil real */
#info-hud.aq-hud {max-width:790px; padding:4px; border-radius:11px;}
#info-hud.aq-hud > .aq-hud__track {gap:4px;}
#info-hud .aq-hud__metric {min-height:49px; padding:5px 8px; gap:1px; border-radius:8px;}
#info-hud .aq-hud__label {font-size:9px; line-height:1.15; letter-spacing:.045em;}
#info-hud .aq-hud__value {font-size:clamp(13px,1.15vw,16px); line-height:1.15;}
#info-hud .aq-hud__secondary {font-size:9px; line-height:1.2;}
#info-hud .aq-hud__help summary {width:15px; height:15px; font-size:13px;}
#gas-laws-controls .aq-law-tile {min-height:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;}
#gas-laws-controls .aq-law-tile small {font-size:10px; line-height:1.2;}
/* AulaQuest · temperatura exacta en control existente */
#temp-controls .aq-temp-number { position:relative; z-index:2; font:700 17px/1.2 ui-monospace,monospace; color:#fff; cursor:text; white-space:nowrap; padding:5px 4px; }
#temp-controls .aq-temp-number:focus-visible { outline:2px solid #7dd3fc; outline-offset:2px; border-radius:5px; }
#temp-controls .aq-temp-exact { position:relative; z-index:3; width:72px; max-width:58%; min-width:0; height:31px; border:1px solid #60a5fa; border-radius:6px; text-align:center; font:700 15px ui-monospace,monospace; color:#fff; background:#0f172a; outline:none; }
#temp-controls .aq-temp-exact.hidden, #temp-controls .aq-temp-number.hidden { display:none !important; }
#temp-controls .aq-temp-stepper { position:relative; z-index:3; display:flex; flex-direction:column; gap:2px; margin-left:4px; }
#temp-controls .aq-temp-stepper button { display:flex; align-items:center; justify-content:center; width:22px; height:15px; border:1px solid rgba(148,163,184,.25); border-radius:4px; background:rgba(51,65,85,.65); color:#cbd5e1; font-size:9px; line-height:1; cursor:pointer; }
#temp-controls .aq-temp-stepper button:hover { background:#334155; color:white; }
#temp-controls.disabled .aq-temp-number, #temp-controls.disabled .aq-temp-stepper { pointer-events:none; }

/* Temperatura: flechas compactas horizontales, sin crecer en altura */
#temp-controls .aq-temp-stepper { flex-direction:row; align-items:center; gap:3px; margin-left:6px; flex-shrink:0; }
#temp-controls .aq-temp-stepper button { width:23px; height:25px; font-size:11px; border-radius:6px; }
#temp-controls .aq-temp-number { font-size:15px; }
@media(max-width:420px) {
 #temp-controls .aq-temp-stepper { gap:2px; margin-left:3px; }
 #temp-controls .aq-temp-stepper button {width:21px; height:24px;}
}


/* Fase 5.2 · Comparación compacta de mediciones (sección de datos existente). */
.aq-gas-measure-row {cursor:pointer;}
.aq-gas-measure-row:hover {background:rgba(96,165,250,.10);}
.aq-gas-measure-row:focus-visible {outline:2px solid #93c5fd;outline-offset:-2px;}
.aq-gas-measure-row--selected {background:rgba(56,189,248,.19)!important;}
.aq-gas-measure-row strong {color:#7dd3fc;margin-left:3px;}
.aq-gas-comparison {margin:12px 0 4px;padding:13px 14px;border:1px solid rgba(125,211,252,.24);border-radius:12px;background:rgba(15,23,42,.55);color:#e2e8f0;}
.aq-gas-comparison[hidden] {display:none!important;}
.aq-gas-comparison__heading {font-weight:750;font-size:.86rem;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.aq-gas-comparison__heading small {font-weight:400;color:#94a3b8;font-size:.72rem;}
.aq-gas-comparison__clear {border:1px solid #475569;border-radius:8px;color:#cbd5e1;background:#1e293b;padding:5px 9px;cursor:pointer;font-size:.75rem;}
.aq-gas-comparison__clear:hover {background:#334155;color:#fff;}
.aq-gas-comparison__hint {margin:8px 0 0;font-size:.76rem;color:#94a3b8;line-height:1.45;}
.aq-gas-comparison__scroll {overflow-x:auto;margin-top:10px;}
.aq-gas-comparison__table {border-collapse:collapse;min-width:390px;width:100%;font-size:.75rem;white-space:nowrap;text-align:right;}
.aq-gas-comparison__table th,.aq-gas-comparison__table td {padding:7px 8px;border-bottom:1px solid rgba(148,163,184,.15);}
.aq-gas-comparison__table th:first-child {text-align:left;}
.aq-gas-comparison__table thead {color:#93c5fd;}


/* Fase 5.2b — Comparador compacto, sin barra horizontal interna. */
.aq-gas-comparison { min-width:0; padding:11px 11px 9px; margin:10px 0 4px; overflow:hidden; }
.aq-gas-comparison__heading { font-size:.80rem; gap:6px; }
.aq-gas-comparison__heading small { font-size:.68rem; }
.aq-gas-comparison__clear { font-size:.68rem; padding:5px 7px; flex-shrink:0; }
.aq-gas-comparison__hint { font-size:.69rem; line-height:1.4; margin-top:7px; }
.aq-gas-comparison__scroll { width:100%; max-width:100%; overflow-x:hidden; margin-top:7px; }
.aq-gas-comparison__table { min-width:0; width:100%; table-layout:fixed; white-space:normal; font-size:.69rem; font-variant-numeric:tabular-nums; }
.aq-gas-comparison__table th, .aq-gas-comparison__table td { padding:7px 3px; overflow-wrap:anywhere; line-height:1.3; }
.aq-gas-comparison__table th:first-child, .aq-gas-comparison__table td:first-child { width:19%; }
.aq-gas-comparison__table th:nth-child(2), .aq-gas-comparison__table th:nth-child(3) { width:25%; }
.aq-gas-comparison__table th:last-child { width:31%; }
.aq-gas-comparison__table th:first-child, .aq-gas-comparison__table td:first-child { padding-left:2px; }
.aq-gas-comparison.aq-hidden { display:none!important; }

/* Fase 5.2c — Más espacio de trabajo lateral solo en PC amplio.
   27% -> 32% (+18.5%). Tablet y móvil conservan el reparto previo. */
@media (min-width:1100px) {
  .control-panel.aq-sidebar { width:32%!important; flex:0 0 32%!important; min-width:0!important; }
  body > main { width:68%!important; flex:0 0 68%!important; min-width:0; }
}


/* Fase 5.3: Telemetría molecular avanzada · plegada por defecto. */
#aq-gas-molecular.aq-hidden {display:none!important;}
.aq-molecular-panel {margin-top:10px;border:1px solid rgba(125,211,252,.17);border-radius:13px;background:linear-gradient(130deg,rgba(19,36,59,.97),rgba(13,22,40,.97));overflow:hidden;color:#dce8fa;}
.aq-molecular-summary {list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:13px 14px;user-select:none;}
.aq-molecular-summary::-webkit-details-marker {display:none;}
.aq-molecular-summary:focus-visible {outline:2px solid #7dd3fc;outline-offset:-3px;}
.aq-molecular-summary__icon {display:grid;place-items:center;background:rgba(56,189,248,.12);color:#67e8f9;width:32px;height:32px;border-radius:10px;flex-shrink:0;}
.aq-molecular-summary__copy {display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.aq-molecular-summary__copy strong {font-size:.79rem;font-weight:750;}
.aq-molecular-summary__copy small {font-size:.68rem;color:#98abc9;}
.aq-molecular-chevron {color:#8eabc9;font-size:.68rem;transition:transform .2s;}
.aq-molecular-panel[open] .aq-molecular-chevron {transform:rotate(180deg);}
.aq-molecular-body {border-top:1px solid rgba(148,163,184,.13);padding:13px 14px 14px;}
.aq-molecular-kicker {font-size:.66rem;text-transform:uppercase;letter-spacing:.065em;color:#8ca6c6;font-weight:700;margin-bottom:12px;}
.aq-molecular-speed-row {display:flex;justify-content:space-between;align-items:center;gap:7px;font-size:.73rem;margin-bottom:6px;font-variant-numeric:tabular-nums;}
.aq-molecular-speed-row span {display:flex;align-items:center;gap:6px;min-width:0;}
.aq-molecular-speed-row small {color:#8194b2;font-size:.65rem;}
.aq-molecular-speed-row strong {font-size:.75rem;color:#dceaff;white-space:nowrap;}
.aq-molecular-dot {width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.aq-molecular-dot--light {background:#06b6d4;box-shadow:0 0 8px rgba(6,182,212,.35);}
.aq-molecular-dot--heavy {background:#f43f5e;box-shadow:0 0 8px rgba(244,63,94,.35);}
.aq-molecular-speed-track {height:6px;border-radius:12px;background:#253750;margin-bottom:14px;overflow:hidden;}
.aq-molecular-speed-track>span {display:block;height:100%;width:0;border-radius:12px;transition:width .18s ease;}
#aq-molecular-bar-light {background:linear-gradient(90deg,#0891b2,#67e8f9);}
#aq-molecular-bar-heavy {background:linear-gradient(90deg,#be123c,#fb7185);}
.aq-molecular-energy {border-radius:10px;background:rgba(15,27,46,.86);border:1px solid rgba(148,163,184,.12);padding:11px;display:flex;flex-direction:column;gap:4px;}
.aq-molecular-energy>span {font-size:.69rem;color:#a4b9d7;}
.aq-molecular-energy>strong {font-size:1.12rem;color:#f8fafc;font-variant-numeric:tabular-nums;}
.aq-molecular-energy>small {font-size:.65rem;color:#7dd3fc;}
.aq-molecular-note {font-size:.67rem;line-height:1.55;color:#96a9c7;margin:10px 0 0;}

/* AulaQuest Gases v8.0 · análisis químico avanzado, cerrado por defecto. */
#aq-gas-chemical.aq-hidden {display:none!important;}
.aq-chemical-panel {border-color:rgba(165,180,252,.21);}
.aq-chemical-summary__icon {background:rgba(165,180,252,.13);color:#a5b4fc;}
.aq-chemical-body {border-top:1px solid rgba(148,163,184,.13);padding:13px 14px 14px;}
.aq-chemical-primary {position:relative;display:grid;grid-template-columns:1fr auto;gap:3px 8px;align-items:baseline;padding:12px;background:linear-gradient(130deg,rgba(30,45,76,.93),rgba(18,33,57,.93));border:1px solid rgba(165,180,252,.19);border-radius:11px;}
.aq-chemical-label {grid-column:1/-1;font-size:.7rem;color:#b3c5df;}
.aq-chemical-primary strong {font-size:1.5rem;line-height:1.2;letter-spacing:-.035em;color:#b7e5fa;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.aq-chemical-unit {font-size:.73rem;color:#a3b5d2;font-weight:650;white-space:nowrap;}
.aq-chemical-split {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:10px 0;}
.aq-chemical-split>div {display:flex;flex-direction:column;gap:4px;padding:10px;background:rgba(14,27,47,.76);border:1px solid rgba(148,163,184,.11);border-radius:10px;min-width:0;}
.aq-chemical-split span,.aq-chemical-equation span {font-size:.67rem;color:#96aecb;}
.aq-chemical-split strong {color:#edf6ff;font-size:.82rem;font-variant-numeric:tabular-nums;}
.aq-chemical-equation {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;padding:8px 2px;}
.aq-chemical-equation strong {color:#a5b4fc;font-size:.75rem;}
.aq-chemical-note {font-size:.67rem;line-height:1.55;color:#91a8c7;margin:8px 0 0;}
.aq-chemical-note strong {color:#c8d9ef;font-weight:650;}
@media(max-width:410px){.aq-chemical-primary strong{font-size:1.3rem}.aq-chemical-body{padding:11px}}

/* v8.0 · Análisis químico docente. Compacto y plegado por defecto. */
.aq-chemical-split--derived{grid-template-columns:repeat(2,minmax(0,1fr));}
.aq-chemical-split--derived>div:last-child{grid-column:1/-1;}
.aq-chemical-metric.aq-chemical-masked{border-color:rgba(251,191,36,.28);}
.aq-chemical-metric.aq-chemical-masked strong{color:#fbbf24;letter-spacing:.07em;}
.aq-chemical-editor{margin-bottom:12px;padding:12px;border:1px solid rgba(165,180,252,.26);background:rgba(24,38,65,.8);border-radius:11px;}
.aq-chemical-editor[hidden]{display:none!important;}
.aq-chemical-editor label{display:flex;justify-content:space-between;gap:8px;font-size:.76rem;color:#e0e7ff;font-weight:700;margin-bottom:8px;}
.aq-chemical-editor label span,.aq-chemical-editor__line>span{color:#a5b4fc;font-weight:600;}
.aq-chemical-editor__line{display:flex;align-items:center;gap:9px;}
.aq-chemical-editor__line input{width:100%;min-width:0;min-height:38px;padding:7px 10px;color:#f8fafc;background:#0c172b;border:1px solid #4c6080;border-radius:8px;font-size:.86rem;}
.aq-chemical-editor__line input:focus{outline:2px solid #818cf8;outline-offset:1px;}
.aq-chemical-editor small{display:block;color:#9eafca;line-height:1.45;margin-top:6px;font-size:.68rem;}

/* v8.1 · Análisis químico: esconder magnitudes sin referencia válida. */
.aq-chemical-split[hidden], .aq-chemical-metric[hidden] { display:none!important; }

/* HUD: misma prioridad de interacción en escritorio y móvil.
   La variante móvil conserva sus reglas de desplazamiento táctil. */
#simulation-container > #info-hud.aq-hud {
  position:relative;
  z-index:30;
  isolation:isolate;
}
#info-hud #aq-hud-volume,
#info-hud .aq-hud-volume__reading { position:relative; z-index:1; }
#info-hud #aq-volume-edit-toggle:not([hidden]):not(:disabled) {
  position:relative; z-index:2; pointer-events:auto;
}

/* v8.2 · Edición exacta de litros dentro del HUD, sin separar estado físico. */
#info-hud .aq-hud-volume__reading{display:flex;align-items:center;gap:7px;max-width:100%}
#info-hud .aq-hud-volume__edit{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#a7cff5;background:rgba(83,139,200,.13);border:1px solid rgba(130,176,229,.25);border-radius:7px;font-size:11px;cursor:pointer;flex:0 0 auto}
#info-hud .aq-hud-volume__edit:hover,#info-hud .aq-hud-volume__edit:focus-visible{background:rgba(87,153,226,.26);color:#fff;outline-color:#7abafa}
#info-hud .aq-hud-volume__edit[hidden]{display:none!important}
/* v8.6 · Corrección estructural: diálogo nativo en la capa superior del navegador. */
#aq-volume-dialog.aq-volume-dialog {
  position:fixed !important; inset:0 !important; margin:auto !important;
  box-sizing:border-box; width:min(370px, calc(100vw - 24px)) !important;
  max-width:calc(100vw - 24px) !important; max-height:calc(100dvh - 24px) !important;
  padding:0 !important; border:1px solid #577da9 !important;
  border-radius:14px !important; background:#11243c !important;
  color:#dae9fa !important; overflow:auto !important;
  box-shadow:0 22px 70px rgba(0,0,0,.60) !important;
}
#aq-volume-dialog.aq-volume-dialog:not([open]) {display:none !important;}
#aq-volume-dialog.aq-volume-dialog[open] {display:block !important;}
#aq-volume-dialog.aq-volume-dialog::backdrop {background:rgba(2,6,23,.75);}
#aq-volume-dialog #aq-volume-editor.aq-hud-volume__form {
  position:static !important; inset:auto !important; transform:none !important;
  display:block !important; visibility:visible !important;
  box-sizing:border-box; width:100% !important; min-width:0 !important;
  padding:16px !important; margin:0 !important;
  color:#dae9fa !important; background:#11243c !important;
}
#aq-volume-dialog #aq-volume-editor[hidden] {display:none !important;}
#aq-volume-dialog .aq-hud-volume__form-row {display:flex; flex-wrap:wrap; align-items:center; gap:7px;}
#aq-volume-dialog label {display:block;margin-bottom:9px;font-size:13px;font-weight:700;}
#aq-volume-dialog input {box-sizing:border-box;flex:1 1 115px;width:100px;min-width:0;padding:9px;border-radius:7px;border:1px solid #6487aa;background:#091729;color:white;font-size:16px;}
#aq-volume-dialog button {padding:9px;border:1px solid #45688f;border-radius:7px;color:white;background:#22568b;font-weight:700;cursor:pointer;}
#aq-volume-dialog #aq-volume-error {display:block;margin-top:10px;font-size:12px;line-height:1.4;color:#b8d0eb;}

/* HUD móvil: un único viewport desplazable. El track NO crea otro scroll. */
@media (max-width:767px) {
  #simulation-container { overflow-x: clip; }
  #info-hud.aq-hud {
    position:relative; z-index:30;
    display:block; box-sizing:border-box; width:100%; max-width:100%; min-width:0;
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    scrollbar-width:thin; scrollbar-color:#536d93 transparent;
  }
  #info-hud.aq-hud > .aq-hud__track {
    display:flex; flex-wrap:nowrap; box-sizing:border-box;
    width:max-content; min-width:max-content; max-width:none;
    overflow:visible; gap:5px; padding-bottom:3px;
  }
  #info-hud.aq-hud .aq-hud__metric {
    box-sizing:border-box; flex:0 0 132px; width:132px; min-width:132px;
    min-height:53px; padding:6px 8px;
  }
  #info-hud.aq-hud button, #info-hud.aq-hud summary { touch-action:manipulation; }
}