/* ============================================================
   Lógica Intranet — Design System
   Cores: Azul primário #5A83F9 · Azul escuro #1D1E4C
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --L:      #5A83F9;
  --LD:     #1D1E4C;
  --L10:    #EEF2FF;
  --L20:    #D6E0FD;
  --L60:    #3B64E8;

  --green:  #1D9E75;
  --green10:#E1F5EE;
  --green60:#0F6E56;
  --amber:  #D97706;
  --amber10:#FEF3C7;
  --amber60:#92400E;
  --red:    #DC2626;
  --red10:  #FEE2E2;
  --red60:  #991B1B;

  --border:    #CBD5E8;
  --borderHov: #9AAAD0;
  --bg:        #F0F3FB;
  --card:      #FFFFFF;
  --txt:       #1D1E4C;
  --txt2:      #4A5380;
  --txt3:      #8B96BC;

  --radius:  10px;
  --radius-lg: 14px;
  --shadow:  0 1px 4px rgba(29,30,76,.07), 0 4px 16px rgba(29,30,76,.06);
  --shadow-md: 0 4px 20px rgba(29,30,76,.12);
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  font-size: 14px;
  color: var(--txt);
  line-height: 1.5;
  background: var(--bg);
  min-height: 100vh;
}

/* ── NAVBAR ── */
.navbar {
  background: var(--LD);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 16px rgba(0,0,0,.22);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 0;
}
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  padding: 6px 8px 6px 0;
  transition: opacity .15s;
}
.nav-logo:hover { opacity: .85; }
.nav-logo-img { height: 36px; width: auto; border-radius: 8px; }

.nav-divider {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,.15);
  margin: 0 20px;
  flex-shrink: 0;
}

