/* ================================================================
   qualidade-docs.css — Módulos de leitura de documentos da Qualidade
   (POPs · Qualificação e Avaliação de Fornecedores · Condições das Filiais)

   Prefixo `qd-` para não colidir com `.sb-` (sidebar) nem `.sbk-`
   (Sales Playbook). Segue o mesmo Claude Design do Playbook: cards
   brancos, borda #E3EAF2, raio 14px, navy #0A2E5C, Plus Jakarta Sans.

   TIPOGRAFIA — mesma escala do Sales Playbook: px INTEIROS (fracionário
   renderiza borrado no Windows) e peso por hierarquia, não por ênfase:
     26/22/17/16 = títulos (700)      |   15/14 = texto
     13/12/11 = rótulos e chips (600) |   800 não é usado
   Tracking negativo só a partir de 17px; abaixo disso, tracking normal.

   RITMO — o respiro entre os blocos vem de DOIS lugares: o gap do
   `.qd-wrap` (busca × conteúdo) e o gap do `#qd-view` (abas, barra e
   seções). O `#qd-view` é preenchido pelo JS; sem o flex dele as seções
   empilham coladas — era o que deixava a tela com "tudo junto".
   ================================================================ */

/* subtítulo do hero (o `body.dept .area-header p` do styles.css é 13.5px) */
#qd-sub { font-size: 15px; line-height: 1.65; max-width: 68ch; }

.qd-wrap {
  padding: 26px 0 64px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* SEM cap de largura: o conteudo preenche a margem como antes. O respiro
     vem do gap e do padding, nao de estreitar a coluna. */
}

/* a coluna que o JS preenche (abas + barra + seções) */
#qd-view {
  display: flex;
  flex-direction: column;
  gap: 38px;
}
#qd-view > section { min-width: 0; }
/* as abas e a barra de estado são cabeçalho do conteúdo, não uma seção à
   parte: os 38px do gap as soltariam do bloco a que pertencem. */
#qd-view > .qd-tabs { margin-bottom: -24px; }
#qd-view > .qd-bar  { margin-bottom: -14px; }
#qd-view > .qd-back { margin-bottom: -24px; }

