/* ==========================================================================
   Primasole — Fundação visual (design foundation).

   Tokens --ds-* (cor, espaçamento, raio, tipografia), os 4 temas
   (claro / escuro / alto contraste / vidro) e os átomos base: botões, modal,
   avatar e campos de formulário. É o primeiro CSS que a aplicação carrega;
   componentes, features e telas vêm depois e só consomem estes tokens.

   Identidade: o vermelho da marca P.S.C. sobre neutros quentes (pedra), com
   superfícies pastel. A paleta categórica dos gráficos foi validada para
   daltonismo (protan/deutan/tritan) e contraste mínimo contra a superfície de
   cada tema.

   O vermelho de marca é levemente quente (tijolo) e o de erro puxa para o
   carmim: são vizinhos, então a distinção vem do matiz e da forma — marca em
   preenchimento sólido, erro em selo pastel.
   ========================================================================== */

/* ===== TEMA CLARO (padrão) ===== */
[data-color-mode="light"] {
  color-scheme: light;

  /* ---- TEXT ---- */
  --ds-text: #23201e;
  --ds-text-subtle: #5b544f;
  --ds-text-subtlest: #7c746e;
  --ds-text-inverse: #ffffff;
  --ds-text-selected: #a63025;
  --ds-text-brand: #a63025;
  --ds-text-danger: #b81d29;
  --ds-text-warning: #8a5a00;
  --ds-text-success: #46691f;

  /* ---- ICON ---- */
  --ds-icon: #23201e;
  --ds-icon-subtle: #5b544f;
  --ds-icon-subtlest: #7c746e;
  --ds-icon-brand: #c33b2e;

  /* ---- LINK ---- */
  --ds-link: #a63025;
  --ds-link-pressed: #85251c;

  /* ---- BORDER ---- */
  --ds-border: #221a161f;
  --ds-border-bold: #9a918b;
  --ds-border-input: #b8afa9;
  --ds-border-focused: #d0604f;
  --ds-border-selected: #c33b2e;

  /* ---- BACKGROUND ---- */
  --ds-background-input: #ffffff;
  --ds-background-neutral: #221a160f;
  --ds-background-neutral-hovered: #221a161f;
  --ds-background-neutral-pressed: #221a1638;
  --ds-background-neutral-subtle-hovered: #221a160f;
  --ds-background-neutral-subtle-pressed: #221a161f;
  --ds-background-selected: #fbeeea;
  --ds-background-selected-bold: #c33b2e;
  --ds-background-brand-bold: #c33b2e;
  --ds-background-brand-bold-hovered: #a92f24;
  --ds-background-brand-bold-pressed: #8d251c;
  --ds-background-danger: #fdeaec;
  --ds-background-danger-bold: #c22433;
  --ds-background-success: #edf4e4;
  --ds-background-success-bold: #5b8527;
  --ds-background-warning: #fdf2da;

  /* Accent (selos / ícones categóricos) */
  --ds-background-accent-blue-subtle: #00897c;
  --ds-background-accent-blue-subtlest: #e2f2f0;
  --ds-background-accent-green-subtlest: #edf4e4;
  --ds-background-accent-red-subtlest: #fdeaec;
  --ds-background-accent-yellow-subtlest: #fdf2da;
  --ds-background-accent-purple-subtlest: #efeafb;

  /* ---- SURFACE (elevação) ---- */
  --ds-surface: #ffffff;
  --ds-surface-hovered: #f5f2f0;
  --ds-surface-sunken: #f8f6f5;
  --ds-surface-raised: #ffffff;
  --ds-surface-raised-hovered: #f5f2f0;
  --ds-surface-overlay: #ffffff;

  /* ---- SHADOW ---- */
  --ds-shadow-raised: 0 1px 2px #221a1614, 0 0 0 1px #221a1612;
  --ds-shadow-overlay: 0 12px 28px -8px #221a1629, 0 0 0 1px #221a161a;

  /* ---- CHART (categórico — validado CVD + contraste) ---- */
  --ds-chart-1: #bf5a3c;
  --ds-chart-2: #00897c;
  --ds-chart-3: #a8860f;
  --ds-chart-4: #6a52cf;
  --ds-chart-5: #c03d92;
}

