/* NovaAzul: o layout do Conta Azul com o azul da Blueshift, só o tema escuro (Lucas, 29/10, no lugar da decisão 3:
   "Transforme a interface toda em Dark Theme. Sem opção de escolher theme"). Tokens com contraste AA;
   grade de 8 px; números tabulares, à direita. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url(/fontes/ibm-plex-sans.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fontes/ibm-plex-sans-italico.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  /* --branco is the surface of cards and panels (the name stayed from the light theme) */
  --azul: #4C9BEF; --azul-escuro: #2C78C8; --azul-claro: #15283D; --azul-medio: #1F3B5A; --azul-botao: #2C78C8;
  --verde: #4CC27A; --verde-claro: #12291C; --verde-botao: #1B7A38;
  --vermelho: #F2726A; --vermelho-claro: #321716;
  --ambar: #F0B84A; --ambar-claro: #2E2410;
  --texto: #EDF1F5; --texto-2: #A9B6C4;
  --borda-campo: #66778A; --borda: #2F3B4A; --fundo: #0A0F15; --branco: #161F2A; --elevado: #1E2835;
  /* the status marks (Lucas, 29/10: "ainda temos problemas de contraste, como nos labels 'a vencer'"): 7:1 or more */
  --selo-azul: #9BCBFF; --selo-azul-fundo: #163454; --selo-verde: #86E6A9; --selo-verde-fundo: #133A24;
  --selo-ambar: #FFD37A; --selo-ambar-fundo: #3B2D0D; --selo-vermelho: #FFA39C; --selo-vermelho-fundo: #421C1B;
  --selo-cinza: #C8D2DD; --selo-cinza-fundo: #27313D;
  --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
  --sombra-painel: -8px 0 24px rgba(0, 0, 0, .45);
  --raio: 6px; --menu: 216px; --menu-fechado: 64px; --painel: 480px; --topo: 56px;
  --fonte: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior-x: none; }
