/* ==========================================================================
   Finance Platform · Mirow & Co.
   Paleta oficial apenas (variações por opacidade). Fonte Arial.
   Quatro visuais escolhidos por data-tema no <body>.
   ========================================================================== */

:root {
  --navy: #020E66; --cyan: #00ADEC; --dark: #071C25; --light-blue: #AAD5E8;
  --light-gray: #D2D2D2; --gray: #7F7F7F; --white: #FFFFFF;
  /* Secundárias oficiais (manual de marca, Pantone 281, 286 C, 306 C, 2148 C, 2156 C) */
  --navy-escuro: #020041; --royal: #0E41A7; --ciano-claro: #00D3F5; --azul-medio: #7AB5D3; --petroleo: #066091;
  --cinza-fundo: #F0F1F3;      /* light-gray (#D2D2D2) a ~30% sobre branco */
}

/* ---- Tokens: Clássico (padrão) ---------------------------------------- */
body {
  --page: var(--cinza-fundo);
  --surface: var(--white);
  --text: var(--dark);
  --muted: var(--gray);
  --title: var(--navy);
  --accent: var(--cyan);
  --border: var(--light-gray);
  --line: rgba(210, 210, 210, .55);
  --row-alt: rgba(170, 213, 232, .12);
  --row-hover: rgba(170, 213, 232, .3);
  --selected: rgba(0, 173, 236, .12);
  --head-bg: var(--navy);
  --head-text: var(--white);
  --th-bg: var(--navy);
  --th-text: var(--white);
  --th-size: 13px;
  --th-transform: none;
  --btn-bg: var(--navy);
  --btn-text: var(--white);
  --chip-bg: transparent;
  --radius: 8px;
  --radius-btn: 6px;
  --radius-input: 5px;
  --shadow: none;
  --panel-border: 1px solid var(--border);
  --gap: 20px;
}

/* ---- Suave e Menu lateral: fundo azulado, cartões brancos arredondados - */
body[data-tema="suave"], body[data-tema="lateral"] {
  --page: var(--cinza-fundo);
  --surface: var(--white);
  --line: rgba(170, 213, 232, .45);
  --row-alt: transparent;
  --row-hover: rgba(170, 213, 232, .22);
  --selected: rgba(0, 173, 236, .1);
  --head-bg: var(--white);
  --head-text: var(--navy);
  --th-bg: var(--white);
  --th-text: var(--gray);
  --th-size: 11px;
  --th-transform: uppercase;
  --chip-bg: rgba(170, 213, 232, .35);
  --radius: 16px;
  --radius-btn: 999px;
  --radius-input: 10px;
  --shadow: 0 1px 2px rgba(2, 14, 102, .04), 0 6px 18px rgba(2, 14, 102, .06);
  --panel-border: 1px solid rgba(170, 213, 232, .45);
  --gap: 24px;
}

body[data-tema="lateral"] {
  --th-bg: var(--navy);
  --th-text: var(--white);
  --th-size: 13px;
  --th-transform: none;
  --selected: rgba(14, 65, 167, .14);
  --row-alt: rgba(170, 213, 232, .12);
}

/* ---- Escuro ----------------------------------------------------------- */
body[data-tema="escuro"] {
  --page: var(--dark);
  --surface: #0B2531;          /* dark com ~6% de light-blue */
  --text: #E8F2F7;
  --muted: var(--light-blue);
  --title: var(--white);
  --border: rgba(170, 213, 232, .2);
  --line: rgba(170, 213, 232, .12);
  --row-alt: transparent;
  --row-hover: rgba(0, 173, 236, .1);
  --selected: rgba(0, 173, 236, .18);
  --head-bg: var(--navy);
  --head-text: var(--white);
  --th-bg: #0B2531;
  --th-text: var(--light-blue);
  --th-size: 11px;
  --th-transform: uppercase;
  --btn-bg: var(--cyan);
  --btn-text: var(--dark);
  --chip-bg: rgba(170, 213, 232, .12);
  --radius: 14px;
  --radius-btn: 999px;
  --radius-input: 10px;
  --shadow: 0 6px 20px rgba(0, 0, 0, .25);
  --panel-border: 1px solid rgba(170, 213, 232, .15);
  --gap: 22px;
}

/* ---- Base ------------------------------------------------------------- */
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--text); background: var(--page); font-size: 14px; }
a { color: var(--title); }
h1 { color: var(--title); font-size: 22px; margin: 0 0 4px; }
h2 { color: var(--title); font-size: 15px; margin: 0 0 4px; }
.sub { color: var(--muted); margin: 0; }
.nota, .mini { color: var(--muted); font-size: 12px; }
.mini { margin: 0 0 10px; }
.mini b { color: var(--title); }
main { padding: 22px 28px 48px; max-width: 1560px; margin: 0 auto; }

