.register-container-background {
  background: url("/static/register.webp") no-repeat center center;
  background-size: cover;
  min-height: 70vh; /* Para que cubra toda la pantalla */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* ===========================
   ENCABEZADO DE LA PÁGINA
=========================== */

  
  /* ===========================
     FORMULARIO DE REGISTRO
  =========================== */
  form {
    background: #ffffff;
    padding: 2rem;
    margin: 0 auto 2rem auto;
    width: 90%;
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    text-align: center; 
    border: 2px solid #fcbf4a; /* Borde amarillo */
  }
  
  /* Campos de entrada (input) */
  form input[type="text"],
  form input[type="email"],
  form input[type="password"] {
    display: block;
    margin: 0 auto 1rem;
    width: 90%;
    max-width: 350px;
    padding: 0.75rem;
    font-size: 1rem;
    border: 2px solid #623d24; /* Bordes café */
    border-radius: 8px;
    transition: border-color 0.3s;
  }
  
  form input[type="text"]:focus,
  form input[type="email"]:focus,
  form input[type="password"]:focus {
    border-color: #fcbf4a; /* Amarillo al enfocar */
    outline: none;
  }
  
  /* Botón de envío */
  form button[type="submit"] {
    background-color: #fcbf4a;
    color: #623d24;
    font-weight: bold;
    cursor: pointer;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    transition: background-color 0.3s, transform 0.3s;
    width: 90%;
    max-width: 350px;
    margin: 0 auto;
    display: block;
  }
  
  form button[type="submit"]:hover {
    background-color: #e0a436;
    transform: scale(1.03);
  }
  
  form h1 {
    font-size: 2rem;
    color: #623d24; /* Café */
    text-align: center;
    margin-bottom: 1.5rem;
}

form a {
    display: block;
    text-align: center;
    color: #623d24;
    font-weight: bold;
    margin-top: 1rem;
    text-decoration: none;
}

form a:hover {
    text-decoration: underline;
}