/* Variables */
.color1 {
  color: #222831;
}

.color2 {
  color: #393E46;
}

.color3 {
  color: #00ADB5;
}

.color4 {
  color: #EEEEEE;
}

.fondo {
  background-image: url(/images/fondo.jpg);
  background-size: cover;
  background-position: center;
}

.fondo2 {
  background-color: #00ADB5;
}

.font-principal {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.font-principal a {
  text-decoration: none;
}

/* Reset */
* {
  margin: 1%;
  padding: 1%;
  box-sizing: border-box;
  text-decoration: none;
  border-radius: 15px;
  text-align: center;
}

/* Formato Header */
header a {
  text-decoration: none;
}

/* Formato Main */
/* Formato Calculadora x cantidad de personas */
.calculadora1 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: space-around;
}

.btn {
  margin-top: 4%;
  margin-bottom: 3%;
}

input {
  margin: 3%;
}

/* Formato Calculadora proporcional al gasto */
.calculadora2 {
  box-sizing: border-box;
}

.totales {
  width: 30%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ccc;
}

input {
  width: 100%;
  box-sizing: border-box;
}

/* Responsive para celulares */
@media (max-width: 560px) {
  table, thead, tbody, th, td, tr {
    display: block;
    text-align: center;
  }
  thead {
    display: none; /* Opcional: ocultar encabezados para simplificar */
  }
  td {
    position: relative;
    padding-left: 50%;
    border: none;
    border-bottom: 1px solid #ddd;
  }
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
  }
}
/* Formato Navegador */
.item-nav {
  background-color: #222831;
}

nav a {
  text-decoration: none;
}

/* Formato Footer */
form {
  text-align: center;
}

/* Formato Links */
a {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  transform: scale(1.1);
}

/* Formato Totales */
.totales {
  background-color: white;
  color: black;
  font-size: large;
  width: 50%;
}

/* Formato Calculadora x cantidad de personas */
.calculadora1 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: space-around;
}

.btn {
  margin-top: 4%;
  margin-bottom: 3%;
}

input {
  margin: 3%;
}

/* Formato Calculadora proporcional al gasto */
.calculadora2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
}/*# sourceMappingURL=styles.css.map */