/* ==========================================================================
   Agregador de imagens — folha própria, carregada DEPOIS de styles.css.

   Mora aqui, e não em styles.css, por causa do bloco @media print no fim do
   arquivo: um `@page { margin: 0 }` global quebraria o Ctrl+P de index.php,
   juntar.php, editar.php, about.html e privacy.html — em silêncio.

   ⚠ Nenhuma regra deste arquivo pode usar `display: … !important`: o
   `[hidden] { display: none !important }` de styles.css precisa continuar
   vencendo, senão nascem overlays invisíveis que comem cliques.
   ========================================================================== */

.ag-shell {
  /* O design pede 1360px; a .container do site é 1240. */
  max-width: 1360px;
  margin: 0 auto;
  padding: 32px 24px 64px;

  /* Tokens do design, escopados na ferramenta. */
  --ag-card-bd: #c7ccd3;
  --ag-card-r: 16px;
  --ag-card-sh: 0 4px 12px rgba(17, 24, 39, .12);
  --ag-input-bd: #9ca3af;
  --ag-input-r: 10px;
  --ag-focus: #93c5fd;
  --ag-panel: #eef0f2;
  --ag-ink: #111827;
  --ag-ink-2: #4b5563;
  --ag-muted: #6b7280;
  --ag-soft: #f3f4f6;
  --ag-thumb-bg: #f9fafb;
  --ag-thumb-bd: #e5e7eb;
  --ag-check: #2563eb;
}

.ag-title {
  margin: 0 0 6px;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ag-ink);
  text-transform: uppercase;
}

.ag-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.ag-layout__controls {
  flex: 1 1 380px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  /* .site-header é sticky com ~65px; 16px deixaria a coluna por baixo dele. */
  top: 85px;
}

.ag-layout__viewer {
  flex: 2 1 480px;
  min-width: 340px;
}

/* ---------------------------------------------------------------- Cards -- */

.ag-card {
  background: #fff;
  border: 1px solid var(--ag-card-bd);
  border-radius: var(--ag-card-r);
  box-shadow: var(--ag-card-sh);
  padding: 20px;
}

.ag-card__label {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ag-ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ag-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* Botões: a família .btn do site, com o raio e a sombra do design. */
.ag-shell .btn {
  border-radius: var(--ag-input-r);
  padding: 9px 16px;
  font-size: 14px;
}
.ag-shell .btn--primary {
  box-shadow: 0 6px 14px rgba(15, 23, 42, .45);
}
.ag-shell .btn--primary:not(:disabled):hover {
  box-shadow: 0 8px 18px rgba(15, 23, 42, .5);
}
.ag-shell .btn--ghost {
  color: #374151;
  border-color: var(--ag-input-bd);
  box-shadow: 0 2px 5px rgba(17, 24, 39, .12);
}
.ag-shell .btn--ghost:not(:disabled):hover {
  background: var(--ag-soft);
  box-shadow: 0 3px 7px rgba(17, 24, 39, .16);
}
.ag-shell .btn--danger-soft {
  color: var(--color-danger);
  border-color: var(--color-danger-soft);
}
.ag-shell .btn--icon {
  padding: 6px 10px;
  box-shadow: none;
}

/* Campos */
.ag-input {
  border-color: var(--ag-input-bd);
  border-radius: var(--ag-input-r);
  font-size: 14px;
  color: var(--ag-ink);
}
.ag-input:focus-visible {
  outline: 2px solid var(--ag-focus);
  outline-offset: 1px;
  border-color: var(--ag-focus);
}
.ag-input--num {
  width: 4.5em;
}

/* ------------------------------------------------------------ Importar -- */

.ag-drop {
  border: 1.5px dashed var(--ag-muted);
  background: var(--ag-soft);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
}
.ag-drop[data-state="over"] {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}
.ag-drop__text {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ag-ink);
}
.ag-drop__hint {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--ag-ink);
}

.ag-intake {
  margin-top: 14px;
}
.ag-intake__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.ag-intake__label {
  font-size: 12.5px;
  color: var(--ag-muted);
}

