/* ==========================================================================
   TEMA INSTITUCIONAL — refinamento do layout original
   Carregado por último. Não altera a estrutura nem os ganchos do app.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */
:root {
    --navy-900: #0B2440;
    --navy-800: #0E2E4F;
    --navy-700: #143C66;
    --azul-600: #17518C;
    --azul-500: #1C63A8;
    --azul-100: #E5EDF6;
    --ouro: #F2B705;

    --tinta: #1E2A35;
    --tinta-2: #46505C;
    --tinta-3: #6B7887;

    --linha: #D3DAE2;
    --linha-forte: #A9B4C1;

    --vermelho-700: #931A14;
    --vermelho-600: #B3261E;
    --vermelho-050: #FDF1F0;

    --verde-700: #14632F;
    --verde-050: #EDF7F0;

    --amber-700: #7A5200;
    --amber-600: #94620A;
    --amber-050: #FFF8E6;
    --amber-linha: #E3B341;

    --raio: 10px;
    --raio-sm: 8px;

    --fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   RAIZ DA FONTE
   --------------------------------------------------------------------------
   Os CSS herdados (Bootstrap 3 e outros) deixam a raiz em 10px/14px. Como
   os tamanhos deste projeto foram escritos em "rem" assumindo a base padrão
   do navegador (16px), tudo saía ~14% menor que o pretendido — e no celular
   isso obrigava a pessoa a dar zoom para ler. Fixar a raiz corrige todos os
   "rem" de uma vez.
   -------------------------------------------------------------------------- */
html {
    font-size: 16px;
}

body {
    background-color: #EDF1F6;
    background-image:
        radial-gradient(circle at 12% 8%, rgba(28, 99, 168, 0.055) 0%, transparent 42%),
        radial-gradient(circle at 88% 78%, rgba(11, 36, 64, 0.06) 0%, transparent 42%);
    background-attachment: fixed;
    color: var(--tinta);
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Coluna flexível: garante que o rodapé encoste no fim da tela
       em monitores altos, sem deixar faixa de fundo abaixo dele. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   1.1 TOQUE EM CELULAR
   --------------------------------------------------------------------------
   Sem "touch-action: manipulation" o navegador segura o primeiro toque por
   ~300ms esperando um possível toque duplo (zoom). Se a pessoa tocar de novo
   por achar que não funcionou, o navegador trata como gesto de zoom e o
   clique nunca chega no botão — daí a sensação de precisar tocar várias vezes.
   O "manipulation" remove esse atraso e o zoom por toque duplo, mantendo o
   zoom por pinça (que é acessibilidade).
   -------------------------------------------------------------------------- */
button,
a,
input,
select,
textarea,
.mdl-button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Resposta visual imediata ao toque, sem depender do efeito ripple */
.mdl-button:active,
.pj-footer-nav a:active,
.pj-topbar a:active {
    opacity: 0.86;
}

/* --------------------------------------------------------------------------
   1.2 FEEDBACK INSTANTÂNEO
   --------------------------------------------------------------------------
   O Bootstrap anima a abertura do modal por 300ms. Nesse intervalo a pessoa
   toca de novo, o toque bate no que ainda está aparecendo e parece que o
   botão "não funcionou". Aqui a transição vira instantânea apenas nos casos
   em que ela serve de confirmação de que o toque foi recebido.
   -------------------------------------------------------------------------- */
#loadingModal.fade .modal-dialog {
    transition: none;
    transform: none;
}

#loadingModal.fade {
    transition: opacity 0.12s linear;
}

/* Toque pressionado deixa o botão claramente "afundado" */
.pj-btn:active,
.pj-cta:active,
.modal-footer .mdl-button:active,
.pix-codigo__linha .mdl-button:active {
    transform: translateY(1px);
    filter: brightness(0.92);
}

/* --------------------------------------------------------------------------
   2. FAIXA SUPERIOR
   -------------------------------------------------------------------------- */
