/* =====================================================================
   ComReserva — Painel administrativo
   ===================================================================== */

:root{
  --verde:#3CCB63;
  --verde-esc:#199A47;
  --verde-fundo:#EDFBF1;
  --verde-borda:#C8EFD4;

  --tinta:#0B1F13;
  --texto:#1D2939;
  --cinza:#667085;
  --cinza-claro:#98A2B3;
  --borda:#E9ECEF;
  --fundo:#F5F7F6;
  --branco:#fff;

  --azul:#2E90FA;  --azul-f:#EFF8FF;
  --roxo:#7A5AF8;  --roxo-f:#F4F3FF;
  --laranja:#F79009; --laranja-f:#FFFAEB;
  --vermelho:#F04438; --vermelho-f:#FEF3F2;
  --rosa:#EE46BC;  --rosa-f:#FDF2FA;
  --ciano:#06AED4; --ciano-f:#ECFDFF;

  --r:14px;
  --sombra:0 1px 2px rgba(16,24,40,.05);
  --sombra-md:0 4px 16px rgba(16,24,40,.07);
  --lateral:250px;
}

*{box-sizing:border-box}
/* Qualquer regra nossa com display: flex ou grid passa por cima do
   hidden do navegador. Sem isto, uma div escondida aparece vazia. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--fundo);
  color:var(--texto);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.02em}

/* ---------- Estrutura ---------- */
.app{display:flex;min-height:100vh}

.lateral{
  width:var(--lateral);flex:0 0 var(--lateral);
  background:var(--branco);border-right:1px solid var(--borda);
  padding:20px 14px;position:fixed;top:0;bottom:0;left:0;
  overflow-y:auto;z-index:60;transition:transform .25s ease;
}
.marca{display:flex;align-items:center;gap:10px;padding:0 8px 20px}
.marca i{
  width:38px;height:38px;border-radius:11px;background:var(--verde);
  display:grid;place-items:center;font-style:normal;font-size:19px;flex:0 0 38px;
}
.marca b{font-size:17px;letter-spacing:-.4px;display:block;color:var(--tinta)}
.marca span{font-size:9.5px;letter-spacing:.16em;color:var(--cinza-claro);text-transform:uppercase;font-weight:700}

.destaque{
  background:linear-gradient(140deg,#F04438,#E31B54);color:#fff;
  border-radius:var(--r);padding:15px 16px;margin-bottom:18px;
}
.destaque .n{font-size:29px;font-weight:800;line-height:1;letter-spacing:-.03em}
.destaque .t{font-size:11.5px;opacity:.92;margin-top:5px;line-height:1.35}

.grupo{font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--cinza-claro);
       text-transform:uppercase;padding:16px 10px 7px}

.nav a{
  display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;
  color:var(--cinza);font-weight:600;font-size:14px;margin-bottom:2px;transition:.14s;
}
.nav a:hover{background:var(--fundo);color:var(--texto)}
.nav a.on{background:var(--verde-fundo);color:#0A6B33}
.nav a .ic{width:19px;text-align:center;font-size:15px;flex:0 0 19px}
.nav a .tag{
  margin-left:auto;background:var(--fundo);color:var(--cinza);
  border-radius:20px;padding:1px 8px;font-size:11px;font-weight:800;
}
.nav a.on .tag{background:var(--verde);color:#06301A}
.nav a .tag.quente{background:var(--vermelho);color:#fff}

.principal{flex:1;min-width:0;margin-left:var(--lateral)}

/* ---------- Topo ---------- */
.topo{
  background:var(--branco);border-bottom:1px solid var(--borda);
  padding:13px 26px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:50;
}
.topo .abrir{display:none;background:none;border:0;font-size:22px;cursor:pointer;color:var(--texto);padding:0 2px}
.topo .titulo{font-size:15px;font-weight:700}
.topo .titulo small{display:block;font-size:11.5px;color:var(--cinza-claro);font-weight:500}
.busca{
  flex:1;max-width:380px;margin-left:auto;position:relative;
}
.busca input{
  width:100%;padding:9px 14px 9px 36px;border:1px solid var(--borda);
  border-radius:10px;background:var(--fundo);font-size:13.5px;
}
.busca input:focus{outline:none;border-color:var(--verde);background:var(--branco)}
.busca .lupa{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--cinza-claro);font-size:13px}
.topo .acoes{display:flex;align-items:center;gap:9px}
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--verde);
  display:grid;place-items:center;font-weight:800;font-size:13px;color:#06301A;flex:0 0 34px;
}

.conteudo{padding:22px 26px 60px;max-width:1500px}

