/* =================================================================
   SegWork NR — Design System Completo
   assets/style.css

   Paleta:
     Primário    #1e3a5f  azul escuro profissional
     Secundário  #2563eb  azul médio (ações/links)
     Sucesso     #16a34a
     Erro        #dc2626
     Fundo       #f8fafc
     Superfície  #ffffff
================================================================= */


/* ----------------------------------------------------------------
   1. VARIÁVEIS CSS (:root)
   Todas as cores, sombras, raios e tipografia em um só lugar.
---------------------------------------------------------------- */
:root {
  /* Cores primárias */
  --cor-primaria:        #1e3a5f;
  --cor-secundaria:      #2563eb;
  --cor-secundaria-h:    #1d4ed8;   /* hover */
  --cor-secundaria-l:    #eff6ff;   /* fundo suave */

  /* Semânticas */
  --cor-sucesso:         #16a34a;
  --cor-sucesso-l:       #dcfce7;
  --cor-sucesso-b:       #bbf7d0;
  --cor-erro:            #dc2626;
  --cor-erro-l:          #fee2e2;
  --cor-erro-b:          #fecaca;
  --cor-aviso:           #d97706;
  --cor-aviso-l:         #fef3c7;
  --cor-aviso-b:         #fde68a;
  --cor-info:            #0891b2;
  --cor-info-l:          #e0f2fe;
  --cor-info-b:          #bae6fd;

  /* Superfícies */
  --bg:                  #f8fafc;
  --superficie:          #ffffff;
  --borda:               #e2e8f0;
  --borda-foco:          #2563eb;

  /* Texto */
  --texto:               #1e293b;
  --texto-sub:           #475569;
  --texto-muted:         #94a3b8;
  --texto-inv:           #ffffff;

  /* Alias compatível com inline styles legados */
  --text-muted:          #94a3b8;
  --primary:             #2563eb;
  --primary-dark:        #1d4ed8;
  --primary-light:       #eff6ff;
  --success:             #16a34a;
  --danger:              #dc2626;
  --border:              #e2e8f0;
  --white:               #ffffff;

  /* Tipografia */
  --fonte:               'Inter', system-ui, -apple-system, sans-serif;
  --peso-normal:         400;
  --peso-medio:          500;
  --peso-semi:           600;
  --peso-bold:           700;
  --peso-extra:          800;

  /* Border-radius */
  --raio-sm:             6px;
  --raio:                10px;
  --raio-md:             12px;
  --raio-lg:             16px;
  --raio-pill:           999px;

  /* Alias legado */
  --radius:              12px;
  --radius-sm:           8px;

  /* Sombras */
  --sombra-xs:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sombra-sm:   0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  --sombra-md:   0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.06);
  --sombra-lg:   0 8px 32px rgba(0,0,0,0.11), 0 4px 12px rgba(0,0,0,0.07);
  --sombra-foco: 0 0 0 3px rgba(37,99,235,0.25);

  /* Alias legado */
  --shadow:    0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.11);

  /* Transição padrão */
  --trans: 0.18s ease;
}

/* ----------------------------------------------------------------
   2. RESET E BASE
---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--fonte);
  font-size: 15px;
  font-weight: var(--peso-normal);
  color: var(--texto);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--cor-secundaria); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; }
button { font-family: var(--fonte); }


/* ----------------------------------------------------------------
   3. LAYOUT — CONTAINER E MAIN
---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.main {
  padding: 40px 0 64px;
  min-height: calc(100vh - 64px - 72px);
}


/* ----------------------------------------------------------------
   4. NAVBAR (HEADER)
   Fundo branco · altura 64 px · sombra suave · logo à esquerda
   Links com underline animado · botão Sair destacado à direita
---------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  box-shadow: var(--sombra-xs);
  height: 64px;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  color: var(--texto);
  flex-shrink: 0;
}

.logo-text {
  font-size: 1.15rem;
  font-weight: var(--peso-bold);
  color: var(--cor-primaria);
  letter-spacing: -0.02em;
}

.logo-text sup {
  font-size: 0.58em;
  color: var(--cor-secundaria);
  font-weight: var(--peso-semi);
  vertical-align: super;
  margin-left: 1px;
}

/* Grupo de links à direita */
.header-end {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  min-width: 0;
}

.tagline {
  font-size: 0.78rem;
  color: var(--texto-muted);
  font-weight: var(--peso-normal);
  margin-right: 14px;
  white-space: nowrap;
}

/* Base compartilhada: todos os links do header */
.btn-dashboard,
.btn-historico,
.btn-perfil,
.btn-logout,
.btn-login-header {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: var(--raio-sm);
  font-size: 0.81rem;
  font-weight: var(--peso-medio);
  color: var(--texto-sub);
  text-decoration: none !important;
  white-space: nowrap;
  position: relative;
  transition: color var(--trans), background var(--trans), border-color var(--trans);
  border: 1px solid transparent;
}

/* Underline animado — aparece no hover */
.btn-dashboard::after,
.btn-historico::after,
.btn-perfil::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--cor-secundaria);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.btn-dashboard:hover::after,
.btn-historico:hover::after,
.btn-perfil:hover::after { transform: scaleX(1); }

.btn-dashboard:hover,
.btn-historico:hover,
.btn-perfil:hover {
  color: var(--cor-secundaria);
  background: var(--cor-secundaria-l);
}

/* Estado ativo */
.btn-dashboard--active {
  color: var(--cor-secundaria);
  font-weight: var(--peso-semi);
  background: var(--cor-secundaria-l);
}
.btn-dashboard--active::after { transform: scaleX(1); }

/* Perfil com status de preenchimento */
.btn-perfil--ok    { color: var(--cor-sucesso); }
.btn-perfil--setup { color: var(--cor-aviso); }
.btn-perfil--ok:hover    { color: var(--cor-sucesso);  background: var(--cor-sucesso-l); }
.btn-perfil--setup:hover { color: var(--cor-aviso);   background: var(--cor-aviso-l);  }

/* Botão Sair — diferenciado com borda */
.btn-logout {
  border-color: var(--borda);
  color: var(--texto-sub);
}
.btn-logout:hover {
  background: var(--cor-erro-l);
  border-color: var(--cor-erro-b);
  color: var(--cor-erro);
}

/* Entrar (deslogado) */
.btn-login-header {
  background: var(--cor-secundaria);
  color: var(--texto-inv) !important;
  border-color: var(--cor-secundaria);
  font-weight: var(--peso-semi);
  padding: 7px 16px;
}
.btn-login-header:hover { background: var(--cor-secundaria-h); border-color: var(--cor-secundaria-h); }


/* ----------------------------------------------------------------
   5. FOOTER
---------------------------------------------------------------- */
.footer {
  background: var(--cor-primaria);
  color: rgba(255,255,255,0.72);
  padding: 22px 0;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.7;
}

