/* alertas-pedido.css — estilos do painel de alertas pos-pedido */
/* --- Separador entre necHeader e alertas --- */

/* --- Wrapper geral --- */
.alertas-wrapper {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  overflow: hidden;
  margin: 6px 0;
}

/* --- Header geral --- */
.alertas-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: #F8FAFC;
  cursor: pointer;
  user-select: none;
}

.alertas-header:hover {
  background: #F1F5F9;
}

.alertas-titulo {
  font-weight: 700;
  font-size: 13px;
  color: #334155;
}

.alertas-badge {
  background: #FBBF24;
  color: #78350F;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
}

.alertas-badge-sm {
  font-size: 10px;
  padding: 1px 5px;
}

.alertas-modelos-badge {
  font-size: 11px;
  color: #64748B;
  font-weight: 500;
}

.alertas-resumo {
  font-size: 11px;
  color: #64748B;
  flex: 1;
}

.alertas-resumo-sm {
  font-size: 11px;
  color: #64748B;
  flex: 1;
}

.alertas-seta {
  font-size: 10px;
  color: #94A3B8;
  margin-left: auto;
}

.alertas-seta::after {
  content: '\25BC';
}

.alertas-wrapper.alertas-aberto > .alertas-header .alertas-seta::after {
  content: '\25B2';
}

/* --- Corpo geral --- */
.alertas-corpo {
  display: none;
  padding: 4px 8px 8px;
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
}

.alertas-wrapper.alertas-aberto > .alertas-corpo {
  display: block;
}

/* --- Wrapper por modelo --- */
.alertas-modelo-wrapper {
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  margin: 6px 0;
  overflow: hidden;
}

.alertas-modelo-wrapper.alertas-modelo-critico {
  border-color: #FECACA;
}

/* --- Header do modelo --- */
.alertas-modelo-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  background: #F8FAFC;
  cursor: pointer;
  user-select: none;
}

.alertas-modelo-wrapper.alertas-modelo-critico > .alertas-modelo-header {
  background: #FEF2F2;
}

.alertas-modelo-header:hover {
  background: #F1F5F9;
}

.alertas-modelo-ref {
  font-weight: 700;
  font-size: 12px;
  color: #1E293B;
}

.alertas-critico-tag {
  font-size: 10px;
  font-weight: 700;
  color: #991B1B;
  background: #FEE2E2;
  border: 1px solid #FECACA;
  border-radius: 4px;
  padding: 1px 5px;
  text-transform: uppercase;
}

/* --- Corpo do modelo --- */
.alertas-modelo-corpo {
  display: none;
  padding: 4px 8px 6px;
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
}

.alertas-modelo-wrapper.alertas-modelo-aberto > .alertas-modelo-corpo {
  display: block;
}

.alertas-modelo-wrapper.alertas-modelo-aberto > .alertas-modelo-header .alertas-seta::after {
  content: '\25B2';
}

/* --- Badge extra pequeno (nivel cor) --- */
.alertas-badge-xs {
  background: #FBBF24;
  color: #78350F;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 5px;
}

/* --- Wrapper por cor --- */
.alertas-cor-wrapper {
  border: 1px solid #F1F5F9;
  border-radius: 5px;
  margin: 4px 0;
  overflow: hidden;
}

.alertas-cor-wrapper.alertas-cor-critica {
  border-color: #FECACA;
}

/* --- Header da cor --- */
.alertas-cor-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #F8FAFC;
  cursor: pointer;
  user-select: none;
}

.alertas-cor-wrapper.alertas-cor-critica > .alertas-cor-header {
  background: #FEF2F2;
}

.alertas-cor-header:hover {
  background: #F1F5F9;
}

.alertas-cor-nome {
  font-weight: 600;
  font-size: 12px;
  color: #1E293B;
}

/* --- Corpo da cor --- */
.alertas-cor-corpo {
  display: none;
  padding: 4px 8px 6px;
  background: #FFFFFF;
  border-top: 1px solid #F1F5F9;
}

.alertas-cor-wrapper.alertas-cor-aberta > .alertas-cor-corpo {
  display: block;
}

.alertas-cor-wrapper.alertas-cor-aberta > .alertas-cor-header .alertas-seta::after {
  content: '\25B2';
}

/* --- Alert-box compacto dentro do painel de alertas --- */
.alertas-cor-corpo .alert-box {
  padding: 3px 8px;
  margin-bottom: 3px;
  font-size: 12px;
}

.alertas-cor-corpo .alert-box:last-child {
  margin-bottom: 0;
}

.alerta-divisor {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 6px 0 5px;
}

/* --- Container dos alertas da cor --- */
.alerta-cor-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 0 4px;
}

/* --- Linha de decisao (ruptura, zerado, preco) --- */
.alerta-cor-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* --- Separador entre decisao e logs --- */
.alerta-separador {
  border: none;
  border-top: 1px dashed #e2e8f0;
  margin: 2px 0;
}

/* --- Linha de logs (sazonal, aceleracao, etc) --- */
.alerta-cor-linha-log {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* --- Pill de decisao --- */
.alerta-pill-decisao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FEF9C3;
  border: 1px solid #FDE047;
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 600;
  color: #713F12;
  white-space: nowrap;
}

/* --- Pill generica (logs) --- */
.alerta-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 5px;
  padding: 1px 7px;
}

.alerta-pill-tam {
  font-weight: 800;
  font-size: 12px;
}

.alerta-pill-log {
  font-weight: 700;
  font-size: 12px;
}

/* --- Pill de log com cor por tipo --- */
.alerta-pill-log-tipo {
  border-width: 1px;
  border-style: solid;
  font-size: 12px;
}