/* ══════════════════════════════════════════════════════════════
   CSC JAZZ — DESIGN SYSTEM (folha compartilhada de ~25 telas)

   Direção: "blue note". A marca são três anéis quadrados entrelaçados
   (azul-profundo → royal → ciano): um Centro de Serviços Compartilhados
   não é uma fila, é um conjunto tocando junto.

   O sistema anterior era editorial quente — papel creme, serifa Fraunces,
   acento terracota. Ele brigava com a marca nova em todos os eixos, então
   saiu inteiro: neutros agora são SLATE (frios, com viés azul), e o acento
   é o ciano do terceiro anel, gasto com avareza.

   Duas regras que valem para qualquer tela nova:
     • O GRADIENTE MORA NO LOGO. A interface não o espalha. O que amarra as
       telas à marca é o "compasso" (.jz-compasso): três segmentos sólidos,
       profundo · royal · ciano — três anéis, C·S·C.
     • O CIANO É RESERVADO. Ele aparece no compasso, no anel de foco e no
       estado ativo. Ciano em botão comum destrói a hierarquia: se tudo
       chama atenção, nada chama.
   ══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Marca ─────────────────────────────────────────────────
     Os três azuis são LITERALMENTE os stops do logo. Mudou o logo?
     Mude aqui, e o compasso, o hero e o anel de foco acompanham. */
  --ink: #060435;                                     /* tinta: texto de display, superfícies escuras */
  --blue: #1B0DAE;                                    /* royal — o anel do meio, cor de ação */
  --blue-light: #4B3BE0; --blue-dark: #0A0660;        /* profundo — o primeiro anel */
  --blue-50: #EDEBFA; --blue-100: #D8D3F5; --blue-200: #B5ADEC;

  /* ── Acento: a nota azul ───────────────────────────────────
     O ciano puro sobre branco tem contraste ~1.9:1 — ilegível como texto.
     Por isso existem DOIS: `--acc` para preencher (traço, fundo, luz) e
     `--acc-ink` para escrever. Não troque um pelo outro. */
  --acc: #00D2FF; --acc-ink: #0B6C8C; --acc-deep: #3A7BD5;
  --acc-50: #E4F8FF; --acc-100: #BFEEFF; --acc-200: #8CE2FF;

  /* Compatibilidade: as telas antigas ainda pedem `--amber*`/`--cream`.
     Apontam para o acento novo em vez de sumir — chave que some vira
     `color: ;` e o navegador herda, sem erro nenhum no console. */
  --amber: var(--acc); --amber-dark: var(--acc-ink); --amber-600: var(--acc-deep);
  --amber-50: var(--acc-50); --amber-100: var(--acc-100); --amber-200: var(--acc-200);
  --cream: #F2F5FC;

  /* ── Superfícies (frias) ── */
  --paper: #F4F6FB; --paper-2: #FAFBFE; --white: #FFFFFF; --bg: #FFFFFF;

  /* ── Neutros SLATE (viés azul) ──
     Substituem a rampa stone quente. Neutro quente ao lado de azul frio
     parecia sujeira, não calor. */
  --gray-50: #F7F8FC; --gray-100: #EEF0F7; --gray-150: #E5E8F2;
  --gray-200: #DADEEC; --gray-300: #BDC3DA; --gray-400: #8A92B0;
  --gray-500: #616A89; --gray-600: #454D69; --gray-700: #323952;
  --gray-800: #22273A; --gray-900: #151929; --gray-950: #0B0E1B;

  /* ── Semânticas ──
     Esfriadas para conviver com o azul, mas o MATIZ não mudou: verde é
     verde, âmbar é âmbar, vermelho é vermelho. Quem opera lê a cor antes
     de ler o texto — trocar o matiz de um alerta é trocar o significado. */
  --success: #0E7A57; --success-bg: #E3F6EF; --success-border: #A6DFCB;
  --warning: #8A5B0A; --warning-bg: #FBF1DC; --warning-border: #E9D2A2;
  --danger: #C22B44; --danger-bg: #FCE8EC; --danger-border: #F2BEC8;

  /* ── Tipografia ──
     Display: Bricolage Grotesque — grotesca variável com carácter, no lugar
     da serifa. `--serif` continua sendo o NOME do papel de display porque
     ~19 telas já o pedem; renomear era 19 arquivos para ganhar nada.
     Corpo: Instrument Sans — mais estreita que a Montserrat, o que só sobra
     espaço em tela densa. Dados seguem em IBM Plex Mono. */
  --display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --serif: var(--display);
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Sombras em camadas, tingidas de tinta (não de cinza neutro) */
  --shadow-xs: 0 1px 2px rgba(10,6,60,.05);
  --shadow-sm: 0 1px 3px rgba(10,6,60,.06), 0 1px 2px rgba(10,6,60,.04);
  --shadow-md: 0 4px 12px -2px rgba(10,6,60,.09), 0 2px 6px -2px rgba(10,6,60,.06);
  --shadow-lg: 0 16px 40px -8px rgba(10,6,60,.14), 0 6px 14px -6px rgba(10,6,60,.08);

  /* Raios: ecoam o rx=16 sobre 46 do anel (≈0,35 do lado) */
  --radius: 14px; --radius-lg: 20px; --radius-sm: 10px; --radius-xs: 8px;

  /* Anel de foco em CIANO, não em azul da marca: sobre um botão azul o
     halo azul sumia, e quem navega por teclado perdia o rastro. */
  --ring: 0 0 0 3px rgba(0,210,255,.5);

  /* O compasso — assinatura do sistema. Três segmentos SÓLIDOS; um
     gradiente contínuo aqui vira borrão e perde os três anéis. */
  --compasso: linear-gradient(90deg,
    var(--blue-dark) 0 33.34%, var(--blue-light) 33.34% 66.67%, var(--acc) 66.67% 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--gray-900);
  min-height: 100vh;
  line-height: 1.55;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Display: grotesca de carácter, tracking apertado */