.footer-disclaimer {
  color: rgba(255,255,255,0.38);
  font-size: 0.74rem;
  margin-top: 4px;
}


/* ----------------------------------------------------------------
   6. BADGES DE PLANO
---------------------------------------------------------------- */
.plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--raio-pill);
  font-size: 0.68rem;
  font-weight: var(--peso-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  border: 1px solid transparent;
}

.plan-badge--free       { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }
.plan-badge--pro        { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.plan-badge--enterprise { background: #fdf4ff; color: #7e22ce; border-color: #e9d5ff; }


/* ----------------------------------------------------------------
   7. CARDS
   border-radius 16 px · sombra média · padding 28 px
---------------------------------------------------------------- */
.card {
  background: var(--superficie);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-md);
  padding: 28px;
  margin-bottom: 24px;
}

.card-title {
  font-size: 1.1rem;
  font-weight: var(--peso-semi);
  color: var(--cor-primaria);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borda);
}


/* ----------------------------------------------------------------
   8. BOTÕES
   Primário, secundário (outline), download, assinar, upgrade.
   Todos com focus acessível via box-shadow (sem outline padrão).
---------------------------------------------------------------- */

/* Primário — azul cheio */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  width: 100%;
  background: var(--cor-secundaria);
  color: var(--texto-inv) !important;
  border: none;
  border-radius: var(--raio);
  font-size: 0.95rem;
  font-weight: var(--peso-semi);
  cursor: pointer;
  text-decoration: none !important;
  transition: background var(--trans), box-shadow var(--trans);
  line-height: 1;
}

.btn-primary:hover:not(:disabled) {
  background: var(--cor-secundaria-h);
  box-shadow: 0 4px 16px rgba(37,99,235,0.3);
  text-decoration: none !important;
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--sombra-foco);
}

.btn-primary:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  opacity: 0.75;
}

/* Variante pequena */
.btn-primary--sm {
  width: auto;
  padding: 8px 18px;
  font-size: 0.875rem;
}

/* Secundário / Voltar — outline neutro */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: var(--superficie);
  color: var(--texto-sub) !important;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: 0.9rem;
  font-weight: var(--peso-medio);
  cursor: pointer;
  text-decoration: none !important;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}

.btn-back:hover { background: var(--bg); border-color: #cbd5e1; color: var(--texto) !important; }
.btn-back:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

/* Download — verde */
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: var(--cor-sucesso);
  color: var(--texto-inv) !important;
  border: none;
  border-radius: var(--raio);
  font-size: 0.9rem;
  font-weight: var(--peso-semi);
  text-decoration: none !important;
  transition: background var(--trans);
}
.btn-download:hover { background: #15803d; }

/* Assinar / Gerenciar assinatura */
.btn-assinar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  background: var(--cor-secundaria);
  color: var(--texto-inv) !important;
  border: none;
  border-radius: var(--raio);
  font-size: 0.875rem;
  font-weight: var(--peso-semi);
  cursor: pointer;
  text-decoration: none !important;
  margin-top: 16px;
  transition: background var(--trans), box-shadow var(--trans);
}
.btn-assinar:hover {
  background: var(--cor-secundaria-h);
  box-shadow: 0 4px 14px rgba(37,99,235,0.28);
  text-decoration: none !important;
}
.btn-assinar--muted {
  background: var(--bg);
  color: var(--texto-sub) !important;
  border: 1px solid var(--borda);
}
.btn-assinar--muted:hover {
  background: var(--cor-erro-l);
  color: var(--cor-erro) !important;
  border-color: var(--cor-erro-b);
  box-shadow: none;
}

/* Upgrade */
.btn-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--cor-secundaria);
  color: var(--texto-inv) !important;
  border-radius: var(--raio-sm);
  font-size: 0.82rem;
  font-weight: var(--peso-semi);
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--trans);
  border: 1px solid transparent;
}
.btn-upgrade:hover { background: var(--cor-secundaria-h); }
.btn-upgrade--soft {
  background: var(--cor-secundaria-l);
  color: var(--cor-secundaria) !important;
  border-color: #bfdbfe;
}
.btn-upgrade--soft:hover { background: #dbeafe; }

/* Spinner dentro do botão */
.btn-loader {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes girar { to { transform: rotate(360deg); } }


/* ----------------------------------------------------------------
   9. ALERTAS E AVISOS
   Fundo colorido suave · borda lateral 4 px · ícone + 2 linhas
---------------------------------------------------------------- */

/* Aviso de perfil incompleto */
.perfil-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--cor-info-l);
  border-left: 4px solid var(--cor-info);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: 0.875rem;
  color: #0c4a6e;
  margin-bottom: 20px;
  line-height: 1.55;
}
.perfil-notice svg { flex-shrink: 0; margin-top: 1px; stroke: var(--cor-info); }
.perfil-notice strong { font-weight: var(--peso-semi); }
.perfil-notice a { color: var(--cor-info); font-weight: var(--peso-semi); text-decoration: underline; }

/* Avisos de limite de uso */
.limite-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: 0.875rem;
  margin-bottom: 20px;
}
.limite-notice svg { flex-shrink: 0; }
.limite-notice__body { flex: 1; min-width: 0; }
.limite-notice__body strong { display: block; font-weight: var(--peso-semi); margin-bottom: 2px; }
.limite-notice__body p { font-size: 0.82rem; margin: 0; opacity: 0.85; }

/* Variantes de cor */
.limite-notice--bloqueado {
  background: var(--cor-erro-l);
  border-left: 4px solid var(--cor-erro);
  color: #7f1d1d;
}
.limite-notice--bloqueado svg { stroke: var(--cor-erro); }

.limite-notice--alerta {
  background: var(--cor-aviso-l);
  border-left: 4px solid var(--cor-aviso);
  color: #78350f;
}
.limite-notice--alerta svg { stroke: var(--cor-aviso); }

.limite-notice--ok {
  background: var(--cor-sucesso-l);
  border-left: 4px solid var(--cor-sucesso);
  color: #14532d;
}
.limite-notice--ok svg { stroke: var(--cor-sucesso); }

