/* =========================================================================
   HUB MATTAR VILELA — Estilos
   Reconstruído a partir do design do Claude Design, em CSS puro.
   As cores do escritório ficam nas "variáveis" abaixo (--accent, --navy...).
   ========================================================================= */

*{ box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Paleta — TEMA CLARO (padrão) */
.hub {
  --bg:#EBEFF2; --surface:#FFFFFF; --surface-2:#F4F8FA; --border:#E2E8EC;
  --ink:#002E45; --ink-2:#3C5666; --muted:#7C929E;
  --accent:#018FBF; --accent-soft:rgba(1,143,191,.10);
  --navy:#002E45; --danger:#C0472A; --danger-soft:rgba(192,71,42,.10);
  --shadow:0 1px 2px rgba(0,46,69,.05), 0 8px 24px rgba(0,46,69,.06);
  --shadow-hover:0 2px 4px rgba(0,46,69,.06), 0 16px 36px rgba(0,46,69,.12);

  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans',-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Paleta — TEMA ESCURO */
.hub[data-theme="dark"] {
  --bg:#03212E; --surface:#072E3F; --surface-2:#0B3548; --border:#11465C;
  --ink:#EAF3F7; --ink-2:#B3CBD6; --muted:#6E8C9B;
  --accent:#35ABD6; --accent-soft:rgba(53,171,214,.14);
  --navy:#002E45; --danger:#E8775A; --danger-soft:rgba(232,119,90,.13);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.38);
  --shadow-hover:0 2px 6px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.5);
}
body { background:#011A25; }

/* Mostrar/esconder ícones conforme o tema */
.hub .only-dark { display:none; }
.hub[data-theme="dark"] .only-light { display:none; }
.hub[data-theme="dark"] .only-dark { display:inline-flex; }
.hub img.only-dark { display:none; }
.hub[data-theme="dark"] img.only-light { display:none; }
.hub[data-theme="dark"] img.only-dark { display:block; }

.hub ::selection { background:var(--accent); color:#fff; }

/* Barra de rolagem do painel de férias */
.hub .scroll::-webkit-scrollbar { width:8px; }
.hub .scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:8px; }

/* Etiquetas (tags) da agenda */
.hub .tag { font-size:10px; font-weight:600; letter-spacing:.5px; padding:3px 7px; border-radius:5px; text-transform:uppercase; white-space:nowrap; }
.hub .tag-g  { background:rgba(1,143,191,.12); color:#0a7fa8; }
.hub .tag-ej { background:rgba(0,46,69,.10);  color:#002E45; }
.hub[data-theme="dark"] .tag-g  { background:rgba(53,171,214,.18); color:#7ecbe8; }
.hub[data-theme="dark"] .tag-ej { background:rgba(255,255,255,.10); color:#cfe2ea; }

/* ---------- Layout geral ---------- */
.wrap { max-width:1320px; margin:0 auto; padding:26px 40px 80px; }

.header {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:22px; border-bottom:1px solid var(--border);
}
.brand { display:inline-flex; align-items:center; text-decoration:none; }
.brand img { height:30px; width:auto; }

.header-right { display:flex; align-items:center; gap:18px; }
.clock { font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); letter-spacing:.4px; }
.date-short { font-size:11.5px; color:var(--muted); margin-top:2px; }

/* Botões redondos do cabeçalho */
.icon-btn {
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--surface); color:var(--ink-2);
  border-radius:10px; cursor:pointer; transition:background .15s,color .15s;
}
.icon-btn:hover { background:var(--surface-2); color:var(--ink); }

/* Botão "Entrar com Google" */
.google-btn {
  display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 14px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; font-family:inherit;
  transition:background .15s;
}
.google-btn:hover { background:var(--surface-2); }

/* Chip do perfil conectado */
.profile-chip {
  display:flex; align-items:center; gap:9px; padding:5px 6px 5px 5px;
  border:1px solid var(--border); background:var(--surface); border-radius:10px;
}
.profile-chip img { width:28px; height:28px; border-radius:50%; object-fit:cover; background:var(--surface-2); }
.profile-chip .pname { font-size:13px; font-weight:500; color:var(--ink); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.signout-btn { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:none; background:none; color:var(--muted); border-radius:7px; cursor:pointer; }
.signout-btn:hover { background:var(--surface-2); color:var(--ink); }

/* Saudação */
.hero { padding:42px 0 38px; }
.hero h1 { font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:46px; line-height:1.04; color:var(--ink); margin:0; letter-spacing:-.4px; }
.name-btn { font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:500; font-size:46px; color:var(--accent); background:none; border:none; padding:0; margin:0; cursor:pointer; letter-spacing:-.4px; line-height:1; }
.hero .full-date { margin:12px 0 0; font-size:15px; color:var(--muted); }
.demo-note { margin:9px 0 0; font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.demo-note button { background:none; border:none; padding:0; font:inherit; font-weight:600; color:var(--accent); cursor:pointer; }

/* Grade principal (esquerda + coluna direita) */
.grid2 { display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:30px; align-items:start; }

/* Base de cartão */
.card { background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); }

/* 4 indicadores do topo */
.stats4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat-card {
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:15px 16px 14px; box-shadow:var(--shadow);
  text-decoration:none; color:inherit;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:var(--accent); }
.stat-card.danger:hover { border-color:var(--danger); }
.stat-ico { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; background:var(--accent-soft); color:var(--accent); }
.stat-ico.danger { background:var(--danger-soft); color:var(--danger); }
.stat-num { font-size:30px; font-weight:600; line-height:1; margin-top:14px; font-variant-numeric:tabular-nums; color:var(--ink); }
.stat-num.danger { color:var(--danger); }
.stat-lbl { font-size:12.5px; color:var(--muted); margin-top:5px; }
.row-between { display:flex; align-items:center; justify-content:space-between; }

/* Alerta de prazos vencidos */
.alert { margin-top:14px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--danger); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); }
.alert-title { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--danger); }
.alert-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--border); }
.alert-row .t { font-size:14px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alert-row .c { font-size:12px; color:var(--muted); margin-top:2px; }
.alert-row .d { flex:none; font-size:11.5px; font-weight:600; color:var(--danger); background:var(--danger-soft); border-radius:6px; padding:3px 9px; white-space:nowrap; }

/* Títulos de seção */
.section { margin-top:36px; }
.section-head { display:flex; align-items:center; gap:10px; margin:0 0 16px; }
.section-head .lbl { font-size:12px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); }
.section-head .count { font-size:11px; font-weight:600; color:var(--accent); background:var(--accent-soft); border-radius:20px; padding:2px 9px; }

