/* Identidade visual — classes portadas do front original (gerais.css). */

:root {
    --tatame: #0a0a0b;
    --lona: #141417;
    --costura: #26262b;
    --ouro: #fcd34d;
    --ponteira: #b91c1c;
    --giz: #ededed;
}

html { -webkit-font-smoothing: antialiased; }
body { background: var(--tatame); color: var(--giz); }
::selection { background: var(--ouro); color: #000; }

/* Foco visível só para teclado, na cor da marca. */
:focus-visible {
    outline: 2px solid var(--ouro);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Valores, datas e códigos: mono com algarismos alinhados. */
.num {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.rotulo {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a1a1aa;
}

/* Ponteira: a ponta da faixa do usuário logado (cor + graus) sublinhando o
   título de cada página. */
.ponteira { display: flex; height: 10px; margin-top: 1rem; }
.ponteira > span { height: 100%; }
.ponteira-corpo { width: 5.5rem; border-radius: 3px 0 0 3px; }
.ponteira-ponta { width: 2.75rem; display: flex; align-items: stretch; gap: 3px; padding-left: 4px; }
.ponteira-ponta i { width: 4px; background: #fff; }
.ponteira-fim { width: 0.6rem; border-radius: 0 3px 3px 0; }
.ponteira-faixa-branca .ponteira-corpo,
.ponteira-faixa-branca .ponteira-fim { box-shadow: inset 0 0 0 1px #d4d4d8; }

@media (prefers-reduced-motion: no-preference) {
    .ponteira-corpo { transform-origin: left; animation: amarrar 0.5s cubic-bezier(.2,.8,.2,1) both; }
    .ponteira-ponta, .ponteira-fim { animation: aparecer 0.3s 0.35s ease-out both; }
    .entrada { animation: subir 0.4s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes amarrar { from { transform: scaleX(0); } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Interruptor (checkbox) das configurações. */
.chave { appearance: none; width: 3rem; height: 1.6rem; border-radius: 999px;
         background: var(--costura); position: relative; cursor: pointer; flex-shrink: 0;
         transition: background-color .15s; }
.chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.6rem - 6px);
                height: calc(1.6rem - 6px); border-radius: 999px; background: #a1a1aa;
                transition: transform .15s, background-color .15s; }
.chave:checked { background: var(--ouro); }
.chave:checked::after { transform: translateX(1.4rem); background: #000; }

.titulo-logo {
    font-family: "Staatliches", sans-serif;
    font-weight: 400;
    color: white;
}

.titulo-card {
    color: #070707;
    font-family: "Staatliches", sans-serif;
    text-align: center;
    font-weight: 400;
}

.texto-btn {
    color: #000;
    text-align: center;
    font-family: "Saira Condensed", sans-serif;
    font-weight: 900;
}

.titulo-login {
    font-family: "Staatliches", sans-serif;
    font-weight: 400;
    color: black;
}

.borda-login {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.input-login {
    border: 1px solid oklch(55.2% 0.016 285.938);
}