/**
 * CPA — Comissão Própria de Avaliação
 * css/painel.css
 * Estilos compartilhados: Painel Geral + Taxa de Resposta
 */

/* ══════════════════════════════════════════════════════════
   ANIMAÇÕES
══════════════════════════════════════════════════════════ */
@keyframes pnl-fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes pnl-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════
   ÍCONES DE CABEÇALHO
══════════════════════════════════════════════════════════ */
.pnl-header-icon {
  background: linear-gradient(135deg,#e8f5ec,#c8e6d0) !important;
  color: #2e7d45 !important;
}
.taxa-header-icon {
  background: linear-gradient(135deg,#dbeafe,#bfdbfe) !important;
  color: #1d4ed8 !important;
}

/* Botões no cabeçalho */
.pnl-header-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════
   BOTÕES GERAIS
══════════════════════════════════════════════════════════ */
.pnl-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: .855rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .18s ease;
  font-family: inherit;
  white-space: nowrap;
}
.pnl-btn--primary {
  background: #2e7d45; color:#fff; border:1px solid #2e7d45;
}
.pnl-btn--primary:hover {
  background:#1c5c2f; border-color:#1c5c2f;
  transform:translateY(-1px); box-shadow:0 3px 10px rgba(28,92,47,.25);
}
.pnl-btn--secondary {
  background:#fff; color:#2e7d45; border:1.5px solid #2e7d45;
}
.pnl-btn--secondary:hover { background:#e8f5ec; }
.pnl-btn--ghost {
  background:#f4f5f7; color:#4a5568; border:1.5px solid #e0e4e9;
}
.pnl-btn--ghost:hover { background:#e8ecf0; border-color:#c8cdd5; }

/* ══════════════════════════════════════════════════════════
   CARD DE FILTROS
══════════════════════════════════════════════════════════ */
.pnl-filter-card {
  background:#fff;
  border:1px solid #e0e4e9;
  border-radius:10px;
  margin-bottom:20px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  animation:pnl-fadeUp .3s ease;
}
.pnl-filter-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px;
  background:#f8fafb;
  border-bottom:1px solid #e0e4e9;
  cursor:pointer;
  user-select:none;
  transition:background .15s;
}
.pnl-filter-header:hover { background:#f0f4f8; }
.pnl-filter-title {
  font-size:.88rem; font-weight:700; color:#1a1e2d;
  display:flex; align-items:center; gap:8px;
}
.pnl-filter-title i { color:#2e7d45; }
.pnl-filter-arrow { font-size:.75rem; color:#8898a9; transition:transform .25s ease; }
.pnl-arrow-rotated { transform:rotate(180deg); }

.pnl-filter-body {
  padding:18px 18px 14px;
  display:flex; flex-direction:column; gap:14px;
  transition:max-height .3s ease, padding .3s ease;
  max-height:600px; overflow:hidden;
}
.pnl-filter-body--collapsed { max-height:0; padding:0 18px; }

.pnl-filter-row {
  display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start;
}
.pnl-filter-field {
  display:flex; flex-direction:column; gap:5px; min-width:140px; flex:1;
}
.pnl-filter-field--wide { flex:2; min-width:220px; }
.pnl-filter-field--lg   { flex:3; min-width:280px; }
.pnl-label {
  font-size:.75rem; font-weight:700; color:#4a5568;
  text-transform:uppercase; letter-spacing:.04em;
}
.pnl-select {
  padding:8px 12px;
  border:1.5px solid #e0e4e9; border-radius:6px;
  font-size:.855rem; color:#1a1e2d; background:#fafafa;
  outline:none; cursor:pointer; font-family:inherit;
  transition:border-color .18s ease;
}
.pnl-select:focus { border-color:#2e7d45; }

/* Multi-checkbox */
.pnl-multi-check {
  display:flex; flex-wrap:wrap; gap:6px;
  padding:8px 10px;
  border:1.5px solid #e0e4e9; border-radius:6px;
  background:#fafafa; min-height:38px;
}
.pnl-multi-check--scroll { max-height:100px; overflow-y:auto; }
.pnl-check-item {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.82rem; color:#1a1e2d; cursor:pointer;
  padding:2px 6px; border-radius:4px;
  transition:background .13s;
}
.pnl-check-item:hover { background:#e8f5ec; }
.pnl-check-item input { accent-color:#2e7d45; cursor:pointer; }

.pnl-filter-actions {
  display:flex; gap:10px; padding-top:4px;
}

/* ══════════════════════════════════════════════════════════
   KPI CARDS
══════════════════════════════════════════════════════════ */
.pnl-kpi-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:20px;
  animation:pnl-fadeUp .3s ease;
}
.pnl-kpi {
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  background:#fff; border:1px solid #e0e4e9; border-radius:10px;
  transition:box-shadow .18s, transform .15s;
}
.pnl-kpi:hover { box-shadow:0 4px 14px rgba(0,0,0,.09); transform:translateY(-1px); }
.pnl-kpi-icon {
  width:44px; height:44px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
}
.pnl-kpi--green  .pnl-kpi-icon { background:#dcfce7; color:#16a34a; }
.pnl-kpi--blue   .pnl-kpi-icon { background:#dbeafe; color:#1d4ed8; }
.pnl-kpi--orange .pnl-kpi-icon { background:#fff7ed; color:#ea580c; }
.pnl-kpi--gray   .pnl-kpi-icon { background:#f1f5f9; color:#475569; }
.pnl-kpi--red    .pnl-kpi-icon { background:#fee2e2; color:#dc2626; }
.pnl-kpi--purple .pnl-kpi-icon { background:#ede9fe; color:#7c3aed; }

.pnl-kpi-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.pnl-kpi-val  { font-size:1.5rem; font-weight:800; color:#1a1e2d; line-height:1; }
.pnl-kpi-label{ font-size:.72rem; font-weight:600; color:#8898a9; text-transform:uppercase; letter-spacing:.04em; }

/* ══════════════════════════════════════════════════════════
   CARDS DE GRÁFICO
══════════════════════════════════════════════════════════ */
.pnl-charts-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:20px;
  animation:pnl-fadeUp .35s ease;
}
.pnl-charts-row--single { grid-template-columns:1fr; }
.pnl-chart-card {
  background:#fff; border:1px solid #e0e4e9; border-radius:10px;
  overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.pnl-chart-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; border-bottom:1px solid #f0f1f3;
  background:#f8fafb; flex-wrap:wrap; gap:8px;
}
.pnl-chart-title {
  font-size:.88rem; font-weight:700; color:#1a1e2d;
  display:flex; align-items:center; gap:8px;
}
.pnl-chart-title i { color:#2e7d45; }
.pnl-chart-body { padding:14px 16px; position:relative; }

/* ══════════════════════════════════════════════════════════
   TABELA
══════════════════════════════════════════════════════════ */
.pnl-table-card {
  background:#fff; border:1px solid #e0e4e9; border-radius:10px;
  overflow:hidden; margin-bottom:20px; box-shadow:0 1px 4px rgba(0,0,0,.04);
  animation:pnl-fadeUp .4s ease;
}
.pnl-table-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; border-bottom:1px solid #e0e4e9;
  background:#f8fafb; gap:12px; flex-wrap:wrap;
}
.pnl-table-search-wrap { position:relative; }
.pnl-table-search-icon {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:#8898a9; font-size:.8rem; pointer-events:none;
}
.pnl-table-search {
  padding:7px 12px 7px 30px;
  border:1.5px solid #e0e4e9; border-radius:6px;
  font-size:.855rem; color:#1a1e2d; background:#fafafa;
  outline:none; font-family:inherit; transition:border-color .18s;
  min-width:200px;
}
.pnl-table-search:focus { border-color:#2e7d45; }
.pnl-table-wrap { overflow-x:auto; }
.pnl-table {
  width:100%; border-collapse:collapse;
  font-size:.855rem; min-width:680px;
}
.pnl-table thead th {
  background:#f8fafb; padding:11px 14px;
  text-align:left; font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:#4a5568;
  border-bottom:2px solid #e0e4e9; white-space:nowrap;
}
.pnl-tr { border-bottom:1px solid #f0f1f3; transition:background .15s; }
.pnl-tr:last-child { border-bottom:none; }
.pnl-tr:hover { background:#fafbfc; }
.pnl-table tbody td { padding:11px 14px; vertical-align:middle; color:#1a1e2d; }
.pnl-td-num  { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.pnl-td-item { max-width:280px; }

/* Barra mini inline */
.pnl-bar-mini {
  display:flex; align-items:center; gap:7px; min-width:80px;
}
.pnl-bar-mini-inner {
  height:7px; border-radius:999px; flex-shrink:0;
}
.pnl-bar-mini span { font-size:.8rem; font-weight:600; color:#4a5568; white-space:nowrap; }
.pnl-bar-mini--pos { background:#4ade80; width:var(--w); }
.pnl-bar-mini--int { background:#fbbf24; }
.pnl-bar-mini--neg { background:#f87171; }

/* Classificação badge */
.pnl-class {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:20px;
  font-size:.72rem; font-weight:700; white-space:nowrap;
}
.pnl-class--pos { background:#dcfce7; color:#166534; }
.pnl-class--int { background:#fefce8; color:#854d0e; }
.pnl-class--neg { background:#fee2e2; color:#991b1b; }

/* Dimensão badge */
.pnl-dim-badge {
  display:inline-block;
  max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.82rem; color:#1a1e2d;
}

/* Botão detalhamento */
.pnl-btn-det {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:5px;
  background:#f0faf3; color:#1c5c2f; border:1.5px solid #a8d5b5;
  font-size:.77rem; font-weight:600; cursor:pointer; font-family:inherit;
  transition:all .15s ease; white-space:nowrap;
}
.pnl-btn-det:hover { background:#dcfce7; border-color:#4ade80; transform:translateY(-1px); }

/* Paginação */
.pnl-table-footer {
  display:flex; align-items:center; justify-content:center;
  gap:6px; flex-wrap:wrap; padding:12px 16px;
  border-top:1px solid #f0f1f3;
}
.pnl-pag-info  { font-size:.78rem; color:#8898a9; font-weight:500; margin-right:8px; }
.pnl-pag-btn {
  min-width:32px; height:32px; border-radius:6px;
  border:1.5px solid #e0e4e9; background:#fff;
  font-size:.82rem; font-weight:600; color:#4a5568;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:all .15s ease; font-family:inherit;
}
.pnl-pag-btn:hover:not([disabled]) { background:#e8f5ec; border-color:#a8d5b5; color:#1c5c2f; }
.pnl-pag-btn--active { background:#2e7d45; border-color:#2e7d45; color:#fff; }
.pnl-pag-btn[disabled] { opacity:.35; cursor:not-allowed; }

/* ══════════════════════════════════════════════════════════
   DRILL-DOWN
══════════════════════════════════════════════════════════ */
.pnl-det-breadcrumb {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-bottom:18px; padding:12px 16px;
  background:#fff; border:1px solid #e0e4e9; border-radius:8px;
  animation:pnl-fadeUp .25s ease;
}
.pnl-det-ctx {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.pnl-det-ctx-item {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.82rem; color:#4a5568; font-weight:500;
}
.pnl-det-sep { font-size:.6rem; color:#c8cdd5; }
.pnl-det-footer {
  display:flex; justify-content:flex-end; padding:4px 0 12px;
}

/* KPI vermelho para drill-down */
.pnl-kpi--red  .pnl-kpi-icon { background:#fee2e2; color:#dc2626; }

/* ══════════════════════════════════════════════════════════
   TAXA DE RESPOSTA — ESPECÍFICOS
══════════════════════════════════════════════════════════ */

/* Alerta de participação baixa */
.taxa-alerta {
  display:flex; align-items:flex-start; gap:14px;
  background:#fff7ed; border:1px solid #fed7aa; border-left:4px solid #f97316;
  border-radius:8px; padding:13px 18px; font-size:.875rem; color:#7c2d12;
  line-height:1.5; margin-bottom:20px; animation:pnl-fadeUp .3s ease;
}
.taxa-alerta-icon { font-size:1.1rem; flex-shrink:0; margin-top:1px; color:#f97316; }

/* Gauge de taxa geral */
.taxa-gauge-card {
  background:#fff; border:1px solid #e0e4e9; border-radius:10px;
  padding:18px 22px; margin-bottom:20px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  animation:pnl-fadeUp .3s ease;
}
.taxa-gauge-title {
  font-size:.88rem; font-weight:700; color:#1a1e2d; margin-bottom:12px;
}
.taxa-gauge-wrap { display:flex; flex-direction:column; gap:8px; }
.taxa-gauge-bar-outer {
  height:22px; background:#e8ecf0; border-radius:999px; overflow:hidden;
  position:relative;
}
.taxa-gauge-bar-inner {
  height:100%; border-radius:999px; transition:width .6s ease;
  display:flex; align-items:center; justify-content:flex-end; padding-right:10px;
}
.taxa-gauge-label { font-size:.8rem; font-weight:800; color:#fff; }
.taxa-gauge-legend {
  display:flex; gap:20px; flex-wrap:wrap; font-size:.78rem; font-weight:500; color:#4a5568;
}
.taxa-gauge-legend span { display:flex; align-items:center; gap:5px; }

/* Toggle gráfico acum/diário */
.taxa-chart-toggle { display:flex; gap:0; }
.taxa-toggle-btn {
  padding:5px 14px; border:1.5px solid #e0e4e9; background:#f4f5f7;
  font-size:.78rem; font-weight:600; color:#4a5568; cursor:pointer;
  font-family:inherit; transition:all .15s;
}
.taxa-toggle-btn:first-child { border-radius:5px 0 0 5px; }
.taxa-toggle-btn:last-child  { border-radius:0 5px 5px 0; border-left:none; }
.taxa-toggle-btn--active {
  background:#2e7d45; color:#fff; border-color:#2e7d45;
}

/* Barra inline tabela */
.taxa-bar-cell {
  display:flex; align-items:center; gap:8px; min-width:120px;
}
.taxa-bar-outer {
  flex:1; height:8px; background:#e8ecf0; border-radius:999px; overflow:hidden;
}
.taxa-bar-inner {
  height:100%; border-radius:999px; transition:width .4s ease;
}
.taxa-bar-pct { font-size:.8rem; font-weight:700; white-space:nowrap; min-width:36px; }

/* Linha de total */
.taxa-total-row { background:#f8fafb !important; font-weight:600; }
.taxa-total-row td { border-top:2px solid #e0e4e9; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVIDADE
══════════════════════════════════════════════════════════ */
@media (max-width:1100px) {
  .pnl-kpi-row     { grid-template-columns:repeat(2,1fr); }
  .pnl-charts-row  { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .pnl-kpi-row         { grid-template-columns:repeat(2,1fr); gap:10px; }
  .pnl-header-actions  { margin-left:0; }
  .page-header         { flex-wrap:wrap; }
  .pnl-filter-row      { flex-direction:column; }
  .pnl-filter-field, .pnl-filter-field--wide, .pnl-filter-field--lg { min-width:0; flex:1 1 100%; }
  .pnl-det-breadcrumb  { flex-direction:column; align-items:flex-start; }
  .taxa-gauge-legend   { gap:12px; }
}
@media (max-width:480px) {
  .pnl-kpi-row    { grid-template-columns:1fr 1fr; }
  .pnl-kpi-val    { font-size:1.2rem; }
  .pnl-filter-actions { flex-direction:column; }
  .pnl-btn        { justify-content:center; }
}