body {
    font-family: 'Arial', sans-serif;
    background-color: transparent;
    padding-top: 20px;
}



.red {
    color: red;
}

.green {
    color: green;
}

.yellow {
    color: yellow;
}

.calculator-window {
    
    background-color: rgb(119, 182, 173);
    max-width: 750px; /* Propuesta de tamaño estándar */
    margin: 0 auto;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
}

.calculator-window h3.text-center,
.calculator-window h4.text-center {
    color: rgb(0, 0, 0);
}


.cards-container {
    
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Hace que las tarjetas sean responsivas */
    gap: 20px;
}

.card {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrar contenido verticalmente */
    align-items: center;
    padding: 15px; /* Ajuste del padding */
    border: 1px solid #000000;
    border-radius: 10px;
    position: relative; /* Para posicionar info-toggler correctamente */
    box-sizing: border-box;
}

.card:hover {
    transform: scale(1.01); /* Efecto hover sutil */
}




.more-link a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0a4f99; /* Color de fondo */
    color: white; /* Color del texto */
    text-decoration: none; /* Eliminar el subrayado del enlace */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra ligera */
    transition: background-color 0.3s; /* Transición suave al cambiar el color de fondo */
    margin-top: 20px;
}

.more-link a:hover {
    background-color: #0056b3; /* Cambiar color de fondo al pasar el mouse */
}



.liquids-container {
    
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en líneas múltiples */
    justify-content: space-between; /* Espacia los elementos de forma uniforme */
}

.liquid {

    
    position: relative;
    flex-basis: calc(50% - 10px); /* Ocupa aproximadamente la mitad del ancho, restando un pequeño margen */
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
}


.liquid img {
    margin-bottom: 10px; /* Espacio entre la imagen y el texto */
}

.liquid .title {
    margin-bottom: 10px;
}

.liquid .card {
    
    flex-direction: column;
    align-items: center;
}