/* Pendências: falhas de importação que travam o Imprimir (§10). */
.ag-pend {
  margin-top: 14px;
  border: 1px solid var(--color-danger-soft);
  background: #fff5f5;
  border-radius: 12px;
  padding: 12px;
}
.ag-pend__head {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-danger);
}
.ag-pend__list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ag-pend__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ag-pend__msg {
  font-size: 12.5px;
  color: var(--ag-ink-2);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.ag-shell .ag-pend__dismiss {
  padding: 4px 10px;
  font-size: 12.5px;
  flex: none;
}

/* ------------------------------------------------------------- Galeria -- */

.ag-gallery__notice {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ag-muted);
}

.ag-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}

.ag-thumb {
  position: relative;
  border: 1px solid var(--ag-thumb-bd);
  border-radius: 12px;
  padding: 8px;
  background: var(--ag-thumb-bg);
  cursor: grab;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ag-thumb:focus-visible {
  outline: 3px solid var(--color-primary-soft);
  outline-offset: 2px;
}
.ag-thumb.is-selected {
  border-color: var(--ag-check);
  box-shadow: 0 0 0 1px var(--ag-check);
}
.ag-thumb.is-dragging {
  opacity: .4;
  cursor: grabbing;
}
.ag-thumb.is-drop-target-before { box-shadow: -3px 0 0 var(--color-primary); }
.ag-thumb.is-drop-target-after  { box-shadow:  3px 0 0 var(--color-primary); }

.ag-thumb__check {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ag-check);
  cursor: pointer;
  z-index: 1;
}

.ag-thumb__box {
  width: 100%;
  height: 52px;
  margin-top: 4px;
  background: var(--ag-panel);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ag-thumb__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* --------------------------------------------------------------- Grade -- */

.ag-grade {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.ag-grade__field {
  flex: none;
}
.ag-grade__field .field-label {
  margin: 0 0 5px;
  font-size: 12.5px;
  color: var(--ag-ink);
}
.ag-shell .ag-grade__print {
  flex: 1 1 140px;
  justify-content: center;
  padding: 11px 16px;
}

/* -------------------------------------------------------- Visualizador -- */

.ag-viewer__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ag-viewer__group {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* .seg--last zera a borda esquerda para encostar no irmão. */
.ag-viewer__group .seg {
  border-radius: var(--ag-input-r) 0 0 var(--ag-input-r);
}
.ag-viewer__group .seg--last {
  border-radius: 0 var(--ag-input-r) var(--ag-input-r) 0;
}
.ag-viewer__zoom {
  min-width: 4ch;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ag-muted);
}

.ag-viewer__panel {
  background: var(--ag-panel);
  border-radius: var(--ag-card-r);
  padding: 20px;
  overflow: auto;
}

.ag-viewer__pages {
  /* O ÚNICO token da geometria. O JS sobrescreve; o @media print o troca por
     1mm e as mesmas regras passam a imprimir em milímetros reais. */
  --ag-mm: 2.4px;
  --ag-rows: 3;
  --ag-cols: 2;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

.ag-page {
  flex: none;
  width: calc(210 * var(--ag-mm));
  height: calc(297 * var(--ag-mm));
  /* Topo = margem 2mm + faixa de 6mm espelhando o rodapé, para o respiro
     ficar igual em cima e embaixo (8mm de cada lado). Laterais e base seguem
     na margem de 2mm; a faixa do rodapé é a última linha da grade. */
  padding: calc(8 * var(--ag-mm)) calc(2 * var(--ag-mm)) calc(2 * var(--ag-mm));
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
  display: grid;
  grid-template-rows: 1fr calc(6 * var(--ag-mm));
}

.ag-page__grid {
  display: grid;
  grid-template-columns: repeat(var(--ag-cols), 1fr);
  grid-template-rows: repeat(var(--ag-rows), 1fr);
  /* linha 6mm · coluna 3mm */
  gap: calc(6 * var(--ag-mm)) calc(3 * var(--ag-mm));
  min-height: 0;
  min-width: 0;
}

.ag-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.ag-cell__img {
  /* Imagem inteira, proporcional e centralizada: sem recorte, sem distorção. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ag-page__footer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: calc(2 * var(--ag-mm));
}
.ag-page__counter {
  /* 8 pt = 8 × 25.4/72 mm. Escala junto com a folha. */
  font-size: calc(2.8222 * var(--ag-mm));
  line-height: 1;
  color: var(--ag-muted);
}

.ag-viewer__empty {
  background: #fff;
  border: 1px solid var(--ag-card-bd);
  border-radius: var(--ag-card-r);
  box-shadow: var(--ag-card-sh);
  min-height: 340px;
}

.ag-viewer__counter {
  margin: 12px 0 0;
  text-align: right;
  font-size: 12.5px;
  color: var(--ag-muted);
}

/* ------------------------------------------------------------ Overlays -- */

.overlay--ag {
  background: rgba(17, 24, 39, .5);
}
.overlay--ag .overlay__card {
  border-radius: var(--ag-card-r);
  padding: 24px;
  max-width: 420px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .2);
  text-align: left;
}
.overlay--ag .overlay__title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--ag-ink);
}
.overlay--ag .overlay__message {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ag-ink-2);
}
.overlay--ag .overlay__actions {
  justify-content: flex-end;
  margin-top: 18px;
}
.overlay--ag .btn {
  border-radius: var(--ag-input-r);
  padding: 9px 16px;
  font-size: 14px;
}
.overlay--ag .btn--primary {
  box-shadow: 0 6px 14px rgba(15, 23, 42, .45);
}
.overlay--ag .btn--ghost {
  color: #374151;
  border-color: var(--ag-input-bd);
  box-shadow: 0 2px 5px rgba(17, 24, 39, .12);
}
.overlay--ag .field-label {
  margin: 0 0 5px;
  font-size: 12.5px;
  color: var(--ag-ink);
}
.overlay--ag .field {
  border-color: var(--ag-input-bd);
  border-radius: var(--ag-input-r);
  font-size: 14px;
}

