/* Estilo para centrar todo el contenido en la parte superior de la página */
body {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: flex-start; /* Alinea en la parte superior */
    height: 100vh; /* Altura completa de la ventana */
    margin: 0; /* Elimina márgenes predeterminados */
    font-family: Arial, sans-serif; /* Fuente predeterminada */
    background-color: #f4f4f4; /* Color de fondo */
}

/* Contenedor principal del formulario */
.container {
    background-image: url('camuflaje4.jpg'); /* imagen de fondo del contenedor 
    padding: 20px; /* Espaciado interno */
    border-radius: 0px; /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra del contenedor */
    display: grid; /* Usa grid para la disposición de los elementos */
    grid-gap: 20px; /* Espaciado entre elementos */
    max-width: 400px; /* Ancho máximo del contenedor */
    width: 100%; /* Ancho completo */
    margin-top: 0px; /* Margen superior para espaciar desde el borde superior */
    text-align: center; /* Centra el texto en el contenedor */
}

/* Estilo para el botón de atme */
.atme-button {
     margin : 5px auto 0px ;
    margin-right: 20px;
    background-image: url('atme.png'); 
    color: white; /* Color del texto */
    border: none;
    border-radius: 50%;
    padding: 10px;
    text-decoration: none; /* Quita el subrayado del enlace */
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    display: block;
    width: 50px;
    height: 50px;
    background-size: cover;
    
}

/* Estilo para el botón de atme */
.info-button {
     margin : 5px auto 0px ;
    margin-left: 10px;
    transform: translateY(-95px);
    background-image: url('info5.png'); 
    color: white; /* Color del texto */
    border: none;
    border-radius: 50%;
    padding: 10px;
    text-decoration: none; /* Quita el subrayado del enlace */
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    display: block;
    width: 50px;
    height: 50px;
    background-size: cover;
    
}

.info-button:hover {
    background-color: darkgray; /* Cambia el color al pasar el ratón */
}

/* Estilos para la imagen */
.logo {
    max-width: 150px; /* Ajusta el tamaño de la imagen */
    margin: -20px auto 20px auto; /* Centra la imagen */
    display: block;
}

/* Estilos para el título debajo de la imagen */
.title {
    text-align: center;
    font-size: 1.2rem;
    color: white;
    margin-bottom: 20px;
}

/* Agrupación para inputs y displays, centrados */
.input-group {
    display: flex; /* Usa flexbox para centrar los elementos dentro */
    flex-direction: column; /* Coloca elementos en columna */
    align-items: center; /* Alinea los elementos al centro */
}

input[type="number"], input[type="text"] {
    padding: 10px; /* Espaciado interno */
    width: 60%; /* Ancho del input */
    margin-top: 10px; /* Margen superior para espaciar del label */
    font-size: 1rem; /* Tamaño de fuente */
}

/* Estilo para que todos los inputs y displays tengan el mismo tamaño */
input[type="number"], input[type="text"]:disabled {
    width: 60%; /* Ancho del input */
}

input[type="text"]:disabled {
    background-color: #eaeaea; /* Color de fondo para inputs deshabilitados */
    color: #000; /* Color del texto */
}

/* Estilo para centrar los botones */
.button-group button {
    margin: 5px 25px; /* Margen vertical de 5px y margen horizontal de 20px */
    padding: 60px 40px; /* Espaciado interno del botón */
    font-size: 1rem; /* Tamaño de fuente */
    border: none; /* Sin bordes */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    border-radius: 10px; /* Bordes redondeados */
}

.button-row {
    display: flex; /* Flexbox para los botones de acción */
    justify-content: space-between; /* Espacio entre los botones */
    margin: 5px;
}

button {
    padding: 10px 20px; /* Espaciado interno del botón */
    margin: 5px; /* Margen para separar botones */
    font-size: 1rem; /* Tamaño de fuente */
    border: none; /* Sin bordes */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    border-radius: 20px;  /* redondea los bottones */
}

button.selected { 
    color: white; /* Color del texto del botón seleccionado */
}

button:hover {
    opacity: 0.9; /* Cambia la opacidad al pasar el cursor */
}

#hombre.selected {
    background-image: url("hombre.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent; /* Color del botón de hombre seleccionado */
}

#hombre.deselected {
    background-image: url("hombre1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent; /* Color del botón de hombre seleccionado */
}

#mujer.selected {
    background-image: url("mujer1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent; /* Color del botón de hombre seleccionado */
}

#mujer.deselected {
    background-image: url("mujer.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent; /* Color del botón de hombre seleccionado */
}

.input-group label {
    color: white; 
}

#borrar.selected {
    background-color: red;
}

#calcular.selected {
    background-color: rgb(10, 220, 228);
    color: black;
}
label {
    color: white;
}