.pj-topbar {
    background: var(--navy-900);
    color: #B9CCDF;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pj-topbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pj-topbar-left,
.pj-topbar-right {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
}

.pj-topbar-left .material-icons { font-size: 16px; color: #7FA8CE; }

/* Brasão na faixa superior. Usa o PNG com fundo transparente tratado:
   o branco em volta foi removido e a borda suavizada, para o brasão se
   fundir com o azul escuro sem moldura. */
.pj-topbar-brasao {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.pj-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4CC17A;
    box-shadow: 0 0 0 3px rgba(76, 193, 122, 0.20);
}

/* --------------------------------------------------------------------------
   3. CONTEÚDO / CARD
   -------------------------------------------------------------------------- */
.pj-content {
    padding: 30px 16px 44px;
    flex: 1 0 auto;
}

.pj-card {
    background: #FFFFFF;
    border: 1px solid var(--linha);
    border-top: 5px solid var(--azul-600);
    border-radius: var(--raio);
    box-shadow: 0 8px 28px rgba(11, 36, 64, 0.13) !important;
    padding: 30px 28px 32px;
    box-sizing: border-box;
    text-align: center;
}

/* Logo oficial do STJ no card de consulta.
   É horizontal (proporção ~5,8:1) e as letras são azul-marinho: foram
   desenhadas para fundo claro. Por isso ele fica no card branco e não nas
   barras azuis, onde o texto desapareceria. */
.pj-logo-stj {
    display: block;
    width: 268px;
    max-width: 100%;
    height: auto;
    margin: 2px auto 0;
}

.pj-org {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--navy-800);
    margin: 0 0 5px;
    line-height: 1.25;
}

.pj-tribunal {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--tinta-3);
    text-transform: uppercase;
    margin: 0;
}

.pj-rule {
    height: 3px;
    width: 62px;
    background: var(--ouro);
    border-radius: 3px;
    margin: 18px auto;
}

.pj-sub {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--azul-600);
    margin: 0 0 24px;
}

/* --------------------------------------------------------------------------
   4. CAMPO CPF (converte o textfield MDL em caixa com rótulo fixo)
   -------------------------------------------------------------------------- */
.pj-field {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left;
}

.pj-field .mdl-textfield__label,
.pj-field.mdl-textfield--floating-label.is-focused .mdl-textfield__label,
.pj-field.mdl-textfield--floating-label.is-dirty .mdl-textfield__label {
    position: static;
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tinta);
    letter-spacing: 0.02em;
    margin: 0 0 9px;
    padding: 0;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    overflow: visible;
    white-space: normal;
    visibility: visible;
    transform: none;
    transition: none;
}

.pj-field .mdl-textfield__label::after { display: none !important; content: none !important; }

.pj-field .mdl-textfield__input {
    display: block;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    box-sizing: border-box;
    font-family: var(--fonte);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--tinta);
    background: #FFFFFF;
    border: 2px solid var(--linha-forte);
    border-radius: var(--raio-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.pj-field .mdl-textfield__input::placeholder { color: #9AA5B1; font-weight: 400; }

.pj-field .mdl-textfield__input:hover { border-color: var(--azul-500); }

.pj-field .mdl-textfield__input:focus,
.pj-field.is-focused .mdl-textfield__input {
    border-color: var(--azul-600) !important;
    box-shadow: 0 0 0 4px rgba(23, 81, 140, 0.18);
    outline: none;
}

/* MDL marca o campo como inválido automaticamente — usamos a cor de erro */
.pj-field.is-invalid .mdl-textfield__input {
    border-color: var(--vermelho-600) !important;
    background: var(--vermelho-050);
}

/* --------------------------------------------------------------------------
   5. TEXTOS DE APOIO
   -------------------------------------------------------------------------- */
.pj-hint {
    font-size: 0.84rem;
    color: var(--tinta-3);
    margin: 10px 0 0;
    text-align: left;
    line-height: 1.45;
}

.pj-error {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--vermelho-700);
    background: var(--vermelho-050);
    border: 1px solid var(--vermelho-600);
    border-radius: var(--raio-sm);
    padding: 10px 13px;
    margin: 12px 0 0;
    text-align: left;
    line-height: 1.45;
}

.pj-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--azul-600);
    margin: 16px 0 0;
}

.pj-loading .mdl-spinner { width: 20px; height: 20px; }

.pj-foot-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    font-size: 0.82rem;
    color: var(--tinta-3);
    margin: 18px 0 0;
    line-height: 1.45;
    text-align: center;
}

.pj-foot-note .material-icons { font-size: 15px; flex-shrink: 0; position: relative; top: 2px; }

/* --------------------------------------------------------------------------
   6. BOTÃO PRINCIPAL
   -------------------------------------------------------------------------- */
