/* root/css/lesson-layout.css */

body {
    background-color: #f4f7f6; /* Un gris verdoso muy tenue */
}

.lesson-wrapper {
    display: flex;
    width: 90%;
    max-width: 1400px;
    margin: 40px auto;
    gap: 40px;
}

/* Sidebar elegante */
.lesson-sidebar {
    width: 20%;
    position: sticky;
    top: 100px;
    background: #ffffff;
    padding: 25px;
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Área de secciones: Aquí está el truco de la elegancia */
.sections-area {
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Cada sección como una tarjeta minimalista */
.lesson-content-section, .lesson-main-section {
    background: #ffffff;
    padding: 60px; /* Mucho espacio interno */
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    max-width: 900px; /* Limitamos el ancho para que el texto no sea eterno */
    margin: 0 auto; /* Centramos la tarjeta en su área */
}

/* Línea decorativa lateral para secciones */
.lesson-content-section {
    border-left: 8px solid #1B5E20;
}