/* ═══════════════════════════════════════════════
   Digga — Estilos Globais do SPA
   ═══════════════════════════════════════════════ */

/* ── Fontes ── */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ── */
html, body {
  min-height: 100%;
  font-family: 'Montserrat', sans-serif;
  background: #f4f6f8;
}

/* ── Containers dos componentes (não interferem no fluxo) ── */
#comp-header,
#comp-sidebar,
#comp-footer {
  display: contents;
}

/* ── Área de conteúdo das views ── */
#view-content {
  min-height: 100vh;
  padding-bottom: 60px; /* espaço para footer fixo */
}

/* ── Estado de carregamento da view ── */
.view-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 300px;
  padding-top: 160px;
  color: #bbb;
  font-size: 13px;
  font-weight: 500;
}

/* ── Tela em construção ── */
.view-wip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 160px;
  text-align: center;
  color: #999;
}

.view-wip svg {
  opacity: 0.4;
}

.view-wip strong {
  font-size: 15px;
  font-weight: 600;
  color: #666;
}

.view-wip p {
  font-size: 12px;
  color: #aaa;
}

/* ── Tutorial — layout duas colunas (desktop) ── */
.tut-cols {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 14px 0;
}
.tut-cols__img { margin: 0; flex-shrink: 0; }
.tut-cols__body { flex: 1; }

/* ── Tutorial — mobile bottom sheet ── */
@media (max-width: 640px) {
  #tut-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #tut-modal {
    border-radius: 20px 20px 0 0 !important;
    max-height: 88vh !important;
    max-width: 100% !important;
  }
  #tut-nav { display: none !important; }
  #tut-content { padding: 16px !important; }
  .tut-cols {
    flex-direction: column;
  }
  .tut-cols__img {
    width: 100%;
    max-width: 220px;
    align-self: center;
  }
}