/* === El Misti Occupancy Dashboard v11 === */
:root {
  --misti-green: #1B5E20;
  --misti-green-light: #2E7D32;
  --misti-green-bg: #E8F5E9;
  --misti-dark: #0D2818;
  --bg: #f5f7f5;
  --card-bg: #fff;
  --text: #1a2e1a;
  --muted: #5f7060;
  --border: #d5e0d5;
  --green: #2E7D32;
  --red: #C62828;
  --blue: #1565C0;
  --orange: #F9A825;
  --teal: #00897B;
  --shadow: 0 1px 3px rgba(0,40,0,0.08);
  --r: 8px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.3}

/* HEADER */
.header{background:var(--misti-dark);color:#fff;padding:6px 16px;display:flex;align-items:center}
.header-logo{height:28px;width:auto}
.header-title-center{flex:1;text-align:center;font-size:14px;font-weight:600;letter-spacing:.5px}
.last-update{font-size:10px;opacity:.6}

/* ABAS */
.tabs-bar{display:flex;background:var(--card-bg);border-bottom:2px solid var(--misti-green);padding:0 12px}
.tab-btn{padding:8px 20px;border:none;background:none;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .2s}
.tab-btn.active{color:var(--misti-green);border-bottom-color:var(--misti-green)}
.tab-btn:hover:not(.active){color:var(--text)}

/* FILTROS */
.filters-bar{background:var(--card-bg);border-bottom:1px solid var(--border);padding:6px 12px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.filters-bar select,.filters-bar .date-input{padding:4px 6px;border:1px solid var(--border);border-radius:4px;font-size:11px;background:#fff;cursor:pointer}
.filters-bar select:focus,.filters-bar input:focus{border-color:var(--misti-green);outline:none;box-shadow:0 0 0 2px rgba(27,94,32,.15)}
.filters-bar .date-input{width:130px}
.date-label{font-size:10px;color:var(--muted);font-weight:600}

/* SEARCH-SELECT */
.search-select{position:relative;display:inline-block}
.ss-box{display:flex;flex-wrap:wrap;gap:3px;padding:3px 5px;border:1px solid var(--border);border-radius:4px;background:#fff;min-width:150px;max-width:250px;min-height:24px;cursor:text;align-items:center}
.ss-box:focus-within{border-color:var(--misti-green);box-shadow:0 0 0 2px rgba(27,94,32,.15)}
.ss-tag{display:flex;align-items:center;gap:2px;padding:1px 5px;background:var(--misti-green);color:#fff;border-radius:3px;font-size:9px;font-weight:600;white-space:nowrap}
.ss-tag-x{cursor:pointer;font-size:11px;opacity:.8}.ss-tag-x:hover{opacity:1}
.ss-search{border:none;outline:none;font-size:11px;flex:1;min-width:60px;background:transparent}
.ss-search::placeholder{color:var(--muted);font-size:10px}
.ss-dropdown{position:absolute;top:100%;left:0;width:250px;max-height:220px;overflow-y:auto;background:#fff;border:1px solid var(--border);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:100;display:none}
.ss-option{padding:5px 8px;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:6px}
.ss-option:hover{background:var(--misti-green-bg)}
.ss-check{width:14px;height:14px;border:1.5px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0}
.ss-option.selected .ss-check{background:var(--misti-green);border-color:var(--misti-green);color:#fff}
.ss-clear{padding:5px 8px;font-size:10px;color:var(--red);cursor:pointer;font-weight:600;border-bottom:1px solid var(--border)}
.ss-clear:hover{background:rgba(198,40,40,.06)}

/* FAIXA DE CONTEXTO — qual periodo de fato respondeu.
   Sem isso, o numero na tela parece "o ano inteiro" quando nao e. */
.contexto{margin:6px 12px 0;padding:6px 10px;background:#EEF4EE;border-left:3px solid var(--misti-green-light);
  border-radius:4px;font-size:10.5px;color:var(--text);line-height:1.45}
.contexto strong{color:var(--misti-dark)}
.contexto-inline{margin:0 0 8px}
.ctx-alerta{color:#8a5a00;background:rgba(249,168,37,.15);padding:1px 5px;border-radius:3px}

/* TARJAS DE SAUDE DA FONTE */
.saude-bar{padding:8px 12px 0;display:flex;flex-direction:column;gap:6px}
.tarja{padding:8px 11px;border-radius:6px;font-size:11px;line-height:1.5;border-left:3px solid}
.tarja-alerta{background:rgba(198,40,40,.07);border-left-color:var(--red);color:#7a1c1c}
.tarja-alerta strong{color:var(--red)}
.tarja-ok{background:rgba(46,125,50,.06);border-left-color:var(--green);color:var(--text)}
.tarja-info{background:rgba(21,101,192,.06);border-left-color:var(--blue);color:var(--text)}

/* TOP SECTION (KPIs + Chart) */
.top-section{display:flex;gap:10px;padding:10px 12px}
.kpi-col{display:flex;flex-direction:column;gap:5px;width:186px;flex-shrink:0}
.kpi-card{background:var(--card-bg);border-radius:var(--r);padding:8px 10px;box-shadow:var(--shadow);border-left:3px solid var(--misti-green)}
.kpi-label{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.kpi-value{font-size:17px;font-weight:700;color:var(--misti-dark);display:block;line-height:1.2}
/* Receita e diaria podem trazer duas moedas — cabem uma sob a outra. */
.kpi-value.kpi-money{font-size:14px;line-height:1.35}
.moeda-brl,.moeda-usd{display:block}
.moeda-usd{color:var(--blue)}
.moeda-sep{display:none}
.kpi-delta{font-size:10px;font-weight:600}
/* Variacao por moeda: uma linha para o real, outra para o dolar. Cada uma
   comparada com ela mesma no ano anterior. */
.kpi-delta-moeda{display:flex;flex-direction:column;gap:1px;margin-top:2px}
.delta-moeda{font-size:10px;font-weight:700}
.delta-moeda.positive{color:var(--green)}
.delta-moeda.negative{color:var(--red)}
.delta-moeda.neutral{color:var(--muted)}
.delta-nota{font-size:9px;color:var(--muted);font-weight:500}
.kpi-delta.positive{color:var(--green)}.kpi-delta.negative{color:var(--red)}.kpi-delta.neutral{color:var(--muted)}
.chart-col{flex:1;background:var(--card-bg);border-radius:var(--r);box-shadow:var(--shadow);padding:8px 12px;display:flex;flex-direction:column;min-width:0}
.chart-title{font-size:12px;font-weight:700;color:var(--misti-dark);margin-bottom:2px}
.chart-wrap{flex:1;position:relative;min-height:180px}

/* SECTION */
.section-card{background:var(--card-bg);border-radius:var(--r);padding:10px 14px;margin:0 12px 10px;box-shadow:var(--shadow)}
.section-title{font-size:12px;font-weight:700;color:var(--misti-dark);margin-bottom:6px}

/* QUADRANTES — Site, OTA, Diretas, TOTAL */
.channel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.channel-card{border-radius:6px;padding:10px 12px;border-left:3px solid var(--border)}
.channel-card.site{border-left-color:var(--green);background:var(--misti-green-bg)}
.channel-card.ota{border-left-color:var(--red);background:rgba(198,40,40,.04)}
.channel-card.direct{border-left-color:var(--teal);background:rgba(0,137,123,.06);border-left-width:4px}
/* O TOTAL fecha a leitura: e a soma de OTA com Diretas. */
.channel-card.total{border-left-color:var(--misti-dark);background:#EDF1ED;border-left-width:4px}
.ch-title{font-size:12px;font-weight:700;color:var(--misti-dark)}
.ch-desc{font-size:9.5px;color:var(--muted);line-height:1.4;margin:2px 0 6px;padding-bottom:5px;border-bottom:1px dashed var(--border)}
.ch-row{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);margin-top:3px;align-items:baseline}
.ch-value{font-weight:600;color:var(--text);text-align:right}
.ch-value .moeda-brl,.ch-value .moeda-usd{display:block}

/* TABLE */
.table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.granularity-btns{display:flex;gap:2px}
.gran-btn{padding:3px 10px;border:1px solid var(--border);border-radius:4px;background:#fff;font-size:10px;font-weight:500;cursor:pointer}
.gran-btn.active{background:var(--misti-green);color:#fff;border-color:var(--misti-green)}
.gran-btn:hover:not(.active){border-color:var(--misti-green);color:var(--misti-green)}
.table-scroll{overflow-x:auto;max-height:320px;overflow-y:auto}
.data-table{width:100%;border-collapse:collapse;font-size:11px}
.data-table th{background:var(--misti-green-bg);padding:6px 8px;text-align:left;font-weight:700;color:var(--misti-dark);font-size:10px;text-transform:uppercase;letter-spacing:.3px;border-bottom:2px solid var(--misti-green);white-space:nowrap;position:sticky;top:0;z-index:1}
.data-table td{padding:5px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
.data-table tr:hover td{background:var(--misti-green-bg)}
.col-year-current{font-weight:600;color:var(--misti-dark)}
.col-year-compare{color:var(--muted)}
.data-table tr.rev-1 td{background:rgba(46,125,50,0.12)}
.data-table tr.rev-2 td{background:rgba(46,125,50,0.09)}
.data-table tr.rev-3 td{background:rgba(46,125,50,0.07)}
.data-table tr.rev-4 td{background:rgba(46,125,50,0.05)}
.data-table tr.rev-5 td{background:rgba(46,125,50,0.03)}
.data-table tr.rev-6 td{background:rgba(46,125,50,0.01)}

/* INSIGHTS */
.insights-list{display:flex;flex-direction:column;gap:6px}
.insight-card{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:6px;border-left:3px solid var(--border)}
.insight-card.positivo{border-left-color:var(--green);background:rgba(46,125,50,.04)}
.insight-card.negativo{border-left-color:var(--red);background:rgba(198,40,40,.03)}
.insight-card.neutro{border-left-color:var(--blue);background:rgba(21,101,192,.03)}
.insight-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;font-weight:700}
.insight-card.positivo .insight-icon{background:rgba(46,125,50,.15);color:var(--green)}
.insight-card.negativo .insight-icon{background:rgba(198,40,40,.15);color:var(--red)}
.insight-card.neutro .insight-icon{background:rgba(21,101,192,.15);color:var(--blue)}
/* Cada leitura tem tres partes: o numero, o que ele significa, e o que fazer. */
.insight-body{flex:1;min-width:0}
.insight-title{font-size:12.5px;font-weight:700;color:var(--misti-dark);margin-bottom:2px}
.insight-desc{font-size:11px;color:var(--text);line-height:1.5}
.insight-leitura{font-size:11px;color:var(--muted);line-height:1.5;margin-top:4px}
.insight-suggestion{font-size:11px;color:var(--misti-dark);line-height:1.5;margin-top:5px;
  padding:5px 8px;background:rgba(46,125,50,.08);border-radius:4px}
.insight-suggestion strong{color:var(--misti-green)}

/* ==================== CANCELAMENTOS TAB ==================== */
.cn-kpi{border-left-color:var(--red)}

/* ==================== CHATBOT IA TAB ==================== */
.cb-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;padding:10px 12px}
.cb-kpi{background:var(--card-bg);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);border-top:3px solid var(--misti-green)}
.cb-kpi-value{font-size:26px;font-weight:700;color:var(--misti-dark);display:block}
.cb-kpi-label{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:600;letter-spacing:.3px}
.cb-chart-wrap{position:relative;height:200px}
.cb-chart-wrap-sm{position:relative;height:180px}
.cb-chart-wrap-pie{width:160px;height:160px;flex-shrink:0}
.cb-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 12px 10px}
.cb-mode-grid{display:flex;gap:16px;align-items:center}
.cb-taxa{flex:1}
.cb-taxa-title{font-size:12px;font-weight:700;color:var(--misti-dark);margin-bottom:8px;border-bottom:2px solid var(--misti-green);padding-bottom:4px}
.cb-taxa-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);font-size:11px}
.cb-taxa-label{color:var(--muted)}
.cb-taxa-value{font-weight:700;color:var(--misti-dark)}
.status-pago{color:var(--green);font-weight:600;font-size:10px}
.status-pendente{color:var(--orange);font-weight:600;font-size:10px}
.valor-missing{color:var(--muted);font-style:italic;font-size:10px}

.loading{text-align:center;padding:16px;color:var(--muted);font-size:11px}
.cb-kpi-value.is-loading{font-size:14px;color:var(--muted);font-weight:500}
.cb-kpi-value.is-error{font-size:16px;color:var(--red)}
.chart-loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;background:rgba(255,255,255,.7);border-radius:var(--r)}

@media(max-width:900px){.cb-grid-2{grid-template-columns:1fr}.cb-mode-grid{flex-direction:column}}
@media(max-width:768px){
  .top-section{flex-direction:column;padding:6px 8px}
  .kpi-col{width:100%;flex-direction:row;flex-wrap:wrap}
  .kpi-col .kpi-card{flex:1;min-width:100px}
  .section-card{margin:0 6px 6px;padding:8px}
}

/* ==================== HÓSPEDES RECORRENTES ==================== */
.rc-kpi{border-left-color:var(--teal)}

/* Tempos do ciclo: mediana e média lado a lado. Quando as duas se afastam,
   é sinal de dois públicos diferentes escondidos no mesmo número. */
.rc-tempos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.rc-tempo{background:#F4F8F4;border-left:3px solid var(--teal);border-radius:6px;padding:10px 12px}
.rc-tempo-titulo{font-size:11px;font-weight:700;color:var(--misti-dark);text-transform:uppercase;letter-spacing:.3px}
.rc-tempo-par{display:flex;gap:18px;align-items:baseline;margin:6px 0 4px}
.rc-tempo-num{font-size:20px;font-weight:700;color:var(--misti-dark)}
.rc-tempo-num.rc-suave{font-size:15px;color:var(--muted);font-weight:600}
.rc-tempo-num .moeda-brl,.rc-tempo-num .moeda-usd{font-size:15px;display:block}
.rc-tempo-un{font-size:10px;color:var(--muted);margin-left:2px;font-weight:600}
.rc-tempo-rot{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-top:1px}
.rc-tempo-exp{font-size:10px;color:var(--muted);line-height:1.45;border-top:1px dashed var(--border);padding-top:5px;margin-top:4px}
.rc-tempo-vazio{font-size:11px;color:var(--muted);font-style:italic;padding:8px 0}

/* O TOTAL fecha a pirâmide de fidelização. */
.channel-card.novo{border-left-color:var(--blue);background:rgba(21,101,192,.04)}

/* Como ler os números — recolhido por padrão, para não competir com o dado. */
.glossario{margin:6px 12px 0;background:var(--card-bg);border-radius:var(--r);box-shadow:var(--shadow);
  border-left:3px solid var(--misti-green-light)}
.glossario summary{padding:8px 12px;font-size:11.5px;font-weight:700;color:var(--misti-dark);
  cursor:pointer;user-select:none;list-style:none}
.glossario summary::-webkit-details-marker{display:none}
.glossario summary::before{content:'▸ ';color:var(--misti-green-light)}
.glossario[open] summary::before{content:'▾ '}
.glossario summary:hover{background:var(--misti-green-bg)}
.glossario-corpo{padding:2px 14px 12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:10px}
.gl-item{font-size:11px;color:var(--text);line-height:1.55;padding:7px 10px;background:#F7FAF7;border-radius:5px}
.gl-item b{color:var(--misti-dark)}
.gl-nota{display:block;margin-top:4px;color:var(--muted);font-size:10.5px}

/* === Tabela de Recorrencia: dois anos, uma linha cada ===================
   O ano de comparacao vem logo abaixo do ano corrente, nas mesmas colunas, e
   a comparacao se le na vertical — sem rolagem horizontal.

   A primeira versao usava variaveis de tema escuro (--text-muted,
   --surface-2) que nao existem aqui: caiam no fallback e pintavam texto
   cinza sobre fundo quase preto, num painel claro. Ilegivel. Agora usa as
   cores do tema e separa os dois anos por FUNDO, nao por peso da fonte. */
.linha-ano-atual > td {
  border-bottom: none;
  padding-bottom: 3px;
  background: var(--card-bg);
}
.linha-ano-anterior > td {
  border-top: none;
  padding-top: 3px;
  padding-bottom: 9px;
  /* Quem separa os dois anos e o FUNDO e a etiqueta colorida, nao o peso nem
     o tamanho da fonte: numero de comparacao precisa ser lido, nao adivinhado.
     A versao anterior encolhia a fonte e clareava o texto, e o Pedro nao
     conseguia distinguir 2025 de 2026 na tela. */
  background: #e7ede7;
  color: var(--text);
}
/* A proxima dupla comeca com uma linha divisoria de verdade. */
.linha-ano-anterior + .linha-ano-atual > td { border-top: 2px solid var(--border); }

/* A etiqueta do ano: verde no ano corrente, neutra no de comparacao. */
.tag-ano {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 2px 7px;
  border-radius: 10px;
  vertical-align: middle;
  background: var(--misti-green-bg);
  color: var(--misti-green);
  border: 1px solid #c7e3c9;
}
.linha-ano-anterior .tag-ano {
  background: #e2e8e2;
  color: #556555;
  border-color: #cfd8cf;
}

/* === Quadrantes novos: as portas do canal direto =======================
   Recepcao, Central e Recovery sao SUBCONJUNTOS de "Reservas Diretas", e
   Somente Site tambem. Somar os sete da mais que a casa — quem fecha o total
   e OTA + Diretas. A borda mais fina e o recuo dizem isso sem texto: sao
   detalhamentos, nao fatias irmas. */
.channel-card.recepcao { border-left-color: #6d8f6f; background: rgba(109,143,111,.05); }
.channel-card.central  { border-left-color: #7a8fb0; background: rgba(122,143,176,.06); }
.channel-card.recovery { border-left-color: #b08a5a; background: rgba(176,138,90,.06); }
.channel-card.recepcao,
.channel-card.central,
.channel-card.recovery,
.channel-card.site { border-left-width: 2px; }
.channel-card.recepcao .ch-title::before,
.channel-card.central .ch-title::before,
.channel-card.recovery .ch-title::before,
.channel-card.site .ch-title::before {
  content: '└ ';
  opacity: .45;
  font-weight: 400;
}

/* Legenda acima dos quadrantes: diz a regra de soma antes que alguem some
   errado. Sem ela, "Somente Site + Somente OTA + Diretas + ..." parece que
   deveria fechar o total, e nao fecha. */
.legenda-quadrantes {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted, #8a8a8a);
}
.legenda-quadrantes b { color: var(--text, #e6e6e6); font-weight: 600; }
.marca-sub { opacity: .6; }

/* Rodape: com que frequencia cada fonte muda. Quem le um painel precisa saber
   ha quanto tempo aquele numero foi conferido — senao trata dado de 3 horas
   atras como se fosse deste minuto. */
.rodape-frescor {
  max-width: 1600px;
  margin: 18px auto 28px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.rodape-frescor b { color: var(--text); }
.rodape-frescor .rf-nota { display: block; margin-top: 3px; opacity: .85; }
.channel-card.extensao { border-left-color: #8a7fa8; background: rgba(138,127,168,.06); border-left-width: 2px; }
.channel-card.extensao .ch-title::before { content: '└ '; opacity: .45; font-weight: 400; }

/* Botao de exportar: fica na barra de filtros, ao lado do ultimo campo, porque
   o arquivo sai com os filtros que estao na tela — a proximidade e a dica. */
.btn-exportar {
  align-self: flex-end;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--misti-green);
  background: var(--misti-green-bg);
  border: 1px solid #c7e3c9;
  border-radius: var(--r);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn-exportar:hover { background: #d9edda; border-color: var(--misti-green-light); }
.btn-exportar:disabled { opacity: .55; cursor: progress; }

/* Recado do botao de exportar. Fica ao lado dele e some sozinho: erro que so
   diz "tente de novo" nao ajuda ninguem a resolver. */
.export-msg {
  align-self: center;
  max-width: 340px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--red);
  background: rgba(198,40,40,.06);
  border: 1px solid rgba(198,40,40,.25);
  border-radius: var(--r);
  padding: 6px 10px;
}

/* Atalhos de período — mesma altura e peso dos outros campos da barra, para a
   linha de filtros continuar lendo como uma coisa só. */
.atalho-periodo {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  max-width: 190px;
}
.atalho-periodo:focus { outline: 2px solid var(--brand); outline-offset: -1px; }