/* ==========================================================================
   0.  RESET & TOKENS
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
     -webkit-font-smoothing:antialiased;color:var(--c-ink-900);background:var(--c-bg-body);min-height:100vh}
img,svg,video{max-width:100%;display:block}

:root{
  /* light palette */
  --c-primary-500:#6366f1; --c-primary-600:#4f46e5;
  --c-success-500:#10b981; --c-warning-500:#f59e0b; --c-error-500:#ef4444;
  --c-ink-900:#111827; --c-ink-700:#374151; --c-ink-500:#6b7280;
  --c-surface-0:#ffffff; --c-surface-100:#f8fafc; --c-surface-200:#f1f5f9;
  --c-bg-body:var(--c-surface-100);
  --radius-s:6px; --radius-m:10px; --radius-l:14px; --blur:16px;
  --shadow-s:0 1px 2px rgba(0,0,0,.06);
  --shadow-m:0 4px 12px rgba(0,0,0,.08);
  --transition:.25s ease;

  /* typography scale */
  --step--2:0.68rem; --step--1:0.83rem; --step-0:1rem;
  --step-1:1.125rem;  --step-2:1.25rem;  --step-3:1.5rem;
}

/* dark‑mode support (ativado via JS toggle) */
[data-theme="dark"]{
  --c-ink-900:#f3f4f6; --c-ink-700:#d1d5db; --c-ink-500:#9ca3af;
  --c-surface-0:#1f2937; --c-surface-100:#111827; --c-surface-200:#0f172a;
  --c-bg-body:var(--c-surface-100);
  --shadow-s:0 1px 2px rgba(0,0,0,.8);
  --shadow-m:0 4px 12px rgba(0,0,0,.6);
}

/* ==========================================================================
   1.  UTILITY CLASSES
   ========================================================================== */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7em 1.3em;
     border-radius:var(--radius-m);border:none;cursor:pointer;font-weight:600;
     transition:var(--transition);user-select:none}
.btn-primary{background:linear-gradient(135deg,var(--c-primary-500),var(--c-primary-600));
             color:#fff;box-shadow:var(--shadow-m)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--c-ink-700)}
.btn-warning{background:var(--c-warning-500);color:#fff}
.btn-success{background:var(--c-success-500);color:#fff}

.badge{display:inline-flex;align-items:center;font-size:var(--step--2);
      font-weight:700;padding:.3em .6em;border-radius:9999px;background:var(--c-surface-200)}

input,textarea,select{width:100%;padding:.75em 1em;border:2px solid var(--c-surface-200);
                      border-radius:var(--radius-s);background:var(--c-surface-0);
                      font:inherit;color:inherit;transition:var(--transition)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--c-primary-500);
                                        box-shadow:0 0 0 3px rgba(99,102,241,.2)}

.scroll-y{overflow-y:auto}
.hidden{display:none!important}

/* toast / notif */
.notif{position:fixed;top:1.25rem;left:50%;transform:translateX(-50%);
       padding:1rem 1.5rem;border-radius:var(--radius-m);box-shadow:var(--shadow-m);
       background:var(--c-ink-900);color:#fff;opacity:0;pointer-events:none;
       transition:opacity .4s var(--transition)}
.notif.show{opacity:1}

/* ==========================================================================
   2.  GLASS HEADER & NAVBAR  – Reescrito em 13 jun 2025
   ========================================================================== */

/* ----- 2.1  Cabeçalho geral ------------------------------------------------ */
.main-header{
  position:sticky;
  top:0;
  width:100%;
  z-index:110;          /* acima de cards e toolbars */
  isolation:isolate;    /* impede que o blur “vaze” p/ elementos fora do header */
}

/* Frosted‑glass: pseudo‑elemento cobre todo o header */
.main-header::before{
  content:"";
  position:absolute;
  inset:0;
  backdrop-filter:saturate(180%) blur(var(--blur));
  background:rgba(255,255,255,.65);                 /* light mode */
  border-bottom:1px solid rgba(0,0,0,.08);
  transition:backdrop-filter .3s ease,background .3s ease;
  z-index:-1;                                       /* fica atrás do conteúdo */
}
/* Dark mode */
[data-theme="dark"] .main-header::before{
  background:rgba(17,24,39,.60);
  border-bottom-color:rgba(255,255,255,.08);
}

/* (O div.header-blur original tornou‑se redundante; escondemos para evitar sobreposição) */
.header-blur{display:none!important}

/* ----- 2.2  Navbar interno ------------------------------------------------- */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:.9rem clamp(1rem,4vw,2rem);
  max-width:1280px;
  margin-inline:auto;
}

/* ----- 2.3  Branding ------------------------------------------------------- */
.nav-brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  font-size:var(--step-1);
  font-weight:700;
  color:var(--c-ink-900);
  text-decoration:none;
}
.logo-container{
  position:relative;
  width:40px;aspect-ratio:1/1;flex-shrink:0;
}
.logo{
  width:100%;height:100%;object-fit:cover;border-radius:var(--radius-s);
}
.logo-glow{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 10px 2px rgba(99,102,241,.6);
  opacity:.5;pointer-events:none;mix-blend-mode:color-dodge;
}

