/* Estilos generales */

	/* Fuentes */
		@font-face {
		    font-family: 'Lora';
		    src: url('../fonts/Lora.ttf') format('truetype');
		    font-weight: normal; 
		    font-style: normal; 
		}

		@font-face {
		    font-family: 'Playfair';
		    src: url('../fonts/Playfair.ttf') format('truetype');
		    font-weight: normal; 
		    font-style: normal; 
		}

		@font-face {
		    font-family: 'Nunito';
		    src: url('../fonts/Nunito.ttf') format('truetype');
		    font-weight: normal; 
		    font-style: normal; 
		}		



	/*Correcciones a la plantilla original de Vanilla*/

		main{
			min-height: 60vh;
		}

		/* Body + row sin márgenes ni padding y ocupando todo el ancho de la pantalla */
		.body{
			padding: 0px!important;
			font-family: "Nunito";
			background-color: #FDF4D5;
			color: #000000;
			font-size: 14px;
		}

		.row{
			max-width: 100vw;
			padding: 0px;
			margin: 0px;
			grid-gap: 0; /* no queremos separación entre los divs */
		}

		.row-margin{
			max-width: 80rem!important; 
			margin: 0 auto 1.75rem auto!important;
			grid-gap: 0 2rem!important;
		}

		.row-margin-1{
			max-width: 80rem!important; 
			margin: 0 auto 1rem auto!important;
			grid-gap: 0 1rem!important;
		}

		.row-noGap{
			grid-gap: 0!important;
		}

		.row-gap2{
			grid-gap: 0 2rem;
		}

		button:hover, button:active, .button:hover, button[aria-pressed=true], button[aria-selected=true], button[aria-expanded=true]{
			text-decoration: none;
    		background-color: #f0ded6;
		}
		
		p{
			max-width: none!important;
			font-size: 14px;
		}

        h2{
            max-width: none!important;
        }

		.display-none{
			display: none!important;
		}

		.no-margin{
			margin: 0px!important;
		}

		.no-padding{
			padding: 0px!important;
		}

			.no-padding-bottom{
				padding-bottom: 0px!important
			}

            .padding-left-2{
                padding-left: 2rem!important;
            }

		.infoMessage{
			padding: 1rem 0.75rem;
			font-size: 14px;
			background-color: #FFF9C4;
		}

			.miniInfo-message{
				text-transform: none; 
				font-size: 12px; 
				padding: 0.25rem 0.75rem;
				background-color: #FFF9C4;
			}

		.warningMessage{
			padding: 1rem 0.75rem;
			font-size: 14px;
			background-color: pink;
		}

		.doneMessage{
			padding: 1rem 0.75rem;
			font-size: 14px;
			background-color: #C8E6C9;
		}

        .img-responsive{
            width: 100%; 
            object-fit: cover;
            object-position: center; 
            height: 100%;
        }

		.border-top-grey{
			padding-top: 2rem;
			border-top: 1px solid #f6f6f6;
		}

        .border-left-grey{
            padding-left: 1rem;
            border-left: 1px solid #f6f6f6;
        }

		.warning-error{
			background-color: #f0ded6; 
			height: 60vh; 
			align-items: center; 
			display: flex; 
			justify-content: center;
		}

		.material-icons{
	        font-size: 20px;
	    }

	    .border-left{
	        border-left: 1px solid #f6f6f6;
	        padding-left: 2rem;
	    }

	    .font-14{
	        font-size: 14px;
	        line-height: 2rem;
	        display: flex; 
	        align-items: center;
	    }

	    	.normal-font{	    		
			    font-size: 14px;
			    letter-spacing: 0;
			    font-family: 'Nunito';
			    text-transform: none;
			    font-weight: normal;
	    	}
	    	
	    .separate{
	    	border-bottom: 1px solid #f6f6f6; 
	    	padding-bottom: 2rem;
	    }

	    .separate-mini{
	    	border-bottom: 1px solid #f6f6f6; 
	    	padding-bottom: 1rem;
	    }

		/* Márgenes */

			.margin-top-1{
				margin-top: 1rem!important;
			}

			.margin-top-2{
				margin-top: 2rem!important;
			}

            .margin-bottom-175{
                margin-bottom: 1.75rem!important;
            }

			.margin-bottom-2{
				margin-bottom: 2rem!important;
			}

            .padding-bottom-2{
                padding-bottom: 2rem!important;
            }





	/* 100% del alto del div ajustado a la pantalla */
	.full-height {
		display: flex;
    	height: 100vh;
    	justify-content: center; /* Centra horizontalmente */
    	align-items: center; /* Centra verticalmente */
	}

	.height-100{
		height: 100vh;
	}

	.height-75{
		height: 75vh!important;
	}

	/* Div en la mitad vertical de otro div => Contenedor > full-height | Div texto > vertical-text */
	.vertical-text{
		width: 60%; 
	}

	/*Para hacer scroll-y*/
	.scroll-y{
		overflow-y: scroll;
	}

	/* Para imágenes de fondo del div */
	.background-image{
		background-size: cover;
		background-position: center; 
		background-repeat: no-repeat; 	
	}

	/* Div con color de fondo */
	.colored-div{
		background-color: #f8f8f8
	}

	
	/* Title */
	.title{
		font-family: "Lora";
		margin-bottom: 0px;
		font-size: 2.5rem;
		
	}


		h1{
			font-size: 3rem!important;
		}

	.sub-title{
		font-family: "Nunito";
		font-weight: 600;
		font-size: 1.25rem;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.sub-title-lato{
		font-family:"Lora" ;
		text-transform: uppercase; 
		font-size: 1rem;
	}


	.mini-title{
		font-family: "Lora"; 
		text-transform: uppercase; 
		font-weight: bold; 
		font-size: 0.80rem
	}

	.mini-little-title{
		font-family: "Lora"; 
		text-transform: uppercase; 
		font-weight: bold; 
		font-size: 0.75rem;
	}

	
	

	/* Alinear exto */
	.center-align{
		text-align: center!important;
		
	}

	.right-align{
		text-align: right;
	}


	/* Elementos flotantes */
	.right{
		float: right;
	}

	.left{
		float: left;
	}

	/* Enlaces */
	a{
		cursor: pointer!important;
		color: initial!important;
	}

		a:hover{
			text-decoration: none!important;
		}


	/* Botones */
	.button{
		font-size: 10px;
	    border: 1px solid #e8e8e8;
	    line-height: 2;
	    padding: 10px 30px;
	    text-transform: uppercase;
	    color: initial;
	    text-decoration: none;
	    letter-spacing: .2em;
	    cursor: pointer;
	    margin-bottom: 0px;
	}

		.buttonPayment{
			background-color: #f0ded6;
		}

	.pointer{
		cursor: pointer!important;
	}


	/* Estilo de los elementos del form */
	input, textarea, select{
		border-radius: 0 !important;
	    border: 1px solid #f2f2f2 !important;
	    font-size: 13px !important;
	    height: auto !important;
	    padding: 12px !important;
	    background-color: #fafafa !important;
	    margin-bottom: 0px!important;

	}


	/*Margins*/
	.padding-top-2{
		padding-top: 2rem!important;
	}

	/* Table */
	.table{
            border-collapse: collapse;        
            font-size: 14px;
        }


        .table th, .table td{
            border: 1px solid #f6f6f6;
            padding: 10px 5px;
        }

    /* Tabla de precios */
    .priceTable th, .priceTable td{    	
    	padding: 10px 5px;
    }

    .border-transparent{
    	border: 1px solid transparent;
    }


   /* Make answer */
       .make-answer{
        background-color: #f1ded8; 
        padding: 12px 10px; 
        position: sticky;         
        top: 10px; /* se pega al top del contenedor cuando haces scroll */
       }

        .make-answer img{
            height: 50px;
        }

        .make-answer p{
            font-size: 10px!important;
        }


    /* Imáges de las lecciones => 25% - 25% - 50% */
        .images-5 .img-responsive{
            width: 50%;                      
            display: inline-block;
            float: left;                   
        }

        .images-5 img:first-of-type{                   
            padding-right: 1rem;
        }

        .images-5 img:nth-child(2){
            padding-left: 1rem;
        }


/*** FORMS ***/

.required{
    color: red;
}

.label{
    font-family: "Nunito";
    font-size: 14px;     
    padding: 0.80rem 3px 0.5rem 3px;
    margin-bottom: 0;
}

/*** NAV ****/

.horizontal-list {
  display: flex;          /* Usar flexbox para alinear los elementos en fila */
  padding: 0;             /* Eliminar el espaciado por defecto del <ul> */
  margin: 0;              /* Eliminar márgenes por defecto */
  list-style-type: none;  /* Eliminar los puntos de la lista */
  font-family: "Nunito";
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .2em;
  font-weight: bold;
}

.horizontal-list li {
  margin-right: 20px;     /* Espacio entre los elementos */
}

nav{
    padding-top: 2.25rem!important;
    padding-bottom: 2rem!important;
    border-bottom: 1px solid #f6f6f6;
}


nav .title-main{
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 1px;
    font-family: 'Playfair', serif; 
    padding: 0px;
    margin: 0px;           
}

nav .left-elements{
    align-items: center; 
    display: flex; 
}

nav .right-elements{
    justify-content: flex-end;
    align-items: center; 
    display: flex; 
}

nav .right-elements li{
    margin-left: 20px!important;
    margin-right: 0px!important;
}

nav .title{
    margin: 0px!important;
    padding: 0px!important;
}

nav .icon{
    height: 1.28rem;
}


/* CURSOS */

.course-background{
	 background-color: #fafafa;
}

.course img{
    width: 100%;
}

    .course .image {
      position: relative;
      display: inline-block;
    }

        .course .edition {
            position: absolute;
            top: 5px;  /* Ajusta según necesites */
            right: 5px;  /* Ajusta según necesites */
            background-color: #ffffff;  /* Fondo semitransparente (opcional) */                   
            padding: 3px 6px;
            letter-spacing: 0.1rem;
            font-family: 'Lora', serif;
            font-size: 12px;  
            font-weight: 600;          
            z-index: 10;  /* Asegura que el texto esté por encima de la imagen */
            margin: 0px;
        }

    .course .title{ 
        font-size: 13px;	   
	    font-weight: bold;
	    letter-spacing: 1px;
	    font-family: 'Nunito', sans-serif;
	    text-transform: uppercase;	    
    }

    	.title-page{
    		font-size: 30px;                  
	        font-weight: 500;              
	        font-family: 'Lora', serif;
	        padding-top: 1rem;
    	}


    .course .type, .course .time, .type-course{
        font-family: "Nunito";
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.1rem;
        padding: 0rem 0 0.5rem 0px;
        margin-bottom: 6px;
    }               

    .course .description, .course-first-element .description, .copy-desc, .description-course{
       line-height: 2rem;
       margin-bottom: 0;      
       font-size: 14px;
    }

    	.copy-desc{
    		padding-bottom: 1rem;
    		border-bottom: 1px solid #f6f6f6;
    		margin-bottom: 1.5rem;
    	}

    .course .icon{
    	height: 75px!important;
    	width: auto!important;
    	margin: 0 auto!important;
    }

    .course .button{
    	background-color: #ffffff;
    	margin-top: 2rem!important;
    }

    .course .button:hover{
    	background-color: #ffffff;
    }

    .course-first-element{
        align-items: center; 
        display: flex; 
        background-color: #f0ded6;  
        padding: 2rem;             
    }

        .course-first-element .title, .title-course{
            font-size: 36px;
		    line-height: 1.7em;
		    font-weight: 500;
		    letter-spacing: 1px;
		    font-family: 'Lora', serif;
        }


        .dates{
        	font-family: 'Lora', serif;
        	font-weight: normal;
        	text-transform: lowercase;
        	margin-left: 10px;
        	
        }

        .price{
        	font-size: 24px;
        }


    .workshop-elements-learn{
    	padding: 3.5rem 3rem 0rem 3rem; 
    	background-color: #fafafa;
    }

    .workshop-elements-work{
    	padding: 3.5rem 3rem 0rem 3rem;
    }

    .background-workshop-cart{
    	padding: 3.5rem 3rem 3.5rem 3rem; 
    	background-color: #f0ded6;
    }

    .priceTotal{
    	padding-top: 1rem; 
    	padding-bottom: 0.75rem; 
    	border-top: 2px solid #222222; 
    	border-bottom: 2px solid #222222;
    }

    .input-billingAddress{
    	vertical-align: top; 
    	margin-top: 0.75rem;
    }

    .label-billingAddress{
    	display: inline-block; 
    	vertical-align: top; 
    	line-height: 1.25rem; 
    	margin-left: 1rem!important;
    	font-size: 14px;
    }

    	.label-billingAddress span{
    		font-size: 12px;
    	}

    .confirm-cart{
    	padding: 3rem;
    	background-color: #f0ded6;

    }



/* FOOTER */
footer{
    background-color: #f6f6f6;
    margin-bottom: 0px;
    margin-top: 3.5rem;
    padding: 2rem 0 1rem 0;
}


/** USUARIOS **/
	.button-account{
	    text-transform: uppercase;
	    font-size: 12.5px;
	    letter-spacing: 1px;
	    background-color: #f0ded6; 
	    padding: 0.85rem 1.5rem; 
	}

	.detail-course{
	    text-align: center;
	    font-family: 'Lora', serif;
	    padding-top: 0px;
	    font-size: 12px;
	}


	/* Configuración de la cuenta */
	.account-options .p-tabs__link{
        font-family: "Nunito";
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: .1em;
        font-weight: bold;
        text-align: left;
    }

    .p-tabs__link:active::before, .p-tabs__link[aria-selected=true]::before{
        background-color: #f0ded6!important;
    }

    .p-tabs__list::after{
        background-color: #f6f6f6!important;
    }

    

    .billing-address{
        padding: 1rem;
        border: 1px solid #e8e8e8;
    }

        .billing-address p{
            font-size: 14px;
        }

        .billing-address strong{
            text-transform: uppercase;
            letter-spacing: .1rem;
        }


    .p-modal .title, .title-modal{
        font-family: "Nunito";
        text-transform: uppercase;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: .1em;
        padding-bottom: 1rem;
    }

    .order{
        margin-bottom: 1rem!important;
    }

        .order-head .title{
            font-size: 12px;
            font-family: "Nunito";
            text-transform: uppercase;
            letter-spacing: .1em;
            font-weight: bold;
            line-height: 0;
        }


    .title-lesson{
        font-family: 'Lora', sans-serif;
        letter-spacing: 1px;
        font-size: 2.25rem;
        margin-bottom: 1rem;      
        
    }


    .edition-course{
        float: right;
        font-family: 'Nunito', sans-serif;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.1px;
        padding: 4px 12px;
        background-color: #f0ded6; 
        vertical-align: middle;
    }
       
    .lesson{
        margin-bottom: 1.25rem;
    }

        .lesson-block {
            position: relative;
           
        }

        .lesson-block::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.5); /* Blanco semitransparente */
            z-index: 1; /* Asegúrate de que esté por encima del contenido */
        }


    .lesson .date{
        position: absolute;
        top: 5px;
        right: 5px;
        background-color: #ffffff;
        padding: 3px 6px;        
        font-family: 'Lora', serif;
        font-size: 12px;
        letter-spacing: 0.1px;
        font-weight: 600;
        z-index: 10;
        margin: 0px;
    }

    .lesson .title{
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 1px;
        font-family: 'Nunito', sans-serif;
        text-transform: uppercase;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 8px;
    }

    .lesson .icon{
        width: 20px;
        display: inline-block;
        margin-right: 12px;
        vertical-align: middle;
        margin-bottom: 8px;
    }

    .lesson .short{
        font-size: 13px;
        padding-left: 36px;

    }



    /* leccion */
    .title-course{
        font-size: 12px;
        font-family: 'Nunito', sans-serif;
        text-transform: uppercase;
    }

    .title-comments{
        font-size: 14px;
        font-family: 'Nunito', sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 1px;
        margin-bottom: 3rem;
        margin-top: 2rem;
    }

    .title-lesson{
        font-family: 'Lora', sans-serif;
        letter-spacing: 1px;
        font-size: 2.25rem;
        margin-bottom: 1rem;
       
        
    }

    .content-lesson{
        padding-bottom: 4rem;
        margin-bottom: 4px;
    }

    
        .content-lesson p{
            font-size: 0.95rem;
            line-height: 1.75rem;

        }

    .button-lesson{
        border-top: 1px solid #f6f6f6;
        border-bottom: 1px solid #f6f6f6;
        padding-top: 4rem;
        padding-bottom: 3rem;
        align-items: center;
        vertical-align: middle;
    }

        .button-lesson .icon{
            height: 20px;
            display: inline-block;           
            vertical-align: middle; 
            margin-bottom: 16px;
                      
        }

        .button-lesson .order{
            vertical-align: middle;
            display: inline-block;
            font-family: 'Nunito', sans-serif;
            text-transform: uppercase;
            padding: 0 1rem;
            letter-spacing: 1px;
            font-size: 10px;
            font-weight: bold;
            
           
        }

            .button-lesson .order .title{
                font-family: 'Lora', sans-serif;
                font-size: 18px;
                text-transform: none;
                font-weight: normal;
                letter-spacing: 0px;

            }

        .button-lesson .button-complete{
            font-family: 'Nunito', sans-serif;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 1px;
            text-transform: uppercase;
            text-align: center;
            text-transform: uppercase; 
            background-color: #f0ded6;  
            padding: 1.5rem 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            vertical-align: middle;
            cursor: pointer;
        }


        .comment{
            padding-left: 2rem!important;
            /*align-items: center;*/
            border-bottom: 1px solid #f6f6f6;
        }

            .data-comment{
                font-size: 12px!important;
                margin-bottom: 1rem;
                font-style: normal!important;


            }

                .data-comment .title{
                    font-size: 14px!important;
                    text-transform: uppercase;
                    font-family: 'Nunito', sans-serif;
                    font-weight: bold;
                    letter-spacing: 1px;

                }

                .data-comment .date{
                    margin-left: 0.5rem;
                    color: #333335;
                }

                .comment .reply{
                    color: #333335;
                    font-size: 12px!important;
                    margin-bottom: 1rem;
                    font-style: normal!important;
                }

                    .reply .material-icons{
                        font-size: 24px!important;
                        margin-right: 8px;
                    }

            .comment-response{
                padding-left: 8rem!important;                
            }

            .comment p{
                font-size: 0.95rem;
                font-style: italic;
            }

            .comment .material-icons{
                font-size: 62px;
            }

            .comment .button{
                float: right;
                margin-bottom: 1rem;
            }

            .comment .listImages{
                list-style-type: none;  /* Quitar los puntos de la lista */
                padding: 0;  /* Eliminar el padding */
                margin: 0 0 0.75rem 0;  /* Eliminar el margin */
            }

                .comment .listImages li{
                    margin-right: 10px; 
                    display: inline-block;
                }

                .comment .listImages img{
                    height: 100px;
                    width: auto;
                    object-fit: cover;
                }

    .list{
        font-size: 14px!important;
    }

        .list li{
            margin-bottom: 1rem!important;
            list-style-type: none!important;
        }

        .list .material-icons{
            margin-right: 0.75rem!important;
        }


