:root {
            /*primary*/
            --primary-10: #052e25ff;
            --primary-20: #265248ff;
            --primary-30: #446e65ff;
            --primary-40: #5d877eff;
            --primary-50: #76a198ff;
            --primary-60: #93bab2ff;
            --primary-70: #b2d1caff;
            --primary-80: #d1e8e3ff;
            --primary-90: #ebfffbff;

            /* WARNING SCALE - Verdes oliva y marrones */
            --warning-10: ##291e05ff; /* Drab dark brown */
            --warning-20: #5f4416ff; /* Field drab */
            --warning-30: #806323ff; /* Reseda green */
            --warning-40: #9e7c2eff; /* Moss green */
            --warning-50: #c39737ff; /* Sage */
            --warning-60: #d1b25cff; /* Sage 2 */
            --warning-70: #dcbd7eff; /* Dutch white */
            --warning-80: #e7d6a2ff; /* Beige */
            --warning-90: #fbe5bbff; /* Ivory */
    
            /* DANGER SCALE - Rojos terrosos */
            --danger-10: #2e0805ff; /* Black bean */
            --danger-20: #522826ff; /* Caput mortuum */
            --danger-30: #6e4744ff; /* Rose ebony */
            --danger-40: #87615dff; /* Rose taupe */
            --danger-50: #a17975ff; /* Cinereous */
            --danger-60: #ba9893ff; /* Rosy brown */
            --danger-70: #d1b4b2ff; /* Pale dogwood */
            --danger-80: #e8d3d1ff; /* Misty rose */
            --danger-90: #ffecebff; /* Lavender blush */
    
            /* NEUTRAL SCALE - Grises */
            --neutral-10: #1a1a1aff; /* Eerie black */
            --neutral-20: #3d3d3dff; /* Onyx */
            --neutral-30: #595959ff; /* Davy's gray */
            --neutral-40: #737373ff; /* Dim gray */
            --neutral-50: #8c8c8cff; /* Battleship gray */
            --neutral-60: #a6a6a6ff; /* Silver */
            --neutral-70: #c2c2c2ff; /* Silver 2 */
            --neutral-80: #dbdbdbff; /* Platinum */
            --neutral-90: #f5f5f5ff; /* White smoke */
    
            /* SUCCESS SCALE - Verdes cálidos */
            --success-10: #052e07ff; /* Pakistan green */
            --success-20: #265227ff; /* Cal Poly green */
            --success-30: #446e46ff; /* Fern green */
            --success-40: #5d875fff; /* Reseda green */
            --success-50: #75a177ff; /* Asparagus */
            --success-60: #93ba96ff; /* Cambridge blue */
            --success-70: #b2d1b3ff; /* Celadon */
            --success-80: #d1e8d2ff; /* Nyanza */
            --success-90: #ebffecff; /* Honeydew */
    
            /* INFORMATION SCALE - Azules fríos */
            --info-10: #051a2eff; /* Oxford blue */
            --info-20: #263d52ff; /* Charcoal */
            --info-30: #445a6eff; /* Paynes gray */
            --info-40: #5d7387ff; /* Paynes gray 2 */
            --info-50: #758ca1ff; /* Slate gray */
            --info-60: #93a6baff; /* Cadet gray */
            --info-70: #b2c3d1ff; /* Powder blue */
            --info-80: #d1dce8ff; /* Alice blue */
            --info-90: #ebf6ffff; /* Alice blue 2 */



            --primary-color: var(--primary-40);
            --secondary-color: var(--primary-30);
            --link-color: #1C16D0;
            --accent-shade: #1C3399;
            --accent-darker-shade: #0F1C57;
            --light-color: var(--neutral-90);
            --light-shade: var(--neutral-80);
            --dark-color: var(--neutral-10);
            
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--neutral-80);
            color: var(--dark-color);
        }

         /* unvisited link */
        .h-link, li.breadcrumb-item{
            color: var(--link-color) !important;
        }

        li.breadcrumb-item.active {
            color: var(--primary-20) !important;
            font-weight: bold !important;
        }
        

        a:hover {
                
        }

        a:visited {
                
        }

        
        .table-header{
            background-color: var(--primary-80) !important;
        }
       
        
        input.form-check-input {
            width: 1.2em;
            height: 1.2em;
            border-radius: 0.25em;
            border: 2px solid var(--primary-40);
            background-color: var(--light-color);
            a
            margin-right: 0.5rem;

        }
        /* Activado */
        input.form-check-input:checked {
            background-color: var(--primary-40);
            border-color: var(--primary-40);
            ccent-color: var(--light-color);
        }
        
        /* Hover */
        input.form-check-input:hover {
            background-color: var(--neutral-80);
            border-color: var(--primary-30);
        }
        
        /* Hover cuando está activado */
        input.form-check-input:checked:hover {
            background-color: var(--primary-50);
            border-color: var(--primary-50);
        }
        /* Focus */
        input.form-check-input:focus {
            border-color: var(--primary-40);
            box-shadow: 0 0 0 0.2rem rgba(96,135,126, 0.5) !important; 
        }



        .btn {
            transition: all 0.3s ease-in-out;
        }

        .navbar {
            background-color: var(--primary-40);
            box-shadow: none !important;
            border: none !important;

        }
        
        .navbar-brand {
            font-weight: 700;
            color: var(--light-color)!important;
            background-color: var(--primary-color) !important;
        }


        
        .nav-link {
            color: var(--light-color) !important;
            background-color: var(--primary-40) !important;
        }
        
        .nav-link:hover, .navbar-brand:hover {
            color: var(--light-color) !important;
            background-color: var(--primary-30) !important;
        }

        .nav-link:active, .navbar-brand:active{
            color: var(--light-color) !important;
            background-color: var(--primary-20) !important;
        }

        .btn-group-hero {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
            margin-top: 1rem;
        }

        .btn-fixed {
            min-width: 180px;
        }
        
        .btn-primary {
            background-color: var(--primary-40);
            border-color: var(--primary-40);
            border-width: 2px !important;
            color: var(--light-color);
            font-weight: bold;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-30) !important;
            border-color: var(--primary-30);
        }

        .btn-primary:active {
            background-color: var(--primary-20) !important;
            border-color: var(--primary-20) !important;
        }

        .btn-outline-light {
            /*background-color: var(--light-shade);*/
            border-color: var(--neutral-90) !important;
            border-width: 2px !important;
            color: var(--neutral-90) !important;
            
        }

        .btn-outline-light:hover {
            background-color: var(--neutral-80);
            border-color: var(--neutral-80) !important;
            border-width: 2px !important;
            color: var(--dark-color) !important;
            
        }

        .btn-outline-light:active {
            background-color: var(--neutral-70) !important;
            border-color: var(--neutral-70) !important;
            border-width: 2px !important;
            color: var(--dark-color) !important;
            
        }

        .btn-outline-primary {
            border-color: var(--primary-color) !important;
            border-width: 2px !important;
            color: var(--primary-20) !important;
        }

        .btn-outline-primary:hover {
            background-color:var(--primary-color);
            border-color: var(--primary-color) !important;
            border-width: 2px !important;
            color: var(--light-color) !important;
        }

        .btn-outline-primary:active {
            background-color:var(--primary-20) !important;
            border-color: var(--primary-20) !important;
            border-width: 2px !important;
            color: var(--light-color) !important;
        }

        .btn-light{
            background-color: var(--light-color);
            border-color: var(--light-color);
            border-width: 2px !important;
            color: var(--primary-30);
            font-weight: bold;
            
        }

        .btn-light:hover {
            background-color:var(--neutral-80);
            border-color: var(--neutral-80) !important;
            border-width: 2px !important;
            color: var(--primary-30);
        }

        .btn-light:active {
            background-color:var(--neutral-70) !important;
            border-color: var(--neutral-70) !important;
            border-width: 2px !important;
            color: var(--primary-30) !important;
        }
        
        
        .card{
            
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }
        
        .card:hover {
           
            transform: none;
            box-shadow: 0 8px 20px rgba(96,135,126,0.75) !important;
        }

        .card-moving:hover {
           
            transform: translateY(-6px);
            box-shadow: 0 8px 20px rgba(96,135,126,0.75);
        }
        
        .card-img-top {
            width: 100%;
            height: 40%;
            border-radius: 12px 12px 0 0;
            object-fit: cover;
            margin-bottom: 1rem;
        }

        .card-destacados {
            height:60vh !important;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-destacados:hover {
            transform: none;
            box-shadow: 0 8px 20px rgba(96,135,126,0.75);
            
        }
        
        .card-destacados .btn, .card .btn{ 
            margin-bottom: 1rem !important;
        }
        
        .hero-section {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;



            background: linear-gradient(rgba(5, 46, 37, .85) 0%, rgba(26, 26, 26, .95) 100%),
                        url("https://images.unsplash.com/photo-1585298799938-a15d7abb8523?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            
            color: var(--light-color);
            text-align: center;
            

            min-height: 100vh;         
            /*padding: 2rem 1rem; /* en móviles menos padding */

            box-shadow: none !important;
            border: none !important;
            
            

        }

        .hero-container{

            margin-bottom: 10%;   
        }

        .hero-section p{
            
            color: var(--light-color);
        }

        .form-label { 
            font-style: bold !important;
         }
        
        /*.subtitle{
            font-size: clamp(1.25rem, 5.5vw, 2.25rem);
            font-weight: bold;
        }*/

        .main-title {
            font-family: "Rubik Doodle Shadow", system-ui;
            font-size: clamp(2rem, 10vw, 6.875rem); /* Máximo ~110px, mínimo ~40px */
            font-style: normal;
            line-height: 1.1;
        }

        .bg-light { 
            background-color: var(--light-color) !important;
        }
        
        .footer{
            background-color: var(--neutral-80) !important;
            color: var(--dark-color) 0;
            padding: 2rem !important; 
            margin: 0px !important;
            text-align: center;
            

        }

        footer .row {
            text-align: center;
        }

        footer img {
            display: block;
            margin: 0 auto 1rem auto;
        }


        footer p{
            margin-bottom: 0px !important;
        }

        footer small{
            margin-bottom: 16px !important;
        }

        .pre-footer{
            background: var(--primary-color) !important;
            color: var(--light-color);
        }

        
        .course-price {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: var(--primary-80) !important;
            color: var(--dark-color) !important;
            padding: 5px 10px;
            border-radius: 20px;
            font-weight: bold;
        }
        
        .profile-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid var(--primary-color) !important;
        }

        

        .folderIcon, .fa-user-circle, .fa-chevron-up, .fa-chevron-down { 
            color: var(--primary-color) !important;
        }

        .card .fa-user, .card .fa-user-circle, .card .fa-user-plus, .fa-lock, .fa-envelope
        ,.fa-check-circle, .fa-book-open, .mainIcon {
            color: var(--primary-20) !important;
        }

        .fa-user-circle { 
            color: var(--light-color)!important;
        }

        .icono-escuela{
            font-size: clamp(3rem, 8vw, 6.875rem);
            position: relative;
        }

        .title-lines {
            display: inline-block;
            
        }

        .escuelita-main{

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: var(--neutral-80) !important; /* Fondo suave */
            height: auto;
        }

        .escuelita-main .p-4 {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding: 0 !important;
            background-color: var(--light-color);
            height: 80vh;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            
        }

        .escuelita-main .p-4:hover {
            transform: translateY(-6px);
            box-shadow: 0 8px 20px rgba(96,135,126,0.75);
        }

        .escuelita-main .p-4 img{
            width: 100%;
            height: 60%;
            border-radius: 12px 12px 0 0;
            object-fit: cover;
            margin-bottom: 2rem;
            
        }

        .cursos-destacados {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding:2rem !important;
            margin: 0px !important;
            background-color: var(--neutral-80) !important; /* Fondo suave */
            color: var(--primary-10);
            
            
        }

        .cursos-destacados h2, .escuelita-main h2{
            font-style: bold;
            color: var(--primary-20)!important;
            font-size: clamp(2rem, 5vw, 3.5rem); /* Máximo ~110px, mínimo ~40px */
        }
        
        .badge{
            background-color: var(--primary-70)!important;
            color: var(--dark-color)!important;
        }

        .fa-laptop{

            color: var(--info-30) !important;
        }
        
        .p-4 .fa-book{
            color: var(--success-30) !important;
        }

        .fa-certificate{
            color: var(--warning-30) !important;
        }

        .escuelita-main h3 {
            font-weight: 700;
            color: var(--dark-color) !important;
            margin-top: 1rem;
            margin-bottom: 0.5rem;  
        }

        .escuelita-main p {
            color: var(--dark-color) !important;
            font-size: 1rem;
            line-height: 1.5;
        }

        .login-container {
            background-color: var(--neutral-80) !important;
            
        }

        .login-container .card{
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            color: var(--dark-color);
        }

        .login-container .card{
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            color: var(--dark-color) !important;
        }

        .login-container .card:hover{
            transform: none;
            box-shadow: 0 8px 20px rgba(96,135,126,0.75) !important;
        }

        .form-control, .form-select{
            background-color: var(--info-90) !important;
        }

        .form-control:focus, .form-select:focus{
            box-shadow: 0 0 0 3px rgba(96,135,126, 0.65); /* alternativa estilizada */
            border-color: var(--primary-60) !important;
        }

        .fa-star, .fa-star-half-alt{
            color: var(--warning-60);
        }
        
        /* Cambia el color del switch cuando está activo */
        input[type="checkbox"].form-check-input:checked {
            background-color: var(--success-30)!important; /* Verde cál*/
            border-color: var(--success-30)!important;
        }
        
        /* Añade una sombra cuando tiene foco */
        input[type="checkbox"].form-check-input:focus {
            box-shadow: 0 0 0 0.25rem rgba(68, 110, 70, 0.3); /* Match success-30           */
            border-color: var(--success-30);
        }
       
        #backToTopBtn {
            background-color: var(--primary-color);
            width: 75px;
            height: 75px;
            font-size: 2.5rem;
        }
        
        @media (max-width: 768px) {
            .hero-section {
                padding: 2rem 1rem;
            }

            .hero-container {
                margin-bottom: 35%;
            }

            .navbar-brand span {
                display: none;
            }


            .escuelita-main, .cursos-destacados{
                height: auto;
                padding: 0;
            }

            .escuelita-main .p-4 {
                
                margin: 1rem;
            
            }

            .escuelita-main .p-4:hover {
                transform: none;
                box-shadow: none;
            }
            
            .card-destacados{
                height: auto !important;
                margin-bottom: 1rem;
                margin-left:.5rem;
                margin-right:.5rem;
            }

            

            
        }