@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap');

/* animacion de modal*/
#modal-mensaje{
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#modal-cuerpo{
    background: white;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    text-align: center;
}

#modal-animacion {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}


#modal-texto{
    margin: 0;
}

.error{
    color: red;
}

:root {
    --verde-principal: #546f01;
    --hover-verde: #a4bc00;
    --beige-suave: #d8cabb;
    --madera: #a88f6b;
    --blanco: #ffffff;
    --negro: #000000;
}
* {
    font-family: 'DM Sans', sans-serif;
}

 
/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
html, body {
    height: 100%;
    font-family: 'DM Sans', sans-serif;
    background-color: #d8cabb;
}
 

/* CONTENIDO LOGIN */
.contenido {
    max-width: 400px;
    margin: 4rem auto;
    background-color: var(--blanco);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
 
.contenido h1 {
    text-align: center;
    color: var(--verde-principal);
    margin-bottom: 2rem;
    font-family: 'Cormorant', serif;
}
 
/* FORMULARIO */
form#login label {
    font-weight: 600;
    color: var(--madera);
}
 
form#login input.form-control {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.5rem;
}
 
/* Texto de ayuda para la contraseña */
#passwordHelpBlock {
    font-size: 0.85rem;
    color: #777;
}
 
/* Errores */
span.error {
    color: red;
    font-size: 0.85rem;
}
 
/* BOTONES */
.btn-primary {
    background-color: var(--verde-principal);
    border-color: var(--verde-principal);
    color: white;
    width: 100%;
    margin-top: 1rem;
    transition: 0.3s ease;
}
 
.btn-primary:hover {
    background-color: var(--hover-verde);
    border-color: var(--hover-verde);
}
 
/* Registro */
.registro {
    text-align: center;
    margin: 2rem auto;
}
 
.registro h6 {
    margin-bottom: 1rem;
    color: var(--negro);
}
 
.registro a {
    color: white;
    text-decoration: none;
}
 
.registro .btn {
    background-color: var(--madera);
    border: none;
}
 
.registro .btn:hover {
    background-color: var(--verde-principal);
}
 

 
.contenedor-Agroshop {
    margin-left: 1rem;
}
 
.contenedor-redes ul {
    list-style: none;
    display: flex;
    gap: 0.75rem;
    margin-right: 1rem;
}
 
.contenedor-redes svg {
    width: 20px;
    height: 20px;
    fill: var(--negro);
    transition: 0.3s;
}
 
.contenedor-redes svg:hover {
    fill: var(--hover-verde);
}