/* ============================================================
   PAINEL ADMINISTRATIVO — ILUMINAS
   Estilos compartilhados entre painel.html e config.html
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f5f5f5;
  --border: #dde1e7;
  --text: #1a1d23;
  --text-muted: #6b7280;
  --accent: #0066cc;
  --accent-hover: #004fa3;
  --accent-light: #e8f0fb;
  --danger: #dc3545;
  --danger-hover: #b02a37;
  --danger-light: #fce8ea;
  --success: #198754;
  --success-light: #d1e7dd;
  --warning: #d8471d;
  --warning-light: #fde8e2;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --transition: 0.18s ease;
  --font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Skip-link (acessibilidade — WCAG 2.4.1) ────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--warning);
  color: #fff;
  padding: 10px 24px;
  font-weight: 700;
  font-size: .875rem;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  z-index: 10000;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

/* ============================================================
   CABEÇALHO
   ============================================================ */
.admin-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: .5rem 1.5rem;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Permite os filhos quebrarem para a próxima linha quando o conteúdo
     ultrapassar a viewport — todos os items continuam visíveis, sem
     scrollbar horizontal. */
  flex-wrap: wrap;
  row-gap: .5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.admin-header__brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent);
  text-decoration: none;
}

.admin-header__brand svg {
  width: 28px;
  height: 28px;
}

.admin-header__brand img {
  /* O arquivo tem ~10% de margem vazia em cada lado — só 71% dele é desenho.
     Em vez de editar o PNG (ativo institucional), a margem é recortada aqui:
     a imagem é renderizada maior e o clip-path descarta a moldura vazia. As
     margens negativas devolvem o espaço que o recorte deixaria em branco.
     A altura visível (~44px) é o espaço livre do cabeçalho: min-height 60px
     menos 8px de padding em cima e embaixo. Crescer além disso empurra o
     header.
     Percentuais medidos no próprio arquivo (600x337, conteúdo 535x269). */
  height: 55px;
  width: auto;
  display: block;
  clip-path: inset(9.5% 5.4% 10.7% 5.5%);
  margin: -5.2px -5.3px -5.9px -5.4px;
}

.admin-header__badge {
  font-size: .7rem;
  font-weight: 600;
  background: var(--warning-light);
  color: var(--warning);
  border: 1px solid #f5c2ae;
  border-radius: 20px;
  padding: .2rem .6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-nav {
  display: flex;
  gap: .15rem;
  flex-wrap: wrap;
  row-gap: .25rem;
}

.admin-nav a {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .65rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.admin-nav a:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.admin-nav a.active {
  background: var(--accent-light);
  color: var(--accent);
}

/* Link "Site Iluminas" — destaque sutil para orientar o usuário */
.admin-nav__home-link {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  margin-right: .25rem;
}

.admin-nav__home-link:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-light) !important;
}

.admin-header__nav-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  row-gap: .35rem;
}

