/* =====================================================================
 * Shell FB Consult: sidebar, topo, entrada, sessão e avisos.
 *
 * Carrega depois de painel.css e sobrescreve o que o painel original
 * resolvia com a barra de abas horizontal — que deixava duas abas fora
 * de vista e tinha a aba ativa em contraste 1,09:1.
 * ===================================================================== */

/* Uma regra de classe com display:grid/flex vence o display:none que o
   navegador aplica a [hidden] — sem isto o gate e o aviso de erro nunca
   somem da tela, mesmo com o atributo marcado. */
[hidden]{ display:none !important }

:root{
  --fb-primary:#1D3B3A;
  --fb-primary-dark:#142B2A;
  --fb-accent:#05AB34;
  --fb-accent-dark:#048828;
  --fb-gold:#E0BE4F;
  --fb-bg:#f5f5f6;
  --fb-borda:#e4e4e7;
  --fb-txt:#1f2937;
  --fb-sub:#6b7280;
  --fb-err:#991b1b;
  --fb-err-bg:#fef2f2;
  --sb-w:240px;
}

/* ================================================================ shell */
.shell{ display:flex; min-height:100vh; align-items:stretch }

.sidebar{
  position:fixed; top:0; bottom:0; left:0; width:var(--sb-w); z-index:30;
  display:flex; flex-direction:column;
  background:var(--fb-primary); color:#CFE0D4;
  border-right:1px solid rgba(0,0,0,.18);
}
.sb-topo{ padding:22px 18px 16px; border-bottom:1px solid rgba(255,255,255,.10) }
.sb-logo{ width:150px; height:auto; display:block }

.sb-nav{ flex:1; overflow-y:auto; padding:14px 10px 18px }
.sb-nav::-webkit-scrollbar{ width:6px }
.sb-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:99px }

.sb-grupo{
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:#7E9A8C;
  margin:16px 0 6px; padding:0 12px;
}
.sb-grupo:first-child{ margin-top:2px }

