/**
 * CPA — Comissão Própria de Avaliação
 * css/disponiveis.css
 * Estilos das telas: Questionários Disponíveis + Minhas Respostas
 */

/* ══════════════════════════════════════════════════════════
   ANIMAÇÕES
══════════════════════════════════════════════════════════ */
@keyframes disp-fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes disp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230,126,34,.4); }
  50%       { box-shadow: 0 0 0 6px rgba(230,126,34,.0); }
}
@keyframes slideInRight {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   ÍCONES DE CABEÇALHO
══════════════════════════════════════════════════════════ */
.disp-header-icon {
  background: linear-gradient(135deg, #e8f5ec, #c8e6d0) !important;
  color: #2e7d45 !important;
}
.mr-header-icon {
  background: linear-gradient(135deg, #e0f2fe, #bae6fd) !important;
  color: #0369a1 !important;
}

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

.disp-summary-body { display: flex; flex-direction: column; gap: 2px; }
.disp-summary-val  { font-size: 1.45rem; font-weight: 800; color: #1a1e2d; line-height: 1; }
.disp-summary-val--sm { font-size: 1rem; font-weight: 700; }
.disp-summary-label{ font-size: .73rem; font-weight: 600; color: #8898a9; text-transform: uppercase; letter-spacing: .04em; }

/* ══════════════════════════════════════════════════════════
   AVISO INSTITUCIONAL
══════════════════════════════════════════════════════════ */
.disp-aviso {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, #e8f5ec, #f0faf3);
  border: 1px solid #a8d5b5;
  border-left: 4px solid #2e7d45;
  border-radius: 8px;
  padding: 13px 18px;
  font-size: .875rem;
  color: #1a4d2c;
  line-height: 1.5;
  margin-bottom: 22px;
  animation: disp-fadeUp .3s ease;
}
.disp-aviso-icon {
  font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; color: #2e7d45;
}

/* ══════════════════════════════════════════════════════════
   BARRA DE FILTROS
══════════════════════════════════════════════════════════ */
.disp-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e0e4e9;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.disp-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}
.disp-search-icon {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  color: #8898a9; font-size: .85rem;
  pointer-events: none;
}
.disp-search-input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1.5px solid #e0e4e9;
  border-radius: 6px;
  font-size: .875rem;
  color: #1a1e2d;
  background: #fafafa;
  outline: none;
  transition: border-color .18s ease;
  font-family: inherit;
}
.disp-search-input:focus { border-color: #2e7d45; background: #fff; }

.disp-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.disp-select {
  padding: 8px 12px;
  border: 1.5px solid #e0e4e9;
  border-radius: 6px;
  font-size: .84rem;
  color: #1a1e2d;
  background: #fafafa;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .18s ease;
  min-width: 160px;
}
.disp-select:focus { border-color: #2e7d45; }
.disp-btn-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid #e0e4e9;
  border-radius: 6px;
  font-size: .83rem;
  font-weight: 600;
  color: #4a5568;
  background: #f4f5f7;
  cursor: pointer;
  transition: all .18s ease;
  font-family: inherit;
}
.disp-btn-clear:hover { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

/* ══════════════════════════════════════════════════════════
   BADGES REUTILIZÁVEIS (compartilhados com responder.css)
══════════════════════════════════════════════════════════ */
.disp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.disp-badge--blue        { background: #dbeafe; color: #1e40af; }
.disp-badge--purple      { background: #ede9fe; color: #5b21b6; }
.disp-badge--green       { background: #dcfce7; color: #166534; }
.disp-badge--green-light { background: #d1fae5; color: #065f46; }
.disp-badge--gray        { background: #f1f5f9; color: #475569; }
.disp-badge--gray-light  { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
.disp-badge--orange      { background: #fff7ed; color: #9a3412; }
.disp-badge--yellow      { background: #fefce8; color: #854d0e; border: 1px solid #fde68a; }
.disp-badge--red         { background: #fee2e2; color: #991b1b; }
.disp-badge--pulse       { animation: disp-pulse 2s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════
   BOTÕES
══════════════════════════════════════════════════════════ */
.disp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 6px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .18s ease;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.disp-btn--primary {
  background: #2e7d45; color: #fff; border: 1px solid #2e7d45;
}
.disp-btn--primary:hover {
  background: #1c5c2f; border-color: #1c5c2f;
  transform: translateY(-1px); box-shadow: 0 3px 10px rgba(28,92,47,.25);
}
.disp-btn--warning {
  background: #fff7ed; color: #9a3412; border: 1.5px solid #fed7aa;
}
.disp-btn--warning:hover {
  background: #ffedd5; border-color: #fb923c;
  transform: translateY(-1px);
}
.disp-btn--secondary {
  background: #fff; color: #2e7d45; border: 1.5px solid #2e7d45;
}
.disp-btn--secondary:hover {
  background: #e8f5ec;
}

/* ══════════════════════════════════════════════════════════
   CARDS DE QUESTIONÁRIO DISPONÍVEL
══════════════════════════════════════════════════════════ */
.disp-cards-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.disp-card {
  display: flex;
  gap: 0;
  background: #fff;
  border: 1px solid #e0e4e9;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease, transform .15s ease;
  animation: disp-fadeUp .25s ease;
}
.disp-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.10);
  border-color: #c8cdd5;
  transform: translateY(-1px);
}
.disp-card--urgente  { border-left: 4px solid #e67e22; }
.disp-card--andamento{ border-left: 4px solid #2563eb; }

/* Coluna lateral colorida */
.disp-card-left {
  width: 56px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 0;
  flex-shrink: 0;
}
.disp-card-icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.disp-card-icon--blue   { background: #dbeafe; color: #1d4ed8; }
.disp-card-icon--purple { background: #ede9fe; color: #7c3aed; }

/* Corpo do card */
.disp-card-body { flex: 1; padding: 18px 20px 16px 4px; min-width: 0; }

.disp-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.disp-card-title-wrap { flex: 1; min-width: 0; }
.disp-card-title {
  font-size: .97rem;
  font-weight: 700;
  color: #1a1e2d;
  margin: 0 0 7px;
  line-height: 1.3;
}
.disp-card-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.disp-card-action-wrap { flex-shrink: 0; }

.disp-card-desc {
  font-size: .84rem;
  color: #4a5568;
  line-height: 1.55;
  margin: 0 0 12px;
}
.disp-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: .79rem;
  color: #4a5568;
  margin-bottom: 10px;
}
.disp-meta-item { display: flex; align-items: center; gap: 5px; }
.disp-meta-item i { color: #8898a9; font-size: .8rem; }

/* Barra de progresso dentro do card */
.disp-card-prog { margin-top: 8px; }
.disp-card-prog-label {
  display: flex; justify-content: space-between;
  font-size: .75rem; font-weight: 500; color: #4a5568; margin-bottom: 5px;
}
.disp-card-prog-bar {
  height: 6px; background: #e8ecf0; border-radius: 999px; overflow: hidden;
}
.disp-card-prog-inner {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  border-radius: 999px;
  transition: width .4s ease;
}

/* ══════════════════════════════════════════════════════════
   EMPTY STATE (compartilhado)
══════════════════════════════════════════════════════════ */
.disp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 52px 24px;
  background: #fafafa;
  border: 2px dashed #e0e4e9;
  border-radius: 12px;
  color: #8898a9;
  gap: 10px;
  animation: disp-fadeUp .3s ease;
}
.disp-empty i    { font-size: 2.8rem; color: #c8cdd5; }
.disp-empty h3   { font-size: 1rem; font-weight: 700; color: #4a5568; margin: 0; }
.disp-empty p    { font-size: .86rem; color: #8898a9; margin: 0; }

/* ══════════════════════════════════════════════════════════════════
   TABELA — MINHAS RESPOSTAS
══════════════════════════════════════════════════════════════════ */
.mr-table-wrap {
  background: #fff;
  border: 1px solid #e0e4e9;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  overflow-x: auto;
  animation: disp-fadeUp .3s ease;
}
.mr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  min-width: 780px;
}
.mr-table thead th {
  background: #f8fafb;
  padding: 12px 14px;
  text-align: left;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #4a5568;
  border-bottom: 2px solid #e0e4e9;
  white-space: nowrap;
}
.mr-th-acoes { text-align: center; }

.mr-tr { border-bottom: 1px solid #f0f1f3; transition: background .15s ease; }
.mr-tr:last-child { border-bottom: none; }
.mr-tr:hover { background: #fafbfc; }
.mr-tr--concluido  { background: #f8fffc; }
.mr-tr--andamento  {}

.mr-table tbody td {
  padding: 13px 14px;
  vertical-align: middle;
  color: #1a1e2d;
}

/* Célula de nome */
.mr-td-nome { min-width: 200px; }
.mr-nome-wrap { display: flex; align-items: center; gap: 10px; }
.mr-nome-icon {
  width: 34px; height: 34px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.mr-nome-icon--blue   { background: #dbeafe; color: #1d4ed8; }
.mr-nome-icon--purple { background: #ede9fe; color: #7c3aed; }
.mr-nome-text {
  display: block; font-weight: 600; color: #1a1e2d;
  font-size: .88rem; line-height: 1.3;
}
.mr-nome-ciclo {
  display: block; font-size: .73rem; color: #8898a9; margin-top: 2px;
}
.mr-td-ciclo small { color: #8898a9; }
.mr-td-campus { max-width: 130px; color: #4a5568; font-size: .83rem; }
.mr-td-data   { white-space: nowrap; color: #4a5568; font-size: .83rem; }
.mr-nd        { color: #c8cdd5; }
.mr-td-acoes  { text-align: center; white-space: nowrap; }

/* Barra de progresso na tabela */
.mr-td-prog  { min-width: 120px; }
.mr-prog-wrap { display: flex; align-items: center; gap: 8px; }
.mr-prog-bar {
  flex: 1; height: 7px; background: #e8ecf0;
  border-radius: 999px; overflow: hidden;
}
.mr-prog-inner {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  border-radius: 999px;
  transition: width .35s ease;
}
.mr-prog-inner--full { background: linear-gradient(90deg, #2e7d45, #4caf6e); }
.mr-prog-pct { font-size: .75rem; font-weight: 700; color: #4a5568; white-space: nowrap; min-width: 34px; }
.mr-prog-pct--full { color: #166534; }

/* Botões de ação na tabela */
.mr-btn-acao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 5px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all .15s ease;
  font-family: inherit;
}
.mr-btn-acao--vis {
  background: #f0faf3; color: #1c5c2f; border-color: #a8d5b5;
}
.mr-btn-acao--vis:hover {
  background: #dcfce7; border-color: #4ade80; transform: translateY(-1px);
}
.mr-btn-acao--cont {
  background: #fff7ed; color: #9a3412; border-color: #fed7aa;
}
.mr-btn-acao--cont:hover {
  background: #ffedd5; border-color: #fb923c; transform: translateY(-1px);
}

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

/* ══════════════════════════════════════════════════════════
   DETALHE DE RESPOSTA
══════════════════════════════════════════════════════════ */
.mr-det-header {
  background: #fff;
  border: 1px solid #e0e4e9;
  border-left: 4px solid #27ae60;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  animation: disp-fadeUp .3s ease;
}
.mr-det-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.disp-form-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-det-title-area { margin-bottom: 8px; }

/* Estatísticas do detalhe */
.mr-det-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f0f1f3;
}
.mr-det-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #f8fafb;
  border: 1px solid #e0e4e9;
  border-radius: 8px;
  flex: 1;
  min-width: 130px;
}
.mr-det-stat-val  { display: block; font-size: 1.15rem; font-weight: 800; color: #1a1e2d; line-height: 1.1; }
.mr-det-stat-lbl  { display: block; font-size: .72rem;  font-weight: 600; color: #8898a9; text-transform: uppercase; letter-spacing:.03em; }

/* Dimensões no detalhe */
.mr-det-dims  { display: flex; flex-direction: column; gap: 16px; }
.mr-det-dim   {
  background: #fff;
  border: 1px solid #e0e4e9;
  border-radius: 10px;
  overflow: hidden;
  animation: disp-fadeUp .25s ease;
}
.mr-det-dim-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f8fafb, #f0f4f8);
  border-bottom: 1px solid #e0e4e9;
}
.mr-det-dim-num {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #e8f5ec; color: #1c5c2f;
  font-size: .85rem; font-weight: 800; flex-shrink: 0;
}
.mr-det-dim-nome { font-size: .93rem; font-weight: 700; color: #1a1e2d; margin: 0; }
.mr-det-itens    { padding: 6px 0; }
.mr-det-item {
  padding: 14px 20px 10px;
  border-bottom: 1px solid #f0f1f3;
}
.mr-det-item:last-child { border-bottom: none; }
.mr-det-item-header {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px;
}
.mr-det-item-resposta {
  display: flex; align-items: center; gap: 10px;
  padding-left: 36px; flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVIDADE
══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .disp-summary-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .disp-summary-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .disp-filters     { flex-direction: column; align-items: stretch; }
  .disp-search-wrap { min-width: 0; }
  .disp-filter-group{ flex-wrap: wrap; }
  .disp-select      { min-width: 0; flex: 1; }

  .disp-card-top    { flex-direction: column; }
  .disp-card-action-wrap { align-self: flex-start; }

  .mr-det-stats     { gap: 8px; }
  .mr-det-stat      { min-width: 100px; }

  .mr-det-dim-header{ flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .disp-summary-row { grid-template-columns: 1fr 1fr; }
  .disp-card-left   { display: none; }
  .disp-card-body   { padding-left: 16px; }
  .mr-det-item-resposta { padding-left: 0; }
  .mr-det-item-header   { flex-wrap: wrap; }
}