/* Link "Ver site" no header admin */
.admin-header__ver-site {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .85rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.admin-header__ver-site:hover {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
}

.admin-header__sair {
  padding: .4rem .9rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.admin-header__sair:hover {
  background: var(--danger-light);
  color: var(--danger);
  border-color: var(--danger);
}

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.admin-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.admin-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: .35rem;
}

.admin-page-subtitle {
  color: var(--text-muted);
  font-size: .9rem;
  margin-bottom: 2rem;
}

/* ============================================================
   GRID DE COLUNAS
   ============================================================ */
.admin-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.admin-grid--two {
  grid-template-columns: 400px 1fr;
}

@media (max-width: 900px) {
  .admin-grid--two {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CARD / PAINEL
   ============================================================ */
.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.admin-card__header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.admin-card__title {
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.admin-card--editing {
  border-color: #b8ccef;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, .08), var(--shadow);
}

.admin-card__title svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

.admin-card__body {
  padding: 1.25rem;
}

/* ============================================================
   FORMULÁRIO
   ============================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.form-label .required {
  color: var(--danger);
  margin-left: .15em;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: .6rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,102,204,.12);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  background: var(--surface-alt);
  color: var(--text-muted);
  opacity: 0.6;
  cursor: not-allowed;
  border-color: var(--border);
}

.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220,53,69,.1);
}

.form-input[aria-invalid="true"]:focus,
.form-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(220,53,69,.15);
  border-color: var(--danger);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-hint {
  font-size: .78rem;
  color: var(--text-muted);
}

/* Mensagem de erro inline (validação por campo) */
.form-error-msg {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  color: var(--danger);
  margin-top: .25rem;
  line-height: 1.35;
}

.form-error-msg[hidden] {
  display: none;
}

.form-error-msg::before {
  content: "⚠ ";
  font-weight: 700;
  margin-right: 2px;
}

.admin-inline-summary {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: 1rem;
  font-size: .82rem;
  color: var(--text-muted);
}

.admin-inline-summary strong {
  color: var(--text);
  font-size: .84rem;
}

/* ============================================================
   PREVIEW DE IMAGEM
   ============================================================ */
.img-preview {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-sm);
  border: 2px dashed var(--border);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: .75rem;
  transition: border-color var(--transition);
}

.img-preview.has-image {
  border-style: solid;
  border-color: var(--accent);
}

.img-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.img-preview img.visible {
  display: block;
}

.img-preview__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--text-muted);
  font-size: .85rem;
}

.img-preview__placeholder svg {
  width: 36px;
  height: 36px;
  opacity: .4;
}

.img-preview.has-image .img-preview__placeholder {
  display: none;
}

/* Variantes de aspect ratio para previews lado-a-lado.
   .img-preview--card-desktop ≈ card 3D do carrossel em telas largas (~1:1).
   .img-preview--card-mobile  ≈ card swipe do mobile (~3:4 portrait). */
.img-preview-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.img-preview-col {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.img-preview-tag {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.img-preview--card-desktop {
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
}

.img-preview--card-mobile {
  aspect-ratio: 3 / 4;
  margin-bottom: 0;
}

/* Variantes para o card de destaque de eventos (background-image em
   .evento-destaque-card): wide hero no desktop, vertical-stack no mobile. */
.img-preview--evento-desktop {
  aspect-ratio: 16 / 9;
  margin-bottom: 0;
}

.img-preview--evento-mobile {
  aspect-ratio: 4 / 5;
  margin-bottom: 0;
}

/* Hero do artigo (página de detalhe da notícia) — sempre 2:1, idêntico em
   qualquer breakpoint, então uma única prévia já basta. */
.img-preview--artigo {
  aspect-ratio: 2 / 1;
}

/* Card de iniciativa (sempre 16:10 em qualquer breakpoint). */
.img-preview--iniciativa {
  aspect-ratio: 16 / 10;
}

/* Card do Programa TES (informação ou colaboração) — sempre 4:3. */
.img-preview--tes {
  aspect-ratio: 4 / 3;
}

@media (max-width: 480px) {
  .img-preview-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem 1.1rem;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
}

.btn:active { transform: scale(.97); }

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}

.btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 2px 8px rgba(0,102,204,.25);
}

.btn--danger {
  background: var(--danger-light);
  color: var(--danger);
}

.btn--danger:hover {
  background: var(--danger);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.btn--ghost:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.btn--success {
  background: var(--success);
  color: #fff;
}

.btn--success:hover {
  background: #146c43;
  box-shadow: 0 2px 8px rgba(25,135,84,.25);
}

.btn--full { width: 100%; }

/* Variante compacta — usada nos cards da lista */
.btn--sm {
  padding: .3rem .65rem;
  font-size: .775rem;
  border-radius: 6px;
}
.btn--sm svg { width: 13px; height: 13px; }

.btn-row {
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   LISTA DE NOTÍCIAS
   ============================================================ */
.news-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.news-list__empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  font-size: .9rem;
}

.news-list__empty svg {
  width: 40px;
  height: 40px;
  opacity: .35;
  display: block;
  margin: 0 auto .75rem;
}

/* ============================================================
   CARD DE NOTÍCIA NA LISTA
   ============================================================ */
.news-card {
  display: grid;
  grid-template-columns: 24px 88px 1fr auto; /* handle | thumb | info | ações */
  gap: .75rem;
  align-items: center;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.news-card:hover {
  border-color: #b8c5d8;
  box-shadow: var(--shadow-sm);
}

.news-card--active {
  border-color: #9cbce8;
  background: #f8fbff;
  box-shadow: inset 0 0 0 1px rgba(0, 102, 204, .08);
}

.news-card__thumb {
  /* Preenche a coluna do grid (88px no desktop, 70px no mobile) e mantém 3:2.
     Antes era width:88px fixo — vazava na coluna seguinte quando o grid
     encolhia, encostando o título no thumb. */
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-alt);
}

.news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card__info {
  min-width: 0;
}

.news-card__category {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  margin-bottom: .25rem;
}

.news-card__title {
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .2rem;
}

.news-card__meta {
  font-size: .75rem;
  color: var(--text-muted);
}

.news-card__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .4rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 600;
  border-radius: 20px;
  padding: .15rem .55rem;
}

.badge--new {
  background: var(--success-light);
  color: var(--success);
}

.badge--old {
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ============================================================
   BARRA DE RODAPÉ / EXPORTAÇÃO
   ============================================================ */
.admin-footer-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  z-index: 50;
}

.admin-footer-bar__info {
  font-size: .85rem;
  color: var(--text-muted);
}

.admin-footer-bar__info strong {
  color: var(--text);
}

/* ============================================================
   RANGE INPUT
   ============================================================ */
.range-wrapper {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.range-wrapper input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  height: 6px;
  cursor: pointer;
}

.range-value {
  font-size: .875rem;
  font-weight: 600;
  min-width: 3rem;
  text-align: right;
  color: var(--accent);
}

/* ============================================================
   TOAST / NOTIFICAÇÃO
   ============================================================ */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  box-shadow: var(--shadow);
  font-size: .875rem;
  max-width: 360px;
  animation: toast-in .25s ease;
}

