/* Mobile: largura total — evita faixas cinza (breakpoint antigo 420px pegava iPhones ~428px). */
@media (max-width: 767.98px) {
  html {
    width: 100%;
    height: 100%;
  }
  body {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 100%;
    background: #fff;
    overflow-x: hidden;
  }
  .app {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  .gov-header {
    margin-left: 0;
    margin-right: 0;
  }
  .gov-footer {
    margin-left: 0;
    margin-right: 0;
  }
  #boot-splash.boot-splash {
    width: 100%;
    max-width: none;
    left: 0;
    right: 0;
    transform: none;
  }
  #boot-splash.boot-splash--hide {
    transform: translateX(-100%);
  }
  main#main {
    padding-left: 0;
    padding-right: 0;
  }
  #result-area {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Desktop: coluna mobile centralizada (sem redirect gov.br). */
@media (min-width: 768px) {
  html {
    background: #e8e8e8;
  }
  body {
    margin: 0 auto;
    max-width: 390px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.12);
  }
  #boot-splash.boot-splash {
    max-width: 390px;
    left: 50%;
    right: auto;
    width: 390px;
    transform: translateX(-50%);
  }
  #boot-splash.boot-splash--hide {
    transform: translateX(calc(-50% - 100%));
  }
}