/* Feedback de formulário (perfil) */
.perfil-mensagem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: 0.875rem;
  font-weight: var(--peso-medio);
  margin-bottom: 20px;
}
.perfil-mensagem svg { flex-shrink: 0; }
.perfil-mensagem--sucesso { background: var(--cor-sucesso-l); border-left: 4px solid var(--cor-sucesso); color: #14532d; }
.perfil-mensagem--sucesso svg { stroke: var(--cor-sucesso); }
.perfil-mensagem--erro    { background: var(--cor-erro-l);    border-left: 4px solid var(--cor-erro);    color: #7f1d1d; }
.perfil-mensagem--erro svg { stroke: var(--cor-erro); }

/* Caixa de erro genérica */
.error-box {
  background: var(--cor-erro-l);
  border-left: 4px solid var(--cor-erro);
  border-radius: 0 var(--raio) var(--raio) 0;
  color: #7f1d1d;
  font-size: 0.875rem;
  padding: 12px 16px;
  margin-bottom: 16px;
  line-height: 1.5;
}


/* ----------------------------------------------------------------
   10. FORMULÁRIOS
   Labels simples, inputs com borda 1 px, focus colorido,
   sem outline padrão do browser.
---------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.form-group label,
.form-label {
  font-size: 0.84rem;
  font-weight: var(--peso-semi);
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Inputs, selects, textareas e classe .input (checkout) */
.form-group input,
.form-group select,
.form-group textarea,
.input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: 0.9rem;
  font-family: var(--fonte);
  color: var(--texto);
  background: var(--superficie);
  outline: none;
  transition: border-color var(--trans), box-shadow var(--trans);
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.input:focus {
  border-color: var(--borda-foco);
  box-shadow: var(--sombra-foco);
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--texto-muted); }

.form-group textarea {
  resize: vertical;
  min-height: 88px;
}

/* Linhas de formulário */
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row--3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* Select customizado */
.select-wrapper { position: relative; }
.select-wrapper select { padding-right: 38px; }
.select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--texto-muted);
}

/* Indicadores de campo */
.required { color: var(--cor-erro); }
.optional  { color: var(--texto-muted); font-size: 0.77rem; font-weight: var(--peso-normal); }

.form-hint {
  font-size: 0.78rem;
  color: var(--texto-muted);
  line-height: 1.45;
}

.char-count {
  font-size: 0.74rem;
  color: var(--texto-muted);
  text-align: right;
  margin-top: -4px;
}


/* ----------------------------------------------------------------
   11. BARRA DE USO (uso-bar)
---------------------------------------------------------------- */
.uso-bar { margin-bottom: 20px; }

.uso-bar__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.uso-bar__label  { font-size: 0.8rem; color: var(--texto-sub); }
.uso-bar__status { font-size: 0.78rem; color: var(--texto-muted); font-weight: var(--peso-medio); }
.uso-bar__status--bloqueado { color: var(--cor-erro); font-weight: var(--peso-semi); }

.uso-bar__track {
  height: 6px;
  background: #e2e8f0;
  border-radius: var(--raio-pill);
  overflow: hidden;
}

.uso-bar__fill {
  height: 100%;
  background: var(--cor-sucesso);
  border-radius: var(--raio-pill);
  transition: width 0.45s ease;
}
.uso-bar__fill--warn   { background: var(--cor-aviso); }
.uso-bar__fill--danger { background: var(--cor-erro); }


/* ----------------------------------------------------------------
   12. HERO SECTION
---------------------------------------------------------------- */
.hero {
  text-align: center;
  padding: 36px 0 30px;
  max-width: 660px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 2.2rem;
  font-weight: var(--peso-extra);
  color: var(--cor-primaria);
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: -0.025em;
}

.hero p {
  font-size: 1.05rem;
  color: var(--texto-sub);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}

.highlight { color: var(--cor-secundaria); }

/* Pílulas de recurso */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 28px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  font-size: 0.8rem;
  font-weight: var(--peso-medio);
  color: var(--texto-sub);
  box-shadow: var(--sombra-xs);
}
.badge svg { fill: var(--cor-sucesso); }


/* ----------------------------------------------------------------
   13. CARDS DE TIPO DE DOCUMENTO (index.php)
---------------------------------------------------------------- */
.tipos-section { margin-top: 40px; }

.tipos-section h3 {
  font-size: 0.78rem;
  font-weight: var(--peso-semi);
  color: var(--texto-muted);
  margin-bottom: 16px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.tipos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.tipo-card {
  background: var(--superficie);
  border-radius: var(--raio-md);
  padding: 20px 16px;
  border: 1.5px solid var(--borda);
  cursor: pointer;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}

.tipo-card:hover,
.tipo-card.active {
  border-color: var(--cor-secundaria);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.09), var(--sombra-sm);
  transform: translateY(-2px);
}