/* Acesso rápido */
.quick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:14px; }
.quick-card {
  position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:106px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:15px;
  text-decoration:none; color:inherit; box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.quick-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:var(--accent); }
.quick-ico { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:var(--accent-soft); color:var(--accent); }
.quick-arrow { position:absolute; top:15px; right:15px; }
.quick-name { font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-2); }

/* Ferramentas & manuais */
.tools-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
.tool-card {
  display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border);
  border-radius:13px; padding:14px 16px; text-decoration:none; color:inherit; box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.tool-card:hover { transform:translateY(-1px); box-shadow:var(--shadow-hover); border-color:var(--accent); }
.tool-ico { flex:none; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:var(--surface-2); color:var(--ink-2); }
.tool-txt { flex:1; min-width:0; }
.tool-txt .t { display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
.tool-txt .s { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }

/* Coluna direita */
.right-col { display:flex; flex-direction:column; gap:20px; position:sticky; top:24px; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:17px 18px 15px; }
.panel-head .title { display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink); }
.panel-legend { display:flex; align-items:center; gap:12px; font-size:10.5px; color:var(--muted); }
.panel-legend span { display:inline-flex; align-items:center; gap:5px; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot.g { background:var(--accent); }
.dot.ej { background:var(--navy); }
.panel .count { font-size:11px; font-weight:600; color:var(--accent); background:var(--accent-soft); border-radius:20px; padding:2px 9px; }

/* Linha da agenda */
.agenda-row { display:flex; gap:13px; padding:13px 18px; border-top:1px solid var(--border); }
.agenda-row .time { flex:none; width:42px; font-size:13px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; padding-top:1px; }
.agenda-row .body { flex:1; min-width:0; }
.agenda-row .body .at { font-size:13.5px; font-weight:500; color:var(--ink); line-height:1.35; }
.panel-foot { display:flex; align-items:center; justify-content:center; gap:6px; padding:13px; border-top:1px solid var(--border); font-size:12.5px; font-weight:600; color:var(--accent); text-decoration:none; }
.panel-foot:hover { background:var(--surface-2); }

/* Férias */
.ferias-list { max-height:296px; overflow-y:auto; }
.ferias-row { display:flex; align-items:center; gap:12px; padding:11px 18px; border-top:1px solid var(--border); }
.ferias-av { flex:none; width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:12.5px; font-weight:600; }
.ferias-row .body { flex:1; min-width:0; }
.ferias-row .fname { font-size:14px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ferias-row .frange { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin-top:2px; }

/* Utilidades */
.hidden { display:none !important; }

/* Responsivo */
@media (max-width:980px) {
  .grid2 { grid-template-columns:1fr !important; }
  .stats4 { grid-template-columns:repeat(2,1fr) !important; }
  .wrap { padding:20px 18px 60px; }
  .hero h1, .name-btn { font-size:36px; }
}