.display, h1.display, .app-title { font-family: var(--display); font-weight: 600; letter-spacing: -0.022em; }

/* ── Ícones de linha ── */
.wico { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.2em; flex: none; }
.ico-tile {
  width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-50); color: var(--blue); flex: none;
}
.ico-tile .wico { width: 24px; height: 24px; }
.ico-tile.soft { background: var(--gray-100); color: var(--gray-700); }
.ico-tile.lg { width: 56px; height: 56px; border-radius: 15px; }
.ico-tile.lg .wico { width: 28px; height: 28px; }

/* ══ A ASSINATURA: o compasso ══
   Três segmentos, profundo · royal · ciano — os três anéis do logo. É o
   que faz 25 telas parecerem uma plataforma só. Use como filete de topo,
   nunca como fundo de área grande. */
.jz-compasso { height: 3px; border-radius: 2px; background: var(--compasso); }

/* ══ O logotipo ══
   Símbolo em SVG + nome em TEXTO de verdade. Não é um PNG achatado: o nome
   fica nítido em qualquer densidade, acompanha a fonte do sistema, é lido
   por leitor de tela e pode ser buscado na página.

   O ritmo do nome é intencional — CSC é o tempo forte (pesado, apertado),
   JAZZ é a frase que se abre (leve, espaçada, no azul da marca). */
.jz-mark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.jz-mark img, .jz-mark svg { height: 30px; width: auto; flex: none; }
.jz-nome { font-family: var(--display); font-size: 18px; line-height: 1; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: .34em; }
.jz-nome b { font-weight: 800; letter-spacing: -0.02em; color: var(--gray-950); }
.jz-nome i { font-style: normal; font-weight: 400; letter-spacing: .19em; color: var(--blue); }
/* Sobre fundo escuro (hero, login, totem, TV) */
.jz-mark.claro .jz-nome b { color: #fff; }
.jz-mark.claro .jz-nome i { color: var(--acc); }
.jz-mark.lg img, .jz-mark.lg svg { height: 42px; } .jz-mark.lg .jz-nome { font-size: 25px; }
.jz-mark.sm img, .jz-mark.sm svg { height: 24px; } .jz-mark.sm .jz-nome { font-size: 15px; }

/* ── Cabeçalho de marca ── */
.works-header {
  position: relative;
  background: var(--white); border-bottom: 1px solid var(--gray-200);
  padding: 14px 26px 13px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; box-shadow: var(--shadow-xs);
}
/* O compasso assina o topo de toda tela com cabeçalho — sem markup extra
   em 16 arquivos. */
.works-header::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--compasso); }
.works-brand { display: flex; align-items: center; gap: 14px; }
.works-brand img { height: 30px; width: auto; }
.works-brand .divider { width: 1px; height: 28px; background: var(--gray-200); }
.works-brand .title { font-size: 14.5px; font-weight: 700; color: var(--gray-950); line-height: 1.15; letter-spacing: -0.015em; }
.works-brand .subtitle { font-size: 10.5px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .09em; }

