:root {
    --marrom-escuro: #5f3f2e;
    --marrom-principal: #7b5138;
    --marrom-claro: #a97c5f;
    --dourado: #c6a064;
    --bege-fundo: #f6f1ea;
    --bege-claro: #eee5dc;
    --bege-medio: #ded0c2;
    --branco: #ffffff;
    --texto-principal: #332b27;
    --texto-secundario: #746a64;
    --verde-sucesso: #52735d;
    --vermelho-erro: #9d4d4d;
    --sombra-suave: 0 10px 30px rgba(95, 63, 46, 0.10);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--texto-principal);
    background: linear-gradient(135deg, #5f3f2e, #c6a064);
}

.tela-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px 16px;
}

.caixa-login {
    width: min(100%, 400px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 40px 36px 32px;
    border-radius: 22px;
    background: var(--branco);
    box-shadow: 0 20px 60px rgba(51, 43, 39, 0.25);
}

.caixa-login.larga {
    width: min(100%, 460px);
}

.logo-login {
    display: block;
    width: 220px;
    height: auto;
    margin: 0 auto 8px;
    background: transparent;
}

.caixa-login h1 {
    color: var(--marrom-escuro);
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.caixa-login h1::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    margin: 10px auto 0;
    border-radius: 99px;
    background: var(--dourado);
}

.caixa-login p,
.caixa-login .lead {
    color: var(--texto-secundario);
    text-align: center;
    font-size: 13px;
    line-height: 1.55;
}

.caixa-login .lead {
    margin: 0;
}

.caixa-login form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.caixa-login label {
    color: var(--marrom-escuro);
    font-size: 13px;
    font-weight: 600;
}

.caixa-login input:not([type="hidden"]):not([type="checkbox"]),
.caixa-login textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--bege-medio);
    border-radius: 10px;
    color: var(--texto-principal);
    font-size: 14px;
    font-family: inherit;
    background: var(--branco);
}

.caixa-login input:not([type="hidden"]):not([type="checkbox"]):focus,
.caixa-login textarea:focus {
    outline: none;
    border-color: var(--dourado);
    box-shadow: 0 0 0 3px rgba(198, 160, 100, 0.18);
}

.caixa-login textarea {
    min-height: 96px;
    resize: vertical;
}

.acoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.botao-principal,
.botao-secundario,
.botao-perigo {
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.botao-principal {
    background: linear-gradient(135deg, var(--marrom-principal), var(--marrom-escuro));
    color: var(--branco);
}

.botao-principal:hover {
    background: linear-gradient(135deg, var(--marrom-claro), var(--marrom-principal));
}

.botao-secundario {
    background: var(--bege-claro);
    color: var(--marrom-escuro);
}

.botao-secundario:hover {
    background: var(--bege-medio);
}

.botao-perigo {
    background: transparent;
    color: var(--vermelho-erro);
    border: 1px solid #e2c8c8;
}

.botao-perigo:hover {
    background: var(--vermelho-erro);
    color: var(--branco);
    border-color: var(--vermelho-erro);
}

.caixa-login small,
.caixa-login .nota {
    color: var(--texto-secundario);
    text-align: center;
    font-size: 12px;
}

.caixa-login a {
    color: var(--marrom-principal);
    font-weight: 600;
    text-decoration: none;
}

.caixa-login a:hover {
    text-decoration: underline;
}

.chave-box {
    margin: 0;
    padding: 14px 16px;
    background: var(--bege-fundo);
    border: 1px solid var(--bege-medio);
    border-radius: 12px;
    word-break: break-all;
    white-space: pre-wrap;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    color: var(--marrom-escuro);
    text-align: left;
}

.erro-login {
    color: var(--vermelho-erro);
    font-size: 13px;
    text-align: center;
    white-space: pre-wrap;
    background: #f8eaea;
    border-radius: 10px;
    padding: 10px 12px;
    line-height: 1.45;
}

.ok-login {
    color: var(--verde-sucesso) !important;
    font-weight: 600;
}

.aviso-login {
    color: var(--verde-sucesso);
    background: #e8f0ea;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    text-align: center;
}

.check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px 14px;
    border: 1px solid var(--bege-medio);
    border-radius: 12px;
    background: var(--bege-fundo);
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.5;
    color: var(--texto-principal) !important;
    cursor: pointer;
}

.check input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex: none;
    accent-color: var(--marrom-principal);
}

.check span {
    text-align: left;
}

.timer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #f4ead6;
    border: 1px solid var(--dourado);
    color: var(--marrom-escuro);
    font-weight: 600;
    font-size: 13px;
}

.timer.urgente {
    background: #f8eaea;
    border-color: var(--vermelho-erro);
    color: var(--vermelho-erro);
}

.timer strong {
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}

.bloco-pcs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bloco-pcs > p {
    text-align: center;
    font-size: 13px;
}

.lista-pcs {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lista-pcs li {
    padding: 10px 12px;
    background: var(--bege-fundo);
    border-radius: 10px;
    color: var(--texto-secundario);
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
}

.lista-pcs strong {
    color: var(--marrom-escuro);
    font-weight: 600;
}

@media (max-width: 480px) {
    .caixa-login,
    .caixa-login.larga {
        width: 100%;
        padding: 28px 20px 22px;
        border-radius: 18px;
    }
}