/* =====================================================================
   painel/login.css — Login da empresa: duas colunas, fundo animado e
   cartão em vidro. Mesma linguagem visual da sidebar do painel.
   ===================================================================== */
:root{
    --cor-primaria:   #1c3316;
    --cor-secundaria: #7ba83c;
    --cor-destaque:   #a3c763;
    --tinta:          #e7e5d9;
    --radius:         12px;
    --trans:          .25s cubic-bezier(.4,0,.2,1);
}

*{ box-sizing:border-box; }

body.auth{
    margin:0;
    min-height:100vh;
    font-family:'Inter', 'Roboto', system-ui, sans-serif;
    color:var(--tinta);
    background:#0a1407;
    overflow-x:hidden;
}

/* ---------- Fundo animado ------------------------------------------ */
.auth-bg{ position:fixed; inset:0; overflow:hidden; z-index:0; }
.auth-bg::after{                       /* granulado sutil */
    content:''; position:absolute; inset:-50%;
    background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:3px 3px;
    opacity:.5;
}
.auth-bg .malha{                       /* grade em perspectiva */
    position:absolute; inset:auto 0 -10% 0; height:70%;
    background:
        linear-gradient(transparent 0 98%, rgba(163,199,99,.16) 98% 100%) 0 0/100% 46px,
        linear-gradient(90deg, transparent 0 98%, rgba(163,199,99,.13) 98% 100%) 0 0/46px 100%;
    transform:perspective(420px) rotateX(62deg);
    transform-origin:bottom center;
    -webkit-mask-image:linear-gradient(to top, #000, transparent 78%);
    mask-image:linear-gradient(to top, #000, transparent 78%);
    animation:malha 7s linear infinite;
}
@keyframes malha{ to{ background-position:0 46px, 46px 0; } }

.auth-bg .orbe{
    position:absolute; border-radius:50%;
    filter:blur(70px); opacity:.5;
    animation:flutua 16s ease-in-out infinite;
}
.orbe.o1{ width:520px; height:520px; top:-160px; left:-120px;
    background:radial-gradient(circle, #466b22, transparent 68%); }
.orbe.o2{ width:460px; height:460px; bottom:-180px; right:-80px;
    background:radial-gradient(circle, #7ba83c, transparent 68%); animation-delay:-5s; }
.orbe.o3{ width:380px; height:380px; top:38%; left:44%;
    background:radial-gradient(circle, #c9b86a, transparent 70%); opacity:.32; animation-delay:-9s; }
@keyframes flutua{
    0%,100%{ transform:translate3d(0,0,0)       scale(1);   }
    33%    { transform:translate3d(40px,-30px,0) scale(1.08); }
    66%    { transform:translate3d(-30px,25px,0) scale(.94);  }
}

/* ---------- Estrutura ---------------------------------------------- */
.auth-shell{
    position:relative; z-index:1;
    min-height:100vh;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:2rem;
    padding:2.5rem clamp(1.25rem, 5vw, 5rem);
    max-width:1280px;
    margin:0 auto;
}

/* ---------- Coluna da marca ---------------------------------------- */
.auth-hero{ animation:sobe .8s var(--trans) both; }
.hero-logo{
    display:inline-flex; align-items:center; gap:.85rem;
    padding:.55rem 1.05rem .55rem .6rem;
    border:1px solid rgba(170,178,150,.22);
    border-radius:999px;
    background:rgba(170,178,150,.08);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
}
.hero-logo .marca{
    width:40px; height:40px; display:grid; place-items:center;
    border-radius:12px;
    background:linear-gradient(140deg, var(--cor-destaque), #56802b);
    box-shadow:0 8px 24px rgba(123,168,60,.45);
}
.hero-logo .marca{ overflow:hidden; }
.hero-logo .marca .material-icons{ font-size:24px; color:#081206; }
.hero-logo .marca img{ width:100%; height:100%; object-fit:contain; padding:4px; background:#fff; }
.hero-logo b{ font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; }

.auth-hero h2{
    margin:2rem 0 0;
    font-size:clamp(2.1rem, 4.4vw, 3.35rem);
    line-height:1.08;
    font-weight:700;
    letter-spacing:-.02em;
    color:#f9f8f3;
}
.auth-hero h2 em{
    font-style:normal;
    background:linear-gradient(100deg, var(--cor-destaque), #c6d98f 60%, #e8dcae);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.auth-hero p.lead{
    margin:1.1rem 0 0; max-width:44ch;
    font-size:1.02rem; line-height:1.65; color:#a0a78f;
}

.hero-itens{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin:2.2rem 0 0; padding:0; }
.hero-itens li{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.5rem .9rem;
    font-size:.82rem; color:#d0d3c0;
    border:1px solid rgba(170,178,150,.2);
    border-radius:999px;
    background:rgba(18,28,14,.5);
    transition:transform var(--trans), border-color var(--trans), color var(--trans);
}
.hero-itens li:hover{ transform:translateY(-2px); border-color:rgba(163,199,99,.55); color:#fff; }
.hero-itens .material-icons{ font-size:18px; color:var(--cor-destaque); }

/* ---------- Cartão -------------------------------------------------- */
.auth-panel{ display:flex; justify-content:center; }
.auth-card{
    position:relative;
    width:100%; max-width:420px;
    padding:2.4rem 2.1rem 2.1rem;
    border-radius:22px;
    border:1px solid rgba(170,178,150,.18);
    background:linear-gradient(165deg, rgba(30,46,24,.92), rgba(12,22,9,.94));
    box-shadow:0 30px 70px -20px rgba(6,12,4,.9), inset 0 1px 0 rgba(255,255,255,.06);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    animation:sobe .8s .12s var(--trans) both;
}
.auth-card::before{                       /* fio de luz na borda superior */
    content:''; position:absolute; left:14%; right:14%; top:-1px; height:1px;
    background:linear-gradient(90deg, transparent, var(--cor-destaque), transparent);
}
.auth-card h1{ margin:0; font-size:1.5rem; color:#f9f8f3; letter-spacing:-.01em; }
.auth-card .sub{ margin:.4rem 0 1.8rem; font-size:.88rem; color:#a0a78f; }

/* ---------- Campos com rótulo flutuante ----------------------------- */
.field{ position:relative; margin-bottom:1.1rem; }
.field input{
    width:100%;
    height:56px;
    padding:1.35rem .95rem .5rem;
    font-size:.95rem; font-family:inherit;
    color:#f1f0e8;
    border:1.5px solid rgba(170,178,150,.24);
    border-radius:var(--radius);
    background:rgba(6,12,4,.5);
    transition:border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.field label{
    position:absolute; left:1rem; top:50%; transform:translateY(-50%);
    font-size:.95rem; color:#a0a78f; pointer-events:none;
    transition:all var(--trans);
}
.field input:focus{
    outline:none;
    border-color:var(--cor-destaque);
    background:rgba(6,12,4,.75);
    box-shadow:0 0 0 4px rgba(163,199,99,.16);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field input:-webkit-autofill + label,
.field.preenchido label{
    top:15px; transform:none;
    font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--cor-destaque);
}
/* Autofill: mantém o visual escuro e avisa o JS (evento animationstart). */
.field input:-webkit-autofill{
    -webkit-text-fill-color:#f1f0e8;
    -webkit-box-shadow:0 0 0 60px #16290f inset;
    box-shadow:0 0 0 60px #16290f inset;
    animation:autofill-on .01s;
}
@keyframes autofill-on{ from{} to{} }

.senha-wrap{ position:relative; }
.senha-wrap input{ padding-right:48px; }
.olho{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    display:grid; place-items:center;
    width:34px; height:34px;
    border:0; border-radius:8px;
    background:none; color:#6b725f; cursor:pointer;
    transition:color var(--trans), background var(--trans);
}
.olho:hover{ color:var(--cor-destaque); background:rgba(163,199,99,.12); }
.olho .material-icons{ font-size:20px; }

/* ---------- Botão --------------------------------------------------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:.85rem 1.2rem;
    border:none; border-radius:var(--radius);
    font-size:.95rem; font-weight:600; font-family:inherit;
    cursor:pointer;
}
.btn-primary{
    position:relative; overflow:hidden;
    color:#0b1a07;
    background:linear-gradient(100deg, var(--cor-destaque), #56802b);
    box-shadow:0 12px 28px -10px rgba(123,168,60,.75);
    transition:transform var(--trans), box-shadow var(--trans), filter var(--trans);
}
.btn-primary::after{                       /* brilho que percorre o botão */
    content:''; position:absolute; top:0; bottom:0; left:-60%;
    width:55%; transform:skewX(-20deg);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    animation:brilho 3.6s ease-in-out infinite;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(123,168,60,.9); }
.btn-primary:active{ transform:translateY(0); }
.btn-full{ width:100%; margin-top:.6rem; }
@keyframes brilho{ 0%,62%{ left:-60%; } 92%,100%{ left:130%; } }

/* estado "enviando" */
.carregando{ pointer-events:none; filter:saturate(.7); }
.carregando .rotor{
    width:16px; height:16px; border-radius:50%;
    border:2px solid rgba(10,24,7,.35); border-top-color:#0b1a07;
    animation:gira .7s linear infinite;
}
@keyframes gira{ to{ transform:rotate(360deg); } }

/* ---------- Mensagem de erro ---------------------------------------- */
.erro{
    display:flex; align-items:center; gap:.55rem;
    margin-bottom:1.25rem; padding:.75rem .95rem;
    font-size:.85rem; color:#fecaca;
    border:1px solid rgba(248,113,113,.35);
    border-radius:var(--radius);
    background:rgba(127,29,29,.28);
    animation:treme .45s ease;
}
.erro .material-icons{ font-size:19px; color:#f87171; }
@keyframes treme{
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-6px); } 40%{ transform:translateX(5px); }
    60%{ transform:translateX(-3px); } 80%{ transform:translateX(2px); }
}

/* ---------- Rodapé do cartão ---------------------------------------- */
.voltar{
    display:flex; align-items:center; justify-content:center; gap:.3rem;
    margin-top:1.7rem;
    font-size:.8rem; color:#6b725f; text-decoration:none;
    transition:color var(--trans);
}
.voltar:hover{ color:var(--cor-destaque); }
.voltar .material-icons{ font-size:16px; }

.auth-rodape{ margin-top:1.7rem; text-align:center; font-size:.72rem; color:#4f5745; }

@keyframes sobe{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* ---------- Responsivo ---------------------------------------------- */
@media (max-width:960px){
    .auth-shell{ grid-template-columns:1fr; gap:2.2rem; padding:2.5rem 1.25rem; }
    .auth-hero{ text-align:center; }
    .auth-hero p.lead{ margin-inline:auto; }
    .hero-itens{ justify-content:center; }
    .auth-hero h2{ font-size:clamp(1.8rem, 7vw, 2.4rem); }
}
@media (max-width:600px){
    .auth-hero p.lead, .hero-itens{ display:none; }
    .auth-hero h2{ margin-top:1.2rem; font-size:1.6rem; }
    .auth-card{ padding:1.9rem 1.4rem 1.6rem; }
}
@media (prefers-reduced-motion:reduce){
    *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* ---------- Atalho de desenvolvimento (só em localhost) ------------- */
.form-dev{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.btn-dev{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; color:#fbbf24;
  border:1px dashed rgba(251,191,36,.55);
  cursor:pointer; transition:background var(--trans), border-color var(--trans);
}
.btn-dev:hover{ background:rgba(251,191,36,.10); border-color:#fbbf24; }