/* =======================================================
   css/acesso_empresa.css — telas de ENTRADA e CADASTRO da empresa
   (portal_empresa.php e cadastro_empresa.php). Redesenho de 25/09/2026.

   Tela dividida: à esquerda o painel da marca (o que a empresa ganha), à
   direita o formulário. No celular o painel vira uma faixa curta no topo e o
   formulário vem logo abaixo — a pessoa não rola para achar o campo.

   Não é o css/styles.css (esse serve 15 páginas do site institucional).
======================================================= */
:root{
    --verde:#155B43; --verde-esc:#0E3E2D; --verde-noite:#0A2E21; --verde-claro:#EDF6F1; --verde-borda:#CFE6DA;
    --laranja:#F37A12; --laranja-esc:#C25F08; --laranja-claro:#FFF3E4;
    --fundo:#F6F8F7; --papel:#FFFFFF; --borda:#DDE6E1; --borda-forte:#C9D6CF;
    --texto:#14211B; --muted:#5A6962; --suave:#8A9A92;
    --ok:#0F7A4E; --erro:#B42318; --erro-bg:#FEF3F2; --erro-bd:#FECDCA; --ok-bg:#ECFDF3; --ok-bd:#ABEFC6;
    --raio:14px; --raio-campo:11px;
    --sombra:0 1px 2px rgba(16,40,30,.05), 0 12px 32px -8px rgba(16,40,30,.14);
    --fonte:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body.acesso{font-family:var(--fonte);color:var(--texto);background:var(--fundo);line-height:1.55;
    -webkit-font-smoothing:antialiased}
.acesso-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(380px,46%) 1fr}

