/*
  DactoSeg — identidade visual da Dacto (dacto.com.br, kit global do Elementor):
  primária #129FDB · marinho #1D4C7E · destaque #1DBD88 · vermelho #BF2242 · amarelo #FBC434
  azul-claro #75C7E1 · cinza-claro #F3F3F3 · fonte Titillium Web (hospedada aqui: a CSP só permite 'self').
*/

@font-face { font-family: "Titillium Web"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/titillium-web-400.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/titillium-web-600.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/titillium-web-700.woff2") format("woff2"); }

:root {
    --dacto-azul: #129FDB;
    --dacto-marinho: #1D4C7E;
    --dacto-verde: #1DBD88;
    --dacto-vermelho: #BF2242;
    --dacto-amarelo: #FBC434;
    --dacto-azul-claro: #75C7E1;

    --fundo: #F3F3F3;
    --cartao: #FFFFFF;
    --texto: #1B2533;
    --suave: #5E6B7A;
    --borda: #D8DEE5;
    --campo: #FFFFFF;
    --foco: rgba(18, 159, 219, .28);
    --primaria: var(--dacto-azul);
    --primaria-hover: var(--dacto-marinho);
    --primaria-texto: #FFFFFF;
    --erro: var(--dacto-vermelho);
    --erro-fundo: #FBEAED;
    --ok: #13875F;
    --ok-fundo: #E6F7F0;
    --aviso: #8A6100;
    --aviso-fundo: #FEF6DD;
    --sombra: 0 8px 28px rgba(29, 76, 126, .10);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fundo: #0E1B2B;
        --cartao: #152639;
        --texto: #E8EEF5;
        --suave: #9DB0C4;
        --borda: #26405C;
        --campo: #0F1E2F;
        --foco: rgba(117, 199, 225, .30);
        --primaria: #129FDB;
        --primaria-hover: #75C7E1;
        --primaria-texto: #FFFFFF;
        --erro: #F27A90;
        --erro-fundo: rgba(191, 34, 66, .18);
        --ok: #4FD8A8;
        --ok-fundo: rgba(29, 189, 136, .16);
        --aviso: #FBC434;
        --aviso-fundo: rgba(251, 196, 52, .14);
        --sombra: 0 8px 28px rgba(0, 0, 0, .35);
    }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: "Titillium Web", "Segoe UI", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background: var(--fundo);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

/* ---------- estrutura: painel da marca + conteúdo ---------- */

.pagina { display: flex; min-height: 100vh; }

.painel-marca {
    display: none;
    position: relative;
    overflow: hidden;
    flex: 0 0 42%;
    max-width: 560px;
    padding: 48px 48px 40px;
    background: linear-gradient(160deg, var(--dacto-marinho) 0%, #163B63 60%, #102D4D 100%);
    color: #FFFFFF;
    flex-direction: column;
    justify-content: space-between;
}
.painel-logo { width: 230px; height: auto; position: relative; z-index: 1; }
.painel-texto { position: relative; z-index: 1; max-width: 380px; }
.painel-texto h2 { font-size: 2rem; font-weight: 600; line-height: 1.2; margin: 0 0 12px; }
.painel-texto p { color: #CFE3F2; margin: 0 0 24px; font-size: 1.05rem; }
.painel-texto ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.painel-texto li { padding-left: 28px; position: relative; color: #E6F1F9; }
.painel-texto li::before {
    content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 9px;
    border-left: 3px solid var(--dacto-verde); border-bottom: 3px solid var(--dacto-verde);
    transform: rotate(-45deg);
}
/* símbolo grande e discreto ao fundo do painel */
.painel-simbolo { position: absolute; right: -90px; bottom: -70px; width: 360px; height: auto; opacity: .07; }

.conteudo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    gap: 20px;
}

.topo-compacto img { width: 216px; height: auto; display: block; }

.rodape { color: var(--suave); font-size: .85rem; text-align: center; }

@media (min-width: 900px) {
    .painel-marca { display: flex; }
    .topo-compacto { display: none; }
}

/* ---------- cartão ---------- */

.cartao {
    width: 100%;
    max-width: 400px;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 32px 28px 28px;
    box-shadow: var(--sombra);
}
.cartao::before {
    content: ""; display: block; height: 4px; margin: -32px -28px 28px; border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, var(--dacto-azul), var(--dacto-azul-claro));
}

h1 { margin: 0 0 4px; font-size: 1.6rem; font-weight: 600; line-height: 1.25; }
.sub { margin: 0 0 22px; color: var(--suave); font-size: .98rem; }

/* ---------- formulário ---------- */

form { display: grid; gap: 4px; }
label { font-weight: 600; font-size: .92rem; margin-top: 10px; }

input {
    font: inherit;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--borda);
    border-radius: 9px;
    background: var(--campo);
    color: var(--texto);
    transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--suave); opacity: .7; }
input:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 4px var(--foco); }

button, .botao {
    margin-top: 20px;
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    padding: 12px;
    border: 0;
    border-radius: 9px;
    background: var(--primaria);
    color: var(--primaria-texto);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
    width: 100%;
    transition: background .15s;
}
button:hover, .botao:hover { background: var(--primaria-hover); }
button:focus-visible, .botao:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--foco); }

.botao-secundario {
    background: transparent;
    color: var(--primaria);
    border: 1px solid var(--borda);
}
.botao-secundario:hover { background: var(--fundo); color: var(--primaria-hover); }

/* ---------- mensagens ---------- */

.alerta {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 13px; border-radius: 9px; margin: 0 0 14px;
    font-weight: 600; font-size: .95rem;
}
.alerta svg { flex: 0 0 20px; margin-top: 2px; }
.erro { color: var(--erro); background: var(--erro-fundo); }
.ok { color: var(--ok); background: var(--ok-fundo); }
.aviso { color: var(--aviso); background: var(--aviso-fundo); }
.erro-campo { color: var(--erro); font-size: .85rem; }

/* tela de "login confirmado" (aberta pela bandeja) */
.confirmado { text-align: center; }
.confirmado .selo {
    width: 64px; height: 64px; margin: 4px auto 16px; border-radius: 50%;
    display: grid; place-items: center; background: var(--ok-fundo); color: var(--ok);
}

/* ---------- dados do usuário ---------- */

dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 18px 0 0; }
dt { color: var(--suave); }
dd { margin: 0; font-weight: 600; }

/* ---------- primeiros passos ---------- */

.cartao-largo { max-width: 620px; }

.passos { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.passo { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--borda); }
.passo:first-child { border-top: 0; }
.passo h2 { font-size: 1.05rem; font-weight: 600; margin: 4px 0 4px; }
.passo p { margin: 4px 0; color: var(--suave); }
.passo p strong { color: var(--texto); }

.numero {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700;
    border: 2px solid var(--borda); color: var(--suave); background: var(--cartao);
}
.passo.atual .numero { border-color: var(--primaria); background: var(--primaria); color: #FFFFFF; }
.passo.feito .numero { border-color: var(--dacto-verde); background: var(--dacto-verde); color: #FFFFFF; }
.passo.feito .numero { font-size: 0; }
.passo.feito .numero::after {
    content: ""; width: 12px; height: 7px; margin-top: -3px;
    border-left: 2.5px solid #FFFFFF; border-bottom: 2.5px solid #FFFFFF; transform: rotate(-45deg);
}

.botao-inline { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 10px 18px; margin: 8px 0 4px; }
.detalhe { font-size: .88rem; color: var(--suave); }

.dica { margin-top: 6px; }
.dica summary { cursor: pointer; color: var(--primaria); font-weight: 600; font-size: .92rem; }
.dica[open] summary { margin-bottom: 4px; }
.hash {
    display: block; font-family: ui-monospace, Consolas, monospace; font-size: .78rem; word-break: break-all;
    background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; color: var(--texto);
}

.titulo-secao { font-size: 1.1rem; font-weight: 600; margin: 24px 0 8px; padding-top: 18px; border-top: 1px solid var(--borda); }
.vazio { color: var(--suave); margin: 0; }

.computadores { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.computadores li {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px;
}
.computadores li div { display: grid; }

.selo-status { white-space: nowrap; font-size: .82rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.selo-status.pendente { color: var(--aviso); background: var(--aviso-fundo); }
.selo-status.autorizada { color: var(--ok); background: var(--ok-fundo); }
.selo-status.revogada { color: var(--erro); background: var(--erro-fundo); }

/* ---------- centralização segura ----------
   Com "center" puro, conteúdo mais alto que a janela fica com um vão no topo (e parte inacessível).
   "safe center" centraliza só quando cabe; se não couber, alinha ao topo. */
.conteudo { justify-content: safe center; }

/* ---------- página aberta dentro do app da bandeja (/login?desafio=...) ---------- */
body.embutido .conteudo { justify-content: flex-start; padding: 18px 16px 16px; gap: 14px; }
body.embutido .topo-compacto img { width: 168px; }
body.embutido .rodape { display: none; }
body.embutido .cartao { padding: 24px 22px 22px; box-shadow: none; }
body.embutido .cartao::before { margin: -24px -22px 22px; }
body.embutido h1 { font-size: 1.4rem; }
body.embutido .sub { margin-bottom: 14px; }
@media (min-width: 900px) {
    /* na bandeja a janela é estreita; se alguém abrir o link com desafio num navegador largo, mantém compacto */
    body.embutido .painel-marca { display: none; }
    body.embutido .topo-compacto { display: block; }
}