/* Certame — tokens e componentes compartilhados */

:root {
  --bg: #F5F4EF;
  --bg-2: #ECEAE2;
  --surface: #FFFFFF;
  --surface-2: #FAF9F5;
  --ink: #1A1F36;
  --ink-2: #3A3F55;
  --muted: #6B6F80;
  --line: #E6E4DC;
  --line-2: #D9D7CD;

  --brand: #1F3FBF;
  --brand-2: #1A35A3;
  --brand-ink: #FFFFFF;
  --brand-tint: #E8ECFB;
  --link: #1F3FBF;
  --accent: #1F3FBF;
  --accent-tint: #FFF3B0;

  --ok: #1E9B57;
  --ok-tint: #E7F4EC;
  --warn: #B26B12;
  --warn-tint: #FBF0DA;
  --bad: #D93025;
  --bad-tint: #FCEAE8;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 30px -14px rgba(16, 24, 40, .18);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, .04), 0 30px 70px -24px rgba(16, 24, 40, .3);

  --r: 14px;
  --r-sm: 9px;
  --serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Inter", system-ui, sans-serif;
  color-scheme: light;
}


*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-tint); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.serif { font-family: var(--serif); font-optical-sizing: auto; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; letter-spacing: -.01em; font-size: 17px; }
.logo:hover { text-decoration: none; }
.logo svg { width: 30px; height: 30px; flex: none; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 999px;
  border: 1px solid transparent; background: var(--brand); color: var(--brand-ink);
  font-weight: 560; font-size: 14.5px; cursor: pointer; white-space: nowrap;
  transition: background .15s, transform .15s, box-shadow .15s, border-color .15s;
}
.btn:hover { background: var(--brand-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--surface); border-color: var(--ink-2); }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13.5px; }
.btn.lg { height: 50px; padding: 0 24px; font-size: 15.5px; }
.btn svg { width: 16px; height: 16px; }

/* Etiquetas */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  background: var(--bg-2); color: var(--ink-2); white-space: nowrap;
}
.chip.ok { background: var(--ok-tint); color: var(--ok); }
.chip.warn { background: var(--warn-tint); color: var(--warn); }
.chip.bad { background: var(--bad-tint); color: var(--bad); }
.chip.brand { background: var(--brand-tint); color: var(--link); }
.chip.gold { background: var(--accent-tint); color: var(--accent); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dot.live { background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: pulso 2.2s infinite; }
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Campos */
.field { display: grid; gap: 6px; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.input, .select {
  width: 100%; height: 42px; padding: 0 13px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--muted); }
.input:focus, .select:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-tint); }
.select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2369736D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }

.skeleton { background: linear-gradient(90deg, var(--bg-2), var(--surface-2), var(--bg-2)); background-size: 200% 100%; animation: brilho 1.4s infinite; border-radius: 8px; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* marca Certame */
:root { --grifo: #FFE45C; --font-marca: "Newsreader", Georgia, "Times New Roman", serif; }
.logo-certame { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-weight: 750; font-size: 21px; letter-spacing: -.04em; color: var(--ink); line-height: 1; }
.logo-certame img { width: 30px; height: 30px; flex: none; animation: logo-entra .6s .1s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes logo-entra { from { transform: scale(.6) rotate(-12deg); opacity: 0; } }
@keyframes grifar { from { background-size: 0 45%; } }
::selection { background: var(--grifo); color: var(--ink); }