.pj-btn,
.pj-btn.mdl-button {
    width: 100%;
    height: 58px;
    min-width: 0;
    margin-top: 20px;
    padding: 0 22px;
    box-sizing: border-box;
    font-family: var(--fonte);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #FFFFFF !important;
    background: var(--azul-600) !important;
    border: none;
    border-radius: var(--raio-sm);
    box-shadow: 0 4px 14px rgba(23, 81, 140, 0.30) !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.pj-btn:hover,
.pj-btn.mdl-button:hover {
    background: var(--navy-700) !important;
    box-shadow: 0 6px 18px rgba(20, 60, 102, 0.38) !important;
}

.pj-btn:active { background: var(--navy-800) !important; }

.pj-btn:disabled,
.pj-btn:disabled:hover {
    background: var(--azul-500) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

.pj-btn-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 9px;
    vertical-align: -3px;
    border: 3px solid rgba(255, 255, 255, 0.45);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: pj-girar 0.8s linear infinite;
}

/* --------------------------------------------------------------------------
   7. CAIXA DE ATENÇÃO
   -------------------------------------------------------------------------- */
.pj-aviso {
    background: var(--amber-050);
    border: 1px solid var(--amber-linha);
    border-left: 6px solid var(--amber-600);
    border-radius: var(--raio);
    box-shadow: 0 4px 14px rgba(11, 36, 64, 0.10) !important;
    padding: 20px 22px 18px;
    box-sizing: border-box;
    margin-top: 22px;
    text-align: left;
}

.pj-aviso-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.pj-aviso-head .material-icons { font-size: 22px; color: var(--amber-600); }

.pj-aviso-head h4 {
    margin: 0;
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--amber-700);
    letter-spacing: 0.03em;
}

.pj-aviso-text {
    font-size: 0.95rem;
    color: var(--tinta);
    margin: 0 0 12px;
}

.pj-aviso-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pj-aviso-list li {
    position: relative;
    padding-left: 20px;
    font-size: 0.9rem;
    color: var(--tinta-2);
    line-height: 1.5;
    margin-bottom: 7px;
}

.pj-aviso-list li:last-child { margin-bottom: 0; }

.pj-aviso-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber-600);
}

/* --------------------------------------------------------------------------
   8. RODAPÉ
   -------------------------------------------------------------------------- */
.pj-footer {
    clear: both;
    flex-shrink: 0;
    background: var(--navy-900);
    color: #B4C6D8;
    margin-top: auto;
}

.pj-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 16px 26px;
}

.pj-footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.pj-footer-brand img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

.pj-footer-org {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 2px;
}

.pj-footer-sub {
    font-size: 0.82rem;
    color: #9FB4C8;
    margin: 0;
}

.pj-footer-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 0;
}

.pj-footer-nav a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 14px;
    font-size: 0.9rem;
    color: #C4D5E5;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--raio-sm);
}