/* Item ativo com barra verde à esquerda, no padrão FB. */
.sidebar .tab{
  display:block; width:100%; text-align:left;
  font-family:'Barlow',sans-serif; font-size:14.5px; font-weight:500;
  color:#CFE0D4; background:none; border:0; border-left:3px solid transparent;
  border-radius:0 6px 6px 0; padding:0 12px; min-height:44px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar .tab:hover{ background:rgba(255,255,255,.08); color:#fff }
.sidebar .tab[aria-selected="true"]{
  color:#fff; font-weight:600;
  border-left-color:var(--fb-accent);
  background:linear-gradient(90deg, rgba(5,171,52,.22), rgba(5,171,52,0));
}
.sidebar .tab:focus-visible{ outline:2px solid var(--fb-accent); outline-offset:-2px }

.sb-rodape{
  padding:12px 14px; border-top:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; gap:10px;
}
.sb-quem{
  font-family:'Barlow',sans-serif; font-size:12.5px; color:#9FB8A9;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.sb-sair{
  font-family:'Barlow',sans-serif; font-size:12.5px; font-weight:600;
  min-height:32px; padding:0 12px; cursor:pointer; flex:0 0 auto;
  background:transparent; color:#CFE0D4;
  border:1px solid rgba(255,255,255,.22); border-radius:6px;
}
.sb-sair:hover{ background:rgba(255,255,255,.10); color:#fff }

/* ================================================================= main */
.main{ flex:1; min-width:0; margin-left:var(--sb-w); background:var(--fb-bg) }

.topo{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 24px; background:#fff; border-bottom:1px solid var(--fb-borda);
}
.crumb{
  font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--fb-primary);
  margin:0; flex:1; min-width:0;
}

/* pílula de semana: no topo claro, some o esquema escuro do painel antigo */
.topo .week-pill{
  margin-left:0; background:var(--fb-bg); border:1px solid var(--fb-borda);
  color:var(--fb-txt); font-family:'Barlow',sans-serif;
}
.topo .week-pill button{
  color:var(--fb-sub); min-width:32px; min-height:32px; font-size:17px;
}
.topo .week-pill button:hover{ color:var(--fb-primary) }
.topo .week-pill .lbl{ color:var(--fb-txt); font-family:'Barlow Condensed',sans-serif; font-size:15px }

.menu-bt{
  display:none; font-size:20px; line-height:1; cursor:pointer;
  min-width:40px; min-height:40px; border-radius:6px;
  background:#fff; color:var(--fb-primary); border:1px solid var(--fb-borda);
}

/* Filtro de histórico. Só o nome do estado — o racional foi explicado
   fora da tela e não se repete em legenda aqui. */
.hist-chip{
  font-family:'Barlow',sans-serif; font-size:12.5px; font-weight:600;
  min-height:32px; padding:0 14px; cursor:pointer; white-space:nowrap;
  background:#fff; color:var(--fb-sub);
  border:1px solid var(--fb-borda); border-radius:999px;
}
.hist-chip:hover{ border-color:var(--fb-primary); color:var(--fb-primary) }
.hist-chip.on{
  background:var(--fb-gold); color:#3A2F0B; border-color:#C9A845;
}

.main .wrap{ max-width:1180px; margin:0 auto; padding:22px 24px 64px }
.main .content{ padding-top:18px }

/* ------------------------------------------------------- placar claro */
/* O placar vinha desenhado para fundo escuro; no topo branco vira card. */
.scoreboard{
  background:transparent; border-radius:0; gap:14px; margin:0;
  grid-template-columns:repeat(3,1fr);
}
.score{
  background:#fff; border:1px solid var(--fb-borda); border-radius:12px;
  padding:14px 16px;
}
.score .k{ color:var(--fb-sub); letter-spacing:.12em; font-family:'Barlow',sans-serif }
.score .v{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:30px;
  color:var(--fb-primary); letter-spacing:0;
}
.score .v small{ color:var(--fb-sub); font-family:'Barlow',sans-serif; font-size:13px }
.score .mini{ background:var(--fb-borda) }
.score .mini > i{ background:var(--fb-accent) }
.score.done .mini > i{ background:var(--fb-accent) }
.score.done .v{ color:var(--fb-accent-dark) }

/* ---------------------------------------------------------------- gate */
.gate{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center; padding:24px;
  background:var(--fb-primary);
  background-image:radial-gradient(120% 90% at 50% 0%, #24504E 0%, #142B2A 70%);
}
.gate-card{
  width:100%; max-width:380px;
  background:#fff; border-radius:12px; padding:32px;
  box-shadow:0 20px 50px rgba(0,0,0,.28);
  display:flex; flex-direction:column;
}
.gate-logo{ width:180px; height:auto; align-self:center; margin-bottom:22px }
.gate-card h1{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:24px; letter-spacing:.01em; text-transform:uppercase;
  color:var(--fb-primary); margin:0 0 20px; text-align:center;
}
.gate-card label{
  font-family:'Barlow',sans-serif; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--fb-sub);
  margin-bottom:6px;
}
.gate-card input{
  font-family:'Barlow',sans-serif; font-size:15px;
  padding:11px 12px; margin-bottom:16px;
  border:1px solid var(--fb-borda); border-radius:6px; background:#fff; color:var(--fb-txt);
}
.gate-card input:focus{ outline:2px solid var(--fb-accent); outline-offset:1px; border-color:transparent }
.gate-card button{
  font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  min-height:44px; margin-top:4px; padding:0 18px;
  background:var(--fb-accent); color:#fff; border:0; border-radius:6px; cursor:pointer;
}
.gate-card button:hover{ background:var(--fb-accent-dark) }
.gate-card button:disabled{ opacity:.6; cursor:default }
.gate-erro{
  font-family:'Barlow',sans-serif; font-size:13.5px; line-height:1.45;
  margin:14px 0 0; padding:10px 12px; border-radius:6px;
  background:var(--fb-err-bg); color:var(--fb-err); border:1px solid #f6d5d5;
}

/* ---------------------------------------------------------------- boot */
.boot{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center; align-content:center; gap:18px;
  background:var(--fb-bg); text-align:center; padding:24px;
}
.boot img{ width:190px; height:auto }
.boot p{
  font-family:'Barlow',sans-serif; font-size:14.5px; color:var(--fb-sub);
  margin:0; line-height:1.6;
}
.boot strong{ color:var(--fb-err); font-weight:600 }
.boot button{
  font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; margin-top:14px;
  min-height:44px; padding:0 22px;
  background:var(--fb-primary); color:#fff; border:0; border-radius:6px; cursor:pointer;
}

/* -------------------------------------------------- falha ao salvar */
.erro-salvar{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:70;
  max-width:min(560px, calc(100vw - 32px));
  display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap;
  padding:14px 16px; border-radius:8px;
  background:var(--fb-err-bg); border:1px solid #f0c4c4;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
  font-family:'Barlow',sans-serif; font-size:13.5px; line-height:1.5; color:var(--fb-err);
}
.erro-salvar strong{ display:block; width:100%; font-size:14.5px }
.erro-salvar button{
  margin-left:auto; min-height:32px; padding:0 12px; cursor:pointer;
  font-family:'Barlow',sans-serif; font-size:12.5px; font-weight:600;
  background:#fff; color:var(--fb-err); border:1px solid #f0c4c4; border-radius:6px;
}

.savedMsg{
  position:fixed; right:18px; bottom:18px; z-index:65;
  padding:8px 14px; border-radius:999px;
  background:var(--fb-accent); color:#fff;
  font-family:'Barlow',sans-serif; font-size:12.5px; font-weight:600;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.savedMsg.show{ opacity:1; transform:translateY(0) }

/* ------------------------------------------- hierarquia dos cards */
/* A tela Hoje tinha cinco cards de mesmo peso, sem dizer onde é o
   trabalho. Sombra sai (o padrão FB pede borda, não drop-shadow) e o
   bloco onde se lança dado ganha a marca verde à esquerda. */
.main .content .card{ box-shadow:none; border:1px solid var(--fb-borda) }

/* Item de grade sem min-width:0 cresce até o conteúdo mais largo: a
   tabela de 4.736px esticava o card inteiro e levava o cabeçalho junto,
   jogando o seletor de status e o botão de baixar para fora da tela. */
.main .content .grid, .main .content .card{ min-width:0 }

/* Campo de filtro não é entrada de dado: a Base de Dados é tela de
   leitura e não deve receber a marca de lançamento. */
.main .content .card:has(input:not([type=hidden]):not([readonly]):not([data-bdfilter]):not([data-audfilter]), select:not(.bd-filter), textarea){
  border-left:3px solid var(--fb-accent);
}
/* cards de leitura ficam subordinados, com borda mais leve */
.main .content .card:not(:has(input:not([readonly]):not([data-bdfilter]):not([data-audfilter]), select:not(.bd-filter), textarea)){
  border-color:#ebebee;
}

.card-h h2{
  font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--fb-primary);
}

/* ------------------------------------------------ alvos de toque */
/* Marcar status é o gesto mais repetido do painel, e era o menor alvo
   da tela. 44px é o mínimo confortável no toque. */
.st-btn, .fw-btn, .mw-btn{ min-height:44px; padding-left:14px; padding-right:14px }
.mw-btn{ font-size:12px }

/* ------------------------------------------------ status por forma */
/* Cor sozinha não serve a quem não distingue verde de vermelho, e some
   em impressão. Cada estado leva também um símbolo. */
.st-btn.on-sched::before{ content:"• "; font-weight:700 }
.st-btn.on-held::before{ content:"✓ "; font-weight:700 }
.st-btn.on-ns::before{ content:"✕ "; font-weight:700 }
.fw-btn.on-yes::before{ content:"✓ "; font-weight:700 }
.fw-btn.on-no::before{ content:"✕ "; font-weight:700 }

/* A seta entre etapas do funil vinha na cor da borda: 1,27:1, invisível. */
.conv .arrow{ color:var(--fb-sub) }

/* Textos que ficavam entre 3,8:1 e 4,4:1 — legíveis, mas abaixo do
   mínimo AA. Todos sobre fundo colorido claro, onde a cor precisa ser
   mais escura do que sobre branco. */
.li-tag.futuro{ color:#4b5563 }        /* 3,81 → 5,96 */
/* o seletor com estado é mais específico e precisa ser batido no mesmo nível */
.q-row[data-st="No-show"] .hora{ color:#8A4B06 }   /* 3,97 → 6,30 */
.pill.wa{ color:#046B3C }              /* 3,99 → 6,01 */
.pill.call{ color:#04751F }            /* 4,17 → 5,32 */
.ytab td.held{ color:#046B3C }         /* 4,30 → sobre a linha do mês recorde */

/* --muted sobre o cinza do fundo dava 4,44:1; sobre branco já passava.
   Escurecido, atende nos dois.
   --green aparece como texto sobre verde-claro (4,17:1) e não só em
   barra; o tom escuro passa em ambos e continua verde. */
.main{ --muted:#5C636E; --green:#046B3C }

/* Rótulo de valor no gráfico do Ano, no padrão de datalabel: número
   sempre visível, com halo da cor do card por trás, para furar tanto o
   fundo branco quanto o topo da barra. O dourado da marca sozinho
   rendia 2,29:1 no mês recorde. */
.yval{
  color:var(--fb-txt); font-weight:700;
  text-shadow:0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff,
              1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
.yval.rec{ color:#8A6A12 }
.yval.zero{ color:var(--fb-sub); opacity:.75 }

/* avatar do Meu Progresso: gradiente ainda na cor antiga */
.mp-hero .av{ background:linear-gradient(135deg,#1D3B3A,#2F5F4A) }
.brand-mark{ background:linear-gradient(135deg,#1D3B3A,#2F5F4A) }

/* contraste dos estados sobre o próprio fundo */
.st-btn.on-sched{ color:#6B5310 }
.st-btn.on-held{ color:#046B3C }
.st-btn.on-ns{ color:#8A3B06 }

/* ------------------------------------------- Base de Dados: planilhão */
/* 29 colunas e rolagem nos dois eixos: sem cabeçalho e primeira coluna
   fixos, quem rola para a direita perde de vista de quem é a linha. */
.main .content .card.bd-card{ overflow:visible }
.bd-wrap{ max-height:min(70vh, 620px); overflow:auto }
.bd-table thead th{ position:sticky; top:0; z-index:2; background:#fff }
.bd-table thead tr.bd-filtros th{ top:33px; z-index:2; padding:4px 6px }
.bd-table th:first-child, .bd-table td:first-child{
  position:sticky; left:0; background:#fff; z-index:1;
  box-shadow:1px 0 0 var(--fb-borda);
}
.bd-table thead th:first-child{ z-index:3 }
.bd-table tr:hover td:first-child{ background:#FAFBFA }

.bd-filtros input{
  width:100%; min-width:90px; box-sizing:border-box;
  font-family:'Barlow',sans-serif; font-size:12px; font-weight:400;
  padding:5px 7px; color:var(--fb-txt);
  border:1px solid var(--fb-borda); border-radius:5px; background:#fff;
  text-transform:none; letter-spacing:0;
}
.bd-filtros input:focus{ outline:2px solid var(--fb-accent); outline-offset:-1px; border-color:transparent }
.bd-filtros input::placeholder{ color:#a6acb5; font-weight:400 }

.bd-limpar{
  font-family:'Barlow',sans-serif; font-size:13px; font-weight:600;
  min-height:38px; padding:0 14px; cursor:pointer;
  background:#fff; color:var(--fb-primary);
  border:1px solid var(--fb-borda); border-radius:6px;
}
.bd-limpar:hover{ border-color:var(--fb-primary) }

/* ----------------------------------------------------- auditoria */
/* O aviso de fonte fica em destaque, não em nota de rodapé: quem lê
   precisa saber que a conferência é interna antes de ver o selo. */
.aud-caveat{
  margin:14px 18px 0; padding:12px 14px;
  background:#fdf6e3; border:1px solid #ecdfae; border-left:3px solid var(--fb-gold);
  border-radius:6px; font-size:13px; line-height:1.5; color:#6B5310;
}

.aud-cobs{
  display:grid; gap:12px; padding:16px 18px 18px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
.aud-cob{ border:1px solid var(--fb-borda); border-radius:8px; padding:12px 14px; background:#fff }
.aud-cob-t{
  font-family:'Barlow',sans-serif; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; color:var(--fb-sub);
}
.aud-cob-n{
  font-family:'Barlow Condensed',sans-serif; font-size:28px; font-weight:700;
  color:var(--fb-primary); line-height:1.1; margin:2px 0 4px;
}
.aud-sub{ font-size:12px; color:#5C636E; line-height:1.45 }
.aud-flag{
  display:inline-block; margin-top:8px; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:600;
}
.aud-flag.ok{ background:#e6f8ec; color:#046B3C }
.aud-flag.atras{ background:#fef2f2; color:#991b1b }

.aud-rec td{ white-space:normal }
.aud-rec td:first-child{ width:28px; font-weight:700; color:#046B3C }
.aud-rec tr.nao-fecha td{ background:#fef2f2 }
.aud-rec tr.nao-fecha td:first-child{ color:#991b1b }

.aud-ach{ display:flex; gap:12px; align-items:flex-start; padding:12px 18px; border-top:1px solid #f0f0f2 }
.aud-ach:first-of-type{ border-top:0 }
.aud-ach-t{ font-size:13.5px; font-weight:600; color:var(--fb-txt) }
.aud-sev{
  display:inline-block; padding:3px 10px; border-radius:999px; flex:0 0 auto;
  font-family:'Barlow',sans-serif; font-size:11px; font-weight:700; letter-spacing:.06em;
}

/* Abas do planilhão = FONTES de dado, não filtros. Ficam com cara de
   aba de planilha, presas à tabela, para não parecer um filtro a mais. */
.aud-tabs{
  display:flex; gap:4px; flex-wrap:wrap;
  padding:0 18px; margin-top:12px;
  border-bottom:1px solid var(--fb-borda);
}
.aud-tab{
  font-family:'Barlow',sans-serif; font-size:13px; font-weight:600;
  min-height:38px; padding:0 14px; cursor:pointer;
  background:var(--fb-bg); color:#5C636E;   /* sobre o cinza, #6b7280 dá 4,44:1 */
  border:1px solid var(--fb-borda); border-bottom:0;
  border-radius:6px 6px 0 0; position:relative; top:1px;
}
.aud-tab:hover{ color:var(--fb-primary) }
.aud-tab.on{
  background:#fff; color:var(--fb-primary);
  border-top:2px solid var(--fb-accent); box-shadow:0 1px 0 #fff;
}

/* ------------------------------------------------- conteúdo largo */
/* Tabela da Base de Dados (4.736px), gráfico do Ano e a grade de Metas
   passam da largura da tela. Cada card rola dentro de si, em vez de
   empurrar a página inteira para o lado — assim o menu e o topo ficam
   sempre no lugar e nada some fora da borda direita. */
.main .content .card{ max-width:100%; overflow-x:auto }
.main .content .card::-webkit-scrollbar{ height:8px }
.main .content .card::-webkit-scrollbar-thumb{ background:var(--fb-borda); border-radius:99px }
.main .content .card::-webkit-scrollbar-thumb:hover{ background:#c9ccd1 }

/* --------------------------------------------------------- responsivo */
@media (max-width:1000px){
  .scoreboard{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:860px){
  /* no toque, os controles do topo também precisam de 44px; no desktop
     o mouse não pede esse tamanho e a barra fica mais leve sem ele */
  .topo .week-pill button, .hist-chip, .topo .week-pill{ min-height:44px }

  .sidebar{ transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 40px rgba(0,0,0,.3) }
  .sidebar.aberta{ transform:none }
  .main{ margin-left:0 }
  .menu-bt{ display:grid; place-items:center }
  .main .wrap{ padding:18px 16px 56px }
  .topo{ padding:10px 16px }
}
@media (max-width:700px){
  .scoreboard{ grid-template-columns:repeat(2,1fr) }
  .crumb{ flex:1 0 100%; order:-1 }
}