/* Tokens independentes de tema (espaçamento, raio, tipografia, layout) */
:root {
  /* ---- SPACING (escala 8pt) ---- */
  --ds-space-025: 0.125rem; --ds-space-050: 0.25rem; --ds-space-075: 0.375rem;
  --ds-space-100: 0.5rem;  --ds-space-150: 0.75rem;  --ds-space-200: 1rem;
  --ds-space-250: 1.25rem; --ds-space-300: 1.5rem;   --ds-space-400: 2rem;

  /* ---- RADIUS ---- */
  --ds-radius-xsmall: 5px; --ds-radius-small: 8px; --ds-radius-medium: 10px;
  --ds-radius-large: 14px; --ds-radius-full: 100%;

  /* ---- TYPOGRAPHY ---- */
  --ds-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-family-code: ui-monospace, "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  --ds-font-weight-regular: 400; --ds-font-weight-medium: 500;
  --ds-font-weight-semibold: 600; --ds-font-weight-bold: 700;

  /* ---- LAYOUT ---- */
  --topnav-h: 56px;
  --sidebar-w: 248px;
}

/* ===== TEMA ESCURO ===== */
[data-color-mode="dark"] {
  color-scheme: dark;

  /* ---- TEXT ---- */
  --ds-text: #eae5e1;
  --ds-text-subtle: #b5aca7;
  --ds-text-subtlest: #948a85;
  --ds-text-inverse: #1c1a19;
  --ds-text-selected: #f08d80;
  --ds-text-brand: #f08d80;
  --ds-text-danger: #f5949a;
  --ds-text-warning: #e8bb55;
  --ds-text-success: #a8cd7c;

  /* ---- ICON ---- */
  --ds-icon: #eae5e1;
  --ds-icon-subtle: #b5aca7;
  --ds-icon-subtlest: #948a85;
  --ds-icon-brand: #f08d80;

  /* ---- LINK ---- */
  --ds-link: #f08d80;
  --ds-link-pressed: #f7ada2;

  /* ---- BORDER ---- */
  --ds-border: #f1e6e01f;
  --ds-border-bold: #8b807a;
  --ds-border-input: #8b807a;
  --ds-border-focused: #f08d80;
  --ds-border-selected: #d95c4a;

  /* ---- BACKGROUND ---- */
  --ds-background-input: #262322;
  --ds-background-neutral: #f1e6e010;
  --ds-background-neutral-hovered: #f1e6e01f;
  --ds-background-neutral-pressed: #f1e6e038;
  --ds-background-neutral-subtle-hovered: #f1e6e010;
  --ds-background-neutral-subtle-pressed: #f1e6e01f;
  --ds-background-selected: #3d201c;
  --ds-background-selected-bold: #d95c4a;
  --ds-background-brand-bold: #c4412f;
  --ds-background-brand-bold-hovered: #d95c4a;
  --ds-background-brand-bold-pressed: #f08d80;
  --ds-background-danger: #421c22;
  --ds-background-danger-bold: #d1414f;
  --ds-background-success: #253017;
  --ds-background-success-bold: #6d9a34;
  --ds-background-warning: #3a2c14;

  /* Accent (selos / ícones categóricos) */
  --ds-background-accent-blue-subtle: #00a693;
  --ds-background-accent-blue-subtlest: #17302d;
  --ds-background-accent-green-subtlest: #253017;
  --ds-background-accent-red-subtlest: #40201c;
  --ds-background-accent-yellow-subtlest: #3a2c14;
  --ds-background-accent-purple-subtlest: #2b2540;

  /* ---- SURFACE (elevação) ---- */
  --ds-surface: #1c1a19;
  --ds-surface-hovered: #232120;
  --ds-surface-sunken: #131110;
  --ds-surface-raised: #232120;
  --ds-surface-raised-hovered: #2a2725;
  --ds-surface-overlay: #2a2725;

  /* ---- SHADOW ---- */
  --ds-shadow-raised: 0 1px 2px #00000066, 0 0 0 1px #f1e6e014;
  --ds-shadow-overlay: 0 14px 32px -10px #000000a6, 0 0 0 1px #f1e6e01f;

  /* ---- CHART (categórico — validado CVD + contraste) ---- */
  --ds-chart-1: #d2704f;
  --ds-chart-2: #00a693;
  --ds-chart-3: #b28d29;
  --ds-chart-4: #8b76ef;
  --ds-chart-5: #dd5fa6;
}

