/* ==========================================================================
   Portal LC — identidade visual oficial LC Engenharia (Paleta 01 · Minimalismo Técnico)
   mesmos tokens do site institucional e do AprovaApp.
   ========================================================================== */
:root {
  --cor-fundo: #F6F5F2;
  --cor-vermelho: #C72E2E;
  --cor-vermelho-escuro: #A82424;
  --cor-bronze: #9A7553;
  --cor-grafite: #2E3135;
  --cor-linha: #D9D9D9;
  --cor-branco: #FFFFFF;
  --cor-texto-secundario: #6B7075;
  --cor-verde: #3B6D11;
  --cor-verde-claro: #EAF3DE;

  --fonte-titulo: 'Manrope', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-corpo: 'IBM Plex Sans', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-dado: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: var(--fonte-corpo);
  background: var(--cor-fundo);
  color: var(--cor-grafite);
}
body { min-height: 100vh; }

a { color: var(--cor-vermelho); }

.topo {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--cor-branco); border-bottom: 1px solid var(--cor-linha);
}
.topo h1 { font-family: var(--fonte-titulo); font-weight: 800; font-size: 16px; margin: 0; letter-spacing: -0.01em; }
.topo .sair { background: none; border: none; color: var(--cor-texto-secundario); font-size: 13px; cursor: pointer; font-family: var(--fonte-corpo); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marca .logo-mini { background: var(--cor-branco); border: 1px solid var(--cor-linha); border-radius: 4px; padding: 2px 4px; display: flex; }
.marca .logo-mini img { height: 26px; display: block; }

.container { padding: 12px 16px 32px; max-width: 640px; margin: 0 auto; }
/* Telas de trabalho (LC Geral, Administração) aproveitam mais a tela em desktop — o Portal LC
   é pensado pra PC, diferente do AprovaApp (que continua mobile-first). Formulários simples
   (login, trocar senha) continuam com o .container estreito padrão acima. */
.container.largo { max-width: 1180px; padding: 20px 24px 40px; }

/* LC Geral: mural mais largo numa coluna, calendário+aniversariantes numa coluna lateral */
.geral-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; margin-top: 16px; }
.coluna-lateral { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .geral-grid { grid-template-columns: 1fr; } }

/* Administração: cards de configuração lado a lado; tabelas continuam full-width (precisam
   de espaço horizontal) */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 860px) { .admin-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--cor-branco); border: 1px solid var(--cor-linha); border-radius: 4px;
  padding: 16px; margin-bottom: 12px;
}

button.primario {
  width: 100%; padding: 12px; border: none; border-radius: 2px; background: var(--cor-vermelho);
  color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; font-family: var(--fonte-corpo);
}
button.primario:hover { background: var(--cor-vermelho-escuro); }
button.primario:disabled { background: var(--cor-linha); color: var(--cor-texto-secundario); cursor: not-allowed; }
button.perigo {
  background: var(--cor-branco); color: var(--cor-grafite); border: 1px solid var(--cor-grafite);
  font-weight: 600;
}
button.perigo:hover { background: var(--cor-grafite); color: var(--cor-fundo); }
button.secundario {
  border: 1px solid var(--cor-linha); border-radius: 2px; background: var(--cor-branco);
  color: var(--cor-grafite); font-size: 14px; cursor: pointer; font-family: var(--fonte-corpo);
}
button.secundario:hover { background: var(--cor-fundo); border-color: var(--cor-grafite); }
.texto-notificacoes { font-size: 13px; color: var(--cor-texto-secundario); margin: 8px 0 12px; }
#btnNotificacoes { padding: 9px 16px; }

.acoes { display: flex; gap: 10px; margin-top: 20px; }
.acoes button { flex: 1; padding: 12px; }

.vazio { text-align: center; color: var(--cor-texto-secundario); padding: 40px 16px; }

.badge {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 2px;
  background: #F1E9E2; color: var(--cor-bronze); margin-top: 6px; font-family: var(--fonte-dado);
}

.campo { margin-bottom: 14px; }
.campo .rotulo { font-size: 12px; color: var(--cor-texto-secundario); margin-bottom: 3px; }
.campo .valor-campo { font-size: 15px; }

.voltar { color: var(--cor-texto-secundario); text-decoration: none; font-size: 13px; display: inline-block; margin-bottom: 10px; }
.voltar:hover { color: var(--cor-vermelho); }

.boas-vindas { text-align: center; padding: 24px 16px; }
.boas-vindas .nivel { color: var(--cor-texto-secundario); font-size: 13px; margin-top: 4px; }

.menu-inicio a {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
  background: var(--cor-branco); border: 1px solid var(--cor-linha); border-radius: 4px;
  padding: 18px 16px; margin-bottom: 12px;
}
.menu-inicio a:active { background: #FBFAF8; }
.menu-inicio a:hover { border-color: var(--cor-bronze); }
.menu-inicio .icone-menu { font-size: 24px; }
.menu-inicio .titulo-menu { font-family: var(--fonte-titulo); font-weight: 700; font-size: 15px; }
.menu-inicio .subtitulo-menu { color: var(--cor-texto-secundario); font-size: 12px; margin-top: 2px; }

.marca-lc {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px 16px 12px; text-align: center;
}
.marca-lc-rotulo {
  font-family: var(--fonte-dado); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--cor-texto-secundario);
}
.marca-lc img { height: 56px; width: auto; opacity: 0.9; }

