/* =========================================================
   Zazen Consultoria — WSJF Priorização do Backlog
   wsjf-priorizacao-backlog.css
   Depende de: style.css, simulators.css (variáveis base do site)
   Este arquivo cobre todos os estilos específicos da ferramenta
   WSJF, incluindo fallback das variáveis caso style.css não esteja
   carregado (ex.: preview local).
   ========================================================= */

/* ── Variáveis (fallback caso style.css não esteja carregado) ── */
:root {
  --zazen-teal:    #008080;
  --zazen-gold:    #E8A84D;
  --zazen-dark:    #0d1a24;
  --zazen-card:    #121e28;
  --zazen-border:  rgba(255, 255, 255, 0.07);
  --font-body:     'Ubuntu', sans-serif;
}

/* ── Reset de base ─────────────────────────────────────────── */
html,
body {
  min-height: 100%;
  background-color: var(--z-bg);
}

body {
  font-family: var(--font-body);
  background-color: var(--z-bg);
  color: #dde4ec;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* ══════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════ */
.zr-header {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1.5rem 1.5rem;
  border-bottom: 1px solid var(--zazen-border);
}

.zr-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--zazen-teal);
  margin-bottom: 0.4rem;
}

.zr-header h1 {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.45rem;
  line-height: 1.15;
}

.zr-subtitle {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  max-width: 560px;
  line-height: 1.5;
}

