/* ========================================
   DESIGN SYSTEM - ADAPTED TO PERPLEXITY
   ======================================== */

:root {
  /* Using Perplexity design tokens */
  /* Colors are now defined by the main design system */

  /* Spacing aliases for compatibility */
  --espaco-xs: var(--space-4);
  --espaco-sm: var(--space-8);
  --espaco-md: var(--space-16);
  --espaco-lg: var(--space-20);
  --espaco-xl: var(--space-24);
  --espaco-2xl: var(--space-32);

  /* Border radius aliases */
  --raio-sm: var(--radius-sm);
  --raio-md: var(--radius-base);
  --raio-lg: var(--radius-lg);

  /* Typography aliases */
  --tamanho-xs: var(--font-size-xs);
  --tamanho-sm: var(--font-size-sm);
  --tamanho-base: var(--font-size-base);
  --tamanho-lg: var(--font-size-lg);
  --tamanho-xl: var(--font-size-xl);
  --tamanho-2xl: var(--font-size-2xl);
  --tamanho-3xl: var(--font-size-3xl);

  /* Animation aliases */
  --duracao-rapida: var(--duration-fast);
  --duracao-normal: var(--duration-normal);
  --transicao: var(--ease-standard);

  /* Semantic color mappings */
  --cor-primaria: var(--color-primary);
  --cor-primaria-claro: var(--color-primary);
  --cor-primaria-hover: var(--color-primary-hover);
  --cor-primaria-ativa: var(--color-primary-active);
  --cor-secundaria: var(--color-teal-500);
  --cor-secundaria-claro: var(--color-teal-300);
  --cor-sucesso: var(--color-success);
  --cor-erro: var(--color-error);
  --cor-aviso: var(--color-warning);
  --cor-info: var(--color-info);
  --cor-fundo: var(--color-background);
  --cor-fundo-claro: var(--color-surface);
  --cor-fundo-card: var(--color-surface);
  --cor-fundo-hover: var(--color-secondary);
  --cor-texto: var(--color-text);
  --cor-texto-secundario: var(--color-text-secondary);
  --cor-texto-claro: var(--color-text-secondary);
  --cor-texto-branco: var(--color-cream-50);
  --cor-borda: var(--color-border);
  --cor-borda-clara: var(--color-border);
  --cor-borda-escura: var(--color-border);
  --fonte-primaria: var(--font-family-base);
  --fonte-monoespacada: var(--font-family-mono);
  --sombra-sm: var(--shadow-sm);
  --sombra-md: var(--shadow-md);
  --sombra-lg: var(--shadow-lg);
  --espaco-4: var(--space-4);
  --espaco-2: var(--space-2);
}

/* ========================================
   TABELAS - MELHORIAS PRINCIPAIS
   ======================================== */

table {
  border-collapse: collapse;
  width: 100%;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-card-border);
}

th {
  background: var(--color-secondary);
  border-bottom: 2px solid var(--color-border);
  padding: var(--space-16);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  position: sticky;
  top: 0;
}

td {
  border-bottom: 1px solid var(--color-card-border-inner);
  padding: var(--space-16);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: none;
}

tr:nth-child(even) {
  background-color: var(--color-secondary);
}

tr:hover {
  background-color: var(--color-secondary-hover);
  transition: background-color var(--duration-normal) var(--ease-standard);
  cursor: pointer;
}

/* ========================================
   TABELA DE DOCUMENTOS - ESPECIFICA
   ======================================== */