.form-admin label { display: block; font-size: 13px; margin-bottom: 12px; color: var(--cor-texto-secundario); }
.form-admin input[type="text"], .form-admin input[type="email"], .form-admin input[type="password"],
.form-admin input[type="date"], .form-admin select {
  width: 100%; margin-top: 5px; padding: 10px; border-radius: 2px; border: 1px solid var(--cor-linha);
  background: var(--cor-fundo); color: var(--cor-grafite); font-size: 14px; font-family: var(--fonte-corpo);
}
.form-admin input:focus, .form-admin select:focus { outline: none; border-color: var(--cor-bronze); }
.form-admin textarea {
  width: 100%; margin-top: 5px; padding: 10px; border-radius: 2px; border: 1px solid var(--cor-linha);
  background: var(--cor-fundo); color: var(--cor-grafite); font-size: 14px; font-family: var(--fonte-corpo);
  resize: vertical; min-height: 60px;
}
.form-admin .linha-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; color: var(--cor-texto-secundario); }
.form-admin .linha-checkbox input { width: auto; margin: 0; }
.erro-form { color: var(--cor-vermelho); font-size: 12px; margin-top: 6px; min-height: 16px; }

.secao-proposta { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--cor-linha); }
.secao-proposta:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.secao-proposta-titulo {
  font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--cor-texto-secundario); margin-bottom: 10px;
}

.tabela-usuarios { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-usuarios th, .tabela-usuarios td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--cor-linha); vertical-align: top; }
.tabela-usuarios th { color: var(--cor-texto-secundario); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.tabela-usuarios .acoes-usuario { display: flex; gap: 8px; }
.tabela-usuarios .acoes-usuario button {
  background: none; border: none; color: var(--cor-vermelho); font-size: 12px; cursor: pointer; padding: 0;
  font-family: var(--fonte-corpo);
}

/* Home publica (2 botoes) */
.home-tela {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; gap: 16px;
}
.home-botoes { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; }
.home-botao {
  display: block; text-align: center; text-decoration: none; padding: 20px 16px; border-radius: 4px;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 16px; border: 1px solid var(--cor-linha);
}
.home-botao.ativo { background: var(--cor-vermelho); color: #fff; border-color: var(--cor-vermelho); }
.home-botao.ativo:hover { background: var(--cor-vermelho-escuro); }
.home-botao.desativado { background: var(--cor-branco); color: var(--cor-texto-secundario); cursor: not-allowed; }
.home-botao .sub-botao { display: block; font-family: var(--fonte-corpo); font-weight: 400; font-size: 12px; margin-top: 4px; }

/* LC Geral */
.secao-geral { margin-bottom: 18px; }
.secao-geral h2 { font-family: var(--fonte-titulo); font-size: 15px; margin: 0 0 10px; }
.aviso-mural { border-left: 3px solid var(--cor-bronze); padding-left: 12px; margin-bottom: 14px; }
.aviso-mural .titulo-aviso { font-weight: 600; font-size: 14px; }
.aviso-mural .texto-aviso { font-size: 13px; color: var(--cor-grafite); margin-top: 3px; white-space: pre-wrap; overflow-wrap: break-word; }
.aviso-mural .texto-aviso a { color: var(--cor-bronze); font-weight: 600; }
.aviso-mural .meta-aviso { font-size: 11px; color: var(--cor-texto-secundario); margin-top: 4px; font-family: var(--fonte-dado); }
.reacoes-aviso { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.btn-reacao { font-family: var(--fonte-corpo); font-size: 13px; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--cor-linha); background: var(--cor-branco); cursor: pointer; color: var(--cor-texto-secundario); line-height: 1.4; }
.btn-reacao:hover { border-color: var(--cor-bronze); }
.btn-reacao.ativo { background: #F1E9E2; border-color: var(--cor-bronze); color: var(--cor-grafite); }
.evento-agenda { display: flex; gap: 12px; align-items: baseline; margin-bottom: 10px; }
.evento-agenda .data-evento { font-family: var(--fonte-dado); font-size: 12px; color: var(--cor-bronze); flex-shrink: 0; white-space: nowrap; }
.evento-agenda .titulo-evento { font-size: 14px; }
.evento-agenda .descricao-evento { font-size: 12px; color: var(--cor-texto-secundario); }
.aniversariante { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--cor-linha); }
.aniversariante:last-child { border-bottom: none; }
.aniversariante .dia-aniversario { font-family: var(--fonte-dado); color: var(--cor-bronze); font-weight: 700; }

.calendario-meses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .calendario-meses { grid-template-columns: 1fr; } }
.mes-cal-titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 14px; margin-bottom: 8px; text-transform: capitalize; }
.semana-cal { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 11px; color: var(--cor-texto-secundario); text-align: center; margin-bottom: 4px; }
.dias-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dia-cal {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-family: var(--fonte-dado); color: var(--cor-grafite); border-radius: 4px;
}
.dia-cal-vazio { visibility: hidden; }
.dia-cal-hoje { outline: 2px solid var(--cor-vermelho); outline-offset: -2px; font-weight: 700; }
.legenda-calendario { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: 12px; color: var(--cor-texto-secundario); }
.legenda-item { display: flex; align-items: center; gap: 6px; }
.legenda-cor { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--cor-linha); flex-shrink: 0; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
.apps-grid a {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit;
  background: var(--cor-branco); border: 1px solid var(--cor-linha); border-radius: 4px; padding: 14px 8px; text-align: center;
}
.apps-grid a:hover { border-color: var(--cor-bronze); }
.apps-grid .icone-app { font-size: 26px; }
.apps-grid img.icone-app { width: 32px; height: 32px; object-fit: contain; }
.apps-grid .nome-app { font-size: 12px; font-weight: 600; }
.apps-grid .app-sem-acesso {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  background: var(--cor-fundo); border: 1px dashed var(--cor-linha); border-radius: 4px; padding: 14px 8px;
  color: var(--cor-texto-secundario); opacity: 0.55; cursor: not-allowed; filter: grayscale(1);
}

