.conteiner { max-width:1200px; margin:auto; padding:30px; font-family: 'Segoe UI', Arial, sans-serif; color:#333; }

/* ---------- Cabeçalho ---------- */
/* Endosso institucional (padrão do Manual): solto no topo, sobre o fundo da página */
.brand-header { text-align:center; padding:30px 20px 16px; }

/* Título do canal em bloco próprio, no MESMO padrão do card "Encarregado":
   heading azul à esquerda + texto justificado. */
.section-titulo h1 { color:#0d47a1; font-size:1.5em; font-weight:700; margin:0 0 14px; line-height:1.3; }
.section-titulo p { line-height:1.7; text-align:justify; }

/* Endosso institucional como "placa" refinada: texto do EPDP + filete + logo MPMG,
   num painel com gradiente sutil, sombra suave e filete de destaque (cores MPMG). */
.brand-lockup {
  display:inline-flex; align-items:center; justify-content:center; gap:26px;
  padding:18px 34px; position:relative; margin-bottom:6px;
  /* Sombra que ACOMPANHA o conteúdo (texto/logo/filete), não uma caixa: assim há
     efeito flutuante sem nenhuma borda/contorno retangular visível. */
  filter: drop-shadow(0 6px 10px rgba(13,71,161,0.22));
}
/* Filete de destaque na base (vermelho -> azul institucional do MPMG) */
.brand-lockup::before {
  content:""; position:absolute; left:28px; right:28px; bottom:0; height:3px;
  background:linear-gradient(90deg, #9d1c34, #0d47a1);
  border-radius:4px 4px 0 0;
}
.brand-endosso { text-align:right; font-size:0.92em; font-weight:600; line-height:1.35; color:#1f2a44; letter-spacing:1.4px; text-transform:uppercase; }
.brand-sigla { font-weight:800; color:#9d1c34; letter-spacing:1.8px; white-space:nowrap; }
.brand-sep { width:1px; height:56px; background:linear-gradient(180deg, transparent, rgba(13,71,161,0.55), transparent); flex:0 0 auto; }
.brand-logo { max-width:150px; height:auto; display:block; flex:0 0 auto; }

/* ---------- Blocos vitrificados ---------- */
.vitrificado { background: rgba(255,255,255,0.2); border-radius:15px; border:1px solid rgba(255,255,255,0.3); backdrop-filter: blur(15px); padding:30px; margin:30px 0; box-shadow:0 5px 15px rgba(0,0,0,0.1); }
.vitrificado h2 { color:#0d47a1; margin-bottom:14px; }
.section-mpmg p { line-height:1.7; text-align:justify; }
.section-mpmg ul, .section-funcionalidades ul { margin-left:20px; }

/* ---------- Funcionalidades do Canal ---------- */
.features { display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; }
.feature-card { flex:1 1 45%; padding:22px; border-radius:12px; background: rgba(255,255,255,0.25); box-shadow:0 5px 15px rgba(0,0,0,0.1); cursor:pointer; transition: transform 0.3s, box-shadow 0.3s; border:1px solid rgba(13,71,161,0.12); text-align:left; font:inherit; color:inherit; width:100%; }
.feature-card:hover { transform: translateY(-6px); box-shadow:0 10px 25px rgba(0,0,0,0.2); }
.feature-card:focus-visible { outline:2px solid #0d47a1; outline-offset:2px; }
.feature-card h3 { color:#0d47a1; margin-bottom:8px; font-size:1.1em; display:flex; align-items:center; gap:10px; }
.feature-icon { width:1.5em; height:1.5em; flex:0 0 auto; color:#0d47a1; }
.feature-card p { line-height:1.55; color:#333; }

/* ---------- Indicadores do Canal (admin) ---------- */
.indicadores-titulo { display:flex; align-items:center; gap:8px; }
.indicadores-icon { width:1.1em; height:1.1em; flex:0 0 auto; color:#0d47a1; }
.indicadores-nota { font-size:0.85em; color:#334155; opacity:0.8; margin-bottom:14px; }
.indicadores-legenda { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 22px; margin-top:12px; font-size:0.9em; color:#333; }
.leg-item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.leg-box { width:16px; height:16px; border-radius:3px; flex:0 0 auto; }
.leg-num { font-weight:800; color:#0d47a1; margin-left:2px; font-variant-numeric:tabular-nums; }
.indicadores-status { margin:24px auto 0; max-width:560px; }
.indicadores-grafico { margin:24px auto 0; max-width:600px; }
.indicadores-cards { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin:24px 0 0; }
.indicador-kpi { display:flex; flex-direction:column; align-items:center; gap:4px; background:rgba(13,71,161,0.06); border:1px solid rgba(13,71,161,0.12); border-radius:12px; padding:16px 26px; min-width:180px; }
.kpi-num { font-size:2rem; font-weight:800; color:#0d47a1; font-variant-numeric:tabular-nums; line-height:1; }
.kpi-rot { font-size:0.85rem; color:#334155; text-align:center; }

a { color:#1a237e; text-decoration:none; transition:color 0.3s; }
a:hover { color:#0d47a1; text-decoration:underline; }

/* ---------- Referências + modal de pré-visualização ---------- */
.referencias-lista { list-style:none; margin:0; padding:0; }
.referencias-lista li { margin:6px 0; }
.referencia-link { background:none; border:none; padding:2px 0; font:inherit; color:#1a237e; cursor:pointer; text-align:left; transition:color 0.2s; }
.referencia-link:hover { color:#0d47a1; text-decoration:underline; }
.referencia-link:focus-visible { outline:2px solid #0d47a1; outline-offset:2px; border-radius:3px; }
.referencias-nota { margin-top:12px; font-size:0.9em; color:#334155; opacity:0.85; }

.ref-modal-overlay { position:fixed; inset:0; background:rgba(13,27,60,0.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000; }
.ref-modal { background:#fff; border-radius:14px; max-width:560px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,0.3); overflow:hidden; }
.ref-modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px; background:linear-gradient(135deg,#e3f2fd,#bbdefb); }
.ref-modal-header h3 { color:#0d47a1; font-size:1.15em; margin:0; line-height:1.3; }
.ref-modal-close { background:none; border:none; font-size:18px; line-height:1; cursor:pointer; color:#0d47a1; flex:0 0 auto; }
.ref-modal-body { padding:20px; color:#333; line-height:1.6; }
.ref-modal-destino { margin-top:14px; font-size:0.9em; color:#334155; opacity:0.85; }
.ref-modal-footer { display:flex; gap:10px; justify-content:flex-end; align-items:center; padding:0 20px 20px; flex-wrap:wrap; }
.ref-btn-oficial { background:#0d47a1; color:#fff; padding:10px 16px; border-radius:8px; text-decoration:none; font-weight:600; transition:background 0.2s; }
.ref-btn-oficial:hover { background:#08306b; color:#fff; text-decoration:none; }
.ref-btn-fechar { background:transparent; border:1px solid #cbd5e1; color:#334155; padding:10px 16px; border-radius:8px; cursor:pointer; transition:background 0.2s; }
.ref-btn-fechar:hover { background:#f1f5f9; }

/* Modal grande para pré-visualização embutida (conteúdo real via /ref-preview) */
.ref-modal-lg { max-width:1040px; width:94vw; height:88vh; display:flex; flex-direction:column; }
.ref-modal-preview { flex:1 1 auto; min-height:0; background:#fff; }
.ref-modal-preview iframe { width:100%; height:100%; border:0; display:block; }
.ref-modal-hint { font-size:0.85em; color:#334155; opacity:0.85; margin-right:auto; }
.ref-modal-actions { display:flex; gap:10px; }

.fade-in { opacity:0; transform:translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in.visible { opacity:1; transform:translateY(0); }

@media (max-width: 640px) {
  .brand-lockup { flex-direction:column; gap:14px; padding:18px 22px; }
  .brand-endosso { text-align:center; }
  .brand-sep { width:60%; height:1px; background:linear-gradient(90deg, transparent, rgba(13,71,161,0.55), transparent); }
  .feature-card { flex:1 1 100%; }
}

/* ---------- Modo escuro (tema DaisyUI "coffee", ver getPublicThemeDark()) ----------
   Este arquivo inteiro foi escrito com cores fixas pensadas pro tema claro; no
   escuro o fundo da página muda mas esse texto continua com as mesmas cores,
   ficando com contraste ruim (títulos azul-escuro e parágrafos cinza-escuro em
   cima de fundo escuro). Não inclui .ref-modal-* (modal de pré-visualização tem
   fundo branco fixo, por design — texto branco ali ficaria ilegível) nem
   .brand-sigla (vermelho institucional do MPMG, cor de marca, não de leitura). */
[data-theme='coffee'] .conteiner {
  color: #fff;
}
[data-theme='coffee'] .conteiner,
[data-theme='coffee'] .section-titulo p,
[data-theme='coffee'] .section-mpmg p,
[data-theme='coffee'] .feature-card p,
[data-theme='coffee'] .indicadores-legenda,
[data-theme='coffee'] .kpi-rot,
[data-theme='coffee'] .brand-endosso {
  color: #fff;
}
[data-theme='coffee'] .section-titulo h1,
[data-theme='coffee'] .vitrificado h2,
[data-theme='coffee'] .feature-card h3,
[data-theme='coffee'] .feature-icon,
[data-theme='coffee'] .indicadores-icon,
[data-theme='coffee'] .kpi-num,
[data-theme='coffee'] .leg-num {
  color: #fff;
}
[data-theme='coffee'] .indicadores-nota,
[data-theme='coffee'] .referencias-nota {
  color: #fff;
}
/* Links viram brancos também, mas com sublinhado sempre visível (não só no
   hover) pra continuarem reconhecíveis como link e não se misturarem ao texto. */
[data-theme='coffee'] a,
[data-theme='coffee'] .referencia-link {
  color: #fff;
  text-decoration: underline;
}
.tour-balao.svelte-tat982{position:absolute;z-index:100050;width:300px;max-width:calc(100vw - 24px);background:#ffffff;color:#1e293b;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 12px 32px rgba(15, 23, 42, 0.28);padding:14px 16px}.tour-prog.svelte-tat982{display:block;font-size:0.68rem;letter-spacing:0.02em;text-transform:uppercase;color:#64748b;margin-bottom:6px}.tour-titulo.svelte-tat982{display:flex;align-items:center;gap:6px;font-size:0.98rem;margin-bottom:4px}.tour-icone.svelte-tat982{font-size:1.15rem}.tour-desc.svelte-tat982{font-size:0.85rem;line-height:1.4;color:#334155;margin:0 0 12px 0}.tour-btns.svelte-tat982{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}.tour-btn.svelte-tat982{font-size:0.8rem;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:filter 0.15s ease}.tour-btn.svelte-tat982:hover{filter:brightness(0.96)}.tour-btn-ghost.svelte-tat982{background:transparent;color:#475569;border-color:#cbd5e1}.tour-btn-primary.svelte-tat982{background:#1e40af;color:#ffffff}[data-theme='coffee'] .tour-balao.svelte-tat982{background:#0f172a;color:#fff;border-color:#1e293b}[data-theme='coffee'] .tour-desc.svelte-tat982{color:#fff}[data-theme='coffee'] .tour-btn-ghost.svelte-tat982{color:#fff;border-color:#334155}.tour-spot.svelte-tat982{position:fixed;z-index:100040;border-radius:8px;box-shadow:0 0 0 3px #1e40af, 0 0 0 9999px rgba(15, 23, 42, 0.55);transition:top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;pointer-events:none}