/* indicadores.css — estilos do ecrã de Indicadores (redesign PRIME).
   Constrói sobre prime-tokens.css. */

/* ── Tags genéricas ─────────────────────────────────────────────────────────── */
.i-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--g-500, #6E7178);
  font-family: var(--f-ui, 'Poppins', sans-serif); white-space: nowrap;
}
.i-tag-auto { color: var(--g-400, #9A9CA3); }
.i-dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--verde, #1E9E57); flex: 0 0 auto;
}

/* ── Label KPI (eyebrow uppercase) ─────────────────────────────────────────── */
.kpi-lbl {
  font-family: var(--f-ui, 'Poppins', sans-serif);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--g-500, #6E7178);
}

/* ── Grelhas de secção ──────────────────────────────────────────────────────── */
.i-grid-kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.55fr;
  gap: 16px;
  margin-bottom: 8px;
}
.i-grid-mid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 16px;
  margin-bottom: 8px;
}
.i-grid-az {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.i-pad { padding: 22px 24px; }

/* ── Card KPI ───────────────────────────────────────────────────────────────── */
.i-kpi { padding: 20px 22px; display: flex; flex-direction: column; }
.i-kpi-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 10px;
}
.i-kpi-mid {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 10px;
  margin-top: 8px;
}
.kpi-val-lg {
  font-family: var(--f-ui, 'Poppins', sans-serif);
  font-size: 42px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
}
.kpi-sub-sm {
  font-size: 13px; color: var(--g-500, #6E7178); margin-top: 4px;
  font-family: var(--f-data, 'Open Sans', sans-serif);
}
.kpi-bar {
  height: 6px; background: var(--g-100, #EFF0F3);
  border-radius: 99px; overflow: hidden; margin-top: 14px;
}
.kpi-bar > span {
  display: block; height: 100%; border-radius: 99px; transition: width .4s;
}
.i-kpi-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--g-100, #EFF0F3);
  font-size: 12px; color: var(--g-500, #6E7178);
  font-family: var(--f-data, 'Open Sans', sans-serif);
}
.i-ok {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--verde, #1E9E57);
  font-family: var(--f-ui, 'Poppins', sans-serif);
}
.i-util-foot {
  font-size: 11.5px; color: var(--g-400, #9A9CA3);
  font-family: var(--f-data, 'Open Sans', sans-serif);
  margin-top: 8px;
}

/* ── Attention strip ────────────────────────────────────────────────────────── */
.i-attn { padding: 20px 22px; margin-bottom: 8px; }
.i-attn-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-ui, 'Poppins', sans-serif);
  font-weight: 600; font-size: 14.5px;
  color: var(--g-900, #1A1C20); margin-bottom: 16px;
}
.i-attn-pulse {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-grid; place-items: center; flex-shrink: 0;
  background: var(--red-soft, #FCE9EA); color: var(--red, #D81F2A);
}
.i-attn-sub {
  margin-left: auto; font-size: 12px; font-weight: 500;
  color: var(--g-400, #9A9CA3);
  font-family: var(--f-data, 'Open Sans', sans-serif);
}
.i-attn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1400px) {
  .i-attn-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .i-attn-grid { grid-template-columns: repeat(2, 1fr); }
}
.i-attn-item {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 15px; border-radius: var(--r-md, 12px);
  border: 1px solid var(--g-200, #E5E6EA);
  background: var(--bg-card, #fff); cursor: pointer;
  text-align: left; font-family: var(--f-ui, 'Poppins', sans-serif);
  position: relative;
  transition: border-color .12s, box-shadow .12s, transform .12s;
  width: 100%; box-sizing: border-box;
}
.i-attn-item::before {
  content: ''; position: absolute; left: 0;
  top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0;
}
.i-attn-item:hover {
  border-color: var(--g-300, #C9CBD1);
  box-shadow: var(--sh-2); transform: translateY(-1px);
}
.i-attn-ic {
  width: 36px; height: 36px; border-radius: 9px;
  display: inline-grid; place-items: center; flex: 0 0 auto;
}
.i-attn-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.i-attn-n {
  font-family: var(--f-ui, 'Poppins', sans-serif); font-weight: 700;
  font-size: 22px; line-height: 1.05; color: var(--g-900, #1A1C20);
  letter-spacing: -0.01em;
}
.i-attn-u { font-size: 13px; font-weight: 600; color: var(--g-400, #9A9CA3); }
.i-attn-t {
  font-size: 11.5px; color: var(--g-500, #6E7178);
  margin-top: 2px; line-height: 1.3;
}
.i-attn-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--g-400, #9A9CA3);
  white-space: nowrap; opacity: 0; transition: opacity .12s; flex: 0 0 auto;
}
.i-attn-item:hover .i-attn-cta { opacity: 1; }

/* Tones */
.tone-red::before  { background: var(--red, #D81F2A); }
.tone-red .i-attn-ic  { background: var(--red-soft, #FCE9EA); color: var(--red, #D81F2A); }
.tone-red:hover .i-attn-cta { color: var(--red, #D81F2A); }
.tone-amber::before { background: var(--amber, #E8920C); }
.tone-amber .i-attn-ic { background: var(--amber-soft, #FCF0DC); color: #9a6207; }
.tone-amber:hover .i-attn-cta { color: #9a6207; }
.tone-blue::before  { background: var(--blue, #2563C9); }
.tone-blue .i-attn-ic  { background: #E6EEFB; color: var(--blue, #2563C9); }
.tone-blue:hover .i-attn-cta { color: var(--blue, #2563C9); }

/* ── Segmented control ──────────────────────────────────────────────────────── */
.i-seg {
  display: inline-flex; gap: 3px;
  background: var(--g-100, #EFF0F3); border-radius: 9px; padding: 3px;
}
.i-seg-btn {
  height: 30px; padding: 0 14px; border: none; background: transparent;
  cursor: pointer; font-family: var(--f-ui, 'Poppins', sans-serif);
  font-size: 12.5px; font-weight: 600; color: var(--g-500, #6E7178);
  border-radius: 7px; transition: background .12s, box-shadow .12s;
}
.i-seg-btn.on {
  background: var(--bg-card, #fff); color: var(--g-900, #1A1C20);
  box-shadow: var(--sh-1);
}

/* ── Chart head ─────────────────────────────────────────────────────────────── */
.i-chart-head {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 14px; margin-bottom: 20px;
}
.i-chart-sub {
  font-size: 12px; color: var(--g-400, #9A9CA3);
  font-family: var(--f-data, 'Open Sans', sans-serif); margin-top: 5px;
}
.i-chart-legend {
  display: flex; align-items: center; gap: 18px;
  margin-top: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--g-500, #6E7178); font-weight: 500;
  font-family: var(--f-data, 'Open Sans', sans-serif);
}
.i-chart-legend-item {
  display: inline-flex; align-items: center; gap: 7px;
}
.i-chart-legend-dot {
  width: 9px; height: 9px; border-radius: 99px; flex-shrink: 0;
}
.i-chart-legend-dash {
  width: 16px; height: 0; flex-shrink: 0;
}

/* ── Azure DevOps cards ─────────────────────────────────────────────────────── */
.i-az { padding: 16px 18px; display: flex; flex-direction: column; min-height: 132px; }
.i-az-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 6px; margin-bottom: 4px;
}
.i-az .kpi-val-lg { line-height: 1.1; margin-top: 2px; font-size: 38px; }
.i-az-tools { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.i-az:hover .i-az-tools { opacity: 1; }
.i-az-btn {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--g-200, #E5E6EA);
  background: var(--bg-card, #fff); color: var(--g-400, #9A9CA3);
  cursor: pointer; display: inline-grid; place-items: center;
}
.i-az-btn:hover { color: var(--g-700, #474747); border-color: var(--g-300); }
.i-az-btn.x-btn:hover {
  color: var(--red, #D81F2A); border-color: var(--red, #D81F2A);
  background: var(--red-soft, #FCE9EA);
}
.i-az-spark { margin-top: auto; padding-top: 8px; }
.i-az-meta { margin-top: auto; padding-top: 10px; }
.i-az-meta-row {
  display: flex; justify-content: space-between;
  font-size: 11.5px; font-weight: 600; color: var(--g-500, #6E7178);
  font-family: var(--f-data, 'Open Sans', sans-serif);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .i-grid-kpi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .i-grid-kpi { grid-template-columns: 1fr; }
  .i-grid-mid { grid-template-columns: 1fr; }
  .i-grid-az  { grid-template-columns: repeat(3, 1fr); }
  .i-attn-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Painel de Ausências próximas (mini Gantt −7d → +15d) ─────────────────── */
.i-aus { padding: 18px 20px; display: flex; flex-direction: column; }
.i-aus-now {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; font-family: var(--f-ui, 'Poppins', sans-serif);
  color: var(--red, #D81F2A); background: var(--red-soft, #FCE9EA);
  padding: 4px 10px; border-radius: 99px;
}
.i-aus-grid {
  display: grid; grid-template-columns: 132px 1fr;
  column-gap: 12px; row-gap: 5px; margin-top: 14px; align-items: center;
}
.i-aus-spacer { }
.i-aus-track {
  position: relative; display: grid;
  grid-auto-flow: column; grid-auto-columns: 1fr; height: 26px;
}
.i-aus-header { height: 30px; }
.i-aus-day {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; border-radius: 5px;
}
.i-aus-day.wkend,  .i-aus-cell.wkend  { background: var(--g-100, #EFF0F3); }
.i-aus-day.feriado, .i-aus-cell.feriado { background: #F3EEE3; }   /* cinzento quente: distingue-se do fim de semana */
.i-aus-legend i.i-aus-leg-wkend { background: var(--g-100, #EFF0F3); border: 1px solid var(--g-200, #E1E3E8); }
.i-aus-legend i.i-aus-leg-fer   { background: #F3EEE3; border: 1px solid #E6DCC8; }
[data-tema="escuro"] .i-aus-day.wkend,   [data-tema="escuro"] .i-aus-cell.wkend,   [data-tema="escuro"] .i-aus-legend i.i-aus-leg-wkend { background: rgba(255,255,255,.06); border-color: transparent; }
[data-tema="escuro"] .i-aus-day.feriado, [data-tema="escuro"] .i-aus-cell.feriado, [data-tema="escuro"] .i-aus-legend i.i-aus-leg-fer   { background: rgba(232,146,12,.12); border-color: transparent; }
.i-aus-day.hoje   { background: var(--red-soft, #FCE9EA); }
.i-aus-dow { font-size: 8.5px; font-weight: 700; color: var(--g-300, #C9CBD1); letter-spacing: .02em; }
.i-aus-dom { font-size: 11px; font-weight: 600; color: var(--g-500, #6E7178); font-family: var(--f-data, 'Open Sans', sans-serif); }
.i-aus-day.hoje .i-aus-dom, .i-aus-day.hoje .i-aus-dow { color: var(--red, #D81F2A); }
.i-aus-cell { border-right: 1px solid var(--g-100, #EFF0F3); height: 100%; }
.i-aus-cell.hoje   { background: var(--red-soft, #FCE9EA); }
.i-aus-cell:first-child { border-left: 1px solid var(--g-100, #EFF0F3); }
.i-aus-name {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 500; color: var(--g-900, #1A1C20);
  font-family: var(--f-ui, 'Poppins', sans-serif); white-space: nowrap; overflow: hidden;
}
.i-aus-name span { overflow: hidden; text-overflow: ellipsis; }
.i-aus-bar {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 19px; display: flex; align-items: center; padding: 0 8px;
  color: #fff; font-size: 10.5px; font-weight: 600;
  font-family: var(--f-ui, 'Poppins', sans-serif);
  white-space: nowrap; overflow: hidden; box-shadow: var(--sh-1);
}
/* Dia parcial (ex: 2h de amamentação): barra baixa, fundo claro e contorno na cor da
   categoria, com as horas escritas — nunca se confunde com um dia inteiro. */
.i-aus-bar.parcial {
  height: 13px; box-shadow: none; font-size: 9.5px; padding: 0 5px;
  border: 1.5px dashed currentColor;
}
.i-aus-legend i.parcial { height: 7px; border: 1.5px dashed; background: none !important; }
/* Aniversário é um único dia: a barra fica quadrada e centra o emoji, em vez de mostrar
   uma duração como as barras de ausência. */
.i-ani-bar {
  border-radius: 6px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
}

.i-aus-legend {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--g-100, #EFF0F3);
}
.i-aus-legend span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--g-500, #6E7178); font-weight: 500;
  font-family: var(--f-ui, 'Poppins', sans-serif);
}
.i-aus-legend i { width: 11px; height: 11px; border-radius: 3px; }
.i-aus-todayleg i.line { width: 0; height: 13px; border-radius: 0; border-left: 2px solid var(--red, #D81F2A); background: none; }

.i-leg-toggle { cursor: pointer; user-select: none; transition: opacity .15s; }