/* DPMG Design System — Base styles for all pages extending base.html */

/* :root de tokens removido (US-501). Todas as cores/raios/sombras/
 * tipografia vêm agora de dpmg-tokens.css, carregado ANTES deste arquivo
 * por html/base.html. Este arquivo apenas consome os tokens e aliases. */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);  /* era: linear-gradient(...) */
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remover o pseudo-elemento decorativo ::before do .main-container */
.main-container::before { display: none; }

.main-container {
  max-width: 1300px;
  margin: 0 auto 4rem;
  padding: 2.5rem 1.5rem;  /* era: 3rem */
}

.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;              /* era: 2.5rem - mais contido */
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-primary-dark);
  margin-bottom: 2.5rem;        /* era: 3rem */
  padding-bottom: 1.25rem;
  position: relative;
  text-align: center;
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;                  /* era: 120px - linha mais discreta */
  height: 3px;                  /* era: 4px */
  background: var(--color-accent);
  border-radius: 2px;
}

.page-title img {
    display: block;
    margin: 0 auto 1rem;
    max-height: 90px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
    animation: fadeIn 0.8s ease-out;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;            /* era: 1.75rem */
  line-height: var(--line-height-heading);
  color: var(--color-primary);
  margin: 2.5rem 0 1.25rem;     /* era: 3rem 0 1.5rem */
  padding-left: 1rem;
  position: relative;
  display: flex;
  align-items: center;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 4px;
  background: var(--color-accent);
  border-radius: 2px;
}

.page-description {
  text-align: center;
  max-width: 720px;
  margin: -1rem auto 2rem;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* ---- Banner de cabeçalho de página (US-1112 — dono único) ----
 * Componente "banner colorido com título" usado pelas páginas de petição
 * (dpmg-forms.css), pelos hubs/gerador/tentativas/cadastros (dpmg-paginas.
 * css) e por declaracao/ (modificador `.form-declaracao` em dpmg-forms.css,
 * fundido ali na US-1131 — antes era o arquivo dpmg-forms-declaracao.css).
 * Antes existiam DUAS cópias com as mesmas propriedades (uma em
 * dpmg-forms.css, outra em dpmg-paginas.css) — nunca carregadas juntas na
 * mesma página, mas duplicadas byte a byte. Consolidado aqui porque
 * dpmg-base.css é a única folha comum a 100% das páginas da área restrita
 * (herdada por html/base.html). Diferente de .page-title (título simples
 * com sublinhado, sem fundo colorido) — são dois componentes distintos. */
.page-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white;
  padding: 2.5rem 1rem;
  margin-bottom: 2rem;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.page-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.5px;
  margin: 0;
}

.page-header p {
  margin: 0;
}

/* ---- Navbar ---- */
.navbar {
  background: linear-gradient(
    135deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 100%
  ) !important;               /* era: primary -> primary-light (mais suave) */
  padding: 0.75rem 1.5rem;    /* era: 1rem - navbar mais compacta */
  box-shadow: var(--shadow-navbar);
}

.navbar-brand {
  font-family: var(--font-display);
  color: var(--color-on-primary) !important;
  font-weight: 700;
  font-size: 1.5rem;          /* era: 1.75rem */
  letter-spacing: 0.25px;
  transition: var(--transition);
}

.navbar-brand:hover {
  color: var(--color-accent) !important;
  transform: none;            /* remover o scale(1.05) */
}

/* Escopado a .navbar (correção definitiva citada em dpmg-dashboard.css):
 * .nav-link também é usado fora da navbar (sidebar-index dos guias públicos,
 * abas do dashboard) e o !important vazava texto branco sobre fundo claro. */
.navbar .nav-link {
  color: rgba(var(--overlay-light-rgb),0.85) !important;
  margin: 0 0.125rem;
  padding: 0.4rem 0.875rem !important;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 6px;
  transition: var(--transition);
  position: relative;
}

.navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 70%;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
  transition: transform 0.2s ease;
}

/* Escopado com :not(.navbar-custom): a navbar da área pública
 * (base_script.html) herda estas regras mas tem visual próprio em
 * dpmg-publico-shell.css — o dourado sólido vale só na área restrita. */
.navbar:not(.navbar-custom) .nav-link:hover,
.navbar:not(.navbar-custom) .nav-link.active {
  color: var(--color-primary) !important;
  background-color: var(--color-accent);
}

.navbar:not(.navbar-custom) .nav-link:hover::after,
.navbar:not(.navbar-custom) .nav-link.active::after {
  display: none;
}

.navbar:not(.navbar-custom) .nav-link.active {
  font-weight: 600;
}

/* Preserva o comportamento original da navbar pública: a barrinha
 * dourada ::after continua aparecendo no hover. */
