/* ... estilos checkbox ... */
.checkbox-label {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
}
.checkbox-label input[type="checkbox"] {
    display: none;
}
.checkbox-label .checkmark {
    width: 18px;
    height: 18px;
    background-color: #334155; /* slate-700 */
    border: 1px solid #475569; /* slate-600 */
    border-radius: 4px;
    margin-right: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background-color: #3b82f6; /* blue-500 */
    border-color: #3b82f6;
}
.checkbox-label .checkmark:after {
    content: "";
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s;
}
.checkbox-label input[type="checkbox"]:checked + .checkmark:after {
    opacity: 1;
}

/* ... estilos scrollbar ... */
#charge-list-container::-webkit-scrollbar {
    width: 6px;
}
#charge-list-container::-webkit-scrollbar-track {
    background: #1e293b; /* slate-800 */
}
#charge-list-container::-webkit-scrollbar-thumb {
    background: #475569; /* slate-600 */
    border-radius: 3px;
}

.control-panel::-webkit-scrollbar {
    width: 8px;
}
.control-panel::-webkit-scrollbar-track {
    background: transparent;
}
.control-panel::-webkit-scrollbar-thumb {
    background: #334155; /* slate-700 */
    border-radius: 4px;
    border: 2px solid #0f172a; /* slate-900 */
}

#popup-content-info::-webkit-scrollbar {
    width: 6px;
}
#popup-content-info::-webkit-scrollbar-track {
    background: #1e293b; /* slate-800 */
}
#popup-content-info::-webkit-scrollbar-thumb {
    background: #475569; /* slate-600 */
    border-radius: 3px;
}


/* Scrollbar para el contenedor de gráficas */
#charts-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
#charts-container::-webkit-scrollbar-track {
    background: #1e293b; /* slate-800 */
    border-radius: 4px;
}
#charts-container::-webkit-scrollbar-thumb {
    background: #475569; /* slate-600 */
    border-radius: 4px;
    border: 2px solid #1e293b;
}
#charts-container::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* slate-500 */
}


/* Canvas */
.simulation-canvas {
    background-color: #0f172a; /* slate-900 */
    cursor: crosshair;
}

/* CAMBIO: Estilos para el overlay de gráficas */
#charts-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10; /* Debajo de los botones de zoom (z-20) */
    
    background-color: rgba(30, 41, 59, 0.9); /* slate-800 con 90% opacidad */
    backdrop-filter: blur(8px);
    
    border-top: 1px solid #334155; /* slate-700 */
    
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transform: translateY(100%);
    opacity: 0;
    
    max-height: 40vh; /* Límite de altura */
    overflow-y: auto; /* Scroll si no caben */

    /* CORRECCIÓN: No bloquear el ratón cuando está oculto */
    pointer-events: none;
}
#charts-container.charts-visible {
    transform: translateY(0);
    opacity: 1;
    /* CORRECCIÓN: Permitir clics cuando es visible */
    pointer-events: auto;
}

