/*
 * b4-main.css — CSS unificado do B4 HorseRanch
 * Gerado automaticamente. Substitui: style.css + romaneio.css + uploader.css
 * button.css mantido separado (classes legadas .btn-red/.btn-green etc.)
 * Bulma mantida separada (framework externo)
 */


/* 1. VARIABLES & RESET (de style.css) */
/* ============================================================================ */

body, ul {
    margin: 0%;
    padding: 0px;
}

a {
    color: #fff;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}

a:hover {
    /* background: rgba(0, 0, 0, .05); */
    background: rgba(var(--b4-primary-rgb, 19, 67, 225), 0.18);
}

h1, h2, h3, h4, h5, h6 {
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 2%;
}

hr{
    border: 1px solid rgb(133, 131, 131);
    margin: 2%;
}

p {
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    margin: 2%;
}

.table-b4 {
    table-layout: fixed;
    width: 96%;
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 2%;
}
.table-b4 td {
    white-space: normal;
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* background-color: antiquewhite; */
    border-radius: 3px;

}
.table-b4 th {
    background: darkblue;
    color: white;
    border-radius: 3px;
}

.table-b4 td,
.table-b4 th {
    text-align: left;
    padding: 5px 10px;
    height: 35px;
}
.table-b4 tr:nth-child(even) {
    background: lightblue;
}
.table-b4-center{
    text-align: center;
}

#logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.b4-brand-logo{
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: contain;
    background: rgba(255,255,255,.12);
    padding: 4px;
}
.b4-brand-name{
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .2px;
    white-space: nowrap;
}

#header {
    box-sizing: border-box;
    height: 70px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background: rgba(19, 67, 225, 0.8); */
    /* background: #313131; */
    background: var(--b4-primary, #1343e1);
}

#menu {
    display: flex;
    list-style: none;
    gap: .5rem;
}

#menu a {
    display: block;
    padding: .5rem;   
    color: #fff;
}

#btn-mobile {
    display: none;
    color: #fff;
    color: #fff;
}
#body {
    background: #6E6E6E;
}

#containerMeio{
    background: rgb(231, 236, 156);
    top: 40%;
    left: 50%;
    margin-right: -50%; 
    transform: translate(-50%, -50%);
    position: absolute;
    display: block;
    padding: 45px;
    border-radius: 4px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    width: 50%;
}
#containerMeio h1, h2, h3, h4, h5, h6{
    color: rgb(82, 12, 12);
}

#iconeInfo {
    width: 30px;
    height: 30px;
}



/* =========================================================
   Scroll chips (filtro por grupo / categorias)
   ========================================================= */
.b4-scrollchips{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:6px 2px 12px 2px;
  margin:0 0 6px 0;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.b4-scrollchips:focus{ outline:none; }
.b4-scrollchips::-webkit-scrollbar{ height:8px; }
.b4-scrollchips::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:999px; }
.b4-cat-pill{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  text-decoration:none;
  color:inherit;
  min-width:92px;
  scroll-snap-align:start;
}
.b4-cat-icon{
  width:54px;
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  font-weight:700;
  color:var(--b4-primary);
}
.b4-cat-label{
  font-size:13px;
  max-width:110px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.b4-cat-pill.is-active .b4-cat-icon{
  background:rgba(var(--b4-primary-rgb, 25,118,210), .12);
  border-color:rgba(var(--b4-primary-rgb, 25,118,210), .35);
}

/* Muted icon color (dark gray) */
.b4-icon-muted{color:#4b5563;}

.b4-icon-muted svg{width:28px;height:28px;}


/* Force table lists to remain visible on mobile for specific pages */
body.b4-force-table .b4-list-table{display:block !important;}
body.b4-force-table .b4-list-table table{width:100%;}

/* =========================================================
   Utilitários: mostrar/esconder por breakpoint (tablet/celular)
   - Use .b4-only-desktop em blocos de tabela
   - Use .b4-only-mobile em blocos de cards
   ========================================================= */
.b4-only-mobile{display:none;}
.b4-only-desktop{display:block;}




/* =========================================================
   B4 mobile-first navigation / home modules
   ========================================================= */
body.b4-menu-open{
  overflow:hidden;
}

#header{
  gap:12px;
  position:sticky;
  top:0;
  z-index:1100;
  box-shadow:0 8px 22px rgba(0,0,0,.14);
}

#nav{
  margin-left:auto;
}

.b4-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}

.b4-header-action{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  padding:0;
}

button.b4-header-action{
  appearance:none;
}

.b4-header-action:hover{
  background:rgba(255,255,255,.2);
}

.b4-home-main{
  max-width:1100px;
  margin:0 auto;
  padding:16px 12px 28px;
}

.b4-home-hero{
  margin-bottom:16px;
}

.b4-home-hero__brand{
  background:linear-gradient(135deg, rgba(var(--b4-primary-rgb, 25,118,210), .16), rgba(var(--b4-primary-rgb, 25,118,210), .05));
  border:1px solid rgba(var(--b4-primary-rgb, 25,118,210), .18);
  border-radius:18px;
  padding:16px;
  display:flex;
  align-items:center;
  gap:12px;
}

.b4-home-hero__logo{
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:contain;
  background:#fff;
  padding:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}

.b4-home-hero__title{
  margin:0;
  font-size:22px;
  color:#0f172a;
}

.b4-home-hero__subtitle{
  margin:4px 0 0;
  color:#475569;
  font-size:14px;
}

.b4-module-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.b4-module-tile{
  min-height:104px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 8px 24px rgba(15,23,42,.08);
  padding:12px 8px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  text-decoration:none;
  color:#0f172a;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.b4-module-tile:hover,
.b4-module-tile:focus{
  transform:translateY(-2px);
  border-color:rgba(var(--b4-primary-rgb, 25,118,210), .28);
  box-shadow:0 12px 28px rgba(15,23,42,.12);
  color:#0f172a;
}

.b4-module-tile__iconWrap{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(var(--b4-primary-rgb, 25,118,210), .10);
  border:1px solid rgba(var(--b4-primary-rgb, 25,118,210), .15);
}

.b4-module-tile__icon{
  width:20px;
  height:20px;
  object-fit:contain;
}

.b4-module-tile__label{
  display:block;
  max-width:100%;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (min-width: 768px){
  .b4-home-main{
    padding:18px 16px 32px;
  }

  .b4-module-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
  }

  .b4-module-tile{
    min-height:112px;
  }
}






/* =========================================================
   B4 menu unificado (desktop/tablet/mobile)
   ========================================================= */
#header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "logo nav"
    "actions actions";
  align-items:start;
  row-gap:10px;
  min-height:96px;
  height:auto;
  padding:12px 14px;
}

#logo{
  grid-area:logo;
  min-width:0;
}

#nav{
  grid-area:nav;
  justify-self:end;
  align-self:start;
  position:relative;
}

#btn-mobile{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  font-weight:800;
  line-height:1;
  box-shadow:0 8px 20px rgba(0,0,0,.10);
}

#btn-mobile:hover{
  background:rgba(255,255,255,.18);
}

.b4-menu-label{
  display:inline-block;
}

#hamburguer{
  display:block;
  border-top:2px solid currentColor;
  width:20px;
}
#hamburguer::after,
#hamburguer::before{
  content:'';
  display:block;
  width:20px;
  height:2px;
  background:currentColor;
  margin-top:5px;
  transition:.3s;
  position:relative;
}
#nav.active #hamburguer{border-top-color:transparent;}
#nav.active #hamburguer::before{transform:rotate(135deg);}
#nav.active #hamburguer::after{transform:rotate(-135deg); top:-7px;}

#menu{
  display:none;
  list-style:none;
  gap:0;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(420px, calc(100vw - 24px));
  max-height:calc(100vh - 110px);
  overflow:auto;
  margin:0;
  padding:10px;
  border-radius:18px;
  background:#496175;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 40px rgba(0,0,0,.24);
  visibility:hidden;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease;
  z-index:1300;
}

#nav.active #menu{
  display:block;
  visibility:visible;
  opacity:1;
  transform:translateY(0);
}

#menu li + li{
  margin-top:8px;
}

#menu a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  margin:0;
  color:#fff;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.04);
  background:rgba(255,255,255,.02);
  text-decoration:none;
  font-weight:700;
}

#menu a:hover,
#menu a:focus{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.10);
}

.b4-menu-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.95;
}

.b4-header-actions{
  grid-area:actions;
  width:100%;
  justify-self:start;
  margin-left:0;
}

.b4-header-action img{
  width:16px;
  height:16px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}

@media (min-width: 601px){
  .b4-brand-name{max-width:260px; overflow:hidden; text-overflow:ellipsis;}
}




/* =========================================================
   B4 padronização — etapa 1 (base global)
   ========================================================= */
:root{
  --b4-header-h: 96px;
  --b4-header-radius: 18px;
  --b4-header-shadow: 0 10px 24px rgba(0,0,0,.12);
}

body.b4-ui{
  background:#f3f4f6;
  min-height:100vh;        /* garante que o fundo cinza cubra mesmo viewports pequenos */
}
html:has(body.b4-ui){
  background:#f3f4f6;      /* fallback: navegadores modernos pintam o html também */
  min-height:100vh;
}