.nav-bread {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  font-size: 13px;
  overflow: hidden;
}
.nav-bread-home {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}
.nav-bread-sep   { color: rgba(255,255,255,.2); font-size: 14px; }
.nav-bread-link  { color: rgba(255,255,255,.5); text-decoration: none; transition: color .15s; }
.nav-bread-link:hover { color: rgba(255,255,255,.9); }
.nav-bread-atual { color: rgba(255,255,255,.9); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: 16px;
}
.nav-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.nav-user-nome { color: rgba(255,255,255,.9); font-size: 13px; font-weight: 500; }
.nav-perfil-badge {
  background: rgba(90,131,249,.3);
  color: #C4D4FF;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: .06em;
}
.nav-logout {
  color: rgba(255,255,255,.4);
  font-size: 20px;
  text-decoration: none;
  padding: 6px;
  border-radius: 8px;
  transition: color .15s, background .15s;
  display: flex;
  align-items: center;
}
.nav-logout:hover { color: #fff; background: rgba(255,255,255,.1); }

/* ── FLASH / ALERTAS ── */
.flash {
  max-width: 1100px;
  margin: 12px auto 0;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.flash-erro { background: var(--red10); color: var(--red60); border: 1px solid #FECACA; }
.flash-ok   { background: var(--green10); color: var(--green60); border: 1px solid #A7F3D0; }

/* ── CONTEÚDO ── */
.main-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* ── LOGIN ── */
.login-body {
  background: linear-gradient(135deg, var(--LD) 0%, #2A3575 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-wrap { width: 100%; max-width: 400px; }
.login-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 36px 32px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo-img { height: 72px; width: auto; margin-bottom: 16px; }
.login-logo-txt { display: none; }
.login-logo-sub { font-size: 12px; color: var(--txt3); margin-top: 4px; }
.btn-login {
  width: 100%;
  margin-top: 20px;
  background: var(--L);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(90,131,249,.4);
}
.btn-login:hover   { background: var(--L60); }
.btn-login:disabled { opacity: .6; cursor: not-allowed; }
.login-rodape { text-align: center; margin-top: 20px; font-size: 11px; color: var(--txt3); }

/* ── CAMPOS DE FORMULÁRIO ── */
.campo { display: flex; flex-direction: column; }
.campo-row { display: flex; gap: 12px; }
.campo-row .campo { flex: 1; }
.campo-label { font-size: 12px; font-weight: 600; color: var(--txt2); margin-bottom: 5px; }
.campo-input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--txt);
  background: #fff;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.campo-input:focus { outline: none; border-color: var(--L); box-shadow: 0 0 0 3px rgba(90,131,249,.15); }
.campo-input::placeholder { color: var(--txt3); }

select.campo-input { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B96BC' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

.campo-senha-wrap { position: relative; }
.campo-senha-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--txt3); padding: 2px;
}
.campo-senha-toggle:hover { color: var(--txt2); }

/* ── BOTÕES ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--txt2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  font-family: inherit;
  white-space: nowrap;
}
.btn:hover { background: var(--bg); border-color: var(--borderHov); }
.btn-pri   { background: var(--L); color: #fff; border-color: var(--L); box-shadow: 0 2px 8px rgba(90,131,249,.3); }
.btn-pri:hover { background: var(--L60); border-color: var(--L60); }
.btn-sm    { font-size: 12px; padding: 5px 10px; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--txt3); padding: 6px 8px; }
.btn-ghost:hover { background: var(--bg); border-color: var(--border); color: var(--txt2); }
.btn-ghost-danger:hover { background: var(--red10); border-color: #FECACA; color: var(--red); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── HUB ── */
.hub-wrap { max-width: 860px; margin: 0 auto; }
.hub-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; }
.hub-boas-vindas { font-size: 22px; font-weight: 700; color: var(--LD); }
.hub-subtitulo   { font-size: 13px; color: var(--txt3); margin-top: 2px; }
.hub-data        { font-size: 13px; color: var(--txt3); padding-top: 4px; }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.hub-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-decoration: none;
  color: var(--txt);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all .18s;
  position: relative;
}
.hub-card:hover { border-color: var(--L); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hub-card-disabled { opacity: .55; cursor: default; }
.hub-card-disabled:hover { transform: none; box-shadow: none; border-color: var(--border); }
.hub-card-icone {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.hub-card-icone i { font-size: 22px; }
.hub-card-titulo { font-size: 14px; font-weight: 700; color: var(--LD); }
.hub-card-desc   { font-size: 12px; color: var(--txt3); line-height: 1.4; }
.hub-badge-breve {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  color: var(--txt3); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .05em;
  width: fit-content;
}

/* ── PÁGINAS INTERNAS ── */
.page-wrap    { max-width: 900px; margin: 0 auto; }
.page-header  {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1.5px solid var(--border);
}
.page-titulo  { font-size: 24px; font-weight: 800; color: var(--LD); letter-spacing: -.3px; }
.page-sub     { font-size: 13px; color: var(--txt3); margin-top: 4px; }

.sec-titulo {
  font-size: 11px; font-weight: 700;
  color: var(--txt3); text-transform: uppercase;
  letter-spacing: .07em;
  margin: 20px 0 10px;
}

/* ── CARD GENÉRICO (formulários/painéis de página inteira) ── */
.card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}

/* ── STATS ── */
.stat-row  { display: flex; gap: 12px; margin-bottom: 20px; }
.stat-card {
  flex: 1; background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.stat-val   { font-size: 24px; font-weight: 800; color: var(--LD); }
.stat-label { font-size: 11px; color: var(--txt3); margin-top: 2px; }

/* ── LISTA ── */
.lista      { display: flex; flex-direction: column; gap: 6px; }
.lista-row  {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color .15s;
}
.lista-row:hover { border-color: var(--borderHov); }
.lista-row-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--L10);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.lista-row-body  { flex: 1; min-width: 0; }
.lista-row-nome  { font-size: 13px; font-weight: 600; color: var(--LD); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-row-sub   { font-size: 11px; color: var(--txt3); margin-top: 2px; }
.lista-row-acoes { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* ── FAROL DE STATUS ── */
.farol {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  cursor: pointer;
}
.farol.verde  { background: var(--green); box-shadow: 0 0 0 3px var(--green10); }
.farol.amarelo{ background: var(--amber); box-shadow: 0 0 0 3px var(--amber10); }
.farol.vermelho{ background: var(--red); box-shadow: 0 0 0 3px var(--red10); }

/* ── BADGES DE STATUS ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
}
.badge-ok     { background: var(--green10); color: var(--green60); }
.badge-fail   { background: var(--red10); color: var(--red60); }
.badge-manual { background: var(--amber10); color: var(--amber60); }
.badge-pend   { background: var(--bg); color: var(--txt3); border: 1px solid var(--border); }

/* ── EMPTY STATE ── */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--txt3);
}
.empty-state i   { font-size: 40px; display: block; margin-bottom: 12px; }
.empty-state p   { font-size: 13px; line-height: 1.6; }

/* ── MODAL ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--card);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 480px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  max-height: 90vh; overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-titulo { font-size: 15px; font-weight: 700; color: var(--LD); }
.modal-fechar { background: none; border: none; cursor: pointer; color: var(--txt3); font-size: 18px; padding: 2px; border-radius: 6px; }
.modal-fechar:hover { color: var(--txt); background: var(--bg); }
.modal-corpo  { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal-corpo .campo-row { display: flex; gap: 12px; align-items: flex-start; }
.modal-corpo .campo-row .campo { flex: 1; margin-top: 0; }
.modal-rodape {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 500;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-md);
  min-width: 220px;
}
.toast-ok   { background: var(--green10); color: var(--green60); border: 1px solid #A7F3D0; }
.toast-erro { background: var(--red10); color: var(--red60); border: 1px solid #FECACA; }

/* ── ACCORDION / TIMELINE ── */
.comp-row {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.comp-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background .12s;
}
.comp-header:hover { background: var(--bg); }
.comp-titulo { font-size: 13px; font-weight: 700; color: var(--LD); flex: 1; }
.comp-stats  { display: flex; gap: 8px; font-size: 11px; }
.comp-corpo  { padding: 0 14px 14px; }

/* ── DOCS TABLE ── */
.docs-table { width: 100%; border-collapse: collapse; }
.docs-table th {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--txt3);
  padding: 6px 8px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.docs-table td {
  padding: 8px; font-size: 12px; color: var(--txt2);
  border-bottom: 1px solid var(--bg);
  vertical-align: middle;
}
.docs-table tr:last-child td { border-bottom: none; }
.docs-table .doc-nome { font-weight: 600; color: var(--LD); }

/* ── UPLOAD ZONE ── */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
  background: var(--bg);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--L);
  background: var(--L10);
}
.upload-zone i   { font-size: 28px; color: var(--txt3); display: block; margin-bottom: 8px; }
.upload-zone p   { font-size: 12px; color: var(--txt3); }
.upload-zone p strong { color: var(--L); }

/* ── BLOQUEIO BANNER (legado) ── */
.banner-bloqueio {
  background: var(--red10);
  border: 1.5px solid #FECACA;
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  color: var(--red60);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* ── FAROL DE LIBERAÇÃO DE NF ── */
.farol-wrap { margin-bottom: 20px; }
.farol {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  font-size: 13px;
}
.farol > i { font-size: 24px; flex-shrink: 0; }
.farol > div { display: flex; flex-direction: column; gap: 2px; }
.farol strong { font-size: 13px; font-weight: 700; letter-spacing: .3px; }
.farol span   { font-size: 12px; opacity: .85; }
.farol-verde   { background: #F0FDF4; border-color: #86EFAC; color: #166534; }
.farol-amarelo { background: #FFFBEB; border-color: #FCD34D; color: #92400E; }
.farol-vermelho{ background: var(--red10); border-color: #FECACA; color: var(--red60); }

/* ── UTILIDADES ── */
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: var(--L10); color: var(--L); }
.divider { height: 1px; background: var(--border); margin: 18px 0; }
.txt-muted  { color: var(--txt3); }
.txt-ok     { color: var(--green); }
.txt-erro   { color: var(--red); }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── RESPONSIVO ── */
@media (max-width: 600px) {
  .hub-grid { grid-template-columns: 1fr 1fr; }
  .stat-row { flex-wrap: wrap; }
  .campo-row { flex-direction: column; }
  .nav-user-nome { display: none; }
  .nav-divider { display: none; }
  .main-content { padding: 16px 14px; }
}

/* ════════════════════════════════════════════════════════════
   MÓDULO QUALIDADE
   ════════════════════════════════════════════════════════════ */

/* ── Filtros / busca ── */
.qual-filtros   { margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.qual-busca-wrap{ position: relative; }
.qual-busca-icone { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--txt3); font-size: 16px; }
.qual-busca     { width: 100%; padding: 10px 12px 10px 36px; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--txt); background: #fff; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.qual-busca:focus { outline: none; border-color: var(--L); box-shadow: 0 0 0 3px rgba(90,131,249,.12); }
.qual-cats      { display: flex; flex-wrap: wrap; gap: 8px; }
.qual-cat-chip  { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px; border: 1.5px solid var(--border); background: #fff; color: var(--txt2); text-decoration: none; transition: all .15s; cursor: pointer; }
.qual-cat-chip:hover { border-color: var(--borderHov); background: var(--bg); }
.qual-cat-chip.ativo  { background: var(--chip-cor, var(--L)); color: #fff; border-color: var(--chip-cor, var(--L)); }

/* ── Grid de cards ── */
.qual-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.qual-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px 14px;
  text-decoration: none;
  color: var(--txt);
  display: flex; flex-direction: column; gap: 8px;
  transition: all .18s;
  border-left: 4px solid var(--cat-cor, var(--border));
  position: relative;
  overflow: hidden;
}
.qual-card:hover { border-color: var(--cat-cor, var(--L)); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.qual-card:hover { border-left-color: var(--cat-cor, var(--L)); }
.qual-card-top   { display: flex; align-items: center; justify-content: space-between; }
.qual-card-codigo{ font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--txt3); text-transform: uppercase; }
.qual-card-versao{ font-size: 10px; font-weight: 600; color: var(--txt3); background: var(--bg); padding: 1px 6px; border-radius: 10px; }
.qual-card-titulo{ font-size: 14px; font-weight: 700; color: var(--LD); line-height: 1.35; }
.qual-card-excerpt{ font-size: 12px; color: var(--txt3); line-height: 1.5; flex: 1; }
.qual-card-footer{ display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.qual-card-cat  { font-size: 11px; color: var(--txt3); display: flex; align-items: center; gap: 4px; }
.qual-card-data { font-size: 11px; color: var(--txt3); }

/* ── Resultados / paginação ── */
.qual-resultados-info { font-size: 12px; color: var(--txt3); margin-bottom: 12px; }
.qual-paginacao { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 28px; }
.qual-pag-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 6px;
  font-size: 13px; font-weight: 600; color: var(--txt2);
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius);
  text-decoration: none; transition: all .15s;
}
.qual-pag-btn:hover { border-color: var(--borderHov); background: var(--bg); }
.qual-pag-btn.ativo { background: var(--L); color: #fff; border-color: var(--L); }
.qual-pag-btn.desabilitado { opacity: .4; pointer-events: none; }
.qual-pag-reticencias { color: var(--txt3); font-size: 13px; padding: 0 2px; }

/* ── Procedimento detalhe ── */
.proc-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1.5px solid var(--border); }
.proc-hero-left  { flex: 1; min-width: 0; }
.proc-hero-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.proc-cat-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; }
.proc-titulo  { font-size: 22px; font-weight: 800; color: var(--LD); letter-spacing: -.3px; line-height: 1.3; margin-bottom: 10px; }
.proc-meta    { display: flex; flex-wrap: wrap; gap: 14px; }
.proc-meta-item { font-size: 12px; color: var(--txt3); display: flex; align-items: center; gap: 4px; }

/* ── Document Viewer ── */
.doc-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; margin-bottom: 16px;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: var(--radius); font-size: 13px;
}
.doc-toolbar-nome { display: flex; align-items: center; gap: 7px; color: var(--txt2); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-toolbar-nome i { color: var(--L); flex-shrink: 0; }

.doc-viewer {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 44px;
  max-width: 820px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.8;
  color: var(--txt);
}
.doc-viewer .doc-h {
  font-weight: 700;
  color: var(--LD);
  margin-top: 28px;
  margin-bottom: 8px;
  padding-bottom: 6px;
}
.doc-viewer .doc-h1, .doc-viewer .doc-h-caps {
  font-size: 15px;
  border-bottom: 2px solid var(--L20);
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--L60);
}
.doc-viewer .doc-h2 { font-size: 14px; color: var(--LD); border-bottom: 1px solid var(--border); }
.doc-viewer .doc-h3 { font-size: 13px; color: var(--txt2); }
.doc-viewer .doc-h4 { font-size: 13px; color: var(--txt3); font-weight: 600; }
.doc-viewer .doc-p  { margin-bottom: 10px; color: var(--txt); }
.doc-viewer .doc-ul {
  margin: 8px 0 12px 20px;
  display: flex; flex-direction: column; gap: 5px;
}
.doc-viewer .doc-ul li { color: var(--txt2); }
.doc-viewer .doc-ul-alpha { list-style-type: lower-alpha; }
.doc-viewer .doc-h:first-child { margin-top: 0; }

/* ── Tabs ── */
.proc-tabs  { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 24px; }
.proc-tabs button {
  padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--txt3);
  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
  cursor: pointer; display: flex; align-items: center; gap: 6px; transition: color .15s;
  font-family: inherit;
}
.proc-tabs button:hover { color: var(--txt2); }
.proc-tabs button.ativo { color: var(--L); border-bottom-color: var(--L); }
.tab-count { background: var(--L); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; }

/* ── Seções do procedimento ── */
.proc-secoes    { display: flex; flex-direction: column; gap: 0; }
.proc-secao     { padding: 20px 0; border-bottom: 1px solid var(--border); }
.proc-secao:last-child { border-bottom: none; }
.proc-secao-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--txt3); margin-bottom: 10px;
}
.proc-secao-header i { font-size: 14px; color: var(--L); }
.proc-secao-corpo { font-size: 13px; color: var(--txt); line-height: 1.7; white-space: pre-line; }

