/* menu */


 header {
      background: #4caf50;
      color: #fff;
      padding: 15px;
      text-align: center;
    }

    nav {
      display: flex;
      justify-content: center;
      background: #333;
      flex-wrap: wrap;
    }

    nav a {
      color: #fff;
      text-decoration: none;
      padding: 14px 20px;
      display: block;
      transition: background 0.3s;
    }

    nav a:hover {
      background: #4caf50;
    }

    .container {
      padding: 20px;
      text-align: center;
    }

    /* Estilos responsivos */
    @media (max-width: 600px) {
      nav {
        flex-direction: column;
        text-align: center;
      }
    }
	
	/* Header con logo */
	.header-content {
	  display: flex;
	  align-items: center;
	  justify-content: center; /* centro por defecto */
	  position: relative;      /* para posicionar logo a la izquierda */
	}

	/* Logo a la izquierda absoluta */
	.header-content .logo {
	  position: absolute;
	  left: 20px;     /* margen desde el borde izquierdo */
	  height: 40px;
	  width: auto;
	}

	/* Título centrado */
	.header-content h1 {
	  margin: 0;
	  text-align: center;
	  width: 100%;
	}

/* loader*/


#loader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #333;
    z-index: 9999;
    display: none; /* oculto por defecto */
}
.spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 40px; height: 40px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}