/* =============================================================================
   GLOBAL BICICLETAS — Design System
   Definição única de identidade visual (cores, tipografia, componentes).
   Baseado na marca: vermelho #cc0000 + preto/branco · fontes Outfit + Lato.

   Uso: <link rel="stylesheet" href="design/global-bike.css">
        (importa as fontes automaticamente)
   Tudo é feito com CSS variables (tokens) — trocar a marca = trocar os tokens.
============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Lato:wght@400;700&display=swap');

:root{
  /* ---- MARCA (vermelho) ---- */
  --gb-red-50:#fff1f1;
  --gb-red-100:#ffdcdc;
  --gb-red-200:#ffbdbd;
  --gb-red-500:#ef291b;   /* vermelho vivo (destaques) */
  --gb-red-600:#cc0000;   /* VERMELHO DA MARCA (principal) */
  --gb-red-700:#a80000;   /* hover/pressed */
  --gb-red-800:#870000;

  /* ---- NEUTROS ---- */
  --gb-ink:#17181c;       /* preto de texto (não puro, mais suave) */
  --gb-ink-2:#3f3f46;
  --gb-muted:#71717a;     /* texto secundário */
  --gb-line:#e6e7ea;      /* bordas/divisores */
  --gb-bg:#f6f7f9;        /* fundo da página */
  --gb-card:#ffffff;      /* cartões */
  --gb-card-2:#fafafb;

  /* ---- SEMÂNTICAS (status / dados) ---- */
  --gb-ok:#16a34a;        /* positivo / entrada */
  --gb-warn:#d97706;      /* atenção */
  --gb-info:#2563eb;      /* informação */
  --gb-danger:var(--gb-red-600);

  /* ---- PALETA DE GRÁFICOS (coesa com a marca) ---- */
  --gb-c1:var(--gb-red-600);  /* vendas / faturamento (métrica-mãe) */
  --gb-c2:#1f2937;            /* grafite */
  --gb-c3:#16a34a;            /* verde */
  --gb-c4:#d97706;            /* âmbar */
  --gb-c5:#0891b2;            /* ciano */
  --gb-c6:#7c3aed;            /* roxo */

  /* ---- TIPOGRAFIA ---- */
  --gb-font-display:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --gb-font-body:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --gb-fs-h1:22px; --gb-fs-h2:17px; --gb-fs-h3:14px;
  --gb-fs-body:14px; --gb-fs-sm:12.5px; --gb-fs-xs:11px;

  /* ---- FORMA ---- */
  --gb-radius:14px;       /* cartões */
  --gb-radius-sm:9px;     /* botões/inputs */
  --gb-radius-pill:999px;
  --gb-shadow:0 1px 3px rgba(20,20,30,.08),0 1px 2px rgba(20,20,30,.04);
  --gb-shadow-md:0 8px 24px rgba(20,20,30,.12);
  --gb-space:16px;
}

/* ---------------------------------------------------------------- base ---- */
*{box-sizing:border-box}
body.gb{
  margin:0;background:var(--gb-bg);color:var(--gb-ink);
  font-family:var(--gb-font-body);font-size:var(--gb-fs-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.gb h1,.gb h2,.gb h3,.gb h4,.gb .display{font-family:var(--gb-font-display);letter-spacing:-.01em}
.gb h1{font-size:var(--gb-fs-h1);font-weight:800;margin:0}
.gb h2{font-size:var(--gb-fs-h2);font-weight:700;margin:0}
.gb h3{font-size:var(--gb-fs-h3);font-weight:700;margin:0}
.gb a{color:var(--gb-red-600);text-decoration:none}
.gb a:hover{color:var(--gb-red-700);text-decoration:underline}

/* -------------------------------------------------------------- topbar ---- */
.gb-topbar{
  background:var(--gb-card);border-bottom:3px solid var(--gb-red-600);
  box-shadow:var(--gb-shadow);padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.gb-brand{display:flex;align-items:center;gap:11px}
.gb-brand .logo{width:38px;height:38px;flex:none}
.gb-brand .name{font-family:var(--gb-font-display);font-weight:800;font-size:18px;line-height:1;letter-spacing:-.02em}
.gb-brand .name small{display:block;font-weight:600;font-size:10.5px;letter-spacing:.22em;color:var(--gb-muted);margin-top:3px}
.gb-topbar .meta{font-size:var(--gb-fs-sm);color:var(--gb-muted)}

/* --------------------------------------------------------------- layout ---- */
.gb-wrap{max-width:1240px;margin:0 auto;padding:22px 28px 60px}
.gb-grid{display:grid;gap:var(--gb-space)}
.gb-grid.k2{grid-template-columns:1fr 1fr}
@media(max-width:900px){.gb-grid.k2{grid-template-columns:1fr}}

/* --------------------------------------------------------------- cartão ---- */
.gb-card{background:var(--gb-card);border:1px solid var(--gb-line);border-radius:var(--gb-radius);box-shadow:var(--gb-shadow);padding:16px}
.gb-card h3{margin-bottom:12px}

/* ------------------------------------------------------------------ kpi ---- */
.gb-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:var(--gb-space)}
.gb-kpi{background:var(--gb-card);border:1px solid var(--gb-line);border-radius:var(--gb-radius);box-shadow:var(--gb-shadow);padding:16px;position:relative;overflow:hidden}
.gb-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gb-red-600)}
.gb-kpi.ok::before{background:var(--gb-ok)}.gb-kpi.warn::before{background:var(--gb-warn)}.gb-kpi.info::before{background:var(--gb-info)}.gb-kpi.ink::before{background:var(--gb-c2)}
.gb-kpi .lbl{font-size:var(--gb-fs-sm);color:var(--gb-muted);font-weight:700}
.gb-kpi .val{font-family:var(--gb-font-display);font-size:24px;font-weight:800;margin-top:6px;letter-spacing:-.02em}
.gb-kpi .sub{font-size:var(--gb-fs-xs);color:var(--gb-muted);margin-top:4px}

