/* ============================================================================
   HERMES.b2b Partners · sistema visual do app (app.echolab.partners)
   Decisao do Marcus em 28/09/2026: o Partners E o logo do HERMES.b2b, em ambar.
   Fonte da verdade: Design System Geral/Área Partners/marca/LEIA-ME.md.

   Assinatura: tile quadrado ambar #D97706 (rx 16 em 64) com as tres barras do
   HERMES.b2b em BRANCO, "HERMES" em tinta #14181A Archivo 800 com ".b2b"
   COLADO em ambar, e "PARTNERS" embaixo em #A8935F (Archivo 600, caixa alta,
   tracking .30em, 0,40 do corpo do nome). Sobre tinta: HERMES #F6F4EF e .b2b
   #F59E0B, tile igual. Selo "by echo_lab" minusculo, tipografico, #5B6560.
   O NOME echo_partners segue valendo em texto como nome da rede; o que mudou
   foi o logo e a pele.

   Nunca: barras soltas no lugar do logo, cursor >_ ou simbolo da mae, espaco
   entre HERMES e .b2b, mono na assinatura, verde #10B981 (e do HERMES.b2b),
   indigo #4837FF, grade de 72px, Geist, coral da mae, regua do espectro.
   Ambar so no que se clica, no dinheiro e no que esta fora do lugar; texto
   ambar abaixo de 24px e #B45309. JetBrains Mono so em dado, olhal e rotulo.
   Botao cheio (regra de 28/09): com menos de 48px de altura o fundo e
   #B45309 (branco da 5,02); #D97706 so em botao de 48px ou mais com texto
   branco em 19px/700. O .hp-btn usa #B45309 porque as telas do Radar o
   usam tambem com 44px. Sem verde: estado feito e sucesso vao em tinta.
   ========================================================================== */

:root {
  /* Cor da marca do franqueado */
  --hp-amber:        #d97706;   /* icone, .b2b, botao primario, foco */
  --hp-amber-dark:   #f59e0b;   /* mesma funcao sobre fundo escuro */
  --hp-amber-hover:  #c26a05;
  --hp-amber-press:  #b45309;   /* ambar que escreve: link e rotulo abaixo de 24px */
  --hp-btn:          #b45309;   /* botao cheio < 48px: branco da 5,02 */
  --hp-btn-hover:    #a34a0c;   /* rampa ambar; branco da 5,9 */
  --hp-btn-press:    #92400e;   /* fim da rampa; branco da 7,1 */

  --hp-ink:          #14181a;
  --hp-ink-paper:    #f6f4ef;   /* HERMES sobre tinta */
  --hp-body:         #3a3a40;   /* corpo de texto */
  --hp-endorse:      #a8935f;   /* PARTNERS, no claro e no escuro */
  --hp-endorse-dark: #a8935f;
  --hp-endorse-mono: #5b6560;
  --hp-selo:         #5b6560;   /* by echo_lab no claro */
  --hp-selo-dark:    #9a9a93;   /* by echo_lab no escuro */

  --hp-paper:        #f6f4ef;
  --hp-surface:      #ffffff;
  --hp-surface-sub:  #fbfaf6;
  --hp-border:       #e3e0d8;
  --hp-border-input: #e2ded4;

  --hp-muted:        #5b6560;   /* apoio */
  --hp-caption:      #6b6b64;   /* legenda: 4,88 no papel */
  --hp-label:        #6b6b64;   /* era #9a9a93: 2,6 no papel, reprovava como texto */
  --hp-faint:        #6b6b64;

  --hp-warn-bg:      #fdf8ec;
  --hp-warn-border:  #e6d9c0;

  --hp-danger:       #c2410c;
  --hp-danger-bg:    #fef2f2;
  --hp-danger-border:#fecaca;

  /* Raios do manual */
  --hp-r-chip: 5px;  --hp-r-input: 8px;  --hp-r-btn: 9px;
  --hp-r-block: 12px; --hp-r-card: 12px; --hp-r-card-lg: 12px;

  --hp-shadow: none;            /* card sem sombra: borda #E3E0D8 e so */
  --hp-ease: 120ms ease-out;
}