body.b4-ui #header{
  min-height: var(--b4-header-h);
  border-bottom-left-radius: var(--b4-header-radius);
  border-bottom-right-radius: var(--b4-header-radius);
  box-shadow: var(--b4-header-shadow);
}

body.b4-ui #logo{
  min-width:0;
  max-width:min(100%, 420px);
}

body.b4-ui .b4-brand-name{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

body.b4-ui .b4-header-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

body.b4-ui .b4-header-action,
body.b4-ui #btn-mobile{
  min-height:40px;
}

body.b4-ui #nav{
  position:relative;
}

body.b4-ui .b4-menu-backdrop{
  display:none;
}

body.b4-ui #menu{
  overscroll-behavior:contain;
}

body.b4-ui #menu li:first-child a{
  background:rgba(255,255,255,.06);
}

body.b4-ui #menu a span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (min-width: 1025px){
  body.b4-ui #header{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      'logo nav'
      'actions actions';
  }

  body.b4-ui #menu{
    width:min(440px, calc(100vw - 48px));
  }
}

@media (max-width: 1024px){
  body.b4-ui #header{
    padding:12px;
  }

  body.b4-ui #menu{
    width:min(420px, calc(100vw - 24px));
  }
}



/* =====================================================
   PAINEL INICIAL — grupos de módulos
   ===================================================== */
.b4-module-group {
  margin-bottom: 20px;
}

.b4-module-group__label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #64748b;
  padding: 0 4px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.b4-module-group__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,.07);
  margin-left: 4px;
}

/* Tiles de sub-item (menores, dentro de grupos) */
.b4-module-tile--sub {
  min-height: 80px;
  border-radius: 14px;
  padding: 10px 6px 8px;
  gap: 6px;
}

.b4-module-tile--sub .b4-module-tile__iconWrap {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.b4-module-tile--sub .b4-module-tile__icon {
  width: 17px;
  height: 17px;
}

.b4-module-tile--sub .b4-module-tile__label {
  font-size: 11px;
}

/* Cor do grupo Financeiro */
.b4-module-tile--financeiro .b4-module-tile__iconWrap {
  background: rgba(25, 118, 64, .10);
  border-color: rgba(25, 118, 64, .18);
}

/* Cor do grupo Configurações */
.b4-module-tile--config .b4-module-tile__iconWrap {
  background: rgba(120, 53, 180, .10);
  border-color: rgba(120, 53, 180, .18);
}

/* =====================================================
   NAVBAR — separadores de grupo
   ===================================================== */
.b4-menu-separator {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255,255,255,.5);
  padding: 14px 12px 4px;
  cursor: default;
  pointer-events: none;
  user-select: none;
}



/* =====================================================
   NAVBAR — accordion (grupos colapsáveis)
   ===================================================== */

/* Botão que abre/fecha o grupo */
.b4-menu-accordion {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: .5rem .5rem;
  background: none;
  border: none;
  color: rgba(255,255,255,.75);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  cursor: pointer;
  text-align: left;
  transition: color .15s;
  font-family: Arial, Helvetica, sans-serif;
}

.b4-menu-accordion:hover {
  color: #fff;
  background: none;
}

/* Seta indicadora */
.b4-menu-accordion__arrow {
  margin-left: auto;
  width: 14px;
  height: 14px;
  opacity: .6;
  transition: transform .22s ease;
  flex-shrink: 0;
  /* chevron via border trick */
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
}

/* Quando expandido, seta vira pra cima */
.b4-menu-accordion.is-open .b4-menu-accordion__arrow {
  transform: rotate(-135deg);
  margin-top: 3px;
}

/* Wrapper dos itens filhos */
.b4-menu-submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
}

.b4-menu-submenu.is-open {
  max-height: 400px; /* grande o suficiente para qualquer grupo */
}

/* Itens filhos com indentação visual */
.b4-menu-submenu li a {
  padding-left: 1.4rem !important;
  font-size: .92em;
  opacity: .92;
}

/* Destaque sutil na linha do accordion quando aberto */
li.b4-menu-accordion-wrap.is-open > button {
  color: #fff;
}



/* =====================================================
   RESPONSIVO FINANCEIRO & GERAL — mobile/tablet first
   Breakpoints: <=480px (phone), <=768px (tablet), <=1024px
   ===================================================== */

/* ---- Utilitários gerais ---- */
* { box-sizing: border-box; }

/* Tabelas dentro de .b4-scroll-x rolam horizontalmente */
.b4-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Cards de resumo financeiro (dashboard) */
.b4-fin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

/* Gráficos lado a lado no desktop, empilhados no mobile */
.b4-fin-row-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.b4-fin-row-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* Painel de filtros — colapsa no mobile */
.b4-filtros-toggle {
  display: none;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 14px;
  background: #f0f4f8;
  border: 1px solid #dde3ea;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  color: #334155;
}
.b4-filtros-body { display: grid; gap: 10px; }
.b4-filtros-body.is-hidden { display: none; }