/* ── Restrições 4M+P ── */
.restricoes-intro {
  background: var(--L10); border: 1px solid var(--L20);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 12px; color: var(--txt2);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px;
}
.restricoes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.restricao-col { display: flex; flex-direction: column; gap: 8px; }
.restricao-col-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  padding: 8px 10px; border-radius: var(--radius);
  border: 1.5px solid; text-transform: uppercase; letter-spacing: .05em;
}
.restricao-col-lista { display: flex; flex-direction: column; gap: 6px; }
.restricao-item {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 10px;
  font-size: 12px; line-height: 1.5;
  display: flex; gap: 8px; align-items: flex-start;
  transition: border-color .15s;
}
.restricao-item:hover { border-color: var(--borderHov); }
.restricao-item-corpo { flex: 1; }
.restricao-del-btn {
  background: none; border: none; cursor: pointer;
  color: var(--txt3); font-size: 13px; padding: 2px;
  border-radius: 4px; flex-shrink: 0; margin-top: 2px;
  transition: color .15s;
}
.restricao-del-btn:hover { color: var(--red); }
.restricao-vazia { font-size: 11px; color: var(--txt3); text-align: center; padding: 12px 8px; }
.restricao-add-btn {
  font-size: 11px; font-weight: 600; color: var(--txt3);
  background: none; border: 1.5px dashed var(--border);
  border-radius: var(--radius); padding: 6px 10px; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  transition: all .15s; font-family: inherit; width: 100%;
  justify-content: center;
}
.restricao-add-btn:hover { border-color: var(--L); color: var(--L); background: var(--L10); }