.pj-footer-nav a:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.pj-footer-bottom {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pj-footer-bottom p {
    font-size: 0.8rem;
    color: #93A9BE;
    margin: 0 0 5px;
    line-height: 1.5;
}

.pj-footer-note { font-size: 0.76rem !important; color: #7E93A8 !important; }

/* --------------------------------------------------------------------------
   9. MODAIS
   -------------------------------------------------------------------------- */
.modal-vertical-centered .modal-content {
    border: none;
    border-radius: var(--raio);
    box-shadow: 0 16px 48px rgba(11, 36, 64, 0.36);
    overflow: hidden;

    /* Coluna flexível: cabeçalho e rodapé ficam parados e só o corpo rola.
       O max-height garante que o modal nunca passe da tela — assim os botões
       do rodapé permanecem visíveis sem precisar arrastar. */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
}

/* O offline.css original centraliza com um pseudo-elemento inline-block.
   Quando o conteúdo é mais alto que a tela, esse truque empurra o modal
   para fora da área visível. Trocamos por flex + margin auto, que centraliza
   quando cabe e permite rolar quando não cabe. */
.modal-vertical-centered:before { display: none !important; }

.modal-vertical-centered.in {
    display: flex !important;
    padding: 20px 16px !important;
    overflow-y: auto;
}

.modal-vertical-centered .modal-dialog {
    display: block !important;
    width: 100% !important;
    max-width: 640px !important;
    margin: auto !important;
    text-align: left;
}

.modal-vertical-centered .modal-dialog.modal-lg {
    max-width: 780px !important;
}

@media (max-width: 599px) {
    .modal-vertical-centered.in { padding: 12px 10px !important; }

    .modal-vertical-centered .modal-dialog,
    .modal-vertical-centered .modal-dialog.modal-lg {
        max-width: 100% !important;
    }
}

.modal-header { padding: 18px 22px; border-bottom: none; }

.modal-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header .material-icons { font-size: 24px; vertical-align: middle; }

/* Brasão da República no cabeçalho do modal.
   Usa a versão PNG com fundo transparente: o JPEG original tem fundo branco,
   que aparecia como um quadrado claro sobre o azul do cabeçalho. */
.pj-modal-brasao {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}

.modal-header-notif { background: var(--vermelho-600); }
.modal-header-proc  { background: var(--navy-800); }

.modal-body {
    padding: 22px;
    background: #fff;
    font-size: 16px;
    color: var(--tinta-2);

    /* O corpo é a única parte que rola. "min-height: 0" é obrigatório:
       sem ele um item flex não encolhe abaixo do conteúdo e o rodapé
       acaba empurrado para fora da tela. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-body h4 {
    font-size: 1.02rem;
    color: var(--navy-800);
    margin: 22px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--azul-100);
}

.modal-body h4:first-child { margin-top: 0; }

.modal-body p {
    font-size: 0.96rem;
    color: var(--tinta-2);
    line-height: 1.6;
    margin: 0 0 12px;
}

.modal-body hr { border: none; border-top: 1px solid var(--linha); margin: 20px 0; }

.modal-body .text-danger { color: var(--vermelho-700) !important; }
.modal-body .text-success { color: var(--verde-700) !important; }
.modal-body .text-muted { color: var(--tinta-3) !important; }

.modal-footer {
    padding: 16px 22px;
    background: #F4F6F9;
    border-top: 1px solid var(--linha);
    text-align: right;

    /* Fixo no rodapé do modal: nunca encolhe e nunca sai da tela,
       então os botões ficam visíveis durante toda a leitura. */
    flex: 0 0 auto;
}

.modal-footer .mdl-button {
    height: 50px;
    min-width: 170px;
    margin: 4px 0 4px 10px;
    padding: 0 20px;
    font-family: var(--fonte);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: var(--raio-sm);
    box-sizing: border-box;
}

/* Secundário (Fechar) */
.modal-footer .mdl-button:not(.mdl-button--raised) {
    background: #fff !important;
    color: var(--tinta) !important;
    border: 2px solid var(--linha-forte) !important;
    box-shadow: none !important;
}

.modal-footer .mdl-button:not(.mdl-button--raised):hover { background: #E8EDF3 !important; }

/* Primário azul */
.modal-footer .mdl-button--raised.mdl-color--blue {
    background: var(--azul-600) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(23, 81, 140, 0.30);
}

.modal-footer .mdl-button--raised.mdl-color--blue:hover { background: var(--navy-700) !important; }

/* Ação principal de conversão: usa a cor institucional do site e um pulso
   suave no contorno. O box-shadow fica sem !important de propósito —
   declarações !important têm prioridade sobre animações CSS e o pulso
   simplesmente não rodaria. */
.modal-footer .mdl-button--raised.mdl-color--blue.pj-cta {
    transition: background-color 0.2s ease, transform 0.2s ease;
    animation: pj-cta-pulso 2.8s ease-in-out infinite;
}

.modal-footer .mdl-button--raised.mdl-color--blue.pj-cta:hover {
    background: var(--navy-700) !important;
    box-shadow: 0 8px 22px rgba(23, 81, 140, 0.40);
    transform: translateY(-1px);
    animation: none;
}

.modal-footer .mdl-button--raised.mdl-color--blue.pj-cta:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(23, 81, 140, 0.32);
}

/* Reforço do botão de conversão: aplicado quando a pessoa tenta fechar o
   aviso. Aqui o pulso é de ESCALA (transform), que roda na GPU — por isso
   pode ficar ativo também no celular, onde animar sombra custaria quadros.
   O !important é necessário para vencer a regra do celular que desliga a
   animação de sombra. */
.modal-footer .mdl-button--raised.mdl-color--blue.pj-cta--intenso {
    animation: pj-cta-forte 1.4s ease-in-out infinite !important;
    box-shadow: 0 6px 24px rgba(23, 81, 140, 0.55),
                0 0 0 8px rgba(23, 81, 140, 0.30) !important;
}

@keyframes pj-cta-forte {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

@keyframes pj-cta-pulso {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(23, 81, 140, 0.30), 0 0 0 0 rgba(23, 81, 140, 0.32);
    }
    55% {
        box-shadow: 0 4px 14px rgba(23, 81, 140, 0.30), 0 0 0 9px rgba(23, 81, 140, 0);
    }
}

/* Spinner MDL na cor institucional */
.mdl-spinner__layer { border-color: var(--azul-500) !important; }

/* Tela de carregamento: brasão no lugar do spinner.
   A pulsação discreta indica que o sistema está trabalhando. */
.pj-loading-brasao {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
    margin: 0 auto 18px;
    animation: pj-loading-pulso 1.9s ease-in-out infinite;
}

@keyframes pj-loading-pulso {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.72; transform: scale(0.96); }
}

/* Barra de progresso indeterminada */
.pj-loading-barra {
    position: relative;
    width: 200px;
    max-width: 100%;
    height: 5px;
    margin: 22px auto 0;
    background: var(--azul-100);
    border-radius: 999px;
    overflow: hidden;
}

.pj-loading-barra span {
    position: absolute;
    top: 0;
    left: -45%;
    width: 45%;
    height: 100%;
    background: var(--azul-600);
    border-radius: 999px;
    animation: pj-loading-corre 1.4s ease-in-out infinite;
}

@keyframes pj-loading-corre {
    from { left: -45%; }
    to   { left: 100%; }
}

#loadingModal .modal-body h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy-800);
    margin: 0 0 7px;
    padding: 0;
    border: none;
}

