/* ============================================================
   APP STAGE COMPONENT
   Componente genérico reutilizável para fluxos
   ============================================================ */

/* ============================================================
   BASE
   ============================================================ */

.app-stage {
  position: sticky;
  top: 0; /* offsets acumulados ajustaremos depois */
  z-index: 50;

  background: var(--branco);
  padding: 10px 15px;   /* mais generoso que event-row */

  border: 1px solid var(--border-light);
  border-radius: 8px;

  box-shadow: none;     /* remove sombra fixa */
}

/* Garante altura previsível */
.app-stage__inner {
  display: flex;
  align-items: center;
  min-height: 70px;
}


/* ============================================================
   STRUCTURE
   ============================================================ */

.app-stage__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
  text-align: center;
}

.app-stage__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cinza-light);
  margin-bottom: 8px;
  transition: background 0.2s ease;
}

.app-stage__label {
  font-size: 0.85rem;
  margin-top: 0px;
  color: var(--azul-slate600);
}

/* Linha conectora neutra */
.app-stage__connector {
  flex: 1;
  height: 2px;
  background: var(--border-light);
}


/* ============================================================
   STATES
   ============================================================ */

/* Concluído */
.app-stage__step.completed .app-stage__dot {
  background: var(--verde-sucesso);
}

.app-stage__step.completed .app-stage__label {
  color: var(--azul-slate900);
}

/* Atual */
.app-stage__step.active .app-stage__dot {
  background: var(--azul-slate900);
}

.app-stage__step.active .app-stage__label {
  font-weight: 600;
  color: var(--azul-slate900);
}

/* Futuro */
.app-stage__step.future .app-stage__dot {
  background: var(--cinza-light);
}

/* Warning (catch-up) */
.app-stage__step.warning .app-stage__dot {
  background: var(--amarelo-alerta-500);
}

/* Error (somente erros) */
.app-stage__step.error .app-stage__dot {
  background: var(--vermelho-erro);
}

/* Paused */
.app-stage__step.paused .app-stage__dot {
  background: var(--laranja-pausado);
}

/* ============================================================
   STAGE CONTENT ALIGNMENTS — 4 STAGES (41-44)
   ============================================================ */

/* Base */
.stage-content {
  margin-top: 15px;
  max-width: 950x;
}

/* 41 → alinhado à primeira bolinha */
.stage-content-41 {
  padding-left: 30px;
  padding-right: 28px;
}

/* 42 → segunda bolinha */
.stage-content-42 {
  padding-left: 260px;  
  padding-right: 28px;
}

/* 43 → terceira bolinha */
.stage-content-43 {
  padding-left: 500px;  
  padding-right: 28px;
}

/* 44 → quarta bolinha */
.stage-content-44 {
  padding-left: 700px;
  padding-right: 28px;
}

/* INDICADORES */

.stage-indicators {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;                /* praticamente colado */
  margin-bottom: 12px;     /* menos espaço antes das infos */
}

.indicator-item {
  font-size: 0.8rem;       /* menor ainda */
  color: var(--azul-slate900);
}

.indicator-item strong {
  font-weight: 700;
}

/* INFORMAÇÕES */

.stage-info {
  display: flex;
  flex-direction: column;
  gap: 2px;                /* compacto igual indicadores */
  margin-bottom: 10px;     /* pequeno espaço antes de ações */
}

.info-line {
  font-size: 0.7rem;
  color: var(--azul-slate700);
}

.info-message {
  margin-top: 10px;
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--azul-slate900);
}
.info-message-link {
  margin-top: 10px;
  text-decoration: underline;
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--azul-slate900);
   cursor: pointer;
}
.info-message-link a {
  font-size: 0.7rem;

}

.info-message-link:hover {
  text-decoration: none;
}
/* ============================================================
   EXECUTION SUMMARY (genérico)
   ============================================================ */

.stage-actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stage-action-link {
    font-size: 0.9rem;
    color: var(--azul-slate700);
    text-decoration: none !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.stage-action-link:hover {
    color: var(--azul-slate900);
}

.stage-action-form {
    display: inline;
    font-size: 0.9rem;
    margin: 0;
}

.stage-action-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size:0.9rem;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.execution-summary {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.summary-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.summary-number {
  font-weight: 700;
  font-size: 1rem;
  color: var(--azul-slate900);
}

.summary-label {
  font-size: 1rem;
  color: var(--azul-slate700);
}


/* ============================================================
   ACTION PANEL (genérico)
   ============================================================ */

.action-panel {
  margin-top: 24px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 12px;
}


/* ============================================================
   STICKY STACK (ajustes futuros)
   ============================================================ */

/* Placeholder para ajuste fino de offsets acumulados
   quando topbar, actions e title também estiverem sticky */