/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* --------------------   ESTILOS GLOBALES    ----------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

:root {/* LLAMADAS DE LA WEB */
/* Paleta de colores de esta web */
    --ColorBase: #14a692;
    --ColorOscuro: #00685a;
    --ColorClaro: #a9fff3;
    --VerdeLima: #00d100;
    --Negrogris: #222222;
/* Tipografias de esta web */
    --fuenteTitulos: "PT Sans", sans-serif;
    --fuenteParrafos: "Open Sans", sans-serif;
}


body {/*DECORACIÓN BASE*/
    background-color: var(--ColorClaro);/*color de fondo*/
    font-family: var(--fuenteParrafos);/*tipografia de los textos de base*/
    line-height: 1.5;/*gran interlineado de los textos en general*/
    }


/* COLOR DE LETRA Y FONDO PA CUANDO SE SEÑALE EL TEXTO*/
::-moz-selection {background: var(--ColorOscuro); color: var(--ColorClaro); text-shadow: none}
::selection {background: var(--ColorOscuro); color: var(--ColorClaro); text-shadow: none}


/*DECORACIÓN BÁSICA DE TEXTOS*/
h1, h2, h3, h4 {/*Decoracion Títulos*/
    font-family: var(--fuenteTitulos);
    line-height: 1.2;/*pequeño interlineado en títulos (x si caen de renglon)*/
}

h1 {font-size: 4rem; /*40px*/}

h2 {font-size: 2.9rem; color: var(--ColorOscuro); font-weight: 700; text-align: center; margin-bottom: 1.6rem}

h3 {font-size: 2.4rem;/*24px*/}

p {/*Decoracion Párrafos*/
    font-family: var(--fuenteParrafos); font-size: 1.8rem; color: var(--Negrogris);
    text-align: justify; margin-bottom: 1.7rem
}


/*CLASES PARA RECURRIR EL HTML*/
.contenedor {/*Contenedor de esta web*/
    max-width: 80rem;/*800px de ancho*/
    width: 100%;
    margin: 0 auto;/*centrada*/
    padding: 0 1.7rem; /*y con padding a los lados pal movil*/
    /*background-color: rgba(0, 111, 255, 0.4);*/
}

.contenedor-color {padding: 8rem 0}/*Si va un color al 100%, qe tenga pading*/

.top {margin-top: 5rem }/*Margen de arriba para poner en cada Section de la web*/

.titular {text-align: center; padding-bottom: 3rem; font-weight: 700; color: var(--ColorOscuro);
font-size: 2.9rem;}

img {width: 100%;}

.boton {color: white; font-weight: bold;
padding: 1rem 3rem; text-align: center}
    
.bton-100 {display: block;}
    
.btn-Color {background: var(--ColorBase)}
.btn-amarillo:hover {background: var(--ColorOscuro)}












/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* ------------------------   CABECERA    --------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

.cabecera {display: flex; justify-content: center; padding: 2rem;
background: linear-gradient(to bottom right, 
    #d0efeb 10%,   /*parte superior izquierda */
    #a9fff3 40%,   /*parte inferior derecha */
    #14a692 85%,   /*parte inferior izquierda */
    #00685a 100%); /*parte superior derecha */
}

.cabecera img {width: 5.2rem;}

.cabecera h1 {font-size: 3.5rem; margin-top: 2px; margin-left: 13px;
color: var(--ColorOscuro);}

.cabecera span {color: var(--ColorBase)}










/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
/* ---------------------  INDEX (HÁBITOS)  ---------------------------*/
/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/

/* CALENDARIO */
.espacio-calendario {margin-bottom: 3rem;}

.calendar-container {max-width: 100%; padding: 1rem; border-radius: 10px;
background: white; text-align: center; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2)}

.weekdays, .days {display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem}

.weekdays div {font-weight: bold; color:white; background: #a3a3a3; border-radius: 0.5rem;
font-size: 1.5rem}

