/* ============================================================
   Controle Financeiro — folha de estilo única
   Paleta: tinta de balancete sobre papel frio, verde-cofre p/ entradas,
   vermelho-carimbo p/ saídas, âmbar p/ o que ainda é previsão.
   ============================================================ */
:root{
  --tinta:#10202b;        /* texto principal / barra lateral */
  --tinta-2:#3c505d;      /* texto secundário */
  --tinta-3:#7a8b96;      /* rótulos, legendas */
  --papel:#eef1f4;        /* fundo da aplicação */
  --superficie:#ffffff;
  --linha:#dde3e8;
  --linha-forte:#c3ccd4;
  --entrada:#0b6e4f;
  --entrada-fraca:#e6f2ec;
  --saida:#b3261e;
  --saida-fraca:#fbeae9;
  --previsto:#8a5a00;
  --previsto-fraco:#fdf3e0;
  --foco:#1c6ea4;
  --raio:6px;
  --sombra:0 1px 2px rgba(16,32,43,.06), 0 4px 14px rgba(16,32,43,.05);
  --largura-menu:236px;
  /* Cor de destaque do painel. Nas páginas públicas o --marca é redefinido
     inline com a cor da loja; aqui dentro ele não era definido em lugar
     nenhum, e as regras que dependem dele ficavam sem cor — chip ativo
     com texto branco sobre fundo transparente, por exemplo. */
  --marca:#0b6e4f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--papel); color:var(--tinta);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.face-titulo{font-family:'Archivo','Inter',system-ui,sans-serif;letter-spacing:-.015em}
h1{font-size:22px;font-weight:700;margin:0}
h2{font-size:16px;font-weight:650;margin:0}
a{color:var(--foco);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-radius:3px}

/* números sempre em mono tabular — o cerne de uma tela financeira */
.num{font-family:'IBM Plex Mono',ui-monospace,'Courier New',monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.entrada{color:var(--entrada)}
.saida{color:var(--saida)}
.apagado{color:var(--tinta-3)}

/* ---------- estrutura ---------- */
.app{display:flex;min-height:100vh}
.menu{
  width:var(--largura-menu);flex:0 0 var(--largura-menu);background:var(--tinta);
  color:#c8d6df;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.menu-marca{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.09)}
.menu-marca strong{display:block;color:#fff;font-family:'Archivo',sans-serif;font-size:15px;letter-spacing:.01em}
.menu-marca span{display:block;font-size:11px;color:#7e97a6;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu nav{padding:12px 10px;flex:1;overflow-y:auto}
.menu-grupo{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#5f7787;padding:14px 10px 6px}
.menu a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--raio);color:#c8d6df;font-size:13.5px}
.menu a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.menu a.ativo{background:var(--entrada);color:#fff;font-weight:550}
.menu-rodape{padding:12px;border-top:1px solid rgba(255,255,255,.09);font-size:12px}
.menu-rodape .quem{color:#fff;font-weight:550}
.menu-rodape .papel{color:#7e97a6;font-size:11px}
.menu-rodape button{margin-top:8px;width:100%;background:rgba(255,255,255,.08);color:#c8d6df;border:0;padding:7px;border-radius:var(--raio);cursor:pointer;font:inherit;font-size:12.5px}
.menu-rodape button:hover{background:rgba(255,255,255,.16);color:#fff}

.conteudo{flex:1;min-width:0;padding:26px 30px 60px}
.cabecalho{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.cabecalho .sub{color:var(--tinta-3);font-size:12.5px;margin-top:4px}

/* ---------- cartões ---------- */
.cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);margin-bottom:20px}
.cartao-topo{padding:13px 16px;border-bottom:1px solid var(--linha);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cartao-corpo{padding:16px}
.cartao-corpo.sem-respiro{padding:0}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:var(--superficie);border:1px solid var(--linha);border-left:3px solid var(--linha-forte);border-radius:var(--raio);padding:14px 16px;box-shadow:var(--sombra)}
.kpi .rotulo{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3)}
.kpi .valor{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:24px;font-weight:600;margin-top:7px;letter-spacing:-.02em}
.kpi .apoio{font-size:12px;color:var(--tinta-3);margin-top:5px}
.kpi.k-entrada{border-left-color:var(--entrada)} .kpi.k-entrada .valor{color:var(--entrada)}
.kpi.k-saida{border-left-color:var(--saida)} .kpi.k-saida .valor{color:var(--saida)}
.kpi.k-resultado{border-left-color:var(--tinta)}

/* ---------- tabelas ---------- */
.rolagem{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{
  background:#f7f9fa;text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tinta-2);font-weight:650;padding:9px 12px;border-bottom:1px solid var(--linha-forte);white-space:nowrap;
}
thead th.num{text-align:right}
tbody td{padding:9px 12px;border-bottom:1px solid var(--linha);vertical-align:middle}
tbody tr:hover{background:#f9fbfc}
tbody tr.linha-edicao:hover{background:transparent}
tfoot td{padding:11px 12px;font-weight:650;background:#f2f5f7;border-top:2px solid var(--linha-forte)}
.tabela-compacta tbody td,.tabela-compacta thead th{padding:6px 9px;font-size:12.5px}

/* ---------- DRE: livro-razão com espinha ---------- */
.dre tbody td:first-child{position:relative;padding-left:20px}
.dre tbody td:first-child::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--linha)}
.dre tr.subtotal td{background:#f2f5f7;font-weight:650}
.dre tr.destaque td{background:var(--tinta);color:#fff;font-weight:650}
.dre tr.destaque td:first-child::before{background:rgba(255,255,255,.25)}
.dre tr.percentual td{font-size:12px;color:var(--tinta-2);font-style:italic;background:#fcfdfd}
.dre tr.percentual td:first-child{padding-left:34px}

/* ---------- selos ---------- */
.selo{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.selo-entrada{background:var(--entrada-fraca);color:var(--entrada)}
.selo-saida{background:var(--saida-fraca);color:var(--saida)}
.selo-previsto{background:var(--previsto-fraco);color:var(--previsto)}
.selo-neutro{background:#eef1f4;color:var(--tinta-2)}

/* ---------- formulários ---------- */
label{display:block;font-size:11.5px;font-weight:600;color:var(--tinta-2);margin-bottom:4px}
input,select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--linha-forte);border-radius:var(--raio);
  background:#fff;font:inherit;font-size:13.5px;color:var(--tinta);
}
input[type=number],input.num{font-family:'IBM Plex Mono',monospace;text-align:right}
input:focus,select:focus,textarea:focus{border-color:var(--foco);outline:none;box-shadow:0 0 0 3px rgba(28,110,164,.14)}
.grade{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.filtros > div{min-width:118px}

.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 15px;border-radius:var(--raio);
  border:1px solid transparent;background:var(--tinta);color:#fff;font:inherit;font-size:13.5px;font-weight:550;
  cursor:pointer;white-space:nowrap;
}
.botao:hover{background:#1b3a4b;text-decoration:none;color:#fff}
.botao-verde{background:var(--entrada)} .botao-verde:hover{background:#095a41}
.botao-vazado{background:#fff;color:var(--tinta);border-color:var(--linha-forte)}
.botao-vazado:hover{background:#f2f5f7;color:var(--tinta)}
.botao-mini{padding:4px 9px;font-size:12px}
.botao-texto{background:none;border:0;color:var(--foco);cursor:pointer;font:inherit;font-size:12.5px;padding:2px 4px}
.botao-texto.perigo{color:var(--saida)}

/* ---------- avisos ---------- */
.aviso{padding:11px 14px;border-radius:var(--raio);margin-bottom:18px;font-size:13.5px;border:1px solid}
.aviso-ok{background:var(--entrada-fraca);border-color:#bcdccf;color:#08543c}
.aviso-erro{background:var(--saida-fraca);border-color:#f0c4c1;color:#8c1c16}
.aviso-erro ul{margin:6px 0 0;padding-left:18px}
.vazio{padding:40px 20px;text-align:center;color:var(--tinta-3)}
.vazio strong{display:block;color:var(--tinta-2);font-size:14px;margin-bottom:5px}
.dica{font-size:12px;color:var(--tinta-3);margin-top:10px}
.oculto{display:none}

/* ---------- barra de progresso do orçamento ---------- */
.barra{height:5px;background:#e8edf1;border-radius:3px;overflow:hidden;margin-top:5px;min-width:60px}
.barra i{display:block;height:100%;background:var(--entrada)}
.barra i.estourou{background:var(--saida)}

/* ---------- acesso (login/cadastro) ---------- */
.acesso{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.acesso-arte{background:var(--tinta);color:#fff;padding:52px 46px;display:flex;flex-direction:column;justify-content:center}
.acesso-arte h1{font-size:32px;line-height:1.15;max-width:12ch}
.acesso-arte p{color:#9db1bf;max-width:42ch;margin-top:16px;font-size:14.5px}
.acesso-razao{margin-top:38px;border-top:1px solid rgba(255,255,255,.14);padding-top:20px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#8fa6b4}
.acesso-razao div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dotted rgba(255,255,255,.12)}
.acesso-razao div span:last-child{font-variant-numeric:tabular-nums}
.acesso-razao .fecha{color:#fff;font-weight:600;border-bottom:0;margin-top:4px}
.acesso-form{display:flex;align-items:center;justify-content:center;padding:40px 28px;background:var(--papel)}
.acesso-caixa{width:100%;max-width:390px}
.acesso-caixa h2{font-size:20px;margin-bottom:6px}
.acesso-caixa .sub{color:var(--tinta-3);font-size:13px;margin-bottom:22px}
.acesso-caixa .campo{margin-bottom:14px}
.acesso-caixa .botao{width:100%;padding:11px;margin-top:6px}
.acesso-rodape{margin-top:20px;font-size:13px;color:var(--tinta-2);text-align:center}
/* A cor da marca entra nos detalhes, não no botão. O verde do Vunki Agenda é
   claro demais para segurar texto branco em cima — no sol, na rua, ninguém lê.
   O --cor-marca vem inline do layout guest, definido por Marca::cor(). */
.acesso input:focus,.acesso select:focus,.acesso textarea:focus{
  border-color:var(--cor-marca,var(--foco));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cor-marca,var(--foco)) 22%,transparent);
}
.acesso-arte .acesso-razao .fecha{border-left:3px solid var(--cor-marca,#fff);padding-left:9px}
.lembrar{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tinta-2);margin:4px 0 0}
.lembrar input{width:auto}

/* ---------- menu móvel ---------- */
.topo-movel{display:none;align-items:center;justify-content:space-between;background:var(--tinta);color:#fff;padding:11px 14px;position:sticky;top:0;z-index:30}
.topo-movel strong{font-family:'Archivo',sans-serif;font-size:14px}
.topo-movel button{background:rgba(255,255,255,.1);border:0;color:#fff;border-radius:var(--raio);padding:7px 11px;cursor:pointer;font:inherit}

@media (max-width:980px){
  .acesso{grid-template-columns:1fr}
  .acesso-arte{display:none}
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .app{flex-direction:column}
  .topo-movel{display:flex}
  .menu{position:static;height:auto;width:100%;flex:none}
  .menu:not(.aberto) nav,.menu:not(.aberto) .menu-rodape,.menu:not(.aberto) .menu-marca{display:none}
  .conteudo{padding:18px 14px 50px}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
  h1{font-size:19px}
}
@media print{
  .menu,.topo-movel,.filtros,.botao,.aviso{display:none!important}
  .conteudo{padding:0}
  .cartao{box-shadow:none;border-color:#999}
  body{background:#fff}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- paginação ---------- */
.paginacao{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pag-item{padding:6px 13px;border:1px solid var(--linha-forte);border-radius:var(--raio);background:#fff;color:var(--tinta);font-size:13px}
.pag-item:hover{background:#f2f5f7;text-decoration:none}
.pag-item.desativado{color:var(--tinta-3);background:#f7f9fa;cursor:default}
.pag-info{font-size:12.5px;color:var(--tinta-3)}

/* ---------- faixa do administrador da plataforma ---------- */
.faixa-super{
  background:#8a5a00;color:#fff;padding:8px 16px;font-size:13px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.faixa-super strong{font-weight:650}
.faixa-super button{
  background:rgba(255,255,255,.18);border:0;color:#fff;padding:5px 12px;
  border-radius:var(--raio);cursor:pointer;font:inherit;font-size:12.5px;
}
.faixa-super button:hover{background:rgba(255,255,255,.3)}
details summary::-webkit-details-marker{color:var(--saida)}

/* ============================================================
   Ajustes de leitura em telas pequenas
   A primeira coluna fica travada: rolando os meses para o lado,
   o nome da conta continua visível e o número não fica órfão.
   ============================================================ */
.rolagem{-webkit-overflow-scrolling:touch;scrollbar-width:thin}

table th:first-child,
table td:first-child{
  position:sticky;left:0;z-index:2;
  background:var(--superficie);
}
table thead th:first-child{background:#f7f9fa;z-index:3}
table tfoot td:first-child{background:#f2f5f7}

/* a coluna travada precisa herdar o fundo da própria linha,
   senão o conteúdo passa por baixo dela ao rolar */
tbody tr:nth-child(even) td:first-child{background:#f7f9fc}
tbody tr:hover td:first-child{background:#f9fbfc}
.linha-edicao td:first-child{position:static;background:transparent}
.dre tr.subtotal td:first-child{background:#f2f5f7}
.dre tr.destaque td:first-child{background:var(--tinta)}
.dre tr.percentual td:first-child{background:#fcfdfd}

/* sombra sutil na borda da coluna travada, indicando que há mais conteúdo */
table th:first-child::after,
table td:first-child::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:6px;
  pointer-events:none;
  background:linear-gradient(to right, rgba(16,32,43,.07), transparent);
}
.dre tr.destaque td:first-child::after{background:linear-gradient(to right, rgba(0,0,0,.35), transparent)}

@media (max-width:760px){
  /* limita a largura do rótulo para sobrar espaço aos números */
  table th:first-child,
  table td:first-child{max-width:44vw;min-width:132px}
  .dre tbody td:first-child{padding-left:14px;font-size:12px;line-height:1.3}
  .dre tbody td:first-child::before{left:5px}
  .dre tr.percentual td:first-child{padding-left:22px}

  /* números um pouco menores cabem mais meses na tela */
  .tabela-compacta tbody td,
  .tabela-compacta thead th{padding:6px 7px;font-size:11.5px}
  .dre thead th{font-size:9.5px;letter-spacing:.04em}

  /* cartões de indicador ocupam a largura toda, sem apertar */
  .kpi .valor{font-size:21px}
  .cartao-topo{padding:11px 13px}
  .cartao-corpo{padding:13px}

  /* filtros lado a lado em vez de empilhados, economiza rolagem */
  .filtros{gap:8px}
  .filtros > div{min-width:0;flex:1 1 44%}
  .filtros .botao{flex:1 1 100%}
}

/* ============================================================
   Logos: plataforma e empresas
   ============================================================ */
.menu-logo{
  display:block;max-width:150px;max-height:46px;width:auto;height:auto;
  margin-bottom:10px;object-fit:contain;
}
/* Teto de altura, não de largura: a logo horizontal é larga e baixa, e sem
   limite de altura ela ocupava meia tela no celular. width:auto preserva a
   proporção seja qual for o arquivo que a loja subir. */
/* Duas travas, não uma. O teto de altura segura a logo horizontal; o de
   largura segura a quadrada, que senão sairia com metade do tamanho útil.
   Com os dois e width:auto, cada formato cresce até onde cabe e nenhum
   distorce — a proporção quem resolve é o navegador.
   O que a marca escolhe é a presença: p, m ou g. */
.acesso-logo,.acesso-logo-movel{width:auto;height:auto;object-fit:contain}
.acesso-logo{margin-bottom:26px}
.acesso-logo-movel{display:none;margin:0 auto 22px}

.acesso-logo.logo-p{max-width:190px;max-height:76px}
.acesso-logo.logo-m{max-width:250px;max-height:104px}
.acesso-logo.logo-g{max-width:330px;max-height:144px}

.acesso-logo-movel.logo-p{max-width:150px;max-height:64px}
.acesso-logo-movel.logo-m{max-width:200px;max-height:92px}
.acesso-logo-movel.logo-g{max-width:264px;max-height:126px}

/* pré-visualização nos formulários de upload */
.logo-atual{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.logo-atual > img{
  width:150px;height:76px;object-fit:contain;padding:8px;
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);flex:0 0 auto;
}
.logo-atual > div{flex:1 1 240px;min-width:0}
.logo-vazia{
  width:150px;height:76px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--linha-forte);border-radius:var(--raio);
  color:var(--tinta-3);font-size:12px;background:#fbfcfd;
}
input[type=file]{padding:7px;background:#fff;font-size:12.5px}

/* miniatura na lista de empresas */
.empresa-linha{display:flex;align-items:center;gap:10px}
.logo-mini{
  width:38px;height:38px;object-fit:contain;flex:0 0 auto;
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:3px;
}
.logo-mini-vazia{
  display:flex;align-items:center;justify-content:center;
  background:var(--tinta);color:#fff;border-color:var(--tinta);
  font-family:'Archivo',sans-serif;font-weight:600;font-size:16px;padding:0;
}

@media (max-width:980px){
  .acesso-logo-movel{display:block}
}
@media (max-width:760px){
  .menu-logo{max-width:120px;max-height:38px}
  .logo-atual > img,.logo-vazia{width:120px;height:62px}
}

/* ============================================================
   Correção: travamento da primeira coluna
   A regra .dre tbody td:first-child do bloco original é mais
   específica e sobrescrevia o position:sticky. Aqui a
   especificidade é igualada, e o overflow horizontal fica
   contido nos containers .rolagem em vez de mover a página.
   ============================================================ */
html,body{overflow-x:hidden;max-width:100%}
.conteudo{max-width:100%}
.rolagem{max-width:100%;overflow-x:auto}

.dre thead th:first-child,
.dre tbody td:first-child,
.dre tfoot td:first-child,
.tabela-compacta thead th:first-child,
.tabela-compacta tbody td:first-child,
.tabela-compacta tfoot td:first-child{
  position:sticky;left:0;z-index:2;
}
.dre thead th:first-child,
.tabela-compacta thead th:first-child{z-index:3;background:#f7f9fa}
.dre tbody td:first-child{background:var(--superficie)}
.dre tbody tr:nth-child(even) td:first-child{background:#f7f9fc}
.dre tr.subtotal td:first-child{background:#f2f5f7}
.dre tr.destaque td:first-child{background:var(--tinta)}
.dre tr.percentual td:first-child{background:#fcfdfd}
.tabela-compacta tbody td:first-child{background:var(--superficie)}
.tabela-compacta tbody tr:nth-child(even) td:first-child{background:#f7f9fc}
.tabela-compacta tfoot td:first-child{background:#f2f5f7}

/* Tamanho definitivo da logo no login: 450px, escolhido em 17/08/2026.
   Já embutido aqui para não se perder nas próximas atualizações. */

/* ============================================================
   Módulo de agendamento — painel
   ============================================================ */
.cartao-alerta{border-color:#e8c98a;box-shadow:0 1px 2px rgba(138,90,0,.08)}
.cartao-alerta .cartao-topo{background:var(--previsto-fraco);border-bottom-color:#e8c98a}
.cartao-alerta .cartao-topo h2{color:var(--previsto)}

.linha-agenda{
  display:flex;gap:14px;align-items:flex-start;padding:13px 16px;
  border-bottom:1px solid var(--linha);border-left:3px solid var(--linha-forte);
}
.linha-agenda:last-child{border-bottom:0}
.linha-agenda.status-pendente{border-left-color:var(--previsto);background:#fffdf8}
.linha-agenda.status-confirmado{border-left-color:var(--foco)}
.linha-agenda.status-concluido{border-left-color:var(--entrada);background:#fafdfb}
.linha-agenda.status-cancelado,.linha-agenda.status-faltou{border-left-color:var(--saida);opacity:.62}
.hora-agenda{
  flex:0 0 58px;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;line-height:1.25;
}
.hora-agenda strong{font-size:16px}
.hora-agenda span{font-size:11.5px;color:var(--tinta-3)}
.info-agenda{flex:1 1 auto;min-width:0}
.info-agenda > strong{margin-right:7px}
.acoes-agenda{flex:0 0 auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

.selo-pendente{background:var(--previsto-fraco);color:var(--previsto)}
.selo-confirmado{background:#e6f0f7;color:var(--foco)}
.selo-concluido{background:var(--entrada-fraca);color:var(--entrada)}
.selo-cancelado,.selo-faltou{background:var(--saida-fraca);color:var(--saida)}

.caixas{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.caixa{
  display:inline-flex;align-items:center;gap:7px;margin:0;font-weight:400;font-size:13px;
  color:var(--tinta);background:#fff;border:1px solid var(--linha-forte);
  padding:7px 12px;border-radius:20px;cursor:pointer;
}
.caixa:has(input:checked){border-color:var(--entrada);background:var(--entrada-fraca);color:var(--entrada);font-weight:550}
.caixa input{width:auto;margin:0}

.faixas-horario{display:flex;flex-wrap:wrap;gap:8px}
.faixa-horario{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  background:#f2f5f7;border:1px solid var(--linha);border-radius:20px;padding:5px 8px 5px 13px;
  font-family:'IBM Plex Mono',monospace;
}
.faixa-horario button{
  background:none;border:0;color:var(--saida);cursor:pointer;font-size:16px;line-height:1;padding:0 4px;
}

.link-publico{
  display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--entrada-fraca);border:1px solid #bcdccf;border-radius:var(--raio);padding:12px 14px;
}
.link-publico span{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#08543c;word-break:break-all}

/* ============================================================
   Página pública de agendamento
   ============================================================ */
.pagina-publica{background:var(--papel)}
.capa-publica{background:var(--fundo-capa,var(--marca));color:var(--icone,#fff);padding:34px 20px 30px;text-align:center}
.capa-interna{max-width:560px;margin:0 auto}
.logo-publica{max-width:150px;max-height:110px;object-fit:contain;margin-bottom:14px;
  background:#fff;border-radius:12px;padding:8px}
.capa-publica h1{font-size:24px;margin:0 0 6px}
.capa-publica p{margin:0;color:var(--icone,#fff);opacity:.92;font-size:14.5px;line-height:1.45}
.capa-info{font-size:12.5px!important;color:var(--icone,#fff)!important;opacity:.72;margin-top:8px!important}

.corpo-publico{max-width:560px;margin:0 auto;padding:20px 14px 50px}
.cartao-publico{
  background:#fff;border:1px solid var(--linha);border-radius:10px;
  padding:18px 16px;margin-bottom:14px;box-shadow:var(--sombra);
}
.passo{
  display:flex;align-items:center;gap:9px;font-family:'Archivo',sans-serif;
  font-size:14.5px;font-weight:650;color:var(--tinta);margin-bottom:14px;
}
.passo span{
  width:24px;height:24px;border-radius:50%;background:var(--marca);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto;
}

.opcao{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:13px 14px;border:1px solid var(--linha);border-radius:8px;margin-bottom:9px;
  color:var(--tinta);text-decoration:none;
}
.opcao:hover{border-color:var(--marca);text-decoration:none}
.opcao.escolhida{border-color:var(--marca);border-width:2px;background:#fbfdfc}
.opcao-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.opcao-texto strong{font-size:15px}
.opcao-texto small{color:var(--tinta-3);font-size:12px}
.opcao-preco{
  font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:14.5px;
  color:var(--marca);white-space:nowrap;
}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:9px 15px;border:1px solid var(--linha-forte);border-radius:22px;
  font-size:13.5px;color:var(--tinta);text-decoration:none;background:#fff;
}
.chip:hover{text-decoration:none;border-color:var(--marca)}
.chip.ativo{background:var(--marca);border-color:var(--marca);color:#fff;font-weight:550}

.horarios{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin-bottom:18px}
.horario{margin:0}
.horario input{position:absolute;opacity:0;width:0;height:0}
.horario span{
  display:block;text-align:center;padding:11px 4px;border:1px solid var(--linha-forte);
  border-radius:8px;font-family:'IBM Plex Mono',monospace;font-size:14px;cursor:pointer;background:#fff;
}
.horario input:checked + span{background:var(--marca);border-color:var(--marca);color:#fff;font-weight:600}
.horario input:focus-visible + span{outline:2px solid var(--foco);outline-offset:2px}

.campo-publico{margin-bottom:13px}
.campo-publico label{font-size:12.5px}
.campo-publico input{padding:11px 12px;font-size:15px}
.opcional{color:var(--tinta-3);font-weight:400;text-transform:none;letter-spacing:0}

.resumo-preco{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#f7f9fa;border-radius:8px;padding:12px 14px;margin:16px 0 14px;font-size:13.5px;
}
.resumo-preco strong{font-family:'IBM Plex Mono',monospace;font-size:17px;color:var(--marca)}

.botao-publico{
  display:block;width:100%;text-align:center;background:var(--marca);color:#fff;
  border:0;border-radius:8px;padding:14px;font:inherit;font-size:15.5px;font-weight:600;
  cursor:pointer;text-decoration:none;
}
.botao-publico:hover{filter:brightness(.93);color:#fff;text-decoration:none}
.nota-publica{font-size:12px;color:var(--tinta-3);text-align:center;margin:10px 0 0;line-height:1.45}
.vazio-publico{color:var(--tinta-3);font-size:13.5px;margin:0;line-height:1.5}
.erro-publico{
  background:var(--saida-fraca);border:1px solid #f0c4c1;color:#8c1c16;
  border-radius:8px;padding:12px 14px;margin-bottom:14px;font-size:13.5px;
}
.erro-publico div + div{margin-top:4px}

.confirmacao{text-align:center}
.selo-confirmado{
  display:inline-block;background:var(--entrada-fraca);color:var(--entrada);
  padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:12px;
}
.confirmacao h2{font-size:19px;margin:0 0 8px}
.aviso-pendente{color:var(--tinta-2);font-size:13.5px;line-height:1.5;margin:0 0 18px}
.resumo{text-align:left;margin:0 0 18px;border-top:1px solid var(--linha)}
.resumo > div{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid var(--linha)}
.resumo dt{color:var(--tinta-3);font-size:13px;margin:0}
.resumo dd{margin:0;font-weight:550;font-size:13.5px;text-align:right}
.resumo .codigo{font-family:'IBM Plex Mono',monospace;letter-spacing:.08em}
.link-simples{display:block;margin-top:14px;font-size:13px;color:var(--tinta-3)}

.rodape-publico{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:18px 4px 0;font-size:12.5px;color:var(--tinta-3);
}

@media (max-width:600px){
  .linha-agenda{flex-wrap:wrap}
  .acoes-agenda{width:100%;justify-content:flex-start;padding-left:72px}
  .capa-publica{padding:26px 16px 24px}
  .capa-publica h1{font-size:21px}
}

/* ============================================================
   Clientes, reagendamento e aviso de pedido novo
   ============================================================ */
.contador{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;margin-left:7px;
  background:var(--previsto);color:#fff;border-radius:10px;
  font-size:11px;font-weight:700;font-family:'IBM Plex Mono',monospace;
}
.menu a.ativo .contador{background:rgba(255,255,255,.28)}

.barra-novo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--previsto);color:#fff;padding:11px 15px;border-radius:var(--raio);
  margin-bottom:16px;font-size:13.5px;font-weight:550;
}
.barra-novo button{
  background:rgba(255,255,255,.22);border:0;color:#fff;padding:6px 13px;
  border-radius:var(--raio);cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;
}
.barra-novo button:hover{background:rgba(255,255,255,.34)}

.linha-remarcar{
  padding:12px 16px 16px 72px;background:#f7f9fa;border-bottom:1px solid var(--linha);
}

.campo-cor{display:flex;gap:8px;align-items:center}
.campo-cor input[type=color]{width:52px;height:42px;padding:4px;flex:0 0 auto;cursor:pointer}
.campo-cor input[type=text]{
  flex:1 1 auto;font-family:'IBM Plex Mono',monospace;text-transform:lowercase;text-align:left;
}

/* opção de serviço com caixa de seleção, na página pública */
.opcao-check{cursor:pointer;position:relative;padding-left:44px}
.opcao-check input{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;accent-color:var(--marca);cursor:pointer;
}

@media (max-width:600px){
  .linha-remarcar{padding-left:16px}
}

/* atalhos de tempo na configuração da antecedência */
.atalhos-tempo{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.atalhos-tempo button{
  background:#fff;border:1px solid var(--linha-forte);color:var(--tinta-2);
  padding:5px 11px;border-radius:16px;font:inherit;font-size:12px;cursor:pointer;
}
.atalhos-tempo button:hover{border-color:var(--entrada);color:var(--entrada);background:var(--entrada-fraca)}

/* ============================================================
   Perfil da loja, área do cliente e buracos na agenda
   ============================================================ */
.atalhos-loja{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.atalhos-loja a{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:color-mix(in srgb, var(--icone,#fff) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--icone,#fff) 34%, transparent);
  color:var(--icone,#fff);text-decoration:none;transition:background .15s ease;
}
.atalhos-loja a:hover{background:color-mix(in srgb, var(--icone,#fff) 30%, transparent);text-decoration:none;color:var(--icone,#fff)}
.atalhos-loja svg{width:23px;height:23px;fill:currentColor;display:block}

.texto-sobre{margin:0;font-size:14px;line-height:1.55;color:var(--tinta-2)}

.lista-horarios{list-style:none;margin:0;padding:0}
.lista-horarios li{
  display:flex;justify-content:space-between;gap:12px;padding:9px 2px;
  border-bottom:1px solid var(--linha);font-size:13.5px;
}
.lista-horarios li:last-child{border-bottom:0}
.lista-horarios li span{color:var(--tinta-2)}
.lista-horarios li strong{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500}
.lista-horarios li.hoje{background:#f7fbf9;margin:0 -6px;padding-left:8px;padding-right:8px;border-radius:6px}
.lista-horarios li.hoje span{color:var(--marca);font-weight:600}

.ok-publico{
  background:var(--entrada-fraca);border:1px solid #bcdccf;color:#08543c;
  border-radius:8px;padding:12px 14px;margin-bottom:14px;font-size:13.5px;
}
.destaque-link{color:var(--marca)!important;font-weight:600;font-size:14px!important}

.agendamento-cliente{
  display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--linha);
}
.agendamento-cliente:last-child{border-bottom:0}
.agendamento-cliente.passado{opacity:.72}
.ac-quando{
  flex:0 0 76px;display:flex;flex-direction:column;font-family:'IBM Plex Mono',monospace;line-height:1.3;
}
.ac-quando strong{font-size:13px;text-transform:capitalize}
.ac-quando span{font-size:16px;color:var(--marca);font-weight:600}
.ac-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.ac-info strong{font-size:14px}
.ac-info small{color:var(--tinta-3);font-size:12px}
.botao-cancelar{
  flex:0 0 auto;background:#fff;border:1px solid var(--saida);color:var(--saida);
  padding:7px 13px;border-radius:18px;font:inherit;font-size:12.5px;cursor:pointer;
}
.botao-cancelar:hover{background:var(--saida-fraca)}

.faixa-vagos{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:11px 16px;background:#f7f9fa;border-bottom:1px solid var(--linha);font-size:13px;
}
.vago{
  background:#fff;border:1px dashed var(--linha-forte);border-radius:16px;
  padding:4px 11px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--tinta-2);
}
.vago small{color:var(--tinta-3);font-size:11px}

@media (max-width:600px){
  .agendamento-cliente{flex-wrap:wrap}
  .botao-cancelar{width:100%;margin-top:6px}
}

/* ============================================================
   Temas da página pública
   O tema muda o fundo, o cartão e a tipografia; a cor da marca
   (--marca) continua mandando nos botões e destaques.
   ============================================================ */

/* Escuro — grafite, contraste alto. Bom para barbearia. */
.tema-escuro{background:#14171a;color:#e8eaec}
.tema-escuro .cartao-publico{background:#1d2126;border-color:#2b3138;box-shadow:none}
.tema-escuro .passo{color:#f2f4f5}
.tema-escuro .opcao{border-color:#2b3138;color:#e8eaec}
.tema-escuro .opcao.escolhida{background:#232830}
.tema-escuro .opcao-texto small,
.tema-escuro .vazio-publico,
.tema-escuro .nota-publica,
.tema-escuro .rodape-publico{color:#8b949c}
.tema-escuro .chip{background:#1d2126;border-color:#333a42;color:#e8eaec}
.tema-escuro .horario span{background:#1d2126;border-color:#333a42;color:#e8eaec}
.tema-escuro .campo-publico label{color:#b9c0c6}
.tema-escuro .campo-publico input,
.tema-escuro input[type=date],
.tema-escuro input[type=tel],
.tema-escuro input[type=text]{background:#14171a;border-color:#333a42;color:#e8eaec}
.tema-escuro .resumo-preco{background:#232830;color:#e8eaec}
.tema-escuro .lista-horarios li{border-color:#2b3138}
.tema-escuro .lista-horarios li span{color:#b9c0c6}
.tema-escuro .lista-horarios li.hoje{background:#232830}
.tema-escuro .texto-sobre{color:#b9c0c6}
.tema-escuro .agendamento-cliente{border-color:#2b3138}
.tema-escuro .ac-info small{color:#8b949c}
.tema-escuro .resumo{border-color:#2b3138}
.tema-escuro .resumo > div{border-color:#2b3138}
.tema-escuro .resumo dt{color:#8b949c}
.tema-escuro .botao-cancelar{background:transparent}

/* Elegante — escuro com display serifado. Estética, spa, studio. */
.tema-elegante{background:#12100e;color:#ece7e1}
.tema-elegante .capa-publica h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:.01em}
.tema-elegante .cartao-publico{background:#1b1815;border-color:#2e2924;box-shadow:none;border-radius:2px}
.tema-elegante .passo{color:#f0ebe4;font-family:Georgia,serif;font-weight:400}
.tema-elegante .passo span{border-radius:2px}
.tema-elegante .opcao{border-color:#2e2924;color:#ece7e1;border-radius:2px}
.tema-elegante .opcao.escolhida{background:#232019}
.tema-elegante .opcao-texto strong{font-family:Georgia,serif;font-weight:400;font-size:16px}
.tema-elegante .opcao-texto small,
.tema-elegante .vazio-publico,
.tema-elegante .nota-publica,
.tema-elegante .rodape-publico{color:#9a9088}
.tema-elegante .chip,
.tema-elegante .horario span{background:#1b1815;border-color:#3a342c;color:#ece7e1;border-radius:2px}
.tema-elegante .campo-publico label{color:#c4bab0}
.tema-elegante .campo-publico input,
.tema-elegante input[type=date]{background:#12100e;border-color:#3a342c;color:#ece7e1;border-radius:2px}
.tema-elegante .resumo-preco{background:#232019;border-radius:2px}
.tema-elegante .botao-publico{border-radius:2px;letter-spacing:.04em;text-transform:uppercase;font-size:13.5px}
.tema-elegante .lista-horarios li{border-color:#2e2924}
.tema-elegante .lista-horarios li span{color:#c4bab0}
.tema-elegante .texto-sobre{color:#c4bab0}

/* Suave — creme e cantos arredondados. Salão, infantil, pet. */
.tema-suave{background:#fdf8f3}
.tema-suave .cartao-publico{border-radius:18px;border-color:#efe3d6;box-shadow:0 2px 10px rgba(160,120,80,.07)}
.tema-suave .opcao{border-radius:14px;border-color:#efe3d6}
.tema-suave .chip{border-radius:22px;border-color:#e6d7c7}
.tema-suave .horario span{border-radius:14px;border-color:#e6d7c7}
.tema-suave .campo-publico input{border-radius:12px;border-color:#e6d7c7}
.tema-suave .botao-publico{border-radius:14px}
.tema-suave .resumo-preco{border-radius:14px;background:#f7efe6}
.tema-suave .logo-publica{border-radius:18px}
.tema-suave .capa-publica{border-bottom-left-radius:26px;border-bottom-right-radius:26px}

/* ---------- convite de instalação ---------- */
.barra-instalar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--marca);color:#fff;border-radius:10px;padding:12px 14px;margin-bottom:14px;
  font-size:13.5px;font-weight:550;
}
.barra-instalar-acoes{display:flex;gap:8px;align-items:center}
.barra-instalar button{
  background:rgba(255,255,255,.22);border:0;color:#fff;padding:7px 14px;
  border-radius:8px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.barra-instalar button:hover{background:rgba(255,255,255,.34)}
.barra-instalar button.recusar{background:transparent;font-weight:400;opacity:.85}

/* ============================================================
   Modais e ajustes do fluxo de agendamento em página única
   ============================================================ */
.acoes-capa{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.pilula{
  background:color-mix(in srgb, var(--icone,#fff) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--icone,#fff) 32%, transparent);
  color:var(--icone,#fff);
  padding:7px 16px;border-radius:20px;font:inherit;font-size:13px;font-weight:550;cursor:pointer;
}
.pilula:hover{background:color-mix(in srgb, var(--icone,#fff) 28%, transparent)}

.modal{
  position:fixed;inset:0;z-index:60;background:rgba(10,15,20,.55);
  display:flex;align-items:center;justify-content:center;padding:18px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.modal-caixa{
  background:#fff;border-radius:14px;padding:22px 20px;width:100%;max-width:420px;
  max-height:86vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.28);
}
.modal-caixa h3{
  margin:0 0 16px;text-align:center;font-family:'Archivo',sans-serif;
  font-size:19px;color:var(--marca);
}
.modal-caixa .botao-publico{margin-top:16px}
.tema-escuro .modal-caixa,
.tema-elegante .modal-caixa{background:#1d2126;color:#e8eaec}
.tema-escuro .modal-caixa .lista-horarios li,
.tema-elegante .modal-caixa .lista-horarios li{border-color:#2b3138}

.carregando{
  text-align:center;color:var(--tinta-3);font-size:13.5px;padding:14px 0;
}
.carregando::after{
  content:'';display:inline-block;width:14px;height:14px;margin-left:8px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  vertical-align:-2px;animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}

/* o passo recém-aberto ganha um leve destaque, para o olho achar */
.cartao-publico{transition:opacity .18s ease}
#lista-horarios:empty{margin:0}

/* Correção: .modal define display:flex e vinha depois de .oculto, que tem a
   mesma especificidade — resultado, os modais nasciam abertos e o botão de
   fechar não surtia efeito. Regra combinada garante a precedência. */
.modal.oculto{display:none!important}


/* prévia da capa dentro das configurações */
.previa-capa{
  margin-top:14px;border-radius:10px;padding:22px 16px;text-align:center;
  display:flex;flex-direction:column;gap:4px;
}
.previa-capa strong{font-family:'Archivo',sans-serif;font-size:17px}
.previa-capa span{font-size:12px;opacity:.75}

/* navegadores sem color-mix caem para o branco translúcido de sempre */
@supports not (background: color-mix(in srgb, #fff 20%, transparent)) {
  .atalhos-loja a,.pilula{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32)}
}

/* ============================================================
   Escolha de dia: tira dos próximos dias + calendário
   ============================================================ */
.tira-dias{
  display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.tira-dias::-webkit-scrollbar{display:none}

.dia-chip{
  flex:0 0 auto;min-width:66px;padding:9px 10px;cursor:pointer;
  background:#fff;border:1px solid var(--linha-forte);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font:inherit;color:var(--tinta);line-height:1.15;
}
.dia-chip em{font-style:normal;font-size:11.5px;color:var(--tinta-3);text-transform:capitalize}
.dia-chip strong{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600}
.dia-chip i{font-style:normal;font-size:10px;color:var(--tinta-3)}
.dia-chip:hover:not(:disabled){border-color:var(--marca)}
.dia-chip.ativo{background:var(--marca);border-color:var(--marca);color:#fff}
.dia-chip.ativo em,.dia-chip.ativo i{color:rgba(255,255,255,.82)}
.dia-chip.fechado{opacity:.45;cursor:not-allowed;background:#f7f9fa}

.linha-calendario{margin-top:10px}
.botao-calendario{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:#fff;border:1px dashed var(--linha-forte);border-radius:10px;
  padding:10px 14px;font:inherit;font-size:13.5px;color:var(--tinta-2);
}
.botao-calendario:hover{border-color:var(--marca);color:var(--marca)}
.botao-calendario svg{width:18px;height:18px;fill:currentColor}
.data-escondida{
  position:absolute;opacity:0;width:1px;height:1px;padding:0;border:0;pointer-events:none;
}

/* temas escuros */
.tema-escuro .dia-chip,
.tema-escuro .botao-calendario{background:#1d2126;border-color:#333a42;color:#e8eaec}
.tema-escuro .dia-chip.fechado{background:#191d21}
.tema-elegante .dia-chip,
.tema-elegante .botao-calendario{background:#1b1815;border-color:#3a342c;color:#ece7e1;border-radius:2px}
.tema-suave .dia-chip{border-radius:14px;border-color:#e6d7c7}
.tema-suave .botao-calendario{border-radius:12px;border-color:#e6d7c7}

/* ============================================================
   Editor de horários por dia da semana
   ============================================================ */
.semana{display:flex;flex-direction:column;gap:2px}
.dia-linha{
  display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;
  padding:11px 12px;border:1px solid var(--linha);border-radius:var(--raio);
  background:#fbfcfd;margin-bottom:8px;
}
.dia-linha.ligado{background:#fff;border-color:var(--linha-forte)}

.dia-marca{
  display:flex;align-items:center;gap:9px;margin:0;cursor:pointer;
  flex:0 0 132px;font-size:13.5px;font-weight:600;color:var(--tinta-2);
}
.dia-linha.ligado .dia-marca{color:var(--tinta)}
.dia-marca input{width:19px;height:19px;accent-color:var(--entrada);cursor:pointer;margin:0}

.dia-faixas{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px}
.dia-linha:not(.ligado) .dia-faixas{display:none}

.faixa{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.faixa input[type=time]{
  width:auto;min-width:104px;flex:0 0 auto;
  font-family:'IBM Plex Mono',monospace;text-align:center;padding:7px 8px;
}
.faixa span{color:var(--tinta-3);font-size:12.5px}
.tirar-faixa{
  background:none;border:0;color:var(--saida);font-size:19px;line-height:1;
  cursor:pointer;padding:0 6px;
}
.tirar-faixa:hover{color:#8c1c16}

.mais-faixa{
  align-self:flex-start;background:none;border:1px dashed var(--linha-forte);
  color:var(--tinta-2);border-radius:16px;padding:5px 12px;
  font:inherit;font-size:12px;cursor:pointer;
}
.mais-faixa:hover{border-color:var(--entrada);color:var(--entrada)}

.acoes-semana{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

@media (max-width:600px){
  .dia-marca{flex:1 1 100%}
  .dia-faixas{width:100%}
  .faixa input[type=time]{flex:1 1 120px;min-width:0}
}

/* ============================================================
   Histórico de alterações
   ============================================================ */
.linha-historico{
  display:flex;gap:14px;align-items:flex-start;
  padding:11px 16px;border-bottom:1px solid var(--linha);border-left:3px solid var(--linha-forte);
}
.linha-historico:last-child{border-bottom:0}
.linha-historico.acao-criou{border-left-color:var(--entrada)}
.linha-historico.acao-alterou{border-left-color:var(--foco)}
.linha-historico.acao-excluiu{border-left-color:var(--saida);background:#fffbfb}

.hist-quando{
  flex:0 0 52px;display:flex;flex-direction:column;line-height:1.25;
  font-family:'IBM Plex Mono',monospace;
}
.hist-quando strong{font-size:13px}
.hist-quando span{font-size:11.5px;color:var(--tinta-3)}

.hist-info{flex:1 1 auto;min-width:0;font-size:13px}
.hist-info > div:first-child > strong{margin-right:6px}
.hist-alvo{color:var(--tinta-2);margin-top:3px;word-break:break-word}

.hist-mudancas{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mudanca{
  background:#f2f5f7;border-radius:5px;padding:3px 8px;font-size:11.5px;color:var(--tinta-2);
  font-family:'IBM Plex Mono',monospace;
}
.mudanca s{color:var(--tinta-3)}
.mudanca b{color:var(--tinta)}

/* ---------- página de política de privacidade ---------- */
.texto-legal h2{
  font-family:'Archivo',sans-serif;font-size:15px;margin:22px 0 8px;color:var(--marca);
}
.texto-legal h2:first-child{margin-top:0}
.texto-legal p{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--tinta-2)}
.texto-legal strong{color:var(--tinta)}
.tema-escuro .texto-legal p,.tema-elegante .texto-legal p{color:#b9c0c6}
.tema-escuro .texto-legal strong,.tema-elegante .texto-legal strong{color:#ece7e1}
.rodape-publico a + a{margin-left:auto}

/* ---------- aceite opcional e consentimento ---------- */
.aceite{
  display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;cursor:pointer;
  font-size:13px;line-height:1.45;color:var(--tinta-2);font-weight:400;
}
.aceite input{width:19px;height:19px;flex:0 0 auto;margin-top:1px;accent-color:var(--marca);cursor:pointer}
.aceite em{font-style:normal;color:var(--tinta-3)}
.tema-escuro .aceite,.tema-elegante .aceite{color:#b9c0c6}

.bloco-consentimento{
  margin-top:16px;padding:12px 14px;background:#f7f9fa;border-radius:var(--raio);
  border:1px solid var(--linha);
}
.bloco-consentimento strong{font-size:12.5px;color:var(--tinta-2)}
.bloco-consentimento p{margin:5px 0 8px;font-size:12.5px;color:var(--tinta-3);line-height:1.5}

/* ============================================================
   Contas a pagar e receber
   ============================================================ */
.linha-conta{
  display:flex;gap:14px;align-items:center;padding:12px 16px;
  border-bottom:1px solid var(--linha);border-left:3px solid var(--linha-forte);
}
.linha-conta:last-child{border-bottom:0}
.linha-conta.atrasada{border-left-color:var(--saida);background:#fffbfb}
.linha-conta.hoje{border-left-color:var(--previsto);background:#fffdf8}

.conta-data{
  flex:0 0 62px;display:flex;flex-direction:column;line-height:1.2;
  font-family:'IBM Plex Mono',monospace;
}
.conta-data strong{font-size:15px}
.conta-data span{font-size:11px;color:var(--tinta-3);text-transform:lowercase}
.linha-conta.atrasada .conta-data span{color:var(--saida);font-weight:600}

.conta-info{flex:1 1 auto;min-width:0}
.conta-info > strong{margin-right:6px}
.conta-valor{
  flex:0 0 auto;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:600;white-space:nowrap;
}
.conta-acoes{flex:0 0 auto}

.linha-pausada{opacity:.6}

/* escolha entre conta fixa e parcelamento */
.escolha-tipo{display:flex;gap:10px;flex-wrap:wrap}
.tipo-opcao{
  flex:1 1 240px;display:flex;gap:10px;align-items:flex-start;margin:0;cursor:pointer;
  border:1px solid var(--linha-forte);border-radius:var(--raio);padding:12px 14px;background:#fff;
}
.tipo-opcao:has(input:checked){border-color:var(--entrada);background:var(--entrada-fraca)}
.tipo-opcao input{width:19px;height:19px;margin-top:2px;accent-color:var(--entrada);cursor:pointer}
.tipo-opcao span{display:flex;flex-direction:column;gap:2px}
.tipo-opcao strong{font-size:13.5px}
.tipo-opcao small{font-size:11.5px;color:var(--tinta-3);font-weight:400}

.resumo-recorrencia{
  display:none;margin-top:14px;padding:12px 14px;border-radius:var(--raio);
  background:#f2f5f7;font-size:13.5px;color:var(--tinta-2);
}
.resumo-recorrencia.visivel{display:block}
.resumo-recorrencia strong{font-family:'IBM Plex Mono',monospace;color:var(--tinta)}

@media (max-width:600px){
  .linha-conta{flex-wrap:wrap}
  .conta-valor{margin-left:auto}
  .conta-acoes{width:100%;padding-left:76px}
}

/* ============================================================
   Módulo de empréstimos
   ============================================================ */
.linha-emprestimo{
  display:grid;grid-template-columns:1fr auto;gap:6px 16px;
  padding:14px 16px;border-bottom:1px solid var(--linha);
  border-left:3px solid var(--linha-forte);text-decoration:none;color:inherit;
}
.linha-emprestimo:last-child{border-bottom:0}
.linha-emprestimo:hover{background:#f7f9fa;text-decoration:none;color:inherit}
.linha-emprestimo.com-atraso{border-left-color:var(--saida)}

.emp-quem > strong{margin-right:6px}
.emp-numeros{display:flex;gap:18px;text-align:right}
.emp-numeros > div{display:flex;flex-direction:column;line-height:1.3}
.emp-numeros span{font-size:11px}
.emp-numeros strong{font-family:'IBM Plex Mono',monospace;font-size:14px}

.barra-progresso{
  grid-column:1 / -1;height:5px;background:var(--linha);border-radius:3px;overflow:hidden;margin-top:2px;
}
.barra-progresso span{display:block;height:100%;background:var(--entrada);border-radius:3px}

/* linha de parcela, usada na cobrança e no contrato */
.linha-parcela{
  display:flex;gap:12px;align-items:center;margin:0;cursor:pointer;
  padding:12px 16px;border-bottom:1px solid var(--linha);border-left:3px solid transparent;
}
.linha-parcela:last-child{border-bottom:0}
.linha-parcela:hover{background:#f7f9fa}
.linha-parcela.atrasada{border-left-color:var(--saida);background:#fffbfb}
.linha-parcela.paga{opacity:.55;background:#fbfcfd;cursor:default}
.linha-parcela input[type=checkbox]{width:22px;height:22px;flex:0 0 auto;accent-color:var(--entrada);cursor:pointer}

.parcela-num{
  flex:0 0 30px;text-align:center;font-family:'IBM Plex Mono',monospace;
  font-size:12px;color:var(--tinta-3);
}
.parcela-data,.parcela-quem{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.parcela-data strong,.parcela-quem strong{font-size:13.5px}
.parcela-data span,.parcela-quem span{font-size:11.5px;color:var(--tinta-3)}
.parcela-valor{
  flex:0 0 auto;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:600;white-space:nowrap;
}
.parcela-acao{flex:0 0 auto;display:flex;gap:10px;align-items:center}

/* dias sem cobrança */
.dias-pular{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.dia-pular{
  display:flex;align-items:center;gap:7px;margin:0;cursor:pointer;
  border:1px solid var(--linha-forte);border-radius:18px;padding:6px 13px;
  font-size:12.5px;background:#fff;font-weight:400;
}
.dia-pular:has(input:checked){background:var(--saida-fraca);border-color:var(--saida);color:var(--saida);font-weight:550}
.dia-pular input{width:16px;height:16px;accent-color:var(--saida);cursor:pointer;margin:0}

.resumo-emprestimo{
  display:none;margin-top:14px;padding:12px 14px;border-radius:var(--raio);
  background:#f2f5f7;font-size:13.5px;color:var(--tinta-2);
}
.resumo-emprestimo.visivel{display:block}
.resumo-emprestimo strong{font-family:'IBM Plex Mono',monospace;color:var(--tinta)}

.linha-alerta td{background:#fffbfb}

@media (max-width:600px){
  .emp-numeros{gap:12px}
  .parcela-acao{flex-direction:column;gap:4px;align-items:flex-end}
}

/* ---------- lista de inadimplentes ---------- */
.linha-atraso{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--linha);border-left:3px solid var(--saida);
}
.linha-atraso:last-child{border-bottom:0}
.atraso-quem{flex:1 1 240px;min-width:0}
.atraso-quem > strong{margin-right:6px}
.atraso-numeros{display:flex;gap:20px;text-align:right}
.atraso-numeros > div{display:flex;flex-direction:column;line-height:1.3}
.atraso-numeros span{font-size:11px}
.atraso-numeros strong{font-family:'IBM Plex Mono',monospace;font-size:14.5px}
.atraso-acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

@media (max-width:600px){
  .atraso-numeros{width:100%;justify-content:space-between;text-align:left}
  .atraso-acoes{width:100%}
}

/* ---------- marcas por domínio ---------- */
.linha-marca{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--linha);
}
.linha-marca:last-of-type{border-bottom:0}
.marca-visual{
  flex:0 0 auto;width:46px;height:46px;border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.marca-visual img{width:100%;height:100%;object-fit:cover}
.marca-visual span{
  color:#fff;font-family:'Archivo',sans-serif;font-size:20px;font-weight:700;
}
.marca-info{flex:1 1 200px;min-width:0}
.marca-info > strong{margin-right:6px}
.marca-info code{
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  background:#f2f5f7;padding:2px 7px;border-radius:4px;
}
.marca-acoes{flex:0 0 auto;display:flex;gap:10px;align-items:center}

/* ============================================================
   Cartão virtual — página pública
   ============================================================ */
.pagina-cartao{
  background:var(--fundo-capa,var(--marca));min-height:100vh;
  padding:36px 18px 28px;
  font-family:'Inter',system-ui,sans-serif;
}
.cartao-virtual{max-width:520px;margin:0 auto}

.cartao-topo-visual{text-align:center;margin-bottom:26px;color:var(--icone,#fff)}
.cartao-logo{
  width:104px;height:104px;border-radius:26px;object-fit:cover;
  border:3px solid color-mix(in srgb, var(--icone,#fff) 65%, transparent);
  box-shadow:0 6px 22px rgba(0,0,0,.18);
}
.cartao-inicial{
  width:104px;height:104px;border-radius:26px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--icone,#fff) 22%, transparent);
  border:3px solid color-mix(in srgb, var(--icone,#fff) 55%, transparent);
  font-family:'Archivo',sans-serif;font-size:44px;font-weight:700;
}
.cartao-topo-visual h1{
  font-family:'Archivo',sans-serif;font-size:24px;font-weight:700;
  margin:16px 0 6px;line-height:1.2;
}
.cartao-topo-visual p{margin:0;font-size:14.5px;line-height:1.5;opacity:.92}
.cartao-endereco{font-size:13px!important;opacity:.75!important;margin-top:8px!important}

.cartao-links{display:flex;flex-direction:column;gap:11px}
.link-botao{
  display:flex;align-items:center;gap:14px;
  background:#fff;border-radius:14px;padding:15px 16px;
  text-decoration:none;color:var(--tinta,#12181d);
  box-shadow:0 2px 10px rgba(0,0,0,.10);
  transition:transform .12s ease, box-shadow .12s ease;
}
.link-botao:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.16);text-decoration:none}
.link-botao:active{transform:translateY(0)}

.link-icone{
  flex:0 0 auto;width:40px;height:40px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--marca) 12%, #fff);
}
.link-icone svg{width:21px;height:21px;fill:var(--marca)}

.link-texto{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.link-texto strong{font-size:14.5px;font-weight:600}
.link-texto small{font-size:12px;color:#5d6b76}
.link-seta{flex:0 0 auto;font-size:22px;color:#c3ccd3;line-height:1}

.link-destaque{background:var(--marca);color:#fff}
.link-destaque .link-icone{background:rgba(255,255,255,.22)}
.link-destaque .link-icone svg{fill:#fff}
.link-destaque .link-texto small{color:rgba(255,255,255,.85)}
.link-destaque .link-seta{color:rgba(255,255,255,.7)}

.cartao-sobre{
  margin-top:22px;background:color-mix(in srgb, var(--icone,#fff) 14%, transparent);
  border-radius:14px;padding:16px 18px;
}
.cartao-sobre p{margin:0;font-size:13.5px;line-height:1.6;color:var(--icone,#fff);opacity:.92}

.cartao-rodape{
  margin-top:26px;text-align:center;font-size:12px;
  color:var(--icone,#fff);opacity:.6;
}

/* temas escuros deixam os botões escuros também */
.pagina-cartao.tema-escuro .link-botao{background:#1d2126;color:#e8eaec}
.pagina-cartao.tema-escuro .link-texto small{color:#8b949c}
.pagina-cartao.tema-elegante .link-botao{background:#1b1815;color:#ece7e1;border-radius:3px}
.pagina-cartao.tema-elegante .link-icone{border-radius:3px}
.pagina-cartao.tema-suave .link-botao{border-radius:18px}

/* ---------- administração dos links ---------- */
.linha-link{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:13px 16px;border-bottom:1px solid var(--linha);
}
.ordem-link{display:flex;flex-direction:column;gap:2px}
.ordem-link button{
  background:none;border:1px solid var(--linha-forte);border-radius:5px;
  width:26px;height:20px;cursor:pointer;color:var(--tinta-2);font-size:9px;line-height:1;
}
.ordem-link button:hover:not(:disabled){border-color:var(--entrada);color:var(--entrada)}
.ordem-link button:disabled{opacity:.3;cursor:default}

.link-info{flex:1 1 200px;min-width:0}
.link-info > strong{margin-right:6px}
.link-cliques{
  flex:0 0 auto;text-align:center;display:flex;flex-direction:column;line-height:1.2;
}
.link-cliques strong{font-family:'IBM Plex Mono',monospace;font-size:16px}
.link-cliques span{font-size:10.5px}
.link-acoes{flex:0 0 auto;display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:600px){
  .link-acoes{width:100%;padding-left:40px}
}

/* ============================================================
   Cartão virtual — personalização
   ============================================================ */

/* fundo com imagem cobrindo a tela */
.pagina-cartao.com-imagem{
  background-size:cover;background-position:center;background-attachment:fixed;
  position:relative;
}
.veu-fundo{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,calc(var(--veu) * .75)) 0%,
    rgba(0,0,0,var(--veu)) 45%,
    rgba(0,0,0,calc(var(--veu) + .12)) 100%);
}
.pagina-cartao.com-imagem .cartao-virtual{position:relative;z-index:1}

/* ---------- formatos da logo ---------- */
.moldura-logo{display:inline-block;position:relative;line-height:0}
.logo-circulo .cartao-logo,.logo-circulo .cartao-inicial{border-radius:50%}
.logo-quadrado .cartao-logo,.logo-quadrado .cartao-inicial{border-radius:6px}
.logo-selo .cartao-logo,.logo-selo .cartao-inicial{border-radius:38% 8% 38% 8%}

/* ---------- efeitos da logo ---------- */
.efeito-anel .moldura-logo::before{
  content:'';position:absolute;inset:-11px;border-radius:inherit;
  border:2px solid color-mix(in srgb, var(--icone,#fff) 55%, transparent);
  border-radius:50%;
}
.efeito-anel.logo-quadrado .moldura-logo::before{border-radius:12px}
.efeito-anel.logo-arredondado .moldura-logo::before{border-radius:34px}

.efeito-brilho .cartao-logo,.efeito-brilho .cartao-inicial{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--icone,#fff) 18%, transparent),
             0 0 38px color-mix(in srgb, var(--icone,#fff) 45%, transparent);
}

.efeito-sombra .cartao-logo,.efeito-sombra .cartao-inicial{
  box-shadow:0 16px 34px rgba(0,0,0,.42);
}

.efeito-flutuar .moldura-logo{animation:flutuar 4s ease-in-out infinite}
@keyframes flutuar{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

.efeito-pulsar .moldura-logo::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:2px solid color-mix(in srgb, var(--icone,#fff) 60%, transparent);
  animation:pulsar 2.4s ease-out infinite;
}
@keyframes pulsar{
  0%{transform:scale(.96);opacity:.8}
  100%{transform:scale(1.28);opacity:0}
}

/* quem prefere menos movimento não vê animação nenhuma */
@media (prefers-reduced-motion: reduce){
  .efeito-flutuar .moldura-logo,
  .efeito-pulsar .moldura-logo::after,
  .com-animacao .link-botao{animation:none!important}
}

/* ---------- tipografia do nome ---------- */
.fonte-serifa .cartao-topo-visual h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:.01em}
.fonte-mono .cartao-topo-visual h1{font-family:'IBM Plex Mono',monospace;font-size:21px;letter-spacing:-.02em}
.fonte-grande .cartao-topo-visual h1{font-size:31px;letter-spacing:-.02em;line-height:1.1}

/* ---------- estilos de botão ---------- */
.botao-vidro .link-botao{
  background:rgba(255,255,255,.16);color:var(--icone,#fff);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.28);box-shadow:none;
}
.botao-vidro .link-icone{background:rgba(255,255,255,.2)}
.botao-vidro .link-icone svg{fill:var(--icone,#fff)}
.botao-vidro .link-texto small{color:rgba(255,255,255,.8)}
.botao-vidro .link-seta{color:rgba(255,255,255,.65)}

.botao-contorno .link-botao{
  background:transparent;color:var(--icone,#fff);box-shadow:none;
  border:1.5px solid color-mix(in srgb, var(--icone,#fff) 55%, transparent);
}
.botao-contorno .link-icone{background:transparent}
.botao-contorno .link-icone svg{fill:var(--icone,#fff)}
.botao-contorno .link-texto small{color:color-mix(in srgb, var(--icone,#fff) 75%, transparent)}
.botao-contorno .link-seta{color:color-mix(in srgb, var(--icone,#fff) 60%, transparent)}
.botao-contorno .link-botao:hover{background:color-mix(in srgb, var(--icone,#fff) 12%, transparent)}

.botao-suave .link-botao{
  background:color-mix(in srgb, var(--botao-cor) 14%, #fff);
  box-shadow:none;border:1px solid color-mix(in srgb, var(--botao-cor) 24%, transparent);
}

/* o ícone segue a cor escolhida, não só a da marca */
.link-icone svg{fill:var(--botao-cor,var(--marca))}
.link-icone{background:color-mix(in srgb, var(--botao-cor,var(--marca)) 12%, #fff)}
.link-destaque{background:var(--botao-cor,var(--marca))}

/* ---------- entrada em cascata ---------- */
.com-animacao .link-botao{
  opacity:0;animation:surgir .45s ease forwards;animation-delay:var(--atraso,0ms);
}
@keyframes surgir{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- tela de aparência ---------- */
.grade-aparencia{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
.titulo-secao{
  font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tinta-3);margin:22px 0 10px;padding-top:14px;border-top:1px solid var(--linha);
}
.titulo-secao:first-of-type{margin-top:0;padding-top:0;border-top:0}

.fundo-atual{display:flex;gap:12px;align-items:center;margin-top:10px}
.fundo-atual img{width:66px;height:96px;object-fit:cover;border-radius:8px;border:1px solid var(--linha-forte)}

.moldura-celular{
  border:9px solid #1d2126;border-radius:26px;overflow:hidden;
  background:#000;box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.moldura-celular iframe{display:block;width:100%;height:520px;border:0;background:#fff}

input[type=range]{width:100%;accent-color:var(--entrada);margin-top:6px}

@media (max-width:900px){
  .grade-aparencia{grid-template-columns:1fr}
  .previa-lado{order:-1}
  .moldura-celular iframe{height:420px}
}

/* ---------- combinações prontas ---------- */
.prontas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}
.pronta{margin:0}
.pronta button{
  width:100%;height:100%;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--linha-forte);border-radius:var(--raio);
  padding:12px 14px;font:inherit;display:flex;flex-direction:column;gap:3px;
}
.pronta button:hover{border-color:var(--entrada);background:var(--entrada-fraca)}
.pronta strong{font-size:13.5px;color:var(--tinta)}
.pronta small{font-size:11.5px;color:var(--tinta-3);line-height:1.4}

/* ---------- blocos que não são link ---------- */
.bloco-titulo{
  color:var(--icone,#fff);font-family:'Archivo',sans-serif;font-size:15px;
  text-transform:uppercase;letter-spacing:.08em;opacity:.85;
  margin:20px 0 2px;padding-left:4px;
}
.com-animacao .bloco-titulo,
.com-animacao .bloco-texto,
.com-animacao .bloco-foto,
.com-animacao .bloco-video{opacity:0;animation:surgir .45s ease forwards;animation-delay:var(--atraso,0ms)}

.bloco-texto{
  background:color-mix(in srgb, var(--icone,#fff) 13%, transparent);
  border-radius:14px;padding:15px 17px;color:var(--icone,#fff);
}
.bloco-texto strong{display:block;font-size:14px;margin-bottom:5px}
.bloco-texto p{margin:0;font-size:13.5px;line-height:1.6;opacity:.9}

.bloco-foto{margin:0;border-radius:14px;overflow:hidden;background:#000}
.bloco-foto img{display:block;width:100%;height:auto}
.bloco-foto figcaption{
  padding:11px 14px;background:color-mix(in srgb, var(--icone,#fff) 13%, transparent);
  color:var(--icone,#fff);display:flex;flex-direction:column;gap:2px;
}
.bloco-foto figcaption strong{font-size:13.5px}
.bloco-foto figcaption span{font-size:12px;opacity:.8}

.bloco-video strong{
  display:block;color:var(--icone,#fff);font-size:13.5px;margin-bottom:7px;padding-left:4px;
}
.moldura-video{
  position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;background:#000;
}
.moldura-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* botão de compartilhar */
.botao-compartilhar{
  display:block;margin:0 auto 12px;cursor:pointer;
  background:color-mix(in srgb, var(--icone,#fff) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--icone,#fff) 30%, transparent);
  color:var(--icone,#fff);border-radius:20px;padding:8px 18px;
  font:inherit;font-size:12.5px;
}
.botao-compartilhar:hover{background:color-mix(in srgb, var(--icone,#fff) 26%, transparent)}

/* ---------- QR e domínio na administração ---------- */
.ferramentas-cartao{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.area-qr{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
#qrcode{
  background:#fff;padding:12px;border-radius:10px;border:1px solid var(--linha-forte);
  line-height:0;
}
#qrcode img,#qrcode canvas{display:block}

/* ============================================================
   Módulo Tarefas
   Lista em vez de quadro: no celular, colunas viram rolagem
   lateral e arrastar briga com o scroll da página.
   ============================================================ */
.linha-tarefa{
  display:flex;gap:13px;align-items:flex-start;padding:13px 16px;
  border-bottom:1px solid var(--linha);border-left:3px solid var(--linha-forte);
  text-decoration:none;color:inherit;
}
.linha-tarefa:last-child{border-bottom:0}
.linha-tarefa:hover{background:#f7f9fb}
.linha-tarefa.prio-urgente{border-left-color:var(--saida)}
.linha-tarefa.prio-alta{border-left-color:#c2410c}
.linha-tarefa.prio-media{border-left-color:var(--previsto)}
.linha-tarefa.prio-baixa{border-left-color:var(--entrada)}
.linha-tarefa.atrasada{background:#fffbfb}
.linha-tarefa.concluida{opacity:.62}
.linha-tarefa.concluida .tarefa-info > strong{text-decoration:line-through}

.tarefa-prazo{
  flex:0 0 54px;display:flex;flex-direction:column;line-height:1.2;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--tinta-3);
}
.tarefa-prazo strong{font-size:14px;color:var(--tinta)}
.linha-tarefa.atrasada .tarefa-prazo strong{color:var(--saida)}

.tarefa-info{flex:1 1 auto;min-width:0}
.tarefa-servico{font-size:13.5px;color:var(--tinta-2);margin:2px 0 3px}
.tarefa-marca{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.etiqueta-prio{font-size:12px;white-space:nowrap}
.etiqueta-atraso{
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  background:var(--saida-fraca);color:var(--saida);padding:2px 7px;border-radius:20px;
}
.etiqueta-aberta{
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  background:var(--previsto-fraco);color:var(--previsto);padding:2px 7px;border-radius:20px;
}

.tarefa-campo{display:flex;gap:8px;padding:5px 0;border-bottom:1px dotted var(--linha);font-size:13.5px}
.tarefa-campo:last-of-type{border-bottom:0}
.tarefa-campo > span{flex:0 0 130px;color:var(--tinta-3)}
.tarefa-obs{
  margin-top:12px;padding:11px 13px;background:var(--papel);
  border-radius:var(--raio);font-size:13.5px;white-space:pre-wrap;
}

.evento-tarefa{display:flex;gap:12px;padding:11px 16px;border-bottom:1px solid var(--linha)}
.evento-tarefa:last-child{border-bottom:0}
.evento-quando{
  flex:0 0 76px;font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;color:var(--tinta-3);padding-top:2px;
}
.evento-texto{flex:1 1 auto;min-width:0;font-size:13.5px}
.evento-corpo{margin-top:4px;color:var(--tinta-2);white-space:pre-wrap}
.evento-tarefa.ev-finalizou{background:var(--entrada-fraca)}
.evento-tarefa.ev-transferiu{background:var(--previsto-fraco)}

.lista-pessoas{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pessoa-caixa{
  display:flex;align-items:center;gap:7px;padding:8px 13px;
  border:1px solid var(--linha-forte);border-radius:22px;font-size:13.5px;cursor:pointer;
}
.pessoa-caixa input{margin:0}
.bolinha-setor{width:11px;height:11px;border-radius:50%;display:inline-block;flex:0 0 auto}

@media (max-width:760px){
  .tarefa-marca{flex-direction:row;align-items:center}
  .tarefa-campo{flex-direction:column;gap:1px}
  .tarefa-campo > span{flex:none}
  .evento-quando{flex:0 0 62px}
}

/* Chip com bolinha de setor: alinha o marcador com o texto. */
.chip .bolinha-setor{margin-right:6px;vertical-align:middle}
.chip.ativo .bolinha-setor{box-shadow:0 0 0 2px rgba(255,255,255,.55)}

/* Cancelada: some da fila, mas continua legível no histórico. */
.linha-tarefa.cancelada{opacity:.6;background:#fafafa}
.linha-tarefa.cancelada .tarefa-info > strong{text-decoration:line-through}
.etiqueta-cancelada{
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  background:var(--linha);color:var(--tinta-2);padding:2px 7px;border-radius:20px;
}
.evento-tarefa.ev-cancelou{background:var(--saida-fraca)}