/* ── Assinatura: tile + HERMES.b2b + PARTNERS ────────────────────────────
   O font-size da raiz e o CORPO DO NOME e a unica variavel de escala.
   Proporcoes do LEIA-ME: nome = 0,60 do tile (tile = 1,667em), gap = 0,32
   do tile (.533em), PARTNERS = 0,40 do nome. Markup:
   <a class="hp-lockup"><svg class="hp-tile" viewBox="0 0 64 64">rect rx16
   #D97706 + 3 barras #FFF em translate(9 18)</svg><span class="hp-stack">
   <span class="hp-name">HERMES<i>.b2b</i></span><span class="hp-endorse">
   Partners</span></span></a>                                              */
.hp-lockup {
  --lk-amber:   var(--hp-amber);
  --lk-ink:     var(--hp-ink);
  --lk-endorse: var(--hp-endorse);
  display: inline-flex; align-items: center; gap: .533em;
  font-family: 'Archivo', system-ui, sans-serif; text-decoration: none;
  font-size: 22px;
  transition: opacity var(--hp-ease);
}
.hp-lockup:hover { opacity: .88; }
.hp-lockup svg  { width: 1.667em; height: 1.667em; flex: none; display: block; }
/* Markup antigo (so as barras 46x28 em currentColor): o CSS desenha o tile em
   volta, pra nenhuma tela sair com as barras soltas. As folgas sao as do tile
   de 64: 9 dos lados e 18 em cima e embaixo. */
.hp-lockup svg:not(.hp-tile) {
  box-sizing: border-box; padding: .469em .234em;
  background: #d97706; border-radius: .417em; color: #fff;
}
.hp-stack       { display: flex; flex-direction: column; gap: .3em; align-items: flex-start; }
.hp-name        { font-size: 1em; font-weight: 800; letter-spacing: -.02em; line-height: 1;
                  color: var(--lk-ink); white-space: nowrap; }
.hp-name i      { font-style: normal; font-weight: 800; margin-left: 0; letter-spacing: inherit; color: var(--lk-amber); }
.hp-endorse     { font-size: .40em; font-weight: 600; letter-spacing: .30em;
                  text-transform: uppercase; line-height: 1; color: var(--lk-endorse); }

/* Negativa, sobre tinta #14181A: o tile continua ambar com barras brancas. */
.hp-lockup.on-dark { --lk-amber: var(--hp-amber-dark); --lk-ink: var(--hp-ink-paper); --lk-endorse: var(--hp-endorse-dark); }

/* Rodape das telas: echolab.partners · by echo_lab (selo minusculo). */
.hp-foot        { font-family:'Archivo',system-ui,sans-serif; font-size:12.5px; line-height:1.5;
                  color:var(--hp-caption); text-align:center; }
.hp-foot a      { color:inherit; text-decoration:none; }
.hp-foot a:hover { color:var(--hp-amber-press); text-decoration:underline; }
.hp-selo        { color:var(--hp-selo); font-weight:500; text-transform:none; letter-spacing:0; white-space:nowrap; }

/* ── Tipografia ──────────────────────────────────────────────────────────── */
.hp-h1     { font-family:'Archivo',system-ui,sans-serif; font-weight:800; font-size:40px; letter-spacing:-.035em; line-height:1.05; color:var(--hp-ink); }
.hp-h3     { font-family:'Archivo',system-ui,sans-serif; font-weight:800; font-size:24px; letter-spacing:-.035em; color:var(--hp-ink); }
.hp-h-sec  { font-family:'Archivo',system-ui,sans-serif; font-weight:600; font-size:20px; color:var(--hp-ink); }
.hp-body   { font-family:'Archivo',system-ui,sans-serif; font-weight:400; font-size:15px; line-height:1.55; color:var(--hp-ink); }
.hp-sm     { font-size:13.5px; line-height:1.5; color:var(--hp-muted); }
.hp-mono   { font-family:'JetBrains Mono',ui-monospace,monospace; }

/* Label mono do manual: 10px / .16em / uppercase */
.hp-label {
  font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:500; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--hp-label);
}
/* Micro-copy mono */
.hp-micro { font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:400; font-size:10.5px; letter-spacing:.06em; color:var(--hp-faint); }

