/* ========================================
   Complementos — Dashboard House Imobi
   (estende style.css)
======================================== */

/* ---------- Marca ---------- */
.brand-client-plate {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.brand-client-img { height: 34px; width: auto; display: block; }
.brand-wordmark {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #FFFFFF;
  line-height: 1;
  padding-left: 0.22em; /* compensa o tracking para centralizar visualmente */
}

/* ---------- Faixa de contexto ---------- */
.panel-intro {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.pill {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 999px;
  color: #FFFFFF;
  white-space: nowrap;
}
.pill-meta { background: linear-gradient(90deg, #0F3D24, #22C55E); }
.panel-intro-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---------- Grades de KPI ---------- */
.kpi-grid-5 { grid-template-columns: repeat(5, 1fr); }
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-grid-gap { margin-top: var(--space-3); }

@media (max-width: 1100px) {
  .kpi-grid-5, .kpi-grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .kpi-grid-5, .kpi-grid-4, .kpi-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .charts-row { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .kpi-value { font-size: 21px; }
}

.kpi-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
  min-height: 16px;
}
.kpi-delta-up   { color: var(--raiz-green-500); }
.kpi-delta-down { color: var(--red); }
.kpi-delta-flat { color: var(--text-light); }
.kpi-delta-note { color: var(--text-light); font-weight: 500; font-family: var(--font-sans); }

.flip-hint {
  margin-top: var(--space-3);
  font-size: 11.5px;
  color: var(--text-light);
}

/* ---------- Flip 3D dos cards ---------- */
.kpi-flip { cursor: pointer; perspective: 1100px; user-select: none; -webkit-user-select: none; }
.kpi-flip .kpi-flip-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.45,.05,.25,1);
}
.kpi-flip.flipped .kpi-flip-inner { transform: rotateY(180deg); }
.kpi-flip .kpi-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.kpi-flip .kpi-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kpi-flip .kpi-back .kpi-label { margin-bottom: var(--space-2); }
.kpi-flip:focus-visible { outline: 2px solid var(--raiz-green-500); outline-offset: 2px; border-radius: var(--radius); }
.kpi-compare { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 16px; }
.kpi-compare .cmp-prev { color: var(--text-muted); font-weight: 500; }
.kpi-compare .cmp-arrow { color: var(--raiz-green-500); font-size: 14px; }
.kpi-compare .cmp-cur { color: var(--text-strong); font-weight: 600; }
.kpi-compare-none { font-size: 13px; color: var(--text-light); font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; }
.kpi-back .delta-up   { color: var(--raiz-green-500); }
.kpi-back .delta-down { color: var(--red); }

/* ---------- Funil SVG ---------- */
.funnel { padding: 0; display: block; }
.funnel-svg-wrap { padding: 4px 20px 20px; }
.funnel-svg { width: 100%; height: auto; display: block; max-height: 360px; overflow: visible; }
.funnel-svg .f-label { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; fill: rgba(255,255,255,.78); }
.funnel-svg .f-value { font-family: var(--font-mono); font-size: 24px; font-weight: 600; fill: #fff; }
.funnel-svg .f-value-sm { font-size: 19px; }
.funnel-svg .f-value-cmp { font-size: 16px; }
.funnel-svg .f-rate { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; fill: rgba(255,255,255,.72); }
.funnel-svg .f-rate.f-up { fill: #86EFAC; }
.funnel-svg .f-rate.f-down { fill: #FCA5A5; }
.funnel-svg .f-stage { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: filter .25s ease, transform .25s ease, opacity .25s ease; outline: none; }
.funnel-svg .f-stage:hover { filter: brightness(1.18) drop-shadow(0 0 10px rgba(34,197,94,.45)); transform: scale(1.02); }
.funnel-svg:hover .f-stage:not(:hover) { opacity: .82; }
.funnel-svg .f-stage:focus-visible { filter: brightness(1.12); }
@keyframes fspin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.funnel-svg .f-stage.f-spin { animation: fspin .6s cubic-bezier(.45,.05,.25,1); }

/* ---------- Tabelas ---------- */
.td-num { font-family: var(--font-mono); text-align: right; }
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--raiz-green-500); }
.sort-arrow { opacity: 0.5; font-size: 9px; margin-left: 3px; }
.table-empty { padding: var(--space-8); text-align: center; font-size: 12px; color: var(--text-light); }
.data-table thead th, .data-table tbody td, .data-table tfoot td { white-space: nowrap; }
.td-name { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.td-sub { display: block; font-size: 10.5px; color: var(--text-light); }

.section-row { align-items: stretch; }
.section-row > .card { min-width: 0; }
.chart-wrap-timeline { min-height: 300px; }
.section-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: stretch; }
.section-split > .card { min-width: 0; }
@media (max-width: 900px) { .section-split { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .profile-stats { grid-template-columns: 1fr !important; } }

/* ---------- Corretores × não corretores ---------- */
.card-profile { display: flex; flex-direction: column; }
.profile { padding: var(--space-2) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.profile-stat { background: var(--card-hover); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: var(--space-4); border-top: 3px solid var(--raiz-green-500); }
.profile-stat-no { border-top-color: var(--amber); }
.profile-stat .kpi-label { margin-bottom: var(--space-2); }
.profile-value { font-family: var(--font-mono); font-size: 30px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.02em; line-height: 1.1; }
.profile-share { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono); }
.profile-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--border-soft); gap: 2px; }
.profile-bar span { display: block; height: 100%; }
.pb-yes { background: var(--raiz-green-500); }
.pb-no { background: var(--amber); }
.pb-none { background: var(--text-light); opacity: .55; }
.profile-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 11.5px; color: var(--text); font-family: var(--font-mono); }
.profile-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.dot-yes { background: var(--raiz-green-500); }
.dot-no { background: var(--amber); }
.dot-none { background: var(--text-light); }
.profile-note { margin-top: auto; font-size: 11.5px; line-height: 1.55; color: var(--text-muted); border-top: 1px solid var(--border-soft); padding-top: var(--space-3); }
.profile-empty { font-size: 12px; color: var(--text-light); padding: var(--space-8) 0; text-align: center; }

/* ---------- Filtro de campanha nos criativos ---------- */
.card-head-left { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; }
.creative-filter { max-width: 240px; font-size: 12px; padding-top: 5px; padding-bottom: 5px; }
.card-table .card-head { align-items: center; }

/* ---------- Header no celular ---------- */
@media (max-width: 720px) {
  .header-inner { grid-template-columns: minmax(0, 1fr); padding-left: 16px; padding-right: 16px; }
  .header-period { flex-wrap: wrap; min-width: 0; row-gap: 8px; }
  .last-refresh { flex-basis: 100%; }
  .main { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Tabela de criativos com rolagem (5 visíveis) ---------- */
.table-scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.table-scroll .data-table { border-collapse: separate; border-spacing: 0; }
.table-scroll thead th { position: sticky; top: 0; z-index: 2; }
.table-scroll tfoot td { position: sticky; bottom: 0; z-index: 2; }
.table-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll.is-scrolling tbody tr:last-child td { border-bottom: 1px solid var(--border-soft); }