/* ── Botões ────────────────────────────────────────────────── */
.zr-btn-primary {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 1.125rem;
  background: var(--zazen-teal);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.zr-btn-primary:hover { background: #006666; }

.zr-btn-outline {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 1.125rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--zazen-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.zr-btn-outline:hover {
  border-color: var(--zazen-teal);
  color: var(--zazen-teal);
}

/* ── Metric Cards ──────────────────────────────────────────── */
.zr-metric-card {
  background: var(--zazen-card);
  border: 1px solid var(--zazen-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  text-align: center;
  transition: border-color 0.2s;
}

.zr-metric-card.border-gold { border-color: rgba(232, 168, 77, 0.25); }
.zr-metric-card.border-blue { border-color: rgba(124, 156, 191, 0.25); }
.zr-metric-card.border-red  { border-color: rgba(82, 183, 136, 0.25); }

.wsjf-metric-teal { color: var(--zazen-teal); }
.wsjf-metric-gold { color: var(--zazen-gold); }
.wsjf-metric-blue { color: #7C9CBF; }
.wsjf-metric-red { color: #52b788; }

.zr-metric-value {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
}

.zr-metric-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 0.3rem;
}

/* ══════════════════════════════════════════════════════════
   PAINEL DE LEGENDA (Como calcular)
   ══════════════════════════════════════════════════════════ */
.wsjf-legend {
  display: none;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.wsjf-legend-inner {
  background: var(--zazen-card);
  border: 1px solid rgba(0, 128, 128, 0.22);
  border-radius: 10px;
  padding: 1.5rem;
  margin: 1rem 0 0;
}

.wsjf-legend-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--zazen-teal);
  margin-bottom: 1rem;
}

.wsjf-formula {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  margin-bottom: 0.4rem;
}

.formula-highlight { color: var(--zazen-teal); }
.formula-duration  { color: #e05c5c; }

.wsjf-formula-sub {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin-bottom: 1.25rem;
}

.wsjf-criteria-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--zazen-border);
  border-radius: 8px;
  padding: 1rem;
  height: 100%;
}

.wsjf-criteria-icon {
  font-size: 1.1rem;
  margin-bottom: 0.55rem;
  margin-left: 0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
}

.wsjf-criteria-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.3rem;
}

.wsjf-criteria-desc {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.45;
}

/* Lista de exemplos por valor dentro dos cards de critério */
.wsjf-ex-list {
  list-style: none;
  padding: 0;
  margin: 0.7rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.wsjf-ex-list li {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.wsjf-ex-score {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 1.4rem;
  text-align: center;
  padding: 0.06rem 0.3rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.ex-teal { background: rgba(0, 128, 128, 0.18);   color: var(--zazen-teal); }
.ex-gold { background: rgba(232, 168, 77, 0.18);  color: var(--zazen-gold); }
.ex-blue { background: rgba(124, 156, 191, 0.18); color: #7C9CBF; }
.ex-red  { background: rgba(224, 92, 92, 0.16);   color: #e05c5c; }

/* Ícone de cadeado na área "Outro" (não deletável) */
.wsjf-area-fixed {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0.1rem 0.2rem;
}

.wsjf-scale-note {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-heading);
  letter-spacing: 0.06em;
}

/* ══════════════════════════════════════════════════════════
   FORMULÁRIO DE ADIÇÃO / EDIÇÃO
   ══════════════════════════════════════════════════════════ */
.zr-add-form {
  display: none;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.wsjf-form-header {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--zazen-teal);
  padding: 1rem 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wsjf-form-body {
  background: var(--zazen-card);
  border: 1px solid var(--zazen-border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.wsjf-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.wsjf-scores-row {
  border-top: 1px solid var(--zazen-border);
  padding-top: 0.85rem;
  align-items: flex-end;
}

.wsjf-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  border-top: 1px solid var(--zazen-border);
  padding-top: 1rem;
  margin-top: 0.25rem;
}

/* Form elements */
.zr-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.zr-form-group.wz-form-flex-wide {
  flex: 3 1 240px;
}

.zr-form-group.wz-form-flex-medium {
  flex: 1 1 140px;
}

.wz-form-flex-medium + .wz-form-flex-medium {
  flex: 1 1 140px;
}

.zr-form-label {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.48);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.zr-form-input,
.zr-form-select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--zazen-border);
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  padding: 0.45rem 0.75rem;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.zr-form-input:focus,
.zr-form-select:focus {
  outline: none;
  border-color: var(--zazen-teal);
  background: rgba(0, 128, 128, 0.08);
}

.wsjf-toast-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(92vw, 380px);
  z-index: 1300;
  pointer-events: none;
  align-items: center;
}
.wsjf-toast {
  min-width: 280px;
  max-width: 340px;
  background: rgba(10, 18, 25, 0.95);
  border: 1px solid rgba(43, 184, 184, 0.22);
  border-radius: 14px;
  padding: 1rem;
  color: #eef8ff;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  animation: wsjf-toast-in 0.2s ease;
}
.wsjf-toast-exit {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.wsjf-toast-message {
  margin-bottom: 0.75rem;
  line-height: 1.4;
  font-size: 0.93rem;
}
.wsjf-toast-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.wsjf-toast-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #eef8ff;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.wsjf-toast-btn:hover {
  transform: translateY(-1px);
  background: rgba(43, 184, 184, 0.1);
  border-color: rgba(43, 184, 184, 0.4);
}
.wsjf-toast-confirm {
  background: var(--zazen-teal);
  color: #0a1219;
  border-color: transparent;
}

@keyframes wsjf-toast-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.zr-form-input.input-error {
  border-color: #e05c5c;
  background: rgba(224, 92, 92, 0.06);
}

.zr-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
  cursor: pointer;
}

.zr-form-select option { background: #1a2633; color: #fff; }

/* Score groups */
.wsjf-score-group { flex: 1 1 105px; }

.wsjf-score-select {
  text-align: center;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em;
}

/* Badges de label dos critérios */
.score-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  letter-spacing: 0.03em;
}

.score-teal { background: rgba(0, 128, 128, 0.2);   color: var(--zazen-teal); }
.score-gold { background: rgba(232, 168, 77, 0.2);  color: var(--zazen-gold); }
.score-blue { background: rgba(124, 156, 191, 0.2); color: #7C9CBF; }
.score-red  { background: rgba(224, 92, 92, 0.18);  color: #e05c5c; }

/* Preview WSJF em tempo real */
.wsjf-preview-calc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: rgba(0, 128, 128, 0.07);
  border: 1px solid rgba(0, 128, 128, 0.22);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  min-width: 96px;
  gap: 0.1rem;
  flex-shrink: 0;
  text-align: center;
}

.wsjf-preview-label {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
}

.wsjf-preview-value {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--zazen-teal);
  line-height: 1;
}

.wsjf-preview-cod {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
}

/* ══════════════════════════════════════════════════════════
   BARRA DE FILTROS
   ══════════════════════════════════════════════════════════ */
.wsjf-filter-bar {
  max-width: 1280px;
  margin: 0.5rem auto 0;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-bottom: 1px solid var(--zazen-border);
}

.wsjf-filter-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.wsjf-filter-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

.wsjf-filter-pills {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.wsjf-pill {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  padding: 0.28rem 0.75rem;
  border-radius: 20px;
  border: 1px solid var(--zazen-border);
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.18s;
}

.wsjf-pill:hover {
  border-color: rgba(0, 128, 128, 0.4);
  color: var(--zazen-teal);
}

.wsjf-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  margin-left: 0.4rem;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  font-weight: 600;
}

.wsjf-pill.active {
  background: rgba(0, 128, 128, 0.14);
  border-color: rgba(0, 128, 128, 0.45);
  color: var(--zazen-teal);
}

.wsjf-select-sm {
  font-size: 0.78rem !important;
  padding: 0.28rem 1.8rem 0.28rem 0.65rem !important;
}

/* ══════════════════════════════════════════════════════════
   LISTA DE ITENS
   ══════════════════════════════════════════════════════════ */
.wsjf-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 1.5rem 4rem;
}

/* Card do item */
.wsjf-item {
  background: var(--zazen-card);
  border: 1px solid var(--zazen-border);
  border-left: 3px solid transparent;
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.55rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: border-color 0.18s;
}

.wsjf-item:hover { border-color: rgba(0, 128, 128, 0.25); }

/* Top 3 highlight */
.wsjf-item.rank-1 { border-left-color: var(--zazen-gold); }
.wsjf-item.rank-2 { border-left-color: rgba(232, 168, 77, 0.45); }
.wsjf-item.rank-3 { border-left-color: rgba(232, 168, 77, 0.22); }

/* Concluído */
.wsjf-item.status-concluido { opacity: 0.5; }
.wsjf-item.status-concluido .wsjf-item-title { text-decoration: line-through; }

/* Rank number */
.wsjf-rank {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.18);
  min-width: 1.6rem;
  text-align: center;
  flex-shrink: 0;
}

.wsjf-item.rank-1 .wsjf-rank { color: var(--zazen-gold); font-size: 0.82rem; }
.wsjf-item.rank-2 .wsjf-rank { color: rgba(232, 168, 77, 0.55); }
.wsjf-item.rank-3 .wsjf-rank { color: rgba(232, 168, 77, 0.32); }

/* Bolha do score */
.wsjf-score-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 128, 128, 0.1);
  border: 1px solid rgba(0, 128, 128, 0.22);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  min-width: 68px;
  flex-shrink: 0;
  text-align: center;
}

.wsjf-score-number {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--zazen-teal);
  line-height: 1;
}

