body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    padding: 20px;
}

div {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 10px auto;
    width: 90%;
    max-width: 400px;
}

input[type="number"], button {
    width: 95%;
    padding: 8px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Estilo exclusivo para el contenedor del título */
#Multiorgan\ Support\ Calculator h1 {
    font-family: 'Arial', sans-serif; /* Fuente del título */
    color: #015e4e;                  /* Color del texto */
    font-size: 33px;                 /* Tamaño del texto */
    font-weight: bold;               /* Negrita */
    letter-spacing: 1px;             /* Espaciado entre letras */
    line-height: 1.2;                /* Altura de línea */
    padding: 10px;                   /* Espaciado interior */
    text-align: center;              /* Centrar el texto */
    margin-top: 20px;                /* Margen superior */
}


#crrtCalculator button {
    background-color: #007bff; /* Azul para CRRT */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
    margin-top: 10px;
}

#crrtCalculator button:hover {
    background-color: #0056b3; /* Un tono más oscuro de azul para el hover */
}

#crrtCalculator p {
    color: #000;
    font-weight: bold; /* Negrita */
    font-size: 16px;
    margin-top: 10px;
}

/* Estilo para la sección de Remoción de Soluto */
#solutoCalculator {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin: 10px auto;
    width: 90%;
    max-width: 400px;
}

#solutoCalculator input[type="number"], #solutoCalculator button {
    width: 95%;
    padding: 8px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Botón rojo para la sección de Soluto */
#solutoCalculator button {
    background-color: #ff0000; /* Rojo */
    color: white;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    margin-top: 15px;
}

#solutoCalculator button:hover {
    background-color: #cc0000; /* Rojo más oscuro para hover */
}

#solutoCalculator h1, #solutoCalculator p {
    color: #000000;
    font-weight: bold; /* Negrita */
}

/* Estilo para la sección de Sodio Dializado Deseado */
#sodioDializadoCalculator {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 10px auto;
    width: 90%;
    max-width: 400px;
}

#sodioDializadoCalculator input[type="number"], #sodioDializadoCalculator button {
    width: 95%;
    padding: 8px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Botón amarillo para la sección de Sodio Dializado */
#sodioDializadoCalculator button {
    background-color: #0000FF; /* Amarillo */
    color: rgb(255, 255, 255);
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    margin-top: 15px;
}

#sodioDializadoCalculator button:hover {
    background-color: #6161fd; /* Amarillo más oscuro para hover */
}

#sodioDializadoCalculator h1, #sodioDializadoCalculator p {
    color: #000000;
    font-weight: bold; /* Negrita */
}

/* Estilo para la sección de Trastornos del Potasio */
#potasioCalculator {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 10px auto;
    width: 90%;
    max-width: 400px;
}

#potasioCalculator input[type="number"], #potasioCalculator button {
    width: 95%;
    padding: 8px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Botón morado para la sección de Trastornos del Potasio */
#potasioCalculator button {
    background-color: #fa1587ee; /* Morado */
    color: white;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    margin-top: 15px;
}

#potasioCalculator button:hover {
    background-color: #860d4aee; /* Morado más oscuro para hover */
}

#potasioCalculator h1, #potasioCalculator p {
    color: #000000;
    font-weight: bold; /* Negrita */
    
}


/* Estilos específicos para botones dentro de tpeCalculator */
#tpeCalculator button {
    background-color: #ff7f50; /* Naranja */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
}

#tpeCalculator button:hover {
    background-color: #ff5722; /* Un tono más oscuro de naranja para el hover */
}

#tpeCalculator p {
    color: #000;
    font-weight: bold; /* Negrita */
}
#hemoCalculator button {
    background-color: #28a745; /* Verde para Hemoadsorción */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
    margin-top: 10px;
}

#hemoCalculator button:hover {
    background-color: #218838; /* Un tono más oscuro de verde para el hover */
}

#hemoCalculator p {
    color: #000;
    font-weight: bold; /* Negrita */
    font-size: 16px;
    margin-top: 10px;
}


#toxicoCalculator button {
    background-color: #800020; /* Guindo para Hemoadsorción de Tóxicos */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
}

#toxicoCalculator button:hover {
    background-color: #660017; /* Un tono más oscuro de guindo para el hover */
}

/* Estilos para los resultados en la sección de HemoAdsorción de Tóxicos */
#toxicoCalculator p {
    color: #800020; /* Color guindo */
    font-weight: bold; /* Negrita */
    font-size: 16px; 
    margin-top: 10px;
}

/* Estilo para el cuadro de ingreso del nombre del tóxico */
#toxicoCalculator input[type="text"],
#toxicoCalculator input[type="number"] {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

#toxicoCalculator input[type="text"]:focus,
#toxicoCalculator input[type="number"]:focus {
    border: 1px solid #030303; /* Borde guindo al enfocar */
    outline: none;
}



body {
    background-image: url('imagenes/CRRT (2).png');
    background-size: cover; /* Asegura que la imagen cubra toda la pantalla */
    background-position: center top; /* Alinea la imagen en la parte superior */
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding-top: 50px; /* Mantiene el espacio superior para evitar cortes */
}

/* Fondo semitransparente para todos los apartados */
div, #crrtCalculator, #hemoadsorcion, #remocionSoluto, #sodioDializadoCalculator, #solutoCalculator, #potasioCalculator {
    background-color: rgba(255, 255, 255, 0.8); /* Blanco semitransparente */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 10px auto;
    width: 90%;
    max-width: 400px;
    box-sizing: border-box;
}