.tipo-icon {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--raio-sm);
  font-size: 0.7rem;
  font-weight: var(--peso-bold);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.tipo-icon.apr   { background: #fef3c7; color: #92400e; }
.tipo-icon.os    { background: #dbeafe; color: #1e40af; }
.tipo-icon.pt    { background: #dcfce7; color: #166534; }
.tipo-icon.chk   { background: #f3e8ff; color: #6b21a8; }
.tipo-icon.pgr   { background: #e0f2fe; color: #075985; }
.tipo-icon.pcmso { background: #ffedd5; color: #9a3412; }
.tipo-icon.ltcat { background: #ccfbf1; color: #134e4a; }
.tipo-icon.ppp   { background: #fce7f3; color: #9d174d; }
.tipo-icon.laudo { background: #fee2e2; color: #991b1b; }
.tipo-icon.dds   { background: #f3f4f6; color: #374151; }

.tipo-card h4 {
  font-size: 0.9rem;
  font-weight: var(--peso-semi);
  color: var(--cor-primaria);
  margin-bottom: 6px;
  line-height: 1.3;
}

.tipo-card p {
  font-size: 0.8rem;
  color: var(--texto-sub);
  line-height: 1.5;
}

/* Card de login obrigatório */
.login-required-card { text-align: center; padding: 52px 32px; }
.login-cta-icon { display: flex; justify-content: center; margin-bottom: 18px; color: var(--texto-muted); }
.login-cta-title { font-size: 1.2rem; font-weight: var(--peso-semi); color: var(--cor-primaria); margin-bottom: 10px; }
.login-cta-desc { color: var(--texto-sub); margin-bottom: 24px; max-width: 400px; margin-left: auto; margin-right: auto; }
.login-cta-btn { width: auto; padding: 12px 32px; }


/* ----------------------------------------------------------------
   14. HISTÓRICO DE DOCUMENTOS
---------------------------------------------------------------- */

/* Painel de estatísticas */
.hist-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.hist-stat {
  background: var(--superficie);
  border-radius: var(--raio-md);
  padding: 14px 18px;
  border: 1px solid var(--borda);
  flex: 1;
  min-width: 80px;
  text-align: center;
  box-shadow: var(--sombra-xs);
}

.hist-stat__num {
  display: block;
  font-size: 1.65rem;
  font-weight: var(--peso-extra);
  color: var(--cor-primaria);
  line-height: 1.1;
}

.hist-stat__label {
  display: block;
  font-size: 0.71rem;
  color: var(--texto-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--peso-medio);
  margin-top: 3px;
}

.hist-stat--apr .hist-stat__num { color: #92400e; }
.hist-stat--os  .hist-stat__num { color: #1e40af; }
.hist-stat--pt  .hist-stat__num { color: #166534; }
.hist-stat--chk .hist-stat__num { color: #6b21a8; }

/* Filtros de tipo */
.hist-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hist-filter {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: var(--raio-pill);
  font-size: 0.8rem;
  font-weight: var(--peso-medio);
  color: var(--texto-sub);
  background: var(--superficie);
  border: 1px solid var(--borda);
  text-decoration: none !important;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.hist-filter:hover { background: var(--bg); color: var(--cor-primaria); }

.hist-filter--active           { background: var(--cor-primaria); color: var(--texto-inv) !important; border-color: var(--cor-primaria); }
.hist-filter--apr.hist-filter--active   { background: #92400e; border-color: #92400e; }
.hist-filter--os.hist-filter--active    { background: #1e40af; border-color: #1e40af; }
.hist-filter--pt.hist-filter--active    { background: #166534; border-color: #166534; }
.hist-filter--chk.hist-filter--active   { background: #6b21a8; border-color: #6b21a8; }
.hist-filter--pgr.hist-filter--active   { background: #075985; border-color: #075985; }
.hist-filter--pcmso.hist-filter--active { background: #9a3412; border-color: #9a3412; }
.hist-filter--ltcat.hist-filter--active { background: #134e4a; border-color: #134e4a; }
.hist-filter--ppp.hist-filter--active   { background: #9d174d; border-color: #9d174d; }
.hist-filter--laudo.hist-filter--active { background: #991b1b; border-color: #991b1b; }
.hist-filter--dds.hist-filter--active   { background: #374151; border-color: #374151; }

/* Estado vazio */
.hist-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--texto-muted);
}
.hist-empty svg { margin: 0 auto 18px; opacity: 0.38; }
.hist-empty p { font-size: 0.95rem; }

/* Lista de itens */
.hist-list { display: flex; flex-direction: column; gap: 8px; }

.hist-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--superficie);
  border-radius: var(--raio-md);
  padding: 13px 16px;
  border: 1px solid var(--borda);
  transition: box-shadow var(--trans), border-color var(--trans);
}
.hist-item:hover { border-color: #c7d2fe; box-shadow: var(--sombra-sm); }

/* Badge de tipo — compartilhado com dashboard */
.hist-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 3px 8px;
  border-radius: var(--raio-sm);
  font-size: 0.69rem;
  font-weight: var(--peso-bold);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  text-transform: uppercase;
}
.hist-item__badge--apr   { background: #fef3c7; color: #92400e; }
.hist-item__badge--os    { background: #dbeafe; color: #1e40af; }
.hist-item__badge--pt    { background: #dcfce7; color: #166534; }
.hist-item__badge--chk   { background: #f3e8ff; color: #6b21a8; }
.hist-item__badge--pgr   { background: #e0f2fe; color: #075985; }
.hist-item__badge--pcmso { background: #ffedd5; color: #9a3412; }
.hist-item__badge--ltcat { background: #ccfbf1; color: #134e4a; }
.hist-item__badge--ppp   { background: #fce7f3; color: #9d174d; }
.hist-item__badge--laudo { background: #fee2e2; color: #991b1b; }
.hist-item__badge--dds   { background: #f3f4f6; color: #374151; }

.hist-item__info  { flex: 1; min-width: 0; }
.hist-item__title {
  font-size: 0.9rem;
  font-weight: var(--peso-semi);
  color: var(--cor-primaria);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hist-item__meta {
  font-size: 0.77rem;
  color: var(--texto-muted);
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.hist-sep { color: var(--borda); }

.hist-item__date { font-size: 0.76rem; color: var(--texto-muted); white-space: nowrap; flex-shrink: 0; }

/* Ações do item */
.hist-item__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.hist-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--raio-sm);
  font-size: 0.78rem;
  font-weight: var(--peso-medio);
  text-decoration: none !important;
  border: 1px solid var(--borda);
  background: var(--bg);
  color: var(--texto-sub);
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
  white-space: nowrap;
  font-family: var(--fonte);
}
.hist-btn:hover { background: #f1f5f9; }

.hist-btn--view     { color: var(--cor-secundaria); border-color: #bfdbfe; background: #eff6ff; }
.hist-btn--view:hover { background: #dbeafe; }

.hist-btn--download { padding: 5px 8px; color: var(--cor-sucesso); border-color: var(--cor-sucesso-b); background: var(--cor-sucesso-l); }
.hist-btn--download:hover { background: #bbf7d0; }

.hist-btn--delete { padding: 5px 8px; color: var(--cor-erro); border-color: var(--cor-erro-b); background: var(--cor-erro-l); }
.hist-btn--delete:hover { background: #fecaca; }

.hist-btn--unavailable { color: var(--texto-muted); cursor: default; }

.hist-btn--renew { background: #fff7ed; color: #c2410c; border-color: #fdba74; }
.hist-btn--renew:hover { background: #ffedd5; border-color: #fb923c; }

.hist-delete-form { display: inline-flex; }

/* Paginação */
.hist-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hist-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--raio);
  font-size: 0.85rem;
  font-weight: var(--peso-medio);
  color: var(--texto-sub);
  background: var(--superficie);
  border: 1px solid var(--borda);
  text-decoration: none !important;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.hist-page-btn:hover { background: var(--bg); color: var(--cor-primaria); }
.hist-page-btn--active { background: var(--cor-secundaria); color: var(--texto-inv) !important; border-color: var(--cor-secundaria); }

.hist-page-ellipsis { color: var(--texto-muted); padding: 0 4px; }
.hist-page-info { font-size: 0.77rem; color: var(--texto-muted); margin-left: 8px; }


/* ----------------------------------------------------------------
   15. DASHBOARD
---------------------------------------------------------------- */

/* Barra de boas-vindas */
.dash-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding: 22px 28px;
  background: linear-gradient(135deg, var(--cor-primaria) 0%, #1d4ed8 100%);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-md);
}

.dash-welcome__title {
  font-size: 1.3rem;
  font-weight: var(--peso-bold);
  color: var(--texto-inv);
  margin-bottom: 4px;
}

.dash-welcome__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.72);
  flex-wrap: wrap;
}

.dash-welcome__sep { color: rgba(255,255,255,0.35); }
.dash-welcome__setup { color: #fcd34d; font-size: 0.82rem; text-decoration: underline; }
.dash-welcome__setup:hover { color: #fde68a; }

.dash-welcome .btn-primary {
  width: auto;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  font-size: 0.875rem;
  padding: 10px 18px;
  flex-shrink: 0;
  white-space: nowrap;
}
.dash-welcome .btn-primary:hover { background: rgba(255,255,255,0.24); box-shadow: none; }

/* Linha de estatísticas */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.dash-stat {
  background: var(--superficie);
  border-radius: var(--raio-md);
  padding: 18px 16px;
  border: 1px solid var(--borda);
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--sombra-xs);
}

.dash-stat__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--raio);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-stat__icon--blue  { background: #dbeafe; color: #1d4ed8; }
.dash-stat__icon--green { background: var(--cor-sucesso-l); color: var(--cor-sucesso); }
.dash-stat__icon--amber { background: var(--cor-aviso-l); color: var(--cor-aviso); }
.dash-stat__icon--red   { background: var(--cor-erro-l); color: var(--cor-erro); }
.dash-stat__icon--teal  { background: #ccfbf1; color: #0d9488; }

.dash-stat__value {
  font-size: 1.5rem;
  font-weight: var(--peso-extra);
  color: var(--cor-primaria);
  line-height: 1;
}
.dash-stat__value--danger { color: var(--cor-erro); }
.dash-stat__limit { font-size: 0.88rem; font-weight: var(--peso-normal); color: var(--texto-muted); }
.dash-stat__label { font-size: 0.74rem; color: var(--texto-muted); margin-top: 2px; }

/* Grid principal — 2 colunas */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}
.dash-main, .dash-sidebar { min-width: 0; }
.dash-card { margin-bottom: 20px; }

.dash-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borda);
}
.dash-card__header h3 { font-size: 0.95rem; font-weight: var(--peso-semi); color: var(--cor-primaria); }
.dash-card__header a  { font-size: 0.8rem; color: var(--cor-secundaria); font-weight: var(--peso-medio); }
.dash-card__total { font-size: 0.78rem; color: var(--texto-muted); }

/* Documentos recentes */
.dash-recent { display: flex; flex-direction: column; gap: 2px; }
.dash-recent__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}
.dash-recent__item:last-child { border-bottom: none; }
.dash-recent__info { flex: 1; min-width: 0; }

.dash-recent__atividade {
  display: block;
  font-size: 0.87rem;
  font-weight: var(--peso-medio);
  color: var(--cor-primaria);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-recent__meta { font-size: 0.74rem; color: var(--texto-muted); margin-top: 1px; }

.dash-recent__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  color: var(--cor-secundaria);
  font-weight: var(--peso-medio);
  text-decoration: none !important;
  padding: 3px 8px;
  border: 1px solid #bfdbfe;
  border-radius: var(--raio-sm);
  background: #eff6ff;
  white-space: nowrap;
}

/* Distribuição por tipo */
.dash-types { display: flex; flex-direction: column; gap: 12px; }
.dash-type-row { display: flex; align-items: center; gap: 10px; }
.dash-type-row__label { display: flex; align-items: center; gap: 6px; min-width: 196px; }
.dash-type-row__name  { font-size: 0.82rem; color: var(--texto-sub); }

.dash-type-row__bar-wrap {
  flex: 1;
  height: 8px;
  background: #f1f5f9;
  border-radius: var(--raio-pill);
  overflow: hidden;
}
.dash-type-row__bar {
  height: 100%;
  border-radius: var(--raio-pill);
  transition: width 0.55s ease;
}
.dash-type-row__bar--apr { background: #f59e0b; }
.dash-type-row__bar--os  { background: #3b82f6; }
.dash-type-row__bar--pt  { background: #22c55e; }
.dash-type-row__bar--chk { background: #a855f7; }
.dash-type-row__count { font-size: 0.82rem; font-weight: var(--peso-semi); color: var(--texto-sub); min-width: 24px; text-align: right; }

/* Card de plano no dashboard */
.dash-plan__tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dash-plan__preco { font-size: 1.1rem; font-weight: var(--peso-bold); color: var(--cor-primaria); }
.dash-plan__preco small { font-size: 0.75rem; font-weight: var(--peso-normal); color: var(--texto-muted); }

.dash-plan__features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; }
.dash-plan__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--texto-sub);
}
.dash-plan__feat--no { color: var(--texto-muted); }
.dash-plan__compare  { font-size: 0.78rem; color: var(--cor-secundaria); text-decoration: none !important; }

/* Ações rápidas */
.dash-actions { display: flex; flex-direction: column; gap: 2px; }
.dash-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--raio);
  font-size: 0.875rem;
  color: var(--texto-sub);
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.dash-action:hover {
  background: var(--cor-secundaria-l);
  color: var(--cor-secundaria);
  border-color: #bfdbfe;
}
.dash-action svg { flex-shrink: 0; }

/* Estado vazio */
.dash-empty { text-align: center; padding: 36px 16px; color: var(--texto-muted); }
.dash-empty svg { margin: 0 auto 12px; opacity: 0.35; }
.dash-empty p { font-size: 0.9rem; margin-bottom: 14px; }

/* Caixa de info de assinatura */
.assin-info-box {
  background: var(--bg);
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  overflow: hidden;
}
.assin-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--borda);
  gap: 12px;
}
.assin-info-row:last-child { border-bottom: none; }
.assin-info-row span:first-child { color: var(--texto-muted); flex-shrink: 0; }
.assin-info-row span:last-child  { font-weight: var(--peso-medio); word-break: break-all; }
.assin-info-id { font-family: monospace; font-size: 0.74rem; }


/* ----------------------------------------------------------------
   16. PERFIL DA EMPRESA
---------------------------------------------------------------- */

/* Logo atual */
.logo-atual {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: 12px;
}
.logo-atual__img { max-height: 52px; max-width: 140px; object-fit: contain; border-radius: 4px; }
.logo-atual__info { display: flex; flex-direction: column; gap: 6px; }
.logo-atual__nome { font-size: 0.82rem; color: var(--texto-sub); }
.logo-remover { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--cor-erro); cursor: pointer; font-weight: var(--peso-normal); }

/* Área de upload */
.logo-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 20px;
  background: var(--bg);
  border: 2px dashed var(--borda);
  border-radius: var(--raio-md);
  cursor: pointer;
  transition: border-color var(--trans), background var(--trans);
  text-align: center;
  position: relative;
}
.logo-upload-area:hover,
.logo-upload-area--drag { border-color: var(--cor-secundaria); background: var(--cor-secundaria-l); }

.logo-upload-icon { color: var(--texto-muted); }
.logo-upload-area:hover .logo-upload-icon { color: var(--cor-secundaria); }
.logo-upload-text { font-size: 0.88rem; font-weight: var(--peso-medio); color: var(--texto-sub); }
.logo-upload-sub  { font-size: 0.75rem; color: var(--texto-muted); }

/* Preview da nova logo */
.logo-nova-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--cor-sucesso-l);
  border: 1px solid var(--cor-sucesso-b);
  border-radius: var(--raio);
  font-size: 0.82rem;
  color: #166534;
}
.logo-nova-preview img { max-height: 40px; max-width: 100px; object-fit: contain; border-radius: 4px; }

/* Cards info do perfil */
.perfil-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}

.perfil-info-card {
  background: var(--superficie);
  border-radius: var(--raio-md);
  padding: 20px 18px;
  border: 1px solid var(--borda);
}

.perfil-info-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--raio);
  background: var(--cor-secundaria-l);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-secundaria);
  margin-bottom: 12px;
}

.perfil-info-card h4 {
  font-size: 0.88rem;
  font-weight: var(--peso-semi);
  color: var(--cor-primaria);
  margin-bottom: 6px;
}
.perfil-info-card p { font-size: 0.8rem; color: var(--texto-sub); line-height: 1.5; }


/* ----------------------------------------------------------------
   17. CHECKOUT — MERCADO PAGO
   Duas colunas na desktop: resumo à esquerda, formulário à direita.
   Iframes do SDK estilizados como inputs nativos.
   Selos de segurança abaixo do botão de pagamento.
---------------------------------------------------------------- */
.checkout-wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
  max-width: 860px;
  margin: 0 auto;
}

/* Resumo do plano — coluna esquerda, fundo escuro */
.checkout-summary {
  background: var(--cor-primaria);
  border-radius: var(--raio-lg);
  padding: 32px 24px;
  color: rgba(255,255,255,0.82);
  position: sticky;
  top: 84px;
}

.checkout-summary .plan-badge { margin-bottom: 16px; }

.checkout-summary__price {
  font-size: 2.5rem;
  font-weight: var(--peso-extra);
  color: var(--texto-inv);
  line-height: 1;
  margin-bottom: 6px;
}
.checkout-summary__price span { font-size: 1rem; font-weight: var(--peso-normal); color: rgba(255,255,255,0.55); }

.checkout-summary__desc { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-bottom: 24px; }

.checkout-summary__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.checkout-summary__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.82);
}

.checkout-summary__secure {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.77rem;
  color: rgba(255,255,255,0.45);
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Formulário — coluna direita */
.checkout-card { padding: 32px; }

.checkout-card__title {
  font-size: 1.1rem;
  font-weight: var(--peso-semi);
  color: var(--cor-primaria);
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borda);
}

/* Wrapper dos iframes do SDK do Mercado Pago
   Simula um input nativo: borda, raio e fundo iguais aos inputs comuns. */
.mp-field {
  width: 100%;
  min-height: 44px;
  padding: 3px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  display: flex;
  align-items: center;
  transition: border-color var(--trans), box-shadow var(--trans);
  cursor: text;
}

/* Focus dentro do iframe — detectado pela classe adicionada pelo SDK */
.mp-field:focus-within {
  border-color: var(--borda-foco);
  box-shadow: var(--sombra-foco);
}

/* Remove qualquer borda do iframe injetado */
.mp-field iframe {
  border: none !important;
  outline: none !important;
  width: 100% !important;
  min-height: 36px;
  display: block;
}

/* Botão principal de pagamento */
.btn-pagar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: var(--cor-secundaria);
  color: var(--texto-inv);
  border: none;
  border-radius: var(--raio);
  font-size: 1rem;
  font-weight: var(--peso-semi);
  font-family: var(--fonte);
  cursor: pointer;
  margin-top: 8px;
  transition: background var(--trans), box-shadow var(--trans);
}
.btn-pagar:hover:not(:disabled) {
  background: var(--cor-secundaria-h);
  box-shadow: 0 6px 20px rgba(37,99,235,0.35);
}
.btn-pagar:disabled { background: #94a3b8; cursor: not-allowed; }
.btn-pagar:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

/* Selos de segurança abaixo do botão */
.checkout-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.checkout-security__item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--texto-muted);
  font-weight: var(--peso-medio);
}

/* Bandeiras de cartão */
.checkout-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.checkout-card-flag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--bg);
  border: 1px solid var(--borda);
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: var(--peso-bold);
  color: var(--texto-sub);
  letter-spacing: 0.04em;
}

/* Mensagens de resultado */
.checkout-redirect-msg { font-size: 0.82rem; color: var(--texto-muted); margin-top: 8px; }
.checkout-pending-icon { background: var(--cor-aviso-l); color: var(--cor-aviso); }


/* ----------------------------------------------------------------
   18. PÁGINA DE PLANOS
   (Estilos base — planos.php tem bloco <style> com overrides)
---------------------------------------------------------------- */
.plans-hero { text-align: center; margin-bottom: 48px; }
.plans-hero h1 { font-size: 2rem; font-weight: var(--peso-extra); color: var(--cor-primaria); margin-bottom: 10px; letter-spacing: -0.02em; }
.plans-hero p  { font-size: 1rem; color: var(--texto-sub); max-width: 500px; margin: 0 auto; }

.plans-grid {
  display: flex;
  gap: 24px;
  align-items: stretch;
  justify-content: center;
  margin-bottom: 32px;
}

.plan-card {
  background: var(--superficie);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-md);
  padding: 32px 28px;
  flex: 1;
  max-width: 310px;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 2px solid transparent;
  transition: box-shadow var(--trans), transform var(--trans);
}
.plan-card:hover { box-shadow: var(--sombra-lg); transform: translateY(-3px); }

.plan-card--popular { border-color: var(--cor-secundaria); padding-top: 48px; box-shadow: 0 4px 28px rgba(37,99,235,0.14); }
.plan-card--current { border-color: var(--cor-sucesso); }

.plan-card__popular-tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cor-secundaria);
  color: var(--texto-inv);
  font-size: 10.5px;
  font-weight: var(--peso-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 18px;
  border-radius: var(--raio-pill);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}

.plan-card__name   { font-size: 0.77rem; font-weight: var(--peso-bold); color: var(--cor-primaria); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }
.plan-card__price  { font-size: 2.6rem; font-weight: var(--peso-extra); color: var(--cor-primaria); line-height: 1; margin-bottom: 4px; letter-spacing: -0.02em; }
.plan-card__price span { font-size: 1rem; font-weight: var(--peso-medio); color: var(--texto-muted); }
.plan-card__period { font-size: 0.77rem; color: var(--texto-muted); padding-bottom: 20px; border-bottom: 1px solid var(--borda); margin-top: 2px; }

.plan-card__features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 20px 0 auto; flex: 1; }
.plan-card__features li { display: flex; align-items: center; gap: 9px; font-size: 0.875rem; color: var(--texto); font-weight: var(--peso-medio); }

.feat-ok      { flex-shrink: 0; stroke: var(--cor-sucesso); }
.feat-ok path { stroke: var(--cor-sucesso); }
.feat-no      { flex-shrink: 0; stroke: #f87171 !important; }
.feat-no path { stroke: #f87171 !important; }

.plan-card__cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 20px;
  border-radius: var(--raio);
  font-size: 0.9rem;
  font-weight: var(--peso-bold);
  text-decoration: none !important;
  margin-top: 24px;
  box-sizing: border-box;
  transition: background var(--trans), box-shadow var(--trans);
}
.plan-card__cta--primary { background: var(--cor-secundaria); color: var(--texto-inv) !important; border: 2px solid var(--cor-secundaria); }
.plan-card__cta--primary:hover { background: var(--cor-secundaria-h); border-color: var(--cor-secundaria-h); box-shadow: 0 4px 16px rgba(37,99,235,0.3); }
.plan-card__cta--outline { background: transparent; color: var(--texto-muted) !important; border: 2px solid var(--borda); cursor: default; }
.plan-card__cta--current { background: var(--cor-sucesso-l); color: var(--cor-sucesso) !important; border: 2px solid var(--cor-sucesso-b); cursor: default; }

.plan-note { text-align: center; font-size: 0.82rem; color: var(--texto-muted); max-width: 560px; margin: 0 auto; line-height: 1.65; }
.plan-note strong { color: var(--texto-sub); }


/* ----------------------------------------------------------------
   19. CANCELAR ASSINATURA
---------------------------------------------------------------- */
.cancelar-wrap  { max-width: 480px; margin: 0 auto; }
.cancelar-card  { padding: 36px; }

.cancelar-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--raio-md);
  background: var(--cor-erro-l);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-erro);
  margin-bottom: 20px;
}
.cancelar-title { font-size: 1.25rem; font-weight: var(--peso-bold); color: var(--cor-primaria); margin-bottom: 10px; }
.cancelar-desc  { font-size: 0.9rem; color: var(--texto-sub); line-height: 1.6; margin-bottom: 20px; }
.cancelar-form  { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }

.cancelar-btn-confirmar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  background: var(--cor-erro);
  color: var(--texto-inv);
  border: none;
  border-radius: var(--raio);
  font-size: 0.9rem;
  font-weight: var(--peso-semi);
  cursor: pointer;
  font-family: var(--fonte);
  transition: background var(--trans);
}
.cancelar-btn-confirmar:hover { background: #b91c1c; }
.cancelar-btn-confirmar:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

.cancelar-btn-manter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: var(--cor-sucesso-l);
  color: var(--cor-sucesso);
  border: 1px solid var(--cor-sucesso-b);
  border-radius: var(--raio);
  font-size: 0.9rem;
  font-weight: var(--peso-semi);
  text-decoration: none !important;
  transition: background var(--trans);
}
.cancelar-btn-manter:hover { background: var(--cor-sucesso-b); }


/* ----------------------------------------------------------------
   20. PÁGINA DE RESULTADO (gerar.php)
---------------------------------------------------------------- */
.result-section { text-align: center; padding: 36px 16px 28px; }
.result-section h2 { font-size: 1.4rem; font-weight: var(--peso-bold); color: var(--cor-primaria); margin: 16px 0 8px; }
.result-section p  { color: var(--texto-sub); }

.status-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.status-icon.success { background: var(--cor-sucesso-l); color: var(--cor-sucesso); }
.status-icon.error   { background: var(--cor-erro-l);    color: var(--cor-erro);    }

.doc-meta { background: var(--bg); border-radius: var(--raio); border: 1px solid var(--borda); overflow: hidden; margin-bottom: 20px; }
.doc-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--borda);
  gap: 16px;
}
.doc-meta-row:last-child { border-bottom: none; }
.doc-meta-row span:first-child { color: var(--texto-muted); flex-shrink: 0; }
.doc-meta-row span:last-child  { font-weight: var(--peso-medio); text-align: right; word-break: break-all; }

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  justify-content: center;
}

.doc-preview { border-radius: var(--raio-md); overflow: hidden; border: 1px solid var(--borda); box-shadow: var(--sombra-sm); }
.doc-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--cor-primaria);
  color: rgba(255,255,255,0.78);
  font-size: 0.8rem;
}
.doc-preview iframe { width: 100%; height: 700px; border: none; display: block; }


/* ----------------------------------------------------------------
   21. LOGIN
---------------------------------------------------------------- */
.login-wrap   { max-width: 400px; margin: 60px auto 0; }
.login-header { text-align: center; margin-bottom: 28px; }
.login-header h1 { font-size: 1.5rem; font-weight: var(--peso-bold); color: var(--cor-primaria); margin: 16px 0 6px; }
.login-header p  { color: var(--texto-sub); font-size: 0.9rem; }


/* ----------------------------------------------------------------
   22. RESPONSIVO
---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .dash-grid         { grid-template-columns: 1fr 300px; }
  .tipos-grid        { grid-template-columns: repeat(3, 1fr); }
  .dash-stats        { grid-template-columns: repeat(2, 1fr); }
  .perfil-info-grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .checkout-wrap     { grid-template-columns: 1fr; }
  .checkout-summary  { position: static; }
  .dash-grid         { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .container     { padding: 0 16px; }
  .main          { padding: 24px 0 48px; }
  .tagline       { display: none; }

  .hero h1 { font-size: 1.7rem; }
  .hero p  { font-size: 0.95rem; }

  .form-row,
  .form-row--2,
  .form-row--3   { grid-template-columns: 1fr; }

  .tipos-grid { grid-template-columns: repeat(2, 1fr); }

  .plans-grid       { flex-direction: column; align-items: stretch; }
  .plan-card        { max-width: 100%; }
  .plan-card--popular { order: -1; }

  .dash-stats   { grid-template-columns: 1fr 1fr; }
  .perfil-info-grid { grid-template-columns: 1fr; }

  .hist-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .hist-item__date    { order: 3; width: 100%; }
  .hist-item__actions { order: 4; }
}

@media (max-width: 480px) {
  .tipos-grid   { grid-template-columns: 1fr 1fr; }
  .hist-stats   { flex-wrap: wrap; }
  .dash-stats   { grid-template-columns: 1fr 1fr; }

  /* Esconde links de navegação secundários no mobile para não transbordar */
  .btn-dashboard,
  .btn-historico { display: none; }
}


/* ----------------------------------------------------------------
   23. LOGIN — componentes ausentes do reset original
   Card, ícone, mensagem de erro, campo de senha com toggle.
---------------------------------------------------------------- */
.login-card {
  background: var(--superficie);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  padding: 40px;
}

.login-icon {
  width: 60px;
  height: 60px;
  background: var(--cor-secundaria-l);
  border-radius: var(--raio-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-secundaria);
  margin: 0 auto 18px;
}

.login-erro {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--cor-erro-l);
  border-left: 4px solid var(--cor-erro);
  border-radius: 0 var(--raio) var(--raio) 0;
  color: #7f1d1d;
  font-size: 0.875rem;
  margin-bottom: 20px;
}
.login-erro svg { flex-shrink: 0; stroke: var(--cor-erro); }

/* Wrapper do campo de senha com botão olho */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
}
.password-wrapper input { padding-right: 46px; }

.toggle-senha {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texto-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 var(--raio) var(--raio) 0;
  transition: color var(--trans);
}
.toggle-senha:hover { color: var(--cor-secundaria); }
.toggle-senha:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

.login-back {
  text-align: center;
  font-size: 0.83rem;
  margin-top: 22px;
}
.login-back a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--texto-muted);
  text-decoration: none !important;
  transition: color var(--trans);
}
.login-back a:hover { color: var(--cor-secundaria); }