/* ---------- Cabeçalho de página ---------- */
.pagina-topo{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;margin-bottom:20px}
.pagina-topo h1{font-size:26px;font-weight:800}
.pagina-topo p{margin:5px 0 0;color:var(--cinza);font-size:13.5px}
.pagina-topo .dir{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
/* Saudação de quem entrou. Discreta de propósito: cumprimenta e sai da
   frente do que interessa na tela. */
.saudacao{
  display:inline-block;color:var(--cinza);font-size:13px;
  font-weight:600;margin-bottom:5px;
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:10px;border:1px solid var(--borda);
  background:var(--branco);color:var(--texto);font-weight:700;font-size:13.5px;
  cursor:pointer;transition:.14s;white-space:nowrap;
}
.btn:hover{background:var(--fundo)}
.btn-verde{background:var(--verde);border-color:var(--verde);color:#06301A}
.btn-verde:hover{background:var(--verde-esc);border-color:var(--verde-esc);color:#fff}
.btn-escuro{background:var(--tinta);border-color:var(--tinta);color:#fff}
.btn-escuro:hover{background:#000}
.btn-vermelho{background:var(--vermelho);border-color:var(--vermelho);color:#fff}
.btn-vermelho:hover{filter:brightness(.92)}
.btn-pequeno{padding:6px 11px;font-size:12.5px;border-radius:8px}
.btn-largo{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Cartões ---------- */
.cartao{
  background:var(--branco);border:1px solid var(--borda);
  border-radius:var(--r);box-shadow:var(--sombra);
}
.cartao-topo{
  padding:16px 18px;border-bottom:1px solid var(--borda);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.cartao-topo h3{font-size:15px;font-weight:800}
.cartao-topo p{margin:3px 0 0;font-size:12.5px;color:var(--cinza)}
.cartao-topo .dir{margin-left:auto;display:flex;gap:8px;align-items:center}
.cartao-corpo{padding:18px}
.cartao-corpo.sem{padding:0}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.kpi{
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--r);
  padding:15px 16px 14px;box-shadow:var(--sombra);position:relative;overflow:hidden;
}
.kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--verde)}
.kpi.azul::before{background:var(--azul)} .kpi.roxo::before{background:var(--roxo)}
.kpi.laranja::before{background:var(--laranja)} .kpi.vermelho::before{background:var(--vermelho)}
.kpi.rosa::before{background:var(--rosa)} .kpi.ciano::before{background:var(--ciano)}
.kpi .cab{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.kpi .ico{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;font-size:14px;background:var(--verde-fundo);flex:0 0 31px}
.kpi.azul .ico{background:var(--azul-f)} .kpi.roxo .ico{background:var(--roxo-f)}
.kpi.laranja .ico{background:var(--laranja-f)} .kpi.vermelho .ico{background:var(--vermelho-f)}
.kpi.rosa .ico{background:var(--rosa-f)} .kpi.ciano .ico{background:var(--ciano-f)}
.kpi .rot{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--cinza-claro);text-transform:uppercase;line-height:1.3}
.kpi .num{font-size:31px;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--tinta)}
.kpi .num small{font-size:15px;font-weight:700}
.kpi .pe{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:11.5px;color:var(--cinza)}
.variacao{font-weight:800;border-radius:20px;padding:1px 7px;font-size:10.5px;white-space:nowrap}
.variacao.sobe{background:var(--verde-fundo);color:#0A6B33}
.variacao.desce{background:var(--vermelho-f);color:#B42318}
.variacao.neutro{background:var(--fundo);color:var(--cinza)}

/* ---------- Grades ---------- */
.grade{display:grid;gap:16px;margin-bottom:16px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}

/* ---------- Gráficos ---------- */
.grafico{width:100%;display:block}
.grafico-caixa{position:relative;min-height:60px}
.legenda{display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:14px}
.legenda span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--cinza);font-weight:600}
.legenda i{width:9px;height:9px;border-radius:3px;flex:0 0 9px}
.legenda b{color:var(--texto)}

.donut-centro{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;
}
.donut-centro .n{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--tinta)}
.donut-centro .t{font-size:10.5px;color:var(--cinza-claro);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:3px}

/* ---------- Barras horizontais ---------- */
.barras{display:flex;flex-direction:column;gap:13px}
.barra .cab{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;gap:10px}
.barra .cab b{font-weight:700}
.barra .cab span{color:var(--cinza);font-weight:600;white-space:nowrap}
.barra .trilho{height:8px;background:var(--fundo);border-radius:20px;overflow:hidden}
.barra .cheia{height:100%;border-radius:20px;background:var(--verde);transition:width .7s cubic-bezier(.2,.8,.3,1)}

/* ---------- Tabela ---------- */
.tabela-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tab{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px}
table.tab th{
  text-align:left;padding:11px 16px;font-size:10.5px;font-weight:800;
  color:var(--cinza-claro);text-transform:uppercase;letter-spacing:.09em;
  border-bottom:1px solid var(--borda);background:#FCFCFD;white-space:nowrap;
}
table.tab td{padding:13px 16px;border-bottom:1px solid var(--borda);vertical-align:middle}
table.tab tr:last-child td{border-bottom:0}
table.tab tbody tr:hover{background:#FCFDFC}
.linha-titulo{font-weight:700;color:var(--tinta)}
.linha-sub{font-size:12px;color:var(--cinza-claro);margin-top:2px}
.celula-pessoa{display:flex;align-items:center;gap:10px}
.mini-avatar{
  width:33px;height:33px;border-radius:10px;flex:0 0 33px;display:grid;place-items:center;
  font-weight:800;font-size:12px;color:#fff;background:var(--cinza-claro);
}

/* ---------- Selos de status ---------- */
.selo{
  display:inline-flex;align-items:center;gap:5px;border-radius:20px;
  padding:3px 10px;font-size:11.5px;font-weight:800;white-space:nowrap;
}
.selo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.selo.verde{background:var(--verde-fundo);color:#0A6B33}
.selo.azul{background:var(--azul-f);color:#175CD3}
.selo.laranja{background:var(--laranja-f);color:#B54708}
.selo.vermelho{background:var(--vermelho-f);color:#B42318}
.selo.roxo{background:var(--roxo-f);color:#5925DC}
.selo.cinza{background:var(--fundo);color:var(--cinza)}

/* ---------- Colunas de chamados (kanban) ---------- */
.colunas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.coluna{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r);overflow:hidden}
.coluna > .cab{
  padding:13px 15px;border-bottom:1px solid var(--borda);
  display:flex;align-items:center;gap:9px;font-weight:800;font-size:13.5px;
}
.coluna > .cab .bolinha{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.coluna > .cab .qtd{margin-left:auto;background:var(--fundo);border-radius:20px;padding:1px 9px;font-size:11.5px;color:var(--cinza)}
.coluna .lista{padding:12px;display:flex;flex-direction:column;gap:10px;min-height:70px}
.ficha{
  display:block;border:1px solid var(--borda);border-radius:11px;padding:12px 13px;
  background:var(--branco);transition:.15s;border-left-width:3px;
}
.ficha:hover{box-shadow:var(--sombra-md);transform:translateY(-1px)}
.ficha .as{font-weight:700;font-size:13.5px;margin-bottom:5px;line-height:1.35}
.ficha .me{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:11.5px;color:var(--cinza-claro)}
.vazio-coluna{text-align:center;color:var(--cinza-claro);font-size:12.5px;padding:22px 10px}

/* ---------- Formulários ---------- */
.campo{margin-bottom:15px}
.campo label{display:block;font-weight:700;font-size:12.5px;margin-bottom:6px;color:var(--texto)}
.campo .dica{font-size:11.5px;color:var(--cinza-claro);margin-top:5px;line-height:1.45}
.campo input,.campo select,.campo textarea{
  width:100%;padding:10px 13px;border:1px solid var(--borda);border-radius:10px;
  background:var(--branco);font-size:14px;color:var(--texto);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(47,220,70,.14);
}
.campo textarea{min-height:96px;resize:vertical}
.campo input[type=color]{padding:4px;height:42px;cursor:pointer}
.linha-campos{display:grid;gap:0 14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
fieldset{border:1px solid var(--borda);border-radius:12px;padding:16px;margin:0 0 16px}
legend{font-weight:800;font-size:12.5px;padding:0 7px;color:var(--cinza)}

/* ---------- Avisos ---------- */
.aviso{
  border-radius:11px;padding:13px 15px;margin-bottom:16px;font-size:13.5px;
  display:flex;gap:10px;align-items:flex-start;line-height:1.5;
}
.aviso.ok{background:var(--verde-fundo);border:1px solid var(--verde-borda);color:#0A6B33}
.aviso.erro{background:var(--vermelho-f);border:1px solid #FECDCA;color:#B42318}
.aviso.info{background:var(--azul-f);border:1px solid #B9E6FE;color:#026AA2}
.aviso.atencao{background:var(--laranja-f);border:1px solid #FEDF89;color:#B54708}
.aviso b{font-weight:800}

/* ---------- Diversos ---------- */
.vazio{text-align:center;padding:52px 20px;color:var(--cinza)}
.vazio .ic{font-size:40px;margin-bottom:12px;opacity:.35}
.vazio h4{font-size:15px;margin-bottom:6px;color:var(--texto)}
.vazio p{margin:0 0 16px;font-size:13.5px}

.abas{display:flex;gap:5px;border-bottom:1px solid var(--borda);margin-bottom:18px;overflow-x:auto}
.abas a{
  padding:9px 15px;font-weight:700;font-size:13.5px;color:var(--cinza);
  border-bottom:2px solid transparent;white-space:nowrap;
}
.abas a.on{color:var(--tinta);border-bottom-color:var(--verde)}

.copiavel{
  display:flex;align-items:center;gap:9px;background:var(--fundo);
  border:1px dashed var(--borda);border-radius:10px;padding:9px 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  word-break:break-all;line-height:1.5;
}
.copiavel button{margin-left:auto;flex:0 0 auto}

.conversa{display:flex;flex-direction:column;gap:12px;max-height:460px;overflow-y:auto;padding:4px}
.balao{max-width:78%;border-radius:14px;padding:11px 14px;font-size:13.5px;line-height:1.5}
.balao .quem{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;opacity:.65;margin-bottom:4px}
.balao.deles{background:var(--fundo);border:1px solid var(--borda);align-self:flex-start;border-bottom-left-radius:4px}
.balao.nossa{background:var(--verde-fundo);border:1px solid var(--verde-borda);align-self:flex-end;border-bottom-right-radius:4px}
.balao .hora{font-size:10.5px;color:var(--cinza-claro);margin-top:5px}

.veu{
  position:fixed;inset:0;background:rgba(11,31,19,.45);z-index:70;
  display:none;align-items:center;justify-content:center;padding:18px;
}
.veu.mostra{display:flex}
.modal{
  background:var(--branco);border-radius:16px;width:100%;max-width:520px;
  max-height:88vh;overflow-y:auto;box-shadow:0 20px 50px rgba(16,24,40,.22);
}
.modal .cab{padding:17px 20px;border-bottom:1px solid var(--borda);display:flex;align-items:center}
.modal .cab h3{font-size:16px;font-weight:800}
.modal .cab button{margin-left:auto;background:none;border:0;font-size:20px;cursor:pointer;color:var(--cinza-claro);line-height:1}
.modal .corpo{padding:20px}
.modal .pe{padding:14px 20px;border-top:1px solid var(--borda);display:flex;gap:9px;justify-content:flex-end}

.sombra-lateral{display:none;position:fixed;inset:0;background:rgba(11,31,19,.4);z-index:55}
.sombra-lateral.mostra{display:block}

/* ---------- Login ---------- */
.tela-login{
  min-height:100vh;display:grid;place-items:center;padding:22px;
  background:radial-gradient(1100px 600px at 80% -10%,rgba(47,220,70,.16),transparent 60%),var(--fundo);
}
.caixa-login{width:100%;max-width:400px}
.caixa-login .marca{justify-content:center;padding-bottom:26px}
.caixa-login .cartao{padding:28px 26px}
.caixa-login h2{font-size:20px;margin-bottom:5px;text-align:center}
.caixa-login .sub{text-align:center;color:var(--cinza);font-size:13.5px;margin:0 0 22px}
.rodape-login{text-align:center;margin-top:20px;font-size:12px;color:var(--cinza-claro)}

/* ---------- Responsivo ---------- */
@media (max-width:1120px){
  .g-3{grid-template-columns:repeat(2,1fr)}
  .g-2-1,.g-1-2{grid-template-columns:1fr}
}
@media (max-width:900px){
  .lateral{transform:translateX(-100%);box-shadow:0 0 40px rgba(16,24,40,.16)}
  .lateral.aberta{transform:none}
  .principal{margin-left:0}
  .topo .abrir{display:block}
  .colunas{grid-template-columns:1fr}
  .g-2,.g-3{grid-template-columns:1fr}
  .conteudo{padding:16px 14px 60px}
  .topo{padding:11px 14px}
  .busca{display:none}
  .pagina-topo h1{font-size:21px}
  .kpi .num{font-size:26px}
}
@media (max-width:560px){
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi{padding:13px 12px}
  .kpi .num{font-size:22px}
  .kpi .rot{font-size:9px}
  .kpi .ico{width:27px;height:27px;font-size:12px;flex-basis:27px}
  .pagina-topo .dir{width:100%}
  .pagina-topo .dir .btn{flex:1}
}

/* ---------- Impressão ---------- */
@media print{
  .lateral,.topo,.pagina-topo .dir{display:none}
  .principal{margin-left:0}
  .cartao{break-inside:avoid;box-shadow:none}
}

/* =====================================================================
   VISUAL 2 — ícones desenhados, cor por seção, botões com relevo
   ===================================================================== */

:root{
  --i-azul:#2E90FA;   --i-azul-f:#E8F2FE;
  --i-roxo:#7A5AF8;   --i-roxo-f:#EFEDFE;
  --i-laranja:#F79009;--i-laranja-f:#FEF3E2;
  --i-rosa:#EE46BC;   --i-rosa-f:#FDEDF8;
  --i-ciano:#06AED4;  --i-ciano-f:#E4F8FC;
  --i-ambar:#EAB308;  --i-ambar-f:#FDF6E0;
  --i-indigo:#4F46E5; --i-indigo-f:#ECEBFC;
  --i-vermelho:#F04438;--i-vermelho-f:#FEECEA;
  --i-verde:#12B76A;  --i-verde-f:#E4F8EE;
}

.svgi{display:block;flex:0 0 auto;vertical-align:middle}

/* ---------- Menu lateral ---------- */
.nav a{
  gap:12px;padding:9px 10px;border-radius:12px;font-size:14px;font-weight:600;
  position:relative;
}
.nav a .ic{
  width:32px;height:32px;flex:0 0 32px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--tom-f,var(--fundo));color:var(--tom,var(--cinza));
  transition:transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .16s;
}
.nav a:hover{background:var(--fundo)}
.nav a:hover .ic{transform:translateY(-1px) scale(1.04)}

.nav a.on{background:transparent;color:var(--tinta);font-weight:700}
.nav a.on .ic{
  background:var(--tom,var(--verde));color:#fff;
  box-shadow:0 4px 12px color-mix(in srgb,var(--tom,var(--verde)) 40%,transparent);
}
/* Marca fina à esquerda do item ativo */
.nav a.on::before{
  content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--tom,var(--verde));
}

.nav a[data-tom="azul"]    {--tom:var(--i-azul);    --tom-f:var(--i-azul-f)}
.nav a[data-tom="roxo"]    {--tom:var(--i-roxo);    --tom-f:var(--i-roxo-f)}
.nav a[data-tom="laranja"] {--tom:var(--i-laranja); --tom-f:var(--i-laranja-f)}
.nav a[data-tom="rosa"]    {--tom:var(--i-rosa);    --tom-f:var(--i-rosa-f)}
.nav a[data-tom="ciano"]   {--tom:var(--i-ciano);   --tom-f:var(--i-ciano-f)}
.nav a[data-tom="ambar"]   {--tom:var(--i-ambar);   --tom-f:var(--i-ambar-f)}
.nav a[data-tom="indigo"]  {--tom:var(--i-indigo);  --tom-f:var(--i-indigo-f)}
.nav a[data-tom="vermelho"]{--tom:var(--i-vermelho);--tom-f:var(--i-vermelho-f)}
.nav a[data-tom="verde"]   {--tom:var(--i-verde);   --tom-f:var(--i-verde-f)}
.nav a[data-tom="marca"]   {--tom:var(--verde);     --tom-f:var(--verde-fundo)}

.nav a .tag{
  margin-left:auto;min-width:22px;height:22px;border-radius:20px;padding:0 7px;
  display:grid;place-items:center;font-size:11px;font-weight:800;
  background:var(--fundo);color:var(--cinza);
}
.nav a.on .tag{background:var(--tom-f,var(--verde-fundo));color:var(--tom,var(--verde-esc))}
.nav a .tag.quente{
  background:var(--i-vermelho);color:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--i-vermelho) 18%,transparent);
}

/* ---------- Botões ---------- */
.btn{
  gap:8px;border-radius:11px;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:transform .14s cubic-bezier(.2,.9,.3,1), box-shadow .16s, background .14s, border-color .14s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,24,40,.09)}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(16,24,40,.06)}
.btn .svgi{margin:-1px 0}

.btn-verde{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--verde) 92%,white),
    var(--verde));
  border-color:color-mix(in srgb,var(--verde) 80%,black);
}
.btn-verde:hover{
  box-shadow:0 6px 18px color-mix(in srgb,var(--verde) 38%,transparent);
  background:var(--verde);
}
.btn-escuro{background:linear-gradient(180deg,#1F2A24,var(--tinta))}
.btn-vermelho{
  background:linear-gradient(180deg,#F5675C,var(--vermelho));border-color:#D92D20;
}
.btn-vermelho:hover{box-shadow:0 6px 18px rgba(240,68,56,.34)}

.btn-pequeno .svgi{width:15px;height:15px}

/* ---------- Cartões de número ---------- */
.kpi{
  border-radius:16px;transition:transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .18s;
}
.kpi:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,24,40,.09)}
.kpi::before{height:4px;border-radius:16px 16px 0 0}
.kpi .ico .svgi{width:17px;height:17px}
.kpi .cab .ico{
  width:34px;height:34px;flex:0 0 34px;border-radius:11px;
  color:var(--verde-esc);
}
.kpi.azul     .cab .ico{color:var(--i-azul)}
.kpi.roxo     .cab .ico{color:var(--i-roxo)}
.kpi.laranja  .cab .ico{color:var(--i-laranja)}
.kpi.vermelho .cab .ico{color:var(--i-vermelho)}
.kpi.rosa     .cab .ico{color:var(--i-rosa)}
.kpi.ciano    .cab .ico{color:var(--i-ciano)}

/* ---------- Cartões ---------- */
.cartao{border-radius:16px;transition:box-shadow .18s}
.cartao-topo h3{letter-spacing:-.025em}

/* ---------- Selos ---------- */
.selo{border-radius:8px;padding:4px 9px;font-size:11.5px;letter-spacing:-.01em}
.selo::before{width:6px;height:6px}

/* ---------- Topo ---------- */
.topo .abrir{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--borda);
  background:var(--branco);display:grid;place-items:center;color:var(--cinza);
}
.topo .abrir:hover{background:var(--fundo);color:var(--texto)}
.busca .lupa{display:grid;place-items:center;width:17px;height:17px;top:50%}
.busca input{padding-left:38px}
.avatar{
  background:linear-gradient(140deg,color-mix(in srgb,var(--verde) 88%,white),var(--verde));
  box-shadow:0 2px 8px color-mix(in srgb,var(--verde) 34%,transparent);
}

/* ---------- Fichas de chamado ---------- */
.ficha{border-radius:13px;border-left-width:4px}
.ficha:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,24,40,.10)}

/* ---------- Abas ---------- */
.abas a{border-radius:10px 10px 0 0;padding:10px 15px}
.abas a:hover{background:var(--fundo)}
.abas a.on{border-bottom-width:2.5px}

/* ---------- Menu lateral no celular ---------- */
@media (max-width:900px){
  .nav a.on::before{left:-8px}
}

/* =====================================================================
   Sem zoom ao tocar num campo
   ---------------------------------------------------------------------
   O Safari do iPhone dá zoom sozinho quando o campo tem fonte menor que
   16px — e ignora o "maximum-scale". A única solução que funciona de
   verdade é garantir 16px em tudo que recebe digitação.
   ===================================================================== */
input,select,textarea,button{font-size:16px}
.campo input,.campo select,.campo textarea{font-size:16px}
.busca input{font-size:16px}
table.tab input,table.tab select{font-size:16px}

/* No computador o texto pode voltar ao tamanho de leitura: lá não há zoom. */
@media (min-width:901px) and (hover:hover){
  .campo input,.campo select,.campo textarea{font-size:14px}
  .busca input{font-size:13.5px}
  input[type=search]{font-size:13px}
}

/* =====================================================================
   Tabelas que cabem no celular
   ---------------------------------------------------------------------
   Em vez de obrigar a arrastar para o lado, cada linha vira um bloco
   e o cabeçalho da coluna aparece ao lado do valor (via data-rot).
   ===================================================================== */
@media (max-width:820px){
  table.tab.empilha{min-width:0}
  table.tab.empilha thead{position:absolute;left:-9999px}
  table.tab.empilha tr{
    display:block;border:1px solid var(--borda);border-radius:13px;
    padding:13px 15px;margin:0 12px 10px;background:var(--branco);
  }
  table.tab.empilha tbody tr:hover{background:var(--branco)}
  table.tab.empilha td{
    display:flex;gap:14px;align-items:center;justify-content:space-between;
    padding:7px 0;border-bottom:1px solid var(--borda);text-align:right;
  }
  table.tab.empilha td:last-child{border-bottom:0;padding-bottom:0}
  table.tab.empilha td:first-child{
    padding-top:0;text-align:left;font-size:15px;
  }
  table.tab.empilha td::before{
    content:attr(data-rot);
    font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--cinza-claro);text-align:left;flex:0 0 auto;
  }
  table.tab.empilha td:first-child::before{display:none}
  table.tab.empilha td:empty{display:none}
  table.tab.empilha .celula-pessoa{justify-content:flex-start}
  table.tab.empilha .barra{width:100%}
  /* A última célula costuma ser dos botões: ocupa a linha toda */
  table.tab.empilha td.acoes{
    justify-content:flex-end;flex-wrap:wrap;gap:7px;padding-top:11px;
  }
  table.tab.empilha td.acoes::before{display:none}
  .tabela-rolagem:has(table.empilha){overflow-x:visible;padding:12px 0 2px}
}

/* Linha de horário de funcionamento: quebra em vez de esticar */
@media (max-width:820px){
  .linha-horario{flex-direction:column;align-items:stretch !important;gap:11px !important}
  .linha-horario .faixa{margin-left:0 !important;justify-content:space-between}
  .linha-horario .faixa input{flex:1;min-width:0}
  .linha-horario label.dia{min-width:0 !important}
}

/* Tabelas empilháveis são fluidas em qualquer largura: sem largura mínima
   e com cabeçalho que pode quebrar. Assim elas encolhem em vez de exigir
   rolagem lateral em telas médias. */
table.tab.empilha{min-width:0;table-layout:auto}
table.tab.empilha th{white-space:normal;line-height:1.3}
table.tab.empilha td{word-break:break-word}
.tabela-rolagem:has(table.empilha){overflow-x:auto}

/* Tabelas com muitas colunas empilham antes: em telas médias elas nunca
   caberiam sem espremer o texto a ponto de não dar para ler. */
@media (max-width:1180px){
  table.tab.empilha-cedo{min-width:0}
  table.tab.empilha-cedo thead{position:absolute;left:-9999px}
  table.tab.empilha-cedo tr{
    display:block;border:1px solid var(--borda);border-radius:13px;
    padding:13px 15px;margin:0 12px 10px;background:var(--branco);
  }
  table.tab.empilha-cedo tbody tr:hover{background:var(--branco)}
  table.tab.empilha-cedo td{
    display:flex;gap:14px;align-items:center;justify-content:space-between;
    padding:7px 0;border-bottom:1px solid var(--borda);text-align:right;
  }
  table.tab.empilha-cedo td:last-child{border-bottom:0;padding-bottom:0}
  table.tab.empilha-cedo td:first-child{padding-top:0;text-align:left;font-size:15px}
  table.tab.empilha-cedo td::before{
    content:attr(data-rot);
    font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--cinza-claro);text-align:left;flex:0 0 auto;
  }
  table.tab.empilha-cedo td:first-child::before{display:none}
  table.tab.empilha-cedo td:empty{display:none}
  table.tab.empilha-cedo .celula-pessoa{justify-content:flex-start}
  table.tab.empilha-cedo td.acoes{justify-content:flex-end;flex-wrap:wrap;gap:7px;padding-top:11px}
  table.tab.empilha-cedo td.acoes::before{display:none}
}

/* =====================================================================
   Finanças e serviços
   ===================================================================== */

/* Filtros de lista */
.filtros{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--borda);
}
.filtros a{
  padding:6px 13px;border-radius:9px;font-size:13px;font-weight:700;
  color:var(--cinza);border:1px solid transparent;
}
.filtros a:hover{background:var(--fundo)}
.filtros a.on{background:var(--verde-fundo);color:var(--verde-esc);border-color:var(--verde-borda)}
.filtros .soma{margin-left:auto;font-size:13px;color:var(--cinza)}
.filtros .soma b{color:var(--texto)}

