/* Identidade eFleet — referência: https://efleet.com.br/, 14/09/2026.
   Camada de apresentação sobre os componentes funcionais de app.css. */
@font-face{font-family:Montserrat;src:url('../fonts/montserrat-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('../fonts/montserrat-800.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
:root{color-scheme:light;--tinta:#05263A;--tinta-2:#415768;--suave:#667987;--azul:#315ba5;--azul-fundo:#edf3fc;--verde:#A4C557;--verde-tinta:#426020;--verde-fundo:#edf4df;--papel:#F5F7FA;--superficie:#fff;--superficie-2:#f8fafb;--linha:#dfe6eb;--linha-2:#edf1f4;--alerta:#8b5a16;--alerta-fundo:#fff4e3;--perigo:#ad383b;--perigo-fundo:#fff0ef;--raio:14px;--lateral:244px;--sombra:0 3px 16px #05263a05;--heading:Montserrat,var(--sans)}
body{font-size:14px;line-height:1.6}
button,input,select{font:inherit}
[hidden]{display:none!important}
::selection{background:#dcebbf;color:#05263a}
:focus-visible{outline:3px solid #476fc3;outline-offset:3px}
h1,h2,h3{font-family:var(--heading);font-weight:700;letter-spacing:-.035em}
.skip-link{position:fixed;top:-70px;left:20px;z-index:200;background:#fff;color:#05263a;padding:12px 20px;border-radius:10px}
.skip-link:focus{top:12px}
.layout{grid-template-columns:var(--lateral) minmax(0,1fr)}
.lateral{background:#05263A;color:#d6e1e6;border:0;z-index:50;padding:0 15px}
.marca{padding:33px 15px 29px;border-bottom:1px solid #ffffff13}
.marca .logo img{height:34px;width:143px;object-fit:contain;object-position:left}
.marca .app{color:#93acb8;font-size:10px;letter-spacing:.17em;margin-top:15px}
.menu{padding:19px 0;overflow-y:auto}
.menu-grupo{color:#7f9aa8;font-size:10px;font-weight:800;letter-spacing:.14em;padding:17px 16px 10px}
.menu a{min-height:48px;padding:11px 15px;color:#c0d0d9;border-radius:10px;gap:13px;margin-bottom:5px;font-size:13px;font-weight:600;justify-content:flex-start;transition:background .15s,color .15s}
.menu a:hover{background:#ffffff0c;color:#fff}
.menu a.ativo{background:#A4C557;color:#05263A;font-weight:800;box-shadow:0 4px 16px #0000000d}
.menu a .nav-icon{width:20px;height:20px;flex:none}
.menu a .nav-arrow{margin-left:auto;opacity:.6;font-size:18px}
.menu a .breve{color:inherit;margin-left:auto}
.rodape-lateral{border-top:1px solid #ffffff13;padding:20px 7px 24px;display:flex;align-items:center;gap:10px;color:#9db1bd}
.rodape-lateral b{color:#eef3f5;font-size:12px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rodape-lateral small{font-size:10px}
.avatar{height:36px;width:36px;background:#153c50;border:1px solid #ffffff12;color:#cce49e;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:none}
.sair{margin-left:auto!important;color:#bdd0db!important;padding:8px;border-radius:8px;display:grid;place-items:center}
.sair:hover{background:#ffffff12}
.sair svg{width:18px;height:18px}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#fff;border-bottom:1px solid var(--linha-2);gap:16px}
.breadcrumb{display:flex;align-items:center;gap:13px;font-size:12px;color:var(--suave)}
.breadcrumb b{color:var(--tinta);font-weight:700}
.breadcrumb .sep{color:#b3c1cb}
.topbar-right{display:flex;gap:16px;align-items:center;font-size:12px;color:var(--suave)}
.topbar-date{border-right:1px solid var(--linha);padding-right:16px}
.workspace-label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700}
.workspace-label::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--verde)}
.menu-toggle{display:none;border:1px solid var(--linha);background:#fff;color:var(--tinta);border-radius:9px;width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer}
.menu-toggle svg{width:20px;height:20px}
.conteudo{padding:32px 36px 56px;max-width:1800px;width:100%;margin:auto}
.pagina-topo{align-items:center;margin-bottom:26px;gap:18px}
.pagina-topo h1{font-size:28px;line-height:1.25;color:#05263A}
.pagina-topo .sub{font-size:13px;color:#667987;margin-top:8px;max-width:75ch}
.eyebrow{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:#688439;margin-bottom:9px}
.page-actions{display:flex;align-items:center;gap:9px}
.btn{border-radius:50px;background:var(--verde);color:#05263a;border:1px solid var(--verde);padding:10px 19px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:800;line-height:1.5;white-space:nowrap;transition:background .15s,box-shadow .15s,transform .15s}
.btn:hover{background:#b2d16e;border-color:#b2d16e;filter:none;box-shadow:0 3px 10px #05263a0c}
.btn:active{transform:translateY(1px)}
.btn.secundario{background:#fff;color:#415768;border-color:#d9e2e8;font-weight:700}
.btn.secundario:hover{background:#f4f7f9;border-color:#b8c8d3}
.btn[disabled]{background:#edf1f4;color:#84929c;border-color:#e2e8ed;opacity:1;cursor:not-allowed;box-shadow:none}
.btn svg{width:16px;height:16px;flex:none}
.btn.mini{min-height:30px;font-size:11px;padding:5px 10px}
.kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:26px}
.kpi,.kpi.alerta{padding:23px 24px;border:1px solid var(--linha);border-radius:14px;background:#fff;box-shadow:var(--sombra);position:relative;margin:0}
.kpi .rot{font-size:11px;text-transform:none;letter-spacing:0;color:var(--tinta-2);font-weight:700}
.kpi .val{font-family:var(--heading);font-size:32px;line-height:1.3;margin:11px 0 9px;letter-spacing:-.055em;font-weight:700}
.kpi.alerta .val{color:var(--tinta)}
.kpi-foot{font-size:11px;color:var(--suave)}
.kpi-icon{position:absolute;top:20px;right:20px;background:#eef3f9;border-radius:12px;width:37px;height:37px;display:grid;place-items:center;color:#476fc3}
.kpi-icon svg{width:19px;height:19px}
.kpi:first-child{border-color:#d6e5b5;background:linear-gradient(115deg,#fff,#f5f9eb)}
.kpi:first-child .kpi-icon{color:#658638;background:#e8f0d8}
.kpi.alerta .kpi-icon{color:#a77838;background:#fbf1e1}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 15px}
.section-heading h2{font-size:15px;letter-spacing:-.02em}
.section-heading p,.section-heading span{margin:3px 0 0;font-size:11px;color:var(--suave)}
.filtros{padding:21px 22px;border:1px solid var(--linha);gap:17px 16px;border-radius:14px;margin-bottom:25px;grid-template-columns:repeat(5,minmax(120px,1fr));box-shadow:none}
.filter-caption{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--linha-2);padding-bottom:14px;margin-bottom:0}
.filter-caption b{font-size:12px}
.filter-caption span{font-size:11px;color:var(--suave)}
.campo{gap:7px}
.campo label,.filtros>label{color:#415768;font-size:11px;font-weight:700;text-transform:none;letter-spacing:0}
.campo input,.campo select,.filtros>label input,.filtros>label select{display:block;width:100%;min-width:0;height:41px;background:#fbfcfd;color:#05263a;border:1px solid #dce4e9;border-radius:8px;padding:8px 10px;font-family:var(--sans);font-size:12px;transition:border-color .15s,box-shadow .15s}
.campo input::placeholder,.filtros input::placeholder{color:#8293a0}
.campo input:focus,.campo select:focus,.filtros input:focus,.filtros select:focus{outline:0;border-color:#476fc3;box-shadow:0 0 0 3px #476fc315}
.filtros>label input,.filtros>label select{margin-top:7px}
.campo input:disabled,.campo select:disabled,.filtros input:disabled,.filtros select:disabled{background:#eef2f5;color:#85939c;cursor:not-allowed}
.filtros .acoes{gap:8px;justify-content:flex-end}
.filtros .acoes .btn{flex:1;padding-left:12px;padding-right:12px}
.tabela-caixa{border-radius:14px;box-shadow:none;border:1px solid var(--linha);overflow:auto;scrollbar-width:thin;scrollbar-color:#c0cdd5 transparent}
.tabela-caixa:focus-visible{outline-offset:2px}
table.grade,table.tabela{width:100%;border-collapse:collapse;font-size:12px}
table.grade th,table.tabela th{padding:15px 16px;font-size:10px;letter-spacing:.025em;text-transform:none;color:#6c7e8b;background:#f8fafc;text-align:left;white-space:nowrap;border-bottom:1px solid var(--linha);font-weight:800}
table.grade td,table.tabela td{padding:15px 16px;border-bottom:1px solid var(--linha-2);color:#3a5162;vertical-align:middle}
table.grade tbody tr:last-child td,table.tabela tbody tr:last-child td{border-bottom:0}
table.grade tbody tr:hover,table.tabela tbody tr:hover{background:#f8fafc}
table.grade tbody tr.clicavel:hover{background:#f1f6e8}
table.grade .id{color:#6b8190;font-family:var(--sans);font-size:11px}
table.grade .mono,.mono{font-family:var(--sans);font-size:11px;color:#617586;font-variant-numeric:tabular-nums}
table.grade th.num,table.grade td.num{text-align:right;font-variant-numeric:tabular-nums}
.row-link{color:#214b72;font-weight:800;text-decoration:none;display:inline-block;padding:3px 0;font-size:12px}
.row-link:hover{text-decoration:underline}
.tag{border-radius:50px;padding:4px 9px;font-size:10px;letter-spacing:0;text-transform:none;line-height:1.5;font-weight:700}
.tag.neutro{background:#f0f4f6;border:0;color:#587080}
.paginacao{margin-top:16px;gap:10px;font-size:11px}
.paginacao>span{margin-right:auto}
.paginacao .btn{min-height:34px;padding:6px 13px;font-size:11px}
.alerta{border:1px solid #e5e0d4;border-left:3px solid #d5b270;background:#fffdfa;border-radius:10px;padding:15px 18px;font-size:12px;color:#75613e}
.alerta.erro{background:var(--perigo-fundo);border-color:#f0d8d8;color:var(--perigo)}
.alerta.info{background:#edf3fa;border-color:#d9e4f0;border-left-color:#476fc3;color:#3f6085}
.vazio{padding:45px 24px;font-size:12px}
.vazio b{font-family:var(--heading);font-size:16px;margin-bottom:8px}
.vazio svg{display:block;margin:0 auto 16px;width:32px;height:32px;color:#97afbf}
.toast{border-radius:12px;padding:15px 20px;box-shadow:0 8px 32px #05263a1a}
#toasts{z-index:100;max-width:calc(100vw - 32px)}
.dados-remessa{gap:22px;padding:4px 0}
.dados-remessa span{font-size:10px;text-transform:none;letter-spacing:0;font-weight:700}
.dados-remessa b{font-size:14px;font-weight:800}
.passos{gap:18px;margin:0 0 25px}
.passo{padding:19px 21px;border-radius:14px}
.passo .num{background:#edf4df;color:#59732d;width:36px;height:36px;flex-basis:36px;font-size:13px}
.passo .txt{font-size:11px}.passo .txt b{font-size:13px;margin-bottom:3px}
.form-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}
.fechamento-form{display:block;padding:26px;margin:0}
.form-section{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--linha-2)}
.form-section h2{font-size:15px;margin-bottom:6px}.form-section p{color:var(--suave);font-size:12px;margin:0 0 19px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.field-help{font-size:10px;color:var(--suave);line-height:1.5;margin-top:0}
.form-footer{display:flex;align-items:center;justify-content:space-between;gap:20px}
.form-footer p{font-size:11px;color:var(--suave);max-width:240px;margin:0}
.guide-card{border-radius:16px;background:#05263a;color:#fff;padding:26px 24px;overflow:hidden;position:relative}
.guide-card h2{font-size:17px;line-height:1.5;letter-spacing:-.02em}.guide-card h2 em{color:#a4c557;font-style:normal}
.guide-card ol{list-style:none;counter-reset:step;padding:0;margin:27px 0 0}
.guide-card li{counter-increment:step;position:relative;padding:0 0 24px 36px;font-size:11px;color:#a7becb}
.guide-card li:last-child{padding-bottom:0}
.guide-card li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;font-size:10px;color:#a4c557;border:1px solid #a4c55740;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-weight:800}
.guide-card li b{display:block;color:#f5f8fa;font-size:12px;margin-bottom:4px}
.guide-note{font-size:11px;color:var(--suave);padding:18px 4px;line-height:1.8}
.guide-note a{color:#365d89;font-weight:700}
.status-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 23px;background:white;border:1px solid var(--linha);border-radius:14px;margin-bottom:26px}
.status-panel h2{font-size:14px;margin:0 0 5px}.status-panel p{font-size:12px;color:var(--suave);margin:0}
.table-note{color:var(--suave);font-size:11px;margin:14px 0 25px}
.history-text{font-family:var(--mono);font-size:11px;max-width:700px;overflow-wrap:anywhere}
.msg-erro,.msg-ok{padding:12px 15px;font-size:12px}
.conteudo[aria-busy=true]{opacity:.55;cursor:progress;pointer-events:none;transition:opacity .15s}
.mobile-shade{display:none}
@media(min-width:1600px){.conteudo{padding:40px 48px 64px}.topbar{padding-left:48px;padding-right:48px}}
@media(max-width:1250px){:root{--lateral:216px}.conteudo{padding:28px 24px 44px}.topbar{padding-left:24px;padding-right:24px}.filtros{grid-template-columns:repeat(3,minmax(120px,1fr))}.form-layout{grid-template-columns:minmax(0,1fr) 240px;gap:18px}.guide-card{padding:22px 18px}.kpi{padding:20px}.kpi-icon{right:17px}}
@media(max-width:1000px){.form-layout{grid-template-columns:1fr}.form-aside{display:none}.topbar-date{display:none}.kpi .val{font-size:27px}.kpi-icon{display:none}}
@media(max-width:860px){.layout{display:block}.lateral{position:fixed;inset:0 auto 0 0;width:244px;height:100dvh;display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;transform:translateX(-100%);transition:transform .2s}.marca{padding:30px 15px}.marca .app{display:block}.menu{display:block;padding:16px 0;flex:1;overflow:auto}.menu-grupo{display:block}.menu a{white-space:normal}.rodape-lateral{flex:0 0 auto}.menu-toggle{display:flex}.menu-aberto .lateral{transform:translateX(0)}.menu-aberto .mobile-shade{display:block;position:fixed;inset:0;background:#05263a80;backdrop-filter:blur(2px);border:0;z-index:40}.topbar{height:65px;padding:0 20px}.breadcrumb{margin-right:auto}.breadcrumb>span:first-child,.breadcrumb .sep{display:none}.conteudo{padding:26px 20px 40px}.kpis{gap:12px}.kpi .val{font-size:26px}.pagina-topo h1{font-size:25px}.passos{grid-template-columns:1fr}}
@media(max-width:650px){.pagina-topo{align-items:flex-start;margin-bottom:22px}.page-actions .btn{font-size:11px;padding:9px 13px}.kpis{grid-template-columns:1fr}.kpi,.kpi.alerta{padding:15px 18px;display:grid;grid-template-columns:1fr auto;column-gap:14px}.kpi .val{grid-column:2;grid-row:1/3;align-self:center;margin:0;font-size:26px}.kpi-foot{font-size:10px}.kpi .rot{font-size:11px}.filtros{grid-template-columns:1fr 1fr;padding:18px;gap:15px 12px}.filtros .acoes{grid-column:1/-1}.filter-caption span{display:none}.conteudo{padding:24px 16px 35px}.topbar{padding:0 16px}.workspace-label{font-size:10px}.filtros.fechamento-form{display:block;padding:21px}.form-grid{grid-template-columns:1fr;gap:17px}.form-footer{align-items:stretch;flex-direction:column;gap:14px}.form-footer p{max-width:none}.paginacao{flex-wrap:wrap;justify-content:flex-end}.paginacao>span{flex-basis:100%}.dados-remessa{grid-template-columns:1fr 1fr;gap:18px}.dados-remessa b{font-size:12px}.passo{flex-wrap:wrap}.passo .btn{margin-left:48px}.status-panel{padding:18px;align-items:flex-start;flex-direction:column}.section-heading{align-items:flex-start}.table-note{line-height:1.7}.page-actions{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* ------------------------------------------------------------------ login

   Simples de proposito. O app.css ja desenhava um cartao centralizado; o tema
   tinha trocado isso por uma vitrine em tela dividida — manchete de campanha,
   selo, chips de recurso, circulos decorativos. Para uma ferramenta interna,
   usada por um punhado de pessoas que ja sabem o que ela faz, aquilo era
   propaganda no lugar de porta de entrada. Voltou a ser porta de entrada.

   O que sobrou e o que a tela precisa: de quem e o sistema, o que e, os dois
   campos, e em qual banco se esta antes de digitar a senha. */

.tela-login{min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:var(--papel)}
.caixa-login{width:100%;max-width:372px;background:var(--superficie);
  border:1px solid var(--linha);border-radius:14px;box-shadow:var(--sombra);padding:34px 32px}

.caixa-login .logo{display:flex;margin-bottom:26px}
.caixa-login .logo img{height:30px;width:auto;object-fit:contain;object-position:left}
.caixa-login h1{font-family:var(--heading);font-size:19px;letter-spacing:-.02em;margin:0 0 5px}
.caixa-login .sub{font-size:12.5px;color:var(--suave);margin-bottom:24px;line-height:1.6}

.caixa-login .campo{margin-bottom:15px}
.caixa-login .campo label{font-size:12px;font-weight:700;color:var(--tinta-2)}
.caixa-login input{height:44px;font-size:14px;border-radius:9px;background:#fbfcfd}
.caixa-login input:focus{background:#fff}
.password-wrap{position:relative}.password-wrap input{padding-right:46px}
.password-toggle{position:absolute;right:6px;top:6px;width:32px;height:32px;display:grid;
  place-items:center;border:0;background:transparent;border-radius:6px;color:#6d8290;cursor:pointer}
.password-toggle svg{width:18px;height:18px}.password-toggle:hover{background:#edf2f6}

.caixa-login .btn{width:100%;height:44px;margin-top:8px;font-size:13px}

.caixa-login .rodape{margin-top:20px;text-align:center;font-size:11px;color:var(--suave);line-height:1.6}

.msg-erro,.msg-ok{padding:11px 13px;font-size:12px}

@media(max-width:480px){.tela-login{padding:16px}.caixa-login{padding:28px 22px}}

/* Aviso clicavel: o do fechamento concluido leva para a remessa que nasceu. */
.toast.clicavel{cursor:pointer;border:1px solid var(--verde);padding-right:16px}
.toast.clicavel::after{content:'›';margin-left:10px;font-size:17px;opacity:.7}
.toast.clicavel:hover{filter:brightness(.98)}

/* ------------------------------------------------------------------ modal

   Substitui o `confirm()` do navegador. Aquele nao formata data, nao separa o
   que e dado do que e aviso, mostra o dominio do site no titulo e tem a mesma
   cara para "registrar baixa" e para "cancelar fatura, que e irreversivel".
   Aqui o dado vira lista rotulada, o aviso tem cor propria, e a acao destrutiva
   pinta o botao de vermelho. */

.modal-fundo{position:fixed;inset:0;z-index:200;background:#05263a5c;backdrop-filter:blur(2px);
  display:grid;place-items:center;padding:24px;animation:modal-entra .12s ease-out}
.modal{background:var(--superficie);border-radius:16px;box-shadow:0 18px 60px #05263a2e;
  width:100%;max-width:430px;padding:28px 28px 24px;animation:modal-sobe .14s ease-out}
@keyframes modal-entra{from{opacity:0}to{opacity:1}}
@keyframes modal-sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.com-modal{overflow:hidden}

.modal h2{font-family:var(--heading);font-size:17px;letter-spacing:-.02em;margin:0 0 4px}
.modal-texto{font-size:12.5px;color:var(--suave);line-height:1.6;margin:8px 0 0}

.modal-dados{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:20px 0 0;
  padding:16px 0;border-top:1px solid var(--linha-2);border-bottom:1px solid var(--linha-2)}
.modal-dados dt{font-size:11.5px;color:var(--suave);white-space:nowrap}
.modal-dados dd{margin:0;font-size:12.5px;color:var(--tinta);text-align:right;overflow-wrap:anywhere}
.modal-dados dd.forte{font-weight:800}

.modal-aviso{margin-top:16px;padding:11px 13px;border-radius:9px;font-size:12px;line-height:1.55;
  background:var(--alerta-fundo);color:var(--alerta)}
.modal.perigo .modal-aviso{background:var(--perigo-fundo);color:var(--perigo)}

.modal-campo{display:block;margin-top:18px}
.modal-campo span{display:block;font-size:12px;font-weight:700;color:var(--tinta-2);margin-bottom:6px}
.modal-campo input{width:100%;height:44px;border:1px solid #dae3e9;border-radius:9px;background:#fbfcfd;
  padding:8px 12px;font-family:var(--sans);font-size:13px;color:var(--tinta)}
.modal-campo input:focus{outline:0;background:#fff;border-color:var(--verde);box-shadow:0 0 0 3px #a4c5572e}
.modal-campo input.invalido{border-color:var(--perigo);box-shadow:0 0 0 3px #ad383b1f}

.modal-acoes{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}
.modal-acoes .btn{min-width:112px}

@media(max-width:480px){
  .modal{padding:22px 20px 20px}
  .modal-acoes{flex-direction:column-reverse}
  .modal-acoes .btn{width:100%}
  .modal-dados{grid-template-columns:1fr;gap:2px 0}
  .modal-dados dd{text-align:left;margin-bottom:8px}
}

/* Barra de progresso no topo. Indeterminada de proposito: o servidor nao sabe
   dizer quanto falta, e uma barra que finge saber e pior do que uma que so
   diz "estou trabalhando". Fica acima do menu lateral e abaixo do modal. */
.barra-carregando{position:fixed;top:0;left:0;right:0;height:3px;z-index:150;overflow:hidden;
  pointer-events:none;opacity:0;transition:opacity .15s;background:#a4c5571f}
.barra-carregando.ativa{opacity:1}
.barra-carregando span{display:block;height:100%;width:40%;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,#a4c55700,var(--verde) 55%,var(--verde-tinta));
  animation:barra-desliza 1.15s cubic-bezier(.65,.05,.36,1) infinite}
@keyframes barra-desliza{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
/* Sem animacao para quem pediu menos movimento: vira um traco estatico, que
   ainda assim distingue "carregando" de "pronto". */
@media(prefers-reduced-motion:reduce){
  .barra-carregando span{animation:none;width:100%;background:var(--verde)}
}

/* Semaforo do pedido. O rotulo anda junto do ponto de proposito: cor sozinha
   nao informa quem nao distingue vermelho de verde, e "aguardando" e
   "processando" sao exatamente a distincao que o operador precisa fazer. */
.semaforo{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px;color:var(--tinta-2)}
.semaforo::before{content:'';flex:0 0 auto;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 3px #05263a0d}
.semaforo.espera::before{background:#c8452f}
.semaforo.andamento::before{background:#e0a21a;animation:semaforo-pulsa 1.2s ease-in-out infinite}
.semaforo.pronto::before{background:var(--verde)}
.semaforo.falha::before{background:var(--perigo)}
@keyframes semaforo-pulsa{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.semaforo.andamento::before{animation:none}}

/* Abas. A borda de baixo da barra e a que o botao ativo interrompe, por isso o
   margin-bottom negativo: e o que faz a aba parecer presa ao painel. */
.abas{display:flex;align-items:flex-end;gap:2px;margin:0 0 16px;border-bottom:1px solid var(--linha)}
.abas button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:11px 16px;font:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--suave);
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;border-radius:8px 8px 0 0}
.abas button:hover{color:var(--tinta-2);background:var(--superficie-2)}
.abas button.ativa{color:var(--tinta);border-bottom-color:var(--verde)}
.abas button .contador{font-size:11px;font-weight:600;line-height:1.6;padding:1px 8px;border-radius:999px;
  background:var(--linha-2);color:var(--tinta-2)}
.abas button.ativa .contador{background:var(--verde-fundo);color:var(--verde-tinta)}
.painel-nota{margin:0 0 13px;font-size:11px;color:var(--suave)}
/* Quando o pedido terminou. So aparece nas linhas ja concluidas, e importa
   porque a lista guarda 24 horas: "concluido" sem horario nao diz se foi agora
   ou ontem a noite. */
.semaforo-quando{display:block;margin:3px 0 0 16px;font-size:11px;color:var(--suave)}