.wsjf-score-label-sm {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 0.15rem;
}

/* Score alto */
.wsjf-item.score-high .wsjf-score-bubble {
  background: rgba(0, 200, 200, 0.12);
  border-color: rgba(0, 200, 200, 0.35);
}
.wsjf-item.score-high .wsjf-score-number { color: #00c8c8; }

/* Score baixo */
.wsjf-item.score-low .wsjf-score-bubble {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--zazen-border);
}
.wsjf-item.score-low .wsjf-score-number { color: rgba(255, 255, 255, 0.3); }

/* Corpo do item */
.wsjf-item-body {
  flex: 1 1 0;
  min-width: 0;
}

.wsjf-item-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wsjf-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.wsjf-area-badge {
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.12rem 0.45rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--zazen-border);
  color: rgba(255, 255, 255, 0.42);
}

.wsjf-status-badge {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 10px;
}

.badge-backlog   { background: rgba(124, 156, 191, 0.13); color: #7C9CBF; border: 1px solid rgba(124, 156, 191, 0.22); }
.badge-andamento { background: rgba(232, 168, 77, 0.13);  color: var(--zazen-gold); border: 1px solid rgba(232, 168, 77, 0.22); }
.badge-concluido { background: rgba(82, 183, 136, 0.13);  color: #52b788; border: 1px solid rgba(82, 183, 136, 0.22); }

/* Breakdown CoD */
.wsjf-cod-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cod-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.38);
}

.chip-badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.05rem 0.28rem;
  border-radius: 3px;
}

