/* ==========================================================================
   Plus IoT — sistema visual
   Tokens copiados do arquivo do Paper (Plus IoT - Telas / Plus Hub API).
   Nao invente valor novo aqui: se faltar algo, pegue do arquivo.
   ========================================================================== */
:root{
  --color-ink:#0F1A20;        --color-body:#33454D;      --color-muted:#5B6B72;
  --color-line:#EAECF0;       --color-line-strong:#D6DBE0;
  --color-ground:#F6F8F9;     --color-surface:#FFFFFF;
  --color-primary:#0E8194;    --color-primary-ink:#0A5D6B;
  --color-primary-soft:#E6F2F4;
  --color-block:#B3261E;      --color-block-soft:#FBEDEC;
  --color-warn:#B26B00;       --color-warn-soft:#FBF3E6;
  --color-info:#5B6B72;       --color-info-soft:#F1F4F5;
  --color-ok:#15795F;         --color-ok-soft:#E8F4F0;
  --color-brand:#009AB3;      --color-accent:#2BD6AD;
  --color-night:#052241;      --color-night-2:#092A33;
  --color-night-text:#A8C4D4;

  --font-sans:'Outfit',system-ui,sans-serif;
  --font-id:'Inter',system-ui,sans-serif;
  --text-display:34px; --text-title:22px; --text-section:17px;
  --text-body:14px;    --text-label:13px; --text-micro:11px;
  --tracking-tight:-0.02em; --tracking-caps:0.08em;
  --leading-tight:20px; --leading-normal:22px; --leading-loose:28px;

  --sidebar:240px; --sidebar-min:85px; --gutter:24px; --gap:12px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-pill:999px;
  --radius-brand:12px;        /* campos e botões, vindo do arquivo do Paper */
  --breakpoint-desktop:1425px; --container-shell:1425px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--color-ground);color:var(--color-ink);
  font-family:var(--font-sans);font-size:var(--text-body);
  line-height:var(--leading-normal);-webkit-font-smoothing:antialiased}
