body {
    background-color:#4F4F4F; /*	#C19A6B*/
    font-family: "Oswald", sans-serif;
}



/*Texto titulo*/

.titulo {
    font-family: "Bebas Neue", sans-serif;
}

.titulo .naranja {
    color: #f97e3c;
}

.logo a {
    display: flex;
    /* Disposición en línea de los hijos directos */
    align-items: center;
    /* Alinea los elementos verticalmente */
    text-decoration: none;
    /* Quita el subrayado del enlace */
    color: inherit;
    /* Mantiene el color del texto */
}

.logo a:hover {
    transform: scale(1.1);
    /* Aumenta el tamaño del enlace al 110% del tamaño original */
    transition: transform 0.2s;
    /* Agrega una transición suave para que el efecto sea gradual */
}

.imglogo {
    width: 50px;
    height: auto;
}



/*Navbar*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    background: #333;
    color: #fff;
    padding: 10px 0;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo h1 {
    margin: 0;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 4px 0;
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin: 0 15px;
}

.nav-links a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}


.menu-toggle {
    display: flex;
}

.nav-links {
    z-index: 10;
    /*Hace que la hamburguesa se despliegue por encima de todo*/
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #333;
    flex-direction: column;
    align-items: center;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}

.nav-links li {
    margin: 20px 0;
}

.nav-links a {
    font-size: 24px;
}

.nav-links.active {
    height: calc(100vh - 60px);
    /* Dejar espacio para el header */
}


.cuadrolist {
    text-align: center;
    padding-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    background-color:#4F4F4F; /*	#C19A6B*/
    justify-content: center;
}

@media (min-width: 960px) {
    .cuadrolist{
        padding-top: 50px;
        padding-left: 50px;
        padding-right: 50px;
    }
}

.cuadrolist a{
    text-decoration: none;
    color: #f9683c;
}

@media(max-width: 960px) {
    .cuadrolist {
      grid-template-columns: repeat(2, 2fr);
      padding-top: 10px;
      padding-left: 10px;
      padding-right: 10px;
    }
  
    a {
      width: 50%;
      height: auto;
    }
  
    a h3{
      font-size: 25px;
  
    }

    .card{
        padding-right: 10px;
    }
  }

/*cards*/


:root {
    --card-height: 300px;
    --card-width: calc(var(--card-height) / 1);
}

@media(max-width: 1080px) {
    :root{
        --card-height: 200px;
    }
}

* {
    box-sizing: border-box;
}


.card {
    width: var(--card-width);
    height: var(--card-height);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 36px;
    padding-bottom: 35px;
    perspective: 2500px;
    margin: 0 25px;
    z-index: 0; 
}


@media(max-width: 960px) {
    .card{
        margin: 0 0px;
    }

    .cardPadre{
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;

    }

    :root {
        --card-height: 180px;
        --card-width: calc(var(--card-height) / 1);
    }
}

.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wrapper {
    transition: all 0.5s;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.card:hover .wrapper {
    transform: perspective(900px) translateY(-5%) rotateX(10deg) translateZ(0);

}

.wrapper::before,
.wrapper::after {
    content: "";
    opacity: 0;
    width: 100%;
    height: 80px;
    transition: all 0.5s;
    position: absolute;
    left: 0;
}

.wrapper::before {
    top: 0;
    height: 100%;

}

.wrapper::after {
    bottom: 0;
    opacity: 1;

}





.link {
    color: #333333;
    font-weight: bold;
            text-shadow: 
                1px 1px 0 wheat,   /* sombra inferior derecha */
                -1px -1px 0 wheat, /* sombra superior izquierda */
                1px -1px 0 wheat,  /* sombra superior derecha */
                -1px 1px 0 wheat;  /* sombra inferior izquierda */

    z-index: 1; /* Asegura que el texto esté por encima de la imagen */
    font-size: 20px; /* Tamaño de fuente inicial */
    transition: font-size 0.3s ease; /* Transición suave de tamaño de fuente */
}





/* Agregar ejercicio */
/* Ocultar el menú de grupos musculares por defecto */
.group-muscles {
    display: none;
    margin-top: 10px;
}

/* Estilos del botón que despliega el menú */
.menu-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Estilo para la flecha */
.arrow {
    transition: transform 0.3s ease-in-out;
}

/* Rotar la flecha cuando el menú está visible */
.arrow.rotate {
    transform: rotate(180deg);
}


.agregarpadre{
    width: 100%;
    display: flex;
    justify-content: center;
    background-color:#4F4F4F; /*	#C19A6B*/
    padding-top:40px;
    padding-bottom:20px;
}

@media(max-width: 960px) {
    .agregarpadre{
        padding-left: 5px;
        padding-right: 5px;
        width: 100%;
    }
}


.agregar{
    background-color: #333333;
    border-radius: 7px;
    box-shadow: 15px 15px 7px;
    width: 55%;
}

.questionoverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 80%;
    text-align: center;
}

@media(max-width: 960px) {
    .agregar{
        width: 100%;
    }

}

.question{
    margin-left: 30px;
    background-color: #333333;
    padding: 0 6px 0 6px;
    border-radius: 25px;
    margin-top: 5px;
    box-shadow: 15px 15px 7px;
}

.question:hover{
    transform: scale(1.1);
    transition: transform 0.4s;
    cursor:pointer;
}

