/* ========================================================================
   CHRONOS | AVALIAÇÃO DE FORNECEDOR
   Arquivo organizado por "módulos" para você reaproveitar em outros forms.
   - MÓDULO A: Variáveis (design tokens)
   - MÓDULO B: Ícones/estrelas (grid/lista)
   - MÓDULO C: Textos auxiliares (descrições)
   - MÓDULO D: Badges de TÍTULO (Qualidade/Doc/Prazo/Flexibilidade)
   - MÓDULO E: Header compacto (bloco superior: campos + legenda + resultado)
   - MÓDULO F: Legenda (Boa/Regular/Ruim)
   - MÓDULO G: Resultado final (pill da classificação)
   - MÓDULO H: Badge INLINE (listagens/datagrid) + paleta suave
   - MÓDULO I: Responsivo
   ======================================================================== */

/* ========================================================================
   MÓDULO A — VARIÁVEIS GLOBAIS (design tokens)
   Use aqui para mudar “o tema” do componente todo sem caçar valores.
   ======================================================================== */
:root{
  --box-border:#E6E8EC;
  --box-bg:#ffffff;
  --box-radius:10px;
  --box-shadow:0 6px 12px rgba(0,0,0,.06);
  --box-padding-y:12px;
  --box-padding-x:18px;
  --box-height:98px;

  /* Paleta suave (reutilizada no inline e no pill) */
  --ok-bg:#ECFDF3;
  --ok-fg:#027A48;
  --ok-bd:#ABEFC6;

  --mid-bg:#FFFAEB;
  --mid-fg:#B54708;
  --mid-bd:#FEDF89;

  --bad-bg:#FEF3F2;
  --bad-fg:#B42318;
  --bad-bd:#FECDCA;

  --nd-bg:#F8FAFC;
  --nd-fg:#667085;
  --nd-bd:#E4E7EC;
}

/* ========================================================================
   MÓDULO B — ESTRELA / STATUS NA LISTA (GRID / LISTA)
   Usado em datagrids quando você mostra ícone de avaliado/não avaliado.
   ======================================================================== */
.avaliacao-indisponivel{
  color:#D1D5DB !important;
  opacity:0.8;
  cursor:not-allowed;
}

/* Pulsar (se você quiser destacar “não avaliado”) */
@keyframes pulse-red{
  0%   { transform:scale(1);    opacity:.9; }
  50%  { transform:scale(1.25); opacity:.5; }
  100% { transform:scale(1);    opacity:.9; }
}

/* Obs: você tinha duas definições de .avaliacao-nao-avaliada.
   Aqui fica a versão neutra (suave). Se quiser pulsar, descomente. */
.avaliacao-nao-avaliada{
  color:#9CA3AF !important;
  opacity:.95;
  /* animation:pulse-red 1.2s infinite ease-in-out; */
}

.avaliacao-avaliada{
  color:#4CAF50 !important;
}

/* ========================================================================
   MÓDULO C — TEXTO DESCRITIVO DOS CRITÉRIOS
   Usado abaixo dos títulos de Qualidade/Doc/Prazo/Flex.
   ======================================================================== */
.criterio-descricao{
  display:block;
  margin-top:6px;
  font-size:12px;
  line-height:1.45;
  color:#667085;
}

/* ========================================================================
   MÓDULO D — BADGES DE TÍTULO (no cabeçalho das tabelas)
   Ex.: “Qualidade”, “Documentação”, etc.
   ======================================================================== */
.badge_aval-avaliacao-fornecedor{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;

  font-size:12px;
  font-weight:700;

  border-radius:6px;
  border:1px solid transparent !important;

  background:#f8f9fa !important;
  color:#333 !important;

  cursor:default;
}

.badge_aval-avaliacao-fornecedor i{
  font-size:13px;
}

/* Cores por tipo (mantendo !important por causa do tema do Adianti) */
.badge_aval-qualidade{
  background:#FEF3C7 !important;
  color:#92400E !important;
  border-color:#F59E0B !important;
}

.badge_aval-documentacao{
  background:#EDE9FE !important;
  color:#5B21B6 !important;
  border-color:#8B5CF6 !important;
}

.badge_aval-prazo{
  background:#E0F2FE !important;
  color:#075985 !important;
  border-color:#0EA5E9 !important;
}

.badge_aval-flexibilidade{
  background:#DCFCE7 !important;
  color:#166534 !important;
  border-color:#22C55E !important;
}

.badge_aval-avaliacao-fornecedor:hover{
  filter:brightness(0.97) !important;
}

