/**
 * Mitra — base mobile-first (telefone e tablet primeiro).
 * Carregado em todos os layouts, antes dos estilos de tema.
 */

/* Nada estoura a largura do ecrã */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
video,
canvas {
  height: auto;
}

/* Palavras longas (nomes, emails, domínios) não empurram o layout */
h1,
h2,
h3,
h4,
p,
td,
th,
li,
dd,
dt,
label,
span,
a {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Tabelas: scroll próprio em vez de esticar a página */
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.table-scroll > table {
  min-width: 100%;
}

/* Áreas de toque confortáveis no telefone */
@media (max-width: 767px) {
  a.btn,
  button,
  [role='button'],
  input[type='submit'],
  input[type='button'],
  select,
  summary {
    min-height: 40px;
  }

  input,
  select,
  textarea {
    font-size: 16px; /* evita o zoom automático do iOS ao focar */
  }
}

/* Notch / barras do sistema (aplicar em contentores, não no body: os fundos
   do site são full-bleed) */
.safe-area-x {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Pré-visualizações (cartão de estudante, recibo) encolhem para caber */
[data-preview-fit] {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Imagem ausente no servidor: espaço neutro em vez de ícone quebrado */
img.media-missing {
  visibility: hidden;
}

@media print {
  html,
  body {
    overflow-x: visible;
  }

  .table-scroll {
    overflow-x: visible;
  }

  .table-scroll > table {
    min-width: 0;
  }
}