/* =============================================================================
   SX | index2.css — camada de modernização da home (index.php)
   (o arquivo manteve o nome index2 de quando a home nova era index2.php)
   -----------------------------------------------------------------------------
   Carregada DEPOIS de index.css / sub_menu.css / calendario.css.
   TODO o conteúdo está escopado em .sx-home2 (exceto a seção 7, que é global
   e vale para o cabeçalho e o rodapé), então as demais páginas do sistema
   continuam exatamente como estão.

   Princípio: nada muda de lugar. Só respiração, contraste, cantos, sombras,
   hierarquia tipográfica e estados de hover/foco.
   ========================================================================== */

.container.sx-home2 {
  --h2-navy: #12326b;
  --h2-navy-dark: #0e1b3a;
  --h2-orange: #dd6514;
  --h2-ink: #1f2937;
  --h2-muted: #6b7280;
  --h2-line: #e6e9ef;
  --h2-card: #ffffff;
  --h2-shadow: 0 3px 14px rgba(14, 27, 58, .06);
  --h2-shadow-lg: 0 10px 30px rgba(14, 27, 58, .08);
  --h2-radius: 16px;

  background: linear-gradient(180deg, #f4f6fa 0%, #eef1f6 320px, #eef1f6 100%);
  gap: 18px;
  padding-bottom: 28px;
}

/* =============================================================================
   1) HERO — mesmos cards, mesmas posições, acabamento novo
   ========================================================================== */
.sx-home2 .hero { padding-top: 20px; }

.sx-home2 .hero > .wrap > .cards {
  gap: 1px;
  background: var(--h2-line);
  border: 1px solid var(--h2-line);
  border-radius: 20px;
  box-shadow: var(--h2-shadow-lg);
}

.sx-home2 .hero > .wrap > .cards > .card {
  padding: 20px 14px;
  gap: 12px;
  position: relative;
  transition: background .16s ease, box-shadow .16s ease;
}

.sx-home2 .hero > .wrap > .cards > .card::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--h2-orange);
  opacity: 0;
  transition: opacity .16s ease;
}

.sx-home2 .hero > .wrap > .cards > .card:hover {
  background: #fbfcfe;
}

.sx-home2 .hero > .wrap > .cards > .card:hover::after { opacity: 1; }

.sx-home2 .hero > .wrap > .cards > .card.card--bloqueado:hover {
  background: #fff;
}
.sx-home2 .hero > .wrap > .cards > .card.card--bloqueado:hover::after { opacity: 0; }

.sx-home2 .hero > .wrap > .cards > .card > .card__title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--h2-navy-dark);
}

.sx-home2 .hero > .wrap > .cards > .card > .card__icon > .bubble {
  width: 58px;
  height: 58px;
  border: 1px solid #eef1f6;
  background: radial-gradient(100% 100% at 62% 32%, #fff3ea 0%, #ffe0cb 58%, #fff 59%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 6px rgba(221, 101, 20, .08);
  transition: box-shadow .16s ease, border-color .16s ease;
}

.sx-home2 .hero > .wrap > .cards > .card:hover > .card__icon > .bubble {
  border-color: #f3ddcb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 14px rgba(221, 101, 20, .18);
}

.sx-home2 .hero > .wrap > .carousel__prev {
  border-color: var(--h2-line);
  box-shadow: var(--h2-shadow);
}

/* =============================================================================
   2) CORPO — blocos 1 e 2 (mesmas posições, aparência de cartão)
   ========================================================================== */
.sx-home2 .conteiner-pginicial {
  gap: 16px;
  padding: 4px 0 0;
}

.sx-home2 .conteiner-pginicial > .bloco1,
.sx-home2 .conteiner-pginicial > .bloco2 { gap: 16px; }

/* superfícies de cartão para os painéis internos */
.sx-home2 .conteiner-pginicial > .bloco1 > .cronologia_anm,
.sx-home2 .conteiner-pginicial > .bloco2 > .historico_sei,
.sx-home2 .conteiner-pginicial > .bloco2 > .table_calendario,
.sx-home2 .conteiner-pginicial > .bloco2 > .titulo_cabecalho {
  background: var(--h2-card);
  border: 1px solid var(--h2-line);
  border-radius: var(--h2-radius);
  box-shadow: var(--h2-shadow);
  padding: 14px;
  box-sizing: border-box;
}

/* O título do calendário é um cartão próprio, separado da tabela pelo gap da
   coluna. Nada de cantos "colados": com o gap do flex no meio, meia borda reta
   de cada lado ficava com cara de card quebrado. */
.sx-home2 .conteiner-pginicial > .bloco2 > .titulo_cabecalho {
  padding: 12px 14px;
  margin-bottom: 0;
}

/* cabeçalhos dos painéis */
.sx-home2 .conteiner-pginicial .titulo_cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--h2-line);
  margin-bottom: 10px;
}