/* ── Histórico de versões ── */
.historico-lista { display: flex; flex-direction: column; gap: 8px; }
.historico-item  { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); }
.historico-versao{ font-size: 14px; font-weight: 800; color: var(--L); min-width: 48px; }
.historico-info  { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.historico-data  { font-size: 12px; color: var(--txt2); font-weight: 600; }
.historico-aprovadores { font-size: 11px; color: var(--txt3); display: flex; align-items: center; gap: 4px; }

/* ── Modal sugestão: diff ── */
.sug-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sug-diff-col     { display: flex; flex-direction: column; gap: 6px; }
.sug-diff-label   { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 4px; }
.sug-diff-content { font-size: 12px; line-height: 1.6; color: var(--txt2); }
.sug-step         { display: flex; flex-direction: column; gap: 14px; }

/* ── Sugestões lista ── */
.sug-row {
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px;
}
.sug-row-pend { border-left: 4px solid var(--amber); }
.sug-proc-link { font-size: 13px; font-weight: 700; color: var(--LD); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.sug-proc-link:hover { color: var(--L); }
.sug-proc-codigo { background: var(--L10); color: var(--L); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; letter-spacing: .05em; }
.sug-row-proc  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sug-row-autor { font-size: 12px; color: var(--txt3); display: flex; align-items: center; gap: 4px; }
.sug-row-desc  { font-size: 13px; color: var(--txt2); line-height: 1.5; }
.sug-row-footer{ display: flex; align-items: center; justify-content: space-between; }
.sug-obs       { background: var(--amber10); border-radius: 6px; padding: 8px 10px; font-size: 12px; color: var(--amber60); }
.sug-acoes     { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--border); }
.sug-diff-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sug-diff-mini-col   { display: flex; flex-direction: column; gap: 4px; }
.sug-diff-mini-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 4px; }
.sug-diff-mini-txt   { font-size: 12px; color: var(--txt2); line-height: 1.5; background: var(--bg); border-radius: 6px; padding: 8px 10px; max-height: 140px; overflow-y: auto; }