.ag-print__filename {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: var(--ag-soft);
  border: 1px solid var(--ag-thumb-bd);
  border-radius: var(--ag-input-r);
  padding: 10px 12px;
  margin: 0;
  color: var(--ag-ink);
  overflow-wrap: anywhere;
}

.ag-move__fields {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.overlay--ag-light .overlay__card {
  max-width: min(920px, 92vw);
}
.ag-lightbox__frame {
  background: var(--ag-panel);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 70vh;
}
.ag-lightbox__img {
  max-width: 100%;
  max-height: calc(70vh - 24px);
  object-fit: contain;
  display: block;
}

/* ---------------------------------------------------------- Responsivo -- */

@media (max-width: 980px) {
  .ag-layout__controls {
    position: static;
    top: auto;
  }
}

@media (max-width: 720px) {
  .ag-shell { padding: 20px 16px 48px; }
  .ag-title { font-size: 22px; }
  .ag-layout { gap: 16px; }
  .ag-viewer__panel { padding: 12px; }
  .ag-viewer__pages { gap: 12px; }
}

/* ========================================================================
   Impressão — a MESMA composição da prévia.

   `--ag-mm: 1mm` faz cada `calc(N * var(--ag-mm))` virar literalmente N mm.
   Por isso o token mora em .ag-viewer__pages (ancestral comum) e nunca em
   .ag-page: é uma regra só que precisa vencer.
   ======================================================================== */

@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }

  .site-header,
  .site-footer,
  .skip-link,
  .toast-host,
  .ag-title,
  .ag-layout__controls,
  .ag-viewer__toolbar,
  .ag-viewer__counter,
  .ag-viewer__empty,
  .overlay {
    display: none;
  }

  body {
    background: #fff;
    display: block;
  }

  .ag-shell {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .ag-layout { display: block; }
  .ag-layout__viewer {
    min-width: 0;
    width: 100%;
  }

  .ag-viewer__panel {
    background: #fff;
    border-radius: 0;
    padding: 0;
    overflow: visible;
  }

  .ag-viewer__pages {
    /* ⚠ O `!important` aqui não é preguiça — é obrigatório. O zoom escreve
       `--ag-mm` no atributo style DESTE elemento, e declaração inline vence
       qualquer regra de folha. Sem isto a folha impressa sai no tamanho do
       zoom de tela (uma A4 a 44%) e NADA na prévia denuncia o erro.
       É o único `!important` do arquivo, e nunca em `display`. */
    --ag-mm: 1mm !important;
    display: block;
    gap: 0;
  }

  .ag-page {
    border-radius: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  .ag-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .ag-page__counter {
    color: #000;
  }
}