/* =====================================================================
   Bandeira Stay — SKIN v2 · o desenho do "Bandeira Stay Console"
   aplicado sobre o HTML real do app. So aparencia: nenhuma regra de
   negocio vive aqui. As classes do app sao remapeadas nos componentes
   do Console (rail, topbar, kpi, tiles, tabelas).
   ===================================================================== */

:root{
  --ink:#071A1C; --ink-2:#0C2528; --ink-3:#14383A;
  --ground:#EEF2F0; --surface:#FFFFFF; --surface-2:#F7FAF8;
  --line:#DCE5E1; --line-strong:#C4D2CD;
  --text:#0D1F21; --text-2:#4C625F; --text-3:#7C918D;
  --accent:#0B8074; --accent-soft:#DFF1ED; --accent-ink:#065F56; --on-accent:#FFFFFF;
  --nav-glow:#2ECFB6;
  --sand:#C68B45; --sand-soft:#F6ECDE;
  --pos:#177A52; --pos-soft:#E2F2EA;
  --neg:#B23A31; --neg-soft:#FBE8E5;
  --warn:#9A6A05; --warn-soft:#FBF0DA;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(7,26,28,.05), 0 8px 24px -14px rgba(7,26,28,.28);
  --shadow-lg:0 2px 6px rgba(7,26,28,.07), 0 22px 48px -24px rgba(7,26,28,.45);
  --rail-w:236px;
  --sans:"Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:"Bricolage Grotesque", "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* o CSS original do app le estas — herda o visual novo sem tocar no HTML */
  --primary-color:var(--accent); --primary-dark:var(--accent-ink);
  --accent-color:var(--nav-glow);
  --text-dark:var(--text); --text-light:var(--text-2);
  --bg-light:var(--ground); --bg-white:var(--surface);
  --border-color:var(--line); --red:var(--neg); --green:var(--pos);
}

html[data-theme="dark"]{
  --ground:#071214; --surface:#0D1E20; --surface-2:#112628;
  --line:#1D3538; --line-strong:#2A4A4C;
  --text:#E7F0ED; --text-2:#9FB5B1; --text-3:#7A918D;
  --accent:#2ECFB6; --accent-soft:#0F3733; --accent-ink:#8FEEDD; --on-accent:#04211E;
  --sand:#E0B27A; --sand-soft:#33291B;
  --pos:#3FCB8E; --pos-soft:#0E3327;
  --neg:#F0776A; --neg-soft:#361B18;
  --warn:#E0AE4C; --warn-soft:#332A15;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
  --shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 26px 54px -26px rgba(0,0,0,1);
}

*{ -webkit-tap-highlight-color:transparent }
body{
  font-family:var(--sans); background:var(--ground); color:var(--text);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--display); letter-spacing:-.015em; text-wrap:balance }
::selection{ background:var(--accent); color:var(--on-accent) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important } }

/* =========================================================== rail */
.sidebar{
  background:var(--ink); color:#CFE3DF; width:var(--rail-w);
  display:flex; flex-direction:column; gap:2px; padding:18px 12px 12px;
  border-right:0; overflow-y:auto;
}
.sidebar .logo{ display:none!important }

.bs-brand{ display:flex; align-items:center; gap:11px; padding:4px 10px 18px }
.bs-brand-mark{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto; overflow:hidden;
  background:linear-gradient(150deg,#0B8074,#053C39 70%);
  display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.bs-brand-mark img{ width:30px; height:auto; display:block }
.bs-brand-name{ font-family:var(--display); font-weight:700; font-size:15.5px; color:#fff; line-height:1.15 }
.bs-brand-sub{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#6E908B }

.bs-navgroup{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#5C7A76; padding:16px 12px 7px;
}
.sidebar .menu-item{
  display:flex; align-items:center; gap:11px; width:100%; padding:9px 12px;
  border:0; border-left:0; background:none; border-radius:10px; cursor:pointer;
  font-size:14px; font-weight:500; color:#B6CDC9; text-align:left; margin:0;
  transition:background .15s, color .15s;
}
.sidebar .menu-item svg{ width:17px; height:17px; flex:0 0 auto; opacity:.85 }
.sidebar .menu-item:hover{ background:rgba(255,255,255,.06); color:#EAF5F2 }
.sidebar .menu-item.active{ background:var(--ink-3); color:#fff; border-left:0 }
.sidebar .menu-item.active svg{ opacity:1; color:var(--nav-glow) }

.bs-railfoot{ margin-top:auto; border-top:1px solid rgba(255,255,255,.08); padding-top:10px }
.bs-railuser{ display:flex; align-items:center; gap:10px; padding:8px 12px; font-size:13px; color:#CFE3DF }
.bs-avatar{
  width:29px; height:29px; border-radius:9px; background:var(--sand); color:#2A1A08;
  display:grid; place-items:center; font-weight:700; font-size:12px; flex:0 0 auto;
}
.bs-railuser small{ display:block; font-size:11px; color:#6E908B }

/* =========================================================== topbar */
.main{
  margin-left:var(--rail-w); width:calc(100% - var(--rail-w));
  display:flex; flex-direction:column; min-width:0; padding:0;
}
.bs-topbar{
  position:sticky; top:0; z-index:30; background:var(--ground);
  border-bottom:1px solid var(--line); padding:14px 26px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.bs-crumb{ font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3) }
.bs-title{ font-family:var(--display); font-size:22px; font-weight:700; line-height:1.15; color:var(--text) }
.bs-topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:9px }
.bs-chip{
  display:flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px 6px 10px;
  font-size:12.5px; color:var(--text-2); box-shadow:var(--shadow);
}
.bs-dot{ width:7px; height:7px; border-radius:50%; background:var(--pos); box-shadow:0 0 0 3px var(--pos-soft) }

/* o conteudo de cada pagina ganha o respiro do Console */
.main > .page{ padding:26px; max-width:1360px; width:100% }

/* =========================================================== cards */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px;
}
.card h3{ font-size:15px; font-weight:700; color:var(--text) }
.page-header h2{ font-family:var(--display); font-size:22px; font-weight:700; color:var(--text) }
.page-header h3{ font-family:var(--display); font-size:16px; font-weight:700; color:var(--text) }

/* barra de filtros vira a fileira de pilulas do Console */
.card.filter-bar{
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  background:none; border:0; box-shadow:none; padding:0; margin-bottom:18px;
}
.card.filter-bar .form-group{ margin-bottom:0; flex:0 1 240px; min-width:180px }

/* =========================================================== KPI
   O #indicadores-gerais e regerado por innerHTML a cada render, entao o
   "hero" do Console e feito por posicionamento de grid — sem tocar no DOM.
   Sao 7 cards; o 7o (Lucro Liquido) ocupa a coluna 1 nas duas linhas e os
   outros 6 preenchem as colunas 2-4. */
#indicadores-gerais{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-flow:row dense;
  gap:16px; margin-bottom:16px; align-items:stretch;
}
#indicadores-gerais > .indicador-card:nth-child(7){
  grid-area:1 / 1 / 3 / 2; padding:20px 22px; justify-content:flex-start;
}
#indicadores-gerais > .indicador-card:nth-child(7) .indicador-label{
  font-size:10px; letter-spacing:.15em; margin-bottom:6px;
}
#indicadores-gerais > .indicador-card:nth-child(7) .indicador-valor{
  font-size:44px; font-weight:800; line-height:1.05;
}

.indicadores-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px }
.indicador-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:15px 16px;
  display:flex; flex-direction:column; gap:5px; min-height:104px;
}
.indicador-card::before{ content:none }
.indicador-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3); font-weight:600; margin-bottom:0;
}
.indicador-valor{
  font-family:var(--display); font-size:25px; font-weight:700; line-height:1.1;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--text);
}
.indicador-valor.red{ color:var(--neg) }
.indicador-valor.green{ color:var(--pos) }
.indicador-card > div[style*="12px"]{ margin-top:auto!important; color:var(--text-3)!important; font-size:12px!important }
.indicador-card.clickable{ cursor:pointer; transition:border-color .15s, transform .12s }
.indicador-card.clickable:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow) }