.info-toggler {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.info-popup {
    display: none;
    position: absolute;
    top: 40px; /* Ajusta según necesites */
    right: 10px; /* Ajusta según necesites */
    width: 250px; /* Ancho más grande para mejor lectura */
    padding: 20px;
    background-color: #f9f9f9; /* Un color de fondo ligeramente gris para suavizar */
    border: none; /* Elimina el borde para un look moderno */
    border-radius: 8px; /* Bordes más redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Sombra más suave y moderna */
    z-index: 100;
    color: #333; /* Color de texto más oscuro para mejor contraste */
    font-family: Arial, sans-serif; /* Fuente más legible */
    line-height: 1.5; /* Espaciado de línea para mejorar la legibilidad */
    text-align: justify; /* Justifica el texto para un aspecto más pulido */
}

/* Estilización adicional para títulos o elementos importantes dentro de .info-popup */
.info-popup h2 {
    color: #007bff; /* Color para títulos o secciones destacadas */
    margin-bottom: 10px;
}

/* Estilización para enlaces o botones dentro de .info-popup */
.info-popup a {
    color: #007bff;
    text-decoration: none; /* Elimina el subrayado */
}

.info-popup a:hover {
    text-decoration: underline; /* Subraya al pasar el ratón por encima para interactividad */
}




.info-popup.visible {
    display: block;
}


.info-popup .close-popup {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

.info-popup .close-popup:hover {
    color: #000;
}


.info-popupRefresco.visible {
    display: block;
}

.info-popupCafe.visible {
    display: block;
}

.info-popupJugo.visible {
    display: block;
}

.info-popupAgua.visible {
    display: block;
}


.input-container input {
    margin-right: 5px;
    width: 50px; /* Ajuste de ancho */
    padding: 5px 10px; /* Ajuste de padding */
    font-size: 14px; /* Ajuste de tamaño de fuente */
    text-align: center; /* Alineación de texto al centro */
}

.input-container .unit {
    position: absolute; /* Posiciona la etiqueta a la derecha */
    right: 15px; /* Espaciado desde el borde derecho */
    bottom: 50%; /* Centra verticalmente */
    transform: translateY(50%); /* Centra verticalmente */
}



.increment-unit {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.increment-unit span {
    cursor: pointer;
}

.increment-unit .left, .increment-unit .right {
    cursor: pointer;
    padding: 5px 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.increment-unit .left:hover, .increment-unit .right:hover {
    background-color: #e0e0e0;
}

.unit {
    margin-left: 5px;
}

/* Estilo para botones de incremento/decremento */
.left, .right {
    cursor: pointer;
}

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

.pagination-center {
    display: flex;
    gap: 10px;
}

.pagination-dot {
    width: 15px;
    height: 15px;
    background-color: #E0E0E0;
    border-radius: 50%;
    margin: 0 5px; /* Separación entre puntos */
    cursor: pointer;
    transition: background-color 0.3s;
}

.pagination-dot.active {
    background-color: #9D2449;
}


/* Estilos para el botón "Anterior" */
.pagination-button.prev {
    background-color: #FFA07A; /* Color de fondo salmón */
    border: 2px solid #FFA07A; /* Borde del mismo color que el fondo */
}

/* Estilos para el botón "Siguiente" */
.pagination-button.next {
    background-color: #4CAF50; /* Color de fondo verde */
    border: 2px solid #4CAF50; /* Borde del mismo color que el fondo */
}

/* Estilos comunes para ambos botones */
.pagination-button {
    color: white; /* Texto blanco */
    padding: 10px 20px; /* Espaciado interno para hacer el botón más grande */
    font-size: 16px; /* Tamaño de la fuente */
    cursor: pointer; /* Cursor tipo puntero para indicar clickeabilidad */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Transición suave para cambios de color */
    text-transform: uppercase; /* Texto en mayúsculas */
    font-weight: bold; /* Texto en negrita */
    margin-top: 10px; /* Margen superior de 10px */
    text-decoration: none; /* Quitar subrayado de los enlaces */
    display: inline-block; /* Hacer que se comporte como un botón */
}

.pagination-button:hover {
    opacity: 0.8; /* Efecto al pasar el cursor */
}

.pagination-button:disabled {
    background-color: #E0E0E0; /* Color de fondo gris para botón desactivado */
    color: #A9A9A9; /* Color de texto gris para botón desactivado */
    border-color: #E0E0E0; /* Color de borde gris para botón desactivado */
    cursor: not-allowed; /* Cursor de no permitido para botón desactivado */
    opacity: 0.5; /* Hacer el botón semi-transparente */
}


#hydrationAdvice {
    display: none;
    margin-top: 20px; /* Ajusta este valor según tus necesidades */
}
#hydrationAdvice {
    display: none;
    margin-top: 20px;
    font-size: 16px; /* Tamaño de letra */
    color: #333; /* Color del texto */
    line-height: 1.5; /* Espaciado entre líneas */
}




.intake h4.has-icon {
    position: relative;
    padding-left: 25px;
}

.intake h4.has-icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url('/static/images/icon.svg'); 
    background-size: contain;
    background-repeat: no-repeat;
}


.increment-unit {
    display: flex;
    justify-content: center; /* Distribuye espacio entre -, input y + */
    align-items: center;
}

.increment-unit .left, .increment-unit .right {
    cursor: pointer;
    padding: 5px 15px;
    border: 1px solid #E0E0E0;
    transition: background-color 0.3s;
    
}

.input-container {
    display: flex;
    justify-content: center; /* Centra el contenido del input-container */
    margin-bottom: 15px; /* Espacio debajo del input-container */
    align-items: center;
}




.age-input-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos horizontalmente */
}

.form-control-range {
    width: 80%; /* Ajustar según la necesidad */
    /* Otros estilos para el slider van aquí */
}

.increment-unit .middle {
    margin: 0 10px;
}

.increment-unit .left:hover, .increment-unit .right:hover {
    background-color: #E0E0E0;
}

.increment-unit .left.disabled, .increment-unit .right.disabled {
    color: #E0E0E0;
    cursor: not-allowed;
}

.step {
    display: none; /* Oculta todos los steps por defecto */
}

.step.step-1 {
    display: block; /* Muestra solo el primer step */
}


button.left, button.right {
    background-color: #A9BCD0;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button.left:hover, button.right:hover {
    background-color: #8AA2B6;
}

button.left:disabled, button.right:disabled {
    background-color: #CDD9E5;
    cursor: not-allowed;
}


