/* Guias - Painel Diretoria, RH, T.I. e implantação Pesquisa GPS */
.guia-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

.guia-hero { margin-bottom: 20px; }

.guia-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.guia-nav a {
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border, #d8e2dc);
  background: #fff;
  color: var(--green-dark, #14502c);
  text-decoration: none;
}

.guia-section { margin-bottom: 24px; }

.guia-section h2 {
  font-size: 16px;
  margin: 0 0 10px;
  color: var(--green-dark, #14502c);
}

.guia-section p,
.guia-section li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text, #1d2a22);
}

.guia-section ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.guia-map {
  display: grid;
  gap: 10px;
}

.guia-map-item {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border, #d8e2dc);
  background: #fff;
  box-shadow: 0 4px 14px rgba(20, 80, 44, 0.04);
}

.guia-map-item strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--green-dark);
}

.guia-map-item span {
  font-size: 13px;
  color: var(--muted, #66756b);
}

.guia-checklist {
  display: grid;
  gap: 8px;
}

.guia-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #d8e2dc);
  background: #fff;
  font-size: 13px;
  line-height: 1.45;
  box-sizing: border-box;
}

.guia-check input {
  margin-top: 3px;
  flex-shrink: 0;
}

.guia-check-text {
  flex: 1;
  min-width: 0;
}

.guia-check.is-done {
  background: #f4faf6;
  border-color: #c5ddd0;
}

.guia-phase {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green-dark);
  margin: 16px 0 8px;
}

.guia-role {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.guia-role--diretoria { background: #e8f4ec; color: #14502c; }
.guia-role--juridico { background: #fff4e5; color: #7b4d00; }
.guia-role--ti { background: #eef2ff; color: #1e3a8a; }
.guia-role--rh { background: #f3eef8; color: #4a2d6e; }
.guia-role--sst { background: #fceeee; color: #7a3834; }

.guia-note {
  font-size: 13px;
  padding: 12px 14px;
  border-radius: 12px;
  line-height: 1.5;
  background: #fffbeb;
  border: 1px solid #ead9b8;
  color: #5c4a12;
}

.guia-flow {
  font-size: 13px;
  padding: 14px;
  border-radius: 12px;
  line-height: 1.55;
  background: #f4faf6;
  border: 1px solid #c5ddd0;
}

.guia-cards {
  display: grid;
  gap: 10px;
}

.guia-card-link {
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border, #d8e2dc);
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 14px rgba(20, 80, 44, 0.04);
}

.guia-card-link strong {
  display: block;
  font-size: 14px;
  color: var(--green-dark);
  margin-bottom: 4px;
}

.guia-card-link span {
  font-size: 13px;
  color: var(--muted, #66756b);
}

.guia-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.guia-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.guia-q-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.guia-q-list li {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #d8e2dc);
  background: #fff;
}

.guia-q-meta {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--green-dark, #14502c);
}

.guia-q-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text, #1d2a22);
}

.guia-section h3 {
  font-size: 14px;
  margin: 16px 0 8px;
  color: var(--green-dark, #14502c);
}