/* analitica usa os mesmos tiles */
.analitica-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px }
.analitica-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:15px 16px;
}
.analitica-card-title{ font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3); font-weight:600 }
.analitica-card-value{
  font-family:var(--display); font-size:25px; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.analitica-card-value.green{ color:var(--pos) } .analitica-card-value.red{ color:var(--neg) }

/* =========================================================== botoes */
.btn{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text); padding:8px 14px; border-radius:10px;
  font-size:13.5px; font-weight:600; cursor:pointer; min-height:38px;
  transition:background .15s, border-color .15s, transform .06s;
}
.btn:hover{ border-color:var(--accent); color:var(--accent-ink) }
.btn:active{ transform:translateY(1px) }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent) }
.btn-primary:hover{ filter:brightness(1.08); color:var(--on-accent); border-color:var(--accent) }
.btn-secondary,.btn-outline,.btn-outline-secondary{
  background:var(--surface); color:var(--text-2); border-color:var(--line);
}
.btn-secondary:hover,.btn-outline:hover{ background:var(--surface-2); color:var(--text) }
.btn-link{ background:none; border-color:transparent; color:var(--text-2) }
.btn-link:hover{ background:var(--surface); border-color:var(--line) }
#btnSyncSmoobu, .cal-sync-btn, .btn-sync, .btn-salvar{
  background:var(--accent)!important; border:1px solid var(--accent)!important;
  color:var(--on-accent)!important; border-radius:10px; font-weight:600;
}

/* =========================================================== formularios */
.form-label{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); font-weight:600 }
.form-input,.form-select,input[type=text],input[type=password],input[type=number],
input[type=tel],input[type=date],input[type=email],select,textarea{
  background:var(--surface); color:var(--text); border:1px solid var(--line);
  border-radius:10px; padding:9px 12px; font-size:13.5px; font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.upload-area{ border:2px dashed var(--line-strong); border-radius:var(--radius); background:var(--surface-2) }
.upload-area:hover{ border-color:var(--accent); background:var(--accent-soft) }

/* select2 no formato das pilulas de filtro */
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single{
  background:var(--surface)!important; border:1px solid var(--line)!important;
  border-radius:10px!important; min-height:40px; box-shadow:var(--shadow);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background:var(--accent-soft)!important; border:1px solid transparent!important;
  color:var(--accent-ink)!important; border-radius:7px!important; padding:2px 8px!important;
  font-size:12.5px; font-weight:600;
}
.select2-dropdown{
  background:var(--surface)!important; border-color:var(--line)!important;
  border-radius:12px!important; box-shadow:var(--shadow-lg)!important; overflow:hidden;
}
.select2-container--default .select2-results__option{ color:var(--text) }
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--accent)!important; color:var(--on-accent)!important;
}
.select2-search__field{ background:var(--surface)!important; color:var(--text)!important }

/* =========================================================== tabelas */
.table-container{ overflow-x:auto; border-radius:var(--radius-sm) }
table{ width:100%; border-collapse:collapse; font-size:13.5px }
th{
  font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-3); text-align:left; font-weight:600; padding:11px 16px;
  background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
td{ padding:12px 16px; border-bottom:1px solid var(--line); color:var(--text) }
tbody tr:last-child td{ border-bottom:0 }
tbody tr:hover td{ background:var(--surface-2) }

.unidade-grupo{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:14px }
.unidade-header{ background:var(--surface-2); padding:11px 16px; border-bottom:1px solid var(--line) }
.unidade-header:hover{ background:var(--accent-soft) }
.unidade-nome{ font-family:var(--display); color:var(--text); font-size:14px; font-weight:700 }

/* =========================================================== modais */
.modal-overlay,.cal-modal-overlay,.wa-template-overlay,.quick-reply-overlay{
  background:rgba(6,20,22,.55); backdrop-filter:blur(3px);
}
.modal-content,.cal-modal,.wa-template-modal,.preco-edit-content{
  background:var(--surface); color:var(--text); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow-lg); padding:26px;
}

/* =========================================================== calendario */
.cal-header h2{ font-family:var(--display); font-size:22px; font-weight:700; color:var(--text) }
.cal-nav button{ background:var(--surface); border:1px solid var(--line); color:var(--text);
  border-radius:9px; min-width:36px; min-height:36px }
.cal-nav button:hover{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink) }
.cal-nav span{ font-family:var(--display); font-weight:700; text-transform:capitalize; color:var(--text) }
.cal-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto }
.cal-tab{ border:0; background:none; padding:10px 15px; font-size:13.5px; font-weight:600;
  color:var(--text-3); border-bottom:2px solid transparent; white-space:nowrap }
.cal-tab:hover{ color:var(--text) }
.cal-tab.active{ color:var(--accent-ink); border-bottom-color:var(--accent); background:none }
.cal-container{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow) }
.cal-unit-name,.cal-corner{ background:var(--surface-2); color:var(--text); font-weight:600;
  border-color:var(--line) }
.cal-day-num{ color:var(--text); font-variant-numeric:tabular-nums }
.cal-day-name{ font-family:var(--mono); font-size:9px; text-transform:uppercase; color:var(--text-3) }
.cal-legend{ color:var(--text-2); font-size:12.5px }
.preco-box{ background:var(--surface); border-color:var(--line); color:var(--text); border-radius:7px }
.preco-box.today{ border-color:var(--accent); color:var(--accent-ink) }
.preco-box.pending{ background:var(--warn-soft); border-color:var(--warn); color:var(--warn) }

/* =========================================================== mensagens */
.msgs-layout,.wa-chat-layout{ border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--surface) }
.msgs-lista,.wa-chat-sidebar{ background:var(--surface-2); border-right:1px solid var(--line) }
.msgs-thread:hover,.wa-chat-item:hover{ background:var(--accent-soft) }
.msgs-thread.active,.wa-chat-item.active{ background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent) }
.msgs-bubble.sent,.wa-msg.sent{ background:var(--accent); color:var(--on-accent) }
.msgs-bubble.received,.wa-msg.received{ background:var(--surface); color:var(--text); border:1px solid var(--line) }
.contatos-filtro-chip{ background:var(--surface); border:1px solid var(--line); color:var(--text-2);
  border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:600 }
.contatos-filtro-chip.active{ background:var(--accent); border-color:var(--accent); color:var(--on-accent) }
.contato-avatar{ background:var(--accent-soft); color:var(--accent-ink); font-weight:700 }

