/* ============================================================
   css/gestao_documentos.css
   Estilos específicos do módulo Gestão de Documentos.
   Só existe porque hover, ::after (linha conectora da timeline) e
   @keyframes (pulso da fase ativa) não dá pra fazer em style inline —
   o resto do módulo (badges de status, cores dinâmicas) continua
   inline, igual o padrão do resto do sistema (GUIA_ESTILOS.md).
   Tokens usados: --bg, --panel, --surface-alt, --line, --text, --muted,
   --green, --danger, --warn, --blue, --purple (global.css).
   ============================================================ */

/* ---------- Sidebar de categorias (aba Documentos, desktop) ---------- */
.gd-workspace {
  display: flex;
  height: calc(100vh - 168px);
  min-height: 480px;
  overflow: hidden;
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.gd-workspace-mobile {
  display: flex;
  flex-direction: column;
  min-height: 440px;
}
.gd-mobile-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.gd-categories-panel {
  width: 234px;
  overflow-y: auto;
  flex-shrink: 0;
  padding: 12px 8px;
  border-right: 1px solid var(--line);
  background: var(--bg2);
}
.gd-list-panel {
  width: 400px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  background: var(--panel);
}
.gd-detail-panel {
  flex: 1;
  min-width: 0;
  padding: 24px;
  overflow-y: auto;
  background: radial-gradient(circle at 78% 0, var(--blue-soft), transparent 34%), var(--panel);
}
.gd-category-heading {
  padding: 4px 8px 10px;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--font-extrabold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gd-cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text2, var(--text));
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background var(--transition-fast, .15s), color var(--transition-fast, .15s);
}
.gd-cat:hover {
  background: var(--surface-alt);
  color: var(--green);
}
.gd-cat.is-active {
  border-color: color-mix(in srgb, var(--green) 30%, var(--line));
  background: var(--green-soft);
  color: var(--green);
  font-weight: var(--font-semibold);
}
.gd-category-count {
  min-width: 25px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--text-3xs);
  text-align: center;
}
.gd-cat.is-active .gd-category-count {
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
  background: var(--panel);
  color: var(--green);
}
.gd-new-document-wrap {
  margin-top: 12px;
  padding: 12px 8px 4px;
  border-top: 1px solid var(--line);
}

/* ---------- Botão "+ Novo Documento" ---------- */
.gd-btn-novo {
  width: 100%;
}

/* ---------- Item da lista de documentos ---------- */
.gd-doc-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 12px 16px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--transition-fast, .15s);
}
.gd-doc-item:hover { background: var(--surface-alt); }
.gd-doc-item.selected { background: var(--green-soft); border-left-color: var(--green); padding-left: 13px; }

.gd-doc-type-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--blue-soft);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 13px;
  flex-shrink: 0;
}
.gd-list-search {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.gd-list-results {
  flex: 1;
  overflow-y: auto;
}
.gd-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}
.gd-empty-state > i {
  display: grid !important;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  color: var(--blue);
  font-size: var(--text-lg);
}
.gd-empty-state strong { color: var(--text); font-size: var(--text-md); }
.gd-empty-state span { max-width: 360px; font-size: var(--text-sm); line-height: 1.5; }
.gd-detail-empty { min-height: 100%; }

/* ---------- Cartão de escolha Externo/Interno (modal Novo Documento) ---------- */
.gd-tipo-card {
  border: 2px solid var(--line);
  border-radius: var(--radius-md, 12px);
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast, .15s), background var(--transition-fast, .15s);
}
.gd-tipo-card:hover {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 6%, transparent);
}

/* ---------- KPIs do Dashboard ---------- */
.gd-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
@media (min-width: 769px) {
  .gd-kpi-row {
    grid-template-columns: repeat(5, 1fr);
  }
}
.gd-kpi-card {
  --gd-kpi-accent: var(--chart-series-primary);
  position: relative;
  min-height: 104px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  box-shadow: none;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}