/** Administrador **/

	.nav-vertical{
            font-family: 'Nunito', sans-serif;
            text-transform: uppercase;
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 0.1rem;
            margin-left: 0px;
            padding-left: 0px;
        }

            .nav-vertical li{
                list-style-type: none;
                margin-bottom: 0.8rem;
            }

            .nav-vertical .last-element{
                padding-top: 1rem;
                margin-top: 1rem;
                border-top: 1px solid #f6f6f6;
            }


.quickbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw; /* Se asegura de cubrir todo el ancho de la ventana */
  border-top: 1px solid #ddd;
  padding: 10px 10px 0px 10px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

#quickbar{
   visibility: hidden;
}


/* RESPONSIVE */
/* Tablet */
@media (max-width: 1035px) {

    body{
        padding: 1rem;
    }

    .make-answer{
        display: none;
    }

    .margin-mob-bottom{
        margin-bottom: 2rem!important;
    }

    
}

/* Móvil */
@media (max-width: 617px) {
    
    #checkCompleteLesson, #nameUser, #topImagesWorkshopLeft, #topImagesWorkshopRight {
        display: none;
    }

    nav .right-elements li{
        margin-left: 0px!important;
        margin-right: 10px!important;
    }

    nav .icon{
        height: auto;
    }

    .dates{
        display: block;
    }


    #quickbar{
        visibility: initial;
    }


}