.navbar-custom .nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.25rem;             /* era: 1.5rem */
  margin-bottom: 2.5rem;
}

.document-card {
  background: var(--color-surface);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--color-primary); /* NEW: acento verde */
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.document-card:hover {
  box-shadow: var(--shadow-md);
  border-left-color: var(--color-accent); /* dourado no hover */
  transform: none;          /* remover o translateY(-4px) */
}

/* Remover o pseudo-elemento ::before de cor primaria nos cards */
.document-card::before { display: none; }

.document-card .card-body {
    padding: 1.75rem;
    position: relative;
}

.document-link {
    color: var(--color-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    transition: var(--transition);
}

.document-link .bi {
    color: var(--color-primary);
    font-size: 1.5rem;
    transition: var(--transition);
    flex-shrink: 0;
}

.document-card:hover .document-link {
    color: var(--color-primary);
}

.document-card:hover .bi {
    color: var(--color-accent);
    transform: scale(1.1) rotate(5deg);
}

/* ---- Tabelas ---- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

th {
  background-color: var(--color-primary-dark); /* solido, sem gradiente */
  color: var(--color-on-primary);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.875rem 1.25rem;
  text-align: left;
  border-bottom: 2px solid rgba(var(--overlay-light-rgb),0.1);
}

td {
  padding: 0.875rem 1.25rem;  /* era: 1rem - mais respirado */
  text-align: left;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: none;
}

tr:nth-child(even) td {
  background-color: rgba(var(--color-primary-rgb), 0.025); /* era: 0.02 - um pouco mais visivel */
}

tbody tr {
  transition: background-color 0.15s ease;
}

tbody tr:hover td {
  background-color: rgba(var(--color-primary-rgb), 0.06);
  /* remover transform: scale(1.01) - causa layout shift */
}

.table-container {
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ---- Formularios e Botoes ---- */
.form-control,
input[type=text], input[type=password],
input[type=email], input[type=number],
select, textarea {
  border: 1.5px solid var(--border-color-strong);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.form-control:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); /* era: 0.1 - mais visivel */
}

/* Botao primario */
.btn-primary,
button[type=submit] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: var(--transition);
  /* Remover: text-transform: uppercase */
}

.btn-primary:hover,
button[type=submit]:hover {
  background: var(--color-primary-dark);
  transform: none;          /* remover translateY(-2px) */
  box-shadow: var(--shadow-md);
}

/* Botao de perigo (excluir)
 * EXCEÇÃO documentada (US-501): vermelho semântico de perigo — não faz
 * parte da paleta de marca (verde/dourado); mantido como cor funcional. */
.btn-danger, button.btn-danger {
  background: #dc2626;
  color: var(--color-on-primary);
  border: none;
  padding: 0.4rem 0.875rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.btn-danger:hover {
  background: #b91c1c;
  box-shadow: 0 2px 8px rgba(220,38,38,0.25);
}

/* ---- Estados unificados de botões e controles (US-521) ----
 * Uma só linguagem de foco/desabilitado/carregamento para TODA a área
 * autenticada. Global aqui em dpmg-base.css; dpmg-forms.css (páginas de
 * petição) apenas define as cores dos botões e herda estes estados. */

/* Foco de teclado: anel dourado do token (:focus-visible não dispara em
 * clique de mouse, só em navegação por teclado). AA sobre verde/vermelho.
 * Os campos de texto mantêm o anel verde próprio definido acima. */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
button[type=submit]:focus-visible,
input[type=submit]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Desabilitado (inclui o botão enquanto carrega): opacidade que preserva a
 * leitura do rótulo, cursor de bloqueio e sem sombra/deslocamento de hover. */
.btn:disabled, .btn[disabled],
.btn-primary:disabled, .btn-primary[disabled],
.btn-secondary:disabled, .btn-secondary[disabled],
.btn-danger:disabled, .btn-danger[disabled],
button[type=submit]:disabled, button[type=submit][disabled],
input[type=submit]:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Estado de carregamento: static/js/dpmg-form-ux.js aplica disabled +
 * aria-busy="true" e injeta <span class="spinner-border spinner-border-sm
 * me-2"> no botão. A animação do spinner e a margem (.me-2) vêm do
 * bootstrap.min.css; aqui só garantimos o cursor de progresso e que o
 * spinner herde a cor do texto do botão (branco no primário). */
.btn[aria-busy="true"],
button[type=submit][aria-busy="true"] {
  cursor: progress;
}

.btn .spinner-border,
button[type=submit] .spinner-border {
  color: currentColor;
  vertical-align: -0.125em;
}

label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: 0.375rem;
  letter-spacing: 0.01em;
}