/* =========================================================== login */
#telaLogin{
  background:
    radial-gradient(120% 90% at 12% 0%, var(--ink-3) 0%, transparent 55%),
    linear-gradient(150deg, var(--ink-2) 0%, var(--ink) 78%)!important;
  padding:24px!important;
  padding-top:calc(24px + env(safe-area-inset-top,0px))!important;
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important;
}
#telaLogin > div{
  background:var(--surface)!important; border:1px solid var(--line)!important;
  border-radius:20px!important; padding:34px 30px!important; max-width:390px!important;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7)!important;
}
#telaLogin img{ width:120px!important }
#telaLogin label{ font-family:var(--mono)!important; font-size:10px!important; letter-spacing:.1em!important;
  text-transform:uppercase!important; color:var(--text-3)!important }
#telaLogin input[type=text],#telaLogin input[type=password]{
  background:var(--surface-2)!important; color:var(--text)!important;
  border:1px solid var(--line)!important; border-radius:11px!important; padding:13px!important;
}
#telaLogin button{
  background:var(--accent)!important; border-radius:11px!important; font-weight:700!important;
  min-height:48px; box-shadow:0 6px 18px -8px var(--accent)!important;
}
#loginErro{ background:var(--neg-soft)!important; color:var(--neg)!important;
  border-left-color:var(--neg)!important }

/* =========================================================== aparencia */
.bs-fab{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:4200;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--text); font-size:19px; cursor:pointer;
  box-shadow:var(--shadow-lg); display:grid; place-items:center;
}
.bs-panel{
  position:fixed; right:16px; bottom:calc(72px + env(safe-area-inset-bottom,0px)); z-index:4201;
  width:290px; max-width:calc(100vw - 32px); background:var(--surface);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg);
  padding:16px; display:none; color:var(--text);
}
.bs-panel.open{ display:block }
.bs-panel h4{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--text-3); margin:0 0 9px; font-weight:600 }
.bs-panel h4:not(:first-child){ margin-top:18px }
.bs-swatches{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px }
.bs-sw{ aspect-ratio:1; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;
  outline:2px solid transparent; outline-offset:2px }
.bs-sw[aria-pressed="true"]{ outline-color:var(--accent) }
.bs-modes{ display:flex; gap:6px }
.bs-mode{ flex:1; padding:8px 6px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--text-2); font-size:12.5px; font-weight:600; cursor:pointer }
.bs-mode[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent) }
.bs-custom{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:9px 11px;
  border:1px solid var(--line); border-radius:11px; background:var(--surface-2) }
.bs-custom input[type=color]{ width:34px; height:34px; padding:0; border:0; background:none; cursor:pointer }
.bs-custom span{ font-size:12.5px; color:var(--text-2); font-weight:600 }
.bs-custom code{ font-family:var(--mono); font-size:11.5px; color:var(--text-3); margin-left:auto }
.bs-reset{ width:100%; margin-top:14px; padding:9px; border-radius:10px; border:1px solid var(--line);
  background:none; color:var(--text-3); font-size:12.5px; font-weight:600; cursor:pointer }
.bs-tag{ position:fixed; left:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:4200;
  background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn);
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em; padding:4px 9px;
  border-radius:999px; text-transform:uppercase; pointer-events:none }

/* =========================================================== responsivo */
@media (max-width:1100px){
  #indicadores-gerais{ grid-template-columns:repeat(2,1fr) }
  #indicadores-gerais > .indicador-card:nth-child(7){ grid-area:auto; grid-column:1 / -1 }
  .indicadores-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:768px){
  /* a casca mobile continua sendo a do mobile.css (body.mobile-ui);
     aqui so o que e exclusivo da pele */
  .bs-topbar{ display:none }
  .main > .page{ padding:16px 14px 88px }
  #indicadores-gerais{ grid-template-columns:repeat(2,1fr); gap:12px }
  #indicadores-gerais > .indicador-card:nth-child(7){ grid-area:auto; grid-column:1 / -1 }
  #indicadores-gerais > .indicador-card:nth-child(7) .indicador-valor{ font-size:34px }
  .indicadores-grid{ grid-template-columns:repeat(2,1fr); gap:12px }
  .indicador-valor{ font-size:21px }
  .bs-fab{ bottom:calc(74px + env(safe-area-inset-bottom,0px)) }
  .bs-panel{ bottom:calc(130px + env(safe-area-inset-bottom,0px)) }
  .bs-tag{ bottom:calc(70px + env(safe-area-inset-bottom,0px)) }
  th{ position:static }
}

/* =========================================================== paineis do Console
   Componentes que o app nao tinha: sparkline, barras por unidade,
   rosquinha de origem e tabela de reservas. Marcacao vinda do skin-paineis.js. */
.bs-foot{ margin-top:auto; padding-top:10px; font-size:12px; color:var(--text-3);
  display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.bs-tagpct{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600;
  padding:3px 9px; border-radius:999px }
.bs-tagpct.pos{ background:var(--pos-soft); color:var(--pos) }
.bs-tagpct.neg{ background:var(--neg-soft); color:var(--neg) }
.bs-vs{ color:var(--text-3); font-size:12px }
.bs-spark{ margin-top:auto; padding-top:14px }
.bs-spark svg{ width:100%; height:74px; display:block }

#bsPaineis{ display:block }
.bs-duo{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-bottom:16px; align-items:start }
.bs-card{ padding:0; margin-bottom:0; overflow:hidden }
.bs-cardhead{ display:flex; align-items:center; gap:12px; padding:15px 20px; border-bottom:1px solid var(--line) }
.bs-cardhead h3{ font-family:var(--display); font-size:15px; font-weight:700; margin:0; color:var(--text) }
.bs-eyebrow{ margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3) }
.bs-pill{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; padding:3px 9px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent-ink); font-weight:600 }
.bs-pill.neg{ background:var(--neg-soft); color:var(--neg) }
.bs-vazio{ padding:22px 20px; color:var(--text-3); font-size:13px; text-align:center }

/* barras */
.bs-bars{ display:flex; flex-direction:column; gap:11px; padding:18px 20px }
.bs-bar-row{ display:grid; grid-template-columns:118px 1fr 96px; align-items:center; gap:12px; font-size:13px }
.bs-unit{ display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--text); min-width:0 }
.bs-unit > i{ flex:0 0 auto }
.bs-dotsq{ width:9px; height:9px; border-radius:3px; display:inline-block }
.bs-dot{ width:9px; height:9px; border-radius:50%; display:inline-block }
.bs-track{ height:9px; border-radius:5px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden }
.bs-fill{ display:block; height:100%; border-radius:5px;
  background:linear-gradient(90deg, var(--accent), var(--nav-glow)) }
.bs-barval{ text-align:right; font-family:var(--mono); font-size:12px;
  font-variant-numeric:tabular-nums; color:var(--text-2) }

/* rosquinha */
.bs-donutwrap{ display:flex; align-items:center; gap:18px; padding:18px 20px; flex-wrap:wrap }
.bs-donut{ width:140px; flex:0 0 auto }
.bs-donut svg{ width:100%; height:auto; display:block }
.bs-donut-num{ font-family:var(--display); font-size:26px; font-weight:800; fill:var(--text) }
.bs-donut-lbl{ font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; fill:var(--text-3) }
.bs-legend{ flex:1 1 150px; display:flex; flex-direction:column; gap:9px; min-width:0 }
.bs-legrow{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text) }
.bs-legrow b{ margin-left:auto; font-family:var(--mono); font-size:12.5px; font-weight:600 }