/* ===== TEMA ALTO CONTRASTE (inclusivo — WCAG AAA, foco reforçado) ===== */
[data-color-mode="hc"] {
  color-scheme: dark;

  --ds-text: #ffffff;
  --ds-text-subtle: #f2f2f2;
  --ds-text-subtlest: #dcdcdc;
  --ds-text-inverse: #000000;
  --ds-text-selected: #ffb3a3;
  --ds-text-brand: #ffb3a3;
  --ds-text-danger: #ff9d94;
  --ds-text-warning: #ffd633;
  --ds-text-success: #7ee787;

  --ds-icon: #ffffff;
  --ds-icon-subtle: #f2f2f2;
  --ds-icon-subtlest: #dcdcdc;
  --ds-icon-brand: #ffb3a3;

  --ds-link: #ffb3a3;
  --ds-link-pressed: #ffd0c6;

  --ds-border: #b0a49e;
  --ds-border-bold: #ffffff;
  --ds-border-input: #d4c9c3;
  --ds-border-focused: #ffd633;
  --ds-border-selected: #ffb3a3;

  --ds-background-input: #0a0a0a;
  --ds-background-neutral: #ffffff1f;
  --ds-background-neutral-hovered: #ffffff33;
  --ds-background-neutral-pressed: #ffffff4d;
  --ds-background-neutral-subtle-hovered: #ffffff1f;
  --ds-background-neutral-subtle-pressed: #ffffff33;
  --ds-background-selected: #5c231a;
  --ds-background-selected-bold: #ff8a70;
  --ds-background-brand-bold: #ff8a70;
  --ds-background-brand-bold-hovered: #ffa791;
  --ds-background-brand-bold-pressed: #ffc4b5;
  --ds-background-danger: #4d0f0a;
  --ds-background-danger-bold: #ff5c4d;
  --ds-background-success: #0d3313;
  --ds-background-success-bold: #56d364;
  --ds-background-warning: #4d3a00;
  --ds-background-accent-blue-subtle: #00b3a0;
  --ds-background-accent-blue-subtlest: #06332f;
  --ds-background-accent-green-subtlest: #0d3313;
  --ds-background-accent-red-subtlest: #4d0f0a;
  --ds-background-accent-yellow-subtlest: #4d3a00;
  --ds-background-accent-purple-subtlest: #2d1b4d;

  --ds-surface: #000000;
  --ds-surface-hovered: #1a1a1a;
  --ds-surface-sunken: #000000;
  --ds-surface-raised: #0d0d0d;
  --ds-surface-raised-hovered: #1a1a1a;
  --ds-surface-overlay: #0d0d0d;

  --ds-shadow-raised: 0 0 0 1px #ffffff26;
  --ds-shadow-overlay: 0 0 0 1px #ffffff40, 0 8px 16px #000000cc;

  --ds-chart-1: #ff9270;
  --ds-chart-2: #4ce0c8;
  --ds-chart-3: #ffd166;
  --ds-chart-4: #b3a4ff;
  --ds-chart-5: #ff8ac4;
}
/* Foco mais forte no alto contraste (acessibilidade) */
[data-color-mode="hc"] :focus-visible { outline: 3px solid var(--ds-border-focused); outline-offset: 2px; }