/* ── Título centralizado ── */
.works-logo { text-align: center; margin-bottom: 30px; }
.works-logo img { height: 46px; width: auto; }
.works-logo .jz-mark { justify-content: center; }
.app-title { font-size: 27px; font-weight: 600; color: var(--gray-950); }
.app-subtitle { font-size: 14px; color: var(--gray-500); margin-top: 7px; font-weight: 500; }

/* ── Layout ── */
.works-wrap { max-width: 1180px; margin: 26px auto; padding: 0 20px; }
.works-container { width: 100%; max-width: 620px; margin: 26px auto; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--gray-200); box-shadow: var(--shadow-lg); padding: 30px; }

/* ── Cartões ── */
.card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.card-muted { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 16px; }

/* ── Botões ── */
.btn {
  font-family: var(--sans); background: var(--blue); color: #fff; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 11px 18px; font-weight: 700; font-size: 14px; letter-spacing: -0.005em; cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .05s; display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover { background: var(--blue-dark); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .wico { width: 1.05em; height: 1.05em; }
.btn.sm { padding: 8px 13px; font-size: 13px; }
.btn.lg { padding: 14px 24px; font-size: 15px; }
.btn.block { width: 100%; justify-content: center; }
.btn.success { background: var(--success); } .btn.success:hover { filter: brightness(.93); }
.btn.danger { background: var(--danger); } .btn.danger:hover { filter: brightness(.93); }
.btn.ghost { background: transparent; border-color: var(--gray-300); color: var(--gray-700); }
.btn.ghost:hover { background: var(--gray-100); }
.btn.secondary { background: var(--white); color: var(--gray-700); border-color: var(--gray-200); box-shadow: var(--shadow-xs); }
.btn.secondary:hover { background: var(--gray-50); border-color: var(--gray-300); }

/* ── Campos ── */
.input, input.field, select.field, textarea.field {
  font-family: var(--sans); width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-950); font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--gray-400); }
.input:focus, .field:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
.label { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 7px; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em; border: 1px solid transparent; }
.badge .wico { width: 1em; height: 1em; }
.badge.neutral { background: var(--gray-100); color: var(--gray-600); border-color: var(--gray-200); }
.badge.brand { background: var(--blue-50); color: var(--blue); border-color: var(--blue-100); }
.badge.success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge.warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.badge.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }

/* ── Barra de progresso / SLA ── */
.bar { height: 7px; border-radius: 6px; background: var(--gray-150); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 6px; transition: width .4s ease; }

/* ── Abas ── */
.tabs { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; background: var(--gray-100); padding: 4px; border-radius: 12px; width: fit-content; }
.tab { padding: 8px 16px; border-radius: 9px; background: transparent; border: 0; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--gray-500); display: inline-flex; align-items: center; gap: 7px; }
.tab:hover { color: var(--gray-800); }
.tab.active { background: var(--white); color: var(--blue); box-shadow: var(--shadow-xs); }

/* ── Utilitários ── */
.mono { font-family: var(--mono); }
.muted { color: var(--gray-500); }
.grid { display: grid; gap: 16px; }
.hidden { display: none; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* A eyebrow leva um traço do compasso: marcador de seção que diz de que
   sistema a seção é, em vez de um bullet decorativo. */
.eyebrow { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .1em; display: flex; align-items: center; gap: 9px; }
.eyebrow::before { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--compasso); flex: none; }