/* ── Superficies ─────────────────────────────────────────────────────────── */
.hp-card {
  background: var(--hp-surface); border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-card); box-shadow: var(--hp-shadow);
}
.hp-block { background: var(--hp-surface-sub); border: 1px solid var(--hp-border); border-radius: var(--hp-r-block); }
.hp-warn  { background: var(--hp-warn-bg); border: 1px solid var(--hp-warn-border); border-radius: var(--hp-r-block); }

/* ── Controles ───────────────────────────────────────────────────────────── */
.hp-input {
  width:100%; height:44px; padding:0 13px; background:var(--hp-surface); color:var(--hp-ink);
  border:1px solid var(--hp-border-input); border-radius:var(--hp-r-input);
  font-family:'Archivo',system-ui,sans-serif; font-size:15px;
  transition: border-color var(--hp-ease), background var(--hp-ease);
}
.hp-input:focus { outline:none; border:1.5px solid var(--hp-amber); }
.hp-input[aria-invalid="true"] { border:1.5px solid var(--hp-danger); }
select.hp-input { cursor:pointer; }

.hp-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 20px; width:100%;
  background:var(--hp-btn); color:#fff; border:none; border-radius:var(--hp-r-btn);
  font-family:'Archivo',system-ui,sans-serif; font-weight:600; font-size:15px; cursor:pointer;
  transition: background var(--hp-ease), opacity var(--hp-ease);
}
.hp-btn:hover:not(:disabled)  { background:var(--hp-btn-hover); }
.hp-btn:active:not(:disabled) { background:var(--hp-btn-press); }
.hp-btn:disabled, .hp-btn[aria-busy="true"] { opacity:.45; cursor:default; }

.hp-btn-ghost {
  background:transparent; color:var(--hp-amber-press);
  border:1px solid var(--hp-border-input); height:40px; width:auto; font-size:14px;
}
.hp-btn-ghost:hover:not(:disabled) { background:var(--hp-surface-sub); }

.hp-link { color:var(--hp-amber-press); text-decoration:none; }
.hp-link:hover { text-decoration:underline; }

/* Spinner do estado de loading do botao */
.hp-spin { width:18px; height:18px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
           border-radius:50%; animation:hp-rot .7s linear infinite; }
@keyframes hp-rot { to { transform: rotate(360deg); } }

/* ── Chip / badge ────────────────────────────────────────────────────────── */
.hp-chip {
  display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:var(--hp-r-chip);
  background:var(--hp-surface-sub); border:1px solid var(--hp-border);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.06em;
  color:var(--hp-muted); text-transform:uppercase; white-space:nowrap;
}
.hp-chip-amber { background:var(--hp-warn-bg); border-color:var(--hp-warn-border); color:var(--hp-amber-press); }

/* ── Metricas ────────────────────────────────────────────────────────────── */
.hp-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.hp-stat  { padding:16px 18px; }
.hp-stat .v { font-family:'Archivo',system-ui,sans-serif; font-weight:700; font-size:26px;
              letter-spacing:-.02em; color:var(--hp-ink); line-height:1.1; }
.hp-stat .k { margin-top:6px; }

/* ── Abas (Radar: Prospeccao · Big Data · Rota) ──────────────────────────── */
.hp-tabs { display:flex; gap:4px; border-bottom:1px solid var(--hp-border); }
.hp-tab {
  padding:10px 16px; border:none; background:transparent; cursor:pointer;
  font-family:'Archivo',system-ui,sans-serif; font-weight:500; font-size:14px; color:var(--hp-muted);
  border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none;
  transition: color var(--hp-ease), border-color var(--hp-ease);
}
.hp-tab:hover { color:var(--hp-ink); }
.hp-tab[aria-selected="true"] { color:var(--hp-amber-press); border-bottom-color:var(--hp-amber); font-weight:600; }

/* ── Tabela de dados ─────────────────────────────────────────────────────── */
.hp-table { width:100%; border-collapse:collapse; font-family:'Archivo',system-ui,sans-serif; font-size:14px; }
.hp-table th {
  text-align:left; padding:9px 12px; border-bottom:1px solid var(--hp-border);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:500; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--hp-label); white-space:nowrap;
}
.hp-table td { padding:11px 12px; border-bottom:1px solid var(--hp-border); color:var(--hp-ink); }
.hp-table tbody tr:hover { background:var(--hp-surface-sub); }
.hp-table .num { text-align:right; font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }
.hp-table-wrap { overflow-x:auto; }