.chip-teal { background: rgba(0, 128, 128, 0.2);   color: var(--zazen-teal); }
.chip-gold { background: rgba(232, 168, 77, 0.2);  color: var(--zazen-gold); }
.chip-blue { background: rgba(124, 156, 191, 0.2); color: #7C9CBF; }
.chip-red  { background: rgba(224, 92, 92, 0.16);  color: #e05c5c; }

.cod-total { color: rgba(255, 255, 255, 0.25); font-size: 0.68rem; }

/* Ações do item */
.wsjf-item-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.wsjf-act-btn {
  background: transparent;
  border: 1px solid var(--zazen-border);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 0.32rem 0.45rem;
  font-size: 0.82rem;
  transition: all 0.18s;
  display: flex;
  align-items: center;
}

.wsjf-act-btn:hover        { border-color: var(--zazen-teal); color: var(--zazen-teal); }
.wsjf-act-btn.btn-done:hover   { border-color: #52b788; color: #52b788; }
.wsjf-act-btn.btn-delete:hover { border-color: #e05c5c; color: #e05c5c; }

/* ══════════════════════════════════════════════════════════
   ESTADO VAZIO
   ══════════════════════════════════════════════════════════ */
.wsjf-empty-state {
  display: none;
  text-align: center;
  padding: 5rem 1rem;
  color: rgba(255, 255, 255, 0.2);
}

.wsjf-empty-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
  color: rgba(0, 128, 128, 0.25);
}

.wsjf-empty-text {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.wsjf-empty-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.15);
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.zazen-footer {
  padding:     2rem 0;
  border-top:  1px solid var(--z-border);
  background:  var(--z-bg);
  font-family: 'Orbitron', sans-serif;
}

.footer-brand {
  display:     inline-flex;
  align-items: center;
  gap:         0.5rem;
  font-family: 'Orbitron', sans-serif;
  font-size:   0.95rem;
  font-weight: 700;
  color:       var(--z-text-2);
  transition:  color var(--t);
}
.footer-brand:hover { color: var(--z-primary-light); }

.footer-copy {
  font-size:     0.82rem;
  color:         var(--z-text-muted);
  margin-bottom: 0;
}

.footer-social a {
  font-size:  1.1rem;
  color:      var(--z-text-muted);
  transition: color var(--t);
}
.footer-social a:hover { color: var(--z-primary-light); }

/* ── Back to Top ────────────────────────────────────────── */
.back-to-top {
  position:       fixed;
  bottom:         2rem;
  right:          2rem;
  z-index:        999;
  width:          44px;
  height:         44px;
  border-radius:  50%;
  border:         1px solid var(--z-primary);
  background:     rgba(8, 13, 19, 0.85);
  color:          var(--z-primary);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      1.1rem;
  cursor:         pointer;
  opacity:        0;
  transform:      translateY(12px);
  transition:     opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, color 0.2s ease;
  pointer-events: none;
}
.back-to-top.visible {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background:  var(--z-primary);
  color:       var(--z-bg);
  box-shadow:  0 0 18px var(--z-primary-glow-strong);
}

/* ══════════════════════════════════════════════════════════
   GERENCIAR ÁREAS (painel do filter-area)
   ══════════════════════════════════════════════════════════ */
.wsjf-area-filter-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.wsjf-manage-areas-btn {
  background: transparent;
  border: 1px solid var(--zazen-border);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 0.28rem 0.45rem;
  font-size: 0.82rem;
  flex-shrink: 0;
  transition: border-color 0.18s, color 0.18s;
  display: flex;
  align-items: center;
}
.wsjf-manage-areas-btn:hover,
.wsjf-manage-areas-btn.active {
  border-color: var(--zazen-teal);
  color: var(--zazen-teal);
}

.wsjf-manage-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #0f1e2b;
  border: 1px solid rgba(0, 128, 128, 0.3);
  border-radius: 10px;
  padding: 0.75rem;
  min-width: 220px;
  max-width: 280px;
  z-index: 200;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.wsjf-manage-panel-title {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.6rem;
}

.wsjf-area-items-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.65rem;
  max-height: 200px;
  overflow-y: auto;
}

.wsjf-area-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  transition: background 0.15s;
}
.wsjf-area-item:hover { background: rgba(255, 255, 255, 0.04); }

.wsjf-area-item-name {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wsjf-area-delete-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 0.1rem 0.2rem;
  border-radius: 4px;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  line-height: 1;
}
.wsjf-area-delete-btn:hover { color: #e05c5c; }

.wsjf-manage-add-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  border-top: 1px solid var(--zazen-border);
  padding-top: 0.6rem;
}

.wsjf-area-input {
  flex: 1;
  font-size: 0.78rem !important;
  padding: 0.3rem 0.55rem !important;
  min-width: 0;
}

.wsjf-add-area-confirm {
  background: var(--zazen-teal);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: background 0.18s;
}
.wsjf-add-area-confirm:hover { background: #006666; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVIDADE
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .zr-header { padding: 1.25rem 1rem 1.25rem; }
  .wsjf-legend { padding: 0 1rem; }
  .zr-add-form  { padding: 0 1rem; }
  .wsjf-filter-bar { padding: 0.65rem 1rem; }
  .wsjf-main { padding: 0.75rem 1rem 3rem; }
}

@media (max-width: 576px) {
  .wsjf-item {
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .wsjf-item-actions {
    width: 100%;
    justify-content: flex-end;
    border-top: 1px solid var(--zazen-border);
    padding-top: 0.5rem;
    margin-top: 0.1rem;
  }

  .wsjf-scores-row {
    flex-direction: column;
  }

  .wsjf-preview-calc {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.65rem 1rem;
  }

  .wsjf-preview-value { font-size: 1.35rem; }
}