/* ============================================================
   Tela de autenticação — Mão de Obra Rural
   Mesmos tokens do design system (_boot/css/mdo.css), repetidos
   aqui para o login não depender do CSS do shell autenticado.
   ============================================================ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
    --mdo-bg: #f4f7f1;
    --mdo-accent: #038330;
    --mdo-accent-dark: #026625;
    --mdo-accent-texto: #038330;   /* o verde ESCRITO — ver a nota no mdo.css */
    --mdo-border: #e6ece6;
    --mdo-muted: #5f6b62;
    --mdo-text: #26322b;
    --mdo-superficie: #fff;
    --mdo-campo-bg: #fff;
    --mdo-campo-off: #f6f9f4;
    --mdo-perigo-suave: #fdecec;  --mdo-perigo-texto: #a12622;
    --mdo-ambar-suave:  #fff6e2;  --mdo-ambar-texto:  #8a6100;
    --mdo-lima-suave:   #f2f9dd;  --mdo-lima-texto:   #55780a;
    --mdo-sombra-card: 0 12px 40px rgba(16, 24, 40, .10);
    --mdo-font: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system,
                BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------
   TEMA ESCURO NO LOGIN

   Ele não tem botão de trocar, e não é esquecimento: o seletor vive na
   topbar, que só existe depois de entrar. Aqui a preferência é LIDA — do
   que ficou guardado da última sessão, ou do sistema operacional em quem
   nunca escolheu. Quem trocou para escuro ontem não é recebido hoje com
   uma tela branca de 420px no escuro do quarto.

   O `data-tema` vem do mesmo script de antes da primeira pintura que o
   shell usa; aqui ele mora no <head> do login.php.
   ------------------------------------------------------------------ */
@media screen {
    html[data-tema="escuro"] {
        color-scheme: dark;
        --mdo-bg: #101511;
        --mdo-accent-texto: #4cbf74;
        --mdo-border: #2c382f;
        --mdo-muted: #9daba1;
        --mdo-text: #dbe4dd;
        --mdo-superficie: #19211b;
        --mdo-campo-bg: #141c17;
        --mdo-campo-off: #1a211c;
        --mdo-perigo-suave: #3a1a1a;  --mdo-perigo-texto: #ff8f87;
        --mdo-ambar-suave:  #3a2c10;  --mdo-ambar-texto:  #f2b950;
        --mdo-lima-suave:   #2a3307;  --mdo-lima-texto:   #b9e04a;
        --mdo-sombra-card: 0 12px 44px rgba(0,0,0,.6);
    }
    /* O cartão é a única superfície da tela, então ele não pode confiar na
       sombra para se separar do fundo — no escuro ela quase não aparece. */
    html[data-tema="escuro"] .mdo-login-card { border-color: var(--mdo-border); }
    /* O degradê da marca ficava lavado por cima do fundo fundo: as duas
       manchas sobem de opacidade e a segunda perde o ciano, que ao lado do
       verde-mata puxava a tela para o azul. */
    html[data-tema="escuro"] body.mdo-login-body {
        background-image:
            radial-gradient(1100px 520px at 12% -12%, rgba(3, 131, 48, .26), transparent 62%),
            radial-gradient(900px 460px at 105% 108%, rgba(144, 196, 3, .10), transparent 60%);
    }
    html[data-tema="escuro"] .mdo-login-card .form-control {
        background-color: var(--mdo-campo-bg);
        color: var(--mdo-text);
    }
    html[data-tema="escuro"] .mdo-login-card .form-control::placeholder { color: #7b8a80; }
}

body.mdo-login-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--mdo-font);
    color: var(--mdo-text);
    background: var(--mdo-bg);
    /* Degradê discreto puxando para o azul da marca */
    background-image:
        radial-gradient(1100px 520px at 12% -12%, rgba(3, 131, 48, .16), transparent 62%),
        radial-gradient(900px 460px at 105% 108%, rgba(28, 200, 138, .12), transparent 60%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mdo-login-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
}

.mdo-login-card {
    width: 100%;
    max-width: 420px;
    background: var(--mdo-superficie);
    border: 1px solid var(--mdo-border);
    border-radius: 16px;
    box-shadow: var(--mdo-sombra-card);
    padding: 30px 30px 26px;
}