#loadingModal .modal-body > p {
    font-size: 0.94rem;
    color: var(--tinta-2);
    margin: 0;
}

/* --------------------------------------------------------------------------
   10. CONTEÚDO DOS MODAIS
   -------------------------------------------------------------------------- */
/* Documento do processo (conteúdo dos modais) */
.proc-doc { color: var(--tinta-2); }

.proc-doc__saudacao {
    font-size: 1rem;
    color: var(--tinta);
    margin: 0 0 14px;
}

.proc-doc__topo {
    background: var(--azul-050);
    border: 1px solid var(--azul-100);
    border-left: 5px solid var(--azul-600);
    border-radius: var(--raio-sm);
    padding: 15px 18px;
    margin: 0 0 22px;
}

.proc-doc__topo--compacto { margin: 20px 0 0; }

.proc-doc__rotulo {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-bottom: 5px;
}

.proc-doc__numero {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--navy-800);
    margin: 0;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
    line-height: 1.25;
}

.proc-doc__orgao {
    font-size: 0.8rem;
    color: var(--tinta-3);
    margin: 7px 0 0;
}

/* Tabela de dados do processo */
.processo-tabela {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
}

.processo-tabela > tbody > tr > td {
    padding: 12px 4px;
    vertical-align: top;
    font-size: 0.94rem;
    color: var(--tinta);
    border-bottom: 1px solid var(--linha);
    line-height: 1.5;
    background: transparent;
}

.processo-tabela > tbody > tr:last-child > td { border-bottom: none; }

.processo-tabela > tbody > tr > td:first-child {
    background: transparent !important;
    color: var(--tinta-3);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    width: 42%;
    padding-right: 14px;
}

/* Bloco de valores */
.proc-valores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 18px;
}

.proc-valores__item {
    border: 1px solid var(--linha);
    border-radius: var(--raio-sm);
    background: #FAFBFC;
    padding: 13px 15px;
}

.proc-valores__item--destaque {
    border-color: var(--verde-700);
    background: var(--verde-050);
}

.proc-valores__rotulo {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-bottom: 6px;
}

.proc-valores__riscado {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--tinta-3);
    text-decoration: line-through;
}

.proc-valores__final {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--verde-700);
    font-variant-numeric: tabular-nums;
}

/* Andamento */
.proc-andamento {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--linha);
    border-left: 5px solid var(--vermelho-600);
    border-radius: var(--raio-sm);
    background: #FAFBFC;
    padding: 13px 16px;
    margin: 0 0 16px;
}

.proc-andamento .material-icons {
    font-size: 24px;
    color: var(--vermelho-600);
    flex-shrink: 0;
}

.proc-andamento__rotulo {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-bottom: 2px;
}