a{color:var(--color-primary);text-decoration:none}
h1{font-size:var(--text-title);letter-spacing:var(--tracking-tight);margin:0}
h2{font-size:var(--text-section);margin:0}
.micro{font-size:var(--text-micro);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--color-muted);font-weight:600}
.muted{color:var(--color-muted)}
.num{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- shell --- */
.shell{display:flex;min-height:100vh}
.side{width:var(--sidebar);background:var(--color-surface);flex-shrink:0;
  border-right:1px solid var(--color-line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh}
.side.min{width:var(--sidebar-min)}
.side .topo{height:85px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);border-bottom:1px solid var(--color-line);
  overflow:hidden}   /* trava: nada do topo pode vazar sobre a pagina */
/* Recolhida, a barra tem 85px e o logotipo sozinho mede 137px. Mante-lo
   fazia o 'justify-content:center' empurrar a marca para fora da tela pela
   esquerda e jogar o botao de recolher POR CIMA do conteudo. O logotipo e
   uma palavra, nao um simbolo: nao ha o que reduzir. Some com ele e deixa
   so o botao, como faz todo menu que encolhe. */
.side.min .topo{justify-content:center;padding:0}
.side.min .logo{display:none}
.side.min .recolher svg{transform:rotate(180deg)}   /* agora aponta p/ abrir */
.side .logo svg{height:28px;width:auto;display:block}
.recolher{width:32px;height:32px;border:1px solid var(--color-line);
  border-radius:var(--radius-sm);background:var(--color-surface);
  color:var(--color-muted);cursor:pointer;display:flex;align-items:center;
  justify-content:center;flex-shrink:0}
.recolher:hover{border-color:var(--color-line-strong);color:var(--color-ink)}
.nav{flex:1;padding:20px 16px;overflow-y:auto}
.nav .grupo{font-size:var(--text-label);color:var(--color-muted);
  padding:0 8px 10px}
/* Item do menu em UMA linha, sempre. 'Fila de aprovação' com o contador ao
   lado chega a 122px num vao de 123 — o gap de 12 nao cabia e a linha
   quebrava. Com 10px de gap sobra folga, e o rotulo ainda ganha reticencias
   como rede de seguranca para qualquer item futuro mais longo. */
.nav a{display:flex;align-items:center;gap:10px;padding:9px 8px;
  border-radius:var(--radius-md);color:var(--color-body);font-size:15px;
  margin-bottom:2px;white-space:nowrap}
.nav a:hover{background:var(--color-ground)}
.nav a.ativo{background:var(--color-primary-soft);color:var(--color-primary);
  font-weight:500}
.nav a .ic{width:20px;height:20px;flex-shrink:0;opacity:.85}
.nav a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* line-height menor que o icone: o contador nao pode esticar a altura da
   linha, senao o item com contador fica mais alto que os outros. */
.nav a .conta{margin-left:auto;flex-shrink:0;font-size:var(--text-micro);
  background:var(--color-info-soft);color:var(--color-muted);
  padding:0 6px;line-height:18px;border-radius:var(--radius-pill);
  font-weight:600}
.nav a.ativo .conta{background:var(--color-surface);color:var(--color-primary)}
.side.min .nav{padding:20px 0;display:flex;flex-direction:column;
  align-items:center;gap:4px}
.side.min .nav a{width:44px;height:44px;justify-content:center;padding:0;
  margin:0}
.side.min .nav .grupo,.side.min .nav a span,.side.min .nav .conta{display:none}
.usuario{margin:16px;padding:10px;border:1px solid var(--color-line);
  border-radius:var(--radius-md);display:flex;align-items:center;gap:10px}
.side.min .usuario{margin:12px;padding:6px;justify-content:center}
.side.min .usuario .quem,.side.min .usuario .sair{display:none}
.avatar{width:34px;height:34px;border-radius:var(--radius-sm);flex-shrink:0;
  background:linear-gradient(135deg,var(--color-brand),var(--color-accent));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px}
.usuario .quem{line-height:1.25;min-width:0}
.usuario .quem b{display:block;font-size:var(--text-body);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usuario .quem span{font-size:var(--text-micro);color:var(--color-muted)}
.usuario .sair{margin-left:auto;color:var(--color-muted);flex-shrink:0}

.conteudo{flex:1;min-width:0}
.barra{background:var(--color-surface);border-bottom:1px solid var(--color-line);
  padding:0 32px;height:85px;display:flex;align-items:center;gap:16px;
  position:sticky;top:0;z-index:20}
.barra .caminho{font-size:var(--text-label);color:var(--color-muted)}
.barra h1{margin-top:2px}
.pagina{padding:28px 32px 80px;max-width:1185px}

/* -------------------------------------------------------------- peças --- */
.cartao{background:var(--color-surface);border:1px solid var(--color-line);
  border-radius:var(--radius-lg);padding:22px;margin-bottom:18px}
.cartao.plano{padding:0;overflow:hidden}
.cartao h2{margin-bottom:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--color-primary);color:#fff;border:1px solid var(--color-primary);
  border-radius:var(--radius-md);padding:11px 20px;font-size:var(--text-body);
  font-family:inherit;font-weight:500;cursor:pointer}

/* Sem isto, um botao 'Aprovar e gravar' desabilitado por bloqueio ficava
   identico ao ativo: o operador clicava e nada acontecia, sem entender por
   que. O estado precisa ser visivel antes do clique, nao depois. */
.btn:disabled,.btn[disabled]{background:var(--color-line);
  border-color:var(--color-line);color:var(--color-muted);cursor:not-allowed;
  box-shadow:none;opacity:1}
.btn:disabled:hover,.btn[disabled]:hover{background:var(--color-line)}
.btn:hover{background:var(--color-primary-ink);border-color:var(--color-primary-ink)}
.btn.leve{background:var(--color-surface);color:var(--color-body);
  border-color:var(--color-line-strong)}
.btn.leve:hover{background:var(--color-ground);color:var(--color-ink)}
.btn.perigo{background:var(--color-surface);color:var(--color-block);
  border-color:#F0CFCC}
.btn.perigo:hover{background:var(--color-block-soft)}
.btn.bloco{width:100%}
.btn.pequeno{padding:7px 14px;font-size:var(--text-label)}

label.campo{display:block;font-size:var(--text-label);color:var(--color-body);
  font-weight:500;margin-bottom:6px}
.entrada{width:100%;padding:12px 14px;border:1px solid var(--color-line-strong);
  border-radius:var(--radius-md);background:var(--color-surface);
  font-family:inherit;font-size:var(--text-body);color:var(--color-ink)}
.entrada:focus{outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-primary-soft)}
.ajuda{font-size:var(--text-micro);color:var(--color-muted);margin-top:5px;
  display:block}

.etiqueta{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  border-radius:var(--radius-pill);font-size:var(--text-micro);font-weight:600;
  letter-spacing:.02em}
.etiqueta::before{content:'';width:6px;height:6px;border-radius:50%;
  background:currentColor}
.e-ok{background:var(--color-ok-soft);color:var(--color-ok)}
.e-erro{background:var(--color-block-soft);color:var(--color-block)}
.e-atencao{background:var(--color-warn-soft);color:var(--color-warn)}
.e-neutro{background:var(--color-info-soft);color:var(--color-muted)}
.e-marca{background:var(--color-primary-soft);color:var(--color-primary)}

/* Qual PROCESSO esta na tela. Duas cores distintas, e nao so um texto: o
   operador passa o dia alternando entre cancelamento e excedente, e as duas
   telas tem o mesmo desenho. Sem a etiqueta ele le uma coluna de ICCID
   vazia na quarentena do excedente e acha que o sistema perdeu o dado —
   excedente nao tem ICCID, a linha e um cliente inteiro.

   Moradia aqui, e nao dentro do <style> de uma tela so, porque agora sao
   duas telas usando (contrato e quarentena) e duas copias da mesma cor
   viram duas cores diferentes no primeiro ajuste. */
.etiqueta.tipo-excedente{background:#e8f0fe;color:#1a56b8;font-weight:600}
.etiqueta.tipo-cancelamento{background:var(--color-primary-soft);
  color:var(--color-primary);font-weight:600}

/* ---- status de um contrato na fila ---------------------------------- */
/* Existiam so as cores genericas (.e-ok, .e-erro...), mas os templates
   escrevem .e-{{ status }} — .e-pendente, .e-executado, .e-falhou. Como
   nenhuma delas existia, TODO status caia no estilo neutro e saia cinza:
   'Pendente de aprovacao' e 'Falhou' ficavam com a mesma cara. Cada estado
   agora tem cor propria, porque a cor e o que se le antes do texto. */
/* Pendente e amarelo porque e trabalho que espera alguem — nao e um
   estado neutro. Cinza fazia ele desaparecer no meio dos concluidos. */
.e-pendente{background:var(--color-warn-soft);color:var(--color-warn)}
.e-aprovado{background:var(--color-primary-soft);color:var(--color-primary)}
.e-executado{background:var(--color-ok-soft);color:var(--color-ok)}
.e-parcial{background:var(--color-warn-soft);color:var(--color-warn)}
.e-falhou{background:var(--color-block-soft);color:var(--color-block)}
.e-bloqueado{background:var(--color-block-soft);color:var(--color-block)}
.e-dispensado{background:var(--color-info-soft);color:var(--color-muted)}
.e-rejeitado{background:var(--color-info-soft);color:var(--color-muted)}
/* status de um passo, na tela de revisao */
.e-gravado{background:var(--color-ok-soft);color:var(--color-ok)}

/* ---- barra de progresso da remessa ---------------------------------- */
/* Responde "quanto falta" sem obrigar a contar linha por linha. */
.progresso{margin:0 0 18px}
.progresso .trilho{height:8px;border-radius:999px;background:var(--color-line);
  overflow:hidden;display:flex}
.progresso .parte{height:100%}
.progresso .p-enviado{background:var(--color-ok)}
.progresso .p-erro{background:var(--color-block)}
.progresso .p-dispensado{background:var(--color-muted);opacity:.45}
.progresso .legenda{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;
  font-size:var(--text-micro);color:var(--color-muted)}
.progresso .legenda b{color:var(--color-text);font-variant-numeric:tabular-nums}
.progresso .ponto{display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:5px;vertical-align:middle}

/* ---- linha da tabela que abre ao clique ----------------------------- */
/* O botao 'revisar' continua la, mas a linha inteira e alvo: ninguem mira
   num link de 50px quando a linha tem 1200. */
tr.clicavel{cursor:pointer}
tr.clicavel:hover{background:var(--color-primary-soft)}
tr.clicavel:focus-within{outline:2px solid var(--color-primary);
  outline-offset:-2px}
.num, .col-num{font-variant-numeric:tabular-nums;white-space:nowrap}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:var(--text-micro);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--color-muted);font-weight:600;
  padding:0 14px 10px}
td{padding:13px 14px;border-top:1px solid var(--color-line);
  font-size:var(--text-body);vertical-align:middle}
tbody tr:hover{background:var(--color-ground)}

.aviso{border-radius:var(--radius-md);padding:12px 14px;font-size:var(--text-body);
  display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}
.aviso.atencao{background:var(--color-warn-soft);color:#7A4A00}
.aviso.erro{background:var(--color-block-soft);color:#8C1D18}
.aviso.info{background:var(--color-info-soft);color:var(--color-body)}
.aviso b{font-weight:600}

.trilha{height:6px;background:var(--color-line);border-radius:var(--radius-pill);
  overflow:hidden;flex:1;min-width:120px}
.trilha i{display:block;height:100%;background:var(--color-ok)}

code,pre{font-family:ui-monospace,'SF Mono',Consolas,monospace}
pre{background:var(--color-night-2);color:#C9D9E2;padding:14px;
  border-radius:var(--radius-md);font-size:12px;overflow-x:auto;margin:0}