/*SETEOS GENERALES*/

body {
  font-family: 'Roboto', sans-serif;
  background: linear-gradient(to right, #000000, #1a1a1a);
  color: var(--color-blanco);
  min-height: 100vh;

  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)),
              url('../images/IMG_7410.jpg') no-repeat center center fixed;
  background-size: cover;
  color: var(--color-blanco);
}


/* Imagen de fondo estilo Netflix */
.bg-login {
    background-image: url('../images/IMG_8804.jpg'); /* Asegurate de tener la imagen en assets/img */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: white;
    overflow: hidden;
}

/* Capa de oscurecimiento */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 0;
}

/* Para que el contenido esté por encima del overlay */
.z-1 {
    z-index: 1;
    position: relative;
}

/*COLORES*/

:root {
  --color-primario: #40730E;
  --color-secundario: #518C16;
  --color-acento: #B3D929;
  --color-profundo: #294012;

  --color-negro: #000000;
  --color-blanco: #ffffff;
  --color-gris-claro: #f8f9fa;

  /* Colores auxiliares si necesitamos tonos más suaves */
  --color-primario-medio-suave: #5f9143;
  --color-primario-suave: #6A994E;
  --color-acento-suave: #D1EF6A;
}

/* Utilitarios de color */
.bg-primario { background-color: var(--color-primario) !important; }
.bg-secundario { background-color: var(--color-secundario) !important; }
.bg-acento { background-color: var(--color-acento) !important; }
.bg-profundo { background-color: var(--color-profundo) !important; }
.bg-acento-suave { background-color: var(--color-acento-suave) !important;}
.bg-primario-suave { background-color: var(--color-primario-suave) !important;}
.bg-primario-medio-suave { background-color: var(--color-primario-medio-suave) !important;}
.bg-blanco { background-color: var(--color-blanco) !important; }
.bg-negro { background-color: var(--color-negro) !important; }

.text-primario { color: var(--color-primario) !important; }
.text-secundario { color: var(--color-secundario) !important; }
.text-acento { color: var(--color-acento) !important; }
.text-profundo { color: var(--color-profundo) !important; }
.text-blanco { color: var(--color-blanco) !important; }
.text-negro { color: var(--color-negro) !important; }

.border-primario { border-color: var(--color-primario) !important; }
.border-acento { border-color: var(--color-acento) !important; }

.btn-primario {
  background-color: var(--color-primario);
  color: var(--color-blanco);
  border: none;
}
.btn-primario:hover {
  background-color: var(--color-profundo); 
  color: var(--color-blanco);
}

.btn-acento {
  background-color: var(--color-acento);
  color: var(--color-negro);
  border: none;
}
.btn-acento:hover {
  background-color: #A8C620;
}

.btn-primario-outline {
  background-color: transparent;
  color: var(--color-primario);
  border: 2px solid var(--color-primario);
}
.btn-primario-outline:hover {
  background-color: var(--color-primario);
  color: var(--color-blanco);
}

.btn-acento-outline {
  background-color: transparent;
  color: var(--color-acento);
  border: 2px solid var(--color-acento);
}
.btn-acento-outline:hover {
  background-color: var(--color-acento);
  color: var(--color-negro);
}

.btn-white-outline {
  background-color: transparent;
  color: var(--color-blanco);
}