/* =========================================================================
   ETTNA Representações — componentes da tela Início

   Ficam num arquivo separado e com prefixo `hk-` de propósito: a maquete usa
   nomes genéricos (.card, .kpi, .step) que colidiriam com o que as outras oito
   telas já usam. Aqui nada vaza para fora do dashboard.
   ========================================================================= */

.hk { display: flex; flex-direction: column; gap: 16px; }

/* ------------------------------------------------------------ indicadores */

.hk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.hk-kpi {
  background: var(--surface);
  border-radius: 14px;
  padding: 15px 16px 0;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 6px;
  overflow: hidden;
  text-align: left;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: box-shadow .13s, transform .13s;
}
.hk-kpi:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }

.hk-kpi__h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--text-3); font-weight: 500;
}
.hk-kpi__h svg { width: 15px; height: 15px; color: #a9b5c9; stroke: currentColor; flex: 0 0 15px; }
.hk-kpi__h svg.is-alert { color: var(--red); }

.hk-kpi__n {
  font-size: 29px; font-weight: 600;
  letter-spacing: -.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hk-kpi__n--zero { color: #b6c0d1; }
.hk-kpi__n--alert { color: var(--red); }
.hk-kpi__d { font-size: 11.5px; color: var(--text-3); }

/* a régua embaixo separa "tem coisa aqui" de "está vazio" sem precisar ler */
.hk-kpi__tick { display: block; height: 3px; background: #f1f4f9; margin: 11px -16px 0; }
.hk-kpi__tick--on { background: var(--primary); }
.hk-kpi__tick--alert { background: var(--red); }

/* ----------------------------------------------------------------- cartão */

.hk-card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 17px 18px;
  display: flex; flex-direction: column; gap: 13px;
  min-width: 0;
}
.hk-card__h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.hk-card__h h2 { font-size: 15px; font-weight: 600; letter-spacing: -.022em; }
.hk-note { font-size: 11.5px; color: var(--text-3); }
.hk-chip {
  font-size: 11px; font-weight: 600;
  color: #1b4478; background: var(--primary-lt);
  padding: 3px 9px; border-radius: 99px;
}
.hk-link {
  font-size: 11.5px; color: var(--primary); font-weight: 600;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.hk-link:hover { text-decoration: underline; }

.hk-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 14px; align-items: start;
}
.hk-col-r { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ------------------------------------------------------------ prioridades */

.hk-prio { display: flex; flex-direction: column; }
.hk-pr {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 10px; border-radius: 11px;
  text-align: left; width: 100%;
  border: 0; border-bottom: 1px solid #f1f4f9;
  background: none; font: inherit; color: inherit; cursor: pointer;
  transition: background .13s;
}
.hk-pr:last-child { border-bottom: 0; }
.hk-pr:hover { background: var(--primary-lt); }

.hk-pr__s {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; flex: 0 0 32px;
  font-variant-numeric: tabular-nums;
}
.hk-s-hi { background: var(--red-lt);   color: var(--red); }
.hk-s-md { background: var(--amber-lt); color: var(--amber); }
.hk-s-lo { background: #f1f4f9;         color: var(--text-3); }

.hk-pr__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hk-pr__t b {
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hk-pr__t em { font-size: 11.5px; font-style: normal; color: var(--red); font-weight: 500; }
.hk-pr__t em.is-ok { color: var(--text-3); font-weight: 400; }
.hk-pr__t small { font-size: 11px; color: var(--text-3); }

.hk-pr__r { text-align: right; display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.hk-pr__r b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hk-pr__r span { font-size: 10.5px; color: var(--text-3); }

/* ------------------------------------------------------------------- meta */

.hk-meta-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hk-meta-v {
  font-size: 27px; font-weight: 600; letter-spacing: -.045em;
  display: block; font-variant-numeric: tabular-nums;
}
.hk-meta-v--zero { color: #b6c0d1; }
.hk-meta-s { font-size: 11.5px; color: var(--text-3); }
.hk-meta-pc { text-align: right; }
.hk-meta-pc strong { font-size: 17px; font-weight: 600; display: block; }
.hk-meta-pc strong.is-zero { color: #b6c0d1; }
.hk-meta-pc span { font-size: 10.5px; color: var(--text-3); }
.hk-meta-bar { height: 6px; background: #f1f4f9; border-radius: 99px; overflow: hidden; }
.hk-meta-bar span { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.hk-meta-bar span.is-done { background: var(--green); }
.hk-meta-note { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }

/* --------------------------------------------------------------- timeline */

.hk-tl { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.hk-tl li { display: flex; gap: 11px; position: relative; padding-bottom: 13px; }
.hk-tl li:last-child { padding-bottom: 0; }
.hk-tl li::before {
  content: ""; position: absolute; left: 4px; top: 14px; bottom: 0;
  width: 1.5px; background: var(--border);
}
.hk-tl li:last-child::before { display: none; }
.hk-tl__p {
  width: 9px; height: 9px; border-radius: 50%;
  background: #c9d3e3; margin-top: 4px; flex: 0 0 9px;
  z-index: 1; box-shadow: 0 0 0 3px #fff;
}
.hk-tl__p--new  { background: var(--primary); }
.hk-tl__p--done { background: var(--green); }
.hk-tl li > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hk-tl b { font-size: 12.5px; font-weight: 600; }
.hk-tl em { font-size: 11.5px; font-style: normal; color: var(--text-2); }
.hk-tl time { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }

/* --------------------------------------------------------- mestre-detalhe */

.hk-tabs { display: flex; gap: 3px; background: #f1f4f9; padding: 3px; border-radius: 10px; }
.hk-tab {
  padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--text-3);
  display: flex; gap: 5px; align-items: center;
  border: 0; background: none; font-family: inherit; cursor: pointer;
}
.hk-tab b { opacity: .55; font-variant-numeric: tabular-nums; }
.hk-tab.is-active { background: #fff; color: var(--text); box-shadow: var(--shadow); }

.hk-md {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
.hk-md__list {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 430px; overflow-y: auto; padding-right: 3px;
}

.hk-ci {
  display: flex; align-items: center; gap: 11px;
  padding: 11px; border-radius: 11px;
  text-align: left; width: 100%;
  border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  transition: background .13s;
}
.hk-ci:hover { background: #f1f4f9; }
.hk-ci.is-active { background: var(--navy); color: #fff; }
.hk-ci__av {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--primary-lt); color: #1b4478;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; flex: 0 0 34px;
}
.hk-ci.is-active .hk-ci__av { background: rgba(255, 255, 255, .18); color: #fff; }
.hk-ci__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hk-ci__t b {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hk-ci__t span { font-size: 11px; color: var(--text-3); }
.hk-ci.is-active .hk-ci__t span { color: #a8bcda; }
.hk-ci__d { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.hk-d-red { background: var(--red); }
.hk-d-amb { background: var(--amber); }
.hk-d-gr  { background: var(--green); }

.hk-md__detail {
  background: var(--bg);
  border-radius: 14px; padding: 17px;
  display: flex; flex-direction: column; gap: 15px;
  min-width: 0;
}
.hk-dt__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hk-dt__h h3 { font-size: 18px; font-weight: 600; letter-spacing: -.022em; }
.hk-dt__meta { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.hk-badge {
  background: var(--primary-2); color: #1b4478;
  font-size: 11px; font-weight: 600;
  padding: 5px 11px; border-radius: 99px; white-space: nowrap;
}

.hk-acts { display: flex; gap: 7px; flex-wrap: wrap; }
.hk-act {
  background: #fff; border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 12px; font-size: 12px; font-weight: 500; color: var(--text-2);
  display: flex; align-items: center; gap: 6px;
  font-family: inherit; cursor: pointer;
  transition: border-color .13s, color .13s;
}
.hk-act:hover { border-color: var(--primary); color: var(--primary); }
.hk-act:disabled { opacity: .45; cursor: not-allowed; }
.hk-act:disabled:hover { border-color: var(--border); color: var(--text-2); }
.hk-act svg { width: 14px; height: 14px; stroke: currentColor; flex: 0 0 14px; }

/* régua de etapas */
.hk-step {
  display: flex; align-items: flex-start;
  background: #fff; border-radius: 12px;
  padding: 15px 12px; overflow-x: auto;
}
.hk-st {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  flex: 1; min-width: 78px; position: relative;
  border: 0; background: none; font-family: inherit; cursor: pointer; padding: 0;
}
.hk-st::after {
  content: ""; position: absolute; top: 11px;
  left: calc(50% + 14px); right: calc(-50% + 14px);
  height: 2px; background: var(--border);
}
.hk-st:last-child::after { display: none; }
.hk-st__p {
  width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  background: #fff; border: 2px solid var(--border); color: #c9d3e3;
  z-index: 1;
}
.hk-st.is-done .hk-st__p { background: var(--green); border-color: var(--green); color: #fff; }
.hk-st.is-done::after { background: var(--green); }
.hk-st.is-now .hk-st__p {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 0 0 4px var(--primary-2);
}
.hk-st span { font-size: 11px; color: var(--text-3); text-align: center; font-weight: 500; }
.hk-st.is-now span { color: var(--primary); font-weight: 600; }
.hk-st.is-done span { color: var(--text-2); }
.hk-st:hover .hk-st__p { border-color: var(--primary); }

/* mini indicadores */
.hk-minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.hk-mini {
  background: #fff; border-radius: 11px; padding: 12px 13px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.hk-mini strong {
  font-size: 16px; font-weight: 600; letter-spacing: -.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hk-mini span { font-size: 10.5px; color: var(--text-3); }
.hk-mini--hero { background: var(--navy); }
.hk-mini--hero strong { color: #fff; }
.hk-mini--hero span { color: #93a9cc; }
.hk-mini button {
  font-size: 16px; font-weight: 600; letter-spacing: -.03em;
  color: var(--primary); background: none; border: 0; padding: 0;
  font-family: inherit; cursor: pointer; text-align: left;
}
.hk-mini--hero button { color: #7fb0ff; }

/* próximo passo */
.hk-next {
  background: #fff; border-radius: 12px; padding: 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 13px; flex-wrap: wrap;
  border-left: 3px solid var(--primary);
}
.hk-next--none { border-left-color: var(--red); }
.hk-next__l { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hk-next__i {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--primary-lt); color: var(--primary);
  display: grid; place-items: center; flex: 0 0 34px;
}
.hk-next__i svg { width: 16px; height: 16px; stroke: currentColor; }
.hk-next--none .hk-next__i { background: var(--red-lt); color: var(--red); }
.hk-next__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hk-next__t small {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
.hk-next__t b { font-size: 13.5px; font-weight: 600; }
.hk-next__t span { font-size: 11.5px; color: var(--text-3); }
.hk-next__a { display: flex; gap: 7px; }

.hk-btn {
  border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 500;
  color: var(--text-2); background: #fff;
  font-family: inherit; cursor: pointer;
}
.hk-btn:hover { border-color: var(--text-2); }
.hk-btn--primary {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}
.hk-btn--primary:hover { background: var(--primary-dk); border-color: var(--primary-dk); }

.hk-hist h4 { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }

/* ------------------------------------------------------------------ funil */

.hk-fn { display: flex; flex-direction: column; gap: 7px; }
.hk-fn__r { display: grid; grid-template-columns: 104px 1fr 30px; align-items: center; gap: 12px; }
.hk-fn__r > span { font-size: 12px; color: var(--text-3); font-weight: 500; }
.hk-fn__b { height: 22px; background: #f1f4f9; border-radius: 6px; overflow: hidden; }
.hk-fn__b i { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
.hk-fn__r > b { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.hk-fn__r > b.is-zero { color: #c9d3e3; }
.hk-fn__alert {
  font-size: 11.5px; color: var(--amber); background: var(--amber-lt);
  border-radius: 9px; padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
}
.hk-fn__alert svg { width: 14px; height: 14px; stroke: currentColor; flex: 0 0 14px; }

.hk-empty {
  text-align: center; padding: 26px 16px;
  color: var(--text-3); font-size: 12.5px; line-height: 1.6;
}

/* ------------------------------------------------------------ responsivo */

@media (max-width: 1180px) {
  .hk-cols { grid-template-columns: 1fr; }
  .hk-md { grid-template-columns: 1fr; }
  .hk-md__list { max-height: none; }
}
@media (max-width: 820px) {
  .hk-kpis, .hk-minis { grid-template-columns: 1fr 1fr; }
}