/* RotinaDP — identidade visual opção B ("pessoa no documento"). Use só estes tokens. */
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
}
:root {
  --grafite-900: #1E293B; --grafite-700: #334155; --grafite-500: #64748B;
  --grafite-200: #E2E8F0; --grafite-50: #F8FAFC; --branco: #FFFFFF;
  --laranja-500: #F97316; --laranja-700: #C2410C; --laranja-300: #FDBA74; --laranja-50: #FFF7ED;
  --sucesso: #15803D; --sucesso-fundo: #F0FDF4;
  --atencao: #B45309; --atencao-fundo: #FFFBEB;
  --erro: #B91C1C; --erro-fundo: #FEF2F2;
  --info: #1D4ED8; --info-fundo: #EFF6FF;
  --fundo: var(--grafite-50); --cartao: var(--branco); --texto: var(--grafite-700);
  --titulo: var(--grafite-900); --secundario: var(--grafite-500); --borda: var(--grafite-200);
  --destaque: var(--laranja-500); --link: var(--laranja-700);
  --raio: 10px; --raio-cartao: 14px; --corpo: 14px;
}
body.portal { --corpo: 16px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0F172A; --cartao: #1E293B; --texto: #F1F5F9; --titulo: #F1F5F9;
    --secundario: #94A3B8; --borda: #334155; --destaque: #FDBA74; --link: #FDBA74;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: "DM Sans", system-ui, sans-serif; font-weight: 400;
  font-size: var(--corpo); line-height: 1.5; color: var(--texto); background: var(--fundo);
}
h1, h2, h3 { color: var(--titulo); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: 1.6em; } h2 { font-size: 1.25em; } h3 { font-size: 1.05em; }
a { color: var(--link); }
.secundario { color: var(--secundario); font-size: max(14px, .93em); }

/* Logotipo: símbolo + "rotina" + "dp", DM Sans 700, minúsculas */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { height: 32px; min-height: 24px; width: auto; display: block; }
.logo .marca { font-weight: 700; letter-spacing: -0.02em; font-size: 24px; text-transform: lowercase; line-height: 1; }
.logo--claro .r { color: #1E293B; } .logo--claro .d { color: #F97316; }
.logo--escuro .r { color: #FFFFFF; } .logo--escuro .d { color: #FDBA74; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo--claro .r { color: #FFFFFF; }
  :root:not([data-tema="claro"]) .logo--claro .d { color: #FDBA74; }
}

/* Cartões e formulários */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 24px; }
label { display: block; font-weight: 500; color: var(--titulo); margin: 0 0 6px; }
.campo { margin-bottom: 16px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], input[type=tel], input[type=number], input:not([type]), select, textarea {
  width: 100%; font: inherit; color: var(--texto); background: var(--cartao);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; min-height: 44px;
}
input:focus, select:focus, textarea:focus, .botao:focus-visible {
  outline: 2px solid var(--laranja-500); outline-offset: 1px; border-color: var(--laranja-500);
}
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 10px 18px; border-radius: var(--raio); font: inherit; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
}
.botao--principal { background: #1E293B; color: #FFFFFF; }
.botao--principal:hover { background: #334155; }
.botao--destaque { background: #F97316; color: #1E293B; }
.botao--secundario { background: transparent; color: var(--titulo); border-color: var(--borda); }
.botao--largo { width: 100%; }
.aviso { border-radius: var(--raio); padding: 10px 12px; margin-bottom: 16px; font-size: 14px; }
.aviso--erro { background: var(--erro-fundo); color: var(--erro); }
.aviso--sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }
.aviso--atencao { background: var(--atencao-fundo); color: var(--atencao); }
.aviso--info { background: var(--info-fundo); color: var(--info); }

/* Login */
.tela-entrada { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.tela-entrada .caixa { width: 100%; max-width: 400px; }
.tela-entrada .topo { text-align: center; margin-bottom: 24px; }
.tela-entrada .topo .logo img { height: 44px; }
.tela-entrada .topo .logo .marca { font-size: 32px; }
.tela-entrada .cartao { padding: 28px 24px; }
.tela-entrada h1 { font-size: 20px; margin-bottom: 4px; }
.tela-entrada .rodape { text-align: center; margin-top: 20px; font-size: 14px; color: var(--secundario); }
.selo-ambiente { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
  background: var(--laranja-50); color: var(--laranja-700); margin-top: 8px; }

/* Área do RH */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.lateral { background: #1E293B; color: #FFFFFF; padding: 20px 14px; }
.lateral nav a { display: flex; align-items: center; gap: 10px; color: #E2E8F0; text-decoration: none;
  padding: 10px 12px; border-radius: var(--raio); font-weight: 500; min-height: 40px; }
.lateral nav a:hover, .lateral nav a[aria-current] { background: #334155; color: #FFFFFF; }
.lateral .logo { margin: 0 6px 24px; }
.conteudo { padding: 28px 32px; max-width: 1100px; }
@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; }
  .lateral { padding: 12px 16px; }
  .lateral nav { display: flex; overflow-x: auto; gap: 4px; }
  .lateral .logo { margin: 0 0 8px; }
  .conteudo { padding: 20px 16px; }
}

/* ===== Telas (dia 2) ===== */
.cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.cabecalho h1 { margin: 0; }
.cabecalho .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.trilha { font-size: 14px; color: var(--secundario); margin-bottom: 6px; }
.trilha a { color: var(--secundario); text-decoration: none; }
.grade { display: grid; gap: 16px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .grade-2, .grade-3 { grid-template-columns: 1fr; } }
.cartao + .cartao { margin-top: 16px; }
.cartao h2 { font-size: 16px; margin-bottom: 12px; }
.numero { font-size: 28px; font-weight: 700; color: var(--titulo); line-height: 1.1; }
.numero-rotulo { color: var(--secundario); font-size: 14px; }

.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-weight: 500; color: var(--secundario); font-size: 14px; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela a { color: var(--titulo); font-weight: 500; text-decoration: none; }
.tabela a:hover { text-decoration: underline; }
.tabela-caixa { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-cartao); overflow-x: auto; }
@media (max-width: 640px) {
  .tabela.empilha thead { display: none; }
  .tabela.empilha tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--borda); }
  .tabela.empilha tr:last-child { border-bottom: 0; }
  .tabela.empilha td { display: block; padding: 2px 0; border: 0; }
  .tabela.empilha td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--secundario); font-size: 14px; }
}