/* Comunicados Internos */
.icone-comunicados { width: 20px; height: 20px; vertical-align: -5px; margin-right: 6px; }
.icone-comunicados-sm { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  background: var(--cor-branco); border-radius: 4px; width: 100%; max-width: 640px;
  max-height: 90vh; overflow-y: auto; padding: 20px;
}
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.modal-header h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 16px; }
.modal-header .meta-aviso { margin-top: 4px; }
.modal-close {
  background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1;
  color: var(--cor-texto-secundario); padding: 4px; flex-shrink: 0;
}
.modal-close:hover { color: var(--cor-grafite); }
.modal-corpo { font-size: 14px; line-height: 1.6; }
.modal-corpo img { max-width: 100%; }
.modal-corpo p:first-child { margin-top: 0; }
.modal-exige-ciencia {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cor-bronze);
  background: #F1E9E2; border-radius: 4px; padding: 10px 12px; margin-top: 16px;
}
.modal-rodape { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.modal-rodape button { flex: 1; min-width: 160px; }
.modal-anexos { margin-top: 14px; font-size: 13px; }
.modal-anexos a { display: block; color: var(--cor-bronze); text-decoration: none; margin-top: 4px; }
.modal-anexos a:hover { text-decoration: underline; }

.badge-status { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 2px; font-family: var(--fonte-dado); }
.badge-pendente { background: #FCEBEB; color: var(--cor-vermelho); }
.badge-ciente { background: var(--cor-verde-claro); color: var(--cor-verde); }
.badge-rascunho { background: #F1E9E2; color: var(--cor-bronze); }
.badge-encerrado, .badge-arquivado { background: var(--cor-fundo); color: var(--cor-texto-secundario); }
/* Modulo Carreira: indicador de elegibilidade (🟢/🟡/🔴) — mesmas cores das variantes acima. */
.badge-verde { background: var(--cor-verde-claro); color: var(--cor-verde); }
.badge-amarelo { background: #F1E9E2; color: var(--cor-bronze); }
.badge-vermelho { background: #FCEBEB; color: var(--cor-vermelho); }

.comunicado-item { border-left: 3px solid var(--cor-linha); padding: 2px 0 2px 12px; margin-bottom: 14px; }
.comunicado-item.pendente { border-left-color: var(--cor-vermelho); }
.comunicado-item .titulo-comunicado { font-weight: 600; font-size: 14px; }
.comunicado-item .titulo-comunicado a { color: inherit; text-decoration: none; }
.comunicado-item .titulo-comunicado a:hover { color: var(--cor-vermelho); }
.comunicado-item .resumo-comunicado { font-size: 13px; color: var(--cor-grafite); margin-top: 3px; }
.comunicado-item .meta-comunicado { font-size: 11px; color: var(--cor-texto-secundario); margin-top: 5px; font-family: var(--fonte-dado); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.chips-selecao { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.chip-selecao {
  font-size: 12px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--cor-linha);
  background: var(--cor-branco); cursor: pointer; color: var(--cor-texto-secundario);
}
.chip-selecao:hover { border-color: var(--cor-bronze); }
.chip-selecao.selecionado { background: #F1E9E2; border-color: var(--cor-bronze); color: var(--cor-grafite); }

.editor-comunicado { margin-top: 5px; background: var(--cor-branco); }
.editor-comunicado .ql-toolbar { border-color: var(--cor-linha); border-radius: 2px 2px 0 0; }
.editor-comunicado .ql-container { border-color: var(--cor-linha); border-radius: 0 0 2px 2px; font-family: var(--fonte-corpo); font-size: 14px; min-height: 220px; }

.barra-progresso-ciencia { height: 6px; background: var(--cor-linha); border-radius: 3px; overflow: hidden; margin: 8px 0; }
.barra-progresso-ciencia div { height: 100%; background: var(--cor-verde); }