/* Tabela financeira vira cards no mobile */
.b4-fin-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.b4-fin-table th { padding: 8px 10px; text-align: left; background: #f5f5f5;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.b4-fin-table td { padding: 7px 10px; border-bottom: 1px solid #eee; }

/* Card de lançamento (mobile) */
.b4-lanc-card {
  display: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}
.b4-lanc-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.b4-lanc-card__desc { font-weight: 700; font-size: .92rem; color: #0f172a; line-height: 1.3; }
.b4-lanc-card__valor { font-weight: 800; font-size: 1rem; white-space: nowrap; }
.b4-lanc-card__meta { font-size: .78rem; color: #64748b; line-height: 1.6; margin-bottom: 6px; }
.b4-lanc-card__actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }

/* Cards de hospedagem (mobile) */
.b4-hosp-cards { display: none; }
.b4-hosp-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}
.b4-hosp-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.b4-hosp-card__nome { font-weight: 800; font-size: 1rem; color: #0f172a; }
.b4-hosp-card__prop { font-size: .8rem; color: #64748b; margin-top: 2px; }
.b4-hosp-card__meta { font-size: .82rem; color: #475569; line-height: 1.7; margin-bottom: 8px; }
.b4-hosp-card__actions { display: flex; gap: 7px; flex-wrap: wrap; }

/* Formulários: grid responsivo */
.b4-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.b4-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.b4-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

/* ---- TABLET (≤ 1024px) ---- */


/* ---- CELULAR (≤ 600px) ---- */
/* Troca tabela → cards em tablet/celular (mesmo breakpoint do proprietários: 1024px) */




/* =====================================================
   SISTEMA DE BOTÕES PADRONIZADOS — b4-btn-std
   Botão com ícone SVG + label, tamanho único em todo projeto
   ===================================================== */

.b4-btn-std {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 10px;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.2;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s, transform .12s;
  font-family: Arial, Helvetica, sans-serif;
}
.b4-btn-std:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.b4-btn-std:active { transform: translateY(0); }
.b4-btn-std svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* Variantes de cor */
.b4-btn-std.danger   { background:#e53935; color:#fff; border-color:#e53935; }
.b4-btn-std.success  { background:#43a047; color:#fff; border-color:#43a047; }
.b4-btn-std.primary  { background:var(--b4-primary,#1976d2); color:#fff; border-color:var(--b4-primary,#1976d2); }
.b4-btn-std.warning  { background:#fb8c00; color:#fff; border-color:#fb8c00; }
.b4-btn-std.neutral  { background:#6c7a87; color:#fff; border-color:#6c7a87; }
.b4-btn-std.outline  { background:transparent; color:var(--b4-primary,#1976d2); border-color:var(--b4-primary,#1976d2); }
.b4-btn-std.outline:hover { background:rgba(25,118,210,.07); }
.b4-btn-std.ghost    { background:transparent; color:#475569; border-color:#dde3ea; }
.b4-btn-std.ghost:hover { background:#f0f4f8; }

/* Grupo de botões lado a lado */
.b4-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Chip de ação em tabela — agora com ícone */
.b4-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  border: 1.5px solid rgba(0,0,0,.10);
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  text-decoration: none;
  transition: filter .12s, transform .1s;
  font-family: Arial, Helvetica, sans-serif;
}
.b4-action-chip:hover  { filter:brightness(1.05); transform:translateY(-1px); color:#334155; }
.b4-action-chip:active { transform:translateY(0); }
.b4-action-chip svg {
  width:13px; height:13px; flex-shrink:0;
  stroke:currentColor; fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.b4-action-chip.is-primary { background:var(--b4-primary,#1976d2); color:#fff; border-color:var(--b4-primary,#1976d2); }
.b4-action-chip.is-primary:hover { color:#fff; }
.b4-action-chip.is-danger  { background:#e53935; color:#fff; border-color:#e53935; }
.b4-action-chip.is-danger:hover  { color:#fff; }
.b4-action-chip.is-success { background:#43a047; color:#fff; border-color:#43a047; }
.b4-action-chip.is-success:hover { color:#fff; }
.b4-action-chip.is-warning { background:#fb8c00; color:#fff; border-color:#fb8c00; }



/* =====================================================
   FORMULÁRIOS RESPONSIVOS — seções e grids semânticos
   ===================================================== */

/* Título de seção dentro de formulário */
.b4-form-section-title {
  font-weight: 700;
  font-size: .88rem;
  color: #334155;
  padding: 6px 0 2px;
  border-bottom: 2px solid rgba(var(--b4-primary-rgb,25,118,210),.15);
  letter-spacing: .02em;
}

/* Grid 2+2: 4 colunas desktop, 2 tablet, 1 celular */
.b4-rg-2-2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

/* Grid 3+2: 5 colunas desktop, 2-3 tablet, 1 celular */
.b4-rg-3-2 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
}

/* Grid 1+1: 2 colunas desktop, 2 tablet, 1 celular */
.b4-rg-1-1 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

/* Grid especial para linha de CEP */
.b4-rg-cep {
  display: grid;
  grid-template-columns: 130px 130px 1fr 100px 120px;
  gap: 12px;
  align-items: start;
}

/* Span de coluna para campos mais largos */
.b4-col-span-2 { grid-column: span 2; }

/* ---- TABLET (≤ 900px) ---- */
@media (max-width: 900px) {
  .b4-rg-2-2  { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .b4-rg-3-2  { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .b4-rg-1-1  { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .b4-rg-cep  { grid-template-columns: 1fr 1fr; }
  .b4-rg-cep .b4-col-span-2 { grid-column: span 2; }
}

/* ---- CELULAR (≤ 600px) ---- */




/* =====================================================
   CORREÇÃO: b4-list-card usado diretamente (sem .b4-list-cards)
   precisa ficar oculto no desktop e aparecer em ≤1280px
   ===================================================== */

/* Oculta por padrão quando usado diretamente nas views financeiro */
.b4-fin-mobile-cards { display: none; }



/* =====================================================
   DARK MODE — variáveis e overrides
   Ativado quando body tem classe .b4-dark
   ===================================================== */
:root {
  --b4-badge-bg:        #ffffff;
  --b4-badge-border:    rgba(0,0,0,.07);
  --b4-badge-shadow:    rgba(0,0,0,.05);
  --b4-badge-title:     #0f172a;
  --b4-badge-sub:       #64748b;
  --b4-badge-icon-bg:   linear-gradient(135deg,#1976d2,#1343e1);
  /* Plano ok */
  --b4-badge-ok-bg:     #e8f5e9;
  --b4-badge-ok-color:  #2e7d32;
  --b4-badge-ok-border: #a5d6a7;
  /* Plano alerta */
  --b4-badge-warn-bg:     #fff3e0;
  --b4-badge-warn-color:  #e65100;
  --b4-badge-warn-border: #ffcc80;
  /* Plano expirado */
  --b4-badge-exp-bg:     #fce4ec;
  --b4-badge-exp-color:  #c62828;
  --b4-badge-exp-border: #ef9a9a;
  /* Trial */
  --b4-badge-trial-bg:     #fff8e1;
  --b4-badge-trial-color:  #f57f17;
  --b4-badge-trial-border: #ffe082;
}

body.b4-dark {
  background: #0f172a;
  color: #e2e8f0;

  /* Badge empresa */
  --b4-badge-bg:        #1e293b;
  --b4-badge-border:    rgba(255,255,255,.08);
  --b4-badge-shadow:    rgba(0,0,0,.25);
  --b4-badge-title:     #f1f5f9;
  --b4-badge-sub:       #94a3b8;
  --b4-badge-icon-bg:   linear-gradient(135deg,#1976d2,#1343e1);
  /* Plano ok */
  --b4-badge-ok-bg:     #1a2e1a;
  --b4-badge-ok-color:  #6ee7b7;
  --b4-badge-ok-border: #166534;
  /* Plano alerta */
  --b4-badge-warn-bg:     #2d1f0a;
  --b4-badge-warn-color:  #fdba74;
  --b4-badge-warn-border: #92400e;
  /* Plano expirado */
  --b4-badge-exp-bg:     #2d0a14;
  --b4-badge-exp-color:  #fca5a5;
  --b4-badge-exp-border: #991b1b;
  /* Trial */
  --b4-badge-trial-bg:     #2d2500;
  --b4-badge-trial-color:  #fde68a;
  --b4-badge-trial-border: #854d0e;
}

/* Painel / hero no dark — só ajusta o card de topo e texto */
body.b4-dark .b4-home-hero__brand {
  background: #1e293b;
  border-color: rgba(255,255,255,.10);
}
body.b4-dark .b4-home-hero__title    { color: #f1f5f9; }
body.b4-dark .b4-home-hero__subtitle { color: #94a3b8; }

/* Ícone home no header action — mantém estilo original no dark */
body.b4-dark .b4-header-action {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
}


/* 2. AUTH UI & LAYOUT (de romaneio.css) */
/* ============================================================================ */

/* B4 Romaneio-like auth theme (light card + dark header bar)
   Scoped to body.b4-auth to avoid affecting the rest of the app. */

:root{
  --b4-auth-bg:#f2f3f5;
  --b4-auth-card:#ffffff;
  --b4-auth-primary:#445867;      /* header + primary button */
  --b4-auth-primary-2:#3b4d5a;    /* hover */
  --b4-auth-text:#1e2a32;
  --b4-auth-muted:#6b7a86;
  --b4-auth-border:#d7dde2;
  --b4-auth-shadow:0 10px 28px rgba(17, 24, 39, .18);
  --b4-auth-radius:14px;
}

/* =========================================================
   B4 Toast (feedback sem modal)
   ========================================================= */
#b4-toast-root{position:fixed;left:0;right:0;bottom:16px;display:flex;gap:10px;flex-direction:column;align-items:center;z-index:99999;pointer-events:none;padding:0 12px;}
.b4-toast{pointer-events:auto;min-width:260px;max-width:520px;background:#2f3d4a;color:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.25);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;transform:translateY(14px);opacity:0;transition:all .2s ease;}
.b4-toast.is-show{transform:translateY(0);opacity:1;}
.b4-toast.is-hide{transform:translateY(14px);opacity:0;}
.b4-toast-ico{width:22px;height:22px;flex:0 0 22px;opacity:.95;margin-top:1px;}
.b4-toast-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.b4-toast-msg{font-size:13px;line-height:1.25;}
.b4-toast-success{background:#2f3d4a;}
.b4-toast-info{background:#3c4a57;}
.b4-toast-error{background:#7a2a2a;}

/* =========================================================
   B4 Share Sheet (modal bonito e estável)
   ========================================================= */
.b4-noscroll{overflow:hidden;}
.b4-share{position:fixed;inset:0;z-index:99998;display:none;}
.b4-share.is-open{display:block;}
.b4-share__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);}
.b4-share__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,calc(100% - 24px));background:#fff;border-radius:18px;box-shadow:0 22px 70px rgba(0,0,0,.35);overflow:hidden;border:1px solid rgba(0,0,0,.06);}
.b4-share__header{display:flex;align-items:center;justify-content:center;position:relative;padding:16px 18px;background:#415563;color:#fff;}
.b4-share__title{font-weight:900;letter-spacing:.2px;font-size:15px;}
.b4-share__close{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:999px;border:none;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;}
.b4-share__close:hover{background:rgba(255,255,255,.20);}
.b4-share__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.b4-share__body{padding:10px 16px 16px;}

.b4-share__appsWrap{position:relative;margin:6px 0 12px;}
.b4-share__apps{display:flex;gap:14px;overflow-x:auto;padding:10px 42px;scrollbar-width:none;}
.b4-share__apps::-webkit-scrollbar{display:none;}
.b4-share__app{width:86px;flex:0 0 86px;text-decoration:none;color:#23303a;display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:800;cursor:pointer;border:none;background:transparent;padding:0;}
.b4-share__app:active{transform:scale(.98);}
.b4-share__ico{width:56px;height:56px;border-radius:999px;display:grid;place-items:center;border:1px solid rgba(0,0,0,.10);background:#f6f7f8;}
.b4-share__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.b4-share__label{font-size:12px;line-height:1.1;text-align:center;opacity:.9;}

/* Soft colors per service (keeps B4 look) */
.b4-share__app.is-whatsapp .b4-share__ico{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.28);}
.b4-share__app.is-facebook .b4-share__ico{background:rgba(24,119,242,.12);border-color:rgba(24,119,242,.28);}
.b4-share__app.is-telegram .b4-share__ico{background:rgba(39,167,224,.12);border-color:rgba(39,167,224,.28);}
.b4-share__app.is-linkedin .b4-share__ico{background:rgba(10,102,194,.12);border-color:rgba(10,102,194,.28);}
.b4-share__app.is-instagram .b4-share__ico{background:rgba(225,48,108,.10);border-color:rgba(225,48,108,.22);}
.b4-share__app.is-email .b4-share__ico{background:rgba(65,85,99,.10);border-color:rgba(65,85,99,.22);}
.b4-share__app.is-system .b4-share__ico{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.12);}

.b4-share__nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:#fff;color:#23303a;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.12);}
.b4-share__nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;}
.b4-share__nav.is-left{left:8px;}
.b4-share__nav.is-right{right:8px;}

.b4-share__link{display:flex;gap:10px;align-items:center;padding:12px 12px;background:#f6f7f8;border:1px solid rgba(0,0,0,.06);border-radius:16px;}
.b4-share__input{flex:1;border:none;border-radius:12px;padding:10px 10px;font-size:13px;background:transparent;outline:none;}
.b4-share__copy{border:none;border-radius:999px;background:#415563;color:#fff;padding:10px 14px;cursor:pointer;font-weight:900;min-width:96px;}
.b4-share__copy:hover{filter:brightness(1.05);}

@media (max-width:520px){
  .b4-share__panel{width:calc(100% - 18px);}
  .b4-share__apps{padding:10px 40px;}
  .b4-share__app{width:78px;flex-basis:78px;}
  .b4-share__ico{width:52px;height:52px;}
}

html, body.b4-auth{height:100%;}

/* Page background + centering */
body.b4-auth{
  min-height: 100vh;
  margin: 0;
  background: var(--b4-auth-bg);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 12px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--b4-auth-text);
}

/* Reset link style from global style.css */
body.b4-auth a{
  color: var(--b4-auth-muted);
  text-decoration: none;
}
body.b4-auth a:hover{
  background: transparent !important;
  text-decoration: underline;
}

/* Card */
.b4-auth-card{
  width: min(420px, 100%);
  background: var(--b4-auth-card);
  border-radius: var(--b4-auth-radius);
  margin: 0 auto;
  box-shadow: var(--b4-auth-shadow);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.03);
}

/* Header bar */
.b4-auth-header{
  background: var(--b4-auth-primary);
  color: #fff;
  padding: 14px 16px;
  display: flex !important;
  align-items: center !important;
  gap: 12px;
}
.b4-auth-header .b4-auth-icon{
  width: 28px;
  height: 28px;
  display: inline-block;
}
.b4-auth-header .b4-auth-title{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Body */
.b4-auth-body{
  padding: 18px 18px 14px;
}

.b4-auth-body .b4-auth-help{
  color: var(--b4-auth-muted);
  font-size: 13px;
  margin: 0 0 12px 0;
}

/* Form */
.b4-form-group{
  margin-bottom: 14px;
}
.b4-label{
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--b4-auth-text);
}

/* Pequena ajuda abaixo do campo */
.b4-help{
  display:block;
  margin-top:6px;
  font-size:12px;
  opacity:.75;
}
.b4-input{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--b4-auth-border);
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
  background: #fff;
}
.b4-input::placeholder{
  color: #9aa6b2;
}
.b4-input:focus{
  border-color: rgba(68, 88, 103, .75);
  box-shadow: 0 0 0 3px rgba(68, 88, 103, .14);
}

/* Button */
.b4-btn{
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: var(--b4-auth-primary);
  color: #fff;
  font-weight: 700;
  padding: 12px 14px;
  font-size: 14px;
  cursor: pointer;
}
.b4-btn:hover{
  background: var(--b4-auth-primary-2);


/* Icon button (used inside flex rows, e.g. CEP search) */
.b4-btn-icon{
  width: 44px !important;
  flex: 0 0 44px;
  padding: 10px 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
}

/* Secondary button (WhatsApp, etc.) */
.b4-btn-secondary{
  margin-top: 10px;
  background: #6c7a87;
  color: #fff;
  text-decoration: none;
}
.b4-btn-secondary:hover{
  background: #5e6b77;
  color: #fff;
}

/* Round "+" button used in list headers (Novo...) */
.b4-fab-plus{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--b4-auth-primary);
  color: #fff;
  text-decoration: none;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.b4-fab-plus .b4-icon{
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.b4-fab-plus:hover{
  background: var(--b4-auth-primary-2);
  color: #fff;
}

/* Footer links */
.b4-auth-footer{
  padding: 0 18px 16px;
  display: flex !important;
  justify-content: flex-start;
  gap: 10px;
  font-size: 13px;
}

/* Alert / error */
.b4-alert,
.b4-auth-alert{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  background: #d9534f;
  color: #fff;
}

/* Desktop refinements */
@media (min-width: 992px){
  body.b4-auth{ padding: 40px 16px; }
  .b4-auth-card{ width: 540px; }
  .b4-auth-header{ padding: 16px 18px; }
  .b4-auth-header .b4-auth-title{ font-size: 18px; }
  .b4-auth-body{ padding: 22px 22px 14px; }
  .b4-auth-footer{ padding: 0 22px 18px; }
  .b4-input{ padding: 13px 14px; font-size: 15px; }
  .b4-label{ font-size: 14px; }
  .b4-btn{ padding: 13px 16px; font-size: 15px; }
}

/* Mobile-first refinements */
@media (max-width: 420px){
  body.b4-auth{ padding: 18px 10px; }
  .b4-auth-body{ padding: 16px 14px 12px; }
  .b4-auth-footer{ padding: 0 14px 14px; }
  .b4-auth-header{ padding: 12px 14px; }
  .b4-auth-header .b4-auth-title{ font-size: 16px; }
  .b4-input{ padding: 11px 12px; font-size: 14px; }
  .b4-label{ font-size: 13px; }
  .b4-btn{ padding: 12px 14px; }
}


/* --------------------------------------------------------------------------
   B4 UI theme for the rest of the app (Bootstrap + Bulma pages)
   Goal: keep layouts intact, but unify colors, rounded corners, and form UX.
   Scoped to body.b4-ui.
----------------------------------------------------------------------------*/

html, body.b4-ui{ height: 100%; }

body.b4-ui{
  min-height: 100vh;
  margin: 0;
  background: var(--b4-auth-bg);
  color: var(--b4-auth-text);
  font-family: Arial, Helvetica, sans-serif;
}

/* Generic page spacing */
body.b4-ui .container,
body.b4-ui .container-fluid{
  padding-left: 12px;
  padding-right: 12px;
}

/* Bulma container helpers */
body.b4-ui .container.is-max-desktop{
  max-width: 980px;
  margin: 0 auto;
}

/* Cards / panels (Bootstrap card + Bulma box/notification) */
body.b4-ui .card,
body.b4-ui .box,
body.b4-ui .notification{
  border-radius: var(--b4-auth-radius);
  box-shadow: var(--b4-auth-shadow);
  border: 1px solid rgba(0,0,0,.05);
}

body.b4-ui .card-header{
  background: var(--b4-auth-primary);
  color: #fff;
  border-bottom: 0;
}

body.b4-ui .card-header h1,
body.b4-ui .card-header h2,
body.b4-ui .card-header h3,
body.b4-ui .card-header h4,
body.b4-ui .card-header h5,
body.b4-ui .card-header h6{
  color: #fff;
  margin: 0;
}

/* Headings */
body.b4-ui h1, body.b4-ui h2{ color: var(--b4-auth-text); }

/* Form controls (Bootstrap) */
body.b4-ui .form-control,
body.b4-ui .form-select{
  border-radius: 10px;
  border: 1px solid var(--b4-auth-border);
  padding: 12px 12px;
}
body.b4-ui .form-control:focus,
body.b4-ui .form-select:focus{
  border-color: rgba(68, 88, 103, .75);
  box-shadow: 0 0 0 3px rgba(68, 88, 103, .14);
}

/* Bulma inputs */
body.b4-ui .input,
body.b4-ui .textarea,
body.b4-ui .select select{
  border-radius: 10px !important;
  border-color: var(--b4-auth-border) !important;
}
body.b4-ui .input:focus,
body.b4-ui .textarea:focus,
body.b4-ui .select select:focus{
  box-shadow: 0 0 0 3px rgba(68, 88, 103, .14) !important;
  border-color: rgba(68, 88, 103, .75) !important;
}

/* Buttons (Bootstrap + Bulma) - unify to Romaneio palette */
body.b4-ui .btn,
body.b4-ui .button{
  border-radius: 10px;
  font-weight: 700;
}

/* Primary action */
body.b4-ui .btn-primary,
body.b4-ui .btn-success,
body.b4-ui .button.is-primary,
body.b4-ui .button.is-success{
  background: var(--b4-auth-primary) !important;
  border-color: var(--b4-auth-primary) !important;
  color: #fff !important;
}

/* Botão primário do tema (usado em formulários específicos) */
body.b4-ui .b4-btn-primary{
  background: var(--b4-auth-primary) !important;
  border: 1px solid var(--b4-auth-primary) !important;
  color: #fff !important;
  font-weight: 700;
}
body.b4-ui .b4-btn-primary:hover{
  background: var(--b4-auth-primary-2) !important;
  border-color: var(--b4-auth-primary-2) !important;
  color: #fff !important;
}
body.b4-ui .btn-primary:hover,
body.b4-ui .btn-success:hover,
body.b4-ui .button.is-primary:hover,
body.b4-ui .button.is-success:hover{
  background: var(--b4-auth-primary-2) !important;
  border-color: var(--b4-auth-primary-2) !important;
}

/* Secondary */
body.b4-ui .btn-outline-primary,
body.b4-ui .btn-outline-success{
  border-color: var(--b4-auth-primary) !important;
  color: var(--b4-auth-primary) !important;
}
body.b4-ui .btn-outline-primary:hover,
body.b4-ui .btn-outline-success:hover{
  background: var(--b4-auth-primary) !important;
  color: #fff !important;
}

/* Tables */
body.b4-ui table.table thead th{
  background: rgba(68, 88, 103, .08);
  color: var(--b4-auth-text);
}
body.b4-ui table.table{
  border-radius: var(--b4-auth-radius);
  overflow: hidden;
}

/* Make key forms centered (without forcing all pages) */
body.b4-ui .b4-form-wrap{
  max-width: 820px;
  margin: 0 auto;
}

/* Mobile-first adjustments */
@media (max-width: 420px){
  body.b4-ui .container,
  body.b4-ui .container-fluid{ padding-left: 10px; padding-right: 10px; }
  body.b4-ui .form-control,
  body.b4-ui .form-select{ padding: 11px 12px; }
}

@media (min-width: 992px){
  body.b4-ui .b4-form-wrap{ max-width: 940px; }
}



/* ===========================
   NAVBAR / TOPBAR (B4 Romaneio)
   Works with the custom header (#header/#nav/#menu)
   and with Bootstrap .navbar when present.
   =========================== */

body.b4-ui #header{
  background: var(--b4-auth-primary);
  color:#fff;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

body.b4-ui #logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.2px;
}

body.b4-ui #logo::before{
  content:"";
  width:34px;
  height:34px;
  border-radius:10px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  background-image: url("/assets/img/favicon_B4.png");
  background-size: 22px 22px;
  background-position:center;
  background-repeat:no-repeat;
}

body.b4-ui #nav a{
  color:#fff;
  text-decoration:none;
}

body.b4-ui #menu a{
  padding: 10px 12px;
  border-radius: 12px;
  display:block;
  font-weight:600;
  transition: background .15s ease, transform .15s ease;
}

body.b4-ui #menu a:hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

body.b4-ui #btn-mobile{
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight:700;
}

body.b4-ui #btn-mobile:hover{
  background: rgba(255,255,255,.12);
}

body.b4-ui #hamburguer{
  border-top: 2px solid #fff;
  width: 20px;
}

body.b4-ui #hamburguer::after,
body.b4-ui #hamburguer::before{
  content:"";
  display:block;
  width: 20px;
  height: 2px;
  background:#fff;
  margin-top: 5px;
  transition: .3s;
  position: relative;
}

body.b4-ui #nav.active #hamburguer{
  border-top-color: transparent;
}

body.b4-ui #nav.active #hamburguer::before{
  transform: rotate(135deg);
}

body.b4-ui #nav.active #hamburguer::after{
  transform: rotate(-135deg);
  top: -7px;
}

/* Mobile menu (custom header) */
@media (max-width: 720px){
  body.b4-ui #menu{
    background: var(--b4-auth-primary);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    box-shadow: 0 16px 30px rgba(0,0,0,.14);
  }
}

/* Bootstrap navbar harmonization (if used) */
body.b4-ui .navbar{
  background: var(--b4-auth-primary) !important;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

body.b4-ui .navbar .nav-link{
  border-radius: 12px;
  padding: 10px 12px;
  font-weight:600;
}

body.b4-ui .navbar .nav-link:hover{
  background: rgba(255,255,255,.12);
}

/* Disabled buttons visual */
.b4-disabled,
button:disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}


/* Soft hint / helper box (quase transparente) */
.b4-soft-hint{
  margin-top:14px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.05);
  background: rgba(255, 255, 255, .28);
  color:#2e2e2e;
  backdrop-filter: blur(2px);
}
.b4-soft-hint b{ color:#1f2937; }

.b4-soft-footer{
  margin-top:14px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.06);
  background: rgba(245, 238, 205, .65);
}

.b4-page-wrap{ margin-top: 18px; }


/* --- Pedidos do vendedor: ações redondas + cards mobile --- */
.b4-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.b4-action-form{ display:inline; margin:0; }
.b4-action-round{
  width:38px;
  height:38px;
  border-radius:999px;
  border:none;
  background: var(--b4-auth-primary, #445867);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.b4-action-round:hover{
  filter: brightness(1.07);
  transform: translateY(-1px);
}
.b4-action-round:active{
  transform: translateY(0px);
}
.b4-action-round .icon{ font-size:20px; line-height:1; }

.b4-pedidos-cards{ display:none; }
.b4-pedido-card{
  background:#fff;
  border:1px solid rgba(68,88,103,.18);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.b4-pedido-card__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.b4-pedido-card__id{ font-size:16px; }
.b4-pedido-card__status{
  font-size:13px;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(68,88,103,.10);
  border:1px solid rgba(68,88,103,.18);
}
.b4-pedido-card__row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
  border-top:1px dashed rgba(0,0,0,.08);
}
.b4-pedido-card__row span{ color:#6b7280; font-size:13px; }
.b4-actions--mobile{ justify-content:flex-end; margin-top:10px; }

@media (max-width: 768px){
  .b4-pedidos-table{ display:none; }
  .b4-pedidos-cards{ display:block; }
}

/* =========================================================
   Listas (CRUD) responsivas: tabela (desktop) -> cards (mobile)
   Uso: views/admin/crud/cliente/index.ejs e mercadoria/index.ejs
   ========================================================= */

.b4-list-cards{ display:none; }
.b4-list-card{
  background:#fff;
  border:1px solid rgba(68,88,103,.18);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.b4-list-card__top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:10px;
}
.b4-list-card__title{ min-width:0; }
.b4-list-card__name{ font-size:16px; font-weight:800; color:#111827; line-height:1.2; }
.b4-list-card__sub{ font-size:13px; color:#6b7280; margin-top:4px; }
.b4-list-card__badge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(68,88,103,.10);
  border:1px solid rgba(68,88,103,.18);
  color:#445867;
  white-space:nowrap;
}
.b4-list-thumb{
  width:52px;
  height:52px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(68,88,103,.18);
  background:#f3f4f6;
  flex:0 0 auto;
}
.b4-list-card__rows{ margin-top:8px; }
.b4-list-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
  border-top:1px dashed rgba(0,0,0,.08);
}
.b4-list-row span{ color:#6b7280; font-size:13px; }
.b4-list-row b{ color:#111827; font-size:13px; font-weight:700; }

.b4-list-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:12px;
  flex-wrap:wrap;
}
.b4-action-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(68,88,103,.18);
  background:#fff;
  color:#445867;
  cursor:pointer;
  font-weight:800;
  text-decoration:none;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.b4-action-chip:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.b4-action-chip:active{ transform: translateY(0px); }
.b4-action-chip span{ font-size:13px; }
.b4-action-ico{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Ícone-only (sem texto) para ações (Editar/Excluir) em desktop e mobile */
.b4-action-icononly{
  width:40px;
  height:40px;
  padding:0;
  gap:0;
  justify-content:center;
}
.b4-action-icononly span{ display:none; }

.b4-action-chip.is-primary{
  background: var(--b4-auth-primary, #445867);
  border-color: rgba(255,255,255,.18);
  color:#fff;
}
.b4-action-chip.is-danger{
  background: #c0392b;
  border-color: rgba(255,255,255,.18);
  color:#fff;
}



/* =========================================================
   Form actions (Salvar / Voltar) com ícones SVG (padrão B4)
   ========================================================= */
.b4-form-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
  align-items:center;
}
.b4-form-actions .b4-btn,
.b4-form-actions .b4-btn-secondary{
  flex:1;
  height:46px;
  padding:0 16px;
  border-radius:12px;
}
/* remove margens e largura “auto” do botão secundário (link) dentro do grupo */
.b4-form-actions .b4-btn-secondary{ margin-top:0; }
.b4-form-actions a.b4-btn-secondary{ width:100%; }
.b4-btn.has-icon,
.b4-btn-secondary.has-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.b4-btn-ico{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
a.b4-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  border:0;
  border-radius:10px;
  padding:12px 14px;
  font-size:14px;
  font-weight:700;
}

/* =========================================================
   Mobile FAB actions (Salvar / Voltar) - ícones, flutuante e arrastável
   ========================================================= */
.b4-fab-actions{
  position:fixed;
  /* Abaixo da navbar (#header) para não bloquear o menu no mobile */
  top: calc(var(--b4-header-h, 64px) + 12px);
  right:14px;
  z-index:9999;
  display:none;
  gap:10px;
  align-items:center;
  touch-action:none;
}
.b4-fab-btn,
.b4-fab-btn-secondary{
  width:46px;
  height:46px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .08s ease, filter .15s ease;
}
.b4-fab-btn:hover,
.b4-fab-btn-secondary:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.b4-fab-btn:active,
.b4-fab-btn-secondary:active{ transform: translateY(0px); }

.b4-fab-btn{
  background: var(--b4-auth-primary, #445867);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.b4-fab-btn-secondary{
  background:#fff;
  border:1px solid rgba(68,88,103,.25);
  color:#445867;
}
.b4-fab-actions svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Desktop: ações na tabela no mesmo modelo do mobile (chips com SVG) */
.b4-table-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.b4-table-actions .b4-action-chip{
  padding:8px 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.b4-table-actions .b4-action-icononly{
  width:40px;
  height:40px;
  padding:0;
}
.b4-table-actions .b4-action-chip span{
  font-size:12px;
}



/* =========================================================
   Forçar listas em formato TABELA também no mobile
   ========================================================= */




/* =========================================================
   Imagens (forms e catálogos)
   ========================================================= */
.is-hidden{ display:none !important; }

.b4-img-manage{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
.b4-img-manage .b4-img-note{
  font-size:12px;
  opacity:.75;
}

.b4-img-actions-bar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.b4-uploader-collapsible{
  margin-top:12px;
}

.b4-gallery{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.b4-gallery-main{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
}
.b4-gallery-main img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}
.b4-gallery-nav{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
  padding:0 10px;
}
.b4-gallery-nav button{
  pointer-events:auto;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.b4-gallery-nav svg{
  width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.b4-thumbs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.b4-thumb{
  width:62px;
  height:62px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  overflow:hidden;
  background:#fff;
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.b4-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.b4-thumb.is-active{
  outline:3px solid rgba(68,88,103,.45);
  border-color: rgba(68,88,103,.25);
}
.b4-thumb.is-active::after{
  content:"PRINCIPAL";
  position:absolute;
  bottom:6px;
  left:6px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  color:#fff;
  background: rgba(0,0,0,.55);
  padding:2px 6px;
  border-radius:999px;
}

/* =====================================================
   Produto - Página de detalhes estilo "e-commerce"
   (thumbs na lateral + imagem grande + info ao lado)
===================================================== */
.b4-product-detail{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
.b4-product-media{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.b4-thumbs-rail{
  width:74px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex: 0 0 74px;
}
.b4-thumbs-rail .b4-thumb{
  width:74px;
  height:74px;
  border-radius:14px;
}
.b4-product-hero{
  flex: 1 1 auto;
  min-width: 0;
}
.b4-product-hero .b4-gallery-main img{
  height: 420px;
}
.b4-product-info{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.b4-product-title{
  font-size:22px;
  font-weight:900;
  margin:0;
  line-height:1.25;
}
.b4-product-sub{
  font-size:13px;
  opacity:.82;
}
.b4-product-price{
  font-size:28px;
  font-weight:900;
}
.b4-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.b4-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(68,88,103,.10);
  border:1px solid rgba(68,88,103,.18);
  font-size:12px;
  font-weight:800;
}
.b4-badge svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.b4-product-meta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
.b4-product-meta .b4-list-card{ margin:0; }

@media (min-width: 980px){
  .b4-product-detail{
    grid-template-columns: 1.2fr .8fr;
    align-items:start;
  }
}

@media (max-width: 640px){
  .b4-product-media{ flex-direction:column; }
  .b4-thumbs-rail{
    width:auto;
    flex-direction:row;
    flex-wrap:nowrap;
    overflow:auto;
    padding-bottom:4px;
  }
  .b4-thumbs-rail .b4-thumb{ width:64px; height:64px; }
  .b4-product-hero .b4-gallery-main img{ height:300px; }
}

@media (min-width: 900px){
  .b4-gallery-main img{ height:280px; }
}


/* =========================================================
   Helpers (mobile visibility / view actions)
   ========================================================= */
.b4-hide-mobile{ display:inline-flex; }
@media (max-width: 700px){
  .b4-hide-mobile{ display:none !important; }
  /* No detalhes (view), chips viram somente ícones para economizar espaço */
  .b4-view-actions .b4-action-chip span{ display:none; }
  .b4-view-actions .b4-action-chip{
    padding:10px;
    width:44px;
    height:44px;
    justify-content:center;
  }
}

/* =========================================================
   B4 Toast (alerta leve, sem modal)
   ========================================================= */
#b4-toast-root{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}
.b4-toast{
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  min-width: 240px;
  max-width: min(92vw, 520px);
  background: #3f5565; /* padrão B4 */
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.b4-toast.is-show{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.b4-toast.is-hide{
  opacity: 0;
  transform: translateY(10px) scale(.98);
}
.b4-toast-ico{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
}
.b4-toast-ico svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.b4-toast-msg{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
  word-break: break-word;
}
.b4-toast-success{ background: #3f5565; }
.b4-toast-error{ background: #7a2e2e; }
.b4-toast-info{ background: #2f5f73; }


/* OTP (contra-código) */
.b4-otp{display:flex;gap:10px;align-items:center;}
.b4-otp-digit{width:44px;max-width:44px;height:46px;text-align:center;font-size:18px;font-weight:700;border-radius:12px;border:1px solid rgba(0,0,0,.15);outline:none;}

.b4-otp[data-b4-otp="6"] .b4-otp-digit{width:38px;max-width:38px;}

.b4-otp-digit:focus{border-color: rgba(25,118,210,.65);box-shadow:0 0 0 3px rgba(25,118,210,.18);}



/* 3. UPLOADER (de uploader.css) */
/* ============================================================================ */

.b4-uploader{
  border: 1px dashed #b7c0c8;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.b4-uploader:hover{ filter: brightness(0.98); }
.b4-uploader.is-drag{ border-color: #445867; box-shadow: 0 0 0 3px rgba(68,88,103,.15); }
.b4-uploader.is-uploading{ opacity: .75; }
.b4-uploader-title{ font-weight: 700; margin-bottom: 4px; }
.b4-uploader-help{ font-size: 13px; opacity: .85; }
.b4-uploader-status{ margin-top: 8px; font-size: 13px; opacity: .9; }
.b4-uploader-status.is-error{ color: #b91c1c; opacity: 1; }

/* Compact mode (used when uploader is inside a "Gerenciar" accordion)
   Keeps the UI clean while still letting the user click/drop to upload */
.b4-uploader.is-compact{
  padding: 12px;
  min-height: 56px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.b4-uploader.is-compact .b4-uploader-title,
.b4-uploader.is-compact .b4-uploader-help{
  display:none;
}
.b4-uploader.is-compact::before{
  content:"Clique para selecionar";
  font-size: 12px;
  opacity: .75;
}
.b4-uploader.is-compact .b4-uploader-status{
  margin-top:0;
  position:absolute;
  left:12px;
  right:12px;
  bottom:10px;
}

/* ============================================================
   RESPONSIVE — max-width: 1280px (tablet / celular)
   ============================================================ */

@media (max-width: 1280px) {
.b4-only-mobile{display:block !important;}
  .b4-only-desktop{display:none !important;}
.b4-fin-row-2    { grid-template-columns: 1fr; }
  .b4-fin-row-equal{ grid-template-columns: 1fr; }
  .b4-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .b4-grid-3 { grid-template-columns: repeat(2, 1fr); }
/* Tabela lançamentos: esconde, mostra cards */
  .b4-fin-table-wrap { display: none !important; }
  .b4-lanc-card      { display: block; }

  /* Tabela hospedagens: esconde, mostra cards */
  .b4-hosp-table-wrap { display: none !important; }
  .b4-hosp-cards      { display: block; }
.b4-fin-mobile-cards { display: block; }
body.romaneio .b4-list-table{ display:none; }
  .b4-list-cards{ display:block; }
  /* No mobile, as ações do formulário viram FAB (somente ícones) */
  .b4-form-actions{ display:none; }
  .b4-fab-actions{ display:flex; }
.b4-force-table .b4-list-table{ display:block !important; }
  .b4-force-table .b4-list-cards{ display:none !important; }
}

/* ============================================================
   RESPONSIVE — max-width: 600px (celular pequeno)
   ============================================================ */

@media (max-width: 600px) {
#menu {
        display: none;
        position: absolute;
        width: 100%;
        top: 70px;
        right: 0px;
        /* background: #848484; */
        background: var(--b4-primary, rgb(19, 67, 225));
        height: 0px;
        transition: .6s;
        display: block;
        z-index: 1000;
        visibility: hidden;
        overflow-y: hidden;
    }
    #nav.active #menu{
        display: block;
        visibility: visible;
        overflow-y: auto;
        height: calc(100vh - 70px);
    }
    #menu a {
        padding: 1rem 0;
        margin: 0 1rem;
        border-bottom: 2px solid rgba(0, 0, 0, .05);
    }
    #btn-mobile {
       display: flex;
       padding: .5rem 1rem;
       font-size: 1rem;
       border: none;
       background: none;
       cursor: pointer;
       gap: .5rem;
    }
    #hamburguer {
        display: block;
        border-top: 2px solid;
        width: 20px;
    }
    #hamburguer::after, #hamburguer::before {
        content: '';
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor;
        margin-top: 5px;
        transition: .3s;
        position: relative;
    }
    #nav.active #hamburguer {
        border-top-color: transparent;
    }
    #nav.active #hamburguer::before {
        transform: rotate(135deg);
    }
    #nav.active #hamburguer::after {
        transform: rotate(-135deg);
        top: -7px;
    }
#header{
    height:auto;
    min-height:70px;
    padding:12px;
  }

  .b4-brand-name{
    max-width:118px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .b4-header-actions{
    order:2;
    margin-left:0;
  }

  #nav{
    order:3;
    margin-left:0;
  }

  #btn-mobile{
    border:1px solid rgba(255,255,255,.22);
    border-radius:10px;
    background:rgba(255,255,255,.14);
    color:#fff;
  }

  #menu{
    top:82px;
    box-shadow:0 20px 32px rgba(0,0,0,.18);
  }
#header{
    grid-template-columns:minmax(0,1fr) auto;
    padding:12px;
  }

  .b4-brand-name{
    max-width:118px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #menu{
    width:calc(100vw - 24px);
    right:0;
    left:auto;
  }
body.b4-ui #header{
    row-gap:12px;
  }

  body.b4-ui .b4-header-actions{
    width:auto;
  }

  body.b4-ui #nav{
    justify-self:end;
  }

  body.b4-ui #menu{
    width:calc(100vw - 24px);
  }
.b4-menu-separator {
    padding: 16px 16px 4px;
  }
.b4-menu-accordion {
    padding: .75rem 1rem;
  }
  .b4-menu-submenu li a {
    padding-left: 2rem !important;
  }
/* Filtros: mostra botão toggle, esconde grid por padrão */
  .b4-filtros-toggle { display: block; }
  .b4-filtros-body.is-hidden { display: none !important; }

  /* Cards financeiros: 2 colunas no celular */
  .b4-fin-cards { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Formulários: tudo em 1 coluna */
  .b4-grid-4, .b4-grid-3, .b4-grid-2 { grid-template-columns: 1fr; }

  /* Dashboard: tabelas vencidos/a-vencer empilham */
  .b4-fin-row-2,
  .b4-fin-row-equal { grid-template-columns: 1fr !important; }

  /* Extrato proprietário: totais em coluna */
  .b4-extrato-totais { flex-direction: column !important; gap: 8px !important; }
  .b4-extrato-totais > div { min-width: 0 !important; }

  /* Gráficos: canvas responsivo */
  canvas { max-width: 100%; height: auto !important; }
.b4-btn-std { padding: 10px 14px; font-size: .88rem; }
  .b4-btn-std svg { width:17px; height:17px; }
  .b4-action-chip { padding:8px 12px; font-size:.82rem; }
.b4-rg-2-2,
  .b4-rg-3-2,
  .b4-rg-1-1,
  .b4-rg-cep  { grid-template-columns: 1fr; }
  .b4-col-span-2 { grid-column: span 1; }
  .b4-cep-btn-wrap label { display: none; }
.b4-otp[data-b4-otp="6"] .b4-otp-digit{width:34px;max-width:34px;}
.b4-otp{gap:8px}.b4-otp-digit{width:40px;height:44px;border-radius:12px;}
}

/* =====================================================
   BOTÃO SALVAR NO HEADER DO FORM (mobile)
   Aparece no cabeçalho azul só quando b4-form-actions some
   Mostra apenas o ícone (sem texto) — estilo dos botões de nav
   ===================================================== */
.b4-header-save {
  display: none; /* escondido no desktop — b4-form-actions já cobre */
}

@media (max-width: 1280px) {
  .b4-header-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
    font-size: 0; /* esconde texto — mostra só ícone */
  }
  .b4-header-save:hover {
    background: rgba(255,255,255,.28);
  }
  .b4-header-save svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 2.2; stroke-linecap: round;
    flex-shrink: 0;
  }
}

/* =====================================================
   Botão de cabeçalho COM texto (desktop e mobile).
   Use para acoes secundarias no header escuro do card.
   ===================================================== */
.b4-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.15);
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s, transform .1s;
  background: rgba(255,255,255,.12);
}
.b4-header-btn:hover { filter: brightness(1.08); }
.b4-header-btn:active { transform: translateY(1px); }
@media (max-width: 600px) {
  .b4-header-btn { padding: 6px 10px; font-size: 12px; }
}

/* =====================================================
   Forms sem FAB: mantém os botões do rodapé visíveis
   no mobile — lado a lado igual ao desktop
   ===================================================== */
@media (max-width: 1280px) {
  .b4-form-actions.b4-keep-mobile {
    display: flex !important;
    flex-direction: row;
    gap: 10px;
    margin-top: 14px;
  }
  .b4-form-actions.b4-keep-mobile > * {
    flex: 1;
    justify-content: center;
  }
}

/* =====================================================
   CHIP DE USUÁRIO LOGADO — b4-user-chip
   Exibe avatar com iniciais + primeiro nome + role
   Discreto no header, responsivo
   ===================================================== */
.b4-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  cursor: default;
  user-select: none;
  transition: background .15s;
  max-width: 180px;
  overflow: hidden;
  text-decoration: none;
}

.b4-user-chip:hover {
  background: rgba(255,255,255,.18);
}

/* Avatar circular com iniciais */
.b4-user-chip__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1343e1, #42a5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* Bloco de texto */
.b4-user-chip__info {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  min-width: 0;
}

.b4-user-chip__name {
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.b4-user-chip__role {
  font-size: .62rem;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  line-height: 1.2;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Master recebe cor dourada */
.b4-user-chip--master .b4-user-chip__avatar {
  background: linear-gradient(135deg, #b45309, #f59e0b);
}

.b4-user-chip--master .b4-user-chip__role {
  color: #fcd34d;
}

/* Mobile — esconde o texto, mostra só o avatar */
@media (max-width: 600px) {
  .b4-user-chip {
    padding: 4px;
    gap: 0;
    background: transparent;
    border-color: rgba(255,255,255,.15);
  }
  .b4-user-chip__info { display: none; }
  .b4-user-chip__avatar { width: 32px; height: 32px; font-size: .7rem; }
}

/* =============================================================
   POLISH DO MENU LATERAL — alinhamento consistente de ícones
   (acrescentado sem alterar JS ou estrutura HTML)
   ============================================================= */
body.b4-ui #menu a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  min-height: 44px;
  transition: background .15s, transform .1s;
}
body.b4-ui #menu a:hover,
body.b4-ui #menu a:focus {
  background: rgba(255,255,255,.10);
  transform: translateX(2px);
}
body.b4-ui #menu .b4-menu-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .85;
  display: inline-block;
}
body.b4-ui #menu a:hover .b4-menu-icon { opacity: 1; }
body.b4-ui #menu a span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
body.b4-ui #menu .b4-menu-separator {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.45);
  padding: 16px 14px 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.08);
}
body.b4-ui #menu li:first-child .b4-menu-separator,
body.b4-ui #menu .b4-menu-separator:first-child {
  border-top: none;
  margin-top: 0;
}
/* Subitens — sem distinção visual (alinhamento idêntico aos demais).
   A classe é preservada como marcador semântico para uso futuro. */

/* =========================================================
   B4 DESKTOP TOPNAV (#b4-desknav)
   Somente em >= 900px | Somente ADM/GERENTE (não master)
   ========================================================= */

#b4-desknav { display: none; }

@media (min-width: 900px) {

  /* Reestrutura o #header como flex row único */
  body.b4-ui #header {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    min-height: 58px;
    height: 58px;
    padding: 0 20px;
    gap: 0;
    border-radius: 0;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* Esconde o hamburger / drawer no desktop */
  body.b4-ui #nav { display: none !important; }

  /* Mostra o topnav desktop */
  #b4-desknav {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    align-self: stretch;
    overflow: hidden;
    padding: 0 4px;
  }

  /* Ações do usuário ficam na extrema direita */
  body.b4-ui .b4-header-actions {
    grid-area: unset;
    width: auto;
    flex-shrink: 0;
    margin-left: 8px;
    justify-content: flex-end;
  }

  /* ── LISTA PRINCIPAL ── */
  .b4-dn-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: stretch;
    gap: 0;
    height: 100%;
  }

  .b4-dn-item {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* Link e botão do topnav */
  .b4-dn-link,
  .b4-dn-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 13px;
    height: 100%;
    color: rgba(255,255,255,.88);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 0;
    white-space: nowrap;
    transition: background .14s, color .14s;
    font-family: inherit;
    line-height: 1;
  }

  .b4-dn-link:hover,
  .b4-dn-btn:hover,
  .b4-dn-item.is-open > .b4-dn-btn {
    background: rgba(255,255,255,.13);
    color: #fff;
  }

  /* Linha ativa embaixo do item com dropdown aberto */
  .b4-dn-item.is-open > .b4-dn-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 2px;
    background: rgba(255,255,255,.7);
    border-radius: 2px 2px 0 0;
  }

  .b4-dn-link--sair {
    color: rgba(255,255,255,.55);
    font-size: 12px;
  }

  .b4-dn-caret {
    font-size: 9px;
    opacity: .65;
    transition: transform .18s;
    margin-left: 1px;
  }
  .b4-dn-item.is-open .b4-dn-caret { transform: rotate(180deg); }

  /* ── PAINEL DROPDOWN ── */
  .b4-dn-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.06);
    padding: 6px;
    z-index: 9999;
    margin-top: 2px;
  }

  .b4-dn-item.is-open > .b4-dn-panel {
    display: block;
    animation: b4DnFade .14s ease;
  }

  @keyframes b4DnFade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Links dentro do painel */
  .b4-dn-panel-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s;
  }

  .b4-dn-panel-link:hover {
    background: #f1f5f9;
    color: #0f172a;
  }

  .b4-dn-panel-link--sub {
    color: #64748b;
    font-size: 12px;
    padding-left: 30px;
  }
  .b4-dn-panel-link--sub:hover { color: #334155; }

  .b4-dn-picon {
    width: 14px;
    height: 14px;
    opacity: .5;
    flex-shrink: 0;
  }

  /* Ajuste: main não precisa compensar header antigo de 96px no desktop */
  body.b4-ui .b4-home-main,
  body.b4-ui main {
    padding-top: 16px;
  }
}

/* ── Mega-menu: painel com colunas ── */
@media (min-width: 900px) {
  .b4-dn-panel--mega {
    display: none;
    flex-direction: row;
    gap: 0;
    min-width: 640px;
    padding: 8px 4px;
  }
  .b4-dn-item.is-open > .b4-dn-panel--mega {
    display: flex;
    animation: b4DnFade .14s ease;
  }
  .b4-dn-col {
    flex: 1;
    min-width: 190px;
    padding: 0 6px;
    border-right: 1px solid #f1f5f9;
  }
  .b4-dn-col:last-child { border-right: none; }

  .b4-dn-section-hdr {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 8px 10px 4px;
    user-select: none;
  }
  .b4-dn-section-hdr--sub {
    font-size: 9px;
    padding-top: 6px;
    color: #b0bec5;
  }
  .b4-dn-sep {
    height: 1px;
    background: #f1f5f9;
    margin: 6px 8px;
  }
}

/* ===== DESKTOP SIDEBAR LAYOUT (≥960px) ===== */
@media (min-width: 960px) {
  /* Fixed topbar */
  body.b4-ui #header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: 56px !important;
    min-height: 56px !important;
    z-index: 300;
    display: flex !important;
    align-items: center;
    padding: 0 16px !important;
    border-radius: 0 !important;
  }

  /* Fixed sidebar */
  body.b4-ui #nav {
    display: block !important;
    position: fixed !important;
    top: 56px; left: 0;
    width: 220px;
    height: calc(100vh - 56px);
    z-index: 200;
    background: var(--b4-auth-primary, #445867) !important;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform .25s ease;
    border-right: 1px solid rgba(255,255,255,.08);
  }

  /* Sidebar menu as vertical list */
  body.b4-ui #menu {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 8px 0 !important;
    margin: 0 !important;
  }

  /* Hide mobile hamburger and backdrop on desktop */
  body.b4-ui #btn-mobile,
  body.b4-ui .b4-menu-backdrop,
  body.b4-ui #b4-nav-overlay { display: none !important; }

  /* Desktop: logo comes first (hamburger hidden anyway) */
  body.b4-ui #header { gap: 10px; }

  /* Content offset */
  body.b4-ui main,
  body.b4-ui .b4-home-main {
    margin-left: 220px !important;
    padding-top: 72px !important;
    transition: margin-left .25s ease;
  }

  /* Sidebar closed state */
  body.b4-ui.b4-sidebar-closed #nav {
    transform: translateX(-220px);
  }
  body.b4-ui.b4-sidebar-closed main,
  body.b4-ui.b4-sidebar-closed .b4-home-main {
    margin-left: 0 !important;
  }

  /* Desktop sidebar toggle button */
  .b4-desk-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: .03em;
  }
  .b4-desk-toggle:hover { background: rgba(255,255,255,.18); }

  /* Fix desknav overflow so dropdown panels are not clipped */
  #b4-desknav { overflow: visible !important; }

  /* Dark mega-menu panels */
  .b4-dn-panel {
    background: var(--b4-auth-primary, #445867) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
  }
  .b4-dn-panel-link {
    color: rgba(255,255,255,.88) !important;
  }
  .b4-dn-panel-link:hover {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
  }
  .b4-dn-panel-link--sub {
    color: rgba(255,255,255,.58) !important;
  }
  .b4-dn-panel-link--sub:hover { color: rgba(255,255,255,.88) !important; }
  .b4-dn-section-hdr { color: rgba(255,255,255,.42) !important; }
  .b4-dn-section-hdr--sub { color: rgba(255,255,255,.3) !important; }
  .b4-dn-col { border-right-color: rgba(255,255,255,.08) !important; }
  .b4-dn-sep { background: rgba(255,255,255,.08) !important; }
  .b4-dn-picon { filter: brightness(0) invert(1); opacity: .55; }

  /* Sidebar menu item styles */
  body.b4-ui #menu > li > a,
  body.b4-ui #menu > li > button.b4-menu-accordion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0;
    transition: background .12s, color .12s;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
  }
  body.b4-ui #menu > li > a:hover,
  body.b4-ui #menu > li > button.b4-menu-accordion:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
  }
  body.b4-ui #menu > li > a.active,
  body.b4-ui #menu > li > button.b4-menu-accordion.active {
    background: rgba(255,255,255,.13);
    color: #fff;
  }

  /* Submenu items */
  body.b4-ui .b4-menu-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(0,0,0,.12);
    overflow: hidden;
    max-height: 0;
    transition: max-height .22s ease;
  }
  body.b4-ui .b4-menu-submenu.is-open {
    max-height: 600px;
  }
  body.b4-ui .b4-menu-submenu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 28px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    text-decoration: none;
    transition: background .12s;
  }
  body.b4-ui .b4-menu-submenu a:hover {
    background: rgba(255,255,255,.07);
    color: #fff;
  }

  /* Nested submenu (level 2) */
  body.b4-ui .b4-menu-submenu .b4-menu-submenu a {
    padding-left: 42px;
  }
  /* Level 3 */
  body.b4-ui .b4-menu-submenu .b4-menu-submenu .b4-menu-submenu a {
    padding-left: 56px;
  }

  /* Accordion button inside submenu */
  body.b4-ui .b4-menu-submenu > li > button.b4-menu-accordion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 28px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 500;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s;
  }
  body.b4-ui .b4-menu-submenu > li > button.b4-menu-accordion:hover {
    background: rgba(255,255,255,.07);
    color: #fff;
  }
  body.b4-ui .b4-menu-submenu .b4-menu-submenu > li > button.b4-menu-accordion {
    padding-left: 42px;
  }
}

/* ===== HAMBURGER BASE (escondido por padrão, CSS mobile liga) ===== */
.b4-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background .15s;
}
.b4-hamburger:hover { background: rgba(255,255,255,.18); }
.b4-hamburger:active { background: rgba(255,255,255,.22); transform: scale(.96); }
.b4-hamburger__bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .22s ease, opacity .18s ease, width .18s ease;
  transform-origin: center;
}
/* Animação X quando aberto */
.b4-hamburger[aria-expanded="true"] .b4-hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.b4-hamburger[aria-expanded="true"] .b4-hamburger__bar:nth-child(2) {
  opacity: 0; width: 0;
}
.b4-hamburger[aria-expanded="true"] .b4-hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===== MOBILE: hide desknav, show hamburger ===== */
@media (max-width: 959px) {
  .b4-desk-toggle { display: none !important; }
  #b4-desknav { display: none !important; }

  /* Mostra e posiciona hamburger à esquerda */
  body.b4-ui .b4-hamburger {
    display: flex !important;
    order: -1;
  }

  /* Mobile drawer */
  body.b4-ui #nav {
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    height: 100vh;
    z-index: 400;
    background: var(--b4-auth-primary, #445867);
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
    display: block !important;
  }
  body.b4-ui #nav.active {
    transform: translateX(0);
  }
  body.b4-ui #b4-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 399;
  }
  body.b4-ui #b4-nav-overlay.active { display: block; }

  /* Mobile menu list */
  body.b4-ui #menu {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 8px 0 60px !important;
    margin: 0 !important;
  }
  body.b4-ui #menu > li > a,
  body.b4-ui #menu > li > button.b4-menu-accordion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    color: rgba(255,255,255,.85);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
  }
  body.b4-ui .b4-menu-submenu {
    list-style: none;
    margin: 0; padding: 0;
    background: rgba(0,0,0,.12);
    overflow: hidden;
    max-height: 0;
    transition: max-height .22s ease;
  }
  body.b4-ui .b4-menu-submenu.is-open { max-height: 900px; }
  body.b4-ui .b4-menu-submenu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 32px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    text-decoration: none;
  }
  body.b4-ui .b4-menu-submenu .b4-menu-submenu a { padding-left: 48px; }
  body.b4-ui .b4-menu-submenu .b4-menu-submenu .b4-menu-submenu a { padding-left: 64px; }
  body.b4-ui .b4-menu-submenu > li > button.b4-menu-accordion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 32px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
  }
  body.b4-ui .b4-menu-submenu .b4-menu-submenu > li > button.b4-menu-accordion {
    padding-left: 48px;
  }
}