/* ══════════════════════════════════════════════════════════════
   MODO CONCIERGE — telas de candidato/colaborador (acolhedor)
   Fundo creme, tipografia maior, alvos de toque grandes.
   ══════════════════════════════════════════════════════════════ */
body.concierge { background: var(--cream); color: var(--gray-900); }
body.concierge .app-title { font-size: 26px; }
body.concierge .app-subtitle { font-size: 15px; }

/* Acento ciano (as classes seguem chamando `warm` — estão em 11 telas, e
   renomear valeria um commit de busca-e-troca para ganhar só o nome).
   O texto vai em tinta escura, não em branco: branco sobre #00D2FF dá 1,9:1. */
.btn.warm { background: var(--acc); color: var(--ink); font-weight: 700; }
.btn.warm:hover { background: var(--acc-200); }
.ico-tile.warm { background: var(--acc-50); color: var(--acc-ink); }
.badge.warm { background: var(--acc-50); color: var(--acc-ink); border-color: var(--acc-200); }

/* Botão XL — alvo de toque generoso (dedo, idoso, pouca familiaridade) */
.btn-xl { font-family: var(--sans); border: 1px solid transparent; border-radius: 16px; padding: 20px 26px;
  font-weight: 800; font-size: 19px; cursor: pointer; display: inline-flex; align-items: center; gap: 12px;
  min-height: 68px; transition: background .15s, box-shadow .15s, transform .05s; }
.btn-xl:active { transform: translateY(1px); }
.btn-xl:focus-visible { outline: none; box-shadow: var(--ring); }

/* Cartão de escolha grande (fluxo simplificado, um foco por vez) */
.choice { display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; background: var(--white);
  border: 2px solid var(--gray-200); border-radius: 18px; padding: 22px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .12s; font-family: var(--sans); }
.choice:hover, .choice:focus-visible { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-2px); outline: none; }
.choice .ico-tile { width: 60px; height: 60px; border-radius: 16px; }
.choice .ico-tile .wico { width: 30px; height: 30px; }
.choice .c-nm { font-size: 19px; font-weight: 800; color: var(--gray-950); }
.choice .c-ds { font-size: 14px; color: var(--gray-500); margin-top: 3px; }

/* Linha do tempo de passos (reduz sensação de espera) */
.steps { display: flex; flex-direction: column; gap: 2px; }
.step { display: flex; align-items: center; gap: 14px; padding: 12px 4px; }
.step .dot { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--gray-100); color: var(--gray-400); border: 2px solid var(--gray-200); }
.step .dot .wico { width: 18px; height: 18px; }
.step .st-nm { font-weight: 700; font-size: 15px; color: var(--gray-600); }
.step .st-ds { font-size: 13px; color: var(--gray-400); }
.step.done .dot { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.step.done .st-nm { color: var(--gray-900); }
.step.current .dot { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-100); }
.step.current .st-nm { color: var(--blue); }

/* Conquistas (gamificação leve) */
.achv { display: flex; gap: 10px; flex-wrap: wrap; }
.achv .a { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--gray-100); color: var(--gray-400); border: 1px solid var(--gray-200); }
.achv .a.on { background: var(--acc-50); color: var(--acc-ink); border-color: var(--acc-200); }
.achv .a .wico { width: 16px; height: 16px; }

/* ── Acessibilidade: escala de texto (zoom p/ kiosk) e alto contraste ── */
:root.a11y-lg body { zoom: 1.15; }
:root.a11y-xl body { zoom: 1.32; }
:root.a11y-contrast body { background: #fff; }
:root.a11y-contrast .muted, :root.a11y-contrast .app-subtitle, :root.a11y-contrast .c-ds, :root.a11y-contrast .st-ds { color: #333 !important; }
:root.a11y-contrast .card, :root.a11y-contrast .choice, :root.a11y-contrast .works-container { border-color: #111 !important; }
:root.a11y-contrast .btn, :root.a11y-contrast .btn-xl { border-color: #000; }
:root.a11y-contrast body { color: #000; }