/* Barras de recebimento por mês */
.serie-meses{display:flex;align-items:flex-end;gap:6px;height:210px;padding-top:8px}
.col-mes{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%}
.col-mes .haste{
  flex:1;width:100%;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:4px;min-height:0;
}
.col-mes .haste b{
  order:-1;font-size:10px;font-weight:800;color:var(--cinza);white-space:nowrap;
}
.col-mes .haste i{
  display:block;width:100%;max-width:34px;border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,var(--verde),var(--verde-esc));
}
.col-mes span{font-size:11px;color:var(--cinza-claro);font-weight:700;text-transform:capitalize}

.fatia{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--borda);font-size:14px}
.fatia:last-child{border-bottom:0}
.fatia b{margin-left:auto;font-weight:800}
.fatia .pt{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.fatia .pt.ok{background:var(--verde)}
.fatia .pt.az{background:var(--azul)}
.fatia .pt.vm{background:var(--vermelho)}

.tudo-feito{text-align:center;padding:12px 4px;color:var(--cinza)}
.tudo-feito .svgi{color:var(--verde);margin-bottom:6px}
.tudo-feito p{margin:0;font-size:13px}

/* Pílulas de situação */
.pilula{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:800;white-space:nowrap}
.pilula.p-paga,.pilula.p-ativo{background:var(--verde-fundo);color:var(--verde-esc)}
.pilula.p-aberta,.pilula.p-teste{background:var(--azul-f);color:#026AA2}
.pilula.p-atrasada,.pilula.p-suspenso,.pilula.p-cancelado{background:var(--vermelho-f);color:#B42318}
.pilula.p-cancelada{background:var(--fundo);color:var(--cinza)}
.pilula.p-link{background:var(--roxo-f);color:#5925DC}
.linha-alerta{background:color-mix(in srgb,var(--vermelho) 4%,transparent)}
.linha-sub.ruim{color:#B42318;font-weight:700}
.acoes-linha{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* Planos */
.grade-planos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-bottom:18px}
.plano{
  position:relative;background:var(--branco);border:1px solid var(--borda);border-radius:var(--r);
  padding:20px 18px 16px;box-shadow:var(--sombra);display:flex;flex-direction:column;
}
.plano.destacado{border:2px solid var(--verde);box-shadow:0 6px 22px color-mix(in srgb,var(--verde) 22%,transparent)}
.plano.off{opacity:.62}
.plano .fita{
  position:absolute;top:-10px;left:18px;display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:999px;background:var(--verde);color:#06301A;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
}
.plano h3{font-size:16px;font-weight:800;margin:0 0 8px}
.plano .preco b{font-size:28px;font-weight:800;letter-spacing:-1px}
.plano .preco span{font-size:12.5px;color:var(--cinza);margin-left:5px}
.plano .adesao{margin:3px 0 0;font-size:12.5px;color:var(--cinza)}
.plano .desc{margin:9px 0 0;font-size:13px;color:var(--cinza);line-height:1.5}
.plano .recursos{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:6px}
.plano .recursos li{display:flex;align-items:flex-start;gap:7px;font-size:13px}
.plano .recursos .svgi{color:var(--verde);flex:0 0 auto;margin-top:2px}
.plano-pe{display:flex;gap:6px;margin-top:auto;padding-top:16px}
.plano-pe form{display:inline}
.plano .off-selo{
  position:absolute;top:14px;right:14px;font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.4px;color:var(--cinza);background:var(--fundo);padding:3px 8px;border-radius:20px;
}
.plano.novo{
  border:2px dashed var(--borda);background:transparent;box-shadow:none;cursor:pointer;
  align-items:center;justify-content:center;text-align:center;gap:4px;color:var(--cinza);
  font:inherit;min-height:180px;
}
.plano.novo:hover{border-color:var(--verde);color:var(--verde-esc);background:var(--verde-fundo)}
.plano.novo b{font-size:14.5px}
.plano.novo span{font-size:12.5px}

/* Prévia de como o salão enxerga */
.previa{border:1px solid var(--borda);border-radius:12px;overflow:hidden;margin-bottom:12px}
.previa-topo{padding:14px;border-left:4px solid var(--laranja);background:var(--laranja-f)}
.previa-topo span{display:block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.3px;color:#B54708}
.previa-topo b{display:block;font-size:24px;font-weight:800;letter-spacing:-.7px;margin:3px 0 4px}
.previa-topo small{display:flex;align-items:center;gap:5px;font-size:12px;color:#B54708;font-weight:600}
.previa-cuidado{display:flex;gap:8px;padding:11px 14px;background:#FFFBEB;border-top:1px solid #FEDF89;
  font-size:11.5px;line-height:1.45;color:#93370D}
.previa-cuidado .svgi{flex:0 0 auto;margin-top:1px}
.previa-btn{margin:12px 14px;padding:11px;border-radius:10px;background:var(--verde);color:#06301A;
  font-weight:800;font-size:13.5px;text-align:center;display:flex;align-items:center;
  justify-content:center;gap:7px}
.previa-pix{display:flex;align-items:center;gap:8px;margin:0 14px 14px;padding:10px 12px;
  border:1px solid var(--borda);border-radius:10px;font-size:12px}
.previa-pix code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.previa-pix span{color:var(--verde-esc)}

.passos-cobranca{margin:0;padding-left:20px;display:grid;gap:9px;font-size:13px;line-height:1.5;color:var(--cinza)}
.passos-cobranca b{color:var(--texto)}
.passos-cobranca::marker{color:var(--verde)}

.marcador{display:flex;align-items:center;gap:9px;padding:9px 0;font-size:14px;cursor:pointer}
.marcador input{width:17px;height:17px;accent-color:var(--verde);cursor:pointer}

@media(max-width:640px){
  .serie-meses{height:160px;gap:3px}
  .col-mes .haste b{display:none}
  .filtros .soma{width:100%;margin-left:0;order:9}
}

/* Motivo da suspensão: só aparece quando faz sentido */
.motivo-suspensao{display:none}
.motivo-suspensao.aberta{display:block}
.motivo-suspensao textarea{border-color:#FDA29B}
.motivo-suspensao textarea:focus{outline-color:var(--vermelho)}

.mini-cobrancas{display:grid;gap:7px;margin-top:14px;padding-top:14px;border-top:1px solid var(--borda)}
.mini-cobrancas > div{display:flex;align-items:center;gap:9px;font-size:13px}
.mini-cobrancas span{color:var(--cinza)}
.mini-cobrancas b{margin-left:auto}
.mini-cobrancas em{font-style:normal}

/* =====================================================================
   Interessados
   ===================================================================== */
.busca-leads{margin-left:auto}
.busca-leads input{
  padding:7px 13px;border-radius:9px;border:1px solid var(--borda);
  background:var(--branco);font:inherit;font-size:13px;width:220px;
}
.busca-leads input:focus{outline:2px solid var(--verde);border-color:var(--verde)}

.lista-leads{display:flex;flex-direction:column}
.lead{border-bottom:1px solid var(--borda)}
.lead:last-child{border-bottom:0}
.lead.novo{background:color-mix(in srgb,var(--azul) 4%,transparent)}
.lead.aberto{background:var(--fundo)}

.lead-linha{display:flex;align-items:center;gap:13px;padding:14px 18px}
.lead-quem{flex:1;min-width:0}
.lead-nome{
  display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:800;letter-spacing:-.02em;
}
.pontinho{width:7px;height:7px;border-radius:50%;background:var(--azul);display:block;flex:0 0 auto}
.lead-sub{font-size:12.5px;color:var(--cinza);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead-origem{
  display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;
  color:var(--cinza);text-transform:capitalize;white-space:nowrap;
}
.lead-quando{font-size:12px;color:var(--cinza-claro);white-space:nowrap;min-width:82px;text-align:right}
.lead-acoes{display:flex;gap:6px;flex:0 0 auto}
.lead-anotacao{
  display:flex;align-items:flex-start;gap:6px;padding:0 18px 12px 18px;margin-top:-6px;
  font-size:12.5px;color:var(--cinza);line-height:1.5;
}
.lead-anotacao .svgi{flex:0 0 auto;margin-top:2px}

.lead-ficha{padding:4px 18px 20px}
.lead-colunas{display:grid;grid-template-columns:1.35fr 1fr;gap:20px}
.lead-ficha h4{
  display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;color:var(--cinza-claro);margin:0 0 10px;
}
.transcricao{
  margin:0;padding:14px 16px;border-radius:12px;background:var(--branco);
  border:1px solid var(--borda);font:inherit;font-size:13px;line-height:1.65;
  color:var(--texto);white-space:pre-wrap;word-break:break-word;
  max-height:340px;overflow-y:auto;
}
.lead-lado{display:flex;flex-direction:column;gap:16px}
.lead-dados{display:grid;gap:7px;font-size:13.5px}
.lead-dados > div{display:flex;gap:10px;align-items:baseline}
.lead-dados span{
  flex:0 0 92px;font-size:11.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--cinza-claro);
}
.lead-form{display:grid;gap:7px}
.lead-form label{font-size:12px;font-weight:800;color:var(--cinza)}
.lead-form select,.lead-form textarea{
  width:100%;padding:9px 12px;border-radius:9px;border:1px solid var(--borda);
  background:var(--branco);font:inherit;font-size:13.5px;color:var(--texto);
}
.lead-form select:focus,.lead-form textarea:focus{outline:2px solid var(--verde);border-color:var(--verde)}
.lead-form .btn{justify-self:start}

@media(max-width:900px){
  .lead-colunas{grid-template-columns:1fr}
  .lead-linha{flex-wrap:wrap}
  .lead-quem{flex:1 0 100%}
  .lead-quando{margin-left:auto;text-align:right}
  .lead-acoes{flex:1 0 100%;justify-content:flex-end}
  .busca-leads{width:100%;margin-left:0;order:9}
  .busca-leads input{width:100%}
}

/* ---------- Entrega dos acessos ao salão ---------- */
.entrega{display:grid;gap:14px}
.entrega-item{display:flex;gap:12px;align-items:flex-start}
.ic-entrega{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;
  background:var(--fundo);color:var(--cinza);
}
.ic-entrega.verde {background:var(--verde-fundo);color:var(--verde-esc)}
.ic-entrega.azul  {background:var(--i-azul-f);   color:var(--i-azul)}
.ic-entrega.roxo  {background:var(--i-roxo-f);   color:var(--i-roxo)}
.ic-entrega.ambar {background:var(--i-ambar-f);  color:#A16207}
.entrega-txt{flex:1;min-width:0}
.entrega-txt b{display:block;font-size:14px;font-weight:800}
.entrega-txt small{display:block;font-size:12px;color:var(--cinza);margin:1px 0 7px}
.entrega-txt .copiavel{margin:0}

.passos-salao{list-style:none;margin:0;padding:0;counter-reset:ps}
.passos-salao li{
  counter-increment:ps;position:relative;padding:0 0 18px 34px;
}
.passos-salao li:last-child{padding-bottom:0}
.passos-salao li::before{
  content:counter(ps);position:absolute;left:0;top:0;
  width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  background:var(--verde);color:#06301A;font-weight:800;font-size:12px;
}
.passos-salao b{display:block;font-size:14px;font-weight:800;margin-bottom:3px}
.passos-salao span{display:block;font-size:13px;color:var(--cinza);line-height:1.6}
.passos-salao .copiavel{margin-top:8px}

.pilula.p-conferindo{background:var(--i-azul-f);color:#175CD3}
.conferir .cartao-topo h2{color:#175CD3}
.conferir-acoes{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap}
@media(max-width:640px){.conferir-acoes{flex:1 0 100%;justify-content:flex-end}}

.cron-linha{
  background:var(--tinta);color:#D9FBE0;padding:12px 14px;border-radius:9px;
  font-size:11.5px;overflow-x:auto;margin:10px 0 0;line-height:1.5;
}

/* ---------------------------------------------------------------------
   A marca ComReserva
   ---------------------------------------------------------------------
   O lockup já traz o nome desenhado, então o texto ao lado some e sobra
   só a legenda de qual painel é este.
   ------------------------------------------------------------------ */
.marca{flex-direction:column;align-items:flex-start;gap:4px}
.marca-logo{
  width:auto;height:26px;max-width:100%;display:block;
}
.marca-sub{
  font-size:9.5px;letter-spacing:.16em;color:var(--cinza-claro);
  text-transform:uppercase;font-weight:700;padding-left:2px;
}
.caixa-login .marca{align-items:center;gap:6px}
.caixa-login .marca-logo{height:34px}

/* Em fundo escuro, a versão branca */
body.escuro .marca-logo{content:url("comreserva-logo-branca.png")}

/* =====================================================================
   Cobranças — uma linha por mensalidade
   ---------------------------------------------------------------------
   Era uma tabela de sete colunas que, em qualquer largura, espremia o
   valor até quebrar em duas linhas. Agora cada cobrança é uma faixa: o
   mês à esquerda, quem deve no meio, o valor e o que fazer à direita.
   ===================================================================== */
.cobrancas{display:flex;flex-direction:column}

.cobranca{
  display:flex;align-items:center;gap:15px;padding:13px 18px;
  border-bottom:1px solid var(--borda);border-left:3px solid transparent;
}
.cobranca:last-child{border-bottom:0}
.cobranca.t-vermelho{border-left-color:var(--vermelho);background:color-mix(in srgb,var(--vermelho) 3%,transparent)}
.cobranca.t-laranja {border-left-color:var(--laranja);background:color-mix(in srgb,var(--laranja) 4%,transparent)}
.cobranca.t-verde   {border-left-color:var(--verde)}
.cobranca.t-azul    {border-left-color:var(--azul)}
.cobranca.t-cinza   {border-left-color:var(--borda);opacity:.7}

.cob-mes{
  width:46px;flex:0 0 46px;text-align:center;border-radius:10px;padding:6px 0;
  background:var(--fundo);border:1px solid var(--borda);
}
.cob-mes b{
  display:block;font-size:13px;font-weight:800;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--texto);line-height:1;
}
.cob-mes span{display:block;font-size:10.5px;color:var(--cinza-claro);font-weight:700;margin-top:2px}

.cob-quem{flex:1;min-width:0}
.cob-quem a{
  display:block;font-size:14.5px;font-weight:800;letter-spacing:-.02em;color:var(--tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cob-quem a:hover{color:var(--verde-esc)}
.cob-prazo{display:block;font-size:12.5px;color:var(--cinza);margin-top:1px}
.cobranca.t-vermelho .cob-prazo{color:#B4392A;font-weight:600}
.cob-suspenso{
  display:inline-flex;align-items:center;gap:4px;margin-top:4px;
  font-size:11px;font-weight:800;color:#B42318;
  background:var(--vermelho-f);border-radius:20px;padding:2px 8px;
}

.cob-valor{flex:0 0 auto;text-align:right;display:grid;gap:4px;justify-items:end;min-width:96px}
.cob-valor b{font-size:15.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.cob-valor .selo{font-size:10.5px;padding:2px 9px}

.cob-acoes{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.cob-acoes form{display:inline}
.cob-quitada{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:700;color:var(--cinza-claro);
}

@media(max-width:820px){
  .cobranca{flex-wrap:wrap;gap:10px 13px}
  .cob-quem{flex:1 0 calc(100% - 60px)}
  .cob-valor{order:3;text-align:left;justify-items:start;
    flex-direction:row;display:flex;gap:9px;align-items:center;min-width:0}
  .cob-acoes{order:4;margin-left:auto}
}

/* O símbolo da marca nos estados vazios */
.vazio .ic img{width:40px;height:auto;opacity:.28;display:block;margin:0 auto}