/*
 * Portal RH - tema novo (Bootstrap 5.3)
 * Paleta extraida do site www.conam.com.br:
 *   verde claro  #179176  (barra superior do site)
 *   verde        #007c63  (caixas de destaque)
 *   verde botao  #25987e
 *   petroleo     #005159  (aba ativa, titulos)
 * Texto sobre #007c63 e #005159 passa de 4,5:1 (WCAG AA); sobre #179176 so em texto grande.
 */
:root {
  --portal-petroleo: #005159;
  --portal-verde: #007c63;
  --portal-verde-claro: #179176;
  --portal-verde-botao: #25987e;
  --portal-fundo: #f5f5f5;
  --portal-superficie: #ffffff;
  --portal-texto: #2b3135;
  --portal-texto-suave: #535b61;
  --portal-borda: #d9dfe2;
  --portal-realce: #e6f2ef;

  /* ajustes do Bootstrap */
  --bs-primary: var(--portal-verde);
  --bs-primary-rgb: 0, 124, 99;
  --bs-link-color: var(--portal-verde);
  --bs-link-color-rgb: 0, 124, 99;
  --bs-link-hover-color: var(--portal-petroleo);
  --bs-link-hover-color-rgb: 0, 81, 89;
  --bs-body-bg: var(--portal-fundo);
  --bs-body-color: var(--portal-texto);
  --bs-border-color: var(--portal-borda);
  --bs-body-font-size: 1rem;
  --bs-border-radius: .375rem;
}