.days div {padding: 0.7rem; border-radius: 0.5rem; cursor: pointer; transition: 0.3s;
background: #fff; color: black}

.days div:hover {background: var(--ColorClaro)}

.today {border: 4px solid var(--ColorOscuro) !important; color: white; font-weight: bold}

.selected-day {background-color: var(--ColorBase) !important; color: white; font-weight: bold}

/*Las flechas de cambiar de mes están censuradas (no las elimines del HTML)*/
.calendar-header #prev-month, .calendar-header #next-month {display: none;}

/*Estilo del texto del día actual y el botón de abrir calendario*/
.calendar-header h2 {color: var(--ColorOscuro); font-size: 2.3rem; margin-bottom: 0}
#month-year {text-transform: capitalize}

.calendar-header {display: flex; justify-content: space-between; align-items: center}

.fecha-junta {display: flex; justify-content: center;
flex: 1; /* ocupa todo el espacio disponible a la izquierda */
gap: 0.7rem; /* separación entre los h2 */
}

.weekdays {margin-top: 1rem;}
#calendar-days {margin-top: 0.5rem; margin-bottom: 2rem}

/*Estilo del icono*/
.icono-calendario {height: 36px;}
.icono-calendario {margin-top: 0; width: 36px; fill: none; stroke: var(--ColorOscuro)}

/*Calendario (que se despliega al pulsar #btn-abre-calendar)*/
#btn-abre-calendar {cursor: pointer;}
#calendar {
max-height: 0; /* ALTURA inicial a 0 (escondido) */
overflow: hidden; /* forzar su escondite */
transition: max-height 0.5s ease-in-out} /* Transición para su ALTURA */
#calendar.ver {max-height: 400px}/*ponerle ALTURA exacta para que se vea el menú*/

/*Solucion al problema de señalarse solos los dias del calendario en movil (prohibir qe se señalen)*/
#calendar-days div {
    -webkit-user-select: none; /* Safari, Chrome */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Navegadores modernos */
}

/* Simula el efecto hover cuando se toca en móviles */
.days div.touch-hover {background: var(--ColorClaro); transition: background 0.2s}



/*LA BARRA DIARIA*/
.espacio-objetivo-diario h2 {font-size: 2rem; text-align: center; color: var(--ColorOscuro); margin-bottom: 0.5rem}

.barra-progreso {width: 100%; height: 28px; border-radius: 15px; overflow: hidden;
border: 2px solid var(--ColorBase); box-shadow: inset 0 0 5px rgb(0 0 0 / 50%)}

.relleno-progreso {height: 100%; width: 0%; background-color: var(--VerdeLima);
transition: width 0.3s ease}

/*nº de % dentro de la Barra*/
.barra-progreso {position: relative}/*pa posicionar el texto encima*/
.texto-progreso-diario {position: absolute; top: 50%; left: 50%; font-weight: bold; color: var(--ColorOscuro);
  transform: translate(-50%, -50%); /* centra el texto dentro de la barra */
  pointer-events: none;     /* para que no bloquee clicks en la barra */
}



/*LA BARRA MENSUAL*/
.espacio-objetivo-mensual h2 {font-size: 1.8rem; text-align: center; color: gray;
margin-bottom: 0.5rem}

.espacio-objetivo-mensual .barra-progreso {height: 20px; border: 2px solid gray; margin-bottom: 1rem}

.relleno-progreso-mensual {height: 100%; width: 0%; background-color: var(--ColorBase);
transition: width 0.3s ease}



/*LOS HÁBITOS (completados o no)*/
.espacio-habitos {display: flex; flex-direction: column; align-items: center; margin-top: 4rem}

.habito {display: flex; align-items: center; width: 100%; padding: 5px; font-size: 16px;
background: none; color: var(--ColorOscuro); font-weight: 600;
cursor: pointer; transition: background-color 0.3s;}

.habito.largo {height: 10rem}
    
.habito.completado {background-color: var(--VerdeLima); text-decoration: line-through;
border-radius: 7px 0 0 7px}

.habito img {width: 40px; height: 40px; object-fit: contain}

.habito p {font-size: 1.55rem; letter-spacing: -0.3px; text-align: center; margin: 0 auto;
color: var(--ColorOscuro)}
.habito.gris p {color: rgb(171, 171, 171); font-style: italic}

.minihabito p {font-size: 1.55rem; letter-spacing: -0.3px; text-align: center; margin: 0 auto;
color: var(--ColorOscuro); font-weight: 600; margin: 1rem 0; display: inline-block}
.minihabito a {display: inline-block; text-decoration: underline; font-size: 1.4rem; font-style: italic;
color: rgb(171, 171, 171);}



/*CAJA DEL HÁBITO JUNTO A LA CAJA DE +*/
.caja-habito {display: flex; width: 100%; margin: 15px 5px;
background: white; border: 2px solid gray; border-radius: 10px;}



/*POP-UP CON + INFO DE CADA HÁBITO*/
.btn-popup {display: flex; border-radius: 8px; background: none; width: 37px; cursor: pointer; margin: 4px}

.nopopup-enlace {display: flex; border-radius: 8px; width: 37px; margin: 4px;
background: var(--ColorClaro); border: 1px solid var(--ColorBase)}