body { font: 14px/1.43 var(--fonte); color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--azul); }
h1, h2, h3 { margin: 0; font-weight: 600; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.carregando-inicial { display: grid; place-items: center; height: 100vh; color: var(--texto-2); }

/* --- moldura --- */
.app { display: grid; grid-template-columns: var(--menu) 1fr; min-height: 100vh; }
.app.menu-fechado { grid-template-columns: var(--menu-fechado) 1fr; }
.menu { background: #0A1A2C; color: #fff; border-right: 1px solid var(--borda); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 8px; gap: 2px; z-index: 30; }
.menu .marca { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.menu .marca svg { flex: none; }
.menu a.item, .menu button.item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--raio); color: #fff; text-decoration: none; background: none; border: 0; cursor: pointer; width: 100%; text-align: left; white-space: nowrap; }
.menu a.item:hover, .menu button.item:hover { background: rgba(255, 255, 255, .12); }
.menu a.item[aria-current="page"] { background: var(--azul-botao); color: #fff; font-weight: 600; }
.menu .item svg { flex: none; }
.menu .espaco { flex: 1; }
.menu-fechado .menu .rotulo, .menu-fechado .menu .marca span { display: none; }
.menu-fechado .menu a.item, .menu-fechado .menu button.item { justify-content: center; padding: 0; }
.principal { min-width: 0; display: flex; flex-direction: column; }
.topo { position: sticky; top: 0; z-index: 20; background: var(--branco); border-bottom: 1px solid var(--borda); height: var(--topo); display: flex; align-items: center; gap: 16px; padding: 0 24px; }
.topo h1 { font-size: 18px; white-space: nowrap; }
.topo .espaco { flex: 1; }
.busca-atalho { display: flex; align-items: center; gap: 8px; width: 280px; height: 36px; padding: 0 10px; border: 1px solid var(--borda-campo); border-radius: var(--raio); background: var(--branco); color: var(--texto-2); cursor: text; }
.busca-atalho:hover { border-color: var(--azul); }
.busca-atalho kbd, kbd { font: 12px var(--fonte); border: 1px solid var(--borda); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--texto-2); background: var(--fundo); }
.busca-atalho kbd { margin-left: auto; }
.frescor { font-size: 13px; color: var(--texto-2); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.frescor.atrasada { color: var(--ambar); background: var(--ambar-claro); padding: 2px 8px; border-radius: 12px; }
.usuario { position: relative; }
.usuario > button { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px; border: 0; background: none; border-radius: var(--raio); cursor: pointer; }
.usuario > button:hover { background: var(--fundo); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--azul-botao); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.conteudo { padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* --- faixas de estado --- */
.faixa { display: flex; align-items: center; gap: 12px; padding: 10px 24px; font-size: 14px; border-bottom: 1px solid; }
.faixa.ambar { background: var(--ambar-claro); color: var(--ambar); border-color: #5A4518; }
.faixa.vermelha { background: var(--vermelho-claro); color: var(--vermelho); border-color: #5A2422; }
.faixa strong { font-weight: 600; }
.faixa button { margin-left: auto; }

/* --- botões e campos --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--raio); border: 1px solid var(--borda-campo); background: var(--branco); color: var(--texto); cursor: pointer; font-weight: 500; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--fundo); }
.btn.primario { background: var(--verde-botao); border-color: var(--verde-botao); color: #fff; }
.btn.primario:hover { background: #20903F; }
.btn.azul { background: var(--azul-botao); border-color: var(--azul-botao); color: #fff; }
.btn.azul:hover { background: #3586DA; }
.btn.fantasma { border-color: transparent; background: none; color: var(--azul); }
.btn.fantasma:hover { background: var(--azul-claro); }
.btn.pequeno { height: 28px; padding: 0 10px; font-size: 13px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-icone { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 0; border-radius: var(--raio); background: none; cursor: pointer; color: var(--texto-2); }
.btn-icone:hover { background: var(--fundo); color: var(--texto); }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo > label, .rotulo-campo { font-size: 13px; font-weight: 500; color: var(--texto-2); }
.campo .obrig { color: var(--vermelho); }
.entrada, select.entrada { height: 36px; padding: 0 10px; border: 1px solid var(--borda-campo); border-radius: var(--raio); background: var(--branco); width: 100%; min-width: 0; }
.entrada:focus { outline: 2px solid var(--azul); outline-offset: -1px; border-color: var(--azul); }
.entrada.num { text-align: right; }
.entrada[aria-invalid="true"] { border-color: var(--vermelho); }
.erro-campo { font-size: 13px; color: var(--vermelho); }
.ajuda { font-size: 13px; color: var(--texto-2); }
.marcador { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.marcador input { width: 16px; height: 16px; accent-color: var(--azul); margin: 0; }

/* --- cartões --- */
.cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: 8px; box-shadow: var(--sombra); }
.cartao > header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; }
.cartao > header h2 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); font-weight: 600; }
.cartao > header .fonte { font-size: 13px; color: var(--texto-2); }
.cartao .corpo { padding: 4px 16px 16px; }
.info { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--borda-campo); color: var(--texto-2); font-size: 11px; font-weight: 600; cursor: help; background: none; padding: 0; position: relative; }
.info:hover .dica, .info:focus .dica { display: block; }
.dica { display: none; position: absolute; top: 24px; right: -8px; width: 300px; background: var(--elevado); color: var(--texto); border: 1px solid var(--borda); padding: 10px 12px; border-radius: var(--raio); font: 13px/1.45 var(--fonte); text-align: left; z-index: 50; white-space: normal; box-shadow: var(--sombra); }

/* --- Início --- */
.inicio { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.inicio .largo { grid-column: 1 / -1; }
.saldos { width: 100%; border-collapse: collapse; }
.saldos td { padding: 8px 0; border-bottom: 1px solid var(--fundo); vertical-align: baseline; }
.saldos tr:last-child td { border-bottom: 0; }
.saldos .nome { font-weight: 500; }
.saldos .valor { font-size: 18px; font-weight: 600; width: 180px; }
.saldos .neg { color: var(--vermelho); }
.saldos .extra { color: var(--texto-2); font-size: 13px; padding-left: 24px; }
.saldos .total td { border-top: 2px solid var(--borda); font-weight: 600; }
.fora-total { color: var(--texto-2); font-size: 13px; margin-top: 8px; line-height: 1.7; }
.fora-total .num { text-align: left; }
.resumo-lista { list-style: none; margin: 0; padding: 0; }
.resumo-lista li { display: grid; grid-template-columns: 1fr auto 56px; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--fundo); }
.resumo-lista li:last-child { border-bottom: 0; }
.resumo-lista .valor { font-size: 18px; font-weight: 600; }
.resumo-lista .vencido .valor { color: var(--vermelho); }
.resumo-lista a.contagem { text-decoration: none; color: var(--azul); font-size: 13px; text-align: right; }
.resumo-lista a.contagem:hover { text-decoration: underline; }
.resumo-lista .nota { grid-column: 1 / -1; font-size: 13px; color: var(--texto-2); margin-top: -6px; }
.meses { width: 100%; border-collapse: collapse; }
.meses th { font-size: 12px; font-weight: 600; color: var(--texto-2); text-align: right; padding: 6px 12px; border-bottom: 1px solid var(--borda); }
.meses th:first-child, .meses td:first-child { text-align: left; padding-left: 0; }
.meses td { padding: 8px 12px; border-bottom: 1px solid var(--fundo); }
.meses td a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--borda-campo); }
.meses td a:hover { color: var(--azul); border-bottom-color: var(--azul); }
.meses .neg { color: var(--vermelho); }
.meses .pos { color: var(--verde); }
.meses tr.atual td { font-weight: 600; }
.meses-cartoes { display: none; }