/* ── Novo procedimento ── */
.novo-upload-card  { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.novo-processando  { text-align: center; padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--txt3); font-size: 13px; }
.novo-aviso-ia     { background: linear-gradient(135deg, rgba(90,131,249,.08), rgba(29,30,76,.04)); border: 1px solid var(--L20); border-radius: var(--radius); padding: 10px 14px; font-size: 12px; color: var(--txt2); display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.novo-aviso-ia i   { color: var(--L); font-size: 16px; flex-shrink: 0; }
.novo-form         { display: flex; flex-direction: column; gap: 0; }
.novo-secao        { padding: 18px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.novo-secao:last-of-type { border-bottom: none; }
.novo-secao-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt3); }
.novo-rodape       { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; flex-wrap: wrap; gap: 12px; }

/* ── Chat IA ── */
.chat-wrap {
  display: flex; flex-direction: column;
  height: calc(100vh - 60px);  /* altura tela menos navbar */
  max-width: 860px; margin: 0 auto;
}
.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1.5px solid var(--border);
  background: var(--card); flex-shrink: 0;
}
.chat-header-info { display: flex; align-items: center; gap: 12px; }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--L), var(--LD)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; flex-shrink: 0; }
.chat-header-titulo { font-size: 14px; font-weight: 700; color: var(--LD); }
.chat-header-sub    { font-size: 11px; color: var(--txt3); margin-top: 2px; }