.agregar:hover{
    transform: scale(1.04);
    transition: transform 0.4s;
    cursor:pointer;
}

.btnAgregar{
    text-align: center;
    color: #ffff;
}



/* Overlay agregar */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Oscurece el fondo */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Estilos para el contenido del overlay */
.overlay-content2 {
    background-color: #fff;
    padding: 20px;
    width: 90%;
    max-width: 500px; /* Ajusta según sea necesario */
    max-height: 80vh; /* Altura máxima para limitar el contenido visible */
    overflow-y: auto; /* Habilita el scroll vertical */
    border-radius: 8px;
    position: relative;
}



@media(max-width: 960px) {
    .overlay-content{
        width:360px;
        max-width: 95%;
    }
}

/* Botón de cierre */
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}


input[type="text"],
textarea,
select,
input[type="url"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
}

input[type="submit"] {
    font-family: "Oswald", sans-serif;
    background-color: #ff6600;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 5px;
    width: 100%;
}

input[type="submit"]:hover {
    background-color: #e65c00;
}



/* Cambia el borde del área de recorte */
.cropper-crop-box {
    border: 2px solid #00FF00; /* Borde verde */
}

/* Cambia la máscara alrededor del área de recorte */
.cropper-view-box {
    outline: 2px solid rgba(255, 0, 0, 0.5); /* Contorno rojo semi-transparente */
}

/* Cambia la apariencia del mango de redimensionamiento */
.cropper-face {
    background-color: rgba(0, 255, 255, 0.3); /* Color cian semi-transparente */
}






/*paginacion de ejercicios*/

.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 10px;
}

.pagination a {
    padding: 8px 12px;
    background-color: #333333;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: background-color 0.3s;
}

.pagination a.active {
    color: white;
}


.pagination a.active {
    background-color: #333333;
    color: #F0653B;
    font-weight: bold;
    pointer-events: none;
}











/*Footer*/

footer {
	overflow: hidden;
	background-color: #212529;
	color: rgb(165, 165, 165);
	width: 100%;
	font-size: 12px;
	display: flex;
	justify-content: space-between;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	text-align: center;
    right: 0;
    left: 0;
    bottom: 0;
    position: sticky;
    bottom: 0;
}

@media(max-width: 960px) {
    footer{
        position: absolute;
    }
}

.textofooter{
	text-align: center;
}

footer a{
	color: rgb(165, 165, 165);
}

footer a:hover {
  transform: scale(1.1); /* Aumenta el tamaño del enlace al 110% del tamaño original */
  transition: transform 0.2s; /* Agrega una transición suave para que el efecto sea gradual */
}

a p:hover{
    transform: scale(1.1); /* Aumenta el tamaño del enlace al 110% del tamaño original */
  transition: transform 0.2s; /* Agrega una transición suave para que el efecto sea gradual */
}


.redeslogo{
	width: 40px;
	height: auto;
}









/*Descripcion ejercicio*/

.infopadre{
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 20px;
}

@media(max-width: 960px) {
    .infopadre{
        padding: 0 10px 20px 10px;
    }


    iframe{
        width: 85%;
    }
}

.infohijo{
    background-color: #333333;
    padding-bottom: 30px;
}

.video-container{
    text-align: center;
}

.video-container iframe, .video-container video {
    border: 5px solid #534b4b; /* Borde blanco */
    border-radius: 8px; /* Opcional: redondear bordes */
    box-shadow: 15px 15px #f9683c; /* Opcional: añadir sombra */
}

.textodesc{
    background-color: #534b4b;
    border-radius: 10px;
    border-color:#e65c00;
    border-style: solid;
}

.editarborrar{
    display: flex;
    justify-content: space-between;
    background-color: #534b4b;
}

.icono{
    height: 30px;
    width: 30px;
}

.icono:hover{
    transform:scale(1.1)
}




.confirm-delete {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #333333;
    box-shadow: 15px 15px 7px;
    z-index: 1000;
}

.confirm-delete p{
    color: white;
}

.confirm-delete button {
    margin: 10px;
}

.botonesborrar{
    display: flex;
    justify-content: space-between;
    padding-left: 80px;
    padding-right: 80px;
}

@media(max-width: 960px) {
    .botonesborrar{
        padding-left: 20px;
        padding-right: 20px;
    }
}

.sisnon{
    background-color: #F0653B;
    padding-left: 20px;
    padding-right: 20px;
    color: white;
}

.hoverrojo:hover{
    transform: scale(1.1);
    transition: transform 0.15s ease;
    color: red;
    cursor: pointer;
}

.hoverblanco:hover{
    transform: scale(1.1);
    transition: transform 0.15s ease;
    cursor: pointer;
}


.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}




/* Estilo para el overlay de edición */
.hamburger-btn {
    background-color: #f0ad4e;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
}

.checkboxes-container {
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

.hamburger-btn:hover {
    background-color: #ec971f;
}

.rotated {
    transform: rotate(180deg);
    transition: transform 0.3s ease; /* Suaviza la transición */
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    overflow: auto; /* Añadido para permitir desplazamiento si el contenido es alto */
}

.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 600px;
    max-height: 80%;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    overflow-y: auto; /* Hacer el overlay desplazable */
}

.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}

.overlay-content h2 {
    margin-top: 0;
}

#imageContainer {
    width: 100%;
    height: auto;
    margin-top: 10px;
}