/* ... (estilos de footer) ... */
 .aq-footer { background-color: transparent; color: #fff; font-size: 0.875rem; padding: 1rem 0.5rem; margin-top: auto; } 
 .aq-footer-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; max-width: 1200px; margin: 0 auto; } 
 .aq-footer-logo img { height: 40px; width: auto; object-fit: contain; } 
 .aq-footer-item { white-space: nowrap; display: flex; align-items: center; } 
 .aq-footer-link { color: #fff; text-decoration: none; transition: color 0.2s; } 
 .aq-footer-link:hover { color: #3b82f6; text-decoration: underline; } 
 .aq-footer-btn { display: inline-block; background-color: #3b82f6; color: #fff; padding: 0.5rem 1rem; border-radius: 0.375rem; text-decoration: none; font-weight: 500; transition: background-color 0.2s; } 
 .aq-footer-btn:hover { background-color: #2563eb; } 
 
 
 
 /* =========================================
   RESPONSIVE MOBILE (SOLUCIÓN CARRUSEL)
   ========================================= */
@media (max-width: 1024px) {

    /* 1. ESTRUCTURA GENERAL: COLUMNA */
    html, body {
        overflow-x: hidden; /* Sin scroll horizontal general */
        overflow-y: auto !important; /* Scroll vertical permitido */
        height: auto !important;
        min-height: 100vh;
        background-color: #0f172a;
    }

    #app-container, main, .flex.h-screen {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* 2. CANVAS: ALTURA FIJA (60% de pantalla) */
    #simulation-canvas, .canvas-container {
        width: 100% !important;
        height: 60vh !important; /* Dejamos el 40% restante para controles */
        min-height: 350px;
        position: relative !important;
        z-index: 1;
        /* --- NUEVO: EVITAR EL APLASTAMIENTO --- */
        flex-shrink: 0 !important; /* "Prohibido encogerte aunque falte sitio" */
        flex-grow: 0 !important;   /* "No crezcas más de lo que te digo" */
        /* -------------------------------------- */
    }

    /* 3. PANEL SUPERIOR: EL CARRUSEL (SCROLL HORIZONTAL) */
    /* Solución elegante: Tira horizontal arriba, deslizante */
    #coulomb-analysis-panel {
        display: flex !important; /* En fila */
        flex-wrap: nowrap !important; /* No saltar de línea */
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        transform: none !important;
        margin: 0 !important;
        
        overflow-x: auto !important; /* ¡Aquí está la magia! Scroll lateral */
        gap: 12px !important;
        padding: 10px 15px !important;
        
        background: rgba(15, 23, 42, 0.95) !important; /* Casi opaco para leer bien */
        border: none !important;
        border-bottom: 1px solid #334155;
        border-radius: 0 !important;
        z-index: 50 !important;
        
        /* Suavidad en iPhone */
        -webkit-overflow-scrolling: touch;
        /* Ocultar barra de scroll fea pero mantener funcionalidad */
        scrollbar-width: none; 
    }
    
    #coulomb-analysis-panel::-webkit-scrollbar {
        display: none;
    }

    /* Bloques dentro del panel */
    #coulomb-analysis-panel > div {
        flex: 0 0 auto !important; /* No encogerse */
        border-right: 1px solid #334155;
        padding-right: 12px;
        min-width: 130px; /* Ancho mínimo para leer cómodamente */
    }
    
    #coulomb-analysis-panel > div:last-child {
        border-right: none;
    }

    /* Ajustar tamaño de letra en móvil */
    #coulomb-analysis-panel * {
        font-size: 11px !important;
    }

    /* 4. CONTROLES ABAJO (SIN HUECOS NEGROS) */
    .control-panel, #user-panel {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        
        padding: 20px !important;
        background-color: #0f172a;
        border-top: 1px solid #334155;
        
        /* Esto asegura que ocupe el espacio necesario */
        flex-grow: 1; 
    }

    /* 5. BOTONES DE ZOOM */
    /* Los ponemos flotando abajo a la derecha, sobre el canvas */
    .absolute.bottom-4.right-4 {
        bottom: 15px !important;
        right: 15px !important;
        top: auto !important;
        left: auto !important;
        flex-direction: column; /* Uno encima de otro */
        z-index: 40;
    }
    
    /* 5. GRÁFICAS: BLOQUE SÓLIDO (Insertado entre Canvas y Controles) */
    #charts-container {
        /* Romper el posicionamiento absoluto de PC */
        position: relative !important; 
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        
        
        /* Ocupar ancho completo */
        width: 100% !important;
        height: auto !important;
        max-height: 350px !important; /* Altura máxima por si acaso */
        
        /* Estética de bloque */
        background-color: #1e293b !important; /* Fondo gris oscuro (Slate-800) */
        border-top: 1px solid #334155;
        border-bottom: 1px solid #334155;
        padding: 10px !important;
        margin: 0 !important;
        opacity: 1 !important;
        
        /* LA CLAVE: Usar 'order' para colocarlo visualmente */
        /* Canvas(1) -> Gráficas(2) -> Controles(3) */
        order: 2 !important; 
        
        /* Comportamiento de visibilidad */
        display: none; /* Oculto por defecto */
        pointer-events: auto !important;
        z-index: 10 !important;
    }

    #charts-container.charts-visible {
        display: block !important; /* Al activarse, empuja los controles hacia abajo */
    }

    /* Asegurar el orden de los vecinos para que funcione el sándwich */
    #simulation-canvas, .canvas-container { 
        order: 1 !important; 
    }
    .control-panel, #user-panel { 
        order: 3 !important; 
    }
}