/* =========================================================================
   Axel Mendes — Tela de acesso · Tema "Silver" (inspiração Mercedes)
   Paleta prata/cromo + grafite. Superfícies com leve acabamento metálico.
   Estrutura: 1) Tokens  2) Base  3) Layout  4) Card  5) Formulário
              6) Componentes  7) Toast  8) Responsivo/prefs
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* prata / cromo */
  --silver-50:  #f6f7f9;
  --silver-100: #eef1f4;
  --silver-200: #e0e5ea;
  --silver-300: #ccd2d9;
  --silver-400: #aab2bb;
  --silver-500: #8a939d;

  /* azul claro — cor de destaque do sistema (2026-08) */
  --graphite-900: #2f6fb3;
  --graphite-800: #4a95dd;
  --graphite-700: #7ec3f5;

  /* dourado — SOMENTE micro-detalhes (indicadores, ícones, status) */
  --gold-500: #c6a15b;
  --gold-600: #b08d45;
  --gold-soft: #f4ecdb;

  /* cores de status (semânticas) */
  --st-green:  #1f9d57;  /* favorável */
  --st-yellow: #c0900f;  /* atenção */
  --st-red:    #d24a3d;  /* urgente */
  --st-blue:   #2f6feb;  /* informativo */
  --st-gray:   #8a939d;  /* sem movimentação / neutro */

  /* superfícies metálicas */
  --chrome:  linear-gradient(180deg, #ffffff 0%, #dfe4e9 48%, #c4ccd3 52%, #eef1f4 100%);
  --brushed: linear-gradient(180deg, #f4f6f8 0%, #e6eaee 100%);
  --steel-bar: linear-gradient(90deg, #c9ced3 0%, #8a939d 50%, #c9ced3 100%);

  --ink:       #1a2026;
  --ink-soft:  #4b5661;
  --muted:     #8a939d;
  --line:      #dbe1e7;
  --surface:   #ffffff;

  --danger:    #c0392b;
  --danger-bg: #fdecea;

  --radius:    16px;
  --radius-sm: 10px;
  --shadow-md: 0 20px 55px -22px rgba(24, 33, 43, .35);

  --font-ui:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-brand: 'Fraunces', 'Georgia', serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

/* garante que o atributo `hidden` sempre vença regras de display de classes */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* fundo prata escovado */
  background-color: #e9edf1;
  background-image:
    radial-gradient(70% 55% at 50% -10%, #ffffff 0%, rgba(255,255,255,0) 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, rgba(0,0,0,.012) 1px 4px),
    linear-gradient(180deg, #eef1f4 0%, #dce1e7 100%);
}

a { color: inherit; }

/* ---------- 3. Layout ---------- */
.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
}

/* ---------- 4. Card ---------- */
.card {
  position: relative;
  width: 100%;
  max-width: 412px;
  padding: clamp(28px, 5vw, 44px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* barra de cromo no topo */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--steel-bar);
}

.card__head { margin-bottom: 28px; }
.card__head h1 {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.card__head p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.page-foot {
  margin: 0;
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: .02em;
}

/* ---------- 6. Formulário ---------- */
.form { display: grid; gap: 20px; }

.field { display: grid; gap: 7px; }
.field label { font-size: .85rem; font-weight: 500; color: var(--ink); }
.field__label-row { display: flex; justify-content: space-between; align-items: baseline; }

.field__control { position: relative; display: flex; align-items: center; }
.field__icon {
  position: absolute;
  left: 14px;
  color: var(--muted);
  pointer-events: none;
  transition: color .15s var(--ease);
}
.field__control input {
  width: 100%;
  height: 50px;
  padding: 0 44px;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--silver-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.field__control input::placeholder { color: var(--silver-400); }
.field__control select {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--silver-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.field__control select:focus { background: var(--surface); border-color: var(--silver-500); box-shadow: 0 0 0 4px rgba(138, 147, 157, .14); }
.field__control input:hover { border-color: var(--silver-300); }
.field__control input:focus {
  background: var(--surface);
  border-color: var(--silver-500);
  box-shadow: 0 0 0 4px rgba(138, 147, 157, .18);
}
.field__control:focus-within .field__icon { color: var(--graphite-700); }

.field.is-invalid .field__control input { border-color: var(--danger); background: var(--danger-bg); }
.field.is-invalid .field__control input:focus { box-shadow: 0 0 0 4px rgba(192, 57, 43, .12); }
.field__error { margin: 0; font-size: .8rem; color: var(--danger); }
.field__hint { margin: 0; font-size: .8rem; color: var(--ink-soft); }

.field__toggle {
  position: absolute;
  right: 8px;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.field__toggle:hover { color: var(--graphite-800); background: rgba(138, 147, 157, .14); }
.field__toggle[aria-pressed="true"] { color: var(--graphite-800); }

/* ---------- 7. Componentes ---------- */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox__box {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border: 1.5px solid var(--silver-300);
  border-radius: 6px;
  background: var(--surface);
  color: #fff;
  transition: all .15s var(--ease);
}
.checkbox__box svg { opacity: 0; transform: scale(.6); transition: all .15s var(--ease); }
.checkbox input:checked + .checkbox__box { background: var(--graphite-800); border-color: var(--graphite-800); }
.checkbox input:checked + .checkbox__box svg { opacity: 1; transform: scale(1); }
.checkbox input:focus-visible + .checkbox__box { box-shadow: 0 0 0 4px rgba(138, 147, 157, .25); }

.link { color: var(--graphite-700); text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; }
.link--muted { font-size: .82rem; color: var(--ink-soft); }

/* botão grafite metálico */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 20px;
  font: inherit;
  font-weight: 600;
  font-size: .96rem;
  letter-spacing: .02em;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform .1s var(--ease), box-shadow .2s var(--ease), color .3s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  color: #f4f6f8;
  overflow: hidden;               /* recorta o brilho nas bordas */
  background: linear-gradient(180deg, var(--graphite-700) 0%, var(--graphite-900) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 12px 26px -14px rgba(18, 22, 25, .9);
}
.btn--primary:hover { filter: brightness(1.06); }
/* brilho diagonal que atravessa da esquerda para a direita no hover */
.btn--primary::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, .12) 40%,
    rgba(255, 255, 255, .65) 50%,
    rgba(255, 255, 255, .12) 60%,
    transparent 100%);
  transform: translateX(-260%) skewX(-20deg);
  pointer-events: none;
}
.btn--primary:hover::before,
.btn--primary:focus-visible::before {
  transform: translateX(360%) skewX(-20deg);
  transition: transform .6s var(--ease);
}
.btn--primary:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(138, 147, 157, .4); }

/* .btn--primary, .link, ícone de campo em foco, toggle de senha e checkbox
   marcado já usam var(--graphite-700/800/900) — que agora É o azul claro do
   sistema, então herdam a cor automaticamente em todo o app, login incluso. */

/* textos da tela de login em tom azul claro — usam --muted/--ink-soft, não
   fazem parte da família grafite, por isso continuam com override próprio */
.auth .page-foot { color: #9cbfe0; }
.auth .link--muted { color: #7db8ea; }

/* borda/anel de foco dos campos da tela de login (base usa --silver-500) */
.auth .field__control input:focus,
.auth .field__control select:focus {
  border-color: #7ec3f5;
  box-shadow: 0 0 0 4px rgba(122, 179, 230, .18);
}
.auth .checkbox input:focus-visible + .checkbox__box { box-shadow: 0 0 0 4px rgba(122, 179, 230, .3); }

.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { opacity: 0; }
.btn__spinner {
  position: absolute;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
}
.btn.is-loading .btn__spinner { opacity: 1; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.form__foot {
  margin: 4px 0 0;
  text-align: center;
  font-size: .85rem;
  color: var(--ink-soft);
}

/* ---------- Tela "conta suspensa" ---------- */
.suspend-card { text-align: center; }
.suspend-icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: 50%;
}
.suspend-card .card__head { margin-bottom: 22px; }
.suspend-card .card__head h1 { font-family: var(--font-ui); font-weight: 700; }
.suspend-card .card__head p { max-width: 34ch; margin: 0 auto; }
.suspend-card .btn { width: 100%; }

/* ---------- 8. Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  max-width: min(92vw, 420px);
  padding: 13px 18px;
  font-size: .9rem;
  color: #f4f6f8;
  background: var(--graphite-800);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast--error { background: var(--danger); }

/* ---------- 9. Responsivo / preferências ---------- */
@media (max-width: 420px) {
  .card { padding: 26px 22px; }
}

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

/* =========================================================================
   Tema "Perolado" — cinza escuro Mercedes (aplicado via [data-theme="dark"])
   ========================================================================= */
:root[data-theme="dark"] {
  --ink:       #e9edf1;
  --ink-soft:  #aeb7c0;
  --muted:     #7c858f;
  --line:      #363d45;
  --surface:   #262b31;
  --surface-2: #2b3138;
  --silver-50:  #2b3138;
  --silver-100: #2f363d;
  --silver-200: #333a42;
  --silver-300: #3c444c;
  --silver-400: #6b747d;

  --st-green:  #3fbf78;
  --st-yellow: #e0b53e;
  --st-red:    #e8695c;
  --st-blue:   #5b8ef0;
  --st-gray:   #9aa3ac;
}

/* fundo escuro com sheen perolado em cinza-claro (tipo pintura de carro) */
:root[data-theme="dark"] body {
  background-color: #191d21;
  background-image:
    radial-gradient(80% 55% at 50% -5%, #3a424b 0%, rgba(58, 66, 75, 0) 55%),
    linear-gradient(180deg, #24282e 0%, #15181c 100%);
}

/* botão primário vira "cromo" claro (contraste no escuro) */
:root[data-theme="dark"] .btn--primary {
  color: var(--graphite-900);
  background: linear-gradient(180deg, #eef1f4 0%, #c9d0d6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 26px -14px rgba(0, 0, 0, .6);
}
:root[data-theme="dark"] .btn--primary:hover { filter: brightness(1.04); }

:root[data-theme="dark"] .link { color: #cfd6dd; }
:root[data-theme="dark"] .toast { background: #2f363d; }
:root[data-theme="dark"] .field__control input:focus {
  background: var(--surface-2);
  border-color: var(--silver-500);
}