body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #222; /* Fondo oscuro general */
    color: #eee; /* Color de texto claro */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-y: auto; /* Permite desplazamiento si el contenido es demasiado alto */
}

header {
    background-color: #1a1a1a;
    color: #00ff00; /* Verde brillante para el título */
    padding: 1em;
    text-align: center;
    font-size: 1.5em;
    border-bottom: 2px solid #00aa00;
}

main {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center; /* Centra el contenido verticalmente */
    padding: 1em;
    min-height: calc(100vh - 120px); /* Ajustar según la altura del header/footer */
}

.osciloscopio-layout {
    display: grid;
    /* Definición de las áreas de la cuadrícula:
       - izquierda (controles), pantalla, derecha (controles)
    */
    grid-template-areas:
        "left  pantalla right";

    /* Definición de las columnas:
       - 250px para la columna izquierda (controles)
       - 800px para la columna central (ancho fijo de la pantalla)
       - 250px para la columna derecha (controles)
    */
    grid-template-columns: 250px 800px 250px; /* Anchos fijos para paneles laterales */
    grid-template-rows: 1fr; /* Una sola fila que ocupa el espacio disponible */
    gap: 15px; /* Espacio entre los elementos de la cuadrícula */
    max-width: 1350px; /* Ancho máximo para el layout completo */
    width: 100%;
    margin: auto; /* Centra el layout en la página */
    align-items: start; /* Alinea los ítems de la cuadrícula al inicio de su área */
}

/* Asignación de elementos a las áreas de la cuadrícula */
.controles-izquierdos { grid-area: left; }
.pantalla { grid-area: pantalla; }
.controles-derechos { grid-area: right; }

/* Estilos para los contenedores de control */
.controles-izquierdos,
.controles-derechos {
    background-color: #333;
    border: 1px solid #555;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch; /* Estira los hijos para que ocupen el ancho completo */
    overflow-y: auto; /* Permite desplazamiento interno si los controles son muchos */
    max-height: calc(400px + 30px + 20px); /* Aproximadamente altura de canvas + padding + gaps */
    /* El max-height busca que el panel no sea más alto que la pantalla + su padding */
}

/* Altura ajustada para la pantalla en el layout Grid */
.pantalla {
    background-color: #000;
    border: 3px solid #555;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px; /* Altura fija para el contenedor de la pantalla */
}

#canvas-osciloscopio {
    background-color: #000;
    border: 1px solid #333;
    display: block;
    width: 800px; /* Asegura el ancho fijo del canvas */
    height: 400px; /* Asegura el alto fijo del canvas */
}

/* Estilo para los sub-contenedores de cada canal y sección */
.seccion-general,
.seccion-escala,
.seccion-trigger,
.seccion-mediciones-cursores,
.seccion-canal {
    background-color: #444;
    border: 1px solid #666;
    padding: 10px;
    border-radius: 5px;
    width: 100%; /* Asegura que la sección ocupe todo el ancho de su padre */
    box-sizing: border-box; /* Incluye padding y border en el ancho */
}

h3 {
    color: #00ee00;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em; /* Ligeramente más pequeño para ahorrar espacio */
    border-bottom: 1px dashed #008800;
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h4 {
    color: #00ff00;
    margin-bottom: 5px;
    font-size: 0.95em; /* Ligeramente más pequeño */
    border-bottom: 1px dotted #00aa00;
    padding-bottom: 3px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: 0.85em; /* Más pequeño para ahorrar espacio */
}

/* Estilo para las filas de controles individuales (label, input, span) */
.control-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px; /* Menos espacio entre filas */
    flex-wrap: nowrap; /* Evita que los elementos se envuelvan a menos que sea necesario */
}

.control-fila label {
    flex-basis: 35%; /* Ajustado */
    margin-bottom: 0;
    white-space: nowrap;
    text-overflow: ellipsis; /* Añadir puntos suspensivos si el texto es muy largo */
    overflow: hidden;
}

.control-fila input[type="range"],
.control-fila select,
.control-fila input[type="color"] {
    flex-grow: 1;
    margin-left: 8px; /* Menos margen */
    margin-right: 8px; /* Menos margen */
    margin-bottom: 0;
}

.control-fila span {
    flex-basis: 15%; /* Ajustado */
    text-align: right;
    white-space: nowrap;
    font-size: 0.85em; /* Ajustado */
}

input[type="range"],
select,
input[type="color"] {
    background-color: #555;
    border: 1px solid #777;
    border-radius: 3px;
    color: #eee;
    padding: 5px;
    -webkit-appearance: none;
    appearance: none;
    height: 25px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #00ff00;
    cursor: grab;
    border: 1px solid #fff;
}
input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #00ff00;
    cursor: grab;
    border: 1px solid #fff;
}
input[type="range"]::-webkit-slider-runnable-track {
    background: #777;
    height: 5px;
    border-radius: 3px;
}
input[type="range"]::-moz-range-track {
    background: #777;
    height: 5px;
    border-radius: 3px;
}

