*{
    padding: 0;
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

}


.contenedor{
    display: grid;
    grid-template-areas:"header"
                        "seccion"
                        "pie";
}

.seccion{
  display: grid;
  grid-template-areas: "seccion1  seccion2"
                       "seccion3  seccion4"
                       "seccion5  seccion5"
                       "seccion6  seccion6";
  justify-content: center;
  gap: 20px;
}

.seccion1{ grid-area: seccion1;}
.seccion2{ grid-area: seccion2;}
.seccion3{ grid-area: seccion3;}
.seccion4{ grid-area: seccion4;}
.seccion5{ grid-area: seccion5;}
.seccion6{ grid-area: seccion6;}


.seccion1, .seccion3 {
  padding: 10px;
  margin: 10px;
}
.seccion2, .seccion4{
  background-color: rgb(207, 124, 207);
  padding: 15px;
  margin: 15px solid rgb(207, 124, 207);
}

.seccion5 {
  margin: 20px;
  padding: 10px;
}



/* Estilos generales de la tabla */
table {
  width: 100%;            
  border-collapse: collapse; 
  margin-top: 20px;
}

/* Bordes y alineación de celdas */
table td, table th {
  border: 2px solid #9331a7; 
  padding: 10px;   
}

/* Filas alternadas para mejor legibilidad */
table tr:nth-child(even) {
  background-color: #eb85cb;
}
table tr:hover {
  background-color: #ffccf2; 
}
table a {
  color: #00070e;      /* Azul */
  text-decoration: none;
}

table a:hover {
  color:#661c5d;
  text-decoration: underline;
}

h1 a{
  text-decoration: none;
  color: #ffd7fa;
  font-family: Arial, Helvetica, sans-serif;
}


.header{
    display: grid;
    grid-template-areas: "logo  nav";
    padding: 25px;
    justify-content: space-between;
    background-color: rgb(86, 0, 95);
}



.mnav ul{
  display: flex; 
  justify-content: center;
  background-color: #e6b4fa;

}

.mnav ul li {
  display: inline-block;
  padding: 10px;
  border: 1px solid rgba(128, 0, 128, 0.308);
}

.mnav ul  li a{
  color: #200029;
  text-decoration: none;
}

.nav ul{
    list-style: none;
    padding: 5px;
    margin: 5px;
}


.nav ul li{
  display: inline-block;
  margin: 0 10px; 
}

.nav ul li a{
    display: inline-block;
    padding: 10px 20px;
    font-size: 18px;
    color: rgb(255, 213, 251);
    text-decoration: none;
    border-radius:3px;
    transition: all 0.3s ease;
    cursor: pointer;
    justify-content: center;
}

.nav ul li a:hover{
    color: rgba(227, 174, 239, 0.795);
    background-color: rgba(101, 37, 103, 0.4)
}






/*CALCULADORA */

.container {
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 5px;
  margin-top: 50px;
}

h3 {
  font-size: 36px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

label {
  font-weight: bold;
  margin-bottom: 10px;
}

input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  max-width: 300px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  margin-top: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0062cc;
}

#result {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}