.toast.toast--success { border-left-color: var(--success); }
.toast.toast--danger  { border-left-color: var(--danger); }
.toast.toast--warning { border-left-color: var(--warning); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Toast com botão de ação (ex: Desfazer) ──────────────────────────── */
.toast--with-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}

.toast__text {
  flex: 1;
  line-height: 1.4;
}

.toast__action {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--accent, #d8471d);
  color: var(--accent, #d8471d);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 140ms, color 140ms;
  margin-bottom: .55rem;
}

.toast__action:hover,
.toast__action:focus-visible {
  background: var(--accent, #d8471d);
  color: #fff;
}

.toast__action:focus-visible {
  outline: 2px solid var(--accent, #d8471d);
  outline-offset: 2px;
}

.toast__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--accent, #d8471d);
  transform-origin: left;
  animation: toast-countdown linear forwards;
}

@keyframes toast-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .toast__progress { animation: none; opacity: .3; }
}

/* ============================================================
   DIVISOR
   ============================================================ */
.divider {
  height: 1px;
  background: var(--border);
  margin: 1.25rem 0;
}

/* ============================================================
   CONTADOR DE NOTÍCIAS
   ============================================================ */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}

/* ============================================================
   UPLOAD ZONE (painel.html e agenda.html)
   ============================================================ */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  position: relative;
}
.upload-zone:hover,
.upload-zone:focus-within {
  border-color: var(--accent);
  background: var(--accent-light);
}
.upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.upload-zone__icon svg {
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.upload-zone__text {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.upload-zone__text strong { color: var(--accent); }
.upload-zone.has-file {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-light);
}
.upload-zone.has-file .upload-zone__icon svg { color: var(--accent); }
.upload-zone.uploading {
  pointer-events: none;
  opacity: .6;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: .2rem .7rem .2rem .45rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: .5rem;
}
.file-chip svg { width: 13px; height: 13px; }

/* ============================================================
   STATUS DO SERVIDOR
   ============================================================ */
.server-status {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 500;
  padding: .35rem .75rem;
  border-radius: 20px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.server-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #adb5bd;
  flex-shrink: 0;
  transition: background .3s;
}
.server-status--online .server-status__dot  { background: #28a745; }
.server-status--offline .server-status__dot { background: #dc3545; }
.server-status--online  { color: #155724; border-color: #c3e6cb; background: #d4edda; }
.server-status--offline { color: #721c24; border-color: #f5c6cb; background: #f8d7da; }

/* ============================================================
   AGENDA — componentes específicos (agenda.html)
   ============================================================ */
.optional-label {
  font-size: .72rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: .3rem;
  font-style: italic;
}

.badge--destaque {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
  font-size: .7rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 10px;
  margin-left: .4rem;
  text-transform: uppercase;
}

.evento-card {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: .6rem;
  transition: border-color .15s;
}
.evento-card:hover { border-color: var(--accent); }
.evento-card.is-destaque { border-color: #ffc107; background: #fffdf0; }

.evento-card__thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.evento-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.evento-card__thumb svg { width: 24px; height: 24px; color: var(--text-muted); }
.evento-card__info { flex: 1; min-width: 0; overflow: hidden; }
.evento-card__data { font-size: .72rem; color: var(--text-muted); margin-bottom: .2rem; }
.evento-card__categoria {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(0,0,0,.07);
  color: var(--text);
  padding: .1rem .4rem;
  border-radius: 3px;
  margin-bottom: .25rem;
}
.evento-card__titulo {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evento-card__titulo-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;        /* herda a restrição do flex pai */
  margin-bottom: .05rem;
}
.evento-card__meta { font-size: .75rem; color: var(--text-muted); margin-top: .2rem; }
.evento-card__actions {
  display: flex;
  flex-direction: row;   /* botões lado a lado */
  flex-wrap: wrap;       /* quebra se não couber */
  gap: .4rem;
  flex-shrink: 0;
  align-items: center;
}

/* Notebook/médio: coluna direita estreita (2 painéis, 900-1100px) →
   ações ficam numa linha abaixo, alinhadas com a info */
@media (min-width: 621px) and (max-width: 1100px) {
  .evento-card {
    flex-wrap: wrap;
  }
  .evento-card__actions {
    flex: 0 0 100%;
    padding-left: calc(60px + .75rem);
  }
}

/* ============================================================
   DRAG-AND-DROP — Reordenação de notícias (v2.21.7)
   ============================================================ */
.news-card .drag-handle {
  cursor: grab;
  color: #9ca3af;
  padding: .25rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  width: 24px;
}
.news-card .drag-handle:hover { color: #4b5563; }
.news-card.is-dragging  { opacity: .35; }
.news-card.drag-over-before { box-shadow: 0 -3px 0 0 var(--warning); }
.news-card.drag-over-after  { box-shadow: 0 3px 0 0 var(--warning); }

/* ============================================================
   INICIATIVAS — editor e cards da nova tela
   ============================================================ */
.editor-toolbar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.editor-toolbar__btn {
  min-height: 36px;
  padding: 0 .8rem;
}

.editor-toolbar__btn.is-active,
.editor-toolbar__btn[aria-pressed="true"] {
  background: rgba(216, 71, 29, .12);
  border-color: rgba(216, 71, 29, .55);
  color: var(--accent, #d8471d);
  box-shadow: 0 0 0 2px rgba(216, 71, 29, .12);
}

.editor-surface {
  min-height: 260px;
  /* Cap da altura — sem isso, colar um texto longo faz o editor esticar
     até o conteúdo final passar atrás da .admin-footer-bar (sticky bottom).
     Com max-height + overflow-y, o texto rola dentro do próprio editor e o
     botão "Salvar" continua acessível logo abaixo. */
  max-height: 60vh;
  overflow-y: auto;
  /* Cap horizontal — garante que o editor nunca exceda a largura do
     contêiner pai, mesmo dentro de grids/flex. */
  max-width: 100%;
  overflow-x: hidden;
  /* Quebra automática para palavras longas (URLs, strings sem espaço)
     que normalmente atravessariam a borda direita. `overflow-wrap` cobre
     palavras com espaço próximo; `word-break` força a quebra quando não
     houver oportunidade natural (ex.: URL longa colada). */
  overflow-wrap: anywhere;
  word-break: break-word;
  /* overscroll-behavior contém o scroll dentro do editor — evita que o
     scroll da página seja capturado quando se chega no fim do conteúdo. */
  overscroll-behavior: contain;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 16px;
  background: #fff;
  padding: 1rem;
  line-height: 1.7;
}

/* Filhos do editor herdam a regra de quebra para que conteúdo aninhado
   (parágrafos, listas, blocos de código) também respeite a largura. */
.editor-surface * {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* `pre` precisa preservar quebras intencionais sem deixar de quebrar
   linhas longas — `pre-wrap` mantém formatação e ainda quebra na borda. */
.editor-surface pre {
  white-space: pre-wrap;
}

/* Listas alinhadas como em editor de texto (Word, Google Docs): o marcador
   começa na mesma coluna do texto do parágrafo anterior, e as linhas que
   continuam o item ficam recuadas atrás dele (recuo pendente).

   `list-style-position: inside` põe o marcador dentro da caixa — é o que o
   traz para a coluna do parágrafo; sozinho, porém, ele faria a segunda linha
   voltar para baixo do marcador. O par `padding-left` + `text-indent` negativo
   de mesmo valor conserta isso: a primeira linha recua para trás (ficando na
   margem), as demais param no padding. 1.35em é a medida em que a primeira
   linha e as continuadas coincidem — medido no editor, não estimado. */
.editor-surface ul,
.editor-surface ol {
  padding-left: 0;
}

.editor-surface li {
  list-style-position: inside;
  padding-left: 1.35em;
  text-indent: -1.35em;
  margin-bottom: .55rem;
}

.editor-surface:focus {
  outline: 3px solid rgba(216, 71, 29, .18);
  border-color: rgba(216, 71, 29, .4);
}

.editor-surface img {
  max-width: 100%;
  border-radius: 12px;
  display: block;
}

.editor-surface figure {
  margin: 1rem 0;
  display: grid;
  gap: .5rem;
}

.iniciativas-admin-card {
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 1rem;
  padding: 1rem;
}

.iniciativas-admin-card__thumb {
  width: 120px;
  height: 120px;
  border-radius: 14px;
  align-self: stretch;
}

.iniciativas-admin-card__thumb.news-card__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-muted);
}

.iniciativas-admin-card__info {
  display: grid;
  align-content: start;
  gap: .55rem;
  padding-right: .5rem;
}

.iniciativas-admin-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.iniciativas-admin-card .news-card__title {
  font-size: 1rem;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  margin: 0;
}

.iniciativas-admin-card .news-card__description {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.iniciativas-admin-card__actions {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-width: 126px;
}

.iniciativas-admin-card__actions .btn {
  justify-content: center;
}

.iniciativas-admin-layout {
  display: grid;
  gap: 1.5rem;
}

.admin-stack-layout {
  display: grid;
  gap: 1.5rem;
}

.noticias-admin-layout {
  display: grid;
  gap: 1.5rem;
}

.noticias-admin-card__header-main {
  display: grid;
  gap: .35rem;
}

.noticias-admin-form__context {
  margin: 0;
  font-size: .88rem;
}

.iniciativas-admin-card__header-main {
  display: grid;
  gap: .35rem;
}

.iniciativas-admin-form__context {
  margin: 0;
  font-size: .88rem;
}

.iniciativas-admin-card--active {
  border-color: #9cbce8;
  background: #f8fbff;
  box-shadow: inset 0 0 0 1px rgba(0, 102, 204, .08);
}

.tes-admin-nav {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}

.tes-admin-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .08);
  background: #fff;
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
}

.tes-admin-nav__link--active,
.tes-admin-nav__link[aria-current="page"] {
  background: rgba(0, 102, 204, .08);
  border-color: rgba(0, 102, 204, .18);
  color: var(--brand-primary);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 620px) {
  .admin-main { padding: 1.25rem 1rem; }

  .news-card {
    grid-template-columns: 24px 70px 1fr; /* handle | thumb | info */
    grid-template-rows: auto auto;
  }

  .news-card__actions {
    grid-column: 2 / -1; /* da thumb até o fim */
    flex-direction: row;
    justify-content: flex-end;
  }

  .iniciativas-admin-card {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
  }

  .iniciativas-admin-card__thumb {
    width: 84px;
    height: 84px;
  }

  .iniciativas-admin-card__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    min-width: 0;
    justify-content: flex-start;
  }

  .evento-card {
    flex-wrap: wrap;
  }
  .evento-card__actions {
    flex: 0 0 100%;
    padding-left: calc(60px + .75rem);
    justify-content: flex-end;
  }

  .admin-footer-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* ============================================================
   AGENDA — classes extraídas de inline styles
   ============================================================ */

/* Cabeçalho da página com status do servidor */
.agenda-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.agenda-page-header__title-group { /* coluna com título + subtítulo */ }
.agenda-page-header__title { margin-bottom: .25rem; }
.agenda-page-header__subtitle { margin: 0; }
.agenda-page-header__status {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: flex-end;
}
.agenda-api-badge { font-size: .72rem; }

/* Grid de data + hora lado a lado */
.form-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

/* Botão de ações do rodapé */
.footer-actions-bar {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Card de config rápida da agenda */
.admin-card--agenda-config { margin-top: 1rem; }

/* Inline no modal — nada a extrair (já usa var(--surface) etc.) */

/* ── Badge "Salvo" sobre card (AdminFeedback.flashSaved) ────────── */
.admin-flash-saved {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(46, 160, 67, 0.95);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(46, 160, 67, 0.35);
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 5;
  pointer-events: none;
}

.admin-flash-saved.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.admin-flash-saved svg {
  width: 16px;
  height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .admin-flash-saved {
    transition: opacity 0s;
    transform: none;
  }
}

/* Marcador "rascunho não salvo" próximo ao botão de salvar */
.admin-dirty-indicator {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--warning, #b85c00);
}

.admin-dirty-indicator.is-visible {
  display: inline-flex;
}

.admin-dirty-indicator::before {
  content: "●";
  color: var(--warning, #b85c00);
  font-size: 0.9rem;
  animation: dirty-pulse 1.6s ease-in-out infinite;
}

@keyframes dirty-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-dirty-indicator::before { animation: none; }
}

/* ── Upload progress (injetado por AdminUpload.start) ─────────────── */
.upload-zone.is-uploading { pointer-events: none; opacity: .92; }

.upload-progress {
  display: none;
  margin-top: 10px;
  padding: 8px 10px 10px;
  background: rgba(216, 71, 29, 0.06);
  border-radius: 8px;
}

.upload-progress__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--orange, #d8471d);
  margin-bottom: 6px;
}

.upload-progress__track {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
  height: 6px;
}

.upload-progress__bar {
  background: var(--orange, #d8471d);
  height: 100%;
  width: 0%;
  transition: width 120ms linear;
}

/* ── Filtro de moderação (painel de projetos) ────────────────────────────────
   O visual vem de `.chip` em css/projetos.css, o mesmo controle de filtro da
   listagem pública — esta página carrega os dois arquivos. Aqui ficam só as
   diferenças: o rótulo, o contador dentro do chip e o realce da fila.
   Centralizado no card porque o bloco é uma escolha única sobre o que a lista
   abaixo mostra, e não um conjunto de ações espalhadas. */
.moderacao-filtro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  /* Respiro nos dois lados: o bloco separa a busca (acima) da lista (abaixo) e
     precisa se ler como faixa própria, não como apêndice de nenhuma das duas. */
  margin: 1.75rem 0 1.75rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border, #dde1e7);
  border-radius: 14px;
  background: var(--surface-muted, #f7f9fb);
}

.moderacao-filtro__rotulo {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
}

.moderacao-filtro__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

/* Chips maiores que os da listagem pública: aqui são o controle principal da
   tela, não um filtro secundário ao lado de outros. */
.moderacao-filtro .chip {
  padding: .45rem 1rem;
  font-size: .82rem;
}

/* Contador dentro do chip: pertence ao rótulo, não é elemento à parte. */
.moderacao-aba__n {
  min-width: 1.3rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .07);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.3rem;
  text-align: center;
}

/* No chip ativo o contador inverte junto, senão vira uma mancha clara. */
.moderacao-aba.is-ativa .moderacao-aba__n {
  background: rgba(255, 255, 255, .28);
  color: #fff;
}

/* A fila é o único filtro que representa trabalho pendente: ganha o mesmo
   âmbar da tarja "Aguardando aprovação" e da faixa do topo. Quando está
   selecionada, porém, segue a regra geral do chip ativo — dois destaques
   competindo anulam os dois. */
.moderacao-aba--fila:not(.is-ativa) {
  background: #fff8e1;
  border-color: #f3df9d;
  color: #7a5600;
}

.moderacao-aba--fila:not(.is-ativa):hover {
  background: #fef3c7;
  border-color: #e6cd7a;
}

.moderacao-aba--fila:not(.is-ativa) .moderacao-aba__n {
  background: rgba(122, 86, 0, .14);
  color: #7a5600;
}

/* Fila vazia: sem trabalho pendente, o chip perde o realce e o destaque volta
   a significar alguma coisa quando reaparecer. */
.moderacao-aba--fila.esta-vazia:not(.is-ativa) {
  background: var(--surface, #fff);
  border-color: var(--border, #dde1e7);
  color: var(--text-muted, #6b7280);
}

.moderacao-aba--fila.esta-vazia:not(.is-ativa) .moderacao-aba__n {
  background: rgba(0, 0, 0, .07);
  color: inherit;
}

/* ── Faixa de moderação (painel de projetos) ─────────────────────────────────
   Só é exibida quando há fila. Fica acima do formulário porque, quando existem
   projetos aguardando, revisar é a tarefa urgente e criar não é. Âmbar, a mesma
   leitura da tarja de "Aguardando aprovação" nos cards. */
.aviso-moderacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-bottom: 1.25rem;
  padding: .9rem 1.1rem;
  border: 1px solid #f3df9d;
  border-left: 4px solid #d9a400;
  border-radius: 12px;
  background: #fff8e1;
}

.aviso-moderacao__texto {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.aviso-moderacao__texto strong {
  color: #7a5600;
  font-size: .95rem;
}

.aviso-moderacao__texto .form-hint {
  color: #8a6300;
}

/* A lista recebe foco programático ao vir da faixa ou do atalho público; sem
   isto o navegador desenha um contorno de foco onde ninguém clicou. */
#projetosList:focus {
  outline: none;
}

/* Motivo da recusa no card do painel: lembra o admin do que ele mesmo pediu,
   sem precisar abrir o projeto. */
.card-motivo-recusa {
  margin: .35rem 0 0;
  padding: .4rem .6rem;
  border-left: 3px solid #d9534f;
  border-radius: 6px;
  background: #fdecea;
  color: #7a1a12;
  font-size: .8rem;
  line-height: 1.4;
}

/* "Recusar" é destrutivo, mas convive com "Aprovar" no mesmo card: fica
   discreto até o ponteiro chegar, para não competir com a ação positiva. */
.btn--recusar { color: #b42318; }
.btn--recusar:hover { background: #fdecea; border-color: #f3c2bc; }