/* ============================================
   SKILL VAULT - MEDIA QUERIES
   ============================================ */

/* ============================================
   14. RESPONSIVIDADE - TABLET (768px)
   ============================================ */

@media (max-width: 768px) {

     body {
          padding: 16px;
          align-items: flex-start;
          padding-top: 32px;
     }

     .card {
          padding: 24px;
     }

     .indice {
          grid-template-columns: 1fr;
          gap: 16px;
     }

     .card>h1,
     #login>h1,
     #curso>h1 {
          font-size: 1.6rem;
     }

     .subtitle {
          font-size: 0.95rem;
     }

     .titulo-conteudo {
          font-size: 1.6rem;
     }

     .indice-card {
          padding: 20px;
          min-height: 90px;
     }

     .indice-card h3 {
          font-size: 1.05rem;
     }
}

/* ============================================
   15. RESPONSIVIDADE - MOBILE (480px)
   ============================================ */

@media (max-width: 480px) {

     body {
          padding: 12px;
          padding-top: 24px;
     }

     .card {
          padding: 20px;
     }

     .indice {
          gap: 12px;
     }

     .card>h1,
     #login>h1,
     #curso>h1 {
          font-size: 1.4rem;
     }

     .subtitle {
          font-size: 0.9rem;
     }

     .titulo-conteudo {
          font-size: 1.4rem;
     }

     input,
     button {
          padding: 12px;
          font-size: 0.95rem;
     }

     .btn-voltar {
          width: 100%;
          justify-content: center;
          padding: 12px 20px;
          font-size: 0.9rem;
     }

     .indice-card {
          padding: 16px;
          min-height: 80px;
     }

     .indice-card h3 {
          font-size: 0.95rem;
     }

     .footer {
          font-size: 0.8rem;
     }

     .md-body pre {
          padding: 14px;
     }
}