body {
  font-family:Arial, Helvetica, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;    
}
 * { /* selector universal */
  box-sizing: border-box;
 }
 header {
  color: #f56a6a;
  display: flex;
  justify-content: space-between; /* Distribuir los elementos con espacio entre ellos */
  align-items: center; /* Centrar verticalmente */
  padding: 5px 0;
  background-color: #fff; /* Color de fondo opcional */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Sombra para el encabezado */
  text-align: center;
}
/* Estilos para las divisiones */
#1, #2, #3 {
flex: 1; /* Asegura que cada div tome el mismo ancho */
padding: 10px;
}
/* Estilos para el logo */
.logo_1{
/* font-size: 24px;
font-weight: 300; */
margin-right: 0;
position: absolute;
top: 0;
right: 0;
z-index: 99; /* Asegura que esté por encima de otros elementos */
}

/* Estilos para el menú desplegable redes sociales */
.dropdown {
position: relative;
display: inline-block;
background-color: #fff; /* Color de fondo opcional */
padding-top: 7.5em;
}

.dropbtn {
background-color: transparent;
border: none;
cursor: pointer;
}
.dropbtn img {
width: 25px; /* Establece el ancho deseado */
height: auto; /* Mantiene la proporción de la imagen */
}

.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 5px 5px;
text-decoration: none;
display: block;
}

.dropdown-content a img {
width: 22px;
height: 22px;
}

.dropdown-content a:hover {
background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #ddd;
}

/* Estilos del menú de navegación - lo saco fuera de operación y deja la franja como estetica*/
nav {
background-color: rgb(245, 106, 106);
padding: 10px 0;
}

#nav1 {
z-index: 2;
}

nav ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
}

   
/*Estilos de 3 Divisiones responsives*/

.wrapper {
    display: flex;
    flex-wrap: wrap; /* Permite que las columnas se ajusten al ancho de la pantalla */
}

.column {
    flex: 0 0 50%; /* Cada columna ocupa un tercio del ancho */
    max-width: 50%; /* Se establece un ancho máximo para evitar que las columnas se expandan demasiado en pantallas grandes */
    box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */
    padding: 20px; /* Espacio interno */
    border: 1px solid #ccc; /* Borde para visualización */
    text-align: left; /* Centra el contenido */
}

/*Estilos para el footer */
footer {
  background-color: rgb(26, 35, 126, 0.8); /* Color de fondo del footer */
  color: #fff; /* Color del texto del footer */
  text-align: center; /* Centra el texto del footer */
  padding: 20px 0; /* Espacio interno del footer */
  font-size: 14px;
}

   /*estilos para los encabezamientos de los textos*/
.subcapitulo1{
  border: 1px solid black; 
  border-radius: 0px;
  background-color: #f0e9fd;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); /* Sombra ligera */
  padding: 10px; 
  color:black; 
  text-align: center; 
}
.subcapitulo2{
  border: 1px solid black; 
  background-color: #faf2fd;
  padding: 10px; 
  color:black; 
  text-align: center; 
  font-size:  14px; 
  font-weight:bold;
}
.subcapitulo3{
  border: 1px solid black; 
  background-color: #faf2fd;
  padding: 0px; 
  color:black; 
  text-align: left; 
  font-size:  12px; 
  font-weight:bold;
}
.articulo1 {
  color:rgb(2, 0, 0); 
  border: 2px solid crimson;
  font-size:  12px; 
  font-weight:300;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0px;
  max-width: 300px;
  margin: 1px auto;
  padding: 1px;
  background-color: #f8f8f8;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
} 

label {
  font-weight: bold;
  color: #555;
  font-size: 0.95em;
}
input[type='number'] {
  width: calc(100% - 20px);
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 5px;
  font-size: 1em;
  box-sizing: border-box;
}

input[type='number']:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline: none;
}
table {
  max-width: 300px; /* Ancho máximo de 300px */
  margin: 0 auto; /* Centrar horizontalmente */
 }

.tabla-centro {
    margin: 0 auto;
    text-align: left;
}

#efectuar {
background-color: #e1e1e2; /* Gris claro */
    color: #000; /* Color del texto oscuro para contraste */
    border: 1px solid #ccc; /* Borde sutil */
    padding: 10px 20px; /* Relleno interno para darle forma */
    text-align: center;
    text-decoration: none; /* Si es un enlace */
    display: inline-block; /* Ocupa solo el espacio de su contenido */
    cursor: pointer; /* Cambia el cursor para indicar que es clicable */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    font-size: 1em; /* Tamaño de fuente por defecto */    
    width: auto; /* Es el valor por defecto para inline-block */
    max-width: 100%; /* Asegura que no se desborde del contenedor */
}
#efectuar:hover,
#efectuar:focus {
    background-color: #FFC000; /* Un gris un poco más oscuro al pasar el ratón/enfocar */
    border-color: #391010;
    outline: none; /* Elimina el contorno azul por defecto en algunos navegadores al enfocar */
}

#efectuar:active {
    background-color: #a3f2d0; /* Un gris aún más oscuro al hacer clic */
    border-color: #1a0b31;
} 

/* Estilos comunes para los divs de resultados individuales */
 #perdidas  {
  display: flex;
  color: red;
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 10px;
}

#montoPerdidas,
#precioVenta,
#importeTotal {
  font-size: 1.1em;
  margin-bottom: 10px;
  color: #333;
}
/* Estilos para resaltar el precio de venta */

#precioVenta {
    color: green;
    font-weight: bold;
}

/* Estilos para resaltar los montos (sobrescribe o añade a lo anterior) */
#montoPerdidas,
#importeTotal {
  font-weight: bold;
  color: #007bff; /* Un azul más vibrante para resaltar */
} 

#resultado {
  display: flex;
  color: rgb(18, 143, 51);
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}