@media (max-width: 480px) {
  .login-wrap  { margin-top: 32px; }
  .login-card  { padding: 28px 22px; }
}


/* ----------------------------------------------------------------
   24. LANDING PAGE — index.php visitante não logado
   Grid 2 colunas: proposta de valor + tiles de documento.
---------------------------------------------------------------- */
.landing-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
  padding: 8px 0 52px;
}

/* Badge "Grátis" no topo */
.landing-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  background: var(--cor-sucesso-l);
  border: 1px solid var(--cor-sucesso-b);
  color: var(--cor-sucesso);
  border-radius: var(--raio-pill);
  font-size: 0.78rem;
  font-weight: var(--peso-semi);
  margin-bottom: 22px;
}

.landing-heading {
  font-size: 1.9rem;
  font-weight: var(--peso-extra);
  color: var(--cor-primaria);
  line-height: 1.2;
  letter-spacing: -0.028em;
  margin-bottom: 16px;
}

.landing-sub {
  font-size: 0.97rem;
  color: var(--texto-sub);
  line-height: 1.68;
  margin-bottom: 26px;
  max-width: 420px;
}

.landing-feats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.landing-feats li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.885rem;
  color: var(--texto-sub);
  font-weight: var(--peso-medio);
}

.landing-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.landing-actions .btn-primary { width: auto; padding: 13px 26px; }
.landing-actions .btn-back    { padding: 12px 20px; }

