/* Offcanvas -- painel lateral que desliza da direita, com fundo escuro
   focando o conteúdo. Componente próprio, independente de .modal (ver
   inc/templates/offcanvas.php / js/offcanvas.js).
*/
/* Trava o scroll da página por trás enquanto o painel está aberto (classe
   ligada/desligada por js/offcanvas.js em openOffcanvas()/dismissOffcanvas()). */
body.offcanvas-open {
  overflow: hidden !important;
}
.offcanvas {
  position: fixed;
  inset: 0;
  top: var(--system-banner-height, 0px);
  height: calc(100dvh - var(--system-banner-height, 0px));
  width: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.48);
  transition: opacity 0.24s ease;
}
.offcanvas.closed *,
.offcanvas.closed a {
  pointer-events: none !important;
}
.offcanvas.open {
  opacity: 1;
  pointer-events: all;
  z-index: 9999;
}

.offcanvas-window {
  position: relative;
  height: 100%;
  width: 460px;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.98);
  border-left: 1px solid var(--box-border-light);
  box-shadow: -12px 0 32px 0px rgba(0, 0, 0, 0.24);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.24s ease;
}
.offcanvas.open .offcanvas-window {
  transform: translateX(0%);
}
body.darkmode .offcanvas-window {
  background-color: var(--box-bg);
  border-left: 1px solid var(--box-border);
}

