/* Linguagem visual do plano de manutencao impresso: cabecalho aco, titulo
   condensado em caixa alta, rotulos em mono, bloco branco com barra de cor
   a esquerda. A cor carrega o estado do chamado e nada mais. */
:root{
  --aco:#191E24; --aco-2:#242B33;
  --papel:#EEF0EE; --branco:#FFFFFF; --linha:#D4D8D5;
  --texto:#1B2127; --texto-2:#616B74;

  --parou:#B3231B; --atrapalha:#DC6410; --espera:#3F7F4A;
  --neutro:#43596B; --apagado:#8A9299;

  /* validadas para daltonismo: deltaE 25 em protanopia, 29 em visao normal */
  --serie-abertos:#2563B0; --serie-encerrados:#B07A00;

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--papel);color:var(--texto);
  font-family:"IBM Plex Sans",-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 18px}
.carregando{padding:60px 18px;color:var(--texto-2);font-family:var(--mono);font-size:13px}

/* ---------------- cabecalho ---------------- */
header{background:var(--aco);color:#EDEFF1;padding:26px 0 0}
.cab{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#8F9BA5;margin:0 0 7px}
h1{font-family:var(--cond);font-weight:700;font-size:clamp(30px,7vw,46px);line-height:.94;
  letter-spacing:-.01em;text-transform:uppercase;margin:0}
h1 span{display:block;color:#7E8B96}
.numeros{display:flex;gap:22px;font-family:var(--mono)}
.numeros b{display:block;font-size:26px;font-weight:600;line-height:1}
.numeros i{font-style:normal;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#8F9BA5}
.numeros .alarme b{color:#F08A82}
.sair{background:none;border:1px solid #3A444E;color:#C6CDD3;border-radius:2px;
  padding:6px 11px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer}
.sair:hover{border-color:#5C6874;color:#fff}

/* ---------------- mapa da carteira ---------------- */
.mapa{margin-top:24px;padding-bottom:24px;display:flex;flex-wrap:wrap;gap:16px 24px}
.mapa-loja{display:flex;flex-direction:column;gap:6px}
.mapa-loja .rot{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:#8F9BA5}
.blocos{display:flex;flex-wrap:wrap;gap:3px;max-width:132px}
.bloco{width:14px;height:20px;border:0;padding:0;cursor:pointer;border-radius:1px;
  transition:transform .12s ease}
.bloco:hover{transform:translateY(-3px)}
.bloco.fechado{opacity:.3}
.bloco:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------------- abas e controle ---------------- */
.abas{display:flex;gap:0;border-bottom:1px solid var(--linha);background:var(--papel)}
.aba{background:none;border:0;border-bottom:3px solid transparent;padding:13px 2px;margin-right:26px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-2);cursor:pointer}
.aba[aria-pressed="true"]{color:var(--texto);border-bottom-color:var(--aco)}

.controle{position:sticky;top:0;z-index:20;background:var(--papel);
  border-bottom:1px solid var(--linha);padding:11px 0}
.controle .wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--branco);border:1px solid var(--linha);color:var(--texto-2);
  padding:6px 10px;cursor:pointer;border-radius:2px}
.chip:hover{border-color:#9AA3A9;color:var(--texto)}
.chip[aria-pressed="true"]{background:var(--aco);border-color:var(--aco);color:#fff}
.chip.acao{margin-left:auto}
.busca{flex:1;min-width:170px;border:1px solid var(--linha);background:var(--branco);
  padding:7px 11px;font-family:inherit;font-size:14px;border-radius:2px;color:var(--texto)}
.busca:focus{outline:2px solid var(--aco);outline-offset:-1px}

main{padding:28px 0 60px}

/* ---------------- blocos por urgencia ---------------- */
.grupo{margin-bottom:30px;background:var(--branco);border:1px solid var(--linha);
  border-left:6px solid var(--cor)}
.grupo-cab{display:flex;gap:16px;align-items:flex-start;padding:16px 20px;
  border-bottom:1px solid var(--linha)}
.pnum{font-family:var(--cond);font-weight:700;font-size:40px;line-height:.8;color:var(--cor)}
.pnum small{display:block;font-size:9.5px;letter-spacing:.16em;font-family:var(--mono);
  color:var(--texto-2);margin-top:6px}
.grupo-cab h2{font-family:var(--cond);font-weight:600;text-transform:uppercase;font-size:21px;
  margin:1px 0 3px;line-height:1.1}
.criterio{font-size:13px;color:var(--texto-2);margin:0;max-width:62ch}
.qtd{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--texto-2);white-space:nowrap;padding-top:4px}

.item{display:flex;gap:13px;align-items:flex-start;padding:13px 20px;
  border-bottom:1px solid #EDEFEE}
.item:last-child{border-bottom:0}
.item:nth-child(even){background:#FAFBFA}
.item.alvo{box-shadow:inset 4px 0 0 var(--cor);background:#F4F7F9}
.idx{font-family:var(--mono);font-size:11.5px;color:#A2ABB1;min-width:26px;padding-top:2px}
.loja{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;
  background:var(--aco-2);color:#fff;padding:3px 7px;border-radius:2px;min-width:46px;
  text-align:center;margin-top:1px;flex:none}
.corpo{flex:1;min-width:0}
.txt{margin:0;word-break:break-word}
.meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#A2ABB1;
  text-transform:uppercase;margin-top:5px}
.foto{margin-top:9px;max-width:180px;border:1px solid var(--linha);display:block}
.solucao{margin:9px 0 0;padding:9px 12px;background:#F3F6F4;border-left:3px solid var(--espera);
  font-size:13.5px;color:#33413A}
.item.feito .txt{color:#8A9299}
.item.feito .loja{background:#B9C0C5}
.acao{border:1px solid var(--aco);background:var(--branco);color:var(--aco);border-radius:2px;
  padding:7px 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;flex:none;margin-top:1px}
.acao:hover{background:var(--aco);color:#fff}
.acao:disabled{opacity:.4;cursor:default}

/* ---------------- formulario ---------------- */
.form{background:var(--branco);border:1px solid var(--linha);border-left:6px solid var(--aco);
  padding:18px 20px;margin-bottom:30px}
.form h2{font-family:var(--cond);font-weight:600;text-transform:uppercase;font-size:21px;
  margin:0 0 14px}
label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--texto-2);margin:0 0 6px}
textarea,input[type=text],input[type=password],select{width:100%;border:1px solid var(--linha);
  background:var(--branco);padding:10px 12px;font-size:16px;font-family:inherit;
  border-radius:2px;color:var(--texto)}
textarea{min-height:84px;resize:vertical}
textarea:focus,input:focus,select:focus{outline:2px solid var(--aco);outline-offset:-1px}
.campo{margin-bottom:14px}
.urgencias{display:flex;gap:7px;flex-wrap:wrap}
.urg{flex:1;min-width:104px;border:1.5px solid var(--linha);background:var(--branco);
  border-radius:2px;padding:11px 6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;color:var(--texto-2);cursor:pointer}
.urg[aria-pressed="true"]{color:#fff;border-color:transparent}
.urg[data-u="parou"][aria-pressed="true"]{background:var(--parou)}
.urg[data-u="atrapalha"][aria-pressed="true"]{background:var(--atrapalha)}
.urg[data-u="espera"][aria-pressed="true"]{background:var(--espera)}
.linha-foto{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.botao-foto{border:1px solid var(--linha);background:var(--branco);border-radius:2px;
  padding:10px 13px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer}
input[type=file]{display:none}
.primario{width:100%;background:var(--aco);color:#fff;border:0;border-radius:2px;padding:14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;cursor:pointer}
.primario:disabled{opacity:.5;cursor:default}
.aviso{margin:12px 0 0;padding:10px 12px;font-size:13.5px;border-left:3px solid}
.aviso.erro{background:#FBE9E7;color:#8C1D18;border-color:var(--parou)}
.aviso.ok{background:#E7F4EA;color:#245B31;border-color:var(--espera)}
.dica{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--texto-2)}

/* ---------------- desempenho ---------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;
  margin-bottom:28px}
.tile{background:var(--branco);border:1px solid var(--linha);border-left:6px solid var(--apagado);
  padding:14px 16px}
.tile b{display:block;font-family:var(--cond);font-weight:700;font-size:40px;line-height:.86}
.tile i{font-style:normal;display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--texto-2);margin-top:9px}
.tile.alarme{border-left-color:var(--parou)}
.tile.alarme b{color:var(--parou)}
.painel{background:var(--branco);border:1px solid var(--linha);border-left:6px solid var(--neutro);
  padding:18px 20px;margin-bottom:30px}
.painel h2{font-family:var(--cond);font-weight:600;text-transform:uppercase;font-size:21px;
  margin:0 0 14px}
table.dados{width:100%;border-collapse:collapse;font-size:14px}
table.dados th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--texto-2);font-weight:500;padding:0 8px 8px 0;
  border-bottom:1px solid var(--linha)}
table.dados td{padding:10px 8px 10px 0;border-bottom:1px solid #EDEFEE;
  font-variant-numeric:tabular-nums}
table.dados tr:last-child td{border-bottom:0}
.num{text-align:right;white-space:nowrap;font-family:var(--mono);font-size:13px}
.ponto{display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:1px}
.legenda-g{display:flex;gap:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-2);margin:0 0 16px}
.grafico{display:flex;gap:10px;align-items:flex-end;overflow-x:auto;padding-top:20px}
.mes{flex:1;min-width:50px;text-align:center}
.par{display:flex;gap:2px;align-items:flex-end;justify-content:center;height:118px}
.barra{width:13px;border-radius:3px 3px 0 0;position:relative;min-height:2px}
.barra span{position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;color:var(--texto-2)}
.barra.abertos{background:var(--serie-abertos)}
.barra.encerrados{background:var(--serie-encerrados)}
.mes small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-2);margin-top:8px}
.nota-g{font-size:13px;color:var(--texto-2);margin:16px 0 0;max-width:62ch}
.vazio{padding:24px 20px;color:var(--texto-2);font-size:14px}
footer{border-top:1px solid var(--linha);padding:20px 0 40px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.06em;color:var(--texto-2);text-transform:uppercase}

/* ---------------- login ---------------- */
.login{max-width:400px;margin:0 auto;padding:40px 18px 60px}
.login .form{margin-top:24px}

@media (max-width:640px){
  .numeros{gap:16px}
  .grupo-cab{flex-wrap:wrap;gap:10px}
  .qtd{margin-left:0;width:100%}
  .chip.acao{margin-left:0}
  .item{flex-wrap:wrap}
  .acao{width:100%;margin-top:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{
  .controle,.abas,.sair,.acao,.form,.mapa,.bloco{display:none!important}
  body{background:#fff;font-size:11pt}
  header{padding-bottom:16px}
  .grupo,.painel,.tile{break-inside:avoid;border-color:#999}
  .item{break-inside:avoid}
}

.galeria{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.galeria a{display:block;line-height:0}
.galeria .foto{margin-top:0;max-width:120px;max-height:120px;object-fit:cover}

/* ------------------------- celular -------------------------
   O app e usado em pe, no meio do turno, com uma mao. Tudo aqui e sobre
   caber sem quebrar: tabela rola sozinha em vez de espremer coluna, filtro
   desliza de lado em vez de virar tres linhas, e o cabecalho encolhe para
   sobrar tela para a lista, que e o que a pessoa veio ver. */
.rolagem{overflow-x:auto}
.mes-atual small{color:var(--texto);font-weight:600}

@media (max-width:640px){
  .wrap{padding:0 12px}

  header{padding:18px 0 0}
  h1{font-size:clamp(25px,8vw,34px)}
  .cab{gap:12px}
  .numeros{gap:14px}
  .numeros b{font-size:21px}
  .numeros i{font-size:9px;letter-spacing:.1em}
  .eyebrow{font-size:9.5px}
  .sair{padding:5px 9px;font-size:10px}

  .mapa{gap:12px 18px;margin-top:16px;padding-bottom:18px}
  .blocos{max-width:108px;gap:2px}
  .bloco{width:12px;height:17px}

  /* Filtros e abas deslizam na horizontal em vez de empilhar. Tres linhas de
     chip empurram a lista para fora da tela antes dela comecar. */
  .abas .wrap{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .aba{margin-right:18px;font-size:11px;padding:11px 2px}
  .controle .wrap{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:2px}
  .controle .wrap::-webkit-scrollbar{display:none}
  .busca{min-width:44vw}
  .chip{flex:none}
  .chip.acao{margin-left:0}

  main{padding:20px 0 48px}
  .grupo{margin-bottom:22px}
  .grupo-cab{padding:14px}
  .pnum{font-size:32px}
  .grupo-cab h2{font-size:18px}
  .criterio{font-size:12.5px}
  .qtd{font-size:10px}

  .item{padding:12px 14px;gap:10px}
  .idx{min-width:20px;font-size:11px}
  .loja{font-size:10px;min-width:42px}
  /* Dois botoes por linha, nao um empilhado embaixo do outro. */
  .acao{width:auto;flex:1 1 calc(50% - 5px);margin-top:8px;padding:9px 6px;text-align:center}
  .galeria .foto{max-width:calc(50% - 3px);max-height:none}

  .form{padding:15px 14px}
  textarea,input[type=text],input[type=password],select{padding:11px 10px}

  .tiles{grid-template-columns:repeat(2,1fr);gap:8px}
  .tile{padding:11px 12px;border-left-width:5px}
  .tile b{font-size:29px}
  .tile i{font-size:9.5px;margin-top:6px;letter-spacing:.08em}

  .painel{padding:15px 14px}
  .painel h2{font-size:18px}
  /* A tabela nao encolhe: ela rola. Coluna espremida a 3 caracteres nao
     informa nada, e o dedo ja sabe arrastar. */
  .rolagem{margin:0 -14px;padding:0 14px;-webkit-overflow-scrolling:touch}
  table.dados{font-size:13px;min-width:500px}
  table.dados th{font-size:9.5px}
  .num{font-size:12px}

  .grafico{gap:5px;padding-top:18px}
  .mes{min-width:36px}
  .par{height:96px;gap:2px}
  .barra{width:10px}
  .barra span{font-size:9px;top:-14px}
  .mes small{font-size:9px}
  .legenda-g{gap:14px;font-size:10px}
  .nota-g{font-size:12.5px}
  footer{font-size:9.5px}
}

/* Telas bem estreitas (iPhone SE e parecidos) */
@media (max-width:360px){
  .tiles{grid-template-columns:1fr}
  .urg{min-width:100%}
}

/* --------------- barra de acoes dos paineis --------------- */
.barra-acoes{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.impresso-em{display:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-2)}
.barra span.zero{opacity:.32}

/* --------------- impressao / PDF ---------------
   O navegador tira cor de fundo por padrao ao imprimir. Sem forcar, as barras
   do grafico, os selos de urgencia e a faixa lateral dos blocos saem brancos --
   e a cor E o dado aqui. */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .barra-acoes .chip{display:none}
  .impresso-em{display:inline}
  /* Na impressao a tabela nao rola: ela abre inteira. */
  .rolagem{overflow:visible!important;margin:0!important;padding:0!important}
  table.dados{min-width:0!important;font-size:10pt}
  .painel,.tile,.grupo{break-inside:avoid}
  .tiles{grid-template-columns:repeat(4,1fr)!important}
  .grafico{overflow:visible!important}
  header{background:var(--aco)!important;color:#EDEFF1!important}
  .numeros b{color:#fff!important}
  main{padding-top:16px}
  a[href^="/api/foto"]{display:none}
}

/* --------------- ajuda embaixo do campo --------------- */
.ajuda{margin:7px 0 0;font-size:12.5px;line-height:1.4;color:var(--texto-2);
  border-left:2px solid var(--linha);padding-left:9px}

/* --------------- tela de usuarios no celular --------------- */
@media (max-width:640px){
  /* O cadastro nao e uma lista para ler correndo, e um formulario por pessoa.
     Entao a linha inteira vira bloco: nome em cima, dados embaixo, botao
     ocupando a largura toda -- em vez de tres colunas espremidas. */
  .item-usuario{flex-wrap:wrap;padding:13px 14px}
  .item-usuario .idx{display:none}
  .item-usuario .loja{margin-top:0}
  .item-usuario .corpo{flex:1 1 calc(100% - 56px);min-width:0}
  .item-usuario .acao{flex:1 1 100%;margin-top:10px}
  .item-usuario select,
  .item-usuario input[type=text],
  .item-usuario input[type=password]{font-size:16px}  /* 16px evita o zoom do iOS */
  .item-usuario .campo{margin-bottom:12px}
  .item-usuario .ajuda{font-size:12px}
  /* Os botoes Salvar / Cancelar / Desativar, um do lado do outro sem quebrar. */
  .item-usuario .acao[data-salvar],
  .item-usuario .acao[data-fechar],
  .item-usuario .acao[data-ativar]{flex:1 1 auto;min-width:96px;margin-top:0}
}

/* ================= CORRECOES DE CELULAR =================
   Tres causas explicam quase todo defeito de layout estreito, e as tres
   estao resolvidas aqui na raiz em vez de caso a caso:

   1. Filho de flexbox nao encolhe abaixo do proprio conteudo (min-width:auto
      e o padrao). E o que corta o texto e empurra o vizinho para fora.
   2. Palavra longa sem espaco -- um link, um codigo de equipamento -- nao
      quebra sozinha. E a "linha infinita".
   3. Tabela larga dentro de bloco sem rolagem empurra a PAGINA, e nao a si
      mesma. Dai a pagina inteira desliza de lado.                          */

html{max-width:100%}
body{max-width:100%;overflow-x:clip}   /* clip, nao hidden: hidden mata o sticky */
.wrap{width:100%}

/* (1) todo filho de flex pode encolher */
.cab > *, .cab > * > *, .item > *, .grupo-cab > *, .controle .wrap > *,
.linha-foto > *, .barra-acoes > *, .mapa-loja > *{min-width:0}

/* (2) todo texto tem onde quebrar */
.txt, .meta, .solucao, .criterio, .nota-g, .ajuda, .dica, .vazio,
table.dados td, table.dados th, .perfil-nome, h1, h2{overflow-wrap:anywhere}

/* (3) o que e largo rola dentro de si mesmo */
.rolagem{width:100%;max-width:100%}
img, video{max-width:100%;height:auto}

@media (max-width:640px){
  /* Cabecalho: titulo em cima, botoes, e os numeros distribuidos na linha
     inteira. Antes o bloco da direita tentava caber ao lado do titulo e
     espremia os dois. */
  .cab{flex-direction:column;align-items:stretch;gap:12px}
  .cab > div:last-child{width:100%;align-items:stretch !important;gap:10px !important}
  .numeros{width:100%;justify-content:space-between;gap:8px}
  .numeros > div{flex:1 1 0;min-width:0}
  .numeros b{font-size:20px}
  .numeros i{font-size:8.5px;letter-spacing:.06em}

  /* Blocos por urgencia: o numero grande e o titulo dividem a linha, o
     criterio ocupa a largura toda embaixo. */
  .grupo-cab{gap:10px;align-items:center}
  .grupo-cab > div:nth-child(2){flex:1 1 100%;order:3}
  .pnum{font-size:28px;line-height:1}
  .pnum small{display:none}
  .qtd{margin-left:auto;width:auto;padding-top:0}

  /* Chamado: selo e texto na primeira linha, acoes embaixo. */
  .item{align-items:flex-start}
  .corpo{flex:1 1 100%}
  .idx{display:none}

  table.dados{min-width:420px}
  .rolagem{margin:0 -14px;padding:0 14px}

  /* Formulario: nada de campo com 16px de fonte perde para o zoom do iOS. */
  select, textarea, input[type=text], input[type=password], input[type=search]{
    font-size:16px;max-width:100%}
  .urgencias{gap:6px}
  .urg{min-width:calc(33.33% - 4px);padding:11px 2px;font-size:10.5px;letter-spacing:.02em}

  .barra-acoes{flex-wrap:wrap}
  .galeria .foto{max-width:calc(50% - 4px)}
}

@media (max-width:380px){
  .urg{min-width:100%}
  .numeros b{font-size:18px}
  .loja{min-width:38px;font-size:9.5px}
}

a.chip{text-decoration:none;display:inline-block;line-height:normal}

/* --------------- acoes da barra de controle ---------------
   Os dois botoes andam juntos num grupo que nao quebra. Antes cada um era
   um item solto do flex, com margin-left:auto num deles -- e bastava a
   barra ficar apertada para um deles cair para a linha de baixo sozinho. */
.chip{white-space:nowrap}
.acoes-controle{display:flex;gap:8px;margin-left:auto;flex:none}
.chip.acao{margin-left:0}
@media (max-width:640px){
  .acoes-controle{margin-left:8px}
}

/* --------------- tela de entrada ---------------
   Ocupa a altura toda do aparelho. 100dvh e nao 100vh: no celular a barra do
   navegador entra e sai, e com 100vh a tela fica maior que o visivel, criando
   uma rolagem fantasma de uns 60px que nao leva a lugar nenhum. */
.tela-login{
  min-height:100vh;min-height:100dvh;
  background:var(--aco);
  display:flex;align-items:center;justify-content:center;
  padding:32px 0;
}
.tela-login .login{margin:0;width:100%;max-width:420px;padding:0 18px}
.tela-login .eyebrow{color:#8F9BA5}
.tela-login h1{color:#EDEFF1;font-size:clamp(34px,9vw,50px);margin-bottom:26px}
.tela-login h1 span{color:#7E8B96}
.tela-login .dica{color:#8F9BA5;text-transform:none;letter-spacing:0;font-size:13px}
.tela-login .form{border-left-color:var(--parou)}
@media (max-width:640px){
  .tela-login{padding:24px 0;align-items:flex-start}
  .tela-login .login{padding-top:8vh}
}