/* tabela de reservas */
.bs-tablecard .table-container{ max-height:none }
.bs-tablecard th.bs-n, .bs-tablecard td.bs-n{ text-align:right }
.bs-tablecard td.bs-n{ font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums }
.bs-tablecard td.bs-neg{ color:var(--neg) }
.bs-truncado{ padding:11px 20px; border-top:1px solid var(--line); font-family:var(--mono);
  font-size:11px; letter-spacing:.04em; color:var(--text-3) }

@media (max-width:1100px){ .bs-duo{ grid-template-columns:1fr } }
@media (max-width:768px){
  .bs-duo{ grid-template-columns:1fr; gap:12px }
  .bs-bar-row{ grid-template-columns:100px 1fr 84px; gap:9px; font-size:12.5px }
  .bs-donutwrap{ gap:14px }
  .bs-donut{ width:118px }
}

/* =========================================================== tela Imóveis
   Pagina nova (nao existe no app). Cards por unidade, no desenho da proposta. */
.bs-imoveis-head{ display:flex; align-items:center; margin-bottom:14px }
.bs-imoveis-head .bs-eyebrow{ margin-left:0 }
.bs-imoveis-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px }
.bs-imovel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
}
.bs-imovel-top{
  padding:20px 20px 22px; display:flex; align-items:flex-start; gap:12px; color:#fff;
}
.bs-imovel-num{ font-family:var(--display); font-size:27px; font-weight:800; line-height:1.05; letter-spacing:-.02em }
.bs-imovel-dono{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-top:3px }
.bs-estado{
  margin-left:auto; font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(4px); white-space:nowrap;
}
.bs-estado.livre{ background:#fff; color:var(--ink) }

.bs-imovel-nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:16px 20px 4px }
.bs-imovel-nums > div{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.bs-imovel-lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3) }
.bs-imovel-nums b{ font-family:var(--display); font-size:19px; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--text) }

.bs-imovel-occ{ padding:12px 20px 16px }
.bs-occ-head{ display:flex; align-items:center; justify-content:space-between;
  font-size:12.5px; color:var(--text-2); margin-bottom:7px }
.bs-occ-head b{ font-family:var(--mono); font-size:12.5px }
.bs-occ-head b.alta{ color:var(--pos) } .bs-occ-head b.media{ color:var(--warn) } .bs-occ-head b.baixa{ color:var(--neg) }
.bs-imovel-occ .bs-fill.alta{ background:var(--pos) }
.bs-imovel-occ .bs-fill.media{ background:var(--warn) }
.bs-imovel-occ .bs-fill.baixa{ background:var(--neg) }
.bs-imovel-occ .bs-track{ display:block }

.bs-imovel-next{ display:flex; align-items:center; gap:8px; padding:13px 20px;
  border-top:1px dashed var(--line); font-size:12.5px; color:var(--text-2) }
.bs-imovel-next b{ color:var(--text); font-weight:600 }
.bs-imovel-acoes{ margin-top:auto; display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line) }
.bs-imovel-acoes button{
  border:0; background:none; padding:13px 6px; font-family:inherit; font-size:13px;
  font-weight:600; color:var(--text-2); cursor:pointer; border-right:1px solid var(--line);
}
.bs-imovel-acoes button:last-child{ border-right:0 }
.bs-imovel-acoes button:hover{ background:var(--surface-2); color:var(--accent-ink) }

@media (max-width:768px){
  .bs-imoveis-grid{ grid-template-columns:1fr; gap:12px }
  .bs-imovel-num{ font-size:23px }
}

/* =========================================================== Mensagens
   Os tres botoes originais do Calendario continuam no DOM porque o
   calShowTab do app os referencia por id — so ficam escondidos. */
#calTabMsgs, #calTabContatos, #calTabWhatsapp{ display:none!important }
.bs-subtabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto }
.bs-subtab{
  border:0; background:none; padding:10px 16px; font-family:inherit; font-size:13.5px;
  font-weight:600; color:var(--text-3); cursor:pointer; border-bottom:2px solid transparent;
  white-space:nowrap;
}
.bs-subtab:hover{ color:var(--text) }
.bs-subtab.active{ color:var(--accent-ink); border-bottom-color:var(--accent) }
.bs-subpanes .msgs-layout, .bs-subpanes .wa-chat-layout{ border-color:var(--line) }

/* =========================================================== Guia visual */
.bs-guia-cores{ display:flex; flex-direction:column; gap:20px; padding:18px 20px }
.bs-guia-grupo .bs-eyebrow{ margin-left:0; display:block; margin-bottom:9px }
.bs-swrow{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:11px }
.bs-swcard{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 11px;
  display:flex; flex-direction:column; gap:3px; background:var(--surface-2);
}
.bs-swbox{ height:34px; border-radius:6px; border:1px solid var(--line); margin-bottom:5px }
.bs-swcard b{ font-size:12.5px; font-weight:600; color:var(--text) }
.bs-swcard code{ font-family:var(--mono); font-size:10.5px; color:var(--text-3) }
.bs-swcard small{ font-family:var(--mono); font-size:10.5px; color:var(--text-2) }

.bs-guia-tipo{ display:flex; flex-direction:column; gap:22px; padding:18px 20px }
.bs-guia-tipo code{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--text-3) }
.bs-amostra-display{ font-family:var(--display); font-size:44px; font-weight:800;
  letter-spacing:-.02em; color:var(--pos); line-height:1.1; margin-top:6px }
.bs-amostra-h{ font-family:var(--display); font-size:20px; font-weight:700; color:var(--text) }
.bs-amostra-p{ font-size:15px; color:var(--text-2); max-width:56ch; margin-top:6px }
.bs-amostra-mono{ font-family:var(--mono); font-size:13px; color:var(--text); margin-top:6px }

.bs-guia-comp{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px; padding:18px 20px }
.bs-guia-comp .bs-eyebrow{ margin-left:0; display:block; margin-bottom:10px }
.bs-amostra-linha{ display:flex; align-items:center; gap:9px; flex-wrap:wrap }

/* =========================================================== mobile das telas novas
   Tudo escopado em body.mobile-ui, como manda a camada mobile do app —
   o desktop nunca ve nada disto. */