.offcanvas-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  flex-shrink: 0;
  padding: 16px 24px;
  border-bottom: 1px solid var(--box-border-light);
  font-size: 14px;
}
body.darkmode .offcanvas-title {
  border-bottom: 1px solid var(--box-border);
  color: #fff;
}
.offcanvas-title .left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.offcanvas-title img {
  height: 24px;
  width: 24px;
}
.offcanvas-close {
  cursor: pointer;
  border-radius: var(--default-border-radius);
  height: 32px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.offcanvas-close .icon {
  height: 24px;
  width: 24px;
  background: url("../../assets/icons/close.svg") no-repeat center;
  background-size: 24px;
  filter: brightness(0) saturate(100%) invert(39%) sepia(18%) saturate(1693%) hue-rotate(312deg) brightness(105%) contrast(87%);
  pointer-events: none;
}
.offcanvas-close:hover {
  background-color: #C65959;
}
.offcanvas-close:hover .icon {
  filter: invert(1);
}

/* .offcanvas-content NÃO rola por padrão -- é um flex column de altura
   fixa (100% da janela, abaixo do título). Cabe ao conteúdo decidir qual
   filho especificamente vira a área de rolagem (dar flex:1 1 auto +
   min-height:0 + overflow-y:auto naquele filho, ver ex. .acertoFiado_top/
   .acertoFiado_scrollArea/.acertoFiado_bottom em app/vendas/comanda/
   styles.css) -- assim cabeçalho e rodapé ficam sempre visíveis e só a
   lista do meio rola. */
.offcanvas-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.offcanvas-content [data-scroll]::-webkit-scrollbar,
.offcanvas-content ::-webkit-scrollbar {
  width: 8px;
}
.offcanvas-content [data-scroll]::-webkit-scrollbar-thumb,
.offcanvas-content ::-webkit-scrollbar-thumb {
  background-color: var(--box-border-light);
  border-radius: 999px;
}
body.darkmode .offcanvas-content [data-scroll]::-webkit-scrollbar-thumb,
body.darkmode .offcanvas-content ::-webkit-scrollbar-thumb {
  background-color: var(--box-border);
}

/* Responsivo: no desktop fica com largura fixa de 420px encostado na
   borda; abaixo de 620px passa a ocupar a tela inteira (mesmo
   comportamento de tela cheia que os modais já usam nesse ponto de
   corte), continuando a deslizar da direita. */
@media only all and (max-width: 620px) {
  .offcanvas-window {
    width: 100%;
  }
  .offcanvas-title {
    padding: 14px 16px;
  }
  .offcanvas-content {
    padding: 16px;
    gap: 20px;
  }
}

/* Offcanvas "Acerto de fiado" (etapa 1 -- Seleção) -- conteúdo específico
   desta tela (o container/scroll/backdrop já vêm do componente acima).
   Usado tanto dentro da comanda (inc/modals/general/pdv/pdv_comandas.php)
   quanto no perfil do cliente (app/clientes/perfil/index.php), por isso
   fica no CSS global do offcanvas em vez de num CSS de página só. */
/* Só a área do meio rola (selecionar todas + lista + aviso do batch +
   legenda) -- topo (cliente/abas/total) e rodapé (selecionadas+continuar)
   ficam sempre visíveis, sem encolher. */
.acertoFiado_top,
.acertoFiado_footer{
  flex-shrink: 0;
}
.acertoFiado_top{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.acertoFiado_scrollArea{
  /* min-height:0 é o pulo do gato aqui -- sem isso o item flex nunca
     encolhe abaixo do tamanho do próprio conteúdo (comportamento padrão
     de flex item), e o overflow-y:auto nunca tem o que rolar; ele só some
     clipado pelo overflow:hidden do .offcanvas-content, sem scrollbar. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Sem isso, ao chegar no topo/fim desta lista o scroll "encadeia" pro
     próximo ancestral rolável (a página por trás, se não tivesse o
     scroll-lock do body). */
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* .offcanvas-content tem padding-right:24px uniforme -- sobra inteiro
     depois da scrollbar, deixando um vão vazio até a borda. "Invade" boa
     parte desse padding com margem negativa (barra fica perto da borda)
     e devolve um respiro pequeno antes dela, pro texto não ficar colado. */
  margin-right: -20px;
  padding-right: 8px;
}
/* Os FILHOS dessa área (selecionar todas, a lista, o aviso, a legenda)
   não podem encolher -- senão eles mesmos absorvem o aperto (a lista
   corta os itens via overflow:hidden do itemList, ou o texto vaza por
   cima do vizinho) em vez de deixar o PAI (.acertoFiado_scrollArea)
   estourar e rolar, que é o comportamento que a gente quer. */
.acertoFiado_scrollArea > *{
  flex-shrink: 0;
}
.acertoFiado_item_checkbox,
#acertoFiado_selectAll_input{
  width: 18px !important;
  height: 18px !important;
  background-size: 18px !important;
}
.acertoFiado_cliente{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.acertoFiado_cliente .phone{
  font-size: 12px;
  opacity: 0.72;
}
.acertoFiado_tabs{
  display: flex;
  gap: 10px;
}
.acertoFiado_tab{
  flex: 1;
  text-align: center;
  font-size: 12px;
  padding: 10px 4px;
  border-radius: var(--default-border-radius);
  background-color: rgba(0,0,0,0.04);
  opacity: 0.5;
}
.acertoFiado_tab.active{
  background-color: var(--button-bg);
  color: #fff;
  opacity: 1;
}
body.darkmode .acertoFiado_tab{
  background-color: rgba(255,255,255,0.06);
}
.acertoFiado_total{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
}
.acertoFiado_total b{
  font-size: 20px;
}
.acertoFiado_resumoSelecionadas,
.acertoFiado_totalReceber{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--box-border-light);
}
body.darkmode .acertoFiado_resumoSelecionadas,
body.darkmode .acertoFiado_totalReceber{
  border-bottom: 1px solid var(--box-border);
}
.acertoFiado_totalReceber_grande{
  border-bottom: none;
  padding-top: 14px;
  font-size: 16px;
  font-weight: 600;
}
.acertoFiado_totalReceber_grande b{
  font-size: 20px;
}
.acertoFiado_negativo{
  color: var(--warning-color, #d98324);
}
.acertoFiado_atencao{
  color: var(--error-color, #C65959);
}
/* .form_info (css/forms.css) é display:inline -- ok pra texto de 1 linha
   dentro de um grid2Col, mas com texto longo o suficiente pra quebrar em
   várias linhas (caso do saldo residual, com nomes de comanda dinâmicos) a
   borda é desenhada por fragmento de linha em vez de um retângulo só,
   ficando cortada/descontínua. Fora do grid2Col também não tem o
   grid-column:1/span2 pra dar largura -- display:block resolve os dois. */
#acertoFiado_step3_saldoResidual{
  display: block;
  margin-top: 12px;
}
.acertoFiado_resultadoItem{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
}
.acertoFiado_recebendoBox{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  padding: 16px;
  margin: 12px 0;
  border-radius: var(--default-border-radius);
  border: 1px solid var(--success-color, #2e9e5b);
  font-size: 13px;
}
.acertoFiado_recebendoBox b{
  font-size: 26px;
}
.acertoFiado_extratoActions{
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.acertoFiado_card{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: var(--default-border-radius);
  border: 1px solid var(--box-border-light);
}
body.darkmode .acertoFiado_card{
  border: 1px solid var(--box-border);
}
.acertoFiado_card_situacao{
  font-size: 13px;
  color: var(--success-color, #2e9e5b);
}
.acertoFiado_cardActions{
  display: flex;
  gap: 16px;
}
.acertoFiado_cardActions button{
  flex-grow: 1;
}
.acertoFiado_lockNote{
  font-size: 11px;
  opacity: 0.64;
  margin-top: 4px;
}
.acertoFiado_selectAll{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--box-border-light);
}
body.darkmode .acertoFiado_selectAll{
  border-bottom: 1px solid var(--box-border);
}
.acertoFiado_item{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--box-border-light);
  cursor: pointer;
}
body.darkmode .acertoFiado_item{
  border-bottom: 1px solid var(--box-border);
}
.acertoFiado_item input[type="checkbox"]{
  margin-top: 3px;
  flex-shrink: 0;
}
.acertoFiado_item_info{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}
.acertoFiado_item_head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.acertoFiado_item_head .comandaNumero{
  font-weight: 700;
  font-size: 14px;
}
.acertoFiado_item_head .valor{
  font-weight: 700;
  font-size: 14px;
}
.valor_original{
  font-size: 11px;
  font-weight: 500;
  opacity: 0.6;
}
.valor_original.renegociado{
  text-decoration: line-through;
}
.acertoFiado_item_desc{
  font-size: 12px;
  opacity: 0.72;
}
/* css/templates/buttons.css estiliza QUALQUER <button> com fundo/altura/padding cheios --
   mesmo problema que button.label já resolve naquele arquivo, mesma solução aqui (!important
   pra vencer a regra genérica, já que este não é "um botão" de verdade, é só o texto "N itens"
   virando um toggle clicável). */
.acertoFiado_itemsToggle{
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  height: auto !important;
  width: auto !important;
  font: inherit;
  font-size: 12px;
  opacity: 0.72;
  color: inherit !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  cursor: pointer;
}
.acertoFiado_itemsToggle:hover{
  background: none !important;
  box-shadow: none !important;
  opacity: 1;
  text-decoration: underline;
}
.acertoFiado_itemsToggle_chevron{
  width: 14px !important;
  height: 14px !important;
  /* button img (css/templates/buttons.css) inverte pra branco por padrão (pensado pra ícone
     dentro de um botão colorido de verdade) -- aqui é só uma seta cinza ao lado de texto. */
  filter: none !important;
  opacity: 1 !important;
  transition: transform 0.2s ease;
}
.acertoFiado_itemsToggle[aria-expanded="true"] .acertoFiado_itemsToggle_chevron{
  transform: rotate(180deg);
}
/* grid-template-rows 0fr -> 1fr é o jeito moderno de animar "altura auto" suavemente
   (max-height precisa de um valor fixo arbitrário grande demais, sem naturalidade no
   easing) -- o filho com overflow:hidden é o que de fato esconde o conteúdo durante a
   transição. */
.acertoFiado_itemsExpand{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.acertoFiado_itemsExpand.open{
  grid-template-rows: 1fr;
}
.acertoFiado_itemsExpand_inner{
  overflow: hidden;
  min-height: 0;
  font-size: 12px;
  opacity: 0.72;
  padding-top: 6px;
}
.acertoFiado_batchInfo{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  padding: 14px;
  border-radius: var(--default-border-radius);
  background-color: rgba(255, 193, 139, 0.23);
}
.acertoFiado_legend{
  font-size: 12px;
}
.acertoFiado_legend summary{
  cursor: pointer;
  font-weight: 700;
  padding: 6px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.acertoFiado_legend summary::-webkit-details-marker{
  display: none;
}
.acertoFiado_legend summary::before{
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
}
.acertoFiado_legend[open] summary::before{
  transform: rotate(45deg);
}
.acertoFiado_legend_row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.acertoFiado_legend_row .status_pill{
  flex-shrink: 0;
  width: fit-content;
}
.acertoFiado_legend_row span{
  opacity: 0.8;
}
.acertoFiado_footer{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--box-border-light);
}
body.darkmode .acertoFiado_footer{
  border-top: 1px solid var(--box-border);
}
.acertoFiado_footer_summary{
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.acertoFiado_footer_buttons{
  display: flex;
  gap: 16px;
}