/* General */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: black;
  color: #444;
  font-size:large
}

/* Encabezado */
header {
  background-color: #00050a;
  color: white;
  padding: 20px;
  text-align: center;
}

header h1 {
  margin-bottom: 5px;
}

.equation {
  font-weight: bold;
  font-size: 1.4em;
}

.tagline {
  margin: 5px 0;
  font-style: italic;
}

/* Secciones */
section {
  padding: 20px;
}

h2 {
  color: white;
  margin-top: 5px
  margin-bottom: 5px;
}

/* Botoneras en cuadrícula */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

/* Botones activos */
a,
button {
  display: block;
  padding: 12px;
  text-align: center;
  background-color: #0080ff;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

a:hover,
button:hover {
  background-color: #0059b3;
}

/* Botones inactivos */
button[onclick*="No disponible"] {
  background-color: #999;
  cursor: not-allowed;
}

button[onclick*="No disponible"]:hover {
  background-color: #777;
}
.combo-row select {
  background-color: #007BFF; /* Azul estilo botón */
  color: white;              /* Texto blanco */
  border: none;
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 14px;
  min-width: 140px;
  cursor: pointer;
  appearance: none;          /* Elimina flechas nativas en algunos navegadores */
}

/* Estilo para las opciones internas */
.combo-row select option {
  background-color: #007BFF; /* Fondo azul también en el desplegado */
  color: white;              /* Texto blanco en cada opción */
}
/* Footer */
/* Footer limpio y coherente */
footer {
  background-color: #000000; /* Fondo negro */
  color: white;              /* Texto blanco */
  text-align: center;
  padding: 30px 20px;
  font-size: 0.95em;
  line-height: 1.6em;
  border: none;
  margin: 0;
  box-shadow: none;
}
#user-contributions {
  margin-bottom: 0;
  padding-bottom: 0;
}

footer {
  margin-top: 0;
  clear: both;
}
footer .logo {
  margin-top: 10px;
  max-width: 120px;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.3)); /* Opcional para resaltar */
}
.especial {
  color: #f5f509ed; /* Cambia este valor al color que prefieras */
  text-decoration: underline;
}

.especial:hover {
  color: #ff6600; /* Color al pasar el mouse */
}
.boton-verde {
  background-color: #006400; /* Verde oscuro */
  color: white;
  font-weight: bold;
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: background-color 0.3s ease;
}

.boton-verde:hover {
  background-color: #004d00; /* Verde más oscuro al pasar el mouse */
}
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
    padding: 10px;
  }

  header, section, footer {
    padding: 10px;
    text-align: center;
  }

  .grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  a {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .banner-top-left,
  .banner-top-right {
    position: static;
    width: 100%;
    margin-bottom: 10px;
  }

  .combo-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  select {
    width: 100%;
  }

  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-content img.logo {
    margin-bottom: 10px;
  }
}
/* Contenedor base para ambos banners */
.banner {
  position: absolute;
  top: 0;
  z-index: 10;
}

/* Banner izquierdo */
.banner-left {
  left: 0;
}

/* Banner derecho */.
.banner-right {
  right: 0;
}
/* Contenedor base para ambos banners */
.banner {
  position: absolute;
  top: 0;
  z-index: 10;
}

/* Banner izquierdo */
.banner-left {
  left: 0;
}

/* Banner derecho */
.banner-right {
  right: 0;
}

/* Imagen izquierda: escala doble */
.banner-left img {
  transform: scale(.5);
  transform-origin: top left;
}

/* Imagen derecha: escala normal */
.banner-right img {
  transform: scale(1);
  transform-origin: top right;
}
.leyenda {
  font-size: 1.1em;
  font-weight: 500;
  color: #FFFFFF;
  margin-top: 10px;
}
.guia-toggle {
  margin-bottom: 5px; /* Puedes probar con 5px o incluso 0px */
}
.toggle-button {
  margin-bottom: 5px; /* Si el botón tiene margen propio */
}