/* ----- 2.4  Menu principal ------------------------------------------------- */
.nav-menu{
  display:flex;align-items:center;gap:1.25rem;list-style:none;margin:0;padding:0;
}
.nav-link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:600;font-size:var(--step--1);text-decoration:none;
  color:var(--c-ink-500);position:relative;transition:color .25s ease;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  border-radius:2px;background:var(--c-primary-500);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav-link:hover,
.nav-link:focus-visible{color:var(--c-primary-600);}
.nav-link:hover::after,
.nav-link.active::after{transform:scaleX(1);}
.nav-link.active{
  color:var(--c-primary-600);
  font-weight:700;
}

/* ----- 2.5  Área do usuário e controles ----------------------------------- */
.user-section{display:flex;align-items:center;gap:1.25rem;}
.theme-toggle{
  appearance:none;background:none;border:none;
  font-size:1.25rem;line-height:1;color:var(--c-ink-500);
  cursor:pointer;padding:.25rem;border-radius:50%;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.theme-toggle:hover{
  background:var(--c-surface-200);
  color:var(--c-primary-600);
  transform:rotate(20deg);
}
.user-profile{display:flex;align-items:center;gap:.75rem;cursor:pointer;}
.user-avatar{
  width:36px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  background:var(--c-surface-200);display:grid;place-items:center;font-size:1rem;
}
.user-avatar img{width:100%;height:100%;object-fit:cover;}
.user-info{display:flex;flex-direction:column;font-size:var(--step--2);line-height:1.2;}
.user-name{font-weight:600;color:var(--c-ink-900);}
.user-role{color:var(--c-ink-500);}

/* ----- 2.6  Mobile tweaks -------------------------------------------------- */
@media(max-width:640px){
  .nav-menu{display:none;}          /* esconder menu; hambúrguer pode ser adicionado depois */
  .user-info{display:none;}         /* mantém layout compacto */
}


/* ==========================================================================
   3.  LOADING OVERLAY (com efeito Aurora)
   ========================================================================== */
.loading-overlay{position:fixed;inset:0;display:flex;flex-direction:column;
                 justify-content:center;align-items:center;gap:1rem;
                 background:linear-gradient(135deg,#dfe9f3 0%,#ffffff 100%);
                 z-index:999;transition:opacity .4s var(--transition)}
.loading-overlay.hidden{opacity:0;pointer-events:none}
.loading-spinner{width:3rem;height:3rem;border:4px solid rgba(0,0,0,.1);
                 border-top:4px solid var(--c-primary-500);border-radius:50%;
                 animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   4.  MODAL (shared)
   ========================================================================== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;
       place-items:center;opacity:0;pointer-events:none;transition:var(--transition)}
.modal.active{opacity:1;pointer-events:auto}
.modal-content{background:var(--c-surface-0);border-radius:var(--radius-l);
               width:min(95%,660px);max-height:90vh;padding:2rem;overflow:auto;
               box-shadow:var(--shadow-m)}
.modal-header,.modal-footer{display:flex;align-items:center;justify-content:space-between}

/* ==========================================================================
   5.  RESPONSIVE HELPERS
   ========================================================================== */
@media (max-width:640px){
  .navbar{padding:.5rem 1rem}
  .nav-menu{display:none} /* simple hamburger could be added */
}