/* Lista aberta dos selects: fundo e texto fixos (herdar a cor do select deixava claro sobre claro) */
    select option { background-color: #ffffff; color: #171717; }
    .dark select option { background-color: #262626; color: #fafafa; }
    .dark ::placeholder { color: #a3a3a3; opacity: 1; }
    html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* ===== Tabela de notas ===== */
#janela-tabela, .caixa-lista { overflow: clip; }
.tabela-rolagem { overflow: auto; }
.tabela-notas thead th { border-right: 1px solid rgba(128, 135, 150, .3); }
.tabela-notas thead th:last-child { border-right: 0; }
.tabela-rolagem thead th { position: sticky; top: 0; z-index: 20; background-color: #f8fafc; box-shadow: inset 0 -1px 0 rgba(128, 135, 150, .35); }
.dark .tabela-rolagem thead th { background-color: #171717; }

/* cabeçalho: ordenar, filtrar e redimensionar */
.cab-ordem { display: inline-flex; align-items: center; gap: .3rem; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.cab-ordem:hover { text-decoration: underline; }
.seta { font-size: .65rem; opacity: .4; }
th[aria-sort="ascending"] .seta, th[aria-sort="descending"] .seta { opacity: 1; }
.cab-filtro { padding: 2px; border-radius: 4px; opacity: .4; cursor: pointer; }
th:hover .cab-filtro, .cab-filtro:focus-visible { opacity: 1; }
.col-resize { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; touch-action: none; }
.col-resize:hover, .col-resize.arrastando { background: rgba(128, 135, 150, .45); }
.tabela-notas.larguras-fixas { table-layout: fixed; max-width: 100%; }
.tabela-notas.larguras-fixas td { overflow: hidden; text-overflow: ellipsis; }

/* densidade */
[data-densidade-btn][aria-pressed="true"] { background: #e2e8f0; color: #0f172a; }
.dark [data-densidade-btn][aria-pressed="true"] { background: #404040; color: #fff; }
html[data-densidade="compacta"] .tabela-notas :is(td, th) { padding-top: .3rem; padding-bottom: .3rem; }
html[data-densidade="compacta"] .tabela-notas td { font-size: .875rem; line-height: 1.25rem; border-right: 1px solid rgba(128, 135, 150, .16); }
html[data-densidade="compacta"] .tabela-notas td:last-child { border-right: 0; }
html[data-densidade="compacta"] .tabela-notas .sub-info { display: none; }
html[data-densidade="compacta"] .tabela-notas select { padding-top: .1rem; padding-bottom: .1rem; font-size: .8rem; }
html[data-densidade="compacta"] .tabela-notas td [class*="p-2.5"] { padding: .25rem; }

/* cards do resumo encolhem quando um status está escolhido */
.cards-compactos > button { padding: .5rem 1rem; }
.cards-compactos > button p:nth-child(2) { margin-top: 0; font-size: 1.25rem; line-height: 1.75rem; }
.cards-compactos > button p:nth-child(3) { display: none; }

/* termo buscado, destacado na tabela */
.achado { background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); border-radius: .25rem; color: inherit; }
html:not(.dark) .achado { background: rgba(15, 17, 21, .1); box-shadow: 0 0 0 2px rgba(15, 17, 21, .1); }

/* filtro pequeno de cada coluna */
.cab-filtro.ativo { opacity: 1; color: #d99a00; }
.pop-filtro { position: absolute; z-index: 60; min-width: 14rem; padding: .75rem; border-radius: .75rem; border: 1px solid #d4d4d4; background: #fff; color: #171717; box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: .875rem; }
.dark .pop-filtro { background: #1f1f1f; color: #fafafa; border-color: #404040; }
.pop-filtro label { display: block; margin: 0 0 .25rem; font-weight: 500; color: #525252; }
.dark .pop-filtro label { color: #d4d4d4; }
.pop-filtro input { width: 100%; height: 2.25rem; padding: 0 .6rem; border-radius: .5rem; border: 1px solid #d4d4d4; background: transparent; color: inherit; margin-bottom: .5rem; }
.dark .pop-filtro input { border-color: #525252; color-scheme: dark; }
.pop-filtro .pop-opcao { display: block; width: 100%; text-align: left; padding: .4rem .6rem; border-radius: .5rem; cursor: pointer; }
.pop-filtro .pop-opcao:hover, .pop-filtro .pop-opcao[aria-pressed="true"] { background: rgba(128,135,150,.22); }
.pop-filtro .pop-limpar { margin-top: .25rem; font-size: .75rem; text-decoration: underline; color: #737373; cursor: pointer; }

/* lista aberta dos selects com cantos arredondados (Chrome/Edge recentes; nos demais fica a lista padrão) */
@supports (appearance: base-select) {
  #filtros select, #filtros select::picker(select) { appearance: base-select; }
  #filtros select { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; line-height: 1.25rem; }
  #filtros select::picker-icon { font-size: .75em; }
  #filtros select::picker(select) { border: 1px solid #d4d4d4; border-radius: .75rem; padding: .25rem; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
  .dark #filtros select::picker(select) { background: #262626; border-color: #404040; }
  #filtros select option { border-radius: .5rem; padding: .4rem .6rem; }
  #filtros select option:hover, #filtros select option:checked { background: rgba(128,135,150,.25); }
}

/* menu Excluir fica acima do cabeçalho fixo da tabela */
#menu-excluir[open] > div { z-index: 50; }
#menu-excluir[open] { position: relative; z-index: 50; }

/* paginação */
.pag-seta { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; min-width: 2.25rem; padding: 0 .5rem; border-radius: .5rem; border: 1px solid rgba(128,135,150,.35); background: transparent; cursor: pointer; font-weight: 500; color: inherit; }
.pag-seta:hover:not(:disabled) { background: rgba(128,135,150,.2); }
.pag-seta:disabled { opacity: .35; cursor: default; }
.pag-atual { background: rgba(128,135,150,.28); cursor: default; }
.pag-divisor { width: 1px; height: 1.25rem; background: rgba(128,135,150,.4); }
.pag-select { height: 2.25rem; min-width: 4rem; padding: 0 .6rem; line-height: 1.25rem; text-align: center; border-radius: .5rem; border: 1px solid rgba(128,135,150,.35); background: transparent; color: inherit; }
.dark .pag-select option { background: #262626; color: #fafafa; }
@supports (appearance: base-select) {
  .pag-select, .pag-select::picker(select) { appearance: base-select; }
  .pag-select { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .pag-select::picker(select) { max-height: 18rem; border: 1px solid #d4d4d4; border-radius: .75rem; padding: .25rem; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
  .dark .pag-select::picker(select) { background: #262626; border-color: #404040; }
  .pag-select option { border-radius: .5rem; padding: .35rem .6rem; }
  .pag-select option:hover, .pag-select option:checked { background: rgba(128,135,150,.25); }
}

/* Lista de notas (computador): a página não rola; busca, filtros e cabeçalho da tabela ficam fixos e só as linhas rolam */
@media (min-width: 768px) {
  body.pagina-lista { height: 100vh; overflow: hidden; }
  body.pagina-lista > .md\:flex { height: calc(100vh - 4rem); }
  .pagina-lista-corpo { display: flex; flex-direction: column; min-height: 0; height: 100%; }
  .pagina-lista-main { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .lista-secao { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .janela-lista { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .corpo-lista { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: .75rem; padding-bottom: .75rem; }
  .corpo-lista > #tabela { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #tabela > .caixa-lista { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #tabela > .caixa-lista > .tabela-rolagem { flex: 1; min-height: 0; }
}
/* cards da Início */
.cartao-inicio { display: block; border-radius: .75rem; border: 1px solid #e5e5e5; background: #fff; padding: 1.25rem; transition: border-color .15s, transform .15s; }
.cartao-inicio:hover { border-color: #818cf8; transform: translateY(-1px); }
.dark .cartao-inicio { background: #171717; border-color: #262626; }
.dark .cartao-inicio:hover { border-color: #6366f1; }

/* cards pequenos da lista, na linha de ferramentas da tabela */
.mini-cartoes { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; min-width: 0; }
.mini-cartao { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; height: 2.75rem; min-width: 6.5rem; padding: 0 .85rem; border-radius: .6rem; border: 1px solid rgba(128,135,150,.35); background: transparent; color: inherit; cursor: pointer; line-height: 1.1; text-align: left; }
.mini-cartao:hover { border-color: #818cf8; }
.mini-cartao.mini-ativo { border-color: #6366f1; box-shadow: 0 0 0 1px #6366f1; }
.mini-rotulo { font-size: .75rem; color: #737373; }
.dark .mini-rotulo { color: #d4d4d4; }
.mini-valor { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* a linha de ferramentas tem tudo na mesma altura */
#tabela [role="group"][aria-label="Densidade da tabela"] { height: 2.75rem; }
#tabela [role="group"][aria-label="Densidade da tabela"] > button { height: 100%; }
#baixar-zip, #marcar-lote, #menu-excluir > summary { min-height: 2.75rem; }
/* Filtrar tem a cor dos outros botões e só escurece quando está aberto ou com filtro ativo */
#botao-filtrar[aria-expanded="true"], #botao-filtrar.ativo { background: #171717; border-color: #171717; color: #fff; }
.dark #botao-filtrar[aria-expanded="true"], .dark #botao-filtrar.ativo { background: #fff; border-color: #fff; color: #000; }

/* Celular: a busca fica só com a lupa e o texto (o "Automática" some) e o Filtrar vira só o ícone */
@media (max-width: 639px) {
  #filtros #tipo { display: none !important; }
  #botao-filtrar { padding: 0 .85rem; }
  .rotulo-filtrar { display: none; }
  .pag-divisor { display: none; }
  .paginacao { justify-content: center; }
  .paginacao > div, .paginacao > nav { justify-content: center; width: 100%; }
}

/* ===== Menu da conta (canto superior direito, ao lado do modo escuro) ===== */
.menu-conta { position: relative; }
.avatar-conta { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; cursor: pointer; list-style: none; font-size: .8rem; font-weight: 700; letter-spacing: .02em; background: #171717; color: #fff; border: 2px solid transparent; }
.avatar-conta::-webkit-details-marker { display: none; }
.dark .avatar-conta { background: #fff; color: #000; }
.menu-conta[open] > .avatar-conta, .avatar-conta:focus-visible { border-color: #6366f1; outline: none; }
.conta-painel { position: absolute; right: 0; top: calc(100% + .5rem); width: 17rem; z-index: 60; padding: .5rem; border-radius: 1rem; border: 1px solid #e5e5e5; background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.dark .conta-painel { background: #262626; border-color: #404040; }
.conta-cab { display: flex; flex-direction: column; padding: .6rem .75rem .75rem; border-bottom: 1px solid rgba(128,135,150,.25); margin-bottom: .35rem; }
.conta-cab strong { font-size: 1rem; color: #171717; }
.conta-cab span { font-size: .8rem; color: #737373; }
.dark .conta-cab strong { color: #fafafa; } .dark .conta-cab span { color: #d4d4d4; }
.conta-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .65rem .75rem; border-radius: .65rem; text-align: left; font-size: .95rem; font-weight: 500; color: #404040; background: transparent; border: 0; cursor: pointer; }
.conta-item:hover { background: rgba(128,135,150,.18); }
.dark .conta-item { color: #e5e5e5; }
.conta-item svg { width: 1.25rem; height: 1.25rem; flex: none; }
.conta-sep { height: 1px; margin: .35rem 0; background: rgba(128,135,150,.25); }
.conta-tema { display: none; }

/* ===== Primeiros passos (Início) ===== */
.passos { border-radius: 1rem; border: 1px solid #e5e5e5; background: #fff; padding: 1.1rem 1.25rem; }
.dark .passos { background: #171717; border-color: #262626; }
.passos-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.passos-cab h2 { font-size: 1.1rem; font-weight: 700; }
.passos-cont { font-weight: 500; color: #737373; }
.passos-fechar { font-size: .85rem; color: #737373; text-decoration: underline; cursor: pointer; background: none; border: 0; }
.passos-lista { list-style: none; display: grid; gap: .5rem; margin-bottom: .9rem; }
.passos-lista li { display: flex; align-items: center; gap: .65rem; font-size: .95rem; }
.passos-lista a { text-decoration: underline; text-underline-offset: 3px; }
.passo-marca { width: 1.15rem; height: 1.15rem; border-radius: 9999px; border: 2px solid #a3a3a3; flex: none; }
.passos-lista li.feito { color: #737373; }
.passos-lista li.feito .passo-marca { border-color: #22c55e; background: #22c55e; box-shadow: inset 0 0 0 3px #fff; }
.dark .passos-lista li.feito .passo-marca { box-shadow: inset 0 0 0 3px #171717; }
.passos-lista li.feito span:last-child, .passos-lista li.feito a { text-decoration: line-through; }
.passos-tour { height: 2.5rem; padding: 0 1.1rem; border-radius: 9999px; border: 1px solid #a3a3a3; font-weight: 600; font-size: .9rem; background: transparent; cursor: pointer; color: inherit; }
.passos-tour:hover { background: rgba(128,135,150,.18); }

/* ===== Tour guiado ===== */
.tour-destaque { position: fixed; z-index: 9998; border-radius: .75rem; box-shadow: 0 0 0 9999px rgba(0,0,0,.62), 0 0 0 3px #a3e635; pointer-events: none; transition: all .25s ease; }
.tour-balao { position: fixed; z-index: 9999; width: min(21rem, calc(100vw - 1.5rem)); padding: 1rem 1.1rem; border-radius: 1rem; background: #fff; color: #171717; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.dark .tour-balao { background: #262626; color: #fafafa; border: 1px solid #404040; }
.tour-balao h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .35rem; }
.tour-balao p { font-size: .92rem; line-height: 1.4; color: #525252; }
.dark .tour-balao p { color: #d4d4d4; }
.tour-rodape { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .9rem; }
.tour-contagem { font-size: .8rem; color: #737373; }
.tour-botoes { display: flex; gap: .5rem; }
.tour-btn { height: 2.3rem; padding: 0 1rem; border-radius: 9999px; font-weight: 600; font-size: .88rem; cursor: pointer; border: 1px solid #a3a3a3; background: transparent; color: inherit; }
.tour-btn.principal { background: #171717; color: #fff; border-color: #171717; }
.dark .tour-btn.principal { background: #a3e635; color: #111; border-color: #a3e635; }
.tour-encerrar { font-size: .8rem; color: #737373; text-decoration: underline; cursor: pointer; background: none; border: 0; }

/* elementos que só existem no celular ficam escondidos no computador */
.resumo-fixo, .pag-movel, .bt-excel-movel { display: none; }

/* ===== CELULAR (até 767px): layout próprio, separado do computador ===== */
@media (max-width: 767px) {
  .conta-tema { display: flex; }
  #topo #alternar-tema { display: none; }
  .conta-painel { position: fixed; right: .5rem; top: 4.25rem; }

  /* janela da lista sem moldura: só o conteúdo */
  main.pagina-lista-main { padding: .5rem .5rem 0 !important; }
  .janela-lista { border: 0 !important; background: transparent !important; border-radius: 0 !important; }
  .janela-lista > .cab-janela { display: none !important; }
  .corpo-lista { padding: 0 !important; }
  #tabela { padding-bottom: 6.5rem; }
  .caixa-lista { border-radius: .9rem !important; background: transparent; }

  /* resumo fixo no topo, junto da busca */
  .resumo-fixo { display: flex; align-items: center; gap: .4rem; position: sticky; top: 4rem; z-index: 30; margin: 0 -.5rem .5rem; padding: .4rem .5rem; background: rgba(245,245,245,.96); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(128,135,150,.25); }
  .dark .resumo-fixo { background: rgba(23,23,23,.96); }
  .resumo-rolagem { display: flex; gap: .35rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .resumo-rolagem::-webkit-scrollbar { display: none; }
  .resumo-fixo .mini-cartao { flex: 1 0 auto; min-width: 4.4rem; height: 2.45rem; padding: 0 .55rem; border-radius: .55rem; }
  .resumo-fixo .mini-rotulo { font-size: .62rem; white-space: nowrap; }
  .resumo-fixo .mini-valor { font-size: 1rem; }
  .modo-selecao { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.45rem; height: 2.45rem; border-radius: .55rem; border: 1px solid rgba(128,135,150,.4); background: transparent; color: inherit; cursor: pointer; }
  .modo-selecao svg { width: 1.3rem; height: 1.3rem; }
  .modo-selecao[aria-pressed="true"] { background: #6366f1; border-color: #6366f1; color: #fff; }
  #tabela .mini-cartoes { display: none; }

  /* ferramentas: o resumo e a seleção saem da linha; as ações viram uma barra fixa embaixo */
  .barra-ferramentas { margin-bottom: .25rem !important; }
  .lbl-sel-movel { display: none !important; }
  body.selecionando .lbl-sel-movel { display: flex !important; }
  .acoes-lote { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; flex-wrap: nowrap; gap: .5rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.97); border-top: 1px solid rgba(128,135,150,.3); backdrop-filter: blur(8px); }
  .dark .acoes-lote { background: rgba(23,23,23,.97); }
  .acoes-lote { display: none !important; }
  body.tem-selecao .acoes-lote { display: flex !important; flex-wrap: wrap; }
  body.tem-selecao #tabela { padding-bottom: 9rem; }
  #baixar-zip, .bt-excel-movel { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; height: 2.75rem; padding: 0 .75rem !important; border-radius: .75rem !important; font-weight: 700; white-space: nowrap; }
  .bt-excel-movel { border: 1px solid rgba(128,135,150,.5); background: transparent; color: inherit; }
  #baixar-zip:not(:disabled) { background: #a3e635 !important; color: #111 !important; border-color: #a3e635 !important; }
  .acoes-lote #marcar-lote, .acoes-lote #menu-excluir, .acoes-lote button[hx-post="/notas/cancelar-fila"] { display: none; }
  body.tem-selecao .acoes-lote #marcar-lote, body.tem-selecao .acoes-lote #menu-excluir, body.tem-selecao .acoes-lote button[hx-post="/notas/cancelar-fila"] { display: block; flex: 1 1 45%; }
  .acoes-lote #menu-excluir > div { top: auto !important; bottom: calc(100% + .5rem); right: 0; left: auto; width: min(20rem, 92vw) !important; margin-top: 0 !important; }

  /* cartões de nota mais enxutos; a caixinha de seleção só no modo de seleção */
  .caixa-lista ul li { padding: .7rem .8rem !important; gap: .35rem; }
  .lbl-sel-nota { display: none !important; }
  body.selecionando .lbl-sel-nota { display: flex !important; }
  .faixa-erro { padding: .35rem .7rem !important; font-size: .72rem !important; gap: .25rem .75rem !important; }

  /* paginação em uma linha só: ‹ Pág. 1 de 25 › (linhas por página fica no Filtrar) */
  .pag-topo { display: none; }
  .paginacao { padding: .5rem !important; justify-content: center !important; }
  .pag-esq, .pag-num, .pag-extremo { display: none !important; }
  nav.pag-nav { width: auto !important; flex-wrap: nowrap; gap: .75rem; }
  .pag-movel { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; white-space: nowrap; }

  /* caixa do Filtrar ocupa a largura da tela */
  #painel-filtros { position: fixed !important; left: .5rem; right: .5rem; top: 4.25rem !important; max-height: calc(100vh - 5rem); overflow: auto; margin-top: 0 !important; }
  #painel-filtros > div { flex: 1 1 100%; }
  #painel-filtros select, #painel-filtros input { width: 100%; }
}

/* Usuários e Cobrança no celular: a tabela vira um cartão por linha, sem cortar nada */
@media (max-width: 767px) {
  .tabela-usuarios, .tabela-usuarios tbody, .tabela-usuarios tr, .tabela-usuarios td { display: block; width: 100%; }
  .tabela-usuarios thead { display: none; }
  .tabela-usuarios tr { padding: .85rem 1rem; }
  .tabela-usuarios td { padding: .25rem 0 !important; text-align: left !important; }
  .tabela-usuarios .cel-nome { font-size: 1.05rem; }
  .tabela-usuarios form { display: flex; gap: .5rem; align-items: center; }
  .tabela-usuarios input[name="novaSenha"] { flex: 1 1 auto; width: auto; min-width: 0; }
  .tabela-simples { overflow-x: auto; }
}