html { color-scheme: light; }
body { background: var(--portal-fundo); color: var(--portal-texto); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* ---- botoes na paleta ---- */
.btn-primary {
  --bs-btn-bg: var(--portal-verde);
  --bs-btn-border-color: var(--portal-verde);
  --bs-btn-hover-bg: var(--portal-petroleo);
  --bs-btn-hover-border-color: var(--portal-petroleo);
  --bs-btn-active-bg: var(--portal-petroleo);
  --bs-btn-active-border-color: var(--portal-petroleo);
  --bs-btn-disabled-bg: var(--portal-verde);
  --bs-btn-disabled-border-color: var(--portal-verde);
  --bs-btn-focus-shadow-rgb: 0, 124, 99;
}
.btn-outline-primary {
  --bs-btn-color: var(--portal-verde);
  --bs-btn-border-color: var(--portal-verde);
  --bs-btn-hover-bg: var(--portal-verde);
  --bs-btn-hover-border-color: var(--portal-verde);
  --bs-btn-active-bg: var(--portal-petroleo);
  --bs-btn-active-border-color: var(--portal-petroleo);
}
.form-control:focus, .form-select:focus, .btn:focus-visible {
  border-color: var(--portal-verde-claro);
  box-shadow: 0 0 0 .25rem rgba(23, 145, 118, .25);
}
:focus-visible { outline: 3px solid var(--portal-verde-claro); outline-offset: 2px; }

/* ---- barra superior ---- */
.portal-navbar { background: var(--portal-petroleo); border-bottom: 4px solid var(--portal-verde-claro); }
.portal-navbar .navbar-brand { display: flex; align-items: center; gap: .9rem; color: #fff; margin: 0; padding: 0; }
.portal-navbar .navbar-brand img { height: 44px; width: auto; max-width: 62vw; object-fit: contain; }
.portal-navbar .navbar-brand .portal-nome { font-size: 1.15rem; font-weight: 600; line-height: 1; padding-left: .9rem; border-left: 1px solid rgba(255,255,255,.45); white-space: nowrap; }
@media (max-width: 420px) { .portal-navbar .navbar-brand img { height: 36px; } .portal-navbar .navbar-brand .portal-nome { font-size: 1rem; padding-left: .6rem; } }
.portal-navbar .navbar-toggler { border-color: rgba(255,255,255,.6); }
.portal-navbar .navbar-toggler-icon { filter: invert(1); }
.portal-navbar .portal-usuario { color: #fff; font-size: .875rem; }
.portal-navbar .portal-usuario small { opacity: .8; display: block; }

/* ---- menu (offcanvas no celular, lateral no desktop) ---- */
.portal-menu .list-group-item { border: 0; border-radius: 0; padding: .6rem 1rem; display: flex; align-items: center; gap: .6rem; color: var(--portal-texto); }
.portal-menu .list-group-item:hover { background: var(--portal-realce); color: var(--portal-petroleo); }
.portal-menu .list-group-item.active { background: var(--portal-verde); color: #fff; }
.portal-menu .portal-menu-titulo { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--portal-texto-suave); padding: .75rem 1rem .25rem; font-weight: 600; }
.portal-menu .portal-menu-titulo.gerencial { color: var(--portal-petroleo); border-top: 1px solid var(--portal-borda); margin-top: .5rem; }
@media (min-width: 992px) {
  .portal-menu-desktop { position: sticky; top: 1rem; background: var(--portal-superficie); border: 1px solid var(--portal-borda); border-radius: .5rem; overflow: hidden; }
}

/* ---- conteudo ---- */
.portal-conteudo { background: var(--portal-superficie); border: 1px solid var(--portal-borda); border-radius: .5rem; padding: 1rem; min-width: 0; }
@media (min-width: 768px) { .portal-conteudo { padding: 1.5rem; } }
.portal-titulo-pagina { font-size: 1.35rem; color: var(--portal-petroleo); margin: 0 0 1rem; font-weight: 600; }

/* ---- rodape ---- */
.portal-rodape { color: var(--portal-texto-suave); font-size: .8rem; padding: 1.25rem 0; }

/* ---- login ---- */
.portal-login { max-width: 420px; margin: 2rem auto; }
.portal-login .card { border: 1px solid var(--portal-borda); border-top: 4px solid var(--portal-verde-claro); }

/* ---- mensagens ---- */
.alert-erro-legado { border-left: 4px solid #b02a37; }

@media print {
  @page { margin: 1.5cm; }
  body { background: #fff !important; font-size: 11pt; color: #000; }
  .portal-navbar, .portal-menu-desktop, .portal-rodape, .offcanvas, .modal, .no-print,
  .portal-conteudo form, .pagination, .btn, .alert-secondary { display: none !important; }
  .container-xxl { max-width: 100% !important; padding: 0 !important; }
  .container-xxl > .row { margin: 0 !important; }
  #conteudo { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  .portal-conteudo { border: 0 !important; padding: 0 !important; }
  .portal-titulo-pagina { color: #000; font-size: 16pt; }
  .portal-tabela-cartoes thead th { background: #eee !important; color: #000 !important; border-bottom: 1px solid #000; }
  .portal-tabela-cartoes td, .portal-tabela-cartoes th { border-bottom: 1px solid #bbb; }
  tr, .border.rounded { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}

/* ---- ficha de dados (consulta) ---- */
.portal-ficha-rotulo { font-size: .8rem; color: var(--portal-texto-suave); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.portal-ficha-valor { font-size: 1rem; padding: .15rem 0 .35rem; border-bottom: 1px solid var(--portal-borda); overflow-wrap: anywhere; }

/* ---- tabela que vira cartoes no celular ---- */
.portal-tabela-cartoes thead th { background: var(--portal-petroleo); color: #fff; font-size: .8rem; font-weight: 600; white-space: nowrap; border: 0; }
.portal-tabela-cartoes td { vertical-align: middle; }
.portal-tabela-cartoes .btn { white-space: nowrap; }
@media (max-width: 767.98px) {
  .portal-tabela-cartoes { overflow: visible; }
  .portal-tabela-cartoes table, .portal-tabela-cartoes tbody, .portal-tabela-cartoes tr, .portal-tabela-cartoes td { display: block; width: 100%; }
  .portal-tabela-cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .portal-tabela-cartoes tr { border: 1px solid var(--portal-borda); border-left: 4px solid var(--portal-verde-claro); border-radius: .5rem; margin-bottom: .75rem; padding: .35rem .75rem; background: var(--portal-superficie); }
  .portal-tabela-cartoes td { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border: 0; border-bottom: 1px dashed var(--portal-borda); text-align: right !important; }
  .portal-tabela-cartoes td:last-child { border-bottom: 0; }
  .portal-tabela-cartoes td::before { content: attr(data-rotulo); font-weight: 600; color: var(--portal-texto-suave); text-align: left; flex: 0 0 40%; }
  .portal-tabela-cartoes td:empty { display: none; }
}

/* tabelas: fundo branco (o Bootstrap herda o cinza da pagina) */
.portal-tabela-cartoes .table { --bs-table-bg: var(--portal-superficie); --bs-table-hover-bg: var(--portal-realce); }

/* cartoes no celular: celula de acoes (sem rotulo) quebra linha e alinha a direita */
@media (max-width: 767.98px) {
  .portal-tabela-cartoes td[data-rotulo=""] { justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }
  .portal-tabela-cartoes td[data-rotulo=""]::before { display: none; }
  .portal-tabela-cartoes td[data-rotulo=""] form { display: inline-block; }
}

/* seletor de matricula no cabecalho */
.portal-navbar .portal-troca-matricula { color: #fff; border: 1px solid rgba(255,255,255,.35); padding: .25rem .6rem; line-height: 1.25; }
.portal-navbar .portal-troca-matricula:hover, .portal-navbar .portal-troca-matricula:focus-visible { background: rgba(255,255,255,.12); color: #fff; }
.portal-navbar .portal-troca-matricula small { display: block; opacity: .85; }
.dropdown-menu .dropdown-header { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.dropdown-menu .dropdown-item.active { background: var(--portal-verde); }
.portal-navbar .portal-troca-matricula { position: relative; padding-right: 1.9rem; }
.portal-navbar .portal-troca-matricula::after { position: absolute; right: .7rem; top: 50%; margin: 0; transform: translateY(-50%); }

/* foto do perfil */
.portal-avatar { border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; background: var(--portal-realce); }
.portal-avatar-iniciais { display: inline-flex; align-items: center; justify-content: center; background: var(--portal-verde-claro); color: #fff; font-weight: 600; line-height: 1; }
.portal-avatar-botao { line-height: 0; }
.portal-avatar-botao:focus-visible { outline-color: #fff; }