.chat-mensagens {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
  scroll-behavior: smooth;
}
.chat-inicio {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 20px; color: var(--txt3); gap: 12px;
}
.chat-inicio i { font-size: 48px; color: var(--L10); margin-bottom: 4px; }
.chat-inicio h3 { font-size: 18px; font-weight: 700; color: var(--LD); }
.chat-inicio p  { font-size: 13px; color: var(--txt3); line-height: 1.6; }
.chat-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.chat-sug-btn {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 8px 14px; font-size: 12px;
  font-weight: 500; color: var(--txt2); cursor: pointer;
  transition: all .15s; font-family: inherit; text-align: left;
}
.chat-sug-btn:hover { border-color: var(--L); color: var(--L); background: var(--L10); }

.chat-msg { display: flex; gap: 10px; max-width: 85%; }
.chat-msg-user { flex-direction: row-reverse; margin-left: auto; }
.chat-msg-ia   { margin-right: auto; }
.chat-msg-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--L), var(--LD)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.chat-msg-balao { display: flex; flex-direction: column; gap: 6px; }
.chat-msg-user .chat-msg-balao { align-items: flex-end; }
.chat-msg-texto {
  padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.6;
}
.chat-msg-user .chat-msg-texto { background: var(--L); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg-ia   .chat-msg-texto { background: var(--card); color: var(--txt); border: 1.5px solid var(--border); border-bottom-left-radius: 4px; }
.chat-msg-texto ul { margin: 6px 0 6px 16px; }
.chat-msg-texto li { margin-bottom: 3px; }
.chat-msg-refs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
.chat-refs-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--txt3); width: 100%; }
.chat-ref-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; background: var(--L10); color: var(--L); text-decoration: none; transition: background .15s; }
.chat-ref-chip:hover { background: var(--L20); }
.chat-cache-badge { font-size: 10px; color: var(--txt3); display: flex; align-items: center; gap: 3px; padding: 0 2px; }

