/* ==========================================================================
   FAU — Soluções em Gestão de Pessoas · Identidade visual
   Tokens e componentes compartilhados entre o site e o portal.

   Paleta e tipografia vêm do Manual de Identidade Visual. Os dois azuis
   foram conferidos no arquivo oficial da marca (Logo Fau/7.png):
   azul institucional #081D3D e azul petróleo #026271.

   Princípio do briefing: "menos informação por tela, mais clareza por
   interação" — fundos claros, linhas finas, sombras discretas e o azul
   usado como assinatura, não como preenchimento constante.
   ========================================================================== */

:root {
  /* Azul institucional — assinatura da marca */
  --azul-950: #04101F;
  --azul-900: #081D3D;   /* azul institucional (manual) */
  --azul-800: #0C2A56;
  --azul-700: #10386F;   /* cor das ações principais */
  --azul-600: #17498C;
  --azul-500: #205FAF;
  --azul-400: #4A82C9;
  --azul-300: #86AEDF;
  --azul-200: #C2D6EF;
  --azul-100: #E2EBF7;
  --azul-50:  #F2F6FC;

  /* Azul petróleo — apoio, dados e destaques pontuais */
  --petroleo-900: #012A31;
  --petroleo-700: #026271;   /* azul petróleo (medido no logo) */
  --petroleo-600: #0A7A8C;
  --petroleo-500: #109BAF;
  --petroleo-300: #74C6D3;
  --petroleo-100: #DDF1F5;

  /* Neutros */
  --grafite: #2B2D33;        /* grafite (manual) */
  --cinza-marca: #8A93A5;
  --texto: #23262E;
  --texto-suave: #5A6273;
  --texto-fraco: #8A93A5;
  --linha: #E6E9EF;
  --linha-forte: #D3D9E3;
  --fundo: #F2F4F7;          /* cinza claro (manual) */
  --fundo-alt: #E9EDF3;
  --branco: #FFFFFF;

  /* Estados */
  --sucesso: #0B6B4F;
  --sucesso-bg: #E3F4EC;
  --alerta: #8A5A08;
  --alerta-bg: #FBF0DA;
  --erro: #B3261E;
  --erro-bg: #FBE9E7;
  --info: #026271;
  --info-bg: #DDF1F5;

  /* Tipografia — Montserrat nos títulos, Manrope nos textos (manual).
     As fontes vêm do Google Fonts; sem elas, a pilha do sistema assume. */
  --fonte-titulo: 'Montserrat', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --fonte-texto: 'Manrope', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;

  /* Formas — cantos levemente arredondados */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-full: 999px;

  /* Sombras discretas: o briefing pede linha fina, não sombra pesada */
  --sombra-xs: 0 1px 2px rgba(8, 29, 61, .05);
  --sombra-sm: 0 2px 8px rgba(8, 29, 61, .06);
  --sombra-md: 0 8px 24px rgba(8, 29, 61, .08);
  --sombra-lg: 0 20px 48px rgba(8, 29, 61, .12);

  --container: 1180px;
  --transicao: 180ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

/* o atributo hidden precisa vencer qualquer display definido depois */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

/* Nenhuma palavra pode estourar a caixa — vale para tela estreita e para quem
   usa fonte ampliada no Android, onde "Contabilidade" sozinha passava da tela. */
h1, h2, h3, h4, p, li, td, th, dd, dt, label, .btn, .selo, .chip {
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--azul-900);
  line-height: 1.16;
  margin: 0 0 .5em;
  font-weight: 800;          /* Montserrat ExtraBold (manual) */
  letter-spacing: -.02em;
}
/* SemiBold nos subtítulos, como manda o manual */
h3, h4 { font-weight: 600; letter-spacing: -.01em; }

p { margin: 0 0 1em; }
a { color: var(--azul-600); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--azul-500); }
img, svg { max-width: 100%; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- Botões -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transicao);
}
.btn:focus-visible { outline: 3px solid var(--azul-400); outline-offset: 2px; }

.btn-primario {
  background: var(--azul-700);
  color: #fff;
  box-shadow: 0 4px 14px rgba(8, 29, 61, .18);
}
.btn-primario:hover { background: var(--azul-600); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(8, 29, 61, .24); }

.btn-secundario { background: var(--branco); color: var(--azul-700); border-color: var(--linha-forte); }
.btn-secundario:hover { border-color: var(--azul-400); color: var(--azul-600); background: var(--azul-50); }

