/* Documentos vencidos na ficha da EOP. A urgência, o responsável e a decisão
   ocupam sempre os mesmos lugares para a lista poder ser percorrida de relance. */

.eopOverdueDocuments { padding: 0; overflow: hidden; }

.eopOverdueHead {
  margin: 0;
  padding: 17px 18px;
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.eopOverdueHead h2 { margin: 3px 0 2px; }
.eopOverdueHead p { margin: 0; color: var(--muted); font-size: var(--txt-xs); }

.eopOverdueCount {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--vermelho) 12%, var(--panel));
  color: var(--vermelho);
  font-size: var(--txt-sm);
  font-weight: 780;
}

.eopOverdueList { display: grid; }

.eopOverdueRow {
  min-width: 0;
  min-height: 76px;
  padding: 13px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 var(--vermelho);
}

.eopOverdueRow:last-child { border-bottom: 0; }
.eopOverdueMain { min-width: 0; }
.eopOverdueMain h3 { margin: 0; color: var(--ink); font-size: var(--txt-md); overflow-wrap: anywhere; }
.eopOverdueMain p { margin: 3px 0 0; color: var(--muted); font-size: var(--txt-xs); }

.eopOverdueTiming { display: grid; justify-items: end; gap: 2px; text-align: right; }
.eopOverdueTiming strong { color: var(--vermelho); font-size: var(--txt-sm); }
.eopOverdueTiming small { color: var(--muted); font-size: var(--txt-xs); }

.eopOverdueBadge {
  margin-top: 6px;
  padding: 2px 7px;
  display: inline-flex;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--vermelho) 10%, var(--panel));
  color: var(--vermelho);
  font-size: var(--txt-xs);
  font-weight: 700;
}

.eopOverdueIgnore { white-space: nowrap; }

@media (max-width: 620px) {
  .eopOverdueHead { align-items: flex-start; padding: 15px 14px; }

  .eopOverdueRow {
    padding: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px 12px;
  }

  .eopOverdueMain { grid-column: 1; grid-row: 1; }
  .eopOverdueTiming { grid-column: 2; grid-row: 1; }
  .eopOverdueIgnore { grid-column: 1 / -1; justify-self: start; }
}