.chat-typing { display: flex; gap: 4px; padding: 10px 14px; background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; border-bottom-left-radius: 4px; width: fit-content; }
.chat-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--txt3); animation: chat-bounce .9s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }

.chat-input-wrap { padding: 14px 20px 16px; border-top: 1.5px solid var(--border); background: var(--card); flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.chat-input-box  { display: flex; align-items: flex-end; gap: 10px; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 8px 8px 8px 14px; transition: border-color .15s, box-shadow .15s; }
.chat-input-box.foco { border-color: var(--L); box-shadow: 0 0 0 3px rgba(90,131,249,.12); }
.chat-textarea { flex: 1; background: none; border: none; outline: none; resize: none; font-family: inherit; font-size: 13px; color: var(--txt); line-height: 1.5; min-height: 22px; max-height: 120px; overflow-y: auto; }
.chat-textarea::placeholder { color: var(--txt3); }
.chat-send-btn { width: 36px; height: 36px; border-radius: 10px; background: var(--L); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background .15s; flex-shrink: 0; }
.chat-send-btn:hover:not(:disabled) { background: var(--L60); }
.chat-send-btn:disabled { opacity: .4; cursor: not-allowed; }
.chat-rodape-aviso { font-size: 11px; color: var(--txt3); display: flex; align-items: center; gap: 5px; justify-content: center; }

/* ── Spin utilitário ── */
.spin { animation: spin .7s linear infinite; }

/* ── Amber color utilitário ── */
.txt-amber { color: var(--amber); }

/* ── Responsivo Qualidade ── */
@media (max-width: 900px) { .restricoes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  .restricoes-grid { grid-template-columns: 1fr 1fr; }
  .sug-diff-mini   { grid-template-columns: 1fr; }
  .sug-diff        { grid-template-columns: 1fr; }
  .proc-hero       { flex-direction: column; }
  .qual-grid       { grid-template-columns: 1fr; }
  .chat-wrap       { height: calc(100vh - 60px); }
}