/* ═══════════════════════════════════════════════════════════════
   theme-timeg.css — skin "TimeG" (visual da landing page)
   Tudo travado em [data-skin="timeg"]: nenhuma outra paleta é afetada.
   Carregar DEPOIS de components.css no index.html.
   Modo escuro: [data-skin-dark] (variante carvão, boa em OLED).
   ═══════════════════════════════════════════════════════════════ */

[data-skin="timeg"] {
  --tg-tinta:      #04141a;
  --tg-tinta-2:    #0b2c36;
  --tg-tinta-3:    #0f3a45;
  --tg-turquesa:   #13b5ac;
  --tg-turquesa-2: #0f9c94;
  --tg-agua:       #57f0dc;
  --tg-ambar:      #ffb347;

  --tg-r:    14px;   /* raio padrão   */
  --tg-r-sm: 10px;   /* raio pequeno  */
  --tg-linha: linear-gradient(90deg, var(--tg-turquesa), var(--tg-agua));

  --font-titulo: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
  --font-dado:   'IBM Plex Mono', ui-monospace, monospace;
}

/* ── Tipografia ───────────────────────────────────────────────── */
[data-skin="timeg"] .card-title,
[data-skin="timeg"] .kpi-value,
[data-skin="timeg"] .modal-header,
[data-skin="timeg"] .topbar-title,
[data-skin="timeg"] #topbar-title,
[data-skin="timeg"] h1,
[data-skin="timeg"] h2,
[data-skin="timeg"] h3 {
  font-family: var(--font-titulo);
  letter-spacing: -0.015em;
}
[data-skin="timeg"] .card-title { font-weight: 700; }
[data-skin="timeg"] .kpi-value  { font-weight: 800; font-variant-numeric: tabular-nums; }

[data-skin="timeg"] .kpi-label,
[data-skin="timeg"] .form-label,
[data-skin="timeg"] .nav-section-label,
[data-skin="timeg"] .badge,
[data-skin="timeg"] th {
  font-family: var(--font-dado);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 600;
}
[data-skin="timeg"] td { font-variant-numeric: tabular-nums; }

/* ── Menu lateral ─────────────────────────────────────────────── */
[data-skin="timeg"] .sidebar {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(19,181,172,.16), transparent 60%),
    var(--tg-tinta);
  border-right: 1px solid rgba(87,240,220,.10);
}
[data-skin="timeg"] .nav-section-label { color: rgba(87,240,220,.55); }

[data-skin="timeg"] .nav-item {
  border-radius: var(--tg-r-sm);
  position: relative;
  transition: background .16s ease, color .16s ease;
}
[data-skin="timeg"] .nav-item:hover { background: rgba(87,240,220,.09); }
[data-skin="timeg"] .nav-item.active {
  background: rgba(19,181,172,.17);
  color: #eafffb;
}
[data-skin="timeg"] .nav-item.active::before {
  content: '';
  position: absolute; left: -6px; top: 18%; bottom: 18%;
  width: 3px; border-radius: 3px; background: var(--tg-linha);
}
[data-skin="timeg"] .nav-item svg { opacity: .85; }
[data-skin="timeg"] .nav-item.active svg { opacity: 1; color: var(--tg-agua); }

/* ── Topo ─────────────────────────────────────────────────────── */
[data-skin="timeg"] .topbar {
  backdrop-filter: saturate(1.3) blur(8px);
  border-bottom: 1px solid var(--border);
}

/* ── Cartões ──────────────────────────────────────────────────── */
[data-skin="timeg"] .card {
  border-radius: var(--tg-r);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(4,20,26,.04), 0 8px 24px -18px rgba(4,20,26,.35);
}
[data-skin="timeg"] .kpi {
  border-radius: var(--tg-r);
  position: relative;
  overflow: hidden;
}
[data-skin="timeg"] .kpi::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--tg-linha); opacity: .8;
}

/* ── Botões ───────────────────────────────────────────────────── */
[data-skin="timeg"] .btn {
  border-radius: var(--tg-r-sm);
  font-weight: 650;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
[data-skin="timeg"] .btn:active { transform: translateY(1px); }
[data-skin="timeg"] .btn-primary {
  background: linear-gradient(135deg, var(--tg-turquesa-2), var(--tg-turquesa));
  border-color: transparent;
  color: #04141a;
  box-shadow: 0 6px 18px -10px rgba(19,181,172,.9);
}
[data-skin="timeg"] .btn-primary:hover { filter: brightness(1.06); }

/* ── Formulários ──────────────────────────────────────────────── */
[data-skin="timeg"] .input,
[data-skin="timeg"] select,
[data-skin="timeg"] textarea {
  border-radius: var(--tg-r-sm);
  transition: border-color .14s ease, box-shadow .14s ease;
}
[data-skin="timeg"] .input:focus,
[data-skin="timeg"] select:focus,
[data-skin="timeg"] textarea:focus {
  border-color: var(--tg-turquesa);
  box-shadow: 0 0 0 3px rgba(19,181,172,.18);
  outline: none;
}

/* ── Abas ─────────────────────────────────────────────────────── */
[data-skin="timeg"] .tab { border-radius: var(--tg-r-sm) var(--tg-r-sm) 0 0; }
[data-skin="timeg"] .tab.active {
  box-shadow: inset 0 -2px 0 0 var(--tg-turquesa);
  color: var(--accent-text);
}

/* ── Selos e modais ───────────────────────────────────────────── */
[data-skin="timeg"] .badge { border-radius: 999px; }
[data-skin="timeg"] .modal { border-radius: 18px; overflow: hidden; }
[data-skin="timeg"] .modal-header { border-bottom: 1px solid var(--border); }
[data-skin="timeg"] .modal-header::after {
  content: ''; display: block; height: 2px; margin-top: 10px;
  background: var(--tg-linha); opacity: .55; border-radius: 2px;
}
[data-skin="timeg"] .spinner { border-top-color: var(--tg-turquesa); }

/* ── Tabelas ──────────────────────────────────────────────────── */
[data-skin="timeg"] .table-wrap { border-radius: var(--tg-r); overflow: hidden; }
[data-skin="timeg"] thead th { background: var(--surface2); }

/* ═══ MODO ESCURO — variante carvão ═══════════════════════════ */
[data-skin="timeg"][data-skin-dark] .sidebar {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(19,181,172,.12), transparent 60%),
    #010a0e;
  border-right: 1px solid rgba(87,240,220,.08);
}
[data-skin="timeg"][data-skin-dark] .card,
[data-skin="timeg"][data-skin-dark] .kpi {
  box-shadow: 0 1px 0 rgba(87,240,220,.05) inset, 0 10px 30px -22px #000;
}
[data-skin="timeg"][data-skin-dark] .btn-primary {
  background: linear-gradient(135deg, var(--tg-turquesa), var(--tg-agua));
  color: #01161a;
}
[data-skin="timeg"][data-skin-dark] .input:focus,
[data-skin="timeg"][data-skin-dark] select:focus,
[data-skin="timeg"][data-skin-dark] textarea:focus {
  border-color: var(--tg-agua);
  box-shadow: 0 0 0 3px rgba(87,240,220,.16);
}
/* iframe da agenda do Google não fica branco no escuro — bloco removível */
[data-skin="timeg"][data-skin-dark] .agenda-frame iframe,
[data-skin="timeg"][data-skin-dark] iframe[src*="calendar.google"] {
  filter: invert(.92) hue-rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  [data-skin="timeg"] * { transition: none !important; }
}