/* ============================================================================
   HERMES B2B Partners — sistema visual do Portal do Franqueado
   Fonte da verdade: design_handoff_hermes_partners (manual de marca, 2026-08-11).
   Marca-mae echo_lab; o ambar #D97706 vem do programa de parceiros (echo_lovers).
   O verde #10B981 do HERMES.b2b NAO aparece aqui.
   ========================================================================== */

: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;   /* active do botao; tambem cor de link em texto */

  --hp-ink:          #0a0a0f;
  --hp-endorse:      #a8935f;
  --hp-endorse-dark: #8c8578;
  --hp-endorse-mono: #5c5c60;

  --hp-paper:        #f6f4ef;
  --hp-surface:      #ffffff;
  --hp-surface-sub:  #fbfaf7;
  --hp-border:       #eae7df;
  --hp-border-input: #e2ded4;

  --hp-muted:        #6b7f79;
  --hp-label:        #8a9490;
  --hp-faint:        #a3aca8;

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

  --hp-danger:       #b91c1c;
  --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: 14px; --hp-r-card-lg: 16px;

  --hp-shadow: 0 1px 2px rgba(10,10,15,.04);
  --hp-ease: 120ms ease-out;
}

/* ── Lockup da marca ──────────────────────────────────────────────────────
   Toda a metrica e relativa ao font-size da raiz: essa e a UNICA variavel
   de escala. Area de protecao = metade da altura do icone (1.05em).        */
.hp-lockup {
  --lk-amber:   var(--hp-amber);
  --lk-ink:     var(--hp-ink);
  --lk-endorse: var(--hp-endorse);
  display: inline-flex; align-items: center; gap: .6em;
  font-family: 'Geist', system-ui, sans-serif; text-decoration: none;
  font-size: 22px;
  transition: opacity var(--hp-ease);
}
.hp-lockup:hover { opacity: .85; }
.hp-lockup svg  { width: 2.1em; height: 2.1em; flex: none; color: var(--lk-amber); }
.hp-stack       { display: flex; flex-direction: column; gap: .28em; align-items: flex-start; }
.hp-name        { font-size: 1em; font-weight: 700; letter-spacing: .005em; line-height: 1; color: var(--lk-ink); }
.hp-name i      { font-style: normal; font-weight: 600; margin-left: .14em; color: var(--lk-amber); }
.hp-endorse     { font-size: .45em; font-weight: 500; letter-spacing: .34em;
                  text-transform: uppercase; line-height: 1; color: var(--lk-endorse); }

.hp-lockup.on-dark { --lk-amber: var(--hp-amber-dark); --lk-ink: #fff; --lk-endorse: var(--hp-endorse-dark); }
.hp-lockup.mono    { --lk-amber: currentColor; --lk-ink: currentColor; --lk-endorse: var(--hp-endorse-mono); }

/* ── Tipografia ──────────────────────────────────────────────────────────── */
.hp-h1     { font-family:'Geist',system-ui,sans-serif; font-weight:700; font-size:40px; letter-spacing:-.025em; line-height:1.05; color:var(--hp-ink); }
.hp-h3     { font-family:'Geist',system-ui,sans-serif; font-weight:700; font-size:24px; letter-spacing:-.015em; color:var(--hp-ink); }
.hp-h-sec  { font-family:'Geist',system-ui,sans-serif; font-weight:600; font-size:20px; color:var(--hp-ink); }
.hp-body   { font-family:'Geist',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:'Geist Mono',ui-monospace,monospace; }

/* Label mono do manual: 10px / .16em / uppercase */
.hp-label {
  font-family:'Geist 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:'Geist 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:'Geist',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-amber); color:#fff; border:none; border-radius:var(--hp-r-btn);
  font-family:'Geist',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-amber-hover); }
.hp-btn:active:not(:disabled) { background:var(--hp-amber-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:'Geist 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:'Geist',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:'Geist',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:'Geist',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:'Geist 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:'Geist 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:'Geist',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:'Geist Mono',ui-monospace,monospace; font-size:10.5px; }
.hp-tip .v   { font-weight:700; font-variant-numeric:tabular-nums; }
.hp-tip .tid { font-family:'Geist 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; }

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