/* ID Federal Halloween v3.8.5
 * Central responsiva: painel de personalizacao mais estreito, galeria sem corte
 * e wallpaper proporcional em desktop, notebook, tablet e celular.
 */

:root {
  --idf-v385-shell-max: 1280px;
  --idf-v385-shell-pad: clamp(14px, 1.6vw, 26px);
  --idf-v385-gap: clamp(14px, 1.5vw, 22px);
  --idf-v385-sidebar: clamp(210px, 18vw, 250px);
  --idf-v385-card-gap: clamp(12px, 1.35vw, 20px);
}

/* Nunca distorcer a arte de fundo. Mantem toda a largura visivel e deixa a
 * altura acompanhar a proporcao original. */
html body.idf-halloween-active.idf-hw-central-v33,
html body.idf-halloween-active.idf-hw-demo-central.idf-hw-central-v33 {
  background-color:#071223 !important;
  background-image:url('./halloween-central-v33-desktop.webp') !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-size:100% auto !important;
  background-attachment:scroll !important;
}

/* Camada final para containers reais mais comuns da Central. Nao altera cards,
 * inputs ou conteudo; apenas impede largura fixa/overflow herdados. */
body.idf-halloween-active.idf-hw-central-v33 :is(
  .idf-v385-shell,
  .central-wrap,
  .central-wrapper,
  .marketing-dashboard,
  .marketing-wrapper,
  .portal-container,
  .portal-main,
  .marketing-main
) {
  width:min(100%, var(--idf-v385-shell-max)) !important;
  max-width:var(--idf-v385-shell-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

body.idf-halloween-active.idf-hw-central-v33 .idf-v385-shell {
  padding-left:var(--idf-v385-shell-pad) !important;
  padding-right:var(--idf-v385-shell-pad) !important;
}

/* Layout detectado dinamicamente pelo JS. */
body.idf-halloween-active.idf-hw-central-v33 .idf-v385-layout {
  display:grid !important;
  grid-template-columns:minmax(0, var(--idf-v385-sidebar)) minmax(0, 1fr) !important;
  gap:var(--idf-v385-gap) !important;
  align-items:start !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

body.idf-halloween-active.idf-hw-central-v33 .idf-v385-sidebar {
  width:100% !important;
  max-width:var(--idf-v385-sidebar) !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

body.idf-halloween-active.idf-hw-central-v33 .idf-v385-sidebar :is(input,select,textarea,button) {
  max-width:100% !important;
  box-sizing:border-box !important;
}

body.idf-halloween-active.idf-hw-central-v33 .idf-v385-main {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

/* Grade das artes: duas colunas quando houver espaco, uma quando nao houver. */
body.idf-halloween-active.idf-hw-central-v33 .idf-v385-gallery {
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:var(--idf-v385-card-gap) !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  align-items:start !important;
}

body.idf-halloween-active.idf-hw-central-v33 .idf-v385-art-card {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

/* A arte deve caber inteira no card; nunca usar altura fixa/crop. */
body.idf-halloween-active.idf-hw-central-v33 .idf-v385-art-image,
body.idf-halloween-active.idf-hw-central-v33 .idf-v385-art-card > img,
body.idf-halloween-active.idf-hw-central-v33 .idf-v385-art-card picture > img {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center top !important;
}

/* Monitores muito grandes: o painel nao cresce indefinidamente; a galeria ganha
 * o espaco extra, preservando proporcao e leitura. */
@media (min-width:1600px) {
  :root {
    --idf-v385-shell-max: 1360px;
    --idf-v385-sidebar: 240px;
  }
}

/* Notebook menor / tablet horizontal: sidebar um pouco menor. */
@media (max-width:1180px) {
  :root {
    --idf-v385-sidebar: clamp(205px, 22vw, 230px);
    --idf-v385-shell-pad: 16px;
  }
}

/* Tablet: formulario passa para cima; galeria continua em duas colunas quando
 * o espaco real permitir. */
@media (max-width:900px) {
  body.idf-halloween-active.idf-hw-central-v33 .idf-v385-layout {
    grid-template-columns:1fr !important;
  }
  body.idf-halloween-active.idf-hw-central-v33 .idf-v385-sidebar {
    max-width:none !important;
  }
  body.idf-halloween-active.idf-hw-central-v33 .idf-v385-gallery {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Celular: wallpaper proprio e uma arte por linha, sem qualquer corte lateral. */
@media (max-width:700px) {
  :root {
    --idf-v385-shell-pad: 10px;
    --idf-v385-gap: 12px;
    --idf-v385-card-gap: 12px;
  }
  html body.idf-halloween-active.idf-hw-central-v33,
  html body.idf-halloween-active.idf-hw-demo-central.idf-hw-central-v33 {
    background-image:url('./halloween-central-v33-mobile.webp') !important;
    background-position:center top !important;
    background-size:100% auto !important;
  }
  body.idf-halloween-active.idf-hw-central-v33 .idf-v385-gallery {
    grid-template-columns:1fr !important;
  }
}

/* Celulares estreitos: nenhum campo/card pode forcar largura maior que a tela. */
@media (max-width:480px) {
  body.idf-halloween-active.idf-hw-central-v33 .idf-v385-shell,
  body.idf-halloween-active.idf-hw-central-v33 .idf-v385-layout,
  body.idf-halloween-active.idf-hw-central-v33 .idf-v385-main,
  body.idf-halloween-active.idf-hw-central-v33 .idf-v385-sidebar,
  body.idf-halloween-active.idf-hw-central-v33 .idf-v385-gallery,
  body.idf-halloween-active.idf-hw-central-v33 .idf-v385-art-card {
    min-width:0 !important;
    max-width:100% !important;
  }
}