/* ── Busca ─────────────────────────────────────────────────────── */
.qd-search {
  position: relative;
  background: #fff;
  border: 1px solid #E3EAF2;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 20px;
  transition: border-color .15s, box-shadow .15s;
}
.qd-search:focus-within {
  border-color: #1272C4;
  box-shadow: 0 0 0 3px rgba(18, 114, 196, .10);
}
.qd-search > svg { flex: 0 0 auto; color: #1272C4; }
.qd-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: #0A2E5C;
  padding: 18px 0;
}
.qd-search input::placeholder { color: #93A9BE; }
.qd-search-clear {
  border: none;
  background: #F0F4F9;
  color: #5B7189;
  border-radius: 8px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.qd-search-clear:hover { background: #E3EAF2; color: #0A2E5C; }

/* ── Barra de estado (origem + atualizar) ──────────────────────── */
.qd-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #7C93A8;
}
.qd-bar .qd-origem {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
}
.qd-bar .qd-origem b { font-weight: 600; color: #5B7189; }
.qd-bar .qd-origem svg { color: #1272C4; flex: 0 0 auto; }
.qd-bar .qd-sep { flex: 1; }
.qd-btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #E3EAF2;
  background: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #33495E;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.qd-btn-mini:hover { border-color: #1272C4; color: #0A2E5C; background: #F7FBFF; }
.qd-btn-mini svg { flex: 0 0 auto; color: #93A9BE; }
.qd-btn-mini:hover svg { color: #1272C4; }
.qd-btn-mini[data-girando="1"] svg { animation: qd-girar .9s linear infinite; }
@keyframes qd-girar { to { transform: rotate(360deg); } }

/* ── Abas (fontes: Qualificação / Avaliação) ───────────────────── */
.qd-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid #E3EAF2;
  padding-bottom: 14px;
}
.qd-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #E3EAF2;
  background: #fff;
  border-radius: 99px;
  padding: 9px 17px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #5B7189;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.qd-tab:hover { border-color: #1272C4; color: #0A2E5C; }
.qd-tab[aria-current="true"] { background: #0A2E5C; border-color: #0A2E5C; color: #fff; }
.qd-tab .qd-tab-n {
  font-size: 11px;
  font-weight: 600;
  background: #F0F4F9;
  color: #5B7189;
  border-radius: 99px;
  padding: 2px 8px;
}
.qd-tab[aria-current="true"] .qd-tab-n { background: rgba(255,255,255,.16); color: #fff; }

/* ── Painel de resumo (validade) ───────────────────────────────── */
.qd-resumo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.qd-kpi {
  background: #fff;
  border: 1px solid #E3EAF2;
  border-radius: 14px;
  padding: 18px 20px;
}
.qd-kpi .v {
  font-size: 26px;
  font-weight: 700;
  color: #0A2E5C;
  letter-spacing: -.5px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.qd-kpi .l {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #7C93A8;
  margin-top: 6px;
  line-height: 1.4;
}
.qd-kpi[data-tom="alerta"] .v { color: #B4770F; }
.qd-kpi[data-tom="risco"]  .v { color: #C0453B; }
.qd-kpi[data-tom="ok"]     .v { color: #1B6A46; }

/* ── Seções ────────────────────────────────────────────────────── */
.qd-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.qd-sec-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #0A2E5C;
  line-height: 1.25;
  letter-spacing: -.45px;
}
.qd-sec-head .qd-sec-hint { font-size: 13px; font-weight: 500; color: #7C93A8; }
/* o subtitulo mora EMBAIXO do titulo. Jogado na outra ponta da linha larga
   ele lia como um texto solto na tela. */
.qd-sec-head.qd-sec-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/* ── Cards de pasta (capítulos) ────────────────────────────────── */
.qd-caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.qd-cap {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E3EAF2;
  border-radius: 14px;
  padding: 22px;
  text-decoration: none;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.qd-cap:hover {
  border-color: #1272C4;
  box-shadow: 0 8px 22px rgba(10, 46, 92, .08);
  transform: translateY(-2px);
}
.qd-cap-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 22px;
}
.qd-ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EAF2FB;
  color: #1272C4;
  flex: 0 0 auto;
}
.qd-ic svg { width: 20px; height: 20px; }
.qd-ic[data-tom="roxo"]     { background: #EFECFB; color: #6C5CE0; }
.qd-ic[data-tom="vermelho"] { background: #FDECEC; color: #D4574E; }
.qd-ic[data-tom="verde"]    { background: #E7F5EE; color: #1E8E5A; }
.qd-ic[data-tom="laranja"]  { background: #FEF2E4; color: #C07A16; }
.qd-ic[data-tom="cinza"]    { background: #F0F4F9; color: #7C93A8; }
.qd-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #5B7189;
  background: #F0F4F9;
  border-radius: 99px;
  padding: 5px 11px;
}
.qd-cap h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #0A2E5C;
  letter-spacing: -.2px;
  line-height: 1.3;
}
.qd-cap-desc { font-size: 14px; color: #5B7189; line-height: 1.6; flex: 1; }
.qd-cap-foot {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Lista de documentos ───────────────────────────────────────── */
.qd-list { display: flex; flex-direction: column; gap: 12px; }
.qd-item {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid #E3EAF2;
  border-radius: 14px;
  padding: 18px 22px;
  text-decoration: none;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.qd-item:hover {
  border-color: #1272C4;
  box-shadow: 0 6px 18px rgba(10, 46, 92, .07);
}
.qd-fic {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F0F4F9;
  color: #7C93A8;
}
.qd-fic svg { width: 18px; height: 18px; }
.qd-fic[data-ext="pdf"]   { background: #FDECEC; color: #C0453B; }
.qd-fic[data-ext="xls"]   { background: #E7F5EE; color: #1B6A46; }
.qd-fic[data-ext="doc"]   { background: #EAF2FB; color: #1272C4; }
.qd-fic[data-ext="ppt"]   { background: #FEF2E4; color: #C07A16; }
.qd-fic[data-ext="img"]   { background: #EFECFB; color: #6C5CE0; }
.qd-fic[data-ext="pasta"] { background: #EAF2FB; color: #1272C4; }

.qd-item-body { flex: 1; min-width: 0; }
.qd-item-t {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 16px;
  font-weight: 700;
  color: #0A2E5C;
  line-height: 1.4;
  letter-spacing: normal;
}
.qd-item-s {
  font-size: 14px;
  color: #7C93A8;
  line-height: 1.55;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qd-item-r {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  font-size: 13px;
  color: #93A9BE;
  font-weight: 600;
}
.qd-item-r svg { color: #C3D2E0; }
.qd-item:hover .qd-item-r svg { color: #1272C4; }

/* ── Selos ─────────────────────────────────────────────────────── */
.qd-selo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 4px 10px;
  white-space: nowrap;
}
.qd-selo[data-t="codigo"] { color: #1B4B78; background: #EAF2FB; letter-spacing: .3px; }
.qd-selo[data-t="rev"]    { color: #5B7189; background: #F0F4F9; }
.qd-selo[data-t="ok"]     { color: #1B6A46; background: #E7F5EE; }
.qd-selo[data-t="alerta"] { color: #A67C10; background: #FDF3DE; }
.qd-selo[data-t="risco"]  { color: #B03A31; background: #FDECEC; }
.qd-selo[data-t="neutro"] { color: #5B7189; background: #F0F4F9; }
.qd-selo[data-t="lido"]   { color: #1E8E5A; background: #E7F5EE; }
.qd-selo[data-t="inativo"]{ color: #7C93A8; background: #F0F4F9; }

/* ── Cabeçalho de pasta ────────────────────────────────────────── */
.qd-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #1272C4;
  text-decoration: none;
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.qd-back:hover { text-decoration: underline; }
.qd-pasta-head {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid #E3EAF2;
  border-radius: 14px;
  padding: 24px 26px;
}
.qd-pasta-head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #0A2E5C;
  letter-spacing: -.4px;
  line-height: 1.25;
}
.qd-pasta-head p { margin: 0; font-size: 14px; color: #5B7189; line-height: 1.6; }
.qd-pasta-head .qd-pasta-acao { margin-left: auto; flex: 0 0 auto; }

/* ── Leitor de documento ───────────────────────────────────────── */
.qd-doc {
  background: #fff;
  border: 1px solid #E3EAF2;
  border-radius: 14px;
  overflow: hidden;
}
.qd-doc-head {
  padding: 26px 28px 22px;
  border-bottom: 1px solid #EDF2F7;
}
.qd-doc-head h1 {
  margin: 14px 0 10px;
  font-size: 26px;
  font-weight: 700;
  color: #0A2E5C;
  line-height: 1.25;
  letter-spacing: -.5px;
  word-break: break-word;
}
.qd-doc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.6;
  color: #7C93A8;
}
.qd-doc-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 28px;
  background: #F7FAFC;
  border-bottom: 1px solid #EDF2F7;
}
.qd-visor {
  position: relative;
  background: #F0F4F9;
  min-height: 520px;
}
.qd-visor iframe,
.qd-visor embed {
  display: block;
  width: 100%;
  height: 78vh;
  min-height: 520px;
  border: 0;
  background: #F0F4F9;
}
.qd-visor img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  padding: 24px;
}
.qd-visor-msg {
  padding: 60px 26px;
  text-align: center;
  font-size: 14px;
  color: #7C93A8;
  line-height: 1.7;
}
.qd-visor-msg b { color: #33495E; display: block; margin-bottom: 6px; font-size: 16px; }

/* ── Botões ────────────────────────────────────────────────────── */
.qd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #E3EAF2;
  background: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #33495E;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.qd-btn:hover { border-color: #1272C4; color: #0A2E5C; }
.qd-btn svg { flex: 0 0 auto; }
.qd-btn[data-on="1"] { background: #E7F5EE; border-color: #C9E7D6; color: #1B6A46; }
.qd-btn[data-primario="1"] { background: #0A2E5C; border-color: #0A2E5C; color: #fff; }
.qd-btn[data-primario="1"]:hover { background: #123C77; border-color: #123C77; color: #fff; }

/* ── Estados ───────────────────────────────────────────────────── */
.qd-empty {
  background: #fff;
  border: 1px dashed #D6E1EC;
  border-radius: 14px;
  padding: 48px 24px;
  text-align: center;
  font-size: 15px;
  color: #7C93A8;
  line-height: 1.7;
}
.qd-erro {
  background: #FEF6F5;
  border: 1px solid #F3D3CF;
  border-radius: 14px;
  padding: 24px 26px;
  font-size: 14px;
  color: #8A3E36;
  line-height: 1.7;
}
.qd-erro b { display: block; color: #7A2E27; font-size: 16px; margin-bottom: 8px; }
.qd-erro code {
  display: inline-block;
  background: #FBEAE7;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 12px;
  word-break: break-all;
}
.qd-erro .qd-btn { margin-top: 16px; }

.qd-skel { display: flex; flex-direction: column; gap: 12px; }
.qd-skel i {
  display: block;
  height: 82px;
  border-radius: 14px;
  background: linear-gradient(90deg, #F2F6FA 25%, #E9EFF6 37%, #F2F6FA 63%);
  background-size: 400% 100%;
  animation: qd-brilho 1.3s ease infinite;
}
@keyframes qd-brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Responsivo ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  #qd-view  { gap: 32px; }
  .qd-caps   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qd-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .qd-wrap { padding: 18px 0 44px; gap: 24px; }
  #qd-view { gap: 28px; }
  #qd-view > .qd-tabs { margin-bottom: -16px; }
  #qd-view > .qd-bar  { margin-bottom: -10px; }
  #qd-view > .qd-back { margin-bottom: -16px; }
  .qd-caps   { grid-template-columns: minmax(0, 1fr) !important; }
  .qd-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .qd-search input { padding: 15px 0; font-size: 14px; }
  .qd-sec-head { margin-bottom: 14px; gap: 4px; }
  .qd-sec-head h2 { font-size: 19px; letter-spacing: -.3px; }
  .qd-item { padding: 15px 16px; gap: 13px; }
  .qd-item-t { font-size: 15px; }
  .qd-item-s { font-size: 13px; }
  .qd-item-r .qd-min { display: none; }
  .qd-pasta-head { padding: 18px; gap: 14px; flex-wrap: wrap; }
  .qd-pasta-head h2 { font-size: 19px; letter-spacing: -.3px; }
  .qd-pasta-head .qd-pasta-acao { margin-left: 0; width: 100%; }
  .qd-doc-head { padding: 20px 18px 16px; }
  .qd-doc-head h1 { font-size: 20px; letter-spacing: -.3px; }
  .qd-doc-acoes { padding: 13px 18px; }
  .qd-doc-acoes .qd-btn { flex: 1; justify-content: center; }
  .qd-visor iframe, .qd-visor embed { height: 68vh; min-height: 400px; }
}