.sx-home2 .conteiner-pginicial .titulo_cabecalho > h3,
.sx-home2 .conteiner-pginicial > .bloco2 > .historico_sei > h3,
.sx-home2 .conteiner-pginicial > .bloco1 > .cronologia_anm > h3 {
  position: relative;
  margin: 0;
  padding-left: 11px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--h2-navy-dark);
  text-transform: none;
}

.sx-home2 .conteiner-pginicial .titulo_cabecalho > h3::before,
.sx-home2 .conteiner-pginicial > .bloco2 > .historico_sei > h3::before,
.sx-home2 .conteiner-pginicial > .bloco1 > .cronologia_anm > h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  border-radius: 3px;
  background: var(--h2-orange);
}

.sx-home2 .conteiner-pginicial > .bloco2 > .historico_sei > h3 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--h2-line);
  margin-bottom: 10px;
}

.sx-home2 .conteiner-pginicial .titulo_cabecalho > a {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--h2-line);
  background: #fff;
  color: var(--h2-navy);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}

.sx-home2 .conteiner-pginicial .titulo_cabecalho > a:hover {
  background: #f6f8fb;
  border-color: #cfd6e2;
}

/* =============================================================================
   3) Tabelas de movimentos (cronologia ANM e histórico SEI)
   Linhas brancas, separadas só por um divisor cinza-claro.
   ========================================================================== */
.sx-home2 .conteiner-pginicial .anm_processo { border-spacing: 0; }

.sx-home2 .conteiner-pginicial .anm_processo > tbody > tr > td {
  background: #fff;
  border-top: none;
  border-bottom: 1px solid var(--h2-line);
  border-radius: 0;
  padding: 11px 6px;
  font-size: 12.5px;
  color: var(--h2-ink);
  text-transform: none;
  transition: background .14s ease;
}

