/* Design System eFleet v4.0 — dark canvas. Tokens oficiais; espacamento em multiplos de 4px. */
:root {
  --efl-navy-900: #0B1929; --efl-navy-800: #0f1f33; --efl-navy-500: #245091; --efl-navy-400: #2d62b0; --efl-navy-300: #4a7fc8;
  --efl-green-500: #A4C557; --efl-green-400: #b8d368;
  --efl-red: #E84040;
  --efl-gray-100: #f0f2f5; --efl-gray-300: #b0bac8; --efl-gray-400: #8a96a8; --efl-gray-500: #606878; --efl-gray-800: #1a2535;
  --efl-font-head: 'Montserrat', sans-serif; --efl-font-body: 'Nunito', sans-serif;
  --efl-s1: 4px; --efl-s2: 8px; --efl-s3: 12px; --efl-s4: 16px; --efl-s6: 24px; --efl-s8: 32px;
  --efl-r-md: 8px; --efl-r-lg: 12px; --efl-r-pill: 999px;
  --efl-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--efl-navy-900); color: var(--efl-gray-100);
  font-family: var(--efl-font-body); -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1 { margin: 0 0 var(--efl-s2); font-family: var(--efl-font-head); font-size: 24px; font-weight: 800; color: #fff; line-height: 1.2; }
.apoio { margin: 0 0 var(--efl-s6); font-size: 14px; line-height: 1.5; color: var(--efl-gray-300); }
.apoio strong { color: #fff; }
.section-label {
  display: flex; align-items: center; gap: var(--efl-s2); margin: 0 0 var(--efl-s2);
  font-family: var(--efl-font-head); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--efl-green-500);
}
.section-label::before { content: ''; display: inline-block; width: 3px; height: 14px; background: var(--efl-green-500); border-radius: 2px; }

/* ---------- entrada (login e escolha) ---------- */
#entrada { margin: 8vh auto var(--efl-s8); }
.cartao {
  position: relative; width: calc(100% - 32px); max-width: 440px; padding: var(--efl-s8) var(--efl-s6);
  background: var(--efl-gray-800); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--efl-r-lg); box-shadow: var(--efl-shadow-md);
}
.logo { display: block; width: 140px; height: auto; margin: 0 0 var(--efl-s6); }
label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--efl-gray-400); }
input {
  width: 100%; margin: 0 0 var(--efl-s4); padding: 10px 14px; font-family: var(--efl-font-body); font-size: 16px; color: #fff;
  background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 255, 255, 0.12); border-radius: var(--efl-r-md); outline: none; transition: border-color 0.2s;
}
input::placeholder { color: var(--efl-gray-500); }
input:focus { border-color: var(--efl-navy-400); box-shadow: 0 0 0 3px rgba(36, 80, 145, 0.2); }
#codigo { font-family: var(--efl-font-head); font-weight: 700; font-size: 22px; letter-spacing: 0.3em; text-align: center; }
button {
  width: 100%; margin-top: var(--efl-s2); padding: 12px 20px; font-family: var(--efl-font-head); font-size: 14px; font-weight: 700;
  color: var(--efl-navy-900); background: var(--efl-green-500); border: none; border-radius: var(--efl-r-md); cursor: pointer; transition: all 0.2s;
}
button:hover { background: var(--efl-green-400); transform: translateY(-1px); }
button:disabled { opacity: 0.6; cursor: wait; transform: none; }
button.secundario { color: var(--efl-gray-300); background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.15); }
button.secundario:hover { background: rgba(255, 255, 255, 0.06); }
.erro { margin: var(--efl-s4) 0 0; font-size: 13px; color: var(--efl-red); }

/* escolha posto / cliente */
.escolhas { display: grid; gap: var(--efl-s3); }
button.escolha {
  display: block; margin: 0; padding: var(--efl-s4); text-align: left; color: var(--efl-gray-100);
  background: rgba(255, 255, 255, 0.04); border: 1.5px solid rgba(255, 255, 255, 0.12);
}
button.escolha:hover { background: rgba(164, 197, 87, 0.08); border-color: var(--efl-green-500); }
.escolha-titulo { display: block; font-family: var(--efl-font-head); font-size: 16px; font-weight: 800; color: #fff; margin-bottom: var(--efl-s1); }
.escolha-desc { display: block; font-family: var(--efl-font-body); font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--efl-gray-300); }

/* ---------- plataforma ---------- */
.topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--efl-s3) var(--efl-s4);
  padding: var(--efl-s3) var(--efl-s4); background: var(--efl-navy-800); border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.topo-marca { display: flex; align-items: center; gap: var(--efl-s3); }
.topo-marca img { display: block; height: 23px; width: auto; }
.topo-produto { font-family: var(--efl-font-head); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--efl-green-500); }
.topo-usuario { display: flex; align-items: center; gap: var(--efl-s3); font-size: 13px; color: var(--efl-gray-300); }
button.link { width: auto; margin: 0; padding: 4px 8px; font-size: 13px; font-weight: 600; color: var(--efl-gray-300); background: transparent; text-decoration: underline; }
button.link:hover { background: transparent; color: #fff; transform: none; }

/* seletor sempre visivel */
.segmento { display: inline-flex; padding: 3px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--efl-r-pill); }
button.seg { width: auto; margin: 0; padding: 6px 16px; font-size: 13px; color: var(--efl-gray-300); background: transparent; border-radius: var(--efl-r-pill); }
button.seg:hover { background: rgba(255, 255, 255, 0.06); transform: none; }
button.seg[aria-checked="true"] { color: var(--efl-navy-900); background: var(--efl-green-500); }

.abas { display: flex; gap: var(--efl-s1); padding: 0 var(--efl-s4); overflow-x: auto; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.aba {
  flex: none; padding: var(--efl-s3) var(--efl-s4); font-family: var(--efl-font-head); font-size: 14px; font-weight: 700;
  color: var(--efl-gray-400); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.aba:hover { color: #fff; }
.aba.ativa { color: #fff; border-bottom-color: var(--efl-green-500); }

.conteudo { max-width: 880px; margin: 0 auto; padding: var(--efl-s8) var(--efl-s4); }
.card { padding: var(--efl-s6); background: var(--efl-gray-800); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--efl-r-lg); }
.card p { margin: var(--efl-s3) 0 0; font-size: 14px; line-height: 1.5; color: var(--efl-gray-300); }
.selo { display: inline-block; padding: 2px 10px; font-family: var(--efl-font-head); font-size: 11px; font-weight: 700; color: var(--efl-green-500); background: rgba(164, 197, 87, 0.12); border-radius: var(--efl-r-pill); }
@media (min-width: 640px) { .cartao { padding: 40px; } .topo { padding: var(--efl-s3) var(--efl-s8); } .abas { padding: 0 var(--efl-s8); } }