/* --------------------------------------------------------------- botões ---- */
.gb-btn{font-family:var(--gb-font-body);font-weight:700;font-size:var(--gb-fs-sm);
  padding:9px 16px;border-radius:var(--gb-radius-sm);border:1px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:.14s}
.gb-btn.primary{background:var(--gb-red-600);color:#fff}
.gb-btn.primary:hover{background:var(--gb-red-700)}
.gb-btn.outline{background:#fff;color:var(--gb-red-600);border-color:var(--gb-line)}
.gb-btn.outline:hover{background:var(--gb-red-50);border-color:var(--gb-red-200)}
.gb-btn.ghost{background:transparent;color:var(--gb-muted);border-color:var(--gb-line)}
.gb-btn.ghost:hover{background:var(--gb-card-2);color:var(--gb-ink)}

/* -------------------------------------------------------------- inputs ---- */
.gb-field{display:block}
.gb-field label{display:block;font-size:var(--gb-fs-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--gb-muted);font-weight:700;margin-bottom:5px}
.gb-input,.gb-select{width:100%;padding:9px 11px;border:1px solid var(--gb-line);border-radius:var(--gb-radius-sm);
  font-family:var(--gb-font-body);font-size:var(--gb-fs-sm);background:#fff;color:var(--gb-ink)}
.gb-input:focus,.gb-select:focus{outline:none;border-color:var(--gb-red-500);box-shadow:0 0 0 3px var(--gb-red-50)}

/* ------------------------------------------------------------- segmento ---- */
.gb-seg{display:inline-flex;border:1px solid var(--gb-line);border-radius:var(--gb-radius-sm);overflow:hidden;background:#fff}
.gb-seg button{border:0;background:#fff;padding:8px 14px;font-family:var(--gb-font-body);font-size:var(--gb-fs-sm);font-weight:700;color:var(--gb-muted);cursor:pointer}
.gb-seg button.on{background:var(--gb-red-600);color:#fff}

/* --------------------------------------------------------------- badges ---- */
.gb-tag{display:inline-block;font-size:var(--gb-fs-xs);font-weight:700;padding:2px 9px;border-radius:var(--gb-radius-pill)}
.gb-tag.red{background:var(--gb-red-100);color:var(--gb-red-800)}
.gb-tag.ok{background:#dcfce7;color:#166534}
.gb-tag.warn{background:#fef3c7;color:#92400e}
.gb-tag.info{background:#dbeafe;color:#1e40af}
.gb-tag.neutral{background:#eef1f5;color:#475569}

/* -------------------------------------------------------------- tabela ---- */
.gb-table{width:100%;border-collapse:collapse;font-size:var(--gb-fs-sm)}
.gb-table th,.gb-table td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--gb-line);white-space:nowrap}
.gb-table th{background:var(--gb-card-2);font-size:var(--gb-fs-xs);text-transform:uppercase;letter-spacing:.4px;color:var(--gb-muted);font-weight:700;position:sticky;top:0}
.gb-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.gb-table tr:hover td{background:#fff7f7}

/* --------------------------------------------------------------- barras ---- */
.gb-bar{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:var(--gb-fs-sm)}
.gb-bar .n{width:42%;color:var(--gb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb-bar .track{flex:1;background:#eef1f5;border-radius:6px;height:18px;overflow:hidden}
.gb-bar .fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gb-red-600),var(--gb-red-500))}
.gb-bar .v{width:110px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

/* =============================================================================
   APP SHELL — sidebar + appbar (layout padrão de dashboard)
============================================================================= */
.gb-app{display:flex;min-height:100vh}

/* ---- sidebar ---- */
.gb-side{width:236px;flex:none;background:var(--gb-card);border-right:1px solid var(--gb-line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.gb-side .side-brand{display:flex;align-items:center;padding:18px 20px 16px;text-decoration:none;color:inherit}
.gb-side .side-brand img{display:block;border-radius:var(--gb-radius-sm);transition:.14s}
.gb-side .side-brand:hover img{opacity:.88}
.gb-side .side-brand .logo-full{width:100%;max-width:180px;height:auto}
.gb-side .side-brand .logo-mark{display:none;width:36px;height:36px}
.gb-side .side-sec{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--gb-muted);
  font-weight:700;padding:14px 22px 6px}
.gb-side .side-scroll{flex:1;overflow-y:auto;padding-bottom:8px}
.gb-side .side-scroll .side-sec:first-child{padding-top:6px}
.gb-side nav{display:flex;flex-direction:column;gap:2px;padding:0 12px 4px}
.gb-side nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--gb-radius-sm);
  font-family:var(--gb-font-display);font-weight:600;font-size:13.5px;color:var(--gb-ink-2);
  text-decoration:none;transition:.14s;white-space:nowrap}
.gb-side nav a svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gb-side nav a:hover{background:var(--gb-red-50);color:var(--gb-red-700);text-decoration:none}
.gb-side nav a.on{background:var(--gb-red-600);color:#fff;box-shadow:0 4px 10px rgba(204,0,0,.24)}
.gb-side nav a .dotstatus{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--gb-warn)}
.gb-side nav a.on .dotstatus{background:rgba(255,255,255,.85)}
.gb-side .side-foot{margin-top:auto;padding:14px 16px;border-top:1px solid var(--gb-line);
  font-size:11px;color:var(--gb-muted);line-height:1.5}

/* ---- área principal ---- */
.gb-main{flex:1;min-width:0;display:flex;flex-direction:column}
.gb-appbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gb-line);padding:14px 26px;display:flex;align-items:center;gap:16px}
.gb-appbar .titlebox h1{font-size:20px}
.gb-appbar .titlebox p{margin:2px 0 0;font-size:12.5px;color:var(--gb-muted)}
.gb-appbar .spacer{flex:1}
.gb-appbar .search{display:flex;align-items:center;gap:8px;background:var(--gb-bg);border:1px solid var(--gb-line);
  border-radius:var(--gb-radius-pill);padding:8px 14px;min-width:180px;max-width:280px;flex:1}
.gb-appbar .search svg{width:15px;height:15px;stroke:var(--gb-muted);fill:none;stroke-width:2}
.gb-appbar .search input{border:0;background:transparent;outline:none;font-family:var(--gb-font-body);
  font-size:13px;color:var(--gb-ink);width:100%}
.gb-appbar .iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--gb-line);background:var(--gb-card);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gb-ink-2);transition:.14s}
.gb-appbar .iconbtn:hover{background:var(--gb-red-50);color:var(--gb-red-600);border-color:var(--gb-red-200)}
.gb-appbar .iconbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gb-appbar .avatar{width:38px;height:38px;border-radius:50%;background:var(--gb-red-600);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--gb-font-display);font-weight:700;font-size:14px;flex:none}
.gb-appbar .chip{display:inline-flex;align-items:center;gap:8px;background:var(--gb-card);border:1px solid var(--gb-line);
  border-radius:var(--gb-radius-sm);padding:8px 12px;font-size:12.5px;font-weight:700;color:var(--gb-ink-2);white-space:nowrap}
.gb-appbar .chip svg{width:15px;height:15px;stroke:var(--gb-muted);fill:none;stroke-width:2}

.gb-content{padding:24px 26px 48px;flex:1}
.gb-content .gb-wrap{max-width:none;margin:0;padding:0}   /* neutraliza wrapper antigo dentro do shell */

/* ---- responsivo: sidebar vira rail de ícones ---- */
@media(max-width:900px){
  .gb-side{width:64px}
  .gb-side .side-sec,.gb-side nav a span,.gb-side .side-foot,.gb-side nav a .dotstatus{display:none}
  .gb-side .side-brand{justify-content:center;padding:16px 0 14px}
  .gb-side .side-brand .logo-full{display:none}
  .gb-side .side-brand .logo-mark{display:block}
  .gb-side nav a{justify-content:center;padding:11px 0}
  .gb-appbar .search{display:none}
}