:root {
    --mata: #0F2B2A;          /* fundo do painel, igual à sidebar do sistema */
    --mata-linha: #2A4B48;    /* divisas de lote */
    --folha: #8CB83E;         /* verde do logo RGPI: regularizado */
    --verde: #1E7F4E;         /* ações */
    --verde-escuro: #166640;
    --azul: #4A8BE8;          /* em processo */
    --ambar: #E8A33A;         /* com pendência */
    --cinza-st: #8A9A98;      /* não iniciado */
    --grafite: #2F3437;
    --texto-2: #5D6668;
    --borda: #CCD5D3;
    --papel: #F4F6F5;
    --branco: #FFFFFF;
    --erro: #B42318;
    --erro-fundo: #FDECEA;
    --aviso-fundo: #FFF5E1;
    --ok-fundo: #E7F4EC;

    --f-titulo: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
    --f-texto: 'Barlow', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--branco);
    color: var(--grafite);
    font-family: var(--f-texto);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.login {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(400px, 1fr);
    min-height: 100vh;
}

/* ---------- Planta cadastral ---------- */

.planta {
    position: relative;
    overflow: hidden;
    background: var(--mata);
    color: var(--branco);
}

.planta-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.lotes polygon,
.lotes-status polygon {
    stroke: var(--mata-linha);
    stroke-width: 1.5;
    stroke-linejoin: round;
}
.lotes polygon { fill: transparent; }

.lotes-status polygon {
    fill-opacity: .26;
    stroke-opacity: 1;
    animation: preenche .7s ease-out both;
    animation-delay: calc(900ms + var(--d) * 110ms);
}
.lotes-status .st-regular  { fill: var(--folha); stroke: var(--folha); }
.lotes-status .st-processo { fill: var(--azul);  stroke: var(--azul); }
.lotes-status .st-pendente { fill: var(--ambar); stroke: var(--ambar); }
.lotes-status .st-inicio   { fill: url(#hachura); stroke: var(--cinza-st); fill-opacity: 1; }
.hachura-linha { stroke: var(--cinza-st); stroke-width: 1.2; opacity: .5; }

.faixa-area { fill: var(--branco); opacity: .07; animation: aparece .6s ease-out .5s both; }
.faixa-borda {
    stroke: var(--branco);
    stroke-width: 1.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: desenha 1.1s cubic-bezier(.6, 0, .3, 1) .1s forwards;
}
.faixa-eixo {
    stroke: var(--branco);
    stroke-width: 1;
    stroke-dasharray: 14 6 3 6;
    opacity: .45;
    animation: aparece .6s ease-out .9s both;
}

.torres rect { fill: var(--mata); stroke: var(--branco); stroke-width: 1.5; }
.torres path { stroke: var(--branco); stroke-width: 1; }
.torres { animation: aparece .5s ease-out 1s both; }

.vertices circle { fill: var(--mata); stroke: var(--folha); stroke-width: 1.5; }

.rotulos text {
    font-family: var(--f-titulo);
    font-size: 13px;
    font-weight: 600;
    fill: var(--branco);
    font-variant-numeric: tabular-nums;
}
.rotulos .coord { font-weight: 500; font-size: 11.5px; fill: #A9BDBA; }
.rotulos .matricula { font-weight: 500; font-size: 12px; fill: #D5E2E0; }

.norte path { fill: var(--branco); opacity: .85; }
.norte text { fill: var(--branco); font-family: var(--f-titulo); font-weight: 700; font-size: 14px; text-anchor: middle; }

.planta-texto {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 140px 56px 48px;
    background: linear-gradient(to top, var(--mata) 45%, rgba(15, 43, 42, 0));
}

.planta-titulo {
    margin: 0 0 12px;
    max-width: 21ch;
    font-family: var(--f-titulo);
    font-weight: 700;
    font-size: clamp(2.25rem, 3.6vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: -.01em;
}

.planta-sub {
    margin: 0 0 28px;
    max-width: 44ch;
    color: #C3D2D0;
    font-size: 1.0625rem;
}

.legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
    color: #DCE6E4;
}
.legenda li { display: flex; align-items: center; gap: 8px; }
.legenda .cor { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid; }
.legenda .st-regular  { background: rgba(140, 184, 62, .35); border-color: var(--folha); }
.legenda .st-processo { background: rgba(74, 139, 232, .35); border-color: var(--azul); }
.legenda .st-pendente { background: rgba(232, 163, 58, .35); border-color: var(--ambar); }
.legenda .st-inicio   { background: repeating-linear-gradient(45deg, rgba(138,154,152,.6) 0 1.5px, transparent 1.5px 5px); border-color: var(--cinza-st); }

/* ---------- Formulário ---------- */

.acesso {
    display: flex;
    flex-direction: column;
    padding: 40px clamp(24px, 6vw, 88px) 32px;
    background: var(--branco);
}

.acesso-conteudo {
    width: 100%;
    max-width: 380px;
    margin: auto 0;
    padding: 48px 0;
}

/* Logo centralizado sobre o formulário. O PNG é recortado rente ao desenho,
   então as margens daqui são as margens reais. */
.logo {
    display: block;
    width: 200px;
    height: auto;
    margin: 0 auto 40px;
}

h1 {
    margin: 0 0 6px;
    font-family: var(--f-titulo);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--mata);
    text-align: center;
}

.acesso-intro {
    margin: 0 0 32px;
    text-align: center;
    color: var(--texto-2);
}

.campo { margin-bottom: 20px; }

.campo label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: .9375rem;
}

.campo input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--borda);
    border-radius: 8px;
    background: var(--branco);
    color: var(--grafite);
    font: inherit;
    transition: border-color .15s;
}
.campo input:hover { border-color: #A7B4B1; }
.campo input:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(30, 127, 78, .2);
}
.campo input[aria-invalid="true"] { border-color: var(--erro); }