.tabela-docs {
  width: 100%;
  border: 1px solid var(--color-card-border);
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin-top: var(--space-16);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.tabela-docs th {
  background: linear-gradient(
    135deg,
    var(--color-secondary) 0%,
    var(--color-secondary-hover) 100%
  );
  padding: var(--space-12);
  border-bottom: 2px solid var(--color-border);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  position: sticky;
  top: 0;
  z-index: 10;
}

.tabela-docs td {
  padding: var(--space-12);
  border-bottom: 1px solid var(--color-card-border-inner);
  color: var(--color-text);
  vertical-align: middle;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.tabela-docs tr:nth-child(even) {
  background-color: var(--color-secondary);
}

.tabela-docs tr:nth-child(even):hover {
  background-color: var(--color-secondary-hover);
}

.tabela-docs tr:nth-child(odd):hover {
  background-color: var(--color-secondary);
  transition: background-color var(--duration-normal) var(--ease-standard);
}

.tabela-docs tr:last-child td {
  border-bottom: none;
}

/* ========================================
   LINHA EXPANDIDA NA TABELA
   ======================================== */

tr.expandido {
  background: var(--color-secondary);
}

tr.expandido td {
  border-bottom: none;
  padding: var(--space-16);
}

tr.linha-painel td {
  padding: 0;
  border: none;
  background: transparent;
}

/* ========================================
   BADGES / STATUS NA TABELA
   ======================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border: 1px solid transparent;
}

.badge-ativo {
  background-color: rgba(var(--color-success-rgb), var(--status-bg-opacity));
  color: var(--color-success);
  border-color: rgba(var(--color-success-rgb), var(--status-border-opacity));
}

.badge-inativo {
  background-color: rgba(var(--color-error-rgb), var(--status-bg-opacity));
  color: var(--color-error);
  border-color: rgba(var(--color-error-rgb), var(--status-border-opacity));
}

.badge-info {
  background-color: rgba(var(--color-info-rgb), var(--status-bg-opacity));
  color: var(--color-info);
  border-color: rgba(var(--color-info-rgb), var(--status-border-opacity));
}

.badge-aviso {
  background-color: rgba(var(--color-warning-rgb), var(--status-bg-opacity));
  color: var(--color-warning);
  border-color: rgba(var(--color-warning-rgb), var(--status-border-opacity));
}

.badge-sucesso {
  background-color: rgba(var(--color-success-rgb), var(--status-bg-opacity));
  color: var(--color-success);
  border-color: rgba(var(--color-success-rgb), var(--status-border-opacity));
}

/* ========================================
   BOTÕES NA TABELA
   ======================================== */

.btn-tabela {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-12);
  background-color: var(--color-primary);
  color: var(--color-btn-primary-text);
  text-decoration: none;
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: none;
  transition: all var(--duration-normal) var(--ease-standard);
  font-weight: var(--font-weight-medium);
  gap: var(--space-4);
  white-space: nowrap;
}

.btn-tabela:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-tabela:active {
  background-color: var(--color-primary-active);
  transform: translateY(0);
}

.btn-tabela-secondary {
  background-color: var(--color-secondary);
  color: var(--color-text);
}

.btn-tabela-secondary:hover {
  background-color: var(--color-secondary-hover);
}

.btn-tabela-sucesso {
  background-color: var(--color-success);
  color: var(--color-btn-primary-text);
}

.btn-tabela-sucesso:hover {
  opacity: 0.9;
}

.btn-tabela-erro {
  background-color: var(--color-error);
  color: var(--color-cream-50);
}

.btn-tabela-erro:hover {
  opacity: 0.9;
}

.btn-tabela-sm {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

/* ========================================
   GRUPO DE BOTÕES
   ======================================== */

.btn-grupo {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

/* ========================================
   RESPONSIVIDADE - TABELAS
   ======================================== */

@media (max-width: 768px) {
  table,
  .tabela-docs {
    font-size: var(--font-size-xs);
  }

  th,
  td {
    padding: var(--space-12);
  }

  .tabela-docs th,
  .tabela-docs td {
    padding: var(--space-8);
  }

  .btn-tabela {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 480px) {
  th,
  td {
    padding: var(--space-8);
    font-size: var(--font-size-xs);
  }

  .tabela-docs th,
  .tabela-docs td {
    padding: var(--space-6);
    font-size: 10px;
  }

  .btn-tabela {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-xs);
  }

  .btn-grupo {
    flex-direction: column;
    gap: var(--space-4);
  }

  .btn-grupo .btn-tabela {
    width: 100%;
  }
}

/* END CSS - MELHORIAS TABELA */
/* ========================================
   TABELAS - DESIGN MODERNO & PROFISSIONAL
   ======================================== */

table {
  border-collapse: collapse;
  width: 100%;
  background-color: var(--color-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: none;
}

/* HEADER - Gradient Moderno */
th {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-hover) 100%
  );
  border: none;
  padding: 20px 24px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-cream-50);
  position: sticky;
  top: 0;
  z-index: 10;
  font-family: var(--font-family-base);
}

/* LINHAS - Espaçamento Generoso */
td {
  border-bottom: 1px solid var(--color-card-border-inner);
  padding: 20px 24px;
  font-size: 14px;
  color: var(--color-text);
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: none;
}

/* ALTERNÂNCIA SUBTIL */
tr:nth-child(even) {
  background-color: rgba(94, 82, 64, 0.02);
}

tr:nth-child(odd) {
  background-color: transparent;
}

/* HOVER - Efeito Suave */
tr:hover {
  background-color: rgba(33, 128, 141, 0.06);
}

/* ========================================
   BADGES / STATUS
   ======================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border: none;
  gap: 6px;
}

.badge-ativo {
  background: linear-gradient(
    135deg,
    rgba(33, 128, 141, 0.15),
    rgba(50, 184, 198, 0.1)
  );
  color: var(--color-success);
  border: 1px solid rgba(33, 128, 141, 0.3);
  position: relative;
}

.badge-ativo::before {
  content: "●";
  font-size: 8px;
  color: var(--color-success);
  font-weight: bold;
}

.badge-inativo {
  background: linear-gradient(
    135deg,
    rgba(192, 21, 47, 0.1),
    rgba(255, 84, 89, 0.05)
  );
  color: var(--color-error);
  border: 1px solid rgba(192, 21, 47, 0.2);
}

.badge-inativo::before {
  content: "●";
  font-size: 8px;
  color: var(--color-error);
  font-weight: bold;
}

/* ========================================
   BOTÕES NA TABELA - Premium Look
   ======================================== */

.btn-tabela {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-hover)
  );
  color: var(--color-cream-50);
  text-decoration: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  border: none;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(33, 128, 141, 0.25);
}

