:root {
    --primario: #B3001E;
    --secundario: #ffffff;
}

html {
  color: #595959;
}

* { margin: 0; padding: 0; }

::selection {
  background-color: var(--primario);
  color: var(--secundario);
}

body {
    background-color: var(--terciario);
}

nav ul {
  display: flex;
  flex-direction: row;
  gap: 0.5em; /* espacio entre los elementos */
  align-items: center;
  justify-content: flex-start; /* o center o space-around, según prefieras */
  padding: 0;
  margin: 0;
}

nav li {
  list-style-type: none; 
}

dd {
  padding-left: calc(100vw / 24);
}

button,
input.submit {
    background-color: var(--terciario);
    cursor: pointer;
    transition: background-color 0.4s ease, color 0.4s ease;
    border: 2px solid transparent;
    padding: 0.1em;
    color: var(--primario);
}

button:hover {
  font-weight: bold;
}

button:focus {
  border: 2px solid var(--primario);
}


button.activo {
    background-color: var(--primario);
    font-weight: bold;
    color: var(--secundario);
}

main button, 
form input.submit {
  background-color: var(--primario);
  color: var(--secundario);
  font-weight: bold;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  padding: 0.5em;
}

main button:hover,
form input.submit:hover {
  background-color: var(--secundario);
  color: var(--primario);
  border: 2px solid var(--primario);

}

main button:focus,
form input.submit:focus {
  background-color: var(--primario);
  color: var(--secundario);
  font-weight: bold;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

p, small, footer ul {
  padding-bottom: 1em;
}

p:has(+ ul) {
  padding-bottom: 0;
}

footer ul {
  list-style-position: outside;
  padding-left: 1.5em;
}

footer ul li {
  list-style-type: disc; 
}

address,
small {
  display: block;
  white-space: pre-line;
  font-variant-numeric: lining-nums;
  font-style: normal;
}

dialog.confirmacion-modal {
  width: 100vw;
  height: 100vh;
  border: none;
  background-color: var(--primario);
  padding: 2em;
  max-width: min(90vw, 60ch);
  min-width: 20rem;
}

dialog.confirmacion-modal form {
  display: flex !important;
  justify-content: flex-end;
  width: 100%;
}

button.cerrar-confirmacion {
  align-self: end;
  background-color: var(--terciario);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

button.cerrar-confirmacion:hover {
  background-color: var(--secundario);
}

a {
  color: var(--primario);
  text-decoration: underline dotted 0.1em var(--primario);
  text-underline-offset: 0.15em;
  transition: all 0.3s ease;
}

a:visited {
  color: #595959;
  text-decoration-color: #595959;
}

a:hover {
  background-color: var(--primario);
  color: var(--secundario);
  text-decoration-color: var(--secundario);
}

a:focus {
  background-color: var(--secundario);
  color: var(--primario);
  font-weight: bold;
  text-decoration-color: var(--primario);
}