/* ---- Badges e Indicadores de Status ---- */
.badge-ok, .badge-bloqueado, .badge-status {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* EXCEÇÃO documentada (US-501): cores semânticas de status (sucesso/erro).
 * Não fazem parte da paleta de marca; mantidas como cores funcionais AA. */
.badge-ok {
  background: #dcfce7;
  color: #14532d;
  /* era: gradiente verde solido - agora fundo claro, texto escuro */
}

.badge-bloqueado {
  background: #fee2e2;
  color: #7f1d1d;
  /* era: gradiente vermelho solido */
}

/* ---- Links e Navegacao Secundaria ---- */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: rgba(var(--color-primary-rgb), 0.3);
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration-color: rgba(var(--color-primary-rgb), 0.6);
}

/* Links dentro de tabelas (acao/editar) - sem sublinhado padrao */
td a {
  font-weight: 500;
  text-decoration: none;
  color: var(--color-primary);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.3);
  padding-bottom: 1px;
}

td a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ---- Animacoes ---- */
/* Animacao de entrada de pagina - mais sutil */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }  /* era: 20px */
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-8px); }  /* era: maior */
  to   { opacity: 1; transform: translateX(0); }
}

/* Apenas o container principal e o titulo recebem animacao */
.main-container { animation: fadeIn 0.3s ease; }
.page-title     { animation: fadeInUp 0.35s ease; }

/* REMOVER das regras .document-card: animation: fadeInUp ... backwards */
/* Isso evita o efeito de 'cards aparecendo em cascata' que fica cansativo */
.document-card  { animation: none; }

@media (max-width: 768px) {
    .main-container {
        padding: 2rem 1rem;
    }

    .page-title {
        font-size: 2rem;
    }

    .page-header h1 {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .documents-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

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

    html {
        scroll-behavior: auto;
    }
}

/* ---- Toast de sucesso (US-623) ----
 * Criado por static/js/dpmg-form-ux.js quando o download do documento
 * gerado começa. Vive aqui (não em dpmg-forms.css) porque dpmg-form-ux.js
 * também age em formulários data-dpmg-form fora do padrão visual das
 * petições (ex.: planilha), que não carregam dpmg-forms.css — dpmg-base.css
 * é a única folha comum a todas as páginas autenticadas.
 * Cores reaproveitadas de --chip-vigente-bg/--chip-vigente-text
 * (dpmg-tokens.css), já documentadas como AA — nenhum hex novo. */
.dpmg-toast-regiao {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: min(360px, calc(100vw - 2 * var(--space-4)));
}

.dpmg-toast-sucesso,
.dpmg-toast-aviso,
.dpmg-toast-erro {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: 0.9rem;
    line-height: 1.4;
}

.dpmg-toast-sucesso { background: var(--chip-vigente-bg); color: var(--chip-vigente-text); }

/* Toast de aviso/erro (US-824) — substituem alert()/confirm() nativos nos
 * arquivos deste PRD (mascara.js, execucao-comum.js): mensagens não
 * bloqueantes com o mesmo aria-live já usado pelo toast de sucesso (US-623),
 * então nunca interrompem o preenchimento do formulário. Cores dos tokens
 * --chip-alerta-* e --chip-erro-* (dpmg-tokens.css), já documentadas como AA. */
.dpmg-toast-aviso { background: var(--chip-alerta-bg); color: var(--chip-alerta-text); }
.dpmg-toast-erro { background: var(--chip-erro-bg); color: var(--chip-erro-text); }

.dpmg-toast-sucesso .bi-check-circle,
.dpmg-toast-aviso .bi-exclamation-triangle,
.dpmg-toast-erro .bi-x-circle {
    font-size: 1.15rem;
    margin-top: 0.15rem;
}

.dpmg-toast-sucesso span,
.dpmg-toast-aviso span,
.dpmg-toast-erro span {
    flex: 1;
    padding-top: 0.1rem;
}

.dpmg-toast-fechar {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.dpmg-toast-fechar:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* =====================================================================
 * US-1822 — Figuras tabulares
 *
 * Nas fontes proporcionais cada algarismo tem largura própria, então
 * valores empilhados saem desalinhados e a vista se perde de linha.
 * `tabular-nums` pede à fonte a variante em que todo algarismo ocupa a
 * mesma largura. Não é enfeite: em memória de cálculo que vai para os
 * autos, erro de leitura tem consequência.
 *
 * Inter e EB Garamond trazem o recurso `tnum` nativamente, então a
 * família e a espessura não mudam — só o avanço de cada dígito.
 *
 * `slashed-zero` junto para separar zero de "o" maiúsculo em número de
 * processo e de conta.
 * ===================================================================== */
.dpmg-num,
.am-valor-final,
.am-resumo-numeros,
.am-item-card input[type="text"],
.am-item-card input[type="number"] {
    font-variant-numeric: tabular-nums slashed-zero;
    font-feature-settings: "tnum" 1, "zero" 1;
}