/* ========================================================================
   MÓDULO E — HEADER (sem box externo)
   Container topo com:
   - bloco esquerdo (campos)
   - bloco direito (legenda + resultado)
   ======================================================================== */
.avaliacao-header{
  width:100%;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:16px;

  white-space:nowrap;

  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* ------------------------------------------------------------------------
   MÓDULO E.1 — BLOCO ESQUERDO (Comprador / Data / OC / Fornecedor / Nota)
   ------------------------------------------------------------------------ */
.avaliacao-campos{
  height:var(--box-height);
  display:flex;
  align-items:center;
  gap:22px;

  padding:var(--box-padding-y) var(--box-padding-x);

  background:var(--box-bg);
  border:1px solid var(--box-border);
  border-radius:var(--box-radius);
  box-shadow:var(--box-shadow);

  flex:1 1 auto;
  min-width:0;
}

.campo{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:140px;
}

/* Campo fornecedor “flexível” (pode ajustar min-width no HTML se precisar) */
.campo.fornecedor{
  flex:1 1 auto;
  min-width:260px;
}

.campo .lbl{
  font-size:13px;
  font-weight:700;
  color:#344054;
}

.campo .val{
  display:flex;
  align-items:center;

  height:40px;
  padding:0 14px;

  background:#fff;
  border:1px solid #E6EAF0;
  border-radius:12px;

  font-size:13px;
  color:#344054;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(16,24,40,.05);

  min-width:0;
}

/* ------------------------------------------------------------------------
   MÓDULO E.2 — BLOCO DIREITO (Legenda + Resultado)
   ------------------------------------------------------------------------ */
.avaliacao-right{
  display:flex;
  align-items:stretch;
  gap:14px;
}

/* ========================================================================
   MÓDULO F — LEGENDA (Boa / Regular / Ruim)
   ======================================================================== */
.avaliacao-legenda-card{
  height:var(--box-height);

  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-content:center;
  gap:12px;

  padding:var(--box-padding-y) var(--box-padding-x);

  background:var(--box-bg);
  border:1px solid var(--box-border);
  border-radius:var(--box-radius);
  box-shadow:var(--box-shadow);

  width:320px;
}

.avaliacao-legenda-col{
  text-align:center;
}

.avaliacao-legenda-col .titulo{
  font-size:12px;
  font-weight:700;
  color:#344054;
  margin-bottom:6px;
}

/* Badge simples dentro da legenda */
.badge_aval{
  display:inline-block;
  padding:8px 12px;
  min-width:74px;

  border-radius:10px;
  border:1px solid rgba(0,0,0,.08);

  font-size:12px;
  font-weight:700;
  line-height:1;
}

/* Legend badges (você pode manter mais forte ou alinhar com a paleta suave) */
.badge_aval.boa{
  background:var(--ok-bg) !important;
  color:var(--ok-fg) !important;
  border-color:var(--ok-bd) !important;
}
.badge_aval.regular{
  background:var(--mid-bg) !important;
  color:var(--mid-fg) !important;
  border-color:var(--mid-bd) !important;
}
.badge_aval.ruim{
  background:var(--bad-bg) !important;
  color:var(--bad-fg) !important;
  border-color:var(--bad-bd) !important;
}

/* ========================================================================
   MÓDULO G — RESULTADO FINAL (pill da classificação)
   IMPORTANTE:
   Seu HTML atual usa: class="avaliacao-resultado-pill '.$classe_css.'"
   então as classes esperadas são: .boa | .regular | .ruim
   ======================================================================== */
.avaliacao-resultado-pill{
  height:var(--box-height);

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:var(--box-padding-y) var(--box-padding-x);

  background:var(--box-bg);
  border-radius:var(--box-radius);

  border:2px solid #EAECF0;
  box-shadow:var(--box-shadow);

  width:150px;

  font-size:16px;
  font-weight:800;
  white-space:nowrap;
}

.avaliacao-resultado-pill .icone{
  width:26px;
  height:26px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  font-size:14px;
}

/* Pill — BOA (suave) */
.avaliacao-resultado-pill.boa{
  border-color:var(--ok-bd) !important;
  color:var(--ok-fg) !important;
}
.avaliacao-resultado-pill.boa .icone{
  background:var(--ok-bg) !important;
  color:var(--ok-fg) !important;
}

/* Pill — REGULAR (suave) */
.avaliacao-resultado-pill.regular{
  border-color:var(--mid-bd) !important;
  color:var(--mid-fg) !important;
}
.avaliacao-resultado-pill.regular .icone{
  background:var(--mid-bg) !important;
  color:var(--mid-fg) !important;
}

/* Pill — RUIM (suave) */
.avaliacao-resultado-pill.ruim{
  border-color:var(--bad-bd) !important;
  color:var(--bad-fg) !important;
}
.avaliacao-resultado-pill.ruim .icone{
  background:var(--bad-bg) !important;
  color:var(--bad-fg) !important;
}

/* Pill — N/D (quando você usar classificacao-nd) */
.avaliacao-resultado-pill.classificacao-nd{
  border-color:var(--nd-bd) !important;
  color:var(--nd-fg) !important;
}
.avaliacao-resultado-pill.classificacao-nd .icone{
  background:var(--nd-bg) !important;
  color:var(--nd-fg) !important;
}
.avaliacao-resultado-pill.classificacao-nd .icone::before{
  content:"\f056"; /* fa-minus-circle */
  font-family:"Font Awesome 5 Free";
  font-weight:900;
}

/* Ajuste de alinhamento quando o pill fica dentro de coluna */
.avaliacao-legenda-col .avaliacao-resultado-pill{
  margin-top:0px;
}

/* ========================================================================
   MÓDULO H — BADGE INLINE (DATAGRID / LISTAGENS)
   Esse é o badge do seu transformation:
   <span class="badge-avaliacao badge-boa|badge-regular|badge-ruim|badge-nd">
   ======================================================================== */
.forn-avaliacao-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1.2;
}
.forn-avaliacao-inline .forn-nome{
  font-size:13px;
  font-weight:500;
  color:#111827;
}