@media (max-width:900px){

  /* --- Financeiro: a tabela dos paineis vira cartoes (data-label posto
         pelo skin-mobile.js, porque o varrerTabelas do app tem lista fixa) --- */
  body.mobile-ui #bsPaineis .table-container{ overflow:visible }
  body.mobile-ui #bsPaineis table,
  body.mobile-ui #bsPaineis tbody,
  body.mobile-ui #bsPaineis tr,
  body.mobile-ui #bsPaineis td{ display:block; width:auto }
  body.mobile-ui #bsPaineis thead,
  body.mobile-ui #bsPaineis .mb-headrow{ display:none }
  body.mobile-ui #bsPaineis tbody tr{
    border:1px solid var(--line); border-radius:12px; margin:0 14px 10px;
    background:var(--surface); overflow:hidden;
  }
  body.mobile-ui #bsPaineis tbody tr:hover td{ background:none }
  body.mobile-ui #bsPaineis td{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:9px 14px; border-bottom:1px solid var(--line); text-align:right;
  }
  body.mobile-ui #bsPaineis td:last-child{ border-bottom:0 }
  body.mobile-ui #bsPaineis td::before{
    content:attr(data-label); font-family:var(--mono); font-size:9.5px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
    text-align:left; flex:0 0 auto;
  }
  body.mobile-ui #bsPaineis td:first-child{ background:var(--surface-2) }
  body.mobile-ui #bsPaineis .bs-tablecard{ padding-bottom:6px }
  body.mobile-ui #bsPaineis .bs-bars{ padding:14px }
  body.mobile-ui #bsPaineis .bs-donutwrap{ flex-direction:column; align-items:stretch; text-align:center }
  body.mobile-ui #bsPaineis .bs-donut{ margin:0 auto }
  body.mobile-ui #bsPaineis .bs-legend{ margin-top:4px }

  /* --- Imoveis --- */
  body.mobile-ui .bs-imoveis-grid{ grid-template-columns:1fr; gap:12px }
  body.mobile-ui .bs-imovel-top{ padding:16px 16px 18px }
  body.mobile-ui .bs-imovel-num{ font-size:23px }
  body.mobile-ui .bs-imovel-nums{ padding:14px 16px 2px }
  body.mobile-ui .bs-imovel-nums b{ font-size:17px }
  body.mobile-ui .bs-imovel-occ{ padding:10px 16px 14px }
  body.mobile-ui .bs-imovel-next{ padding:11px 16px }
  body.mobile-ui .bs-imovel-acoes button{ padding:14px 4px; font-size:12.5px }

  /* --- Mensagens: mestre-detalhe de verdade, nao lista+conversa empilhadas --- */
  body.mobile-ui #mensagens .bs-subtabs{ margin:0 0 12px; padding:0 2px }
  body.mobile-ui #mensagens .msgs-layout,
  body.mobile-ui #mensagens .wa-chat-layout{
    flex-direction:row!important;          /* vence o mobile.css: quem esconde e o mestre-detalhe */
    height:calc(100vh - 210px); min-height:340px; max-height:none;
    border-radius:12px; overflow:hidden; position:relative;
  }
  body.mobile-ui #mensagens .msgs-lista,
  body.mobile-ui #mensagens .wa-chat-sidebar{
    flex:1 1 100%; width:100%; max-width:none; max-height:none; border-right:0;
  }
  body.mobile-ui #mensagens .msgs-conversa,
  body.mobile-ui #mensagens .wa-conversa{
    position:absolute; inset:0; z-index:2; background:var(--surface);
    display:flex; flex-direction:column;
    transform:translateX(100%); transition:transform .22s ease;
  }
  body.mobile-ui #mensagens .bs-md-detalhe .msgs-conversa,
  body.mobile-ui #mensagens .bs-md-detalhe .wa-conversa{ transform:none }
  .bs-mvoltar{
    display:none; align-items:center; gap:7px; width:100%; border:0; border-bottom:1px solid var(--line);
    background:var(--surface-2); color:var(--accent-ink); font-family:inherit; font-size:13.5px;
    font-weight:600; padding:12px 14px; text-align:left; cursor:pointer; flex:0 0 auto;
  }
  body.mobile-ui #mensagens .bs-mvoltar{ display:flex }
  body.mobile-ui #mensagens .msgs-conversa-empty{ display:none }

  /* --- Guia visual --- */
  body.mobile-ui .bs-swrow{ grid-template-columns:repeat(2,1fr) }
  body.mobile-ui .bs-guia-cores,
  body.mobile-ui .bs-guia-tipo,
  body.mobile-ui .bs-guia-comp{ padding:14px }
  body.mobile-ui .bs-amostra-display{ font-size:34px }
}

/* =========================================================== tema escuro na casca mobile
   O mobile.css escopa tudo em `body.mobile-ui .x`, que tem especificidade
   maior que o meu `.x` — por isso os cartoes continuavam brancos no escuro.
   Em vez de duplicar dezenas de regras, remapeio os tokens dele para os meus.
   Atencao: os --mb-* sao declarados em `body.mobile-ui`, nao em `:root`, entao
   a declaracao do proprio body sombreia qualquer uma feita no `html`. Por isso
   o override precisa cair no MESMO elemento, com especificidade maior. */
html[data-theme="dark"] body.mobile-ui{
  --mb-canvas:var(--ground);
  --mb-surface:var(--surface);
  --mb-line:var(--line);
  --mb-ink:var(--text);
  --mb-ink-soft:var(--text-2);
  --mb-brand:var(--accent);
  --mb-shadow:var(--shadow);
}

/* =========================================================== reparo do modo escuro
   NEM o index.html NEM o mobile.css tem uma linha de suporte a tema escuro:
   o app foi feito so para claro, com dezenas de cores fixas em style inline.
   Como o padrao do seletor de aparencia e "automatico", todo aparelho no modo
   escuro caia em texto claro sobre fundo claro (o cartao de despesas do
   Financeiro > Lista era o caso mais visivel).

   Aqui cada cor neutra fixa e remapeada para o token do tema. Precisa de
   !important porque style inline vence qualquer folha. Cores de MARCA
   (WhatsApp #25d366, Airbnb #ff5a5f, Booking #1976d2) e o `color:#fff`
   (texto branco sobre botao colorido) ficam como estao, de proposito. */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"]{ background-color:var(--surface)!important }
