/* QRM Partners - camada responsiva global
   Mantém a identidade visual e apenas adapta espaçamentos, cards, menus e tabelas para celular/tablet. */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
}

.btn,
.form-control,
.form-select,
.input-group-text {
  touch-action: manipulation;
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
  margin-bottom: 0;
}

/* =========================
   Home pública de treinamentos
   ========================= */
@media (max-width: 767.98px) {
  .topbar {
    position: sticky;
  }

  .topbar-inner {
    flex-direction: column;
    align-items: stretch !important;
    justify-content: center;
    gap: .72rem;
    padding: .72rem 0;
  }

  .brand-stack {
    width: 100%;
    justify-content: center;
    gap: .65rem !important;
  }

  .brand-stack img:first-child {
    height: 43px !important;
    max-width: 33vw;
    object-fit: contain;
  }

  .brand-stack img:last-child {
    height: 36px !important;
    max-width: 49vw;
    object-fit: contain;
  }

  .brand-divider {
    height: 30px !important;
    flex: 0 0 1px;
  }

  .access-btn {
    width: 100%;
    min-height: 46px;
    padding: .72rem .85rem !important;
    font-size: .92rem !important;
    border-radius: 1rem !important;
    white-space: normal !important;
    text-align: center;
    line-height: 1.2;
  }

  .hero {
    padding: 1rem 0 .9rem !important;
  }

  .hero-card {
    padding: 1.18rem !important;
    border-radius: 1.25rem !important;
  }

  .hero h1 {
    font-size: clamp(1.78rem, 8.4vw, 2.35rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.04em !important;
  }

  .hero p {
    font-size: .98rem !important;
    line-height: 1.55 !important;
  }

  .hero-metrics {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: .55rem !important;
  }

  .hero-pill {
    width: 100%;
    justify-content: center;
    border-radius: 1rem !important;
    padding: .7rem .8rem !important;
  }

  .library-shell,
  .blog-shell {
    padding-bottom: 1.25rem !important;
  }

  .library-panel,
  .blog-panel {
    padding: .95rem !important;
    border-radius: 1.2rem !important;
  }

  .section-head {
    align-items: flex-start !important;
    gap: .8rem !important;
  }

  .section-head h2 {
    font-size: 1.35rem !important;
  }

  .section-head p {
    font-size: .95rem !important;
  }

  .section-head > .btn,
  .section-head > a.btn {
    width: 100%;
    justify-content: center;
  }

  #materiais .d-flex.flex-wrap.gap-2.mb-3 {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: .45rem;
    margin-left: -.05rem;
    margin-right: -.05rem;
    scrollbar-width: thin;
  }

  .subject-filter {
    flex: 0 0 auto;
    padding: .56rem .86rem !important;
    font-size: .93rem;
  }

  .material-card,
  .blog-card,
  .blog-card-qrm {
    border-radius: 1.12rem !important;
  }

  .material-cover {
    height: clamp(330px, 98vw, 440px) !important;
  }

  .blog-cover,
  .blog-img-qrm {
    height: 190px !important;
  }

  .material-card .p-3,
  .blog-card .p-3,
  .blog-card-qrm .card-body {
    padding: 1rem !important;
  }

  .material-card h5,
  .blog-card h5,
  .blog-card-qrm h5 {
    font-size: 1.05rem !important;
  }

  .material-card p,
  .blog-card p {
    min-height: auto !important;
  }

  .download-modal .modal-dialog,
  .blocked-modal .modal-dialog,
  .modal-dialog {
    margin: .75rem !important;
  }

  .download-modal .modal-content,
  .blocked-modal .modal-content,
  .modal-content {
    border-radius: 1.18rem !important;
  }

  .download-modal__top {
    padding: 1rem !important;
  }

  .modal-body {
    padding: 1rem !important;
  }

  .modal-footer {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: .55rem !important;
    padding: 0 1rem 1rem !important;
  }

  .modal-footer .btn {
    width: 100%;
    min-height: 46px;
  }
}

@media (max-width: 380px) {
  .brand-stack {
    gap: .45rem !important;
  }

  .brand-stack img:first-child {
    height: 38px !important;
  }

  .brand-stack img:last-child {
    height: 31px !important;
  }

  .brand-divider {
    height: 26px !important;
  }
}

/* =========================
   Login
   ========================= */
