/* Guia de Cuidados com Alinhadores — material impresso anexável ao contrato.
   Identidade visual JusOdonto, baseado em docs/guia-alinhadores2.
   Carregado automaticamente via stylesheet_link_tag :app. */

.acg-wrap {
  --acg-ink: #102a43;
  --acg-ink-soft: #3a5570;
  max-width: 1240px;
  margin: 0 auto;
  padding: 1rem 0.75rem 1.4rem;
  color: var(--acg-ink-soft);
}

.acg-toolbar {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.acg-btn-ic {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

.acg-material {
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 46px -34px rgb(11 37 60 / 42%);
  padding: 1rem;
}

/* ---------- Cabeçalho ---------- */
.acg-header {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  border-radius: 16px;
  padding: 1.15rem 1.4rem;
  background:
    radial-gradient(circle at 18% -10%, rgb(255 255 255 / 14%) 0, transparent 32%),
    radial-gradient(circle at 88% 120%, rgb(43 159 196 / 35%) 0, transparent 40%),
    linear-gradient(120deg, #0a2f5e 0%, #135fae 48%, #0a356b 100%);
  box-shadow: 0 16px 26px -22px rgb(12 43 72 / 70%);
  color: #f4fbff;
}

.acg-header-text {
  display: grid;
  gap: 0.3rem;
}

.acg-kicker {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 700;
  color: #b8dcff;
}

.acg-kicker svg { width: 0.8rem; height: 0.8rem; fill: currentColor; }

.acg-title {
  margin: 0;
  font-family: "Montserrat", "Poppins", sans-serif;
  font-size: clamp(1.55rem, 1rem + 1.9vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: #ffffff;
  text-shadow: 0 2px 8px rgb(8 29 48 / 35%);
}

.acg-title span { color: #8fc6ff; }

.acg-logo {
  width: min(190px, 38vw);
  height: auto;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
  opacity: 0.96;
}

/* Logo da clínica: chip branco para garantir contraste sobre o cabeçalho azul,
   independente das cores da logo enviada. */
.acg-logo-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 18px -10px rgb(8 29 48 / 45%);
}

.acg-logo-chip img {
  display: block;
  width: auto;
  max-width: min(260px, 46vw);
  max-height: 96px;
  height: auto;
  object-fit: contain;
}

/* ---------- Grade de cards ---------- */
.acg-grid {
  margin-top: 1rem;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.acg-card {
  --c: #1d6fd6;
  --bg: #eef5ff;
  --bd: #d6e6fb;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bd);
  border-radius: 16px;
  background: var(--bg);
  padding: 0.75rem 0.85rem 0.8rem;
}

.acg-card--blue   { --c: #1d6fd6; --bg: #eef5ff; --bd: #d4e4fb; }
.acg-card--teal   { --c: #12998a; --bg: #e8f8f4; --bd: #c6ece4; }
.acg-card--sky    { --c: #2f8fd8; --bg: #eaf5ff; --bd: #cee7fb; }
.acg-card--green  { --c: #4a9e3f; --bg: #eef8ea; --bd: #d3ecca; }
.acg-card--purple { --c: #7c54c9; --bg: #f2edfc; --bd: #e0d4f6; }
.acg-card--orange { --c: #e2862a; --bg: #fff4e7; --bd: #f8dcb9; }
.acg-card--pink   { --c: #c43c86; --bg: #fceef6; --bd: #f4d3e6; }
.acg-card--red    { --c: #d7443e; --bg: #fdecec; --bd: #f7cfce; }
.acg-card--cyan   { --c: #2b9fc4; --bg: #e9f6fb; --bd: #cbe9f2; }

.acg-card-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}

.acg-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  color: #ffffff;
  background: var(--c);
  box-shadow: 0 5px 12px -3px color-mix(in srgb, var(--c) 55%, transparent);
}

.acg-card-title {
  margin: 0;
  font-family: "Montserrat", "Poppins", sans-serif;
  color: var(--c);
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

.acg-card-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.acg-card-figure {
  flex: 0 0 auto;
  margin: 0;
  width: 83px;
  align-self: center;
}

.acg-card-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 14px -10px rgb(16 42 67 / 45%);
}

/* Ícones 02 e 03 (fundo opaco): mantêm cantos arredondados, sem sombra. */
.acg-card--teal .acg-card-figure img,
.acg-card--sky .acg-card-figure img {
  box-shadow: none;
}

/* Card 2 tem o texto mais longo: linhas e itens mais juntos. */
.acg-card--teal .acg-list {
  gap: 0.35rem;
}

/* Cards 2 e 8: linhas e letras mais compactas. */
.acg-card--teal .acg-list li,
.acg-card--red .acg-list li {
  line-height: 1.28;
  letter-spacing: -0.015em;
}

/* Ícones com fundo transparente (01, 04, 05, 06, 07, 08, 09): sem moldura/sombra. */
.acg-card--blue .acg-card-figure img,
.acg-card--green .acg-card-figure img,
.acg-card--purple .acg-card-figure img,
.acg-card--pink .acg-card-figure img,
.acg-card--red .acg-card-figure img,
.acg-card--cyan .acg-card-figure img,
.acg-card--orange .acg-card-figure img {
  border-radius: 0;
  box-shadow: none;
}

.acg-list {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.acg-list li {
  position: relative;
  padding-left: 0.95rem;
  color: var(--acg-ink-soft);
  font-size: 0.97rem;
  line-height: 1.38;
}

.acg-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.46rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
}

/* ---------- Faixa IMPORTANTE ---------- */
.acg-important {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 16px;
  padding: 1rem 1.3rem;
  background:
    radial-gradient(circle at 90% 120%, rgb(43 159 196 / 30%) 0, transparent 42%),
    linear-gradient(120deg, #0a2f5e 0%, #135fae 55%, #0a356b 100%);
  color: #f4fbff;
  box-shadow: 0 16px 26px -22px rgb(12 43 72 / 65%);
}

.acg-important-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 14%);
  border: 1px solid rgb(255 255 255 / 32%);
  color: #ffffff;
}

.acg-important-icon svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }

.acg-important h3 {
  margin: 0 0 0.2rem;
  font-family: "Montserrat", "Poppins", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
}

.acg-important p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.46;
  color: rgb(234 245 255 / 95%);
}

/* ---------- Rodapé ---------- */
.acg-footer {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #135fae;
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.84rem;
}

.acg-footer svg { width: 0.95rem; height: 0.95rem; fill: #2b9fc4; }

/* ---------- Modo "share": fixa a largura (3 colunas) ao gerar a imagem -------
   O visual (cards, fonte, espaçamento) é o mesmo da tela; aqui só garantimos
   a largura fixa para a imagem sair sempre quadrada/consistente, independente
   do tamanho da janela. Aplicado pelo controller guide-export. */
.acg-material--share {
  width: 1180px;
}

.acg-material--share .acg-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .acg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acg-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .acg-grid { grid-template-columns: 1fr; }
  .acg-wrap { padding: 0.7rem 0.55rem 1rem; }
  .acg-material { padding: 0.8rem; border-radius: 16px; }
  .acg-important { flex-direction: column; text-align: center; }
}

/* ---------- Impressão ---------- */
@media print {
  @page {
    size: A4 landscape;
    margin: 7mm;
  }

  .no-print { display: none !important; }

  .acg-wrap { max-width: none; padding: 0; margin: 0; }

  .acg-material { box-shadow: none; border-radius: 0; padding: 0; }

  .acg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6pt; }

  .acg-header,
  .acg-important,
  .acg-card,
  .acg-num,
  .acg-card-title,
  .acg-list li::before,
  .acg-important-icon {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .acg-card,
  .acg-important,
  .acg-header {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}