/* Cabeçalho */
.topo { background: var(--head-bg); color: var(--head-text); display: flex; align-items: center; gap: 24px; padding: 0 28px; min-height: 56px; }
.marca { font-weight: bold; letter-spacing: .3px; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.marca-texto > span { color: var(--accent); font-weight: normal; margin-left: 6px; }
.recolher, .ic-sair { display: none; }
.topo nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.topo nav a { color: var(--head-text); text-decoration: none; padding: 8px 12px; border-radius: var(--radius-btn); opacity: .85; white-space: nowrap; }
.topo nav a:hover { opacity: 1; background: rgba(170, 213, 232, .2); }
.topo nav a.ativo { opacity: 1; background: rgba(170, 213, 232, .25); }
.topo nav .ic { display: none; width: 22px; }
.usuario { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.usuario .email { opacity: .8; }
.usuario form { margin: 0; }
.usuario button, .tema-sel select { background: transparent; border: 1px solid rgba(170, 213, 232, .55); color: inherit; border-radius: var(--radius-btn); padding: 4px 10px; font: inherit; cursor: pointer; }
.tema-sel { display: flex; align-items: center; gap: 6px; opacity: .9; }
.tema-sel option { color: var(--dark); background: var(--white); }

/* Cabeçalho da página e barra de filtros */
.cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 16px; }
.periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.periodo-nav { display: flex; align-items: center; gap: 8px; background: var(--surface); border: var(--panel-border); border-radius: var(--radius-btn); padding: 4px 6px; box-shadow: var(--shadow); }
.periodo-nav strong { color: var(--title); min-width: 150px; text-align: center; }
.seta { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; font-size: 20px; color: var(--title); }
.seta:hover { background: var(--row-hover); }
.seta.off { opacity: .25; }
.atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.atalhos a { font-size: 12px; text-decoration: none; padding: 5px 10px; border-radius: var(--radius-btn); border: 1px solid var(--border); color: var(--title); background: var(--surface); }
.atalhos a:hover, .atalhos a.ativo { background: var(--title); color: var(--page); border-color: var(--title); }
.meses-form, .filtros-lanc { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; font-size: 12px; color: var(--muted); margin: 0; }
.filtros-lanc { margin-bottom: 16px; }
.meses-form label, .filtros-lanc label { display: flex; flex-direction: column; gap: 3px; }
.filtros-lanc .busca { flex: 1; min-width: 180px; }
input, select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-input); color: var(--text); background: var(--surface); }
body[data-tema="escuro"] input, body[data-tema="escuro"] select { color-scheme: dark; }
button.primario, .meses-form button, .filtros-lanc button { background: var(--btn-bg); color: var(--btn-text); border: 0; border-radius: var(--radius-btn); padding: 8px 16px; font: inherit; font-weight: bold; cursor: pointer; }
.filtros-lanc a { align-self: center; font-size: 13px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-btn); overflow: hidden; background: var(--surface); }
.seg a { padding: 6px 12px; text-decoration: none; color: var(--title); font-size: 12px; }
.seg a + a { border-left: 1px solid var(--border); }
.seg a.ativo { background: var(--title); color: var(--page); }