select {
    height: 30px; /* Ligeramente más pequeño para encajar mejor */
    padding: 0 5px;
    font-size: 0.85em;
}

input[type="color"] {
    height: 30px;
    padding: 0;
    cursor: pointer;
}

span {
    color: #00ff00;
    font-weight: bold;
}

p {
    margin: 3px 0; /* Menos margen vertical */
    font-size: 0.85em; /* Más pequeño */
}

button {
    padding: 6px 10px; /* Más compacto */
    border: none;
    border-radius: 5px;
    background-color: #008800;
    color: #fff;
    cursor: pointer;
    font-size: 0.85em; /* Más pequeño */
    transition: background-color 0.2s ease;
    margin-right: 5px;
    margin-bottom: 5px; /* Menos margen vertical */
}

button:hover {
    background-color: #00aa00;
}

button.active {
    background-color: #00aa00; /* Un verde más brillante */
    color: #fff;
    border: 1px solid #00ff00;
    box-shadow: 0 0 5px #00ff00;
}

/* Para los grupos de botones, para que no se separen demasiado */
.seccion-general .control-fila {
    justify-content: space-around; /* Distribuye botones uniformemente */
}
.seccion-general .control-fila button {
    flex-grow: 1; /* Permite que los botones crezcan */
    margin: 2px; /* Margen mínimo entre ellos */
}


/* Ajustes para las mediciones de los cursores */
.medicion-cursor-fila {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.medicion-cursor-fila p {
    flex-basis: 30%; /* Para distribuir 3 mediciones por fila */
    text-align: center;
    margin: 2px 0;
}


footer {
    background-color: #1a1a1a;
    color: #888;
    padding: 1em;
    text-align: center;
    margin-top: 20px;
    border-top: 2px solid #00aa00;
}

/* Media Queries para responsividad */
@media (max-width: 1350px) {
    /* Cuando la pantalla es menor que el ancho máximo del layout */
    .osciloscopio-layout {
        grid-template-columns: 200px 1fr 200px; /* Reducimos el ancho de los paneles laterales */
        max-width: 100%; /* El layout ocupa todo el ancho */
    }
    #canvas-osciloscopio {
        width: 100%; /* Canvas se vuelve flexible */
        height: auto; /* Mantiene proporción */
        max-width: 800px; /* Pero con un máximo */
    }
}

@media (max-width: 900px) {
    /* En pantallas de tablets y laptops pequeñas */
    .osciloscopio-layout {
        grid-template-areas:
            "left      left"
            "pantalla  pantalla"
            "right     right";
        grid-template-columns: 1fr 1fr; /* Dos columnas principales */
        grid-template-rows: auto auto auto;
        gap: 10px;
    }

    .controles-izquierdos,
    .controles-derechos {
        width: 100%;
        max-width: unset; /* Quita el max-width para que se ajuste */
        overflow-y: visible; /* Permite que el scroll sea del body si es necesario */
        max-height: unset; /* Quita el max-height para que crezca libremente */
        flex-direction: row; /* Intenta poner las secciones una al lado de la otra */
        flex-wrap: wrap; /* Y que se envuelvan si no hay espacio */
        justify-content: space-around;
        padding: 10px;
    }

    .seccion-general,
    .seccion-escala,
    .seccion-trigger,
    .seccion-mediciones-cursores,
    .seccion-canal {
        flex-basis: 48%; /* Intenta poner dos secciones por fila en paneles */
        margin-bottom: 10px;
        padding: 8px;
    }

    #canvas-osciloscopio {
        width: 95%; /* Asegura que el canvas no toque los bordes */
        max-width: 800px;
    }
}

@media (max-width: 600px) {
    /* En pantallas de móvil */
    .osciloscopio-layout {
        grid-template-areas:
            "left"
            "pantalla"
            "right";
        grid-template-columns: 1fr; /* Una sola columna */
        grid-template-rows: auto auto auto;
        gap: 5px;
    }

    .controles-izquierdos,
    .controles-derechos {
        flex-direction: column; /* Vuelve a apilar las secciones verticalmente */
        padding: 5px;
    }

    .seccion-general,
    .seccion-escala,
    .seccion-trigger,
    .seccion-mediciones-cursores,
    .seccion-canal {
        flex-basis: 100%; /* Ocupan todo el ancho */
        margin-bottom: 5px;
        padding: 5px;
    }

    h3 {
        font-size: 1em;
    }

    label, span, p {
        font-size: 0.8em;
    }

    button {
        padding: 5px 8px;
        font-size: 0.8em;
        margin-bottom: 5px;
    }

    .control-fila {
        flex-direction: column; /* Apila los elementos dentro de cada control */
        align-items: flex-start;
        margin-bottom: 3px;
    }

    .control-fila label,
    .control-fila input,
    .control-fila select,
    .control-fila span,
    .control-fila input[type="color"] {
        width: 100%;
        margin: 1px 0;
        text-align: left;
    }

    .medicion-cursor-fila p {
        flex-basis: 100%; /* Una medición por fila */
        text-align: left;
    }

    footer {
        font-size: 0.8em;
    }
}