/* Badge base — versão suave e “corporate” */
.badge-avaliacao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    /* letter-spacing: .03em; */
    border: 1px solid transparent;
    background: #F9FAFB;
    color: #475467;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}


.badge-avaliacao i{
  font-size:11px;
  opacity:.9;
}

/* Hover — bem discreto */
.badge-avaliacao:hover{
  filter:brightness(0.98);
  transform:none;
}

/* INLINE — BOA */
.badge-avaliacao.badge-boa{
  background:var(--ok-bg);
  color:var(--ok-fg);
  border-color:var(--ok-bd);
}

/* INLINE — REGULAR */
.badge-avaliacao.badge-regular{
  background:var(--mid-bg);
  color:var(--mid-fg);
  border-color:var(--mid-bd);
}

/* INLINE — RUIM */
.badge-avaliacao.badge-ruim{
  background:var(--bad-bg);
  color:var(--bad-fg);
  border-color:var(--bad-bd);
}

/* INLINE — N/D */
.badge-avaliacao.badge-nd{
  background:var(--nd-bg);
  color:var(--nd-fg);
  border-color:var(--nd-bd);
}

/* ========================================================================
   MÓDULO (LEGADO) — classifica_*
   Se em algum ponto do projeto você ainda usa:
   .avaliacao-resultado-pill.classificacao-boa|regular|ruim
   Mantive aqui para não quebrar outros forms.
   Se não usa mais, pode remover.
   ======================================================================== */
.avaliacao-resultado-pill.classificacao-boa{
  border-color:var(--ok-bd) !important;
  color:var(--ok-fg) !important;
}
.avaliacao-resultado-pill.classificacao-boa .icone{
  background:var(--ok-bg) !important;
  color:var(--ok-fg) !important;
}

.avaliacao-resultado-pill.classificacao-regular{
  border-color:var(--mid-bd) !important;
  color:var(--mid-fg) !important;
}
.avaliacao-resultado-pill.classificacao-regular .icone{
  background:var(--mid-bg) !important;
  color:var(--mid-fg) !important;
}

.avaliacao-resultado-pill.classificacao-ruim{
  border-color:var(--bad-bd) !important;
  color:var(--bad-fg) !important;
}
.avaliacao-resultado-pill.classificacao-ruim .icone{
  background:var(--bad-bg) !important;
  color:var(--bad-fg) !important;
}

/* ========================================================================
   MÓDULO I — RESPONSIVO (1 linha com scroll)
   ======================================================================== */
@media (max-width:1200px){
  .avaliacao-header{ overflow-x:auto; }
  .avaliacao-legenda-card{ width:300px; }
  .avaliacao-resultado-pill{ width:140px; }
}



/* ========================================================================
   FORNECEDOR AVALIACAO — DESTACA
   ======================================================================== */


/* Linha com ordens sem avaliação */
.row-sem-avaliacao {
  background: #FFF7ED !important;
}
.row-sem-avaliacao td {
  border-top: 1px solid #FED7AA !important;
  border-bottom: 1px solid #FED7AA !important;
}
.row-sem-avaliacao td:first-child{
  border-left: 4px solid #FB923C !important;
}



.badge-avaliacao-validade {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}