.proc-andamento__valor { font-size: 1rem; color: var(--vermelho-700); }

/* Alerta de penhora */
.proc-alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--vermelho-050);
    border: 1px solid var(--vermelho-600);
    border-radius: var(--raio-sm);
    padding: 13px 16px;
    margin: 0 0 4px;
    font-size: 0.93rem;
    color: var(--vermelho-700);
    line-height: 1.5;
}

.proc-alerta .material-icons {
    font-size: 20px;
    flex-shrink: 0;
    position: relative;
    top: 1px;
}

.lista-implicacoes { list-style: none; padding: 0; margin: 0 0 18px; }

.lista-implicacoes li {
    position: relative;
    padding: 13px 16px 13px 46px;
    border: 1px solid var(--linha);
    border-left: 5px solid var(--vermelho-600);
    border-radius: var(--raio-sm);
    background: #FAFBFC;
    font-size: 0.92rem;
    color: var(--tinta-2);
    line-height: 1.55;
    margin-bottom: 10px;
}

.lista-implicacoes li:last-child { margin-bottom: 0; }

.lista-implicacoes li::before {
    content: 'warning';
    font-family: 'Material Icons';
    position: absolute;
    left: 13px;
    top: 13px;
    font-size: 22px;
    color: var(--vermelho-600);
    line-height: 1;
}

.lista-implicacoes li strong {
    display: block;
    color: var(--vermelho-700);
    font-size: 0.93rem;
    margin-bottom: 3px;
}

/* Data de emissão da certidão (substitui o antigo contador regressivo) */
.proc-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--azul-050);
    border: 1px solid var(--azul-100);
    border-radius: var(--raio-sm);
    padding: 14px 16px 15px;
    margin: 20px 0 0;
    text-align: center;
}

.proc-data__rotulo {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tinta-3);
}

.proc-data__valor {
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--navy-800);
}

.proc-data__hora {
    font-size: 0.8rem;
    color: var(--tinta-3);
    font-variant-numeric: tabular-nums;
}

.proc-rodape {
    font-size: 0.85rem;
    color: var(--tinta-3);
    text-align: center;
    margin: 14px 0 0;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   11. DOCUMENTOS INSTITUCIONAIS (links do rodapé)
   -------------------------------------------------------------------------- */
.modal-header-doc { background: var(--azul-700); }

#documentoConteudo ul,
#documentoConteudo ol {
    margin: 0 0 16px;
    padding-left: 22px;
    color: var(--tinta-2);
    font-size: 0.95rem;
    line-height: 1.65;
}

#documentoConteudo li { margin-bottom: 7px; }

#documentoConteudo li:last-child { margin-bottom: 0; }

#documentoConteudo h4 { margin-top: 22px; }

#documentoConteudo > p:first-child {
    font-size: 0.98rem;
    color: var(--tinta-2);
    line-height: 1.7;
}

.doc-vigencia {
    margin: 24px 0 0 !important;
    padding-top: 14px;
    border-top: 1px solid var(--linha);
    font-size: 0.8rem !important;
    color: var(--tinta-3) !important;
}

/* --------------------------------------------------------------------------
   12. FORMULÁRIO DE ATUALIZAÇÃO CADASTRAL
   -------------------------------------------------------------------------- */
.modal-header-dados { background: var(--azul-600); }

.dados-intro {
    font-size: 0.95rem;
    color: var(--tinta-2);
    line-height: 1.6;
    margin: 0 0 20px;
}

.dados-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.campo { display: flex; flex-direction: column; }

.campo label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tinta);
    letter-spacing: 0.01em;
    margin-bottom: 7px;
}

.campo .req { color: var(--vermelho-600); }

