:root {
  /* Tokens Manduá */
  --mandua-green: #005448;
  --mandua-green-dark: #003d35;
  --mandua-green-light: #006b5b;
  --mandua-orange: #ec6907;
  --mandua-orange-dark: #d45e06;
  --mandua-beige: #d2bb90;
  --mandua-beige-light: #f0e8d8;

  /* Pico v2 — sobrescrita de variáveis */
  --pico-primary: #005448;
  --pico-primary-hover: #003d35;
  --pico-primary-focus: rgba(0, 84, 72, 0.25);
  --pico-primary-inverse: #ffffff;

  /* Tipografia */
  --pico-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --pico-font-family-headings: 'Montserrat', system-ui, sans-serif;
  --pico-font-size: 87.5%; /* 14px — evita escala fluida em telas largas */

  /* Bordas */
  --pico-border-radius: 6px;

  /* Tabela — células mais compactas */
  --pico-table-cell-padding-block: 0.375rem;
  --pico-table-cell-padding-inline: 0.75rem;

  /* Validação de formulário */
  --pico-form-element-valid-border-color: #005448;
  --pico-form-element-valid-active-border-color: #005448;
  --pico-form-element-valid-focus-color: rgba(0, 84, 72, 0.25);
  --pico-form-element-invalid-border-color: #c0392b;
  --pico-form-element-invalid-active-border-color: #c0392b;
  --pico-form-element-invalid-focus-color: rgba(192, 57, 43, 0.25);
}

/* Botão de ação laranja (CTAs de conversão) */
.button-action {
  --pico-background-color: #ec6907;
  --pico-border-color: #ec6907;
  --pico-color: #ffffff;
}
.button-action:hover,
.button-action:active,
.button-action:focus {
  --pico-background-color: #d45e06;
  --pico-border-color: #d45e06;
}

/* Header — identidade Manduá */
body > header {
  background-color: var(--mandua-green);
  padding: 0;
}

body > header nav a {
  color: #ffffff;
  text-decoration: none;
}

body > header nav a:hover {
  color: var(--mandua-beige);
  text-decoration: none;
}

/* Email do usuário no nav */
.nav-user-email {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  padding-right: 0.25rem;
}

/* Botão ghost para header sobre fundo escuro */
.btn-header-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-size: 0.8rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--pico-border-radius);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.5;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.btn-header-ghost:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* Aviso sutil para usuário não autenticado */
.muted-notice {
  color: var(--pico-muted-color, #6c757d);
  font-style: italic;
  margin-top: 1rem;
}

/* Menu grid — home */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* ===== Participantes — Lista de Listas ===== */

/* Layout principal: criar lista (esquerda) + filtro e tabela (direita) */
.listas-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .listas-layout {
    grid-template-columns: 1fr;
  }
}

/* Título compacto dentro do header do card de criação */
.listas-layout article > header h3 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

/* Barra de filtro acima da tabela */
.listas-filter-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.listas-filter-bar fieldset {
  flex: 1;
  min-width: 180px;
  margin-bottom: 0;
}

/* Botão Limpar — auto-width (Pico usa 100% em forms) */
.listas-clear-btn {
  width: auto;
  font-size: 0.875rem;
  padding: 0.4rem 1rem;
  margin-bottom: 0;
}

/* Ações compactas inline dentro de tabelas */
.table-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ===== Auth status no header nav ===== */
/* Garante que o wrapper #auth-status alinhe verticalmente com o logo
   dentro do nav container-fluid do Pico (que usa justify-content: space-between) */
#auth-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

#auth-status > ul {
  margin-bottom: 0;
  gap: 0.75rem;
}

/* ===== Botão destrutivo vermelho ===== */
/* Segue o mesmo padrão de .button-action: sobrescrita de custom props do Pico */
.btn-delete {
  --pico-background-color: #dc3545;
  --pico-border-color: #dc3545;
  --pico-color: #ffffff;
}

.btn-delete:hover,
.btn-delete:active,
.btn-delete:focus {
  --pico-background-color: #c82333;
  --pico-border-color: #c82333;
}

/* ===== Detalhe da lista (/participantes/:id) ===== */

/* Cabeçalho: hgroup à esquerda, botão Voltar à direita — tudo em linha única */
.detail-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.detail-page-header hgroup {
  margin-bottom: 0;
}

.detail-page-header h1 {
  font-size: 1.35rem;
  margin-bottom: 0.1rem;
}

.detail-page-header hgroup > p {
  font-size: 0.82rem;
  margin-bottom: 0;
  color: var(--pico-muted-color);
}

/* Formulário de upload — compacto */
.detail-upload-bar {
  margin-bottom: 0;
}

.detail-upload-bar fieldset[role='group'] {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin-bottom: 0.25rem;
}

/* input[type='file'] tem altura intrínseca do browser que ignora padding-block;
   height explícita + font-size menor é o único jeito confiável de comprimir */
.detail-upload-bar input[type='file'] {
  flex: 1;
  min-width: 0;
  padding-block: 0.5rem;
  font-size: 0.875rem;
  margin-bottom: 0;
}

.detail-upload-bar button[type='submit'] {
  --pico-form-element-spacing-vertical: 0.5rem;
  font-size: 0.875rem;
  margin-bottom: 0;
  white-space: nowrap;
  width: auto;
  flex: 0 0 auto;
}

/* Nota informativa abaixo do campo de upload */
.upload-hint {
  padding: 0.5rem 0.75rem;
  background: var(--mandua-beige-light);
  border-left: 3px solid var(--mandua-beige);
  border-radius: var(--pico-border-radius);
  color: var(--pico-muted-color);
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.upload-hint small {
  font-size: var(--pico-small-font-size);
}

.table-actions a[role='button'],
.table-actions button {
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  margin-bottom: 0;
  white-space: nowrap;
}

/* Fundo cinza claro — cards brancos ganham profundidade */
body {
  background-color: #f4f7f6;
}

/* Header compacto ≤ 60px */
body > header nav {
  padding-block: 0.3rem;
}

/* ===== Botão destrutivo outline ===== */
/* Discreto por padrão (só contorno), sólido no hover/active.
   Especificidade (0,2,0) sobrepõe .btn-delete (0,1,0) sem !important */
.btn-delete.outline {
  --pico-background-color: transparent;
  --pico-color: #dc3545;
  --pico-border-color: #dc3545;
}

.btn-delete.outline:hover,
.btn-delete.outline:active,
.btn-delete.outline:focus {
  --pico-background-color: #dc3545;
  --pico-color: #ffffff;
  --pico-border-color: #dc3545;
}

/* ===== Detalhe da lista — footer de ações no article ===== */
.detail-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.detail-actions-bar button,
.detail-actions-bar a[role='button'] {
  width: auto;
  margin-bottom: 0;
  white-space: nowrap;
}

.detail-actions-left,
.detail-actions-right {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Articles mais próximos entre si e padding interno reduzido */
article {
  --pico-block-spacing-vertical: 0.875rem;
  margin-bottom: 0.75rem;
}

/* Título de section dentro de article — discreto */
article > header h2 {
  font-size: 1rem;
  margin-bottom: 0;
}

/* CPF e Papel — tipografia numérica tabelada */
.col-monospace {
  font-variant-numeric: tabular-nums;
  font-size: 0.875em;
  letter-spacing: 0.01em;
}