/* ---------------- painel da marca ---------------- */
.marca{position:relative;overflow:hidden;color:#fff;padding:44px 56px 36px;display:flex;flex-direction:column;
    background:
      radial-gradient(900px 480px at -10% -10%, rgba(243,122,18,.22), transparent 60%),
      radial-gradient(700px 520px at 110% 110%, rgba(255,255,255,.08), transparent 60%),
      linear-gradient(155deg, var(--verde-noite) 0%, var(--verde) 58%, #1C6E52 100%)}
/* Engrenagem da marca, em traço, ao fundo — identidade sem poluir. */
.marca::after{content:"";position:absolute;right:-120px;bottom:-120px;width:520px;height:520px;opacity:.07;pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='.6'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") no-repeat center/contain}
.marca-logo img{height:40px;display:block}
.marca-corpo{position:relative;z-index:1;margin:auto 0;max-width:480px;padding:40px 0}
.marca-selo{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(4px);border-radius:999px;padding:7px 16px 7px 8px;font-size:.88rem;font-weight:600;margin-bottom:26px}
.marca-selo b{display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:999px;background:var(--laranja);
    color:#1D1206;font-size:1.05rem;font-weight:800}
.marca-titulo{font-size:clamp(1.7rem,2.6vw,2.35rem);line-height:1.18;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
.marca-titulo em{font-style:normal;color:#FFC58F}
.marca-sub{color:rgba(255,255,255,.78);font-size:1rem;margin:0 0 30px;max-width:44ch}
.marca-lista{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.marca-lista li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.marca-lista .ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.marca-lista .ico svg{width:20px;height:20px;stroke:#FFD2A8}
.marca-lista b{display:block;font-size:.96rem;font-weight:700}
.marca-lista span{display:block;font-size:.86rem;color:rgba(255,255,255,.72);line-height:1.45}
/* A direita: o botao flutuante "Inicio" (includes/botao_home.php) fica no canto esquerdo. */
.marca-rodape{position:relative;z-index:1;font-size:.78rem;color:rgba(255,255,255,.55);margin:0;text-align:right}

/* ---------------- lado do formulário ---------------- */
.painel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px 70px}
.painel-logo{display:none}
.cartao{width:100%;max-width:460px;background:var(--papel);border:1px solid var(--borda);border-radius:20px;
    box-shadow:var(--sombra);padding:32px 34px 30px}
.abas{display:grid;grid-template-columns:1fr 1fr;background:#EEF3F0;border-radius:12px;padding:4px;margin:0 0 26px}
.abas a{text-align:center;text-decoration:none;font-weight:700;font-size:.9rem;color:var(--muted);padding:10px 8px;border-radius:9px;
    transition:background .15s,color .15s}
.abas a:hover{color:var(--verde)}
.abas a.ativa{background:#fff;color:var(--verde);box-shadow:0 1px 3px rgba(16,40,30,.12)}
.abas a:focus-visible{outline:2px solid var(--verde);outline-offset:2px}

.cartao h2{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;margin:0 0 6px;color:var(--texto)}
.cartao .sub{color:var(--muted);font-size:.93rem;margin:0 0 24px}

/* etapas */
.passos{display:flex;align-items:center;gap:10px;margin:0 0 22px;font-size:.78rem;font-weight:600}
.passo{display:flex;align-items:center;gap:8px;color:var(--suave)}
.passo .bolha{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--borda-forte);
    background:#fff;font-size:.72rem;font-weight:800;color:var(--suave);transition:all .2s}
.passo.atual{color:var(--verde)}
.passo.atual .bolha{border-color:var(--verde);color:var(--verde);box-shadow:0 0 0 4px var(--verde-claro)}
.passo.feito{color:var(--verde)}
.passo.feito .bolha{background:var(--verde);border-color:var(--verde);color:#fff}
.passos .traco{flex:1;height:2px;border-radius:2px;background:var(--borda)}
.passos .traco.cheio{background:var(--verde)}

/* campos */
.campo{margin-bottom:18px}
.campo label{display:block;font-size:.84rem;font-weight:700;margin-bottom:7px;color:var(--texto)}
.campo label .opc{font-weight:500;color:var(--suave)}
.caixa{position:relative}
.caixa > svg.ico-campo{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;stroke:var(--suave);pointer-events:none;transition:stroke .15s}
.caixa input{width:100%;height:50px;padding:0 14px 0 44px;border:1.5px solid var(--borda);border-radius:var(--raio-campo);
    font:inherit;font-size:1rem;color:var(--texto);background:#fff;transition:border-color .15s,box-shadow .15s}
.caixa input::placeholder{color:#A6B3AC}
.caixa input:hover{border-color:var(--borda-forte)}
.caixa input:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 4px rgba(21,91,67,.12)}
.caixa:focus-within > svg.ico-campo{stroke:var(--verde)}
.caixa input[aria-invalid="true"]{border-color:var(--erro);box-shadow:0 0 0 4px rgba(180,35,24,.08)}
.caixa.com-olho input{padding-right:52px}
.olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:none;
    border-radius:9px;cursor:pointer;display:grid;place-items:center;color:var(--suave)}
.olho svg{width:20px;height:20px;stroke:currentColor}
.olho:hover{background:var(--verde-claro);color:var(--verde)}
.olho:focus-visible{outline:2px solid var(--verde);outline-offset:1px}
.ajuda{font-size:.8rem;color:var(--muted);margin-top:7px}
.aviso-campo{font-size:.8rem;margin-top:7px;display:none;align-items:center;gap:6px}
.aviso-campo.ver{display:flex}
.aviso-campo.ruim{color:var(--erro)}
.aviso-campo.bom{color:var(--ok)}
.aviso-campo.info{color:#8A5A00}
.erro-campo{font-size:.8rem;color:var(--erro);margin-top:7px;display:none}
.erro-campo.ver{display:block}

/* força da senha */
.forca{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:9px}
.forca i{height:4px;border-radius:4px;background:var(--borda);transition:background .2s}
.forca[data-n="1"] i:nth-child(-n+1){background:#E5484D}
.forca[data-n="2"] i:nth-child(-n+2){background:#F5A524}
.forca[data-n="3"] i:nth-child(-n+3){background:#46A758}
.forca[data-n="4"] i{background:var(--ok)}
.forca-txt{font-size:.78rem;color:var(--muted);margin-top:5px;min-height:1.1em}

/* botões */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;padding:0 20px;
    border:0;border-radius:12px;cursor:pointer;font:inherit;font-weight:800;font-size:1rem;text-decoration:none;
    transition:background .18s,transform .12s,box-shadow .18s}
.btn svg{width:19px;height:19px;stroke:currentColor;transition:transform .18s}
.btn:hover svg.seta{transform:translateX(3px)}
/* Laranja da marca com texto ESCURO: branco sobre esse laranja reprova no WCAG AA. */
.btn-acao{background:var(--laranja);color:#1D1206;box-shadow:0 6px 16px -6px rgba(243,122,18,.55)}
.btn-acao:hover{background:#E86E08}
.btn-acao:active{transform:translateY(1px)}
.btn-verde{background:var(--verde);color:#fff}
.btn-verde:hover{background:var(--verde-esc)}
.btn-contorno{background:#fff;color:var(--verde);border:1.5px solid var(--borda-forte)}
.btn-contorno:hover{border-color:var(--verde);background:var(--verde-claro)}
.btn:focus-visible{outline:3px solid var(--verde);outline-offset:3px}
.btn.carregando{pointer-events:none;color:transparent}
.btn.carregando::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;
    border:2.5px solid rgba(29,18,6,.25);border-top-color:#1D1206;animation:gira .7s linear infinite}
.btn-verde.carregando::after{border-color:rgba(255,255,255,.3);border-top-color:#fff}
@keyframes gira{to{transform:rotate(360deg)}}

.linha-links{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.link{background:none;border:0;padding:4px 0;font:inherit;font-size:.88rem;font-weight:600;color:var(--verde);cursor:pointer;text-decoration:none}
.link:hover{text-decoration:underline}
.link.cinza{color:var(--muted);font-weight:500}
.link:focus-visible{outline:2px solid var(--verde);outline-offset:2px;border-radius:4px}

.separador{display:flex;align-items:center;gap:12px;color:var(--suave);font-size:.8rem;margin:22px 0}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--borda)}

/* alertas */
.alerta{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:12px;margin:0 0 20px;font-size:.9rem;line-height:1.5}
.alerta svg{flex:none;width:19px;height:19px;margin-top:1px}
.alerta-erro{background:var(--erro-bg);border:1px solid var(--erro-bd);color:#912018}
.alerta-erro svg{stroke:#D92D20}
.alerta-ok{background:var(--ok-bg);border:1px solid var(--ok-bd);color:#085D3A}
.alerta-ok svg{stroke:#079455}

/* empresa identificada */
.empresa-id{display:flex;align-items:center;gap:12px;background:var(--verde-claro);border:1px solid var(--verde-borda);
    border-radius:12px;padding:12px 14px;margin:0 0 22px}
.empresa-id .av{flex:none;width:40px;height:40px;border-radius:10px;background:var(--verde);color:#fff;display:grid;place-items:center;
    font-weight:800;font-size:1rem}
.empresa-id .nm{min-width:0;flex:1}
.empresa-id .nm small{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.empresa-id .nm b{display:block;color:var(--verde-esc);font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empresa-id a{flex:none;font-size:.82rem;font-weight:700;color:var(--verde);text-decoration:none;padding:6px 10px;border-radius:8px}
.empresa-id a:hover{background:#fff}

/* bloco "não lembro o CNPJ" */
.por-email{border:1px solid var(--borda);border-radius:12px;padding:0;margin-top:20px;background:#FBFCFB}
.por-email summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:700;font-size:.88rem;color:var(--verde);
    display:flex;align-items:center;justify-content:space-between;gap:10px}
.por-email summary::-webkit-details-marker{display:none}
.por-email summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.por-email[open] summary::after{transform:rotate(-135deg)}
.por-email .dentro{padding:0 16px 16px}
.por-email .dentro p{font-size:.86rem;color:var(--muted);margin:0 0 14px}

/* estado "link enviado" */
.enviado{text-align:center;padding:6px 0 4px}
.enviado .circ{width:64px;height:64px;border-radius:50%;background:var(--verde-claro);display:grid;place-items:center;margin:0 auto 16px}
.enviado .circ svg{width:30px;height:30px;stroke:var(--verde)}

.nota-segura{display:flex;align-items:center;gap:8px;justify-content:center;color:var(--muted);font-size:.8rem;margin-top:18px;text-align:center}
.nota-segura svg{width:15px;height:15px;stroke:var(--ok);flex:none}
.convite{margin-top:20px;text-align:center;font-size:.9rem;color:var(--muted)}
.convite a{color:var(--verde);font-weight:800;text-decoration:none}
.convite a:hover{text-decoration:underline}

.etapa[hidden]{display:none}
.etapa.entra{animation:entra .28s ease-out}
@keyframes entra{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.acoes{display:flex;gap:12px;align-items:center;margin-top:8px}
.acoes .btn-contorno{width:auto;flex:0 0 auto}

/* ---------------- celular e tablet ---------------- */
@media (max-width:980px){
    .acesso-wrap{grid-template-columns:1fr;min-height:auto}
    .marca{padding:22px 20px 26px}
    .marca::after{width:300px;height:300px;right:-90px;bottom:-110px}
    .marca-corpo{margin:0;padding:18px 0 0}
    .marca-logo img{height:32px}
    .marca-titulo{font-size:1.35rem;margin-bottom:6px}
    .marca-sub{font-size:.9rem;margin:0}
    .marca-selo{margin-bottom:14px;font-size:.82rem}
    .marca-lista,.marca-rodape{display:none}
    .painel{padding:0 14px 60px;justify-content:flex-start}
    .cartao{margin-top:-14px;padding:24px 20px 24px;border-radius:18px}
}
@media (max-width:420px){
    .cartao h2{font-size:1.28rem}
    .acoes{flex-direction:column-reverse}
    .acoes .btn-contorno{width:100%}
}
@media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
}