/* ===== TEMA VIDRO (superfícies translúcidas) ===== */
[data-color-mode="glass"] {
  color-scheme: light;
  /* cantos mais generosos */
  --ds-radius-xsmall: 8px; --ds-radius-small: 12px; --ds-radius-medium: 14px; --ds-radius-large: 20px;

  --ds-text: #201b19;
  --ds-text-subtle: #453c38;
  --ds-text-subtlest: #6b615c;
  --ds-text-inverse: #ffffff;
  --ds-text-selected: #a63025;
  --ds-text-brand: #a63025;
  --ds-text-danger: #b81d29;
  --ds-text-warning: #96570a;
  --ds-text-success: #3f7233;

  --ds-icon: #201b19;
  --ds-icon-subtle: #453c38;
  --ds-icon-subtlest: #6b615c;
  --ds-icon-brand: #c33b2e;

  --ds-link: #a63025;
  --ds-link-pressed: #85251c;

  --ds-border: rgba(255, 252, 250, .6);
  --ds-border-bold: rgba(58, 34, 26, .2);
  --ds-border-input: rgba(58, 34, 26, .16);
  --ds-border-focused: #c33b2e;
  --ds-border-selected: #c33b2e;

  --ds-background-input: rgba(255, 253, 252, .58);
  --ds-background-neutral: rgba(130, 110, 100, .16);
  --ds-background-neutral-hovered: rgba(130, 110, 100, .24);
  --ds-background-neutral-pressed: rgba(130, 110, 100, .32);
  --ds-background-neutral-subtle-hovered: rgba(255, 253, 252, .48);
  --ds-background-neutral-subtle-pressed: rgba(255, 253, 252, .62);
  --ds-background-selected: rgba(195, 59, 46, .14);
  --ds-background-selected-bold: #c33b2e;
  --ds-background-brand-bold: #c33b2e;
  --ds-background-brand-bold-hovered: #a92f24;
  --ds-background-brand-bold-pressed: #8d251c;
  --ds-background-danger: rgba(192, 57, 43, .14);
  --ds-background-danger-bold: #c0392b;
  --ds-background-success: rgba(93, 158, 76, .18);
  --ds-background-success-bold: #5d9e4c;
  --ds-background-warning: rgba(214, 154, 40, .2);
  --ds-background-accent-blue-subtle: #10877b;
  --ds-background-accent-blue-subtlest: rgba(16, 135, 123, .16);
  --ds-background-accent-green-subtlest: rgba(93, 158, 76, .18);
  --ds-background-accent-red-subtlest: rgba(192, 57, 43, .14);
  --ds-background-accent-yellow-subtlest: rgba(214, 154, 40, .2);
  --ds-background-accent-purple-subtlest: rgba(122, 96, 190, .16);

  /* superfícies translúcidas (frosted) */
  --ds-surface: rgba(255, 253, 251, .62);
  --ds-surface-hovered: rgba(255, 253, 251, .74);
  --ds-surface-sunken: transparent;
  --ds-surface-raised: rgba(255, 253, 251, .56);
  --ds-surface-raised-hovered: rgba(255, 253, 251, .74);
  --ds-surface-overlay: rgba(255, 253, 251, .8);

  --ds-shadow-raised: 0 1px 1px rgba(58, 34, 26, .05), 0 10px 30px -14px rgba(58, 34, 26, .3);
  --ds-shadow-overlay: 0 16px 44px -10px rgba(58, 34, 26, .36);

  --ds-chart-1: #bf5a3c; --ds-chart-2: #00897c; --ds-chart-3: #a8860f; --ds-chart-4: #6a52cf; --ds-chart-5: #c03d92;
}
/* Fundo em degradê quente + frost translúcido nas superfícies */
[data-color-mode="glass"] body {
  background: linear-gradient(140deg, #f6e2d8 0%, #efd9cd 32%, #e8dfd2 62%, #dce6de 100%) fixed;
}
[data-color-mode="glass"] .ds-topnav,
[data-color-mode="glass"] .ds-sidebar,
[data-color-mode="glass"] .ds-card,
[data-color-mode="glass"] .ds-menu,
[data-color-mode="glass"] .ds-worldclock,
[data-color-mode="glass"] .ds-notif__panel,
[data-color-mode="glass"] .ds-select__input {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }

body {
  background: var(--ds-surface-sunken);
  color: var(--ds-text);
  font-family: var(--ds-font-family);
  font-size: 14px; line-height: 1.43;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
a { color: var(--ds-link); text-decoration: none; }
a:hover { text-decoration: underline; }

* { scrollbar-width: thin; scrollbar-color: #3a3b3f transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #3a3b3f; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--ds-border-focused); outline-offset: 2px; }

/* ==========================================================================
   COMPONENTES
   ========================================================================== */

/* ---- Botões ---- */
.ds-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-100);
  border: 0; border-radius: var(--ds-radius-small);
  font: inherit; font-weight: var(--ds-font-weight-medium);
  height: 2.2857em; padding: 0 var(--ds-space-150);
  cursor: pointer; white-space: nowrap; position: relative;
  transition: background .1s ease-out;
}
.ds-button--primary { background: var(--ds-background-brand-bold); color: var(--ds-text-inverse); }
.ds-button--primary:hover { background: var(--ds-background-brand-bold-hovered); }
.ds-button--primary:active { background: var(--ds-background-brand-bold-pressed); }
.ds-button--icon {
  background: transparent; color: var(--ds-text-subtle);
  width: 2.2857em; height: 2.2857em; padding: 0; border-radius: var(--ds-radius-small);
}
.ds-button--icon:hover { background: var(--ds-background-neutral-subtle-hovered); color: var(--ds-text); }
.ds-button--ghost { background: transparent; border: 1px solid var(--ds-border-bold); color: var(--ds-text); }
.ds-button--ghost:hover { background: var(--ds-background-neutral-subtle-hovered); }
/* Como a marca é vermelha, a ação destrutiva não pode ser mais um botão
   vermelho sólido: fica em contorno, distinta do primário sem perder o sinal. */
.ds-button--danger {
  background: transparent; color: var(--ds-text-danger);
  box-shadow: inset 0 0 0 1px var(--ds-background-danger-bold);
}
.ds-button--danger:hover { background: var(--ds-background-danger); }
.ds-button--danger:active { background: var(--ds-background-danger-bold); color: #fff; }
.ds-button--success { background: var(--ds-background-success-bold); color: #fff; }
.ds-button--success:hover { filter: brightness(1.06); }
.ds-button--subtle { background: var(--ds-background-neutral); color: var(--ds-text); }
.ds-button--subtle:hover { background: var(--ds-background-neutral-hovered); }
.ds-button:disabled { opacity: .5; cursor: default; }
/* Tamanhos */
.ds-button--sm { height: 1.85em; padding: 0 var(--ds-space-100); font-size: 12px; }
.ds-button--lg { height: 2.75em; padding: 0 var(--ds-space-250); font-size: 15px; }
.ds-button--block { width: 100%; }
/* Estado de carregamento (spinner que herda a cor do botão) */
.ds-button.is-loading { pointer-events: none; }
.ds-button:disabled.is-loading { opacity: 1; }
.ds-button__spin { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ds-spin .6s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   MODAL (header fixo + body com scroll + footer condicional)
   ========================================================================== */
.ds-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 15, 30, .5);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; /* margem mínima das bordas (usada também pelo tamanho full) */
  opacity: 0; transition: opacity .18s ease;
}
.ds-modal-overlay.is-open { opacity: 1; }
/* Modal facial: ancorado no TOPO (perto da câmera do notebook/celular) para o
   usuário olhar na direção da lente. Usado pela confirmação e pelo cadastro facial. */
.ds-modal-overlay--facial { align-items: flex-start; padding-top: max(10px, env(safe-area-inset-top, 0px)); }
.ds-modal {
  width: 100%; max-height: 100%;
  background: var(--ds-surface-overlay); color: var(--ds-text);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-large);
  box-shadow: var(--ds-shadow-overlay);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(8px) scale(.985); transition: transform .18s ease;
}
.ds-modal-overlay.is-open .ds-modal { transform: none; }
.ds-modal:focus { outline: none; }
.ds-modal--sm { max-width: 400px; }
.ds-modal--md { max-width: 560px; }
.ds-modal--lg { max-width: 780px; }
.ds-modal--xl { max-width: 1000px; }
.ds-modal--full { max-width: none; width: 100%; height: 100%; } /* tela cheia com a margem do overlay */

.ds-modal__header {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-150);
  padding: var(--ds-space-200) var(--ds-space-250); border-bottom: 1px solid var(--ds-border);
}
.ds-modal__title { font-size: 16px; font-weight: var(--ds-font-weight-semibold); color: var(--ds-text); margin: 0; letter-spacing: -.1px; }
.ds-modal__close {
  flex-shrink: 0; background: transparent; border: 0; cursor: pointer; color: var(--ds-icon-subtle);
  width: 32px; height: 32px; border-radius: var(--ds-radius-small); font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; transition: background .1s, color .1s;
}
.ds-modal__close:hover { background: var(--ds-background-neutral-subtle-hovered); color: var(--ds-text); }
.ds-modal__body { flex: 1; overflow-y: auto; padding: var(--ds-space-250); line-height: 1.55; }
.ds-modal__footer {
  flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--ds-space-100);
  padding: var(--ds-space-200) var(--ds-space-250); border-top: 1px solid var(--ds-border);
}
body.ds-modal-open, body.ds-scroll-lock { overflow: hidden; }
.ds-modal__body p { margin: 0 0 12px; }
.ds-modal__body p:last-child { margin-bottom: 0; }

