/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ocupa al menos toda la altura de la pantalla */
  background-color: #f4f7f6;
  color: #333;
}

/* Contenido principal */
main.content-wrapper {
  flex: 1; /* Hace que crezca para ocupar el espacio disponible */
  display: flex;
  width: 100%;
}

/* Esta clase modificadora la añadiremos SOLO cuando 
   queramos que el contenido de <main> esté centrado. */
main.content-wrapper.is-centered {
  justify-content: center;
  align-items: center;
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background-color: #ffffff; 
  padding: 10px 20px;
  border-bottom: 1px solid #dee2e6; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); 
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Enlaces del menú */
.nav-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin: 0;
}

.nav-links a {
  display: flex; /*Alinear icono con el texto*/
  align-items: center;
  gap: 8px;

  text-decoration: none;
  color: #343a40;
  font-size: 1em;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.nav-links a:hover,
.nav-links .active,
.nav-links .active i {
  background-color: #4a90e2;
  color: #ffffff;
}

.nav-links i{
  color: #333;
}

.nav-links a:hover i{
  color: #ffffff;
}

/* Auth section */
.auth-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.welcome-message {
  color: #6c757d;
  font-size: 0.9em;
  margin-right: 10px;
}

/* Botones de autenticación */
.login-btn, .logout-btn, .register-btn, .panel-btn {
  color: white;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-size: 0.9em;
  font-weight: 500;
  border: none;
}

.panel-btn {
  background-color: #6c757d;
}

.panel-btn:hover {
  background-color: #5a6268;
  transform: translateY(-1px);
}

.login-btn:hover, .register-btn:hover {
  background-color: #1f4103;
}

.logout-btn {
  background-color: #792006;
}

.logout-btn:hover {
  background-color: #410306;
  transform: translateY(-1px);
}

/* Footer */
.footer {
  background-color: #ffffff; 
  color: #6c757d; 
  text-align: left;
  padding: 10px 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px; 
  border-top: 1px solid #dee2e6; 
}

.footer img {
  max-height: 80%;
  width: auto;
  opacity: 0.8;
}

.footer p {
  margin: 0;
  padding-left: 10px;
  font-size: 0.9em;
}

#Men_error:focus, #Men_success:focus { /* Para cuando hay un mensaje de error en cualquier pantalla */
    outline: 2px solid #e53e3e;
    outline-offset: 2px;
    border-radius: 4px;
    margin-top: 10px;
}

#Men_success:focus { /* Para cuando hay un mensaje de error en cualquier pantalla */
    outline: 2px solid #0a6b06;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .navbar, .footer {
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 15px;
  }

  .nav-links, footer p {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  .auth-section, footer img {
    width: 100%;
    flex-wrap: wrap;
    margin-top: 10px;
    gap: 8px;
  }

  .footer {
    gap: 15px;
  }

}