/* ============================================================
   Portal de Ops — Movendo
   Brand: navy #152232 · verde #5EBC67 · Hind Siliguri
   ============================================================

   Os valores do dark mode NÃO foram escolhidos aqui: saíram medidos do
   `dashboard.css` do Portal Cliente (as cores mais frequentes dentro do bloco
   [data-theme="dark"]). Inventar uma segunda paleta escura faria as duas telas
   da mesma empresa parecerem produtos diferentes.

   Mecanismo do tema idêntico ao do Portal: atributo `data-theme` no <html> e
   `localStorage['mv-theme']`. Assim quem usa os dois não reaprende nada — e o
   dia em que as telas morarem no mesmo host, a preferência atravessa.
   ============================================================ */

:root {
  /* Marca — só existem DUAS cores de marca. O resto é neutro derivado. */
  --mv-navy:      #152232;
  --mv-green:     #5EBC67;
  --mv-green-700: #4aa855;   /* hover de botão, igual ao .btn-login do Portal */
  /* Verde de TEXTO. O verde da marca sobre branco dá 2,37:1 — reprova para
     texto, e a própria BrandBoard diz que verde é para elemento gráfico, borda,
     ícone e botão, "não para corpo de texto". Este é o MESMO matiz e a mesma
     saturação, só com o valor baixado até passar: 4,78:1 medido. No escuro o
     verde da marca já dá 7,55:1 e volta a ser ele mesmo. */
  --mv-green-txt: #408046;

  --mv-bg:        #ffffff;
  --mv-surface:   #ffffff;
  --mv-surface-2: #f4f7f9;
  --mv-text:      #152232;
  --mv-text-2:    #5c6b7a;
  --mv-border:    #dde3e9;
  --mv-header:    #152232;

  /* Semânticas. NÃO são cor de marca — existem só para severidade. */
  --mv-erro:      #c0392b;
  --mv-erro-bg:   #fbeeed;
  --mv-aviso:     #8a6413;
  --mv-aviso-bg:  #fdf6e7;

  --mv-sombra:    0 2px 10px rgba(21,34,50,.08);
  --mv-sombra-lg: 0 12px 32px rgba(21,34,50,.12);
  /* Token de foco do Portal Cliente, reusado literalmente. */
  --mv-foco:      0 0 0 3px rgba(94,188,103,.28);
  --mv-raio:      8px;   /* o border-radius dominante do Portal */
  --mv-fonte: 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

[data-theme="dark"] {
  --mv-bg:        #0d1825;
  --mv-surface:   #152232;
  --mv-surface-2: #1c2d40;
  --mv-text:      #dce9f4;
  --mv-text-2:    #9dbbd4;
  --mv-border:    #1e3248;
  --mv-header:    #0a1420;
  --mv-erro:      #ff8b7d;
  --mv-erro-bg:   #2e1a18;
  --mv-aviso:     #f0c674;
  --mv-aviso-bg:  #2a2415;
  --mv-green-txt: #5EBC67;   /* no escuro o verde da marca passa (7,55:1) */
  --mv-sombra:    0 6px 20px rgba(0,0,0,.35);
  --mv-sombra-lg: 0 16px 40px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--mv-bg);
  color: var(--mv-text);
  font-family: var(--mv-fonte);
  font-size: 1rem;
  line-height: 1.55;
  /* Sem `transition` no body: trocar o tema não precisa de fade de página
     inteira, e o repaint de 1s atrapalha quem só queria ler. */
}

a { color: var(--mv-green-txt); }

/* Foco visível SEMPRE. `outline:none` sem substituto quebra teclado — é
   anti-pattern declarado, não preferência estética. */