.gender-box {
    padding: 10px;
    border: 1px solid #A9BCD0;
    border-radius: 5px;
    margin: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.gender-box span {
    display: block;
    font-weight: bold;
}

.gender-box:hover {
    background-color: #f0f0f0;
    border-color: #bec6d2;
}

.gender-toggle {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.gender-toggle div {
    padding: 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent; /* Añade un borde transparente para mantener el tamaño constante */
    cursor: pointer;
}

/* Estilo al pasar el cursor */
.gender-toggle div:hover {
    background-color: #f0f0f0;
    opacity: 0.8;
}

/* Estilo para opción masculina */


/* Resaltar al pasar el cursor */
.gender-toggle div:hover {
    opacity: 0.8;
}

/* Estilo para opción seleccionada */
.gender-toggle div.active {
    background-color: #eee;
}




.gender-toggle {
    justify-content: space-between;
}

.male, .female, .otro {
    background-color: #ffffff;
    cursor: pointer;
   
    border-radius: 5px; /* Bordes redondeados */
    margin: 5px; /* Margen para separación */
}

.male.active img, .female.active img {
    opacity: 1;
}


/* Estilo específico cuando masculino está seleccionado */
.gender-toggle .male.active {
    background-color: #007bff;
    color: white;
}

/* Estilo específico cuando femenino está seleccionado */
.gender-toggle .female.active {
    background-color: #ff69b4;
    color: white;
}

.gender-toggle .male.otro {
    background-color: #28772c;
    color: white;
}


.gender {
    text-align: center;
}

.gender-toggle {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.gender-toggle .female {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}



.pregnancy-option {
    display: none; /* Oculto inicialmente */
    align-self: center;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid #ff69b4;
    background-color: #ffffff;
    color: black;
}


/* Estilo base del slider */
.form-control-range {
    -webkit-appearance: none; /* Override para navegadores basados en WebKit */
    width: 100%; /* Ancho completo para ocupar el contenedor */
    height: 2px; /* Altura del riel del slider */
    background: #3A6A5E; /* Color de fondo del riel */
    outline: none; /* Remueve el outline para evitar que se resalte al hacer clic */
    opacity: 0.7; /* Ligeramente transparente */
    transition: opacity 0.2s; /* Transición suave para cambios de opacidad */
}

/* Estilo del riel del slider al hacer hover */
.form-control-range:hover {
    opacity: 1; /* Menos transparencia al pasar el ratón */
}

/* Estilo del pulgar del slider */
.form-control-range::-webkit-slider-thumb {
    -webkit-appearance: none; /* Necesario para WebKit */
    appearance: none;
    width: 20px; /* Ancho del pulgar */
    height: 20px; /* Altura del pulgar */
    background: #56242A; /* Color de fondo del pulgar */
    cursor: pointer; /* Cambia el cursor a puntero */
    border-radius: 50%; /* Hace que el pulgar sea circular */
    border: 2px solid #fff; /* Borde blanco para resaltar */
}

/* Estilo del pulgar al hacer hover */
.form-control-range::-webkit-slider-thumb:hover {
    background: #A93951; /* Cambia el color al hacer hover */
}
/* Mozilla */
.form-control-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #A93951;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* Microsoft Edge */
.form-control-range::-ms-thumb {
    width: 20px;
    height: 20px;
    background: #A93951;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #fff;
}



/* Estilo para el botón de información */


.info-toggler img {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.female.active .pregnancy-option {
    display: block; /* Muestra las opciones de embarazo solo si se selecciona Femenino */
}

/* Añade estilos para cuando los géneros estén activos */
.gender-box.active {
    background-color: #E0E0E0;
}




.liters-excellent {
    font-size: 1.5em;
    color: #4CAF50; /* Color verde para excelente */
}

.liters-good {
    font-size: 1.2em;
    color: #FFEB3B; /* Color amarillo para bueno */
}

.liters-regular {
    font-size: 1em;
    color: #FFC107; /* Color naranja para regular */
}

.liters-bad {
    font-size: 1.5em;
    color: #F44336; /* Color rojo para malo */
}

.liters-excessive {
    font-size: 1em;
    color: #9C27B0; /* Color púrpura para excesivo */
}




/* Estilos para Peso y Altura */
.weight .input-container, 
.height .input-container {
    display: flex;
    align-items: center;
}

.weight input, 
.height input {
    margin-right: 5px;  /* Espaciado entre el input y la etiqueta */
}

/* Asegurarse de que el input tenga un ancho fijo */
.weight input, 
.height input {
    width: 60px;  /* Ancho fijo para mantenerlo consistente */
}





/* Estilos responsivos para dispositivos más pequeños */
@media (max-width: 600px) {
    .cards-container {
        grid-template-columns: 1fr; /* Ajusta a una sola columna en pantallas pequeñas */
    }


    .liquid {
        flex-basis: 100%; /* Cada liquid ocupa el 100% del ancho disponible */
    }

    .increment-unit {
        justify-content: center; /* Centra los botones de incremento y decremento */
    }
}


.popup {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo en la pantalla */
    z-index: 999; /* Asegura que esté por encima de otros elementos */
    left: 0;
    top: 0;
    width: 100%; /* Ancho completo */
    height: 100%; /* Altura completa */
    overflow: auto; /* Si el contenido es muy largo, permite desplazamiento */
    background-color: rgba(0,0,0,0.5); /* Semi transparente */
}

.popup-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% desde la parte superior y centrado horizontalmente */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Ajusta el ancho según prefieras */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.popup-content button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
}

.popup-content button:hover {
    background-color: #367C39;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
@media screen and (max-width: 600px) {
    .popup-content {
        width: 95%; /* Más ancho en pantallas pequeñas */
        margin: 10% auto; /* Menos margen en la parte superior */
    }
}