.caja-habito svg {margin-left: 8px; margin-top: 0;}

svg {width: 18px; margin-top: 5px; fill: var(--ColorOscuro)}



/*CARACTERISTICAS DEL POP-UP*/
.popup-container {
    display: none; opacity: 0;/*Pop-up oculto al principio*/
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #000000d6;/* Fondo semi-transparente */
    justify-content: center; align-items: center; padding: 1.5rem;
    transition: opacity 0.5s ease;/*Transición*/ z-index: 1000;
}

.popup-content {
    background-color: white; text-align: center;
    padding: 1rem; border-radius: 10px; width: 500px;/*puedes qitar este ancho*/
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    transform: scale(0.8); /* Comienza ligeramente escalado */
    transition: transform 0.3s ease;/*Transición*/
}

.popup-content button {border: none; cursor: pointer;
    margin: 0.3rem; padding: 0 0.8rem; border-radius: 5px;
    background-color: red; color: white; font-size: 16px;
    position: absolute; right: 0; top: 0;
}
.popup-content button:hover {background-color: #a90000}

body.no-scroll {overflow: hidden}/* Desactiva scroll con el pop-up visible*/

.popup-container.show {display: flex; opacity: 1}/*mostrar pop-up con transición*/

.popup-container.show .popup-content {transform: scale(1)} /*Restaura tamaño original*/

#popup-texto {margin: 0.5rem; margin-top: 1.7rem;}

#popup-texto p {font-size: 1.55rem; font-weight: 300; line-height: 1.4;
text-align: justify; margin-bottom: 1.3rem}