/* ---------- Marca ---------- */
.mdo-login-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
}
.mdo-login-brand .brand-ico {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--mdo-accent);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 6px 16px rgba(3, 131, 48, .35);
}
.mdo-login-brand .brand-nome {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.2px;
    line-height: 1.15;
}
.mdo-login-brand .brand-sub {
    font-size: 12.5px;
    color: var(--mdo-muted);
    line-height: 1.3;
}

/* ---------- Texto auxiliar ---------- */
.mdo-login-texto {
    font-size: 14px;
    color: var(--mdo-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* ---------- Formulário ---------- */
.mdo-login-card label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mdo-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 5px;
}
.mdo-login-card .form-control {
    height: 46px;
    border-radius: 9px;
    border-color: var(--mdo-border);
    font-size: 15px;
    color: var(--mdo-text);
}
.mdo-login-card .form-control:focus {
    border-color: var(--mdo-accent-texto);
    box-shadow: 0 0 0 3px rgba(3, 131, 48, .16);
}
.mdo-login-card .form-control:disabled {
    background: var(--mdo-campo-off);
}
.mdo-login-card .form-text {
    font-size: 12px;
    line-height: 1.45;
    margin-top: 6px;
}

.mdo-btn {
    height: 46px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 15px;
    background: var(--mdo-accent);
    border-color: var(--mdo-accent);
    margin-top: 6px;
    transition: background .15s ease;
}
.mdo-btn:hover:not(:disabled),
.mdo-btn:focus:not(:disabled) {
    background: var(--mdo-accent-dark);
    border-color: var(--mdo-accent-dark);
}

/* ---------- Mostrar/ocultar senha ---------- */
.mdo-pwd { position: relative; }
.mdo-pwd .form-control { padding-right: 44px; }
.mdo-pwd-toggle {
    position: absolute;
    top: 0; right: 0;
    width: 44px; height: 46px;
    border: 0; background: transparent;
    color: var(--mdo-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.mdo-pwd-toggle:hover { color: var(--mdo-accent-texto); }

/* ---------- Links e alertas ---------- */
.mdo-login-links {
    margin-top: 18px;
    text-align: center;
    font-size: 13.5px;
}
.mdo-login-links a {
    color: var(--mdo-accent-texto);
    font-weight: 500;
    text-decoration: none;
}
.mdo-login-links a:hover { text-decoration: underline; }

.mdo-login-card .alert {
    border: 0;
    border-radius: 9px;
    font-size: 13.5px;
    line-height: 1.5;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
/* `> i` e não `i`: o ícone do LINK de suporte é descendente do alerta também,
   e a regra solta o transformava em item de flex com margem própria. */
.mdo-login-card .alert > i { margin-top: 2px; flex: 0 0 auto; font-size: 15px; }

/* O CORPO DO AVISO É UMA COLUNA, e o flex do alerta só existe para pôr o
   ícone AO LADO dela.

   Antes o link do suporte era filho direto do flex, então virava uma TERCEIRA
   COLUNA: num cartão de 420px, "Acesso bloqueado…" e "Falar com o suporte —
   (82) 9.9400-2260" repartiam a largura e as duas quebravam em quatro linhas
   cada, lado a lado. Com dois filhos — ícone e corpo — o que empilha empilha
   dentro do corpo, e a faixa volta a ser uma frase seguida de um link.

   `min-width: 0` é o que deixa o texto QUEBRAR: item de flex tem largura
   mínima automática igual à da maior palavra, e sem isto um telefone ou uma
   razão social longa empurrariam a faixa para fora do cartão no celular. */
.mdo-login-card .alert-corpo { flex: 1 1 auto; min-width: 0; }

.mdo-login-card .alert-suporte {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;      /* em 320px o número desce inteiro, sem partir ao meio */
    gap: 6px;
    margin-top: 8px;
    font-weight: 600;
    text-decoration: underline;
}
.mdo-login-card .alert-suporte:hover { text-decoration: none; }
.mdo-login-card .alert-danger  { background: var(--mdo-perigo-suave); color: var(--mdo-perigo-texto); }
.mdo-login-card .alert-warning { background: var(--mdo-ambar-suave); color: var(--mdo-ambar-texto); }
.mdo-login-card .alert-success { background: var(--mdo-lima-suave); color: var(--mdo-lima-texto); }

.mdo-login-rodape {
    margin-top: 20px;
    font-size: 12.5px;
    color: var(--mdo-muted);
}

@media (max-width: 480px) {
    .mdo-login-card { padding: 24px 20px 22px; border-radius: 14px; }
}