html[data-theme="dark"] [style*="background:#fafafa"],
html[data-theme="dark"] [style*="background: #fafafa"],
html[data-theme="dark"] [style*="background-color:#fafafa"],
html[data-theme="dark"] [style*="background-color: #fafafa"],
html[data-theme="dark"] [style*="background:#f5f5f5"],
html[data-theme="dark"] [style*="background: #f5f5f5"],
html[data-theme="dark"] [style*="background-color:#f5f5f5"],
html[data-theme="dark"] [style*="background-color: #f5f5f5"],
html[data-theme="dark"] [style*="background:#f8f9fa"],
html[data-theme="dark"] [style*="background: #f8f9fa"],
html[data-theme="dark"] [style*="background-color:#f8f9fa"],
html[data-theme="dark"] [style*="background-color: #f8f9fa"],
html[data-theme="dark"] [style*="background:#f0f0f0"],
html[data-theme="dark"] [style*="background: #f0f0f0"],
html[data-theme="dark"] [style*="background-color:#f0f0f0"],
html[data-theme="dark"] [style*="background-color: #f0f0f0"],
html[data-theme="dark"] [style*="background:#f9f9f9"],
html[data-theme="dark"] [style*="background: #f9f9f9"],
html[data-theme="dark"] [style*="background-color:#f9f9f9"],
html[data-theme="dark"] [style*="background-color: #f9f9f9"],
html[data-theme="dark"] [style*="background:#f7f7f7"],
html[data-theme="dark"] [style*="background: #f7f7f7"],
html[data-theme="dark"] [style*="background-color:#f7f7f7"],
html[data-theme="dark"] [style*="background-color: #f7f7f7"],
html[data-theme="dark"] [style*="background:#f2f2f2"],
html[data-theme="dark"] [style*="background: #f2f2f2"],
html[data-theme="dark"] [style*="background-color:#f2f2f2"],
html[data-theme="dark"] [style*="background-color: #f2f2f2"],
html[data-theme="dark"] [style*="background:#eee"],
html[data-theme="dark"] [style*="background: #eee"],
html[data-theme="dark"] [style*="background-color:#eee"],
html[data-theme="dark"] [style*="background-color: #eee"],
html[data-theme="dark"] [style*="background:#ece5dd"],
html[data-theme="dark"] [style*="background: #ece5dd"],
html[data-theme="dark"] [style*="background-color:#ece5dd"],
html[data-theme="dark"] [style*="background-color: #ece5dd"],
html[data-theme="dark"] [style*="background:#dfe5e7"],
html[data-theme="dark"] [style*="background: #dfe5e7"],
html[data-theme="dark"] [style*="background-color:#dfe5e7"],
html[data-theme="dark"] [style*="background-color: #dfe5e7"]{ background-color:var(--surface-2)!important }
html[data-theme="dark"] [style*="background:#ddd"],
html[data-theme="dark"] [style*="background: #ddd"],
html[data-theme="dark"] [style*="background-color:#ddd"],
html[data-theme="dark"] [style*="background-color: #ddd"],
html[data-theme="dark"] [style*="background:#bbb"],
html[data-theme="dark"] [style*="background: #bbb"],
html[data-theme="dark"] [style*="background-color:#bbb"],
html[data-theme="dark"] [style*="background-color: #bbb"]{ background-color:var(--line)!important }
html[data-theme="dark"] [style*="background:#e8f5e9"],
html[data-theme="dark"] [style*="background: #e8f5e9"],
html[data-theme="dark"] [style*="background-color:#e8f5e9"],
html[data-theme="dark"] [style*="background-color: #e8f5e9"],
html[data-theme="dark"] [style*="background:#c8e6c9"],
html[data-theme="dark"] [style*="background: #c8e6c9"],
html[data-theme="dark"] [style*="background-color:#c8e6c9"],
html[data-theme="dark"] [style*="background-color: #c8e6c9"],
html[data-theme="dark"] [style*="background:#f0faf4"],
html[data-theme="dark"] [style*="background: #f0faf4"],
html[data-theme="dark"] [style*="background-color:#f0faf4"],
html[data-theme="dark"] [style*="background-color: #f0faf4"],
html[data-theme="dark"] [style*="background:#dcf8c6"],
html[data-theme="dark"] [style*="background: #dcf8c6"],
html[data-theme="dark"] [style*="background-color:#dcf8c6"],
html[data-theme="dark"] [style*="background-color: #dcf8c6"],
html[data-theme="dark"] [style*="background:#e0f2f1"],
html[data-theme="dark"] [style*="background: #e0f2f1"],
html[data-theme="dark"] [style*="background-color:#e0f2f1"],
html[data-theme="dark"] [style*="background-color: #e0f2f1"]{ background-color:var(--pos-soft)!important }
html[data-theme="dark"] [style*="background:#e3f2fd"],
html[data-theme="dark"] [style*="background: #e3f2fd"],
html[data-theme="dark"] [style*="background-color:#e3f2fd"],
html[data-theme="dark"] [style*="background-color: #e3f2fd"],
html[data-theme="dark"] [style*="background:#bbdefb"],
html[data-theme="dark"] [style*="background: #bbdefb"],
html[data-theme="dark"] [style*="background-color:#bbdefb"],
html[data-theme="dark"] [style*="background-color: #bbdefb"],
html[data-theme="dark"] [style*="background:#e8f4fd"],
html[data-theme="dark"] [style*="background: #e8f4fd"],
html[data-theme="dark"] [style*="background-color:#e8f4fd"],
html[data-theme="dark"] [style*="background-color: #e8f4fd"],
html[data-theme="dark"] [style*="background:#e1f3fb"],
html[data-theme="dark"] [style*="background: #e1f3fb"],
html[data-theme="dark"] [style*="background-color:#e1f3fb"],
html[data-theme="dark"] [style*="background-color: #e1f3fb"],
html[data-theme="dark"] [style*="background:#f0f7ff"],
html[data-theme="dark"] [style*="background: #f0f7ff"],
html[data-theme="dark"] [style*="background-color:#f0f7ff"],
html[data-theme="dark"] [style*="background-color: #f0f7ff"],
html[data-theme="dark"] [style*="background:#f5f9ff"],
html[data-theme="dark"] [style*="background: #f5f9ff"],
html[data-theme="dark"] [style*="background-color:#f5f9ff"],
html[data-theme="dark"] [style*="background-color: #f5f9ff"],
html[data-theme="dark"] [style*="background:#f0f7f7"],
html[data-theme="dark"] [style*="background: #f0f7f7"],
html[data-theme="dark"] [style*="background-color:#f0f7f7"],
html[data-theme="dark"] [style*="background-color: #f0f7f7"]{ background-color:var(--accent-soft)!important }
html[data-theme="dark"] [style*="background:#fff8e1"],
html[data-theme="dark"] [style*="background: #fff8e1"],
html[data-theme="dark"] [style*="background-color:#fff8e1"],
html[data-theme="dark"] [style*="background-color: #fff8e1"],
html[data-theme="dark"] [style*="background:#fff3cd"],
html[data-theme="dark"] [style*="background: #fff3cd"],
html[data-theme="dark"] [style*="background-color:#fff3cd"],
html[data-theme="dark"] [style*="background-color: #fff3cd"],
html[data-theme="dark"] [style*="background:#fff3e0"],
html[data-theme="dark"] [style*="background: #fff3e0"],
html[data-theme="dark"] [style*="background-color:#fff3e0"],
html[data-theme="dark"] [style*="background-color: #fff3e0"]{ background-color:var(--warn-soft)!important }
html[data-theme="dark"] [style*="background:#fee"],
html[data-theme="dark"] [style*="background: #fee"],
html[data-theme="dark"] [style*="background-color:#fee"],
html[data-theme="dark"] [style*="background-color: #fee"]{ background-color:var(--neg-soft)!important }
html[data-theme="dark"] [style*="color:#999"],
html[data-theme="dark"] [style*="color: #999"],
html[data-theme="dark"] [style*="color:#aaa"],
html[data-theme="dark"] [style*="color: #aaa"],
html[data-theme="dark"] [style*="color:#ccc"],
html[data-theme="dark"] [style*="color: #ccc"],
html[data-theme="dark"] [style*="color:#888"],
html[data-theme="dark"] [style*="color: #888"]{ color:var(--text-3)!important }
html[data-theme="dark"] [style*="color:#666"],
html[data-theme="dark"] [style*="color: #666"],
html[data-theme="dark"] [style*="color:#777"],
html[data-theme="dark"] [style*="color: #777"],
html[data-theme="dark"] [style*="color:#555"],
html[data-theme="dark"] [style*="color: #555"]{ color:var(--text-2)!important }
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"]{ color:var(--text)!important }
html[data-theme="dark"] [style*="color:#dc3545"],
html[data-theme="dark"] [style*="color: #dc3545"],
html[data-theme="dark"] [style*="color:#e53935"],
html[data-theme="dark"] [style*="color: #e53935"],
html[data-theme="dark"] [style*="color:#c62828"],
html[data-theme="dark"] [style*="color: #c62828"]{ color:var(--neg)!important }
html[data-theme="dark"] [style*="color:#856404"],
html[data-theme="dark"] [style*="color: #856404"],
html[data-theme="dark"] [style*="color:#795548"],
html[data-theme="dark"] [style*="color: #795548"]{ color:var(--warn)!important }
html[data-theme="dark"] [style*="color:#2d7a7a"],
html[data-theme="dark"] [style*="color: #2d7a7a"]{ color:var(--accent-ink)!important }

