/* ============================================================
        lms-main.css    
        ESTILOS DEL CONTENIDO PRINCIPAL
     ============================================================ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: "Poppins", sans-serif;
            background: #f4f6f8;
            color: #1f2937;
            overflow-x: hidden;
        }
        
        main.container {
            margin-left: 16.875rem;
            padding: 2rem 2.5rem;
            min-height: 100vh;
            transition: margin-left 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        }
        
        main.container h1 {
            font-size: clamp(2rem, 5vw, 3.2rem);
            margin-bottom: 1.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #1e293b, #2d3a4b);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
        
        main.container p {
            font-size: 1rem;
            line-height: 1.7;
            margin-bottom: 1rem;
            max-width: 75ch;
        }
        
        .demo-card {
            background: white;
            border-radius: 24px;
            padding: 1.5rem;
            margin: 1.5rem 0;
            border: 1px solid rgba(0,0,0,0.05);
            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
        }
        
     /* ============================================================
   MOBILE (lms-main.css)
   ============================================================ */

@media (max-width: 768px) {
    
    /* El main debe respetar el espacio del men¨² colapsado */
    main.container {
        margin-left: 4.2rem !important;  /* Fuerza el mismo ancho que --collapsed */
        padding: 1rem;
        width: calc(100% - 4.2rem);      /* Ajusta el ancho disponible */
        max-width: 100%;
        overflow-x: hidden;
    }
}

@media (max-width: 480px) {
    main.container {
        margin-left: 4rem !important;
        width: calc(100% - 4rem);
    }
}

 /* ============================================================
   REFACTORIZACION: Estilos base (Mobile First)
   Imagen con borde elegante, sombra suave y esquinas redondeadas
   ============================================================ */

.img-lms-estructura {
    display: block;
    max-width: 100%;
    height: auto;

    border: 3px solid rgba(0, 0, 0, 0.15);   /* borde elegante */
    border-radius: 12px;                     /* esquinas suaves */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); /* sombra profesional */

    margin: 1.5rem auto;                     /* centrado */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover (solo desktop, pero no afecta móviles) */
@media (hover: hover) {
    .img-lms-estructura:hover {
        transform: scale(1.02);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    }
}