/* --- listas --- */
.barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.periodo { display: flex; align-items: center; border: 1px solid var(--borda-campo); border-radius: var(--raio); background: var(--branco); height: 36px; }
.periodo button { border: 0; background: none; height: 34px; padding: 0 8px; cursor: pointer; color: var(--texto); }
.periodo button:hover { background: var(--fundo); }
.periodo .rotulo-periodo { min-width: 168px; font-weight: 500; }
.campo-data { display: flex; align-items: center; gap: 4px; }
select.seletor { height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--borda-campo); border-radius: var(--raio); background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2352606D' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; cursor: pointer; }
.filtro-texto { position: relative; flex: 1 1 260px; max-width: 420px; }
.filtro-texto input { padding-left: 32px; padding-right: 28px; }
.filtro-texto svg { position: absolute; left: 10px; top: 10px; color: var(--texto-2); }
.filtro-texto kbd { position: absolute; right: 8px; top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: 14px; background: var(--azul-claro); color: var(--selo-azul); font-size: 13px; border: 1px solid var(--azul-medio); }
.chip button { border: 0; background: none; cursor: pointer; color: inherit; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.chip button:hover { background: var(--azul-medio); }
.aviso-filtro { font-size: 13px; color: var(--texto-2); }
.aviso-filtro button { border: 0; background: none; color: var(--azul); cursor: pointer; padding: 0; text-decoration: underline; }

.abas-situacao { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.aba-sit { text-align: left; background: var(--branco); border: 1px solid var(--borda); border-radius: 8px; padding: 12px 14px; cursor: pointer; box-shadow: var(--sombra); position: relative; border-top: 3px solid transparent; }
.aba-sit:hover { border-color: var(--borda-campo); border-top-color: transparent; }
.aba-sit[aria-pressed="true"] { border-top-color: var(--azul); background: var(--azul-claro); border-left-color: var(--azul-medio); border-right-color: var(--azul-medio); border-bottom-color: var(--azul-medio); }
.aba-sit .titulo { font-size: 13px; color: var(--texto-2); font-weight: 500; display: flex; justify-content: space-between; }
.aba-sit .valor { font-size: 20px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.aba-sit.vencido.com .valor { color: var(--vermelho); }
.aba-sit.pago.com .valor { color: var(--verde); }

.barra-selecao { display: flex; align-items: center; gap: 12px; background: var(--azul-botao); color: #fff; border-radius: 8px; padding: 8px 12px; }
.barra-selecao .btn { height: 32px; }
.barra-selecao .btn.fantasma { color: #fff; }
.barra-selecao .btn.fantasma:hover { background: rgba(255, 255, 255, .15); }
.barra-selecao .espaco { flex: 1; }

.tabela-caixa { background: var(--branco); border: 1px solid var(--borda); border-radius: 8px; box-shadow: var(--sombra); overflow: clip; }
.tabela-caixa:focus { outline: none; }
.tabela-caixa:focus-visible { box-shadow: 0 0 0 2px var(--azul-medio), var(--sombra); }
table.lista { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lista th { position: sticky; top: var(--topo); z-index: 5; background: var(--branco); font-size: 12px; font-weight: 600; color: var(--texto-2); text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.lista th button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; display: inline-flex; gap: 4px; align-items: center; }
.lista th button:hover { color: var(--texto); }
.lista th.num { text-align: right; }
.lista td { padding: 8px; border-bottom: 1px solid var(--fundo); vertical-align: top; }
.lista tr.linha { cursor: pointer; }
.lista tr.linha:hover td { background: #1B2530; }
.lista tr.linha.foco td { background: var(--azul-claro); }
.lista tr.linha.selecionada td { background: #17304A; }
.lista tr.linha.aberta td { background: var(--azul-claro); }
.lista .borda { width: 4px; padding: 0; }
.lista tr.vencido td.borda { background: var(--vermelho) !important; }
.lista .col-sel { width: 40px; }
.lista .col-venc { width: 112px; }
.lista .col-total { width: 132px; }
.lista .col-aberto { width: 132px; }
.lista .col-sit { width: 120px; }
.lista .col-mais { width: 44px; }
.desc { min-width: 0; }
.desc .linha1 { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.desc .texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.desc .linha2 { font-size: 13px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.desc .linha2 .ret { float: right; margin-left: 12px; }
.serie-icone { color: var(--azul); flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; }
.data { white-space: nowrap; font-variant-numeric: tabular-nums; }
.data .dia { font-weight: 500; }
.selo { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.selo, .prop-selo { border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.selo.vencido { background: var(--selo-vermelho-fundo); color: var(--selo-vermelho); }
.selo.em_aberto { background: var(--selo-ambar-fundo); color: var(--selo-ambar); }
.selo.previsao { background: var(--selo-ambar-fundo); color: var(--selo-ambar); border-style: dashed; }
.selo.pago { background: var(--selo-verde-fundo); color: var(--selo-verde); }
.selo.perdido, .selo.renegociado { background: var(--selo-cinza-fundo); color: var(--selo-cinza); }
.selo.agendado { background: var(--selo-azul-fundo); color: var(--selo-azul); }
.selo.anexo { background: none; color: var(--texto-2); padding: 0 2px; }
.rodape-lista { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 13px; color: var(--texto-2); border-top: 1px solid var(--borda); background: #121A22; }
.rodape-lista strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.vazio { padding: 48px 16px; text-align: center; color: var(--texto-2); }
.vazio .btn { margin-top: 12px; }
.esqueleto td div { height: 14px; border-radius: 4px; background: linear-gradient(90deg, #1E2833, #27323E, #1E2833); background-size: 200% 100%; animation: brilho 1.2s infinite; }
@keyframes brilho { to { background-position: -200% 0; } }
.mais-linhas { display: flex; justify-content: center; padding: 12px; }
.lista-cartoes { display: none; }

/* --- menus suspensos --- */
.suspenso { position: relative; display: inline-block; }
.menu-suspenso { position: absolute; top: calc(100% + 4px); left: 0; min-width: 220px; background: var(--branco); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 8px 24px rgba(31, 41, 51, .14); padding: 6px; z-index: 60; }
.menu-suspenso.direita { left: auto; right: 0; }
.menu-suspenso button, .menu-suspenso a { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: none; border-radius: 4px; cursor: pointer; text-align: left; color: var(--texto); text-decoration: none; }
.menu-suspenso button:hover, .menu-suspenso a:hover, .menu-suspenso [data-ativo="true"] { background: var(--fundo); }
.menu-suspenso button[disabled] { color: var(--texto-2); cursor: not-allowed; }
.menu-suspenso .motivo { display: block; font-size: 12px; color: var(--texto-2); }
.menu-suspenso hr { border: 0; border-top: 1px solid var(--borda); margin: 6px 0; }
.menu-suspenso .grupo { font-size: 12px; color: var(--texto-2); padding: 6px 10px 2px; font-weight: 600; }
.filtros-mais { width: 360px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }

/* --- painel --- */
.painel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--painel); max-width: 100vw; background: var(--branco); box-shadow: var(--sombra-painel); z-index: 40; display: flex; flex-direction: column; animation: entra .16s ease-out; }
@keyframes entra { from { transform: translateX(24px); opacity: .6; } }
.painel > header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
.painel > header h2 { font-size: 16px; flex: 1; }
.painel .acoes-painel { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.painel .rolagem { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.painel > footer { display: flex; gap: 8px; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--borda); background: #121A22; }
.painel .cabeca .serie { color: var(--azul); font-size: 13px; font-weight: 500; }
.painel .cabeca .titulo { font-size: 16px; font-weight: 600; margin-top: 2px; word-break: break-word; }
.painel .cabeca .valor-linha { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.painel .cabeca .valor-grande { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.painel .cabeca .datas { color: var(--texto-2); margin-top: 4px; }
.dados { display: grid; grid-template-columns: 112px 1fr auto; gap: 8px 12px; align-items: baseline; margin: 0; }
.dados dt { color: var(--texto-2); font-size: 13px; }
.dados dd { margin: 0; word-break: break-word; }
.dados .so-bpo { font-size: 12px; color: var(--texto-2); white-space: nowrap; }
.secao h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 8px; }
.secao ul { list-style: none; margin: 0; padding: 0; }
.secao li { padding: 6px 0; border-bottom: 1px solid var(--fundo); display: flex; gap: 8px; align-items: baseline; }
.secao li:last-child { border-bottom: 0; }
.secao .vazio-curto { color: var(--texto-2); }
.historico li { flex-direction: column; gap: 0; }
.historico .quando { font-size: 12px; color: var(--texto-2); }
.trava { background: var(--ambar-claro); color: var(--ambar); border-radius: var(--raio); padding: 10px 12px; font-size: 13px; }
.nota-edicao { background: var(--fundo); border-radius: var(--raio); padding: 10px 12px; font-size: 13px; color: var(--texto-2); }
.soltar { border: 2px dashed var(--borda-campo); border-radius: 8px; padding: 14px; text-align: center; color: var(--texto-2); cursor: pointer; }
.soltar.ativo { border-color: var(--azul); background: var(--azul-claro); color: var(--selo-azul); }
.anexo-item { display: flex; align-items: center; gap: 8px; }
.anexo-item a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); margin-top: 4px; }
.resumo-serie { background: var(--fundo); border-radius: var(--raio); padding: 10px 12px; font-size: 13px; }
.alerta { border-radius: var(--raio); padding: 10px 12px; font-size: 13px; }
.alerta.ambar { background: var(--ambar-claro); color: var(--ambar); }
.alerta.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.alerta.verde { background: var(--verde-claro); color: var(--verde); }
.alerta ul { margin: 6px 0 0; padding-left: 18px; }
.comparacao { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.comparacao th, .comparacao td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); }

/* --- combobox --- */
.combo { position: relative; }
.combo .lista-opcoes { position: absolute; top: calc(100% + 2px); left: 0; right: 0; max-height: 280px; overflow-y: auto; background: var(--branco); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 8px 24px rgba(31, 41, 51, .14); z-index: 70; padding: 4px; margin: 0; list-style: none; }
.combo li { padding: 7px 10px; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.combo li[aria-selected="true"] { background: var(--azul-claro); }
.combo li .lado { color: var(--texto-2); font-size: 12px; white-space: nowrap; }
.combo li.grupo { font-size: 12px; font-weight: 600; color: var(--texto-2); cursor: default; padding: 8px 10px 2px; }
.combo li.cadastrar { color: var(--azul); font-weight: 500; }
.sugerido { font-size: 12px; color: var(--verde); font-weight: 500; }

/* --- busca (Ctrl+K) e diálogos --- */
.veu { position: fixed; inset: 0; background: rgba(31, 41, 51, .35); z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.caixa-busca { width: 640px; max-width: 100%; background: var(--branco); border-radius: 12px; box-shadow: 0 16px 48px rgba(31, 41, 51, .25); overflow: hidden; display: flex; flex-direction: column; max-height: 76vh; }
.caixa-busca .entrada-busca { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--borda); }
.caixa-busca input { border: 0; height: 52px; flex: 1; font-size: 16px; outline: none; background: none; }
.caixa-busca .resultados { overflow-y: auto; padding: 6px; }
.caixa-busca .grupo-busca { font-size: 12px; font-weight: 600; color: var(--texto-2); padding: 10px 10px 4px; display: flex; justify-content: space-between; }
.caixa-busca .resultado { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.caixa-busca .resultado[aria-selected="true"] { background: var(--azul-claro); }
.caixa-busca .resultado .sub { font-size: 12px; color: var(--texto-2); grid-column: 1; }
.caixa-busca .resultado .num { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.caixa-busca .rodape-busca { border-top: 1px solid var(--borda); padding: 8px 16px; font-size: 12px; color: var(--texto-2); display: flex; gap: 16px; }
.caixa-busca .nada { padding: 24px; color: var(--texto-2); text-align: center; }
mark { background: #6B5512; color: #FFF3C4; border-radius: 2px; }
.dialogo { width: 560px; max-width: 100%; background: var(--branco); border-radius: 12px; box-shadow: 0 16px 48px rgba(31, 41, 51, .25); display: flex; flex-direction: column; max-height: 84vh; }
.dialogo > header { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--borda); }
.dialogo > header h2 { font-size: 16px; flex: 1; }
.dialogo .corpo { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.dialogo > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--borda); }
.dialogo textarea { width: 100%; min-height: 200px; padding: 10px; border: 1px solid var(--borda-campo); border-radius: var(--raio); resize: vertical; font: 14px/1.5 var(--fonte); }

/* --- avisos (toasts) --- */
.avisos { position: fixed; left: 24px; bottom: 24px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.aviso { display: flex; align-items: center; gap: 16px; background: var(--elevado); color: var(--texto); border: 1px solid var(--borda); padding: 12px 16px; border-radius: 8px; box-shadow: 0 8px 24px rgba(31, 41, 51, .25); max-width: 520px; }
.aviso.erro { background: var(--vermelho); }
.aviso button { background: none; border: 0; color: #9CD3FF; font-weight: 600; cursor: pointer; padding: 0; }

/* --- entrar --- */
.entrar { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; background: linear-gradient(160deg, var(--azul) 0 38%, var(--fundo) 38%); padding: 16px; }
.entrar .cartao { width: 400px; max-width: 100%; padding: 32px; text-align: center; display: flex; flex-direction: column; gap: 16px; }
.entrar h1 { font-size: 22px; }
.entrar p { margin: 0; color: var(--texto-2); }
.entrar .btn.azul { height: 44px; font-size: 15px; }
.entrar .dev { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: 13px; }
.entrar-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.entrar .entrada { height: 44px; font-size: 15px; }
.entrar .link { border: 0; padding: 0; background: none; font: inherit; color: var(--azul); text-decoration: underline; cursor: pointer; }
.entrar .link[disabled] { color: var(--texto-2); text-decoration: none; cursor: default; }
.entrar .entrada.codigo { font: 600 24px/1 var(--fonte); letter-spacing: .35em; text-align: center; }

/* --- celular (abaixo de 768 px): só consultar --- */
.so-celular { display: none !important; }
@media (max-width: 1100px) {
  .abas-situacao { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .busca-atalho { width: 200px; }
}
@media (max-width: 767px) {
  body { font-size: 15px; }
  .app, .app.menu-fechado { grid-template-columns: 1fr; }
  /* the menu as a drawer from the left, over a veil (the hamburger at the top opens it) */
  .menu, .menu-fechado .menu { position: fixed; left: 0; top: 0; bottom: 0; height: 100dvh; width: min(288px, 86vw); transform: translateX(-105%); transition: transform .18s ease-out; z-index: 50; overflow-y: auto; box-shadow: 4px 0 24px rgba(15, 23, 42, .25); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .menu.aberto { transform: none; }
  .menu-fechado .menu .rotulo, .menu-fechado .menu .marca span { display: inline; }
  .menu a.item, .menu-fechado .menu a.item { height: 48px; justify-content: flex-start; padding: 0 12px; font-size: 16px; }
  .menu-veu { position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 49; }
  .so-celular { display: inline-grid !important; }
  .menu-botao { margin-left: -6px; width: 40px; height: 40px; color: var(--texto); }
  .topo h1 { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .topo { padding: 0 16px; gap: 8px; }
  .topo .busca-atalho, .topo .frescor .texto-longo, .topo .so-pc { display: none; }
  .conteudo { padding: 16px; gap: 12px; }
  .faixa { padding: 10px 16px; }
  .inicio { grid-template-columns: 1fr; }
  .meses { display: none; }
  .meses-cartoes { display: flex; flex-direction: column; gap: 8px; }
  .mes-cartao { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--fundo); color: inherit; text-decoration: none; }
  .mes-cartao .nome { font-weight: 600; }
  .mes-cartao .sub { font-size: 13px; color: var(--texto-2); grid-column: 1 / -1; }
  .saldos, .saldos tbody { display: block; }
  .saldos tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--fundo); }
  .saldos td { padding: 0; border: 0; }
  .saldos .valor { width: auto; font-size: 17px; }
  .saldos .extra { grid-column: 1 / -1; padding: 0; }
  .saldos .extra:empty { display: none; }
  .cartao > header { flex-wrap: wrap; row-gap: 2px; }
  .abas-situacao { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .aba-sit { flex: 0 0 auto; min-width: 148px; padding: 10px 12px; scroll-snap-align: start; }
  .aba-sit .valor { font-size: 17px; }
  .barra-filtros > .seletor:first-child { display: none; }
  .barra-filtros > .seletor { flex: 1; min-width: 0; }
  .periodo .rotulo-periodo { white-space: nowrap; }
  .filtro-texto { max-width: none; flex-basis: 100%; order: 3; }
  .caixa-busca input::-webkit-search-cancel-button { display: none; }
  .entrada, select.entrada, select.seletor { height: 44px; font-size: 16px; }
  .periodo { height: 44px; flex: 1 1 100%; }
  .periodo button { height: 42px; min-width: 44px; }
  .periodo .rotulo-periodo { flex: 1; min-width: 0; }
  /* the cards stand for the table where a screen has them (the accounts, the proposals); other tables scroll sideways */
  .tabela-caixa:has(> .lista-cartoes) table.lista { display: none; }
  .tabela-caixa { overflow-x: auto; }
  .gestao .barra-filtros .entrada, .prop-lista .barra-filtros .entrada { min-width: 0; flex: 1 1 100%; width: 100%; }
  .prop-lista .barra-filtros .espaco { display: none; }
  .prop-lista .barra-filtros .btn { flex: 1 1 100%; justify-content: center; }
  .lista-cartoes .l4 { grid-column: 1 / -1; font-size: 13px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lista-cartoes { display: block; }
  .lista-cartoes a { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 12px 16px; border-bottom: 1px solid var(--fundo); color: inherit; text-decoration: none; min-height: 44px; }
  .lista-cartoes a.vencido { border-left: 4px solid var(--vermelho); padding-left: 12px; }
  .lista-cartoes .l1 { display: flex; justify-content: space-between; gap: 8px; grid-column: 1 / -1; font-size: 13px; color: var(--texto-2); }
  .lista-cartoes .l2 { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lista-cartoes .l3 { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
  .rodape-lista .teclas { display: none; }
  .painel { width: 100vw; animation: none; }
  .painel .so-pc, .so-pc { display: none !important; }
  .avisos { left: 16px; right: 16px; bottom: 16px; }
  .veu { padding: 0; }
  .caixa-busca { max-height: 100vh; height: 100vh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.caixa-busca input::-webkit-search-cancel-button { display: none; }

/* the chat with the Nova (phase 6): the button in the top bar and the drawer on the right */
.chat-botao { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--branco); color: var(--texto); font: 500 14px var(--fonte); cursor: pointer; }
.chat-botao:hover { border-color: var(--azul); color: var(--azul); }
.chat-botao[aria-expanded="true"] { background: var(--azul-claro); border-color: var(--azul); color: var(--azul); }
.chat-ponto { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--vermelho); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.chat { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw; background: var(--branco); box-shadow: var(--sombra-painel); z-index: 45; display: flex; flex-direction: column; animation: entra .16s ease-out; }
.chat > header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
.chat > header h2 { font-size: 16px; }
.chat .espaco { flex: 1; }
.chat .presenca { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--fundo); color: var(--texto-2); }
.chat .presenca.livre, .chat .presenca.trabalhando { background: var(--azul-claro); color: var(--selo-azul); }
.chat .presenca.fora { background: var(--vermelho-claro); color: var(--vermelho); }
.chat-mensagens { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--fundo); }
.msg { display: flex; flex-direction: column; max-width: 85%; }
.msg.minha { align-self: flex-end; align-items: flex-end; }
.msg.dela { align-self: flex-start; }
.msg .balao { padding: 8px 12px; border-radius: 12px; background: var(--branco); border: 1px solid var(--borda); line-height: 1.45; word-break: break-word; }
.msg.minha .balao { background: var(--azul-botao); border-color: var(--azul-botao); color: #fff; }
.msg.minha .balao a { color: #fff; }
.msg .acao-rotulo { display: block; font-size: 11px; opacity: .85; margin-bottom: 2px; }
.msg-anexos { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.msg-hora { font-size: 11px; color: var(--texto-2); margin-top: 2px; }
.chat-escrever { border-top: 1px solid var(--borda); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.chat-arquivos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.chat-arquivos li { display: inline-flex; align-items: center; gap: 4px; background: var(--fundo); border-radius: 6px; padding: 2px 4px 2px 8px; }
.chat-linha { display: flex; align-items: flex-end; gap: 6px; }
.chat-linha textarea { flex: 1; resize: none; min-height: 40px; max-height: 160px; }
@media (max-width: 767px) { .chat { width: 100vw; } }

/* the proposals (phase 8): the numbers big, the instalments, the PDF in the page */
.prop-lista, .prop-detalhe { display: flex; flex-direction: column; gap: 16px; }
.prop-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.prop-numero { background: var(--branco); border: 1px solid var(--borda); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--sombra); }
.prop-numero .rotulo { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); font-weight: 600; }
.prop-numero .valor { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prop-numeros.grandes .prop-numero .valor { font-size: clamp(18px, 1.6vw, 26px); }
.prop-numero .extra { font-size: 13px; color: var(--texto-2); }
.prop-numero.verde .valor { color: var(--verde); }
.prop-numero.vermelho .valor { color: var(--vermelho); }
.prop-selo { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; background: var(--selo-cinza-fundo); color: var(--selo-cinza); white-space: nowrap; }
.prop-selo.verde { background: var(--selo-verde-fundo); color: var(--selo-verde); }
.prop-selo.azul { background: var(--selo-azul-fundo); color: var(--selo-azul); }
.prop-selo.ambar { background: var(--selo-ambar-fundo); color: var(--selo-ambar); }
.prop-selo.vermelho { background: var(--selo-vermelho-fundo); color: var(--selo-vermelho); }
.prop-tabela tbody tr { cursor: pointer; }
.prop-tabela tbody tr:hover, .prop-tabela tbody tr:focus { background: var(--azul-claro); outline: none; }
.prop-cabeca { display: flex; align-items: center; gap: 12px; }
.prop-titulo h2 { font-size: 20px; }
.prop-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.prop-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
/* two columns that stack on their own: a tall card on one side leaves no hole on the other */
.prop-coluna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.prop-grade td.acao { text-align: right; white-space: nowrap; }
.prop-grade .lista th, .prop-grade .lista td, .gestao .lista th, .gestao .lista td { padding: 8px 10px; white-space: nowrap; }
.prop-pdf iframe { width: 100%; height: 720px; border: 0; border-top: 1px solid var(--borda); display: block; }
.prop-arquivos { list-style: none; margin: 0; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.prop-arquivos a { display: inline-flex; align-items: center; gap: 6px; }
.prop-nova { width: min(640px, 100vw - 32px); }
.prop-nova .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prop-nova .corpo { display: flex; flex-direction: column; gap: 10px; }
.prop-nova footer { display: flex; justify-content: space-between; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--borda); }
@media (max-width: 1100px) { .prop-grade { grid-template-columns: minmax(0, 1fr); } }

/* the Drive (phase 7): the folders, the file inside the page and the shortcuts */
.drive { display: flex; flex-direction: column; gap: 12px; }
.drive-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.drive-atalhos a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--branco); color: var(--texto); text-decoration: none; font-size: 13px; }
.drive-atalhos a:hover { border-color: var(--azul); color: var(--azul); }
.drive-caminho { font-size: 14px; color: var(--texto-2); }
.drive-caminho a { color: var(--azul); text-decoration: none; }
.drive-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.drive-corpo.com-previa { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); align-items: start; }
.drive-itens { list-style: none; margin: 0; padding: 0; background: var(--branco); border: 1px solid var(--borda); border-radius: 8px; }
.drive-itens li { display: flex; align-items: center; border-bottom: 1px solid var(--borda); }
.drive-itens li:last-child { border-bottom: 0; }
.drive-itens li.ativo { background: var(--azul-claro); }
.drive-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--texto); }
.drive-item .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-item .quando { font-size: 12px; color: var(--texto-2); }
.drive-itens .estrela { margin-right: 6px; }
.drive-itens .estrela.fixada { color: var(--ambar); }
.drive-previa iframe { width: 100%; height: 78vh; border: 0; border-top: 1px solid var(--borda); display: block; }
@media (max-width: 1100px) { .drive-corpo.com-previa { grid-template-columns: minmax(0, 1fr); } }

/* the dashboard, invoices, collections, team and suppliers (phase 8) */
.gestao { display: flex; flex-direction: column; gap: 16px; }
.prop-numero.link { text-decoration: none; color: inherit; }
.prop-numero.link:hover { border-color: var(--azul); }
.gestao-resumo td.negativo { color: var(--vermelho); }
.gestao-campos { margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.gestao-campos div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px; border-bottom: 1px solid var(--borda); padding-bottom: 6px; }
.gestao-campos dt { color: var(--texto-2); font-size: 13px; }
.gestao-campos dd { margin: 0; word-break: break-word; }
.prop-lista table.lista, .prop-detalhe table.lista, .gestao table.lista { table-layout: auto; }
.prop-detalhe .tabela-caixa, .gestao .tabela-caixa { overflow-x: auto; }
.prop-detalhe .cartao .tabela-caixa { border: 0; box-shadow: none; border-radius: 0; }

/* the hours sheet (phase 10): the months and people of an allocation, and the sheet over the page */
.horas-meses { display: flex; flex-direction: column; gap: 10px; }
.horas-meses h3 { font-size: 13px; color: var(--texto-2); margin: 0 0 4px; }
.horas-meses ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.horas-meses a { display: inline-flex; align-items: center; gap: 6px; }
.horas-veu .horas-dialogo { width: calc(100vw - 48px); height: calc(100vh - 48px); max-width: none; display: flex; flex-direction: column; }
.horas-dialogo > header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
.horas-dialogo > header h2 { font-size: 16px; }
.horas-dialogo .espaco { flex: 1; }
.horas-planilha { flex: 1; overflow: auto; padding: 8px; background: var(--branco); }
/* inside a box that scrolls sideways the sticky header sticks to the box, at the top bar's offset, and covers the rows */
.gestao .lista th, .prop-detalhe .lista th { position: static; }
.gestao .barra-filtros .entrada, .prop-lista .barra-filtros .entrada { width: auto; min-width: 240px; }
.prop-alocados { list-style: none; margin: 0; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.prop-alocados li { display: flex; align-items: center; gap: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* filters on one line, and a table that scrolls inside the screen with its totals at the bottom (Lucas, 28/10) */
.barra-filtros.uma-linha { flex-wrap: nowrap; }
.gestao .barra-filtros.uma-linha .entrada { min-width: 0; flex: 1 1 0; width: auto; }
.gestao .barra-filtros.uma-linha input.entrada { flex: 2 1 0; }
.gestao .barra-filtros.uma-linha .btn { flex: 0 0 auto; }
.notas-tela { height: calc(100vh - var(--topo, 56px) - 48px); min-height: 360px; }
.tabela-rola { flex: 1; min-height: 0; overflow: auto; }
.gestao .tabela-rola .lista thead th { position: sticky; top: 0; z-index: 1; background: var(--branco); }
.tabela-rola tfoot td { position: sticky; bottom: 0; background: var(--fundo); font-weight: 600; border-top: 1px solid var(--borda); }
.gestao tbody tr[tabindex] { cursor: pointer; }
.sub-titulo { font-size: 14px; margin: 0; }
.gestao td.acao { text-align: right; }
@media (max-width: 760px) {
  .barra-filtros.uma-linha { flex-wrap: wrap; }
  .gestao .barra-filtros.uma-linha .entrada { flex: 1 1 100%; }
  .notas-tela { height: auto; }
}
.gestao tfoot td { font-weight: 600; background: var(--fundo); border-top: 1px solid var(--borda); }
/* an e-mail waiting for approval in the chat: shown as it goes, wider when enlarged */
.chat:has(.email-previa.aberta) { width: min(880px, 100vw); }
.msg.msg-email { max-width: 100%; align-self: stretch; }
.email-previa { margin-top: 8px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); overflow: hidden; }
.email-previa dl { margin: 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; border-bottom: 1px solid var(--borda); }
.email-previa dl div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px; }
.email-previa dt { color: var(--texto-2); }
.email-previa dd { margin: 0; word-break: break-word; }
.email-corpo { display: block; width: 100%; height: 260px; border: 0; background: #fff; }
.email-previa.aberta .email-corpo { height: 60vh; }
.email-previa .msg-anexos { padding: 6px 10px; margin: 0; border-top: 1px solid var(--borda); }
.email-acoes { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--borda); background: var(--fundo); }
.email-acoes .espaco { flex: 1; }
.email-aprovado { display: inline-flex; align-items: center; gap: 4px; color: var(--verde); font-size: 13px; font-weight: 600; }
/* the phone, second pass (Lucas, 28/10: "A lista de propostas nem fica visível"): the numbers in one strip that
   scrolls sideways, two filters a line, the title before the time */
@media (max-width: 767px) {
  .prop-numeros { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; gap: 8px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .prop-numero { flex: 0 0 auto; min-width: 136px; padding: 8px 12px; scroll-snap-align: start; box-shadow: none; }
  .prop-numero .valor, .prop-numeros.grandes .prop-numero .valor { font-size: 17px; }
  .prop-numero .rotulo { font-size: 11px; }
  .prop-numero .extra { font-size: 12px; }
  .gestao .barra-filtros select.entrada, .gestao .barra-filtros.uma-linha select.entrada, .prop-lista .barra-filtros select.entrada { flex: 1 1 calc(50% - 8px); width: calc(50% - 8px); min-width: 0; box-sizing: border-box; }
  .gestao .barra-filtros.uma-linha input.entrada, .prop-lista .barra-filtros input.entrada { flex: 1 1 100%; min-width: 0; }
  .topo .frescor:not(.atrasada) { display: none; }
  .prop-acoes .btn { height: 36px; padding: 0 10px; font-size: 14px; }
}

/* the dark theme over what has its own colors: the veils, the spreadsheet of hours (Jspreadsheet), the drop-downs */
.veu { background: rgba(0, 0, 0, .6); }
.menu-suspenso, .combo .lista-opcoes, .caixa-busca, .dialogo { background: var(--elevado); }
select.entrada option, select.seletor option { background: var(--branco); color: var(--texto); }
.horas-planilha .jss_worksheet, .horas-planilha .jss_worksheet > tbody > tr > td { background-color: var(--branco); color: var(--texto); border-color: var(--borda); }
.horas-planilha .jss_worksheet > thead > tr > td, .horas-planilha .jss_worksheet > tbody > tr > td:first-child { background-color: var(--elevado); color: var(--texto-2); border-color: var(--borda); }
.horas-planilha .jss_worksheet > thead > tr > td.selected, .horas-planilha .jss_worksheet > tbody > tr.selected > td:first-child { background-color: var(--azul-medio); }
.horas-planilha .jss_worksheet > tbody > tr > td.readonly { color: var(--texto-2); }
.horas-planilha .jtabs-headers > div { color: var(--texto-2); }
.horas-planilha .jtabs-headers > div.jtabs-selected { color: var(--texto); border-color: var(--azul); }

/* the phone, third pass (Lucas, 29/10: "Precisa melhorar o contraste e a experiência no mobile"): cards with a clear
   edge, every list as cards, the values in color, 44 px to touch, the actions in one line that scrolls */
.lista-cartoes .l3.positivo { color: var(--verde); }
.lista-cartoes .l3.negativo { color: var(--vermelho); }
@media (max-width: 767px) {
  .cartao, .tabela-caixa, .prop-numero { border-color: var(--borda); box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset; }
  .topo { background: var(--branco); }
  .btn-icone { width: 44px; height: 44px; }
  .topo .btn-icone, .topo .chat-botao { width: 40px; height: 40px; }
  .btn { min-height: 44px; }
  .btn.pequeno { min-height: 36px; }
  .lista-cartoes > a, .lista-cartoes > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 12px 16px; border-bottom: 1px solid var(--borda); color: inherit; text-decoration: none; min-height: 52px; }
  .lista-cartoes > :last-child { border-bottom: 0; }
  .lista-cartoes > a:active { background: var(--elevado); }
  .lista-cartoes .l1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; grid-column: 1 / -1; font-size: 13px; color: var(--texto-2); }
  .lista-cartoes .l2 { font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.35; }
  .lista-cartoes .l3 { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: start; }
  .lista-cartoes .l3:empty { display: none; }
  .lista-cartoes .l5 { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
  .lista-cartoes .l5:empty { display: none; }
  .lista-cartoes > .total { background: var(--elevado); font-weight: 600; }
  .prop-detalhe .cartao .tabela-caixa { border: 0; }
  .prop-acoes { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .prop-acoes .btn { flex: 0 0 auto; }
  .abas-situacao { scroll-padding-inline: 16px; }
  .cartao > header h2 { font-size: 12px; }
  .prop-selo { font-size: 12px; padding: 2px 8px; }
}