@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

/* Estilos para la pantalla de login */
#login {
    background: url("./img/background-login.jpg") no-repeat center center fixed;
    background-size: cover;
    /* Asegúrate de que #login ocupe todo el viewport si es necesario */
    min-height: 100vh;
}

/* Estilos para el form de login, que se muestra sobre el background del #login */
#login form {
    font-family: 'Poppins', sans-serif;
    background-color: rgb(138 173 191 / 86%);
    padding: 2em;
    border-radius: var(--radius);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 20em;
    width: 90%;
}

.button--flat.button--red {
    color: #fff;
}
.button--flat.button--grey {
    color: #fff;
}
.card>*>*:last-child {
    margin-bottom: 0;
    color: #fff;
}

#login form h1 {
    margin: 0.8em 0 0.8em;
    font-weight: 400;
}

#login form img {
    content: url("./img/logo.png");
    color: #f47750;
    width: 10em;
    height: auto;
}

/* Estilos generales para el resto de la interfaz */
:root {
    --background: #1f2330;
    --surfacePrimary: #1f2330;
    --surfaceSecondary: #292d3e;
    --surfaceHover: #383d51;
    --surfaceSelect: #4c5374;
    --divider: #1f2330;
    --icon: #8eb2ff;
    --textPrimary: #dee0ee;
    --textSecondary: #929ac9;
    --radius: 0.7rem;
    --blue: #8eb2ff;
    --dark-blue: rgba(56, 71, 102, 0.5);
    --red: #ef5350;
    --dark-red: rgba(239, 83, 80, 0.15);
    --grey: #6c739a;
    --dark-grey: rgba(108, 115, 154, 0.15);
    --moon-grey: #f2f2f2;
}

/* Para el resto de la interfaz, cuando ya no se está en login */
body:not(#login) {
    background: url("./img/background.jpg") no-repeat center center fixed;
    background-size: cover;
    color: var(--textPrimary);
    font-family: 'Poppins', sans-serif;
}

/* Ocultar el párrafo con la clase .credits */
.credits {
    display: none !important;
}

/* Resto de estilos del tema existente... */
/* Puedes mantener aquí el resto del código que ya tienes 
   (colores, íconos, estilos de listados, etc.) sin modificar. */
.button {
    background: #206184;
}
.breadcrumbs{
    background: none;
}
header{
    background: none;
}
#search #input{
    background: none;
}
#search #result {
    background: url("./img/background.jpg") no-repeat center center fixed;
}
#search.active #input {
    background: url("./img/background.jpg") no-repeat center center fixed;
}
#search .boxes {
    background: none;
}

#search .boxes>div>div {
    background: #206184;
}