@media (max-width: 767.98px) {
  .login-wrap {
    min-height: 100svh !important;
    padding: .8rem 0 !important;
    align-items: flex-start !important;
  }

  .brand-badge {
    width: 100%;
    justify-content: center;
    gap: .65rem !important;
    padding: .75rem .85rem !important;
    border-radius: 1.2rem !important;
  }

  .brand-badge img:first-child {
    height: 48px !important;
    max-width: 36vw;
    object-fit: contain;
  }

  .brand-badge img:last-child {
    height: 40px !important;
    max-width: 48vw;
    object-fit: contain;
  }

  .brand-badge span {
    height: 30px !important;
    flex: 0 0 1px;
  }

  .login-card {
    border-radius: 1.2rem !important;
  }

  .login-side {
    padding: 1.15rem !important;
    border-radius: 1.2rem 1.2rem 0 0 !important;
  }

  .login-side h4 {
    font-size: 1.22rem !important;
    line-height: 1.22 !important;
  }

  .login-side p,
  .feature .small {
    font-size: .92rem !important;
  }

  .feature {
    padding: .62rem .72rem !important;
    border-radius: .95rem !important;
  }

  .login-form {
    padding: 1.15rem !important;
  }

  .input-group-text,
  .form-control,
  .btn-icon {
    min-height: 50px !important;
  }

  .blocked-modal__icon-wrap {
    width: 84px !important;
    height: 84px !important;
  }

  .blocked-modal__icon {
    font-size: 2.55rem !important;
  }

  .blocked-modal__title {
    font-size: 1.32rem !important;
  }
}

/* =========================
   Plataforma logada
   ========================= */
@media (max-width: 991.98px) {
  .navbar-qrm {
    height: 72px !important;
  }

  .navbar-qrm .container-fluid {
    min-height: 72px;
    gap: .45rem;
  }

  .navbar-qrm .navbar-brand img {
    height: 56px !important;
    max-width: 170px;
    object-fit: contain;
  }

  .navbar-qrm .btn[data-bs-target="#sidebarMobile"] {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(80,116,138,.14);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(33,52,65,.08);
    padding: 0;
  }

  .content-qrm {
    margin-left: 0 !important;
    padding: calc(72px + .85rem) .9rem 1.2rem !important;
  }

  .offcanvas {
    width: min(86vw, 340px) !important;
  }

  .offcanvas-body {
    padding: .85rem;
  }

  .offcanvas .nav-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 46px;
  }

  .card,
  .modal-content,
  .alert,
  .table-responsive {
    border-radius: 16px !important;
  }

  .card-body {
    padding: 1rem !important;
  }

  .card-header,
  .card-footer {
    padding: .85rem 1rem !important;
  }

  .table-responsive {
    overflow-x: auto;
    box-shadow: 0 12px 28px rgba(33,52,65,.06);
  }

  .table-responsive > table,
  .table-responsive > .table {
    min-width: 720px;
  }

  .table th,
  .table td {
    vertical-align: middle;
    white-space: nowrap;
  }

  .form-control,
  .form-select,
  .btn {
    min-height: 44px;
  }

  textarea.form-control {
    min-height: 108px;
  }

  .modal-dialog {
    margin: .75rem !important;
  }

  .modal-footer {
    gap: .55rem;
  }

  .blog-hero-qrm {
    border-radius: 20px !important;
    padding: 1.15rem !important;
  }

  .blog-hero-qrm h3 {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
  }

  .blog-hero-qrm .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .navbar-qrm {
    height: 68px !important;
  }

  .navbar-qrm .navbar-brand img {
    height: 48px !important;
    max-width: 145px;
  }

  .content-qrm {
    padding: calc(68px + .75rem) .72rem 1rem !important;
  }

  .user-box {
    display: none !important;
  }

  .navbar-qrm .d-flex.align-items-center.gap-3 {
    gap: .65rem !important;
  }

  h1,
  .h1 { font-size: 1.55rem !important; }
  h2,
  .h2 { font-size: 1.35rem !important; }
  h3,
  .h3 { font-size: 1.22rem !important; }

  .row.g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
  .row.g-4 { --bs-gutter-x: .85rem; --bs-gutter-y: .85rem; }

  .card-kpi .card-body,
  .card .card-body.d-flex.justify-content-between.align-items-center {
    gap: .6rem;
  }

  .card-kpi .fs-4,
  .card .fs-4 {
    font-size: 1.2rem !important;
  }

  .d-flex.gap-2,
  .d-flex.gap-3,
  .d-flex.flex-wrap.gap-2,
  .card-header.d-flex,
  .card-body.d-flex {
    row-gap: .55rem !important;
  }

  form.row .col-md-2,
  form.row .col-md-3,
  form.row .col-md-4,
  form.row .col-md-5,
  form.row .col-md-6,
  form.row .col-md-8,
  form.row .col-md-12 {
    width: 100%;
  }

  .btn:not(.btn-sm) {
    min-height: 45px;
  }

  .btn-sm {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .table-responsive > table,
  .table-responsive > .table {
    min-width: 680px;
  }

  .table th,
  .table td {
    font-size: .86rem;
  }

  .modal-body {
    padding: 1rem !important;
  }

  .modal-footer {
    display: grid !important;
    grid-template-columns: 1fr;
    padding: 0 1rem 1rem !important;
  }

  .modal-footer .btn {
    width: 100%;
  }

  .alert {
    font-size: .92rem;
  }

  .blog-img-qrm {
    height: 185px !important;
  }
}