.btn-tabela:hover {
  background: linear-gradient(
    135deg,
    var(--color-primary-hover),
    var(--color-primary-active)
  );
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(33, 128, 141, 0.35);
}

.btn-tabela:active {
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(33, 128, 141, 0.2);
}

.btn-tabela-secondary {
  background: linear-gradient(
    135deg,
    rgba(94, 82, 64, 0.12),
    rgba(94, 82, 64, 0.08)
  );
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.btn-tabela-secondary:hover {
  background: linear-gradient(
    135deg,
    rgba(94, 82, 64, 0.2),
    rgba(94, 82, 64, 0.15)
  );
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-tabela-sm {
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 6px;
}

/* ========================================
   GRUPO DE BOTÕES
   ======================================== */

.btn-grupo {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* ========================================
   TABELA DE DOCUMENTOS - Profissional
   ======================================== */

.tabela-docs {
  width: 100%;
  border: none;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 24px;
  background-color: var(--color-surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.tabela-docs th {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-hover) 100%
  );
  padding: 20px 24px;
  border: none;
  text-align: left;
  font-weight: 600;
  color: var(--color-cream-50);
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tabela-docs td {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-card-border-inner);
  color: var(--color-text);
  vertical-align: middle;
  font-size: 14px;
}

.tabela-docs tr:nth-child(even) {
  background-color: rgba(94, 82, 64, 0.02);
}

.tabela-docs tr:nth-child(even):hover {
  background-color: rgba(33, 128, 141, 0.06);
}

.tabela-docs tr:nth-child(odd):hover {
  background-color: rgba(33, 128, 141, 0.06);
}

.tabela-docs tr:last-child td {
  border-bottom: none;
}

/* ========================================
   RESPONSIVIDADE - Moderno
   ======================================== */

@media (max-width: 768px) {
  table,
  .tabela-docs {
    font-size: 13px;
  }

  th,
  td {
    padding: 16px 20px;
  }

  .tabela-docs th,
  .tabela-docs td {
    padding: 16px 20px;
  }

  .btn-tabela {
    padding: 8px 14px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  th,
  td {
    padding: 12px 16px;
    font-size: 13px;
  }

  .tabela-docs th,
  .tabela-docs td {
    padding: 12px 16px;
    font-size: 12px;
  }

  .btn-tabela {
    padding: 8px 12px;
    font-size: 11px;
  }

  .btn-grupo {
    flex-direction: column;
    gap: 8px;
  }

  .btn-grupo .btn-tabela {
    width: 100%;
  }
}