/* bordas fixas claras */
html[data-theme="dark"] [style*="border:1px solid #ddd"],
html[data-theme="dark"] [style*="border: 1px solid #ddd"],
html[data-theme="dark"] [style*="border:1px solid #eee"],
html[data-theme="dark"] [style*="border: 1px solid #eee"],
html[data-theme="dark"] [style*="border-bottom:1px solid #eee"],
html[data-theme="dark"] [style*="border-top:1px solid #eee"]{ border-color:var(--line)!important }

/* a camada mobile tambem tem cores fixas (mobile.css e compartilhado com
   producao, entao o conserto vive aqui) */
html[data-theme="dark"] body.mobile-ui .mb-mes-det{ background:var(--surface-2) }
html[data-theme="dark"] body.mobile-ui .mb-mes-card__mes{ color:var(--accent-ink) }
html[data-theme="dark"] body.mobile-ui .mb-chip{ background:var(--surface); border-color:var(--line); color:var(--text) }
html[data-theme="dark"] body.mobile-ui .mb-chip--on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink) }
html[data-theme="dark"] body.mobile-ui .mb-navlist__item:active{ background:var(--surface-2) }
html[data-theme="dark"] body.mobile-ui .mb-ptr{ background:var(--surface); color:var(--text) }
html[data-theme="dark"] body.mobile-ui .select2-container--default .select2-selection__choice,
html[data-theme="dark"] body.mobile-ui .select2-container--default .select2-selection__choice__remove{ color:var(--accent-ink) }
html[data-theme="dark"] body.mobile-ui .mb-cards,
html[data-theme="dark"] body.mobile-ui .mb-card-title{ color:var(--text) }


/* o mobile.css corta o valor com reticencias em 19px fixos; com 7 digitos
   "R$ 1.492.237,74" nao cabe. Deixa encolher em vez de truncar. */
@media (max-width:900px){
  body.mobile-ui .indicador-valor,
  body.mobile-ui .analitica-card-value{
    font-size:clamp(14px, 4.4vw, 19px); text-overflow:clip;
  }
  body.mobile-ui .indicadores-grid > .indicador-card:last-child .indicador-valor{
    font-size:clamp(20px, 7vw, 30px);
  }
}

/* a tabela de despesas dentro do cartao de mes nao entra no varrerTabelas do
   app, entao no celular ela vazava para fora da tela. Rola dentro do proprio
   cartao, em vez de empurrar a pagina. */
@media (max-width:900px){
  body.mobile-ui .mb-mes-det{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  body.mobile-ui .mb-mes-det > table{ min-width:max-content }
  body.mobile-ui .mb-mes-det th,
  body.mobile-ui .mb-mes-det td{ white-space:nowrap; padding:8px 10px!important }
  /* a coluna de data vinha em cinza fraco demais sobre o escuro */
  html[data-theme="dark"] body.mobile-ui .mb-mes-det td:first-child,
  html[data-theme="dark"] body.mobile-ui .mb-mes-det td:first-child *{ color:var(--text-2)!important }
}

/* iOS: campo com fonte < 16px faz o Safari tentar dar zoom no foco; com
   user-scalable=no no viewport isso vira comportamento errático de teclado.
   16px e o minimo seguro. Vale para o login e para qualquer campo. */
#telaLogin input[type=text],
#telaLogin input[type=password]{ font-size:16px!important; line-height:1.3 }
@media (max-width:900px){
  input[type=text],input[type=password],input[type=email],input[type=tel],
  input[type=number],input[type=date],select,textarea{ font-size:16px }
}

/* =========================================================== link do motor de reservas */
.bs-btn-link-cliente{
  background:var(--sand-soft); border:1px solid var(--sand); color:#7A5218; font-weight:600;
}
html[data-theme="dark"] .bs-btn-link-cliente{ color:var(--sand) }
.bs-btn-link-cliente:hover{ background:var(--sand); color:#2A1A08; border-color:var(--sand) }

.bs-poplink{
  position:fixed; z-index:4300; width:320px; max-width:calc(100vw - 24px);
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:16px; display:none; color:var(--text);
}
.bs-poplink.aberto{ display:block }
.bs-poplink-tit{ font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3); font-weight:600; margin-bottom:8px }
.bs-poplink-url{
  font-family:var(--mono); font-size:12px; color:var(--accent-ink); background:var(--accent-soft);
  border:1px solid var(--accent); border-radius:9px; padding:9px 11px; word-break:break-all;
}
.bs-poplink-nota{ font-size:12.5px; color:var(--text-2); margin:10px 0 12px }
.bs-poplink-acoes{ display:flex; gap:8px; flex-wrap:wrap }
.bs-poplink-acoes .btn{ flex:1 1 auto; justify-content:center; min-height:40px }

.bs-aviso{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:5000;
  background:var(--ink); color:#EAF5F2; padding:11px 18px; border-radius:999px;
  font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg); transition:opacity .3s;
}
.bs-aviso.sai{ opacity:0 }

/* reserva que entrou pelo site: contorno claro + selo, sem trocar a cor do canal */
.cal-bar.bs-do-site{
  box-shadow:0 0 0 2px var(--nav-glow), 0 1px 3px rgba(0,0,0,.2)!important;
}
.cal-bar.bs-do-site::after{
  content:"◆"; margin-left:auto; padding-left:6px; font-size:9px; opacity:.95; flex:0 0 auto;
}
.bs-leg-site{ display:inline-flex; align-items:center; gap:6px; margin-left:4px }
.bs-leg-cor{
  display:inline-block; width:13px; height:13px; border-radius:4px;
  background:var(--surface-2); box-shadow:0 0 0 2px var(--nav-glow);
}
@media (max-width:900px){
  body.mobile-ui .bs-poplink{ left:12px!important; right:12px; width:auto }
}

/* =========================================================== grade de precos
   As celulas do calendario de precos tem cor fixa em REGRA DE CLASSE
   (.preco-box.weekend, .no-val, .today...), nao em style inline — por isso a
   camada de reparo do modo escuro, que casa em [style*=], nao alcancava elas.
   Aqui vao os overrides por classe, com especificidade suficiente. */
html[data-theme="dark"] .preco-box{ background:var(--surface); border-color:var(--line-strong); color:var(--text) }
html[data-theme="dark"] .preco-box.weekend{ background:var(--surface-2); color:var(--text) }
html[data-theme="dark"] .preco-box.today{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink) }
html[data-theme="dark"] .preco-box.no-val{ color:var(--text-3) }
html[data-theme="dark"] .preco-box.editing,
html[data-theme="dark"] .preco-box.pending{ background:var(--warn-soft)!important; border-color:var(--warn)!important; color:var(--warn) }
html[data-theme="dark"] .preco-box:hover{ background:var(--accent-soft); border-color:var(--accent) }
html[data-theme="dark"] .preco-box input{ color:var(--text) }
html[data-theme="dark"] .preco-stub{ background:var(--surface-2); color:var(--text) }
html[data-theme="dark"] .preco-date-label{ color:var(--text-2) }
html[data-theme="dark"] .preco-date-label.weekend{ color:var(--text-3) }
html[data-theme="dark"] .preco-date-label.today{ color:var(--accent-ink); font-weight:700 }
html[data-theme="dark"] .preco-date-col.weekend{ background:var(--surface-2) }