/* Tiles dos tipos de documento (coluna direita) */
.landing-doc-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ldt {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 20px 20px;
  border-radius: var(--raio-md);
  border: 1.5px solid var(--borda);
  background: var(--superficie);
  box-shadow: var(--sombra-sm);
  min-height: 126px;
  font-weight: var(--peso-bold);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  cursor: default;
  user-select: none;
  transition: transform var(--trans), box-shadow var(--trans);
}
.ldt:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }

.ldt span {
  display: block;
  font-size: 0.72rem;
  font-weight: var(--peso-normal);
  letter-spacing: 0;
  margin-top: 8px;
  line-height: 1.35;
  opacity: 0.7;
}

.ldt--apr   { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.ldt--os    { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
.ldt--pt    { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.ldt--chk   { color: #6b21a8; border-color: #e9d5ff; background: #faf5ff; }
.ldt--pgr   { color: #075985; border-color: #7dd3fc; background: #f0f9ff; }
.ldt--pcmso { color: #9a3412; border-color: #fdba74; background: #fff7ed; }
.ldt--ltcat { color: #134e4a; border-color: #99f6e4; background: #f0fdfa; }
.ldt--dds   { color: #374151; border-color: #d1d5db; background: #f9fafb; }

/* Responsivo landing */
@media (max-width: 900px) {
  .landing-section { gap: 36px; }
}

@media (max-width: 768px) {
  .landing-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .landing-heading { font-size: 1.55rem; }
  .landing-sub     { max-width: 100%; }
  .landing-doc-tiles { grid-template-columns: repeat(4, 1fr); }
  .ldt { min-height: 76px; padding: 14px 12px; font-size: 0.88rem; }
  .ldt span { display: none; }
}

@media (max-width: 480px) {
  .landing-doc-tiles { grid-template-columns: repeat(2, 1fr); }
  .ldt { min-height: 90px; font-size: 1rem; }
  .ldt span { display: block; font-size: 0.67rem; }
}


/* ================================================================
   EXTRAS DINÂMICOS — campos extras por tipo de documento
================================================================ */
.extras-block {
  margin-top: 4px;
  margin-bottom: 4px;
  border-top: 1px dashed var(--borda);
  padding-top: 16px;
}

.extras-divider {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cor-primaria);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 0 4px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  color: var(--texto-principal);
  cursor: pointer;
}

.radio-label input[type="radio"] {
  accent-color: var(--cor-primaria);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ================================================================
   CHECKOUT — Abas Cartão / PIX
================================================================ */
.checkout-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--borda);
  margin-bottom: 24px;
}
.checkout-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-family: var(--fonte);
  font-size: 0.93rem;
  font-weight: var(--peso-semi);
  color: var(--texto-sub);
  cursor: pointer;
  transition: color var(--trans), border-color var(--trans);
}
.checkout-tab:hover { color: var(--cor-secundaria); }
.checkout-tab--active {
  color: var(--cor-secundaria);
  border-bottom-color: var(--cor-secundaria);
}
.checkout-tab-panel { padding-top: 4px; }

/* Botão PIX em verde (#00BDAE = cor oficial Pix) */
.btn-pagar--pix {
  background: #00BDAE;
}
.btn-pagar--pix:hover:not(:disabled) {
  background: #009e91;
  box-shadow: 0 6px 20px rgba(0,189,174,0.35);
}

/* ================================================================
   PIX — Formulário e QR Code
================================================================ */
.pix-instrucoes {
  font-size: 0.92rem;
  color: var(--texto-sub);
  margin-bottom: 20px;
  line-height: 1.5;
}

.pix-qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.pix-qr-titulo {
  font-size: 1rem;
  font-weight: var(--peso-semi);
  color: var(--texto);
  margin: 0;
}
.pix-qr-img {
  display: block;
  width: 180px;
  height: 180px;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 8px;
  background: #fff;
}
.pix-qr-ou {
  font-size: 0.85rem;
  color: var(--texto-muted);
  margin: 0;
}
.pix-copiaecola {
  display: flex;
  gap: 8px;
  width: 100%;
}
.pix-copiaecola-input {
  flex: 1;
  font-size: 0.78rem;
  font-family: monospace;
  background: var(--bg);
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-copiar {
  padding: 0 16px;
  background: var(--cor-secundaria);
  color: #fff;
  border: none;
  border-radius: var(--raio);
  font-family: var(--fonte);
  font-size: 0.88rem;
  font-weight: var(--peso-semi);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--trans);
}
.btn-copiar:hover { background: var(--cor-secundaria-h); }
.pix-aviso {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--texto-sub);
  background: var(--cor-aviso-l);
  border: 1px solid var(--cor-aviso-b);
  border-radius: var(--raio);
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
}
.pix-nota {
  font-size: 0.82rem;
  color: var(--texto-muted);
  text-align: center;
  margin: 0;
}
.pix-link-painel {
  font-size: 0.9rem;
  color: var(--cor-secundaria);
  text-decoration: none;
  font-weight: var(--peso-semi);
}
.pix-link-painel:hover { text-decoration: underline; }