.sx-home2 .conteiner-pginicial .anm_processo > tbody > tr:hover > td { background: #f7f9fc; }

.sx-home2 .conteiner-pginicial .anm_processo > tbody > tr:last-of-type > td,
.sx-home2 .conteiner-pginicial .anm_processo > tbody > tr.ver_mais > th { border-bottom: none; }

.sx-home2 .conteiner-pginicial .anm_processo > tbody > tr + tr { border-top: none; }

/* a faixa laranja à esquerda sai: quem dá a cor agora é a bolinha da fase */
.sx-home2 .conteiner-pginicial .anm_processo > tbody > tr > .req {
  background: #fff;
  border-left: none;
  padding: 0;
}

.sx-home2 .conteiner-pginicial .anm_processo > tbody > tr > .req > a,
.sx-home2 .conteiner-pginicial .anm_processo > tbody > tr > .data_movimento {
  color: var(--h2-navy);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Bolinha da FASE do processo — mesma paleta de public/css/span_req.css.
   Mantida aqui (e não incluindo span_req.css no index2) para o escopo
   continuar todo em .sx-home2.
   --------------------------------------------------------------------------- */
.sx-home2 .anm_processo > tbody > tr > td.spanreq {
  width: 1px;
  padding: 11px 4px 11px 10px;
  vertical-align: middle;
}

.sx-home2 .anm_processo > tbody > tr > td.spanreq > span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  cursor: help;
  box-shadow: 0 0 0 2px #ffffff inset, 0 0 0 1px rgba(0, 0, 0, .06);
}

.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type0  { background: #8d99ae; }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type1  { background: #4CAF50; }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type2  { background: #2196F3; }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type3  { background: #FF9800; }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type4  { background: #ff584c; }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type5  { background: rgb(151, 15, 135); }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type6  { background: rgb(255, 5, 201); }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type7  { background: #a39728; }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type8  { background: #c7c7c7; }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type9  { background: red; }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type10 { background: red; }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type11 { background: rgb(18, 251, 255); }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type12 { background: rgb(0, 213, 255); }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type13 { background: #ffea2f; }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type14 { background: #ffc30f; }
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType.type15 { background: #d2d2d2; }

/* processo sem fase cadastrada: só o contorno */
.sx-home2 .anm_processo > tbody > tr > td.spanreq > span > .reqType--vazio {
  background: transparent;
  box-shadow: 0 0 0 1px #d7d7e5 inset;
}

/* =============================================================================
   4) Calendário mensal — permanece no mesmo lugar, com acabamento novo
   ========================================================================== */
.sx-home2 .conteiner-pginicial .table_calendario { border: none; }

.sx-home2 .conteiner-pginicial .table_calendario > caption > p {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--h2-navy-dark);
  text-transform: capitalize;
}

.sx-home2 .conteiner-pginicial .table_calendario > caption > ant,
.sx-home2 .conteiner-pginicial .table_calendario > caption > pos {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--h2-line);
  background: #fff;
  color: var(--h2-navy);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}

.sx-home2 .conteiner-pginicial .table_calendario > caption > ant:hover,
.sx-home2 .conteiner-pginicial .table_calendario > caption > pos:hover {
  background: #f6f8fb;
  border-color: #cfd6e2;
}

.sx-home2 .conteiner-pginicial .table_calendario > thead > tr > th {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--h2-muted);
  border: none;
  padding-bottom: 6px;
}

.sx-home2 .conteiner-pginicial .table_calendario > tbody > tr > td {
  border: none;
  border-radius: 9px;
}

/* O destaque do dia de HOJE é a pílula interna (<p>), como nos dias com
   tarefa — pintar a célula inteira criava um retângulo largo destoante. */
.sx-home2 .conteiner-pginicial .table_calendario > tbody > tr > td.hoje > p {
  background: var(--h2-navy);
}

.sx-home2 .conteiner-pginicial .table_calendario > tbody > tr > td.mes_anterior,
.sx-home2 .conteiner-pginicial .table_calendario > tbody > tr > td.mes_seguinte { color: #c3c9d4; }

/* =============================================================================
   5) Cartões auxiliares (guia, sem plano, limite excedido)
   ========================================================================== */
.sx-home2 .sx-guide,
.sx-home2 .sx-index-sem-plano {
  border-radius: var(--h2-radius);
  border: 1px solid var(--h2-line);
  box-shadow: var(--h2-shadow);
}

/* =============================================================================
   6) Deslogado — bloco de vantagens e mapa
   ========================================================================== */
.sx-home2 .conteiner-pginicial > .info2,
.sx-home2 .conteiner-pginicial > .bloco2.deslogado > .mapa_index {
  background: var(--h2-card);
  border: 1px solid var(--h2-line);
  border-radius: var(--h2-radius);
  box-shadow: var(--h2-shadow);
  padding: 18px;
  box-sizing: border-box;
}

.sx-home2 .conteiner-pginicial > .info2 > h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--h2-navy-dark);
  margin-bottom: 10px;
}

.sx-home2 .conteiner-pginicial > .info2 > .controle > a,
.sx-home2 .conteiner-pginicial > .bloco2.deslogado > .mapa_index > a {
  border-radius: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px rgba(221, 101, 20, .18);
}

.sx-home2 .sx-features { margin-top: 0; }

/* =============================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1000px) {
  .container.sx-home2 { gap: 14px; }
  .sx-home2 .conteiner-pginicial { gap: 12px; }
  .sx-home2 .conteiner-pginicial > .bloco1,
  .sx-home2 .conteiner-pginicial > .bloco2 { gap: 12px; }
}

/* No celular a tabela de movimentos não cabe com todas as colunas.
   O titular sai (o número do processo já identifica a linha e o titular
   aparece no detalhe); processo, movimento e data continuam visíveis. */
