:root {

        --brand-900: #0b1b3a; 
        --brand-800: #102552;
        --brand-700: #1e40af;
        --brand-600: #1d4ed8;
        --brand-500: #2563eb; 
        --accent-rgb: 37, 99, 235;
        --accent-soft: rgba(37, 99, 235, 0.12);
        --accent-strong: rgba(37, 99, 235, 0.24);

        --sidebar-bg: #ffffff;
        --sidebar-text: #0b1220;
        --sidebar-muted: #5b667a;
        --sidebar-border: #e5e9f4;
        --sidebar-active-bg: rgba(47, 86, 179, 0.1);
        --sidebar-hover-bg: rgba(47, 86, 179, 0.06);

        --bg: #f6f8fc;
        --surface: #ffffff;
        --surface-2: #f1f4fb;
        --border: #e5e9f4;
        --text: #0b1220;
        --muted: #5b667a;

        --ok: #21a365;
        --warn: #f2b705;
        --bad: #d83a3a;

        --shadow: 0 10px 30px rgba(14, 30, 62, 0.1);
        --shadow-2: 0 6px 18px rgba(14, 30, 62, 0.12);
        --radius-xl: 18px;
        --radius-lg: 14px;
        --radius-md: 12px;
        --radius-sm: 10px;

        --font:
          ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial,
          "Apple Color Emoji", "Segoe UI Emoji";
        --mono:
          ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Liberation Mono", "Courier New", monospace;

        --pad-1: 8px;
        --pad-2: 12px;
        --pad-3: 16px;
        --pad-4: 20px;
        --pad-5: 24px;
        --pad-6: 28px;
        --pad-7: 32px;

        --sidebar-w: 280px;
        --sidebar-w-collapsed: 92px;
        --topbar-h: 72px;
      }

html[data-theme="dark"] {
        --bg: #212121;
        --surface: #2a2a2a;
        --surface-2: #303030;
        --border: #3a3a3a;
        --text: #ececec;
        --muted: #b4b4b4;

        --shadow: 0 12px 38px rgba(0, 0, 0, 0.32);
        --shadow-2: 0 8px 22px rgba(0, 0, 0, 0.38);

        --sidebar-bg: #171717;
        --sidebar-text: #ececec;
        --sidebar-muted: #b4b4b4;
        --sidebar-border: #2f2f2f;
        --sidebar-active-bg: rgba(255, 255, 255, 0.09);
        --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
      }

html[data-theme="dark"] body {
        background:
          radial-gradient(
            900px 420px at 15% 0%,
            rgba(255, 255, 255, 0.035),
            transparent 0%
          ),
          radial-gradient(
            700px 420px at 85% 0%,
            rgba(255, 255, 255, 0.025),
            transparent 55%
          ),
          var(--bg);
      }

html[data-accent="blue"] {
        --brand-900: #0b1b3a;
        --brand-800: #102552;
        --brand-700: #1e40af;
        --brand-600: #1d4ed8;
        --brand-500: #2563eb;
        --accent-rgb: 37, 99, 235;
        --accent-soft: rgba(37, 99, 235, 0.14);
        --accent-strong: rgba(37, 99, 235, 0.28);
        --sidebar-active-bg: rgba(37, 99, 235, 0.18);
        --sidebar-hover-bg: rgba(37, 99, 235, 0.10);
      }

html[data-accent="pink"] {
        --brand-900: #6b2148;
        --brand-800: #8a2d5e;
        --brand-700: #be185d;
        --brand-600: #db2777;
        --brand-500: #ec4899;
        --accent-rgb: 236, 72, 153;
        --accent-soft: rgba(236, 72, 153, 0.16);
        --accent-strong: rgba(236, 72, 153, 0.30);
        --sidebar-active-bg: rgba(236, 72, 153, 0.20);
        --sidebar-hover-bg: rgba(236, 72, 153, 0.11);
      }

html[data-accent="purple"] {
        --brand-900: #3f1d6b;
        --brand-800: #5b21b6;
        --brand-700: #6d28d9;
        --brand-600: #7c3aed;
        --brand-500: #8b5cf6;
        --accent-rgb: 139, 92, 246;
        --accent-soft: rgba(139, 92, 246, 0.16);
        --accent-strong: rgba(139, 92, 246, 0.30);
        --sidebar-active-bg: rgba(139, 92, 246, 0.20);
        --sidebar-hover-bg: rgba(139, 92, 246, 0.11);
      }

html[data-accent="green"] {
        --brand-900: #143b2b;
        --brand-800: #166534;
        --brand-700: #15803d;
        --brand-600: #16a34a;
        --brand-500: #22c55e;
        --accent-rgb: 34, 197, 94;
        --accent-soft: rgba(34, 197, 94, 0.16);
        --accent-strong: rgba(34, 197, 94, 0.30);
        --sidebar-active-bg: rgba(34, 197, 94, 0.20);
        --sidebar-hover-bg: rgba(34, 197, 94, 0.11);
      }

