:root {
    --navy-900: #0a1a33;
  --navy-800: #0f2547;
  --navy-700: #16325c;
  --navy-600: #1e4076;
  --navy-500: #2b5490;
  --navy-100: #e6ecf6;
  --navy-050: #f2f6fc;

    --gold-600: #c99a2e;
  --gold-500: #e9b949;
  --gold-400: #f3cf7a;
  --gold-100: #fdf3dc;

    --white: #ffffff;
  --grey-050: #f6f8fb;
  --grey-100: #eef1f6;
  --grey-200: #e1e6ee;
  --grey-300: #ccd4e0;
  --grey-400: #9aa6b8;
  --grey-500: #5a6678; /* 4.5:1 sobre as superfícies claras (era #6b7789, 4.0–4.4:1) */
  --grey-600: #4c5768;
  --grey-700: #333d4d;

    --state-pending: #7b8aa3;
  --state-pending-bg: #eef1f7;
  --state-progress: #2f80ed;
  --state-progress-bg: #e6f0fd;
  --state-done: #1f9d64;
  --state-done-bg: #e5f6ee;
  --state-late: #d9534f;
  --state-late-bg: #fdecec;

    --prio-low: #1f9d64;
  --prio-low-bg: #e5f6ee;
  --prio-mid: #c99a2e;
  --prio-mid-bg: #fdf3dc;
  --prio-high: #d9534f;
  --prio-high-bg: #fdecec;

    --app-bg: var(--grey-050);
  --surface: var(--white);
  --surface-alt: var(--grey-050);
  --border: var(--grey-200);
  --border-strong: var(--grey-300);
  --text: var(--navy-800);
  --text-muted: var(--grey-500);
  --text-invert: var(--white);

    --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    Helvetica, Arial, sans-serif;
  --fs-xs: 0.6875rem;     --fs-sm: 0.75rem;       --fs-md: 0.8125rem;     --fs-base: 0.875rem;    --fs-lg: 1rem;          --fs-xl: 1.25rem;       --fs-2xl: 1.5rem;       --fs-3xl: 2rem;         --fs-4xl: 2.75rem;
    --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

    --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

    --sh-xs: 0 1px 2px rgba(15, 37, 71, 0.06);
  --sh-sm: 0 2px 6px rgba(15, 37, 71, 0.07);
  --sh-md: 0 6px 18px rgba(15, 37, 71, 0.09);
  --sh-lg: 0 16px 40px rgba(15, 37, 71, 0.14);

    --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 64px;
  --control-h: 36px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 140ms var(--ease);
  --t-med: 220ms var(--ease);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* Sem isto, qualquer elemento com display:flex/grid/inline-block
   definido por uma classe (ex.: .btn-icon) fica sempre visível mesmo
   com o atributo "hidden" — regras de autor sobrepõem-se sempre à
   folha de estilos do próprio browser, independentemente da
   especificidade, e é essa que dá display:none ao [hidden].
   Duplica-se o seletor (em vez de usar !important) só para ganhar
   especificidade sobre uma única classe — !important sobrepunha-se
   também a "elemento.style.display" definido por JS em páginas que
   ainda alternam a visibilidade assim sem remover o atributo
   "hidden" do HTML inicial (ex.: beach-reservations.js). */
[hidden][hidden] {
  display: none;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  height: 100%;
    overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background-color: var(--app-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:has(.auth) {
  height: auto;
  overflow: auto;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--navy-800);
}

h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-base); }

.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--fs-sm); }
.text-strong { font-weight: 600; }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-400);
}

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.grow { flex: 1; }
.hidden { display: none !important; }

.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 22px; height: 22px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--navy-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--grey-300) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var(--grey-300);
  border: 3px solid transparent;
  border-radius: var(--r-full);
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--grey-400); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  transition: opacity 380ms ease;
}

#page-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.page-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}

.page-loader__logo {
  width: 240px;
  height: auto;
}

.page-loader__spinner {
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  /* Só azuis-marinho, a cor do logótipo por cima (sem o dourado que o deixava amarelado). */
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--navy-100) 90deg,
    var(--navy-500) 300deg,
    var(--navy-800) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  animation: page-loader-spin 950ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes page-loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader__spinner { animation-duration: 1.9s; }
}

@media (max-width: 640px) {
  .input,
  .select,
  .textarea,
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

.impersonation-banner {
  /* "sticky", não "fixed": fica sempre à mão ao deslizar a página, mas
     ocupa espaço real no topo do documento — "fixed" ficava por cima do
     cabeçalho de qualquer página (o cartão de vidro flutuante do People
     e do Perfil da Entidade incluídos), cortando-lhe o topo. */
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-4);
  background: var(--gold-500);
  color: var(--navy-900);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--sh-sm);
}

.impersonation-banner button {
  border: none;
  border-radius: var(--r-md);
  padding: 4px 12px;
  background: var(--navy-900);
  color: #ffffff;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}

.impersonation-banner button:hover {
  background: var(--navy-700);
}