/* Switcher de larguras do modal de demonstração */
.ds-demo-sizes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ds-demo-sizes__label { font-size: 12px; color: var(--ds-text-subtlest); margin-right: 4px; }
.ds-demo-size { height: auto; padding: 4px 12px; font-size: 12px; }
.ds-demo-size.is-active { border-color: var(--ds-border-selected); color: var(--ds-text-selected); }

@media (max-width: 640px) {
  .ds-modal-overlay { padding: 12px; }
  .ds-modal { max-height: 100%; }
}

/* ---- Avatar ---- */
.ds-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ds-radius-full); overflow: hidden; flex-shrink: 0;
  width: 32px; height: 32px;
  background: var(--ds-background-brand-bold); color: var(--ds-text-inverse);
  font-size: 13px; font-weight: var(--ds-font-weight-bold);
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ---- Input / Busca ---- */
.ds-search { position: relative; flex: 0 1 420px; }
.ds-search__icon { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: var(--ds-icon-subtlest); font-size: 13px; pointer-events: none; }
.ds-input {
  height: 32px; width: 100%; padding: 0 var(--ds-space-150) 0 30px;
  border: 1px solid var(--ds-border-input); border-radius: var(--ds-radius-small);
  background: var(--ds-background-input); color: var(--ds-text);
  font: inherit; outline: none; transition: border-color .1s;
}
.ds-input::placeholder { color: var(--ds-text-subtlest); }
.ds-input:focus { border-color: var(--ds-border-focused); }


/* Dropdown dos selects em PORTAL (movido ao <body> enquanto aberto): fica acima
   de modal (1000) e drawer — nunca é cortado por containers com overflow. */
.ds-single__pop.is-portal, .ds-ms__pop.is-portal { z-index: 5000; }