@media (max-width: 400px) {#popup-texto p {font-size: 1.5rem}}

.popup-content p a {font-weight: bold; text-decoration: underline; color: black;}










/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
/* -------------------  INFORMACIÓN DE LA APP  -----------------------*/
/* ----------------- y  ¿POR QUÉ ESTOS HABITOS  ----------------------*/
/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/

/*Estilo de los textos de "info.html" y "porque.html"*/
.info h2 span {font-size: 2rem}

.info h3 {font-size: 2.4rem; color: var(--ColorOscuro); font-weight: 700; margin-bottom: 1.6rem;
text-decoration: underline}

.info a {color: var(--ColorOscuro); font-weight: 700; text-decoration: underline}

.info .guiones {margin-bottom: 1rem}
.info .guiones p {text-align: left; margin-bottom: 0.3rem}
.info.xqe .guiones p {margin-bottom: 1.4rem; line-height: 1.2}
.info.xqe .guiones.ejercicio p {margin-bottom: 0.7rem}

.texto.uno {margin-top: 1.5rem}
.texto {margin-top: 5rem; padding-top: 2rem}

.info p .italic {font-style: italic}
.info p .subrayado {text-decoration: underline}
.negrita {font-weight: bold}

/*Botones de Guardar y Cargar Hábitos*/
.exp-imp {display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem}
.exp-imp span {font-weight: 100; font-size: 1.4rem; font-style: italic; display: block}

.exp-imp button {background: var(--ColorOscuro); color: white; font-weight: 600;
border-radius: 10px; padding: 14px; cursor: pointer}

.exp-imp button:hover {background: black}

.info .info-cookies {text-align: center; margin-top: 1.5rem}
.info .info-cookies a {color: gray; font-weight: 400; font-size: 1.5rem}

.enlace-base {font-size: 1.6rem; font-style: italic; color: var(--ColorOscuro); font-weight: bold;
text-decoration: underline; display: table; margin-bottom: 1rem}
.enlace-base.junto {display: inline-block}

.enlace-descarga-app {text-align: center}








/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* -------------------  ESTILO DE LOS VIDEOS  ----------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
.seccion-video {position: relative;/*pa ponerle capa-encima (position:absolute)*/
    display: flex;/*lo ponemos Flex sólo para poder centrar el video*/
    justify-content: center;/*Centra el video horizontalmente*/
    align-items: center;/*Centra el video verticalmente*/
    max-height: 75rem;/*Restringe la altura máxima del vídeo a 750px*/
    overflow: hidden;/*Oculta la parte del vídeo que se pase de la altura*/
    margin-bottom: 2rem;
}

.seccion-video video {display: block;
    width: 100%;/*Que el video ocupe todo el ancho del padre (seccion-video)*/
    height: 100%;/*Que el video ocupe toda la altura del padre*/
    object-fit: cover;/*Asegura que el video cubra completamente el contenedor*/
    object-position: center;/*Centra el video tanto horizontal como verticalmente*/
}











/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
/* --------------  TODAS LAS SECCIONES INFORMATIVAS  -----------------*/
/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
.tituloconicono {display: flex; justify-content: center; align-items: center; gap: 0.7rem; margin-bottom: 2rem}
.tituloconicono img {width: 37px; height: 37px}
.tituloconicono h2 {margin: 0; letter-spacing: -0.7px; font-size: 2.75rem;}










/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
/* ---------------------  PÁGINAS DE EJERCICIOS  ---------------------*/
/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
.musculos {display: grid; gap: 2rem; margin-bottom: 2rem; grid-template-columns: 1fr 1fr 1fr 1fr 1fr}

@media (max-width: 630px) {
    .musculos {grid-template-columns: 1fr 1fr 1fr}
    .musculos img:nth-child(10) {grid-row: 4 / 5; grid-column: 2 / 3}
}
@media (max-width: 430px) {
    .musculos {grid-template-columns: 1fr 1fr}
    .musculos img:nth-child(10) {grid-row: auto; grid-column: auto}
}

.boton-simple {display: inline-block; width: 100%; border-radius: 10px; border: 2px solid gray; 
background: white; color: var(--ColorOscuro); font-size: 16px; font-weight: 600; text-align: center;
margin: 15px 5px; padding: 15px 5px}

.pag-ejercicios h2 {font-size: 2.7rem;}
.pag-ejercicios h2 span {display: block}
.pag-ejercicios p {text-align: center}
.pag-ejercicios .sin-hueco {margin-top: 2rem}

.pag-ejercicios .textoejercicio p:first-child {margin-bottom: 0; margin-top: 8rem}
.pag-ejercicios .textoejercicio p:last-child {font-size: 1.4rem; font-style: italic; margin-bottom: 1rem}









/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
/* ---------------------  REFLEXIONAR Y MEDITAR  ---------------------*/
/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
.meditacion h3 {color: var(--ColorOscuro); font-size: 2.2rem; font-weight: 700; text-align: center;
text-decoration: underline; margin-bottom: 1.5rem}
.meditacion .texto {margin-top: 6rem}
.meditacion .texto.uno {margin-top: 3rem}
.meditacion .texto.uno span {font-size: 1.5rem}

.seccion-audio audio {width: 100%}
.seccion-audio p {font-size: 1.3rem; text-align: center}














/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
/* ---------------------  MOTIVACION MAÑANERA  -----------------------*/
/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
.espacio-abajo {margin-bottom: 10rem}














/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
/* --------------------------  COMIDAS  ------------------------------*/
/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/

.comidas .tituloconicono {margin-bottom: -5rem}

.comidas h3 {color: var(--ColorOscuro); font-size: 2.2rem; font-weight: 700;
text-align: center; text-decoration: underline; margin-bottom: 2rem; margin-top: 8rem}

.comidas .caja-habito {margin: 0; margin-top: 15px}
.comidas .habito {display: block; padding-left: 20px}

.comidas .diita {font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem}














/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* ---------------  FIN DE SEMANA (lista0.html)  -------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
.texto-finde {margin-top: 5rem}














/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* ----------------------   PIE DE PÁGINA    -----------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
.pie {padding: 2rem 0; text-align: center; margin-top: 9rem;
background: linear-gradient(to bottom right, 
    #00685a 0%,   /*parte superior izquierda */
    #14a692 20%,   /*parte inferior derecha */
    #a9fff3 80%,   /*parte inferior izquierda */
    #d0efeb 90%); /*parte superior derecha */
}

.pie p {font-weight: 400; font-size: 1.6rem; text-align: center; margin-bottom: 0}
.pie a {color: var(--Negrogris); font-weight: 600; font-size: 1.5rem; text-decoration: underline}
.pie a:hover {color: white}
.pie * {margin-top: 0.5rem}


/*----- Botón Flecha para subir arriba*/
.subir {position: fixed; bottom: 0; right: 0; z-index:100; margin: 10px;
    padding: 10px; padding-left: 9px; cursor: pointer; line-height: 1.5;
    border-radius: 100px; background: #ffffff80; display: none}

.subir:hover .flechas span {background:#00685a}

.flechas {display: inline-block; width: 22px}

.flechas span {display: block; width: 20px; height: 3px; background:#14a692;
            transition: all 0.4s ease}

.flechas span:nth-child(1) {transform: rotate(-45deg); position: absolute;
                        margin-top: -9px; margin-left: -5px;}

.flechas span:nth-child(2) {transform: rotate(45deg);
                        margin-top: -9px; margin-left: 8px}