.campo-erro {
    margin: 6px 0 0;
    color: var(--erro);
    font-size: .875rem;
}

.senha { position: relative; }
.senha input { padding-right: 52px; }

.senha-ver {
    position: absolute;
    top: 4px; right: 4px;
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--texto-2);
    cursor: pointer;
}
.senha-ver:hover { color: var(--grafite); background: var(--papel); }
.senha-ver svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.senha-ver[aria-pressed="false"] .risco { display: none; }

.linha-opcoes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 4px 0 28px;
    font-size: .9375rem;
}

.lembrar {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.lembrar input {
    width: 18px; height: 18px;
    margin: 0;
    accent-color: var(--verde);
}

.link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--verde);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.link:hover { text-decoration: underline; }

.esqueci-texto {
    margin: -12px 0 24px;
    padding: 12px 14px;
    border-left: 3px solid var(--folha);
    background: var(--papel);
    font-size: .9375rem;
    color: var(--texto-2);
}

.botao {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 8px;
    background: var(--verde);
    color: var(--branco);
    font-family: var(--f-titulo);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .15s;
}
.botao:hover { background: var(--verde-escuro); }
.botao:disabled { opacity: .75; cursor: progress; }

:focus-visible {
    outline: 3px solid var(--azul);
    outline-offset: 2px;
}
.campo input:focus-visible { outline: none; }

.alerta {
    margin: -12px 0 24px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: .9375rem;
    font-weight: 500;
}
.alerta-danger  { background: var(--erro-fundo); color: var(--erro); }
.alerta-warning { background: var(--aviso-fundo); color: #7A4B00; }
.alerta-success { background: var(--ok-fundo); color: var(--verde-escuro); }

.rodape {
    margin: 40px 0 0;
    color: #87908F;
    font-size: .8125rem;
}

/* ---------- Animações ---------- */

@keyframes desenha { to { stroke-dashoffset: 0; } }
@keyframes aparece { from { opacity: 0; } }
@keyframes preenche { from { fill-opacity: 0; stroke-opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .faixa-borda { stroke-dashoffset: 0; }
}

/* ---------- Telas menores ---------- */

@media (max-width: 900px) {
    .login { grid-template-columns: 1fr; }

    .planta { min-height: 260px; }
    .planta-texto { padding: 80px 24px 24px; }
    .planta-titulo { font-size: 1.75rem; max-width: 20ch; }
    .planta-sub, .legenda { display: none; }

    .acesso { padding: 32px 16px 24px; }
    .acesso-conteudo { margin: 0 auto; padding: 32px 0 0; }
    .logo { width: 168px; margin-bottom: 28px; }
}