html[data-accent="red"] {
        --brand-900: #5b1616;
        --brand-800: #7f1d1d;
        --brand-700: #b91c1c;
        --brand-600: #dc2626;
        --brand-500: #ef4444;
        --accent-rgb: 239, 68, 68;
        --accent-soft: rgba(239, 68, 68, 0.16);
        --accent-strong: rgba(239, 68, 68, 0.30);
        --sidebar-active-bg: rgba(239, 68, 68, 0.20);
        --sidebar-hover-bg: rgba(239, 68, 68, 0.11);
      }

html[data-accent="orange"] {
        --brand-900: #5c2d0c;
        --brand-800: #7c3f10;
        --brand-700: #c2410c;
        --brand-600: #ea580c;
        --brand-500: #f97316;
        --accent-rgb: 249, 115, 22;
        --accent-soft: rgba(249, 115, 22, 0.16);
        --accent-strong: rgba(249, 115, 22, 0.30);
        --sidebar-active-bg: rgba(249, 115, 22, 0.20);
        --sidebar-hover-bg: rgba(249, 115, 22, 0.11);
      }

body {
        background:
          radial-gradient(
            980px 460px at 12% -2%,
            rgba(var(--accent-rgb), 0.22),
            transparent 0%
          ),
          radial-gradient(
            760px 420px at 88% 0%,
            rgba(var(--accent-rgb), 0.14),
            transparent 55%
          ),
          linear-gradient(
            180deg,
            color-mix(in srgb, var(--brand-500) 4%, transparent),
            transparent 24%
          ),
          var(--bg);
      }

html[data-theme="dark"] body {
        background:
          radial-gradient(
            980px 460px at 12% -2%,
            rgba(var(--accent-rgb), 0.20),
            transparent 0%
          ),
          radial-gradient(
            760px 420px at 88% 0%,
            rgba(var(--accent-rgb), 0.10),
            transparent 55%
          ),
          linear-gradient(
            180deg,
            rgba(var(--accent-rgb), 0.05),
            transparent 24%
          ),
          var(--bg);
      }

.sidebar {
        background:
          linear-gradient(
            180deg,
            color-mix(in srgb, var(--sidebar-bg) 90%, var(--brand-500) 10%),
            var(--sidebar-bg) 26%
          );
      }

.topbar {
        background:
          linear-gradient(
            180deg,
            color-mix(in srgb, var(--surface) 88%, var(--brand-500) 12%),
            rgba(246, 248, 252, 0.72)
          );
        border-bottom: 1px solid color-mix(in srgb, var(--brand-500) 28%, var(--border));
      }

html[data-theme="dark"] .topbar {
        background:
          linear-gradient(
            180deg,
            color-mix(in srgb, var(--surface) 82%, var(--brand-500) 18%),
            rgba(33, 33, 33, 0.82)
          );
        border-bottom: 1px solid color-mix(in srgb, var(--brand-500) 28%, var(--border));
      }

.card,
      .panel,
      .kpi,
      .chip,
      .icon-btn,
      table,
      .login-card {
        border-color: color-mix(in srgb, var(--border) 72%, var(--brand-500) 28%);
      }

.card,
      .panel,
      .kpi,
      .login-card {
        box-shadow:
          0 10px 30px rgba(14, 30, 62, 0.08),
          0 0 0 1px rgba(var(--accent-rgb), 0.05);
      }

.nav a.active {
        box-shadow: inset 3px 0 0 var(--brand-500);
      }

.avatar {
        background:
          linear-gradient(
            180deg,
            color-mix(in srgb, var(--brand-500) 70%, white 30%),
            color-mix(in srgb, var(--brand-700) 76%, white 24%)
          );
        border-color: color-mix(in srgb, var(--brand-500) 60%, transparent);
        color: #fff;
      }

.icon-btn:hover,
      .btn:hover,
      .input:focus,
      .select:focus,
      .textarea:focus {
        border-color: color-mix(in srgb, var(--brand-500) 62%, transparent);
      }

.input:focus,
      .select:focus,
      .textarea:focus {
        box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16);
      }

thead th {
        background: color-mix(in srgb, var(--surface-2) 78%, var(--brand-500) 22%);
      }

.page-title .h1,
      .panel-head .h2,
      .cronograma-card-title,
      .login-title {
        color: color-mix(in srgb, var(--text) 86%, var(--brand-700) 14%);
      }

.chip {
        background:
          linear-gradient(
            180deg,
            color-mix(in srgb, var(--surface) 84%, var(--brand-500) 16%),
            var(--surface)
          );
      }

.brand-title {
        color: color-mix(in srgb, var(--sidebar-text) 80%, var(--brand-700) 20%);
      }

/* O Google Drive bloqueia as imagens usadas pelo Apps Script quando o GEPRO roda em localhost. */
.brand-logo-img,
.login-logo-img {
  display: none !important;
}
.brand-logo::before,
.login-icon::before {
  content: "";
  display: block;
  background: url("https://raw.githubusercontent.com/gerenprojetospremodisa-svg/gepro-assets/main/gepro_favicon_64.png") center / contain no-repeat;
}
.brand-logo::before {
  width: 44px;
  height: 44px;
}
.login-icon::before {
  width: 82px;
  height: 82px;
}