/*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/portada.webp') no-repeat center center fixed;
  background-size: cover;
  color: var(--color-blanco);
}


/* Imagen de fondo estilo Netflix */
.bg-login {
    background-image: url('../images/portada.webp'); /* 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;
}

:root {
  --color-primario: #0D3B66;        /* Azul profundo */
  --color-secundario: #C89B3C;      /* Dorado cálido */
  --color-acento: #F47C5D;          /* Coral suave */
  --color-profundo: #052238;        /* Azul marino oscuro */

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

  /* Tonos suaves */
  --color-primario-suave: #1E5C94;
  --color-secundario-suave: #E0B974;
  --color-acento-suave: #F9A690;
}

/*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-secundario-suave { background-color: var(--color-secundario-suave) !important;}
.bg-blanco { background-color: var(--color-blanco) !important; }
.bg-negro { background-color: var(--color-negro) !important; }
.bg-gris-claro { background-color: var(--color-gris-claro) !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; }

/* BOTONES*/

.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-blanco);
  border: none;
}
.btn-acento:hover {
  background-color: #E76C4D;
}

.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-blanco);
}