/* Cartões de número */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: var(--gap); }
.card { background: var(--surface); border: var(--panel-border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.card .rot { color: var(--muted); font-size: 12px; }
.card .val { font-size: 22px; font-weight: bold; color: var(--title); margin-top: 6px; font-variant-numeric: tabular-nums; }
.card.destaque { border-left: 4px solid var(--accent); }

/* Painéis e tabelas */
.painel { background: var(--surface); border: var(--panel-border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.painel-tabela { padding: 0; overflow: hidden; }
.tabela { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: 7px 10px; }
.tabela th { background: var(--th-bg); color: var(--th-text); font-weight: normal; font-size: var(--th-size); text-transform: var(--th-transform); letter-spacing: .3px; text-align: right; position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--line); }
.tabela th:first-child, .tabela td:first-child { text-align: left; }
.tabela td { text-align: right; border-top: 1px solid var(--line); white-space: nowrap; }
.tabela tbody tr:nth-child(even) td { background: var(--row-alt); }
.tabela tbody tr:hover td { background: var(--row-hover); }
.tabela tr.selecionado td { background: var(--selected); font-weight: bold; }
.tabela tr.vazio td { color: var(--muted); opacity: .55; }
.neg, .neg-txt { color: var(--title); }
a.mes { text-decoration: none; font-weight: bold; }

/* Fluxo de caixa */
.layout-fluxo { display: grid; grid-template-columns: minmax(330px, 410px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.dia-a-dia { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--gap); min-width: 0; }
.resumo-ano .tabela, .dia-a-dia .tabela { table-layout: fixed; }
.resumo-ano .tabela th:first-child, .resumo-ano .tabela td:first-child { width: 13%; }
.dia-a-dia .tabela th:first-child, .dia-a-dia .tabela td:first-child { width: 19%; }
.resumo-ano .tabela th, .resumo-ano .tabela td, .dia-a-dia .tabela th, .dia-a-dia .tabela td { padding: 6px 6px; overflow: hidden; text-overflow: ellipsis; }
.resumo-ano .tabela td, .dia-a-dia .tabela td { font-size: 12.5px; }
.resumo-ano h2, .dia-a-dia h2 { margin-bottom: 8px; }

/* DRE */
.tabela-wrap { overflow-x: auto; border: var(--panel-border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.tabela-wrap table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.tabela-wrap th { background: var(--th-bg); color: var(--th-text); font-weight: normal; font-size: var(--th-size); text-transform: var(--th-transform); text-align: right; padding: 7px 10px; position: sticky; top: 0; }
.tabela-wrap th:first-child, .tabela-wrap td:first-child { text-align: left; }
.tabela-wrap td { text-align: right; padding: 6px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
tr.grupo td { background: rgba(170, 213, 232, .3) !important; font-weight: bold; color: var(--title); }
tr.subgrupo td:first-child { padding-left: 22px; font-weight: bold; }
tr.conta td { color: var(--muted); font-size: 13px; }
tr.conta td:first-child { padding-left: 40px; }
tr.total td { background: var(--navy) !important; color: var(--white); font-weight: bold; }
tr.saldo td { font-weight: bold; color: var(--title); border-top: 2px solid var(--title); }

/* Lançamentos: cabe na largura da tela, sem rolagem horizontal */
.tabela-lanc { table-layout: fixed; }
.tabela-lanc col.c-sel { width: 3%; }
.tabela-lanc col.c-data { width: 7%; }
.tabela-lanc col.c-status { width: 8.5%; }
.tabela-lanc col.c-conta { width: 12%; }
.tabela-lanc col.c-tipo { width: 9%; }
.tabela-lanc col.c-cc { width: 6.5%; }
.tabela-lanc col.c-forn { width: 11%; }
.tabela-lanc col.c-desc { width: 17%; }
.tabela-lanc col.c-valor { width: 9%; }
.tabela-lanc col.c-det { width: 10.5%; }
.tabela-lanc col.c-acoes { width: 6.5%; }
.tabela-lanc th, .tabela-lanc td { text-align: left; vertical-align: top; }
.tabela-lanc td { white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.35; }
.tabela-lanc .valor { text-align: right; white-space: nowrap; font-weight: bold; }
.tabela-lanc td:nth-child(2) { white-space: nowrap; overflow-wrap: normal; padding-right: 4px; }
.tabela-lanc .sel { text-align: center !important; padding-left: 4px; padding-right: 0; }
.tabela-lanc .sel input, .tabela-lanc #sel-todos { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--royal); cursor: pointer; }
.tabela-lanc tr.marcada td { background: rgba(14, 65, 167, .1) !important; }
.tabela-lanc th a.ordenar { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; }
.tabela-lanc th a.ordenar:hover { border-bottom-style: solid; }
.tabela-lanc td.valor.neg { font-weight: normal; }
.tabela-lanc small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.tabela-lanc small.sem-margem { margin-top: 0; }
.tabela-lanc small.alerta { color: var(--title); font-weight: bold; }
.tabela-lanc tr.editando td { background: var(--selected) !important; }
.tabela-lanc tr.editando input, .tabela-lanc tr.editando select { width: 100%; font-size: 12px; padding: 4px 6px; margin-bottom: 4px; border-radius: 6px; }
.tabela-lanc tr.editando input.num { text-align: right; }
.tabela-lanc tr.editando .check { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.tabela-lanc tr.editando .check input { width: auto; margin: 0; }
.tabela-lanc tr.salvo td { animation: salvo 1.6s ease-out; }
@keyframes salvo { from { background: rgba(0, 173, 236, .35); } }
.acoes { white-space: nowrap; }
.acoes form { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.acoes button { background: transparent; border: 1px solid var(--border); color: var(--title); border-radius: 6px; padding: 2px 7px; font-size: 13px; cursor: pointer; }
.acoes button:hover { background: var(--row-hover); }
.acoes button.salvar { background: var(--btn-bg); color: var(--btn-text); border-color: transparent; font-size: 12px; font-weight: bold; }
.acoes button.cancelar { font-size: 12px; }
.errorlist { list-style: none; margin: 2px 0 4px; padding: 0; color: var(--title); font-size: 11px; font-weight: bold; }
.errorlist li::before { content: "⚠ "; color: var(--accent); }
.status { display: inline-block; white-space: nowrap; font-size: 10px; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--light-blue); color: var(--title); background: var(--chip-bg); letter-spacing: .2px; }
.status.s-realized { background: var(--navy); color: var(--white); border-color: var(--navy); }
.status.s-receivables { background: rgba(0, 173, 236, .18); border-color: transparent; }
.status.s-pay, .status.s-agended { border-color: var(--accent); }
.status.s-canceled { color: var(--muted); text-decoration: line-through; }
body[data-tema="escuro"] .status.s-realized { background: var(--cyan); color: var(--dark); border-color: var(--cyan); }
tr.vazio-msg td { text-align: center !important; color: var(--muted); padding: 28px; }

/* Login */
.login { max-width: 360px; margin: 80px auto; background: var(--surface); border: var(--panel-border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.login label { font-size: 13px; color: var(--muted); }
.login input { width: 100%; padding: 9px; margin: 4px 0 14px; }
.login button { width: 100%; background: var(--btn-bg); color: var(--btn-text); border: 0; padding: 10px; border-radius: var(--radius-btn); font: inherit; font-weight: bold; cursor: pointer; }
.erro { color: var(--title); background: var(--selected); padding: 8px; border-radius: 6px; }

/* ---- Menu lateral: o cabeçalho vira uma barra à esquerda ---------------- */
body[data-tema="lateral"] .topo {
  position: fixed; inset: 0 auto 0 0; width: 230px; flex-direction: column; align-items: stretch;
  gap: 20px; padding: 24px 14px; background: var(--navy-escuro); color: var(--white); --head-text: var(--white);
  transition: width .18s ease; z-index: 5;
}
body[data-tema="lateral"] .marca { padding: 0 6px 14px 10px; border-bottom: 1px solid rgba(170, 213, 232, .25); justify-content: space-between; }
body[data-tema="lateral"] .marca-texto { display: flex; flex-direction: column; gap: 2px; }
body[data-tema="lateral"] .marca-texto > span { margin: 0; font-size: 13px; }
body[data-tema="lateral"] .recolher { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(170, 213, 232, .35); background: transparent; color: var(--white); font-size: 16px; cursor: pointer; flex-shrink: 0; }
body[data-tema="lateral"] .recolher:hover { background: rgba(170, 213, 232, .2); }
body[data-tema="lateral"] .topo nav { flex-direction: column; flex: 1; gap: 2px; }
body[data-tema="lateral"] .topo nav a { border-radius: 10px; padding: 10px 12px; color: var(--white); }
body[data-tema="lateral"] .topo nav a.ativo { background: var(--royal); box-shadow: inset 3px 0 0 var(--cyan); }
body[data-tema="lateral"] .topo nav .ic { display: inline-block; color: var(--cyan); }
body[data-tema="lateral"] .usuario { flex-direction: column; align-items: stretch; gap: 8px; }
body[data-tema="lateral"] .usuario .email { word-break: break-all; }
body[data-tema="lateral"] .usuario button { width: 100%; }
body[data-tema="lateral"] main { margin-left: 230px; max-width: none; padding: 26px 32px 48px; transition: margin-left .18s ease; }
body[data-tema="lateral"] .atalhos a.ativo, body[data-tema="lateral"] .seg a.ativo { background: var(--navy); color: var(--white); }
body[data-tema="lateral"] .tabela tr.selecionado td { background: rgba(14, 65, 167, .14); }

/* Menu lateral recolhido: só os ícones */
.menu-recolhido body[data-tema="lateral"] .topo { width: 68px; padding: 24px 10px; }
.menu-recolhido body[data-tema="lateral"] main { margin-left: 68px; }
.menu-recolhido body[data-tema="lateral"] .marca { justify-content: center; padding: 0 0 14px; }
.menu-recolhido body[data-tema="lateral"] .marca-texto,
.menu-recolhido body[data-tema="lateral"] .txt,
.menu-recolhido body[data-tema="lateral"] .tema-sel { display: none; }
.menu-recolhido body[data-tema="lateral"] .recolher { transform: rotate(180deg); }
.menu-recolhido body[data-tema="lateral"] .topo nav a { justify-content: center; padding: 10px 0; display: flex; }
.menu-recolhido body[data-tema="lateral"] .topo nav .ic { width: auto; font-size: 18px; }
.menu-recolhido body[data-tema="lateral"] .ic-sair { display: inline; }

/* Suave: cabeçalho branco com linha ciano no item ativo */
body[data-tema="suave"] .topo { border-bottom: 1px solid rgba(170, 213, 232, .6); }
body[data-tema="suave"] .topo nav a.ativo { background: transparent; box-shadow: inset 0 -3px 0 var(--cyan); border-radius: 0; }
body[data-tema="suave"] .usuario button, body[data-tema="suave"] .tema-sel select { border-color: var(--light-blue); }

/* ---- Telas menores ---------------------------------------------------- */
/* Tabela de lançamentos em área estreita: esconde Tipo e Empresa·conta·meio
   na leitura (continuam na edição) e alarga data, valor e descrição. */
.tabela-lanc.estreita col.c-tipo, .tabela-lanc.estreita col.c-det { width: 0; }
.tabela-lanc.estreita col.c-data { width: 10%; }
.tabela-lanc.estreita col.c-status { width: 10.5%; }
.tabela-lanc.estreita col.c-conta { width: 15.5%; }
.tabela-lanc.estreita col.c-cc { width: 8%; }
.tabela-lanc.estreita col.c-forn { width: 12.5%; }
.tabela-lanc.estreita col.c-desc { width: 21.5%; }
.tabela-lanc.estreita col.c-valor { width: 12%; }
.tabela-lanc.estreita col.c-acoes { width: 6.5%; }
.tabela-lanc.estreita th:nth-child(5), .tabela-lanc.estreita th:nth-child(10),
.tabela-lanc.estreita td:nth-child(5), .tabela-lanc.estreita td:nth-child(10) { padding: 0; border-left: 0; border-right: 0; overflow: hidden; font-size: 0; }
.tabela-lanc.estreita td:nth-child(5) *, .tabela-lanc.estreita td:nth-child(10) * { display: none; }

@media (max-width: 1100px) {
  .layout-fluxo { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topo { gap: 10px; padding: 8px 16px; flex-wrap: wrap; }
  main { padding: 16px; }
  body[data-tema="lateral"] .topo { position: static; width: auto; flex-direction: row; flex-wrap: wrap; }
  body[data-tema="lateral"] main { margin-left: 0; }
}

/* Botões secundários, barra de seleção, colar, importar, mensagens */
.botoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.botao-sec { display: inline-block; text-decoration: none; background: var(--surface); color: var(--title); border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.botao-sec:hover { background: var(--row-hover); }
.barra-selecao, .painel-colar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--radius); background: var(--royal); color: var(--white); font-size: 13px; }
.barra-selecao[hidden], .painel-colar[hidden] { display: none; }
.barra-selecao button, .painel-colar button:not(.primario) { background: transparent; color: var(--white); border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--radius-btn); padding: 5px 12px; font: inherit; cursor: pointer; }
.barra-selecao button:hover, .painel-colar button:not(.primario):hover { background: rgba(255, 255, 255, .15); }
.painel-colar { background: var(--navy); }
.painel-colar label { display: flex; align-items: center; gap: 6px; }
.painel-colar .primario { background: var(--cyan); color: var(--navy); }
.dica { opacity: .75; font-size: 12px; }
.mensagens { margin-bottom: 14px; }
.mensagem { margin: 0 0 8px; padding: 10px 14px; border-radius: var(--radius); background: var(--surface); border-left: 4px solid var(--cyan); color: var(--text); box-shadow: var(--shadow); }
.mensagem.error { border-left-color: var(--navy); font-weight: bold; }
.importar form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 18px; }
.importar .arquivo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.importar .confirmar { display: flex; gap: 16px; align-items: center; margin: 0; }
.lista-ajuda { margin: 6px 0 0; padding-left: 20px; line-height: 1.6; }
.cards-import { margin: 12px 0 16px; }
.tabela-import td { white-space: normal; text-align: left; vertical-align: top; font-size: 13px; }
.tabela-import th { text-align: left; }
.tabela-import small { display: block; color: var(--muted); }
.status.s-novo { background: rgba(0, 173, 236, .18); border-color: transparent; }
.status.s-alterar { background: var(--royal); color: var(--white); border-color: var(--royal); }
.status.s-erro { background: var(--navy); color: var(--white); border-color: var(--navy); }
tr.acao-erro td { color: var(--title); }

/* O atributo hidden sempre vence (botões com display próprio) */
[hidden] { display: none !important; }
.filtros-lanc select { max-width: 175px; }
.filtros-lanc input[type="month"] { width: 150px; }
.filtros-lanc .busca { min-width: 160px; }

/* ==========================================================================
   Menu lateral: toque mais suave e amigável
   Bordas mais arredondadas, sombras leves, fonte arredondada (escolhida no seletor "Fonte").
   ========================================================================== */
body[data-tema="lateral"] {
  --radius: 22px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --shadow: 0 1px 2px rgba(2, 14, 102, .04), 0 10px 28px rgba(2, 14, 102, .07);
  --panel-border: 1px solid rgba(170, 213, 232, .35);
  --line: rgba(170, 213, 232, .35);
  --gap: 26px;
}
body[data-tema="lateral"][data-fonte="nunito"] { font-family: "Nunito", Arial, sans-serif; }
body[data-tema="lateral"][data-fonte="quicksand"] { font-family: "Quicksand", Arial, sans-serif; font-weight: 500; }
body[data-tema="lateral"][data-fonte="varela"] { font-family: "Varela Round", Arial, sans-serif; }
body[data-tema="lateral"] input, body[data-tema="lateral"] select, body[data-tema="lateral"] button { font-family: inherit; }
body[data-tema="lateral"] .tabela, body[data-tema="lateral"] .card .val { font-variant-numeric: tabular-nums lining-nums; }
body[data-tema="lateral"][data-fonte="nunito"] h1, body[data-tema="lateral"][data-fonte="nunito"] h2 { font-weight: 800; letter-spacing: -.2px; }
body[data-tema="lateral"] h1 { font-size: 24px; }

/* Barra lateral: cantos arredondados no lado direito e itens em "pílula" */
body[data-tema="lateral"] .topo { border-radius: 0 26px 26px 0; box-shadow: 4px 0 24px rgba(2, 0, 65, .12); }
body[data-tema="lateral"] .topo nav a { border-radius: 14px; padding: 11px 14px; transition: background .15s ease; }
body[data-tema="lateral"] .topo nav .ic { font-size: 16px; }
body[data-tema="lateral"] .recolher { border-radius: 12px; }

/* Cartões, painéis e tabelas mais macios */
body[data-tema="lateral"] .card { padding: 18px 20px; }
body[data-tema="lateral"] .card .val { font-size: 24px; }
body[data-tema="lateral"] .painel { padding: 18px 20px; }
body[data-tema="lateral"] .painel-tabela { padding: 0; }
body[data-tema="lateral"] .tabela th { font-weight: 700; padding: 11px 10px; }
body[data-tema="lateral"] .tabela td { padding: 9px 10px; }
body[data-tema="lateral"] .tabela tbody tr:last-child td { border-bottom: 0; }
body[data-tema="lateral"] .status { border-radius: 999px; padding: 3px 9px; font-weight: 700; }
body[data-tema="lateral"] .acoes button { border-radius: 10px; padding: 3px 8px; }
body[data-tema="lateral"] .barra-selecao, body[data-tema="lateral"] .painel-colar { border-radius: 18px; padding: 12px 18px; }
body[data-tema="lateral"] .mensagem { border-radius: 16px; }
body[data-tema="lateral"] .periodo-nav { padding: 5px 8px; }
body[data-tema="lateral"] .tabela-wrap { border-radius: 22px; }

/* Botão de descartar cópia, colado ao "Colar" */
.grupo-colar { display: inline-flex; }
.grupo-colar #colar { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.grupo-colar .descartar { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 7px 10px; }
.lote-valor { display: inline-flex; gap: 6px; }
.painel-colar select, .painel-colar input { color: var(--dark); background: var(--white); }

/* ==========================================================================
   Contas a pagar / receber
   ========================================================================== */
.botao-link { text-decoration: none; display: inline-block; }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-link { text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.card-link:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(2, 14, 102, .12); }
.mini-card { color: var(--muted); font-size: 12px; margin-top: 4px; }

.bloco { margin-bottom: 18px; }
.bloco > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 4px 10px; color: var(--title); }
.bloco > summary::-webkit-details-marker { display: none; }
.bloco > summary::before { content: "▸"; color: var(--accent); margin-right: 6px; transition: transform .15s ease; display: inline-block; }
.bloco[open] > summary::before { transform: rotate(90deg); }
.bloco-titulo { font-weight: bold; font-size: 15px; flex: 1; }
.bloco-info { color: var(--muted); font-size: 13px; }
.bloco-info b { color: var(--title); }
.vazio-bloco { padding: 0 4px; }

.tabela-contas td { white-space: normal; text-align: left; vertical-align: top; font-size: 13px; }
.tabela-contas th { text-align: left; }
.tabela-contas .valor { text-align: right; white-space: nowrap; font-weight: bold; }
.tabela-contas td.neg { font-weight: normal; color: var(--muted); }
.tabela-contas small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.tabela-contas small.sem-margem { margin-top: 0; }
.tabela-contas .sel { width: 30px; text-align: center; }
.tabela-contas .sel input { accent-color: var(--royal); width: 15px; height: 15px; cursor: pointer; }
.tabela-contas tr.marcada td { background: rgba(14, 65, 167, .1) !important; }
.tabela-contas tr.atrasada td:nth-child(2) { color: var(--title); font-weight: bold; }
.tabela-contas tr.atrasada td:nth-child(2)::after { content: " ⚠"; color: var(--accent); }
.tabela-contas tfoot td { font-weight: bold; }
.acoes .icone { text-decoration: none; display: inline-block; border: 1px solid var(--border); border-radius: 8px; padding: 2px 8px; color: var(--title); }
.acoes .icone:hover { background: var(--row-hover); }
.acoes button.receber { font-size: 12px; margin-left: 4px; }
.barra-selecao label { display: inline-flex; align-items: center; gap: 6px; }
.barra-selecao input[type="date"] { color: var(--dark); background: var(--white); padding: 4px 6px; }

.status.s-nf-emitida { background: rgba(0, 173, 236, .18); border-color: transparent; }
.status.s-nf-recebida { background: var(--navy); color: var(--white); border-color: var(--navy); }
.status.s-nf-nao_emitida { border-style: dashed; }
.status.s-nf-cancelada { color: var(--muted); text-decoration: line-through; }

/* Formulários de página inteira */
.form-grid { display: grid; gap: 18px; }
.form-grid fieldset { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.form-grid legend { color: var(--title); font-weight: bold; font-size: 15px; margin-bottom: 8px; padding: 0; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.form-grid label small { font-size: 11px; }
.form-grid .largo { grid-column: 1 / -1; }
.form-grid input, .form-grid select { width: 100%; font-size: 14px; padding: 8px 10px; }
.form-grid input[type="checkbox"] { width: auto; }
.acoes-form { display: flex; align-items: center; gap: 16px; }
.resumo-nf { display: flex; gap: 12px; flex-wrap: wrap; }
.resumo-nf div { flex: 1; min-width: 150px; background: var(--row-alt); border-radius: var(--radius-input); padding: 10px 14px; display: flex; flex-direction: column; }
.resumo-nf span { font-size: 12px; color: var(--muted); }
.resumo-nf b { font-size: 18px; color: var(--title); font-variant-numeric: tabular-nums; }
.resumo-nf div:last-child { background: rgba(0, 173, 236, .14); }

/* Lote semanal */
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.passo { background: var(--surface); border: var(--panel-border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.passo b { color: var(--title); }
.passo.atual { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.passo.feito b::after { content: " ✓"; color: var(--accent); }
.acoes-lote, .linha-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.acoes-lote form { margin: 0; }
.linha-form label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.check-filtro { flex-direction: row !important; align-items: center; gap: 6px !important; align-self: center; }
button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 900px) { .cards-3, .passos { grid-template-columns: 1fr; } }

a.primario { display: inline-block; text-decoration: none; background: var(--btn-bg); color: var(--btn-text); border-radius: var(--radius-btn); padding: 8px 16px; font-weight: bold; }
.tabela-contas { table-layout: fixed; }
.tabela-contas .sel { width: 4%; }
.tabela-contas .c-venc { width: 11%; }
.tabela-contas .c-forn { width: 17%; }
.tabela-contas .c-conta { width: 18%; }
.tabela-contas .c-status { width: 11%; }
.tabela-contas .c-valor { width: 12%; }
.tabela-contas .c-acao { width: 5%; }
.tabela-contas td:nth-child(2) { white-space: nowrap; overflow-wrap: normal; }
.tabela-contas td { overflow-wrap: anywhere; }

.tabela-contas col.r-sel { width: 4%; }
.tabela-contas col.r-venc { width: 10%; }
.tabela-contas col.r-proj { width: 9%; }
.tabela-contas col.r-cli { width: 10%; }
.tabela-contas col.r-nf { width: 8%; }
.tabela-contas col.r-par { width: 6%; }
.tabela-contas col.r-val { width: 12%; }
.tabela-contas col.r-status { width: 11%; }
.tabela-contas col.r-acao { width: 6%; }
.tabela-contas td .status { white-space: normal; text-align: center; }

.tabela-contas td:first-child { white-space: nowrap; }
.tabela-contas .sel + td { white-space: nowrap; }
.acoes .icone-btn { background: transparent; border: 1px solid var(--accent); color: var(--title); border-radius: 8px; padding: 2px 8px; font-size: 13px; cursor: pointer; margin-left: 4px; }
.acoes .icone-btn:hover { background: rgba(0, 173, 236, .15); }
.tabela-contas tr.atrasada-nf td:first-child { color: var(--title); font-weight: bold; }
.tabela-contas tr.atrasada-nf td:first-child::after { content: " ⚠"; color: var(--accent); }

/* Botão de configurações (antes "Cadastros") */
.config { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-btn); border: 1px solid rgba(170, 213, 232, .45); white-space: nowrap; }
.config:hover { background: rgba(170, 213, 232, .2); }
.config .ic { display: inline; }
body[data-tema="lateral"] .config { justify-content: center; border-radius: 12px; padding: 9px 12px; }
.menu-recolhido body[data-tema="lateral"] .config { padding: 9px 0; }

/* Tabelas dentro de painéis: cabeçalho com cantos arredondados acompanhando o painel */
.painel .tabela { border-collapse: separate; border-spacing: 0; }
.painel:not(.painel-tabela) .tabela thead th:first-child { border-top-left-radius: 12px; }
.painel:not(.painel-tabela) .tabela thead th:last-child { border-top-right-radius: 12px; }
.painel:not(.painel-tabela) .tabela tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.painel:not(.painel-tabela) .tabela tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }
body[data-tema="lateral"] .painel:not(.painel-tabela) .tabela thead th:first-child { border-top-left-radius: 14px; }
body[data-tema="lateral"] .painel:not(.painel-tabela) .tabela thead th:last-child { border-top-right-radius: 14px; }

/* Fluxo: coluna esquerda com resumo, atenção e próximos 7 dias */
.coluna-esquerda { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.aviso h2 { margin-bottom: 8px; }
.aviso p { margin: 4px 0; font-size: 13px; }
.aviso-alerta { border-left: 5px solid var(--cyan); background: linear-gradient(0deg, rgba(0, 173, 236, .08), rgba(0, 173, 236, .08)), var(--surface); }
.aviso-ok { border-left: 5px solid var(--azul-medio); }
.proximos h2 small { font-weight: normal; color: var(--muted); font-size: 12px; margin-left: 6px; }
.prox-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 6px; }
.prox-bloco { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text); background: var(--row-alt); border-radius: var(--radius-input); padding: 10px 12px; }
.prox-bloco:hover { background: var(--row-hover); }
.prox-bloco span { font-size: 12px; color: var(--muted); }
.prox-bloco b { font-size: 17px; color: var(--title); font-variant-numeric: tabular-nums; }
.prox-lista { list-style: none; margin: 0 0 6px; padding: 0; font-size: 13px; }
.prox-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); }
.prox-lista li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prox-lista li b { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--title); }
.proximos .mini { margin: 10px 0 2px; font-weight: bold; }

/* Configurações */
.config.ativo { background: var(--royal); border-color: var(--royal); }
.config-aparencia { margin-bottom: var(--gap); }
.config-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 12px 0; }
.config-rot { min-width: 160px; font-weight: bold; color: var(--title); }
.config-rot small { font-weight: normal; color: var(--muted); }
.seg a.fonte-nunito { font-family: "Nunito", Arial, sans-serif; }
.seg a.fonte-quicksand { font-family: "Quicksand", Arial, sans-serif; font-weight: 600; }
.seg a.fonte-varela { font-family: "Varela Round", Arial, sans-serif; }
.seg a.fonte-arial { font-family: Arial, sans-serif; }
.titulo-secao { margin: 6px 0 12px; font-size: 17px; }
.config-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.config-grade h3 { margin: 0 0 8px; color: var(--title); font-size: 14px; }
.config-links { list-style: none; margin: 0; padding: 0; }
.config-links li { border-top: 1px solid var(--line); }
.config-links li:first-child { border-top: 0; }
.config-links a { display: block; padding: 7px 2px; text-decoration: none; color: var(--text); }
.config-links a:hover { color: var(--title); font-weight: bold; }

/* Resultado mensal (DRE): coluna de nomes fixa, compacta, linhas recolhíveis */
.botoes-dre { display: flex; gap: 8px; margin-left: auto; }
.tabela-dre { max-height: calc(100vh - 230px); overflow: auto; scrollbar-width: thin; }
.tabela-dre::-webkit-scrollbar { height: 8px; width: 8px; }
.tabela-dre::-webkit-scrollbar-thumb { background: var(--azul-medio); border-radius: 8px; }
.tabela-dre table { border-collapse: separate; border-spacing: 0; }
.tabela-dre th, .tabela-dre td { font-size: 12.5px; padding: 6px 8px; }
.tabela-dre.escala-mil th:not(.col-nome), .tabela-dre.escala-mil td:not(.col-nome) { min-width: 62px; }
.tabela-dre .col-nome { position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 210px; max-width: 260px; white-space: normal; box-shadow: 1px 0 0 var(--line); }
.tabela-dre thead th { z-index: 3; }
.tabela-dre thead th.col-nome { z-index: 4; background: var(--th-bg); }
.tabela-dre tr.grupo td.col-nome { background: #E4F1F7 !important; }  /* opaco: a coluna fixa cobre o que rola por baixo */
.tabela-dre tr.total td.col-nome { background: var(--navy); }
.tabela-dre tr.conta td.col-nome { padding-left: 46px; }
.tabela-dre tr.subgrupo td.col-nome { padding-left: 18px; }
.recolher-linha { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 13px; width: 20px; padding: 0; margin-right: 4px; transition: transform .15s ease; }
tr.recolhida .recolher-linha { transform: rotate(-90deg); }
tr.recolhida td { font-style: italic; }

/* Folha de pagamento */
.status.s-folha-aberta { border-color: var(--accent); }
.status.s-folha-fechada { background: rgba(0, 173, 236, .18); border-color: transparent; }
.status.s-folha-paga { background: var(--navy); color: var(--white); border-color: var(--navy); }
.tabela-folha td { white-space: nowrap; }
.tabela-folha td:first-child { white-space: normal; }
.tabela-folha td.valor small { font-weight: normal; }
.layout-item { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(0, 1.1fr); gap: var(--gap); align-items: start; }
.tabela-memoria td { white-space: normal; text-align: left; }
.tabela-memoria td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; width: 140px; }
.tabela-memoria tr.sec td { color: var(--title); font-weight: bold; padding-top: 14px; border-top: 0; text-transform: uppercase; font-size: 11px; letter-spacing: .4px; }
.tabela-memoria tr.sub td { font-weight: bold; color: var(--title); }
.tabela-memoria tr.total td { background: var(--navy); color: var(--white); font-weight: bold; }
.tabela-memoria tr.info td { color: var(--muted); font-size: 12px; }
.tabela-memoria tr.alerta-linha td { color: var(--title); background: rgba(0, 173, 236, .1); }
.tabela-memoria small { color: var(--muted); display: block; font-size: 11px; }
.form-grid fieldset[disabled] input { background: var(--row-alt); }
@media (max-width: 1100px) { .layout-item { grid-template-columns: 1fr; } }

/* Logo Mirow */
.marca .logo { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
body[data-tema="lateral"] .marca { gap: 10px; }
body[data-tema="lateral"] .marca .logo { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(170, 213, 232, .3); }
.menu-recolhido body[data-tema="lateral"] .marca { flex-direction: column; gap: 10px; }
.mini-botao { font-size: 12px; padding: 4px 10px; margin-left: 10px; vertical-align: middle; font-weight: normal; }
.memoria .tabela-memoria small { display: block; }

.lista-aviso { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; }
.lista-aviso a { color: var(--title); }
/* Tela de login: sem menu lateral, cartão centralizado */
body.sem-menu main, .menu-recolhido body.sem-menu main { margin-left: 0; max-width: none; min-height: 100vh; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
body.sem-menu .login { margin: 0; width: 100%; }
/* Botão no padrão da Microsoft (logo oficial, fundo branco, borda cinza) */
.login .botao-microsoft { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; box-sizing: border-box; height: 42px; margin: 8px 0 16px;
  background: #fff; color: #5e5e5e; border: 1px solid #8c8c8c; border-radius: var(--radius-btn); font-family: "Segoe UI", Arial, sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; }
.login .botao-microsoft:hover { background: #f3f3f3; }
.login .botao-microsoft:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.login .nota { font-size: 12px; color: var(--muted); margin: 0 0 8px; }