@media (max-width: 640px) {
  .sx-home2 .conteiner-pginicial .anm_processo > tbody > tr > .titular { display: none; }

  .sx-home2 .conteiner-pginicial .anm_processo > tbody > tr > td {
    padding: 10px 3px;
    font-size: 11.5px;
  }

  /* a descrição quebra em duas linhas em vez de empurrar a tabela para fora */
  .sx-home2 .conteiner-pginicial .anm_processo > tbody > tr > .desc { max-width: 36vw; }
  .sx-home2 .conteiner-pginicial .anm_processo > tbody > tr > .desc > p {
    white-space: normal;
    max-width: none;
    line-height: 1.3;
  }
  .sx-home2 .conteiner-pginicial .anm_processo > tbody > tr > .req > a { padding: 0 6px; }
  .sx-home2 .conteiner-pginicial .anm_processo > tbody > tr > .data_movimento { white-space: nowrap; }
  .sx-home2 .anm_processo > tbody > tr > td.spanreq { padding-left: 5px; padding-right: 0; }
}

@media (max-width: 740px) {
  .sx-home2 .hero > .wrap > .cards { border-radius: 16px; }
  .sx-home2 .hero > .wrap > .cards > .card { padding: 16px 10px; }
  .sx-home2 .conteiner-pginicial > .bloco1 > .cronologia_anm,
  .sx-home2 .conteiner-pginicial > .bloco2 > .historico_sei,
  .sx-home2 .conteiner-pginicial > .bloco2 > .table_calendario,
  .sx-home2 .conteiner-pginicial > .bloco2 > .titulo_cabecalho { padding: 12px; }
}

/* =============================================================================
   7) Regras globais da página (valem para o cabeçalho e o rodapé também —
      esta folha só é carregada pela home, então nada vaza)
   ========================================================================== */

/* ---- 7.0 Calha da barra de rolagem sempre reservada ----
   Quando um modal trava o scroll (overflow:hidden), a barra some e a página
   inteira desloca alguns pixels. Reservando a calha, o layout — inclusive os
   elementos `position: fixed`/`sticky` — fica idêntico com e sem scroll.
   Vale só nesta página: esta folha só é carregada pela home. */
html,
body { scrollbar-gutter: stable; }

/* ---- 7.1 Teto tipográfico: nada acima de 500 no CORPO da home ----
   Em vez de achatar tudo com !important, cada regra das folhas legadas que
   usava 600/700/bold é rebaixada aqui para 500 pelo MESMO seletor. Como o
   index2.css é a última folha carregada e só carrega na home, a
   hierarquia continua a mesma e nenhuma outra página é afetada.
   (Se alguma folha legada ganhar um font-weight > 500 no futuro, repita a
   linha do seletor aqui com font-weight: 500.)

   EXCEÇÕES — o CABEÇALHO (.button-bar, .box_search, .menu-lateral,
   .header-demo-btn) e o RODAPÉ (body > footer) NÃO entram no teto: eles
   mantêm os pesos originais do styles.css. Por isso a regra de tags abaixo é
   escopada em .sx-home2 (o corpo da home) em vez de "body", e nenhum seletor
   de header/rodapé aparece na lista de rebaixamento. */

/* elementos que nascem em negrito pelo navegador — só no corpo da página e
   no modal da agenda (que é anexado ao <body>, fora do .sx-home2) */
.sx-home2 b, .sx-home2 strong,
.sx-home2 h1, .sx-home2 h2, .sx-home2 h3,
.sx-home2 h4, .sx-home2 h5, .sx-home2 h6,
.sx-home2 th, .sx-home2 caption, .sx-home2 legend, .sx-home2 summary,
.sx-agenda-modal b, .sx-agenda-modal strong,
.sx-agenda-modal h3, .sx-agenda-modal th { font-weight: 500; }

/* --- styles.css (sem as regras de cabeçalho: são exceção) --- */
.sx-limite-card__title,
.sx-limite-card__btn,
.sx-pagina-sem-plano__btn,
.sx-login-cta__titulo,
.sx-login-cta__btn,
.sx-cta-card__btn { font-weight: 500; }