:focus-visible {
  outline: 2px solid var(--mv-green);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Cabeçalho ────────────────────────────────────────────────────────────── */

.mv-header {
  background: var(--mv-header);
  color: #fff;
  padding: 0 24px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.mv-header .logo { height: 28px; width: auto; display: block; }
.mv-header .divisor {
  width: 1px; height: 24px; background: rgba(255,255,255,.18);
}
.mv-header .titulo {
  font-weight: 600; font-size: .95rem; letter-spacing: .01em; color: #fff;
}
.mv-header .acoes {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  /* `min-width:0` é o que permite ENCOLHER: o default `auto` trava o item
     flex no tamanho do conteúdo, e em 320px o header estourava 9px. */
  min-width: 0;
}
.mv-header .quem {
  font-size: .82rem; color: #a9c0d4; text-align: right; line-height: 1.25;
  min-width: 0; overflow: hidden;
}
.mv-header .quem b, .mv-header .quem span {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv-header .quem b { color: #fff; font-weight: 600; }

/* Alvo de 44px de verdade: a caixa visual tem 36px e o padding externo
   completa o alvo, sem empurrar o layout. */
.mv-btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border-radius: var(--mv-raio);
  border: 1.5px solid rgba(255,255,255,.18);
  background: transparent; color: rgba(255,255,255,.78);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.mv-btn-icone:hover {
  background: rgba(94,188,103,.18);
  border-color: var(--mv-green);
  color: var(--mv-green);
  transform: scale(1.06);
}
.mv-btn-icone::before {
  /* Expande a área de toque para 44x44 sem mexer no desenho. */
  content: ''; position: absolute; width: 44px; height: 44px;
}
.mv-btn-icone { position: relative; }

/* Só um dos dois ícones aparece — o oposto do tema atual, que é o que o
   clique VAI fazer. Mostrar o tema corrente confunde: parece estado, não ação. */
.icone-sol  { display: none; }
[data-theme="dark"] .icone-lua { display: none; }
[data-theme="dark"] .icone-sol { display: block; }

.mv-sair {
  color: #a9c0d4; font-size: .84rem; text-decoration: none;
  padding: 10px 12px; border-radius: var(--mv-raio);
  transition: color .2s, background .2s;
}
.mv-sair:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ── Conteúdo ─────────────────────────────────────────────────────────────── */

.mv-main { max-width: 1080px; margin: 0 auto; padding: 36px 24px 64px; }

.mv-titulo-pagina {
  font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; color: var(--mv-text);
  letter-spacing: -.01em;
}
.mv-sub { color: var(--mv-text-2); font-size: .92rem; margin: 0 0 28px; }

/* ── Cards das ferramentas ────────────────────────────────────────────────── */

.mv-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px;
}

.mv-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--mv-surface);
  border: 1px solid var(--mv-border);
  border-top: 3px solid var(--mv-green);
  border-radius: var(--mv-raio);
  padding: 20px;
  min-height: 132px;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.mv-card:hover {
  border-color: var(--mv-green);
  box-shadow: var(--mv-sombra);
  transform: translateY(-2px);
}
.mv-card .ico {
  width: 38px; height: 38px; border-radius: var(--mv-raio);
  display: flex; align-items: center; justify-content: center;
  background: rgba(94,188,103,.14); color: var(--mv-green-txt);
  margin-bottom: 12px;
}
.mv-card .nome {
  font-weight: 700; font-size: 1rem; color: var(--mv-text); margin: 0 0 4px;
}
.mv-card .desc { color: var(--mv-text-2); font-size: .86rem; margin: 0; }

/* Estado vazio — lista sem dados nunca fica em branco. */
.mv-vazio {
  background: var(--mv-surface);
  border: 1px dashed var(--mv-border);
  border-radius: var(--mv-raio);
  padding: 40px 28px; text-align: center; color: var(--mv-text-2);
}
.mv-vazio .icone { color: var(--mv-text-2); opacity: .55; margin-bottom: 12px; }
.mv-vazio h2 { font-size: 1.05rem; color: var(--mv-text); margin: 0 0 6px; }
.mv-vazio p { margin: 0 auto; max-width: 46ch; font-size: .9rem; }

/* ── Login (espelha a tela do Portal Cliente) ─────────────────────────────── */

.mv-login { display: flex; min-height: 100vh; min-height: 100dvh; }

.mv-login-marca {
  flex: 1;
  background: var(--mv-navy);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 48px 34px; position: relative; overflow: hidden;
}
/* O chevron duplo é o elemento reconhecível da marca; aqui entra como marca
   d'água, no verde a 8% — igual ao login do Portal Cliente. */
.mv-login-marca::before {
  content: '»';
  position: absolute; bottom: -78px; right: -26px;
  font-size: 300px; font-weight: 700; line-height: 1;
  color: rgba(94,188,103,.08);
  pointer-events: none; user-select: none;
}
.mv-login-marca img { max-width: 210px; width: 60%; margin-bottom: 30px; }
.mv-login-marca .eyebrow {
  color: var(--mv-green); font-weight: 600; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px;
}
.mv-login-marca h1 {
  color: #fff; font-weight: 700; font-size: 1.55rem; line-height: 1.3;
  text-align: center; margin: 0; max-width: 20ch;
}

.mv-login-form {
  flex: 1; background: var(--mv-bg);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 56px 40px; position: relative;
}
.mv-login-form .canto { position: absolute; top: 16px; right: 16px; }
/* Na metade clara o botão de tema precisa de contorno próprio — o do header
   é branco sobre navy e sumiria aqui. */
.mv-login-form .mv-btn-icone {
  border-color: var(--mv-border); color: var(--mv-text-2);
}
.mv-login-form .mv-btn-icone:hover { color: var(--mv-green-txt); }

.mv-login-caixa { width: 100%; max-width: 348px; }
.mv-login-caixa h2 {
  font-size: 1.3rem; font-weight: 700; margin: 0 0 6px; color: var(--mv-text);
}
.mv-login-caixa .ajuda {
  color: var(--mv-text-2); font-size: .9rem; margin: 0 0 26px;
}

/* Botão do Google: branco com texto escuro é a forma que as diretrizes da
   própria Google pedem — e, de quebra, tem contraste muito melhor do que
   texto claro sobre cor. */
.mv-btn-google {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 12px 18px;
  background: var(--mv-surface); color: var(--mv-text);
  border: 1.5px solid var(--mv-border); border-radius: var(--mv-raio);
  font-family: var(--mv-fonte); font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .1s;
}
.mv-btn-google:hover {
  border-color: var(--mv-green); box-shadow: var(--mv-sombra); color: var(--mv-text);
}
.mv-btn-google:active { transform: scale(.985); }
.mv-btn-google svg { flex-shrink: 0; }

.mv-btn-primario {
  width: 100%; min-height: 48px; padding: 12px 18px;
  /* Texto NAVY, não branco. Branco sobre o verde da marca dá 2,37:1 e reprova
     em qualquer tamanho; navy sobre o mesmo verde dá 6,78:1 — medido. Continua
     dentro das duas cores da marca, sem inventar um terceiro tom.
     (O .btn-login do Portal Cliente usa branco e tem esse mesmo 2,37:1.) */
  background: var(--mv-green); color: var(--mv-navy);
  border: 0; border-radius: var(--mv-raio);
  font-family: var(--mv-fonte); font-size: 1rem; font-weight: 700;
  letter-spacing: .03em; cursor: pointer;
  transition: background .2s, transform .1s;
}
.mv-btn-primario:hover { background: var(--mv-green-700); }
.mv-btn-primario:active { transform: scale(.985); }

.mv-campo { display: flex; flex-direction: column; margin-bottom: 18px; }
.mv-campo label {
  font-weight: 600; font-size: .8rem; color: var(--mv-text);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
.mv-campo input {
  min-height: 46px; padding: 12px 14px;
  border: 1.5px solid var(--mv-border); border-radius: var(--mv-raio);
  background: var(--mv-surface-2); color: var(--mv-text);
  font-family: var(--mv-fonte); font-size: .96rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.mv-campo input:focus {
  outline: none;
  border-color: var(--mv-green);
  box-shadow: var(--mv-foco);
  background: var(--mv-surface);
}

.mv-rodape-login {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--mv-border);
  color: var(--mv-text-2); font-size: .8rem; text-align: center;
}

/* ── Faixas de mensagem ───────────────────────────────────────────────────── */

.mv-faixa {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--mv-raio); padding: 12px 14px;
  font-size: .87rem; margin-bottom: 18px; line-height: 1.45;
}
.mv-faixa svg { flex-shrink: 0; margin-top: 1px; }
/* Cor NUNCA sozinha: cada faixa tem ícone e texto. Quem não distingue
   vermelho de âmbar continua lendo a diferença. */
.mv-faixa-erro {
  background: var(--mv-erro-bg); color: var(--mv-erro);
  border-left: 3px solid var(--mv-erro);
}
.mv-faixa-aviso {
  background: var(--mv-aviso-bg); color: var(--mv-aviso);
  border-left: 3px solid var(--mv-aviso);
}
.mv-faixa code {
  background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 3px;
  font-size: .92em;
}
[data-theme="dark"] .mv-faixa code { background: rgba(255,255,255,.1); }

/* ── Tela de acesso negado ────────────────────────────────────────────────── */

.mv-negado {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.mv-negado-caixa {
  max-width: 460px; width: 100%; text-align: center;
  background: var(--mv-surface); border: 1px solid var(--mv-border);
  border-radius: var(--mv-raio); padding: 40px 32px; box-shadow: var(--mv-sombra);
}
.mv-negado-caixa .selo {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mv-aviso-bg); color: var(--mv-aviso);
}
.mv-negado-caixa h1 { font-size: 1.25rem; margin: 0 0 8px; color: var(--mv-text); }
.mv-negado-caixa p { color: var(--mv-text-2); font-size: .92rem; margin: 0 0 8px; }
.mv-negado-caixa .voltar {
  display: inline-block; margin-top: 18px; min-height: 44px;
  padding: 11px 20px; border: 2px solid var(--mv-navy); border-radius: var(--mv-raio);
  color: var(--mv-text); text-decoration: none; font-weight: 600; font-size: .9rem;
  transition: background .2s, color .2s;
}
[data-theme="dark"] .mv-negado-caixa .voltar { border-color: var(--mv-border); }
.mv-negado-caixa .voltar:hover { background: var(--mv-navy); color: #fff; }
[data-theme="dark"] .mv-negado-caixa .voltar:hover {
  background: var(--mv-surface-2); color: var(--mv-text);
}

/* ── Responsivo ───────────────────────────────────────────────────────────── */

/* Abaixo de 860px o split vira empilhado: a metade da marca encolhe para uma
   faixa e o formulário ganha a tela. Testado em 320px. */
@media (max-width: 860px) {
  .mv-login { flex-direction: column; min-height: auto; }
  .mv-login-marca { padding: 30px 22px 26px; flex: none; }
  .mv-login-marca img { max-width: 160px; margin-bottom: 16px; }
  .mv-login-marca h1 { font-size: 1.2rem; }
    .mv-login-marca::before { font-size: 190px; bottom: -54px; right: -18px; }
  .mv-login-form { padding: 34px 22px 48px; flex: none; }
}

@media (max-width: 560px) {
  .mv-header { padding: 0 12px; gap: 8px; height: 58px; }
  .mv-header .titulo, .mv-header .divisor { display: none; }
  .mv-header .acoes { gap: 6px; }
  /* O e-mail sai, o NOME fica: esconder os dois deixaria a pessoa sem saber
     com qual conta está logada — e nesse portal isso importa, porque o que
     ela enxerga depende do perfil. */
  .mv-header .quem { max-width: 38vw; font-size: .78rem; }
  .mv-header .quem span { display: none; }
  .mv-sair { padding: 10px 8px; }
  .mv-main { padding: 24px 14px 48px; }
  .mv-grade { grid-template-columns: 1fr; }
  .mv-login-form { padding: 28px 16px 40px; }
}