.gd-kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--gd-kpi-accent);
}
.gd-kpi-card--attention { --gd-kpi-accent: var(--chart-attention); }
.gd-kpi-number { color: var(--text); font-size: var(--text-2xl); font-weight: var(--font-bold); line-height: 1; }
.gd-kpi-label { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-xs); line-height: 1.35; }
.gd-kpi-card--attention .gd-kpi-icon {
  background: color-mix(in srgb, var(--chart-attention) 16%, transparent);
  color: var(--chart-attention);
}
.gd-dashboard { display: grid; gap: var(--space-4); }
.gd-dashboard .delfos-chart-card { box-shadow: none; }
.gd-chart-card { margin: 0; }
.gd-chart-card .input { min-height: 32px; }
.gd-calendar-card { padding-bottom: var(--space-3); }
.gd-calendar-weekdays,
.gd-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}
.gd-calendar-weekdays {
  margin-bottom: var(--space-1);
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  text-align: center;
}
.gd-dash-dia {
  min-height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-xs);
}
.gd-dash-dia:disabled { color: var(--muted); opacity: .55; }
.gd-dash-dia:not(:disabled) { cursor: pointer; }
.gd-dash-dia:not(:disabled):hover { background: var(--surface-alt); }
.gd-dash-dia.is-review { border-color: var(--chart-success); background: color-mix(in srgb, var(--chart-success) 12%, transparent); }
.gd-dash-dia.is-soon { border-color: var(--chart-attention); background: color-mix(in srgb, var(--chart-attention) 12%, transparent); }
.gd-dash-dia.is-overdue { border-color: var(--chart-critical); background: color-mix(in srgb, var(--chart-critical) 12%, transparent); }
.gd-dash-dia.is-today { outline: 2px solid var(--chart-series-primary); outline-offset: -3px; }
.gd-calendar-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); color: var(--muted); font-size: var(--text-2xs); }
.gd-calendar-legend span { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.gd-calendar-legend span::before { content: ''; width: 11px; height: 11px; border: 1px solid currentColor; border-radius: 3px; }
.gd-calendar-legend .is-review { color: var(--chart-success); }
.gd-calendar-legend .is-soon { color: var(--chart-attention); }
.gd-calendar-legend .is-overdue { color: var(--chart-critical); }
.gd-calendar-legend .is-today { color: var(--chart-series-primary); }
.gd-master-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2-5);
  padding: var(--space-3);
  margin-bottom: var(--space-3-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
}
@media (max-width: 760px) {
  .gd-master-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .gd-master-filters { grid-template-columns: 1fr; }
}
.gd-master-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.gd-master-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.gd-master-table td { vertical-align: middle; }
.gd-master-table tbody tr { cursor: pointer; }
.gd-master-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--panel);
}
.gd-master-pagination__count { color: var(--muted); font-size: var(--text-sm); }
.gd-master-pagination__nav { display: flex; gap: var(--space-1); }
.gd-master-pagination__jump { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--muted); font-size: var(--text-sm); }
.gd-master-pagination__jump input {
  width: 54px;
  height: 32px;
  padding: 0 var(--space-1-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  text-align: center;
}
.gd-page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.gd-page-btn:hover { border-color: var(--chart-series-primary); color: var(--chart-series-primary); }
.gd-page-btn:disabled { cursor: not-allowed; opacity: .45; }
.gd-page-btn.is-active {
  border-color: var(--chart-series-primary);
  background: var(--chart-series-primary);
  color: var(--on-primary);
  font-weight: var(--font-semibold);
}
@media (max-width: 680px) {
  .gd-master-pagination { flex-wrap: wrap; }
  .gd-master-pagination__count { width: 100%; }
}
.gd-table-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px var(--space-2);
  border: 1px solid color-mix(in srgb, var(--gd-status-color) 48%, var(--line));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--gd-status-color) 12%, transparent);
  color: var(--gd-status-color);
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}
.gd-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

/* ---------- Timeline de fases (painel de detalhe) ---------- */
.gd-timeline-item {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  position: relative;
}
.gd-timeline-item:last-child { margin-bottom: 0; }
.gd-timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 30px;
  width: 2px;
  height: calc(100% - 14px);
  background: var(--line);
}
.gd-timeline-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 2px solid var(--line);
  background: var(--panel2, var(--surface-alt));
  color: var(--muted);
  z-index: 1;
}
.gd-timeline-item.done .gd-timeline-dot {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-primary);
}
.gd-timeline-item.active .gd-timeline-dot {
  border-color: var(--warn);
  color: var(--warn);
  animation: gd-pulse 1.6s infinite;
}
.gd-timeline-item.recusado .gd-timeline-dot {
  border-color: var(--danger);
  color: var(--danger);
}
@keyframes gd-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 40%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--warn) 0%, transparent); }
}

.gd-sign-btn {
  margin-top: 8px;
  padding: 6px 12px;
  background: var(--warn);
  color: #1a1400;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity var(--transition-fast, .15s);
}
.gd-sign-btn:hover { opacity: .88; }

/* ---------- Wizard (Novo Documento Interno) ---------- */
.gd-wizard-steps {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}
.gd-wizard-step {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  transition: background var(--transition-base, .2s);
}
.gd-wizard-step.done { background: var(--green); }

/* ---------- Canvas de assinatura ---------- */
.gd-sign-canvas-wrap {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.gd-sign-canvas-wrap canvas {
  display: block;
  width: 100%;
  cursor: crosshair;
}

/* ---------- Ações do painel de detalhe ---------- */
.gd-action-btn {
  transition: background var(--transition-fast, .15s), color var(--transition-fast, .15s);
}
.gd-action-btn:hover {
  background: var(--surface-alt);
  color: var(--green);
}

@media (max-width: 768px) {
  .gd-workspace { height: calc(100vh - 168px); min-height: 440px; }
  .gd-categories-panel, .gd-list-panel { width: 100%; }
  .gd-detail-panel { padding: 16px; }
  .gd-master-actions .btn { width: 100%; }
  .gd-master-pagination { align-items: flex-start; flex-direction: column; }
  .gd-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-kpi-card { min-height: 88px; padding: var(--space-3); }
}