/* ── Mapa (SVG inline, sem biblioteca externa nem tiles) ─────────────────── */
.hp-map { width:100%; display:block; background:var(--hp-surface-sub); border-radius:var(--hp-r-block); }
.hp-map path { stroke:#fff; stroke-width:.5; cursor:pointer; transition:opacity var(--hp-ease); }
.hp-map path:hover { opacity:.75; }
.hp-map path.sel { stroke:var(--hp-ink); stroke-width:1.2; }
.hp-map-legend { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
.hp-map-legend i { width:11px; height:11px; border-radius:3px; display:inline-block; flex:none; }
.hp-map-wrap { position:relative; }
.hp-tip {
  position:absolute; pointer-events:none; z-index:20; max-width:230px;
  background:var(--hp-ink); color:#fff; padding:8px 10px; border-radius:var(--hp-r-input);
  font-family:'Archivo',system-ui,sans-serif; font-size:12.5px; line-height:1.45;
  box-shadow:0 4px 14px rgba(10,10,15,.18);
}
.hp-tip .uf  { color:var(--hp-endorse-dark); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; }
.hp-tip .v   { font-weight:700; font-variant-numeric:tabular-nums; }
.hp-tip .tid { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; color:var(--hp-amber-dark); letter-spacing:.06em; }

/* Barra de magnitude dentro da tabela: marca fina, ponta arredondada de 4px,
   ancorada na base da celula. A identidade fica no texto da linha, nao na cor. */
.hp-bar { position:relative; height:6px; background:var(--hp-surface-sub); border-radius:3px; overflow:hidden; min-width:60px; }
.hp-bar > i { position:absolute; inset:0 auto 0 0; background:var(--hp-amber); border-radius:3px; display:block; }

/* ── Controles auxiliares ────────────────────────────────────────────────── */
.hp-check {
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 12px;
  border:1px solid var(--hp-border-input); border-radius:var(--hp-r-input);
  background:var(--hp-surface); cursor:pointer; white-space:nowrap;
  font-family:'Archivo',system-ui,sans-serif; font-size:14px; color:var(--hp-ink);
  transition: border-color var(--hp-ease), background var(--hp-ease);
}
.hp-check:has(input:checked) { border-color:var(--hp-amber); background:var(--hp-warn-bg); }
.hp-check input { accent-color:var(--hp-amber); width:16px; height:16px; }

.hp-table tbody tr.sel { background:var(--hp-warn-bg); }

/* ── Cota de liberação de contato ────────────────────────────────────────── */
.hp-cota {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 16px; border-radius:var(--hp-r-card);
  background:var(--hp-surface); border:1px solid var(--hp-border); box-shadow:var(--hp-shadow);
}
.hp-cota.acabou { background:var(--hp-warn-bg); border-color:var(--hp-warn-border); }
.hp-cota .hp-bar > i { background:var(--hp-amber); }
.hp-cota.acabou .hp-bar > i { background:var(--hp-danger); }

.hp-oculto { color:var(--hp-label); font-size:12.5px; letter-spacing:.04em; user-select:none; }
.hp-revelar {
  margin-top:5px; padding:5px 10px; border-radius:var(--hp-r-chip); cursor:pointer;
  border:1px solid var(--hp-warn-border); background:var(--hp-warn-bg); color:var(--hp-amber-press);
  font-family:'Archivo',system-ui,sans-serif; font-size:12px; font-weight:600; white-space:nowrap;
  transition: background var(--hp-ease);
}
.hp-revelar:hover:not(:disabled) { background:#fbf1dc; }
.hp-revelar:disabled { opacity:.45; cursor:default; }
.hp-table tbody tr.revelado td:first-child { box-shadow: inset 3px 0 0 var(--hp-amber); }

/* ── Registro de campo ───────────────────────────────────────────────────── */
.hp-visita { display:flex; flex-direction:column; gap:6px; min-width:190px; }
.hp-visita.salvando { opacity:.55; }
.hp-visita-chips { display:flex; flex-wrap:wrap; gap:4px; }
.hp-mark {
  padding:4px 8px; border-radius:var(--hp-r-chip); cursor:pointer;
  border:1px solid var(--hp-border-input); background:var(--hp-surface);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--hp-muted); white-space:nowrap;
  transition: background var(--hp-ease), border-color var(--hp-ease), color var(--hp-ease);
}
.hp-mark:hover { border-color:var(--hp-amber); color:var(--hp-amber-press); }
.hp-mark.on { background:var(--hp-btn); border-color:var(--hp-btn); color:#fff; }
.hp-nota {
  width:100%; padding:5px 8px; border:1px solid var(--hp-border-input);
  border-radius:var(--hp-r-input); font-family:'Archivo',system-ui,sans-serif; font-size:12.5px;
  background:var(--hp-surface); color:var(--hp-ink);
}
.hp-nota:focus { outline:none; border:1.5px solid var(--hp-amber); }
.hp-pipe {
  padding:5px 9px; border-radius:var(--hp-r-chip); cursor:pointer; text-align:left;
  border:1px solid var(--hp-warn-border); background:var(--hp-warn-bg); color:var(--hp-amber-press);
  font-family:'Archivo',system-ui,sans-serif; font-size:12px; font-weight:600;
}
.hp-pipe.feito { color:var(--hp-ink); border-color:var(--hp-border); background:var(--hp-surface); cursor:default; }
.hp-table tbody tr.trabalhado td:first-child { box-shadow: inset 3px 0 0 var(--hp-ink); }

/* Faixa de escopo: diz em toda tela do Radar qual area esta aplicada. */
.hp-escopo {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:10px; padding:9px 13px; border-radius:var(--hp-r-block);
  background:var(--hp-warn-bg); border:1px solid var(--hp-warn-border);
}
.hp-escopo strong { font-family:'Archivo',system-ui,sans-serif; font-size:14px; color:var(--hp-ink); }

/* Chamada de ação do dashboard: leva do numero pro trabalho. */
.hp-cta {
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 20px; border-radius:var(--hp-r-card);
  background:var(--hp-warn-bg); border:1px solid var(--hp-warn-border);
}

/* ── Responsivo ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hp-lockup { font-size: 18px; }
  .hp-h1 { font-size: 30px; }
  .hp-h3 { font-size: 21px; }
}

/* O franqueado abre isto no celular, no meio da rua. Tabela larga com scroll
   lateral é inutilizável ali, entao cada linha vira cartao. O rotulo da coluna
   vem do data-t da celula, pra nao duplicar o cabecalho no HTML. */
@media (max-width: 720px) {
  .hp-table-cards thead { display:none; }
  .hp-table-cards, .hp-table-cards tbody, .hp-table-cards tr, .hp-table-cards td { display:block; width:100%; }
  .hp-table-cards tr {
    border:1px solid var(--hp-border); border-radius:var(--hp-r-block);
    padding:12px 14px; margin-bottom:10px; background:var(--hp-surface);
  }
  .hp-table-cards tr.sel { background:var(--hp-warn-bg); }
  .hp-table-cards td { border:none; padding:5px 0; text-align:left !important; }
  .hp-table-cards td[data-t]::before {
    content: attr(data-t);
    display:block; margin-bottom:3px;
    font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:500; font-size:10px;
    letter-spacing:.16em; text-transform:uppercase; color:var(--hp-label);
  }
  .hp-table-wrap { max-height:none !important; overflow:visible !important; }
}

/* ── Impressão: a rota do dia sai em papel ───────────────────────────────── */
@media print {
  .nao-imprime, .sidebar, .topbar, nav.hp-tabs, .hp-map-wrap, .hp-map-legend { display:none !important; }
  body { background:#fff !important; }
  .hp-card { border:none !important; box-shadow:none !important; padding:0 !important; }
  .hp-table-wrap { max-height:none !important; overflow:visible !important; }
  .hp-table { font-size:11px; }
  .hp-table th { border-bottom:1px solid #999; }
  .hp-table tbody tr { page-break-inside:avoid; }
  a { text-decoration:none; color:#000 !important; }
}

/* Estrela de favoritar: SVG no lugar do emoji (manual 2026-08-25). */
.nav-star-i { display:block; }