@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');


/* Tema claro (padrão) */
:root {
   color-scheme: light;
   --brand: #e3262b;
   --bg: #f6f7f9;
   --bg-glow-1: rgba(227, 38, 43, .08);
   --bg-glow-2: rgba(99, 125, 160, .12);
   --ink: #0f172a;
   --ink-soft: #475569;
   --ink-mute: #94a3b8;
   --surface: rgba(255, 255, 255, .85);
   --stroke: rgba(15, 23, 42, .07);
   --field: #fff;
   --chip: #f1f5f9;
   --logo-bg: #fff;
   --header-bg: rgba(255, 255, 255, .7);
   --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
   --shadow-hover: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px -10px rgba(15, 23, 42, .15);
   --sk-1: #eef1f5;
   --sk-2: #f8fafc;
   --logo-filter: none;
}

/* Tema escuro */
:root[data-theme="dark"] {
   color-scheme: dark;
   --bg: #0b0f17;
   --bg-glow-1: rgba(227, 38, 43, .12);
   --bg-glow-2: rgba(99, 125, 160, .14);
   --ink: #e6e9ef;
   --ink-soft: #a3abb9;
   --ink-mute: #6b7485;
   --surface: rgba(22, 27, 38, .82);
   --stroke: rgba(255, 255, 255, .08);
   --field: #121722;
   --chip: rgba(255, 255, 255, .06);
   --logo-bg: #eceef2;
   --header-bg: rgba(11, 15, 23, .7);
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
   --shadow-hover: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -10px rgba(0, 0, 0, .6);
   --sk-1: #161b26;
   --sk-2: #1e2532;
   --logo-filter: invert(1) hue-rotate(180deg) saturate(1.4);
}

html {
   font-size: 14px;
}

body {
   font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
   background-color: var(--bg);
   background-image:
      radial-gradient(900px 500px at 0% -10%, var(--bg-glow-1), transparent 60%),
      radial-gradient(800px 500px at 100% 0%, var(--bg-glow-2), transparent 60%);
   background-attachment: fixed;
   color: var(--ink);
   -webkit-font-smoothing: antialiased;
   transition: background-color .25s, color .25s;
}

.app-header {
   position: sticky;
   top: 0;
   z-index: 1030;
   background: var(--header-bg);
   backdrop-filter: saturate(180%) blur(14px);
   -webkit-backdrop-filter: saturate(180%) blur(14px);
   border-bottom: 1px solid var(--stroke);
}

   .app-header .navbar {
      padding: 14px 0;
   }

   .app-header .navbar-brand img {
      filter: var(--logo-filter);
   }

/* Seletor de tema */
.theme-switch {
   display: inline-flex;
   gap: 2px;
   padding: 3px;
   border-radius: 12px;
   background: var(--chip);
   border: 1px solid var(--stroke);
}

   .theme-switch button {
      width: 32px;
      height: 30px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: var(--ink-mute);
      cursor: pointer;
      transition: background .2s, color .2s, box-shadow .2s;
   }

      .theme-switch button:hover {
         color: var(--ink);
      }

      .theme-switch button:focus-visible {
         outline: 2px solid var(--brand);
         outline-offset: 1px;
      }

      .theme-switch button[aria-pressed="true"] {
         background: var(--field);
         color: var(--ink);
         box-shadow: var(--shadow-sm);
      }

   .theme-switch svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
   }

body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   min-height: 100dvh;
}

.app-content {
   flex: 1 0 auto;
}

.app-footer {
   flex-shrink: 0;
   padding: 18px 16px;
   text-align: center;
   font-size: .8rem;
   color: var(--ink-mute);
   border-top: 1px solid var(--stroke);
}

@media (min-width: 768px) {
   html {
      font-size: 16px;
   }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
   box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
   position: relative;
   min-height: 100%;
}

body {
   margin-bottom: 0;
}

@media (max-width: 575.98px) {
   .app-header .navbar {
      padding: 10px 0;
   }

   .app-header .navbar-brand img {
      height: 28px !important;
   }
}