.etiqueta { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.etiqueta--neutra { background: var(--grafite-200); color: var(--grafite-700); }
.etiqueta--sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }
.etiqueta--atencao { background: var(--atencao-fundo); color: var(--atencao); }
.etiqueta--erro { background: var(--erro-fundo); color: var(--erro); }
.etiqueta--info { background: var(--info-fundo); color: var(--info); }
.etiqueta--pendente { background: var(--laranja-50); color: var(--laranja-700); }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 16px; overflow-x: auto; }
.abas a { padding: 10px 14px; text-decoration: none; color: var(--secundario); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.abas a[aria-current] { color: var(--titulo); border-bottom-color: var(--laranja-500); }

.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grade .inteiro { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grade { grid-template-columns: 1fr; } }
.campo .ajuda { font-size: 14px; color: var(--secundario); margin-top: 4px; }
.campo .erro-campo { font-size: 14px; color: var(--erro); margin-top: 4px; }
.campo input[type=file] { font: inherit; width: 100%; padding: 10px 0; }
.caixas label { display: flex; align-items: center; gap: 10px; font-weight: 400; min-height: 40px; margin: 0; }
.caixas input { width: 20px; height: 20px; min-height: 0; accent-color: #1E293B; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filtros input, .filtros select { width: auto; flex: 1 1 180px; }
.vazio { text-align: center; padding: 32px 16px; color: var(--secundario); }
.link-copiar { display: flex; gap: 8px; }
.link-copiar input { font-size: 14px; }
.botao--pequeno { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.botao--perigo { background: transparent; color: var(--erro); border-color: var(--borda); }
form.em-linha { display: inline; }

/* Checklist */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--borda); }
.checklist li:last-child { border-bottom: 0; }
.marcador { flex: 0 0 24px; height: 24px; border-radius: 999px; border: 2px solid var(--borda); display: grid; place-items: center; margin-top: 1px; }
.marcador--feito { background: var(--sucesso); border-color: var(--sucesso); }
.marcador--feito::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.marcador--enviado { border-color: var(--laranja-500); }
.marcador--enviado::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--laranja-500); }
.checklist .corpo-item { flex: 1; min-width: 0; }
.checklist .titulo-item { font-weight: 500; color: var(--titulo); }
.checklist .meta { font-size: 14px; color: var(--secundario); }
.checklist .acoes-item { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.progresso { height: 8px; background: var(--grafite-200); border-radius: 999px; overflow: hidden; }
.progresso span { display: block; height: 100%; background: var(--laranja-500); }

/* Portal do colaborador (convite) */
.portal-topo { background: #1E293B; padding: 14px 16px; }
.portal-topo .logo img { height: 28px; }
.portal-topo .logo .marca { font-size: 20px; }
.portal-corpo { max-width: 560px; margin: 0 auto; padding: 20px 16px 48px; }
.portal-corpo .cartao { padding: 20px 16px; }
.portal .botao { min-height: 48px; }
.envio-item { padding: 16px 0; border-bottom: 1px solid var(--borda); }
.envio-item:last-child { border-bottom: 0; }

/* Barra lateral: nome da conta e rodapé */
.lateral .conta-atual { font-size: 13px; color: #94A3B8; margin: -14px 6px 18px; }
.lateral .rodape-lateral { margin-top: 24px; border-top: 1px solid #334155; padding-top: 12px; }
.lateral .rodape-lateral button { background: none; border: 0; color: #CBD5E1; font: inherit; cursor: pointer; padding: 10px 12px; }
@media (max-width: 800px) {
  .lateral .conta-atual, .lateral .rodape-lateral { display: none; }
  .lateral { display: flex; flex-direction: column; }
  .lateral nav a { padding: 8px 10px; white-space: nowrap; }
}

/* Seletor de arquivo (texto em português, envio automático) */
.arquivo { position: relative; overflow: hidden; }
.arquivo input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; }
.arquivo:focus-within { outline: 2px solid var(--laranja-500); outline-offset: 1px; }
/* Números do painel: sempre lado a lado, compactos no celular */
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.numeros .cartao { margin-top: 0 !important; padding: 16px; }
@media (max-width: 640px) { .numeros { gap: 8px; } .numeros .cartao { padding: 12px; } .numeros .numero { font-size: 24px; } .numeros .numero-rotulo { font-size: 13px; line-height: 1.3; } }

/* Portal (semana 2) */
.portal-nav { display: flex; gap: 4px; overflow-x: auto; margin: 10px -4px 0; padding-bottom: 2px; }
.portal-nav a { color: #CBD5E1; text-decoration: none; font-weight: 500; padding: 10px 12px; border-radius: var(--raio); white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
.portal-nav a[aria-current] { background: #334155; color: #FFFFFF; }
.item-portal { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); text-decoration: none; color: inherit; min-height: 44px; }
.item-portal:last-child { border-bottom: 0; }
.item-portal strong { color: var(--titulo); }
.passos { padding-left: 20px; margin: 0 0 16px; }
.passos li { margin-bottom: 14px; }

/* Menu do RH no celular rola dentro da faixa, sem alargar a página */
.app > * { min-width: 0; }
.lateral nav { scrollbar-width: none; }
.lateral nav::-webkit-scrollbar { display: none; }

/* Entrar com Google e separador "ou" (27/10) */
.botao--google { background: var(--branco); color: var(--grafite-900); border: 1px solid var(--grafite-200); font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.botao--google:hover { background: var(--grafite-50); }
.ou { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--secundario); font-size: 13px; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.links-entrada { text-align: center; margin: 16px 0 0; font-size: 14px; }
.links-entrada a, .tela-entrada .rodape a { color: var(--link); font-weight: 600; }

/* Páginas públicas (privacidade e termos) e rodapé legal */
.publico-topo { background: var(--grafite-900); padding: 16px max(16px, calc((100% - 760px) / 2)); }
.pagina-legal { max-width: 760px; margin: 0 auto; padding: 24px 16px 8px; line-height: 1.6; }
.pagina-legal h1 { font-size: 28px; margin: 0 0 16px; color: var(--titulo); }
.pagina-legal h2 { font-size: 18px; margin: 28px 0 8px; color: var(--titulo); }
.pagina-legal p, .pagina-legal li { color: var(--texto); }
.pagina-legal ul { padding-left: 20px; }
.pagina-legal li { margin: 4px 0; }
.pagina-legal a, .rodape-legal a { color: var(--link); }
.rodape-legal { text-align: center; font-size: 13px; color: var(--secundario); padding: 20px 16px 28px; }
.rodape-legal a { font-weight: 600; }
.rodape-legal__empresa { display: block; margin-top: 6px; }