.btn-contorno { background: transparent; color: var(--azul-700); border-color: var(--azul-700); }
.btn-contorno:hover { background: var(--azul-700); color: #fff; }

.btn-claro { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn-claro:hover { background: #fff; color: var(--azul-900); }

.btn-petroleo { background: var(--petroleo-600); color: #fff; }
.btn-petroleo:hover { background: var(--petroleo-700); color: #fff; }

.btn-perigo { background: var(--erro-bg); color: var(--erro); border-color: #F0CFCB; }
.btn-perigo:hover { background: var(--erro); color: #fff; }

.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.btn-xs { padding: 6px 11px; font-size: 12.5px; gap: 5px; }
.btn-lg { padding: 15px 30px; font-size: 16.5px; }
.btn-bloco { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* --------------------------------------------------------------- Selos --- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--azul-100);
  color: var(--azul-700);
  white-space: nowrap;
}
.selo-sucesso { background: var(--sucesso-bg); color: var(--sucesso); }
.selo-alerta  { background: var(--alerta-bg); color: var(--alerta); }
.selo-erro    { background: var(--erro-bg); color: var(--erro); }
.selo-neutro  { background: var(--fundo-alt); color: var(--texto-suave); }
.selo-petroleo { background: var(--petroleo-100); color: var(--petroleo-700); }

/* ------------------------------------------------------------- Mensagens - */
.alerta {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  margin-bottom: 14px;
  font-size: 14.5px;
  animation: surgir .3s ease both;
}
.alerta strong { font-weight: 700; }
.alerta-sucesso { background: var(--sucesso-bg); border-color: #BCE3D2; color: #08503B; }
.alerta-erro    { background: var(--erro-bg); border-color: #F1CCC8; color: #8A1C16; }
.alerta-aviso   { background: var(--alerta-bg); border-color: #EBD6A6; color: #7A560A; }
.alerta-info    { background: var(--info-bg); border-color: #B8DCE3; color: var(--petroleo-900); }

@keyframes surgir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- Cards --- */
.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-xs);
}
.cartao-corpo { padding: 24px; }

/* ------------------------------------------------------------ Formulários- */
.campo { margin-bottom: 16px; }
.campo label,
.rotulo {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 6px;
}
.campo .dica { font-size: 12.5px; color: var(--texto-fraco); margin-top: 5px; text-transform: none; letter-spacing: 0; font-weight: 400; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=month], input[type=tel], input[type=search],
input[type=url], select, textarea {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  background: var(--branco);
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--r-sm);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235F706D' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
select[multiple] { background-image: none; padding-right: 14px; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul-400);
  box-shadow: 0 0 0 3px rgba(16, 56, 111, .14);
}
input::placeholder, textarea::placeholder { color: #A6AEBE; }

input[type=file] {
  width: 100%;
  padding: 10px;
  border: 1.5px dashed var(--linha-forte);
  border-radius: var(--r-sm);
  background: var(--azul-50);
  font-size: 14px;
}

.linha-campos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.linha-campos.duas { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: var(--texto);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.check input { width: 18px; height: 18px; accent-color: var(--azul-700); margin: 0; }

/* -------------------------------------------------------------- Tabelas -- */
.tabela-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--linha); background: var(--branco); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.tabela th {
  text-align: left;
  padding: 13px 16px;
  background: var(--fundo-alt);
  color: var(--azul-800);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--linha);
}
table.tabela td { padding: 13px 16px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
table.tabela tbody tr:last-child td { border-bottom: none; }
table.tabela tbody tr { transition: background var(--transicao); }
table.tabela tbody tr:hover { background: var(--azul-50); }
.tabela .acoes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.vazio {
  text-align: center;
  padding: 54px 24px;
  color: var(--texto-suave);
}
.vazio .icone { font-size: 40px; margin-bottom: 10px; opacity: .5; }
.vazio h3 { color: var(--azul-800); margin-bottom: 6px; }

/* ------------------------------------------------------- Utilitários ----- */
.flex { display: flex; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.centro { display: flex; align-items: center; gap: 10px; }
.grid { display: grid; gap: 20px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 8px; }  .mb-1 { margin-bottom: 8px; }
.mt-2 { margin-top: 16px; } .mb-2 { margin-bottom: 16px; }
.mt-3 { margin-top: 26px; } .mb-3 { margin-bottom: 26px; }
.mt-4 { margin-top: 40px; }
.texto-suave { color: var(--texto-suave); }
.texto-fraco { color: var(--texto-fraco); font-size: 13px; }
.pequeno { font-size: 13px; }
.direita { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-family: 'Consolas', 'SF Mono', Menlo, monospace; font-size: 13.5px; }

.sobrelinha {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--petroleo-700);
  margin-bottom: 8px;
  display: block;
}

/* Linha fina de assinatura — desdobramento do grafismo da marca.
   Substitui a sublinha decorativa dos títulos sem virar enfeite solto. */
.risco {
  display: block;
  width: 36px; height: 3px;
  border-radius: 2px;
  background: var(--petroleo-600);
  margin-bottom: 9px;
}

/* Grid de pontos do manual, para fundos de seção */
.pontos {
  background-image: radial-gradient(currentColor 1.4px, transparent 1.4px);
  background-size: 18px 18px;
  opacity: .18;
}

/* ícone de tipo de arquivo */
.tipo-arq {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  background: var(--fundo-alt); color: var(--texto-suave);
  text-transform: uppercase;
}
.tipo-pdf { background: #FDEAE8; color: #B3261E; }
.tipo-img { background: #E2EBF7; color: #17498C; }
.tipo-doc { background: #E8EFFB; color: #2B4C9B; }
.tipo-xls { background: #E4F5EC; color: #16794F; }
.tipo-ppt { background: #FDEEE2; color: #B45309; }
.tipo-zip { background: #F1EDFB; color: #5B3FA8; }
.tipo-txt { background: #E9EDF3; color: #4A5568; }