/* --- dialog.css --- */
body>.dialog2>.container2>h2,
body>.dialog2>.container2>.modal>button,
body>.dialog2>.container2>.controle>button, body>.dialog2>.container2>.controle>a,
body>.dialog2>.container2>.item>button,
body>.dialog2>.container2>.item>h2,
.sx-log-prazos-modal__status,
.sx-log-prazos-modal__cumprimento { font-weight: 500; }

/* --- index.css --- */
.sx-features > .sx-features__inner > .sx-features__top > .sx-features__copy > .sx-features__cta > .sx-features__btn,
.sx-features > .sx-features__inner > .sx-features__top > .sx-features__copy > .sx-features__chips > .sx-features__chip,
.anm_processo>tbody>tr>.data_movimento,
div.conteiner-pginicial>.bloco1>.cronologia_anm>.anm_processo>tbody>tr>.recente_anm>span,
.req>span,
.bloco2.deslogado > .mapa_index > h3,
.bloco2.deslogado > .mapa_index > a,
.info2 > .controle > p,
.info2 > .controle > a,
.modal_telefone::after,
.sx-index-sem-plano__title,
.sx-index-sem-plano__btn,
.conteiner-pginicial>.bloco2>.historico_sei>.anm_processo>tbody>tr>td,
.anm_processo>tbody>tr>.req>a,
.list_sei.historico_sei>.container2>tbody>tr>.titular>p { font-weight: 500; }

/* --- calendario.css --- */
table.table_calendario > tbody > tr > td > pre,
table.table_calendario > tbody > tr > td.hoje,
table.table_calendario > tbody > tr > td.hoje > p,
table.table_calendario > tbody > tr > td.tarefa > p,
table.table_calendario > tbody > tr > td.tarefa > .tarefas_interpretadas > span > .sx-tarefa-linha1 > a { font-weight: 500; }
@media (max-width: 800px) {
  table.table_calendario > tbody > tr > td > pre { font-weight: 500; }
}

/* --- atualizacoes1.css --- */
.patch_container>h3,
.patch>h3,
.patch .dif { font-weight: 500; }

/* --- sub_menu.css --- */
.card > .card__title,
.card > .card__action > .btn-link { font-weight: 500; }

/* --- notificacao_geral.css --- */
.notificacao_geral_overlay > .notificacao_geral > h2,
.notificacao_geral_overlay > .notificacao_geral > h2::before,
.notificacao_geral_overlay > .notificacao_geral > .notificacao_geral_button > button { font-weight: 500; }

/* ---- 7.2 Nenhum hover/active com deslocamento (translate) ----
   Mesma ideia do 7.1: cada regra legada de :hover/:active que deslocava o
   elemento é neutralizada aqui pelo MESMO seletor, sem !important. Os
   translate de POSICIONAMENTO (centralização) são preservados. */

/* styles.css */
.sx-limite-card__btn:hover,
.button-bar>.nav-bar>a.contrate:hover,
.button-bar>.right-options>a.contrate:hover,
body > footer > .detalhes > .links-rapidos > a:hover,
body > footer > .detalhes > .links-rapidos > a:focus,
.sx-login-cta__btn--primary:hover,
.sx-cta-card__btn:hover,
/* index.css */
.sx-features > .sx-features__inner > .sx-features__top > .sx-features__copy > .sx-features__cta > .sx-features__btn:active,
.sx-features > .sx-features__inner > .sx-features__grid > .sx-feature-card:hover,
.bloco2.deslogado > .mapa_index > a:active,
.info2 > .controle > a:active,
.sx-index-sem-plano__btn:hover,
/* notificacao_geral.css */
.notificacao_geral_overlay > .notificacao_geral > .notificacao_geral_button > button:hover,
.notificacao_geral_overlay > .notificacao_geral > .notificacao_geral_button > button:active { transform: none; }

/* aqui o translate é centralização vertical, não movimento: mantém, tira só o "pulo" */
.wrap > .carousel__prev:active { transform: translateY(-50%); }
table.table_calendario > caption > ant:active,
table.table_calendario > caption > pos:active { transform: translateY(-50%); }

/* sub_menu.css — o único :active com scale (sem translate), também sai */
.card > .card__action > .btn-link:active { transform: none; }