/* SPDX-License-Identifier: LicenseRef-Xiliux-Propietario
   Bachué IdP — capa de LOGIN sobre el Sistema Boi (/boi.css, cargado antes).
   Solo layout y el mapeo del marcado propio (h1/label/input/button/.aviso/.pie…)
   a los tokens de Boi; los tokens, la tipografía y el tema los pone boi.css. */

body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

main {
    width: min(94vw, 400px);
    background: var(--boi-panel);
    border: 1px solid var(--boi-borde);
    border-radius: var(--boi-r-lg);
    box-shadow: var(--boi-sombra-alta);
    padding: 2rem 1.9rem;
}

/* Título de la tarjeta: serif de Boi + subtítulo tenue. */
h1 {
    font-family: var(--boi-serif);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
h1 small {
    font-family: var(--boi-sans);
    font-weight: 500;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--boi-tinta-2);
}

form { display: flex; flex-direction: column; gap: .35rem; }

label {
    font-size: .85rem;
    font-weight: 500;
    color: var(--boi-tinta-2);
    margin-top: .6rem;
}

input[type="text"], input[type="password"] {
    font: inherit;
    color: var(--boi-tinta);
    background: var(--boi-panel);
    border: 1px solid var(--boi-borde-fuerte);
    border-radius: var(--boi-r);
    padding: .6em .7em;
    transition: var(--boi-e);
}
input[type="text"]:focus, input[type="password"]:focus {
    outline: none;
    border-color: var(--boi-acento);
    box-shadow: 0 0 0 3px var(--boi-anillo);
}

button {
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    margin-top: 1.2rem;
    padding: .6em 1.1em;
    border: 1px solid transparent;
    border-radius: var(--boi-r);
    background: var(--boi-acento);
    color: var(--boi-acento-tinta);
    transition: var(--boi-e);
}
button:hover { filter: brightness(1.07); }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--boi-anillo); }
/* El "Salir" y acciones secundarias: sobrio. */
button.tenue {
    background: transparent;
    color: var(--boi-tinta-2);
    border-color: var(--boi-borde-fuerte);
    margin-top: .8rem;
}
button.tenue:hover { background: var(--boi-panel-2); filter: none; color: var(--boi-tinta); }

/* Avisos: reusan el look de píldora/aviso de Boi. */
.aviso {
    margin-top: 1rem;
    padding: .7rem .85rem;
    border-radius: var(--boi-r);
    font-size: .9rem;
    border: 1px solid var(--boi-borde);
}
.aviso.error { background: var(--boi-mal-suave); color: var(--boi-mal); border-color: transparent; }
.aviso.ok    { background: var(--boi-ok-suave);  color: var(--boi-ok);  border-color: transparent; }

.pie { margin-top: 1.4rem; font-size: .88rem; color: var(--boi-tinta-2); }
.pie a { color: var(--boi-acento); }

/* Secreto TOTP a enrolar: mono, destacado en una caja hundida. */
code.secreto {
    display: block;
    font-family: var(--boi-mono);
    font-size: 1.05rem;
    letter-spacing: .08em;
    word-break: break-all;
    background: var(--boi-panel-2);
    border: 1px solid var(--boi-borde);
    border-radius: var(--boi-r);
    padding: .8rem;
    margin: .4rem 0 1rem;
    color: var(--boi-tinta);
}