.pj-input {
    width: 100%;
    height: 54px;
    padding: 0 14px;
    box-sizing: border-box;
    font-family: var(--fonte);
    font-size: 1rem;
    color: var(--tinta);
    background: #fff;
    border: 2px solid var(--linha-forte);
    border-radius: var(--raio-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.pj-input::placeholder { color: #9AA5B1; }

.pj-input:hover:not([readonly]) { border-color: var(--azul-500); }

.pj-input:focus {
    border-color: var(--azul-600);
    box-shadow: 0 0 0 4px rgba(23, 81, 140, 0.16);
    outline: none;
}

.pj-input[readonly] {
    background: #F4F6F9;
    color: var(--tinta-2);
    cursor: default;
}

.pj-input.error {
    border-color: var(--vermelho-600);
    background: var(--vermelho-050);
}

.campo-status {
    font-size: 0.78rem;
    line-height: 1.35;
    margin-top: 6px;
    min-height: 15px;
}

.campo-status.carregando { color: var(--tinta-3); }
.campo-status.ok { color: var(--verde-700); font-weight: 600; }
.campo-status.erro { color: var(--vermelho-700); font-weight: 600; }

.dados-erro {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: var(--vermelho-050);
    border: 1px solid var(--vermelho-600);
    border-radius: var(--raio-sm);
    padding: 12px 14px;
    margin: 16px 0 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--vermelho-700);
    line-height: 1.45;
}

.dados-nota {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--tinta-3);
    line-height: 1.5;
    margin: 18px 0 0;
}

.dados-nota .material-icons {
    font-size: 16px;
    flex-shrink: 0;
    position: relative;
    top: 2px;
}

/* CEP e Número lado a lado em telas maiores */
@media (min-width: 600px) {
    .dados-grid {
        grid-template-columns: 1.5fr 1fr;
        gap: 14px 16px;
    }
    .campo--full { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   13. PAGAMENTO PIX
   -------------------------------------------------------------------------- */
.modal-header-pix { background: var(--azul-600); }

.pix-estado {
    text-align: center;
    padding: 18px 6px 10px;
}

.pix-estado h5 {
    font-size: 1.05rem;
    color: var(--navy-800);
    margin: 6px 0 6px;
}

.pix-estado p {
    font-size: 0.92rem;
    color: var(--tinta-2);
    margin: 0 0 14px;
    line-height: 1.55;
}

.pix-estado__icone {
    font-size: 44px !important;
    color: var(--vermelho-600);
    display: block;
    margin: 0 auto 8px;
}

.pix-estado__icone--ok { color: var(--verde-700) !important; }

.pix-valor {
    text-align: center;
    background: var(--verde-050);
    border: 1px solid var(--verde-700);
    border-radius: var(--raio-sm);
    padding: 14px 16px;
    margin: 0 0 20px;
}

.pix-valor__rotulo {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-bottom: 5px;
}

.pix-valor__numero {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--verde-700);
    font-variant-numeric: tabular-nums;
}

.pix-qr {
    width: 236px;
    max-width: 100%;
    margin: 0 auto 18px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: var(--raio-sm);
    box-shadow: var(--sombra-1);
}

.pix-qr img { display: block; width: 100%; height: auto; }

.pix-instrucao {
    font-size: 0.92rem;
    color: var(--tinta-2);
    text-align: center;
    line-height: 1.6;
    margin: 0 0 20px;
}

.pix-codigo label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tinta);
    margin-bottom: 7px;
}

.pix-codigo__linha {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.pix-codigo__linha input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 12px;
    box-sizing: border-box;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.78rem;
    color: var(--tinta-2);
    background: #F4F6F9;
    border: 2px solid var(--linha);
    border-radius: var(--raio-sm);
    text-overflow: ellipsis;
}

.pix-codigo__linha .mdl-button {
    height: 48px;
    min-width: 96px;
    margin: 0;
    padding: 0 18px;
    flex-shrink: 0;
    font-family: var(--fonte);
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: var(--raio-sm);
    box-sizing: border-box;
    background: var(--azul-600) !important;
    color: #fff !important;
}

/* Aviso fixo de validade do código PIX (sempre visível no fim do modal) */
.pix-validade {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--amber-700);
    background: var(--amber-050);
    border: 1px solid var(--amber-linha);
    border-radius: var(--raio-sm);
    padding: 11px 14px;
    margin: 18px 0 0;
    line-height: 1.5;
    text-align: left;
}

.pix-validade strong { color: var(--amber-700); }

.pix-validade .material-icons {
    font-size: 18px;
    flex-shrink: 0;
    position: relative;
    top: 1px;
}

.pix-expira {
    font-size: 0.82rem;
    color: var(--tinta-3);
    text-align: center;
    margin: 12px 0 0;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .pix-qr { width: 190px; }
    .pix-valor__numero { font-size: 1.4rem; }
    .pix-codigo__linha { flex-direction: column; }
    .pix-codigo__linha .mdl-button { width: 100%; }
}

