/* Sistema Syneos — estilos base (cores, letras, componentes comuns) */

:root {
  --fundo: #eeeeef;
  --superficie: #ffffff;
  --superficie-2: #f6f6f7;
  --faixa: #d9d9d9;          /* cinza do timbrado */
  --texto: #1d1d1f;
  --texto-suave: #5f5f64;
  --borda: #d3d3d6;
  --borda-forte: #9c9ca2;
  --prata: #a7aab0;
  --grafite: #2b2b2e;
  --botao: #2b2b2e;
  --botao-texto: #ffffff;
  --botao-hover: #000000;
  --foco: #6d7179;
  --logo: #1d1d1f;
  --erro: #a3312b;
  --erro-fundo: #fbeceb;
  --ok: #2f6b45;
  --ok-fundo: #e9f3ec;
  --sombra: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --raio: 10px;
  --letra-titulo: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --letra-texto: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --letra-detalhe: "Cormorant Garamond", Georgia, serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --fundo: #121214;
  --superficie: #1c1c1f;
  --superficie-2: #232327;
  --faixa: #2a2a2e;
  --texto: #ececee;
  --texto-suave: #a4a4aa;
  --borda: #36363b;
  --borda-forte: #5c5c63;
  --prata: #c3c5ca;
  --grafite: #0b0b0c;
  --botao: #c9cbcf;
  --botao-texto: #121214;
  --botao-hover: #e4e5e8;
  --foco: #c3c5ca;
  --logo: #d2d4d8;
  --erro: #f0a39e;
  --erro-fundo: #3a1f1e;
  --ok: #9fd3b0;
  --ok-fundo: #1d3326;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--letra-texto);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: inherit; }

/* Logo e monograma: o desenho vem do arquivo SVG, a cor vem do tema */
.logo, .monograma {
  display: block;
  background-color: var(--logo);
  -webkit-mask: var(--arquivo) center / contain no-repeat;
          mask: var(--arquivo) center / contain no-repeat;
}
.logo      { --arquivo: url("../img/logo-syneos.svg?v=1"); aspect-ratio: 322 / 255; }
.monograma { --arquivo: url("../img/monograma.svg?v=1");   aspect-ratio: 112 / 178; }

/* Campos de formulário: 16px no mínimo para o iPhone não dar zoom */
.campo { display: grid; gap: 6px; margin-bottom: 16px; }
.campo label { font-size: 13px; font-weight: 500; color: var(--texto-suave); letter-spacing: .02em; }
.campo input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.campo input:hover { border-color: var(--borda-forte); }
.campo input:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 25%, transparent); }

.senha { position: relative; }
.senha input { padding-right: 48px; }
.senha .olho {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 6px; cursor: pointer; color: var(--texto-suave);
}
.senha .olho:hover { color: var(--texto); }
.senha .olho:focus-visible { outline: 2px solid var(--foco); }
.senha .olho svg { width: 20px; height: 20px; }
.senha .olho .fechado { display: none; }
.senha .olho[aria-pressed="true"] .aberto { display: none; }
.senha .olho[aria-pressed="true"] .fechado { display: block; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 13px 18px;
  color: var(--botao-texto);
  background: var(--botao);
  border: 0; border-radius: 8px; cursor: pointer;
  transition: background .15s;
}
.botao:hover { background: var(--botao-hover); }
.botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.botao[disabled] { opacity: .6; cursor: wait; }

.link-botao {
  background: none; border: 0; padding: 0; font: inherit; font-size: 14px;
  color: var(--texto-suave); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-botao:hover { color: var(--texto); }

.caixa { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; user-select: none; }
.caixa input { width: 18px; height: 18px; accent-color: var(--grafite); margin: 0; }
:root[data-theme="dark"] .caixa input { accent-color: var(--prata); }

.aviso {
  font-size: 14px; padding: 10px 12px; border-radius: 8px; margin-bottom: 16px;
}
.aviso[hidden] { display: none; }
.aviso.erro { color: var(--erro); background: var(--erro-fundo); }
.aviso.ok   { color: var(--ok);   background: var(--ok-fundo); }

/* Botão de tema (sol/lua) */
.tema {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--superficie); color: var(--texto-suave);
  border: 1px solid var(--borda); border-radius: 50%; cursor: pointer;
}
.tema:hover { color: var(--texto); }
.tema svg { width: 18px; height: 18px; }
.tema .lua { display: block; }
.tema .sol { display: none; }
:root[data-theme="dark"] .tema .lua { display: none; }
:root[data-theme="dark"] .tema .sol { display: block; }

.oculto-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Faixa "sem conexão" */
.aviso-conexao {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 100; max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: 999px; font-size: 14px;
  background: var(--grafite); color: #fff; box-shadow: var(--sombra);
}
.aviso-conexao[hidden] { display: none; }