/* RemoFlow — telas de acesso (login, primeiro acesso, seleção de empresa, Admin Geral).
   Páginas sem menu lateral e sem empresa definida: cor neutra do sistema, não a da empresa. */
:root {
  --primary: #1400FF; --primary-ink: #1400FF; --on-primary: #FFFFFF; --primary-dim: rgba(20, 0, 255, .08);
  --ink: #0F172A; --body: #334155; --label: #64748B; --muted: #94A3B8; --line: #E2E8F0; --bg: #F1F5F9;
}
* { font-family: 'Inter', system-ui, sans-serif; box-sizing: border-box; }
body.acesso { margin: 0; color: var(--body); background: var(--bg); min-height: 100vh; }

/* Marca */
.marca { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; color: var(--ink); }
.marca img { height: 40px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.marca .tag { font: 700 .62rem ui-monospace, monospace; letter-spacing: .1em; color: #475569; background: #fff; border: 1px solid #CBD5E1; border-radius: 5px; padding: 2px 7px; }

/* Cartão e formulário */
.acesso-centro { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: linear-gradient(160deg, #EEF0FF, #F1F5F9 55%); }
.acesso-col { width: 100%; max-width: 410px; display: flex; flex-direction: column; gap: 1.25rem; }
.cartao { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 2rem; display: flex; flex-direction: column; gap: 1.1rem; box-shadow: 0 24px 50px -30px rgba(15, 23, 42, .35); }
h1.t { margin: 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
p.s { margin: .3rem 0 0; color: var(--label); font-size: .92rem; }
.fld { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.fld label { font-size: .78rem; font-weight: 600; color: var(--label); }
.inp { position: relative; }
.inp input { width: 100%; border: 1px solid #CBD5E1; border-radius: 10px; padding: .7rem .85rem .7rem 2.4rem; font-size: .95rem; background: #fff; color: var(--ink); outline: 0; }
.inp input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.inp > i.ic { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.inp > button { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); padding: .3rem .5rem; }
.btn-entrar { width: 100%; border: 0; border-radius: 10px; padding: .8rem; background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: .95rem; display: flex; gap: .5rem; align-items: center; justify-content: center; }
.btn-entrar:hover { filter: brightness(.92); color: var(--on-primary); }
.aviso { display: flex; gap: .6rem; align-items: flex-start; border-radius: 10px; padding: .65rem .8rem; font-size: .85rem; border: 1px solid transparent; }
.aviso.danger { background: #FCE8E8; border-color: #F4C4C4; color: #991B1B; }
.aviso.warning { background: #FBF0E2; border-color: #EBCDA3; color: #7C4A03; }
.aviso.success { background: #E6F5EF; border-color: #B7E0CE; color: #065F46; }
.aviso.info { background: #EEF0FF; border-color: #C7D2FE; color: #312E81; }
.rodape { font-size: .75rem; color: var(--label); display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.rodape a { color: var(--label); }
.link-voltar { background: none; border: 0; padding: 0; font-size: .82rem; color: var(--label); text-decoration: none; cursor: pointer; }
.link-voltar:hover { color: var(--primary-ink); }

/* Login em duas colunas: painel de marca com o mapa do Brasil + formulário */
.acesso-dividido { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: #fff; }
.lado { background: #0B1226; color: #E2E8F0; position: relative; overflow: hidden; padding: 2.5rem 3rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; }
.lado::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 45% at 30% 30%, rgba(99, 102, 241, .26), transparent 70%), radial-gradient(50% 45% at 80% 85%, rgba(20, 0, 255, .22), transparent 70%); }
.lado .marca { color: #fff; position: relative; z-index: 2; }
.lado .txt { position: relative; z-index: 2; }
.lado h2 { margin: 0; font-weight: 800; font-size: 1.9rem; letter-spacing: -.02em; line-height: 1.15; max-width: 430px; color: #fff; }
.lado p { margin: .7rem 0 0; color: #94A3B8; max-width: 400px; }
.mapa { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: min(100%, calc(100vh * .72)); aspect-ratio: 72 / 70; z-index: 1; }
.mapa img, .mapa svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.mapa img { opacity: .30; -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 55%, transparent 98%); mask-image: radial-gradient(ellipse at 50% 48%, #000 55%, transparent 98%); }
.mapa .rota { fill: none; stroke: #818CF8; stroke-width: .32; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rota-desenha 6s ease-in-out infinite; }
@keyframes rota-desenha { 0% { stroke-dashoffset: 1; opacity: 1; } 35% { stroke-dashoffset: 0; opacity: 1; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.lado-form { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.lado-form .acesso-col { max-width: 370px; }
.lado-form .rodape { justify-content: flex-start; }
@media (max-width: 860px) { .acesso-dividido { grid-template-columns: 1fr; } .lado { display: none; } .lado-form { min-height: 100vh; } }
@media (prefers-reduced-motion: reduce) { .mapa .rota { animation: none; stroke-dashoffset: 0; } }

/* Seleção de empresa */
.emp { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; cursor: pointer; transition: .15s; }
.emp:hover { border-color: var(--primary); background: #F7F7FF; }
.emp .av { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-dim); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.emp b { display: block; color: var(--ink); font-size: .92rem; }
.emp small { color: var(--label); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.emp .go { margin-left: auto; color: var(--muted); }
@media (max-width: 575px) { .cartao { padding: 1.4rem; } }