/* NAO mexer na largura da .preco-box: as linhas de min-noites e preco alinham
   com o cabecalho de datas justamente porque a celula tem largura FIXA igual a
   da coluna. Deixar automatica desalinha a grade inteira. */

/* =========================================================== rateio de despesa */
.bs-rateio{ margin:-6px 0 14px }
.bs-rateio-liga{
  display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600;
  color:var(--text-2); cursor:pointer; padding:9px 11px; border:1px dashed var(--line-strong);
  border-radius:11px; background:var(--surface-2);
}
.bs-rateio-liga input{ width:17px; height:17px; accent-color:var(--accent) }
.bs-rateio.aberto .bs-rateio-liga{ border-style:solid; border-color:var(--accent); color:var(--accent-ink) }
.bs-rateio-corpo{ display:none; margin-top:10px }
.bs-rateio.aberto .bs-rateio-corpo{ display:block }
.bs-rateio-lista{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:7px;
  max-height:190px; overflow:auto; padding:11px; border:1px solid var(--line);
  border-radius:11px; background:var(--surface);
}
.bs-rateio-item{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); cursor:pointer }
.bs-rateio-item input{ width:16px; height:16px; accent-color:var(--accent) }
.bs-rateio-conta{
  margin-top:9px; font-family:var(--mono); font-size:12.5px; color:var(--text-2);
  background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent-ink);
  border-radius:9px; padding:9px 11px;
}
.bs-rateio-conta b{ font-weight:700 }
@media (max-width:900px){
  body.mobile-ui .bs-rateio-lista{ grid-template-columns:1fr 1fr; max-height:150px }
}

/* =========================================================== fechamento do mes */
.bs-fech{ padding:0; margin-bottom:18px }
.bs-fech .bs-cardhead{ flex-wrap:wrap; gap:10px }
.bs-fech-nav{ display:flex; align-items:center; gap:8px; margin-left:auto }
.bs-fech-nav button{
  width:30px; height:30px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); cursor:pointer; font-size:15px; line-height:1;
}
.bs-fech-nav button:hover{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink) }
.bs-fech-nav span{ font-family:var(--display); font-weight:700; font-size:14px;
  text-transform:capitalize; min-width:120px; text-align:center; color:var(--text) }
.bs-fech .bs-pill{ margin-left:0 }

.bs-fech-lista{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:8px; padding:16px 20px }
.bs-fech-item{
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"un val" "rot val";
  gap:1px 12px; align-items:center; padding:10px 13px;
  border:1px solid var(--line); border-radius:11px; background:var(--surface-2);
}
.bs-fech-un{ grid-area:un; font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--text-3) }
.bs-fech-rot{ grid-area:rot; font-size:13.5px; font-weight:600; color:var(--text) }
.bs-fech-val{ grid-area:val; font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums }
.bs-fech-item.ok .bs-fech-val{ color:var(--pos) }
.bs-fech-item.falta{
  border-color:var(--neg); background:var(--neg-soft); cursor:pointer;
  transition:transform .12s, box-shadow .15s;
}
.bs-fech-item.falta:hover{ transform:translateY(-2px); box-shadow:var(--shadow) }
.bs-fech-item.falta .bs-fech-rot{ color:var(--neg) }
.bs-fech-item.falta .bs-fech-val{ color:var(--neg); font-weight:600; font-size:11.5px }
.bs-fech-item.falta .bs-fech-un{ color:var(--neg) }
.bs-fech-rodape{ padding:11px 20px; border-top:1px solid var(--line);
  font-size:13px; color:var(--text-2) }
.bs-fech-rodape b{ font-family:var(--mono); color:var(--text) }
@media (max-width:900px){
  body.mobile-ui .bs-fech-lista{ grid-template-columns:1fr; padding:12px 14px }
  body.mobile-ui .bs-fech-nav{ width:100%; justify-content:space-between; margin-left:0 }
}

/* =========================================================== rolagem da grade de precos
   O .preco-grid ja tem overflow-x:auto e as linhas tem min-width:max-content,
   mas cada .preco-apt-block vinha com overflow:hidden — ele RECORTAVA as linhas
   antes de a rolagem acontecer. Por isso o mes cortava e nao andava para a
   direita. Aqui o bloco passa a acompanhar a largura das linhas. */
.preco-apt-block{ overflow:visible; width:max-content; min-width:100% }
.preco-grid{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px }
/* a coluna da esquerda fica fixa enquanto rola */
.preco-stub{ position:sticky; left:0; z-index:3; background:var(--surface) }
.preco-row.row-header .preco-stub{ background:var(--surface-2) }
html[data-theme="dark"] .preco-stub{ background:var(--surface) }
html[data-theme="dark"] .preco-row.row-header .preco-stub{ background:var(--surface-2) }

/* mesma garantia no calendario de reservas */
.cal-container{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.cal-grid{ min-width:max-content }

/* =========================================================== recebíveis */
.bs-rec{ padding:0 }
.bs-rec .table-container{ overflow-x:auto }
.bs-rec-tab th.bs-n, .bs-rec-tab td.bs-n{ text-align:right }
.bs-rec-tab td.bs-n{ font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums }
.bs-rec-tab td.bs-neg{ color:var(--neg) }
.bs-rec-tab tr.ok td{ background:var(--pos-soft) }
.bs-rec-tab tr.diverge td{ background:var(--warn-soft) }
.bs-rec-val{
  width:110px; text-align:right; font-family:var(--mono); font-size:12.5px;
  padding:6px 9px!important; border-radius:8px!important;
}
.bs-rec-ok{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px;
  color:var(--text-2); cursor:pointer; white-space:nowrap }
.bs-rec-ok input{ width:18px; height:18px; accent-color:var(--pos) }
.bs-difere{ color:var(--warn); font-weight:600 }
.bs-rec-rodape{
  display:flex; gap:26px; flex-wrap:wrap; padding:13px 20px;
  border-top:1px solid var(--line); font-size:13px; color:var(--text-2);
}
.bs-rec-rodape b{ font-family:var(--mono); color:var(--text) }
.bs-rec-rodape b.pos{ color:var(--pos) } .bs-rec-rodape b.neg{ color:var(--neg) }
@media (max-width:900px){
  body.mobile-ui .bs-rec-rodape{ flex-direction:column; gap:7px }
  body.mobile-ui .bs-rec-val{ width:92px }
}
.bs-rec-nota{ padding:11px 20px; border-bottom:1px solid var(--line); background:var(--surface-2);
  font-size:12.5px; color:var(--text-2); line-height:1.5 }
.bs-rec-nota b{ color:var(--text) }
.bs-porsaida{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; padding:2px 7px;
  border-radius:999px; background:var(--sand-soft); color:#7A5218; font-weight:600; white-space:nowrap }
html[data-theme="dark"] .bs-porsaida{ color:var(--sand) }