/* --------------------------------------------------------------------------
   14. AVISO DE PENDÊNCIA (penalidades ao tentar sair)
   -------------------------------------------------------------------------- */
.modal-header-penal { background: var(--vermelho-600); }

.penal-intro {
    font-size: 0.98rem;
    color: var(--tinta-2);
    line-height: 1.7;
    margin: 0 0 18px;
}

.penal-valor {
    text-align: center;
    background: var(--vermelho-050);
    border: 2px solid var(--vermelho-600);
    border-radius: var(--raio-sm);
    padding: 15px 16px;
    margin: 20px 0 0;
}

.penal-valor__rotulo {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vermelho-700);
    margin-bottom: 6px;
}

.penal-valor__numero {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--vermelho-700);
    font-variant-numeric: tabular-nums;
}

.penal-alerta {
    background: var(--azul-050);
    border-left: 5px solid var(--azul-600);
    border-radius: var(--raio-sm);
    padding: 14px 16px;
    font-size: 0.92rem;
    color: var(--navy-800);
    line-height: 1.6;
    margin: 18px 0 0;
}

/* --------------------------------------------------------------------------
   15. AVISO DE MODO DEMONSTRAÇÃO (só aparece com FALLBACK_DEMO ligado)
   -------------------------------------------------------------------------- */
.pj-dev-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px 13px;
    background: var(--amber-700);
    color: var(--amber-050);
    border-top: 3px solid var(--ouro);
    box-shadow: 0 -4px 16px rgba(11, 36, 64, 0.28);
    font-size: 0.86rem;
    line-height: 1.45;
}

.pj-dev-banner .material-icons {
    font-size: 20px;
    flex-shrink: 0;
    color: var(--ouro);
    position: relative;
    top: 1px;
}

.pj-dev-banner strong { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   16. RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
    .pj-topbar-right { display: none; }

    /* Texto um pouco maior no celular: leitura confortável sem precisar de
       zoom. Como quase tudo é dimensionado em "rem", mexer na raiz ajusta
       o site inteiro de uma vez e mantém as proporções. */
    html { font-size: 17px; }

    /* Rótulos em maiúsculas ficariam com 12px; sobem para 13px */
    .proc-doc__rotulo,
    .proc-valores__rotulo,
    .proc-data__rotulo,
    .pix-valor__rotulo,
    .penal-valor__rotulo,
    .pj-footer-note {
        font-size: 13px;
    }
    .pj-card { padding: 24px 18px 26px; }
    .pj-logo-stj { width: 210px; }
    .pj-org { font-size: 1.2rem; }

    /* No celular a animação contínua de sombra obriga o navegador a repintar
       uma área grande a cada quadro, o que disputa CPU com o próprio toque.
       Mantém o anel destacado, mas estático. */
    .modal-footer .mdl-button--raised.mdl-color--blue.pj-cta {
        animation: none;
        box-shadow: 0 4px 14px rgba(23, 81, 140, 0.30),
                    0 0 0 4px rgba(23, 81, 140, 0.18);
    }
    .pj-field .mdl-textfield__input { height: 56px; font-size: 1.15rem; }

    .modal-footer { text-align: center; }
    .modal-footer .mdl-button { width: 100%; min-width: 0; margin: 4px 0; }
    .processo-tabela > tbody > tr > td { padding: 11px 4px; font-size: 0.9rem; }
    .proc-data__valor { font-size: 0.98rem; }

    /* Valores empilhados no celular */
    .proc-valores { grid-template-columns: 1fr; gap: 10px; }
    .proc-valores__final { font-size: 1.25rem; }
    .proc-doc__numero { font-size: 1.1rem; }
    .proc-doc__topo { padding: 13px 15px; }
}

@media (max-width: 991px) {
    .pj-card,
    .pj-aviso { width: auto; max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* Desktop: card e aviso com a mesma largura, ambos centralizados */
@media (min-width: 992px) {
    .pj-card {
        float: none;
        width: 470px;
        margin: 0 auto;
    }

    .pj-aviso {
        float: none;
        width: 470px;
        margin: 22px auto 0;
    }

    .pj-content { padding-top: 42px; }
}

@media (min-width: 640px) {
    .pj-footer-nav { flex-direction: row; flex-wrap: wrap; gap: 10px; }
    .pj-footer-nav a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    .pj-field .mdl-textfield__input { border-color: var(--tinta); }
    .pj-card { border-color: var(--tinta); }
}