/*
 * app.css — utilitários que espelham Bootstrap + typography.scss do projeto Next.js
 * Carregue após tokens.css e platform.css nas telas de aluno/admin.
 */

/* ── Tipografia (de typography.scss) ── */
.title         { font-size: 20px;   font-weight: 600; line-height: 24px; }
.subtitle      { font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.body-1        { font-size: 1rem;   font-weight: 500; }
.body-2        { font-size: 1.1rem; font-weight: 600; }
.caption       { font-size: 0.9rem; font-weight: 400; }
.caption-uppercase { font-size: 0.75rem; font-weight: 400; text-transform: uppercase; }
.micro-caption { font-size: 0.8rem; font-weight: 400; }

/* ── Cores semânticas (text-*) ── */
.text-primary   { color: var(--brand-blue)     !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-success   { color: var(--color-success)  !important; }
.text-danger    { color: var(--color-danger)   !important; }
.text-muted     { color: var(--text-muted)     !important; }
.text-dark      { color: var(--neutral-900)    !important; }
.text-center    { text-align: center !important; }
.text-start     { text-align: left   !important; }
.text-end       { text-align: right  !important; }

/* ── Backgrounds ── */
.bg-light  { background: var(--neutral-150) !important; }
.bg-white  { background: var(--neutral-0)   !important; }
.bg-primary{ background: var(--brand-blue)  !important; }

/* ── Font weights ── */
.fw-bold     { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-medium   { font-weight: 500 !important; }

/* ── Borders ── */
.border          { border: 1px solid var(--border-default) !important; }
.border-bottom   { border-bottom: 1px solid var(--border-default) !important; }
.border-muted    { border-bottom: 1px solid var(--neutral-300) !important; }
.rounded         { border-radius: 0.375rem !important; }
.rounded-3       { border-radius: 0.75rem  !important; }
.rounded-4       { border-radius: 1rem     !important; }
.rounded-circle  { border-radius: 50%      !important; }
.rounded-pill    { border-radius: 999px    !important; }

/* ── Display ── */
.d-flex         { display: flex   !important; }
.d-none         { display: none   !important; }
.d-block        { display: block  !important; }
.d-inline-flex  { display: inline-flex !important; }
.d-grid         { display: grid   !important; }
@media (min-width: 768px) {
  .d-md-none  { display: none  !important; }
  .d-md-block { display: block !important; }
  .d-md-flex  { display: flex  !important; }
}

/* ── Flex ── */
.flex-column       { flex-direction: column !important; }
.flex-wrap         { flex-wrap: wrap !important; }
.flex-grow-1       { flex: 1 1 auto !important; }
.flex-shrink-0     { flex-shrink: 0 !important; }
.align-items-start  { align-items: flex-start !important; }
.align-items-center { align-items: center     !important; }
.align-items-end    { align-items: flex-end   !important; }
.align-items-stretch{ align-items: stretch    !important; }
.justify-content-start   { justify-content: flex-start  !important; }
.justify-content-center  { justify-content: center      !important; }
.justify-content-end     { justify-content: flex-end    !important; }
.justify-content-between { justify-content: space-between !important; }
.ms-1 { margin-left:  0.25rem !important; } .ms-2 { margin-left:  0.5rem !important; }
.ms-3 { margin-left:  1rem   !important; } .ms-4 { margin-left:  1.5rem !important; }
.ms-auto { margin-left: auto  !important; }
.me-1 { margin-right: 0.25rem !important; } .me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem   !important; } .me-4 { margin-right: 1.5rem !important; }
.mt-1 { margin-top:   0.25rem !important; } .mt-2 { margin-top:   0.5rem !important; }
.mt-3 { margin-top:   1rem   !important; } .mt-4 { margin-top:   1.5rem !important; }
.mt-5 { margin-top:   3rem   !important; } .mt-auto { margin-top: auto !important; }
.mb-0 { margin-bottom: 0      !important; } .mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 1rem   !important; }
.mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem   !important; }
.pt-1 { padding-top:   0.25rem !important; } .pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top:   1rem   !important; } .pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top:   3rem   !important; }
.pb-3 { padding-bottom: 1rem  !important; } .pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem  !important; }
.ps-3 { padding-left:  1rem   !important; } .ps-4 { padding-left:  1.5rem !important; }
.pe-3 { padding-right: 1rem   !important; } .pe-4 { padding-right: 1.5rem !important; }
.p-2  { padding: 0.5rem  !important; } .p-3 { padding: 1rem    !important; }
.p-4  { padding: 1.5rem  !important; }
@media (min-width: 768px) {
  .p-md-4  { padding: 1.5rem !important; }
  .p-md-5  { padding: 3rem   !important; }
  .ps-md-5 { padding-left:   3rem !important; }
  .pt-md-5 { padding-top:    3rem !important; }
  .pb-md-5 { padding-bottom: 3rem !important; }
}

/* ── Sizing ── */
.w-100 { width:  100% !important; } .w-75 { width:  75% !important; }
.h-100 { height: 100% !important; }
.mw-400 { max-width: 400px !important; }

/* ── Misc ── */
.overflow-hidden  { overflow: hidden !important; }
.overflow-x-auto  { overflow-x: auto !important; }
.position-relative{ position: relative !important; }
.position-absolute{ position: absolute !important; }
.cursor-pointer   { cursor: pointer !important; }
.object-fit-cover { object-fit: cover !important; }
.gap-1 { gap: 0.25rem !important; } .gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem   !important; } .gap-4 { gap: 1.5rem !important; }
.opacity-50 { opacity: 0.5 !important; }

/* ── Content area — aluno ── */
.student-content {
  padding: 1.5rem;
}
@media (min-width: 768px) {
  .student-content { padding: 3rem; }
}
.student-content-zero {
  padding: 0;
}

/* ── Card (CardCustom / CardStatistics) ── */
.card-custom {
  background: var(--neutral-150);
  border-radius: 10px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
  border: none;
}
.card-custom:hover { transform: scale(1.02); }

/* ── CardCourses ── */
.cc-wrap {
  background: var(--neutral-150); /* bg-light */
  border-radius: 1rem;            /* rounded-4 */
  border: 1px solid #eee;
  padding: 1rem;                  /* p-3 */
  cursor: pointer;
  width: 100%;
}
.cc-wrap.has-color-border { border-left-width: 6px; }
.cc-img {
  width: 100%; aspect-ratio: 3/4;
  border-radius: 10px; overflow: hidden;
  margin-bottom: 8px; background: var(--neutral-300);
}
.cc-img img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── Horizontal swiper row ── */
.swiper-row {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.swiper-row::-webkit-scrollbar { display: none; }
.swiper-item {
  flex: 0 0 220px; scroll-snap-align: start;
}
@media (min-width: 768px) { .swiper-item { flex: 0 0 260px; } }
@media (min-width: 1024px) { .swiper-item { flex: 0 0 290px; max-width: 300px; } }

/* ── Sim status colors ── */
.sim-status { font-size: 12px; font-weight: 600; }
.sim-status.agendado  { color: var(--text-muted); }
.sim-status.andamento { color: var(--brand-blue); }
.sim-status.concluido { color: var(--color-success); }
.sim-status.expirado  { color: var(--color-danger); }

/* ── ButtonChoose (list variant) ── */
.btn-choose {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 20px 24px;
  background: #F6F6F6; border: none; border-radius: 10px;
  color: #616161; font-family: var(--font-body); font-size: 15px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background 0.15s;
}
.btn-choose:hover { background: var(--neutral-200); }
.btn-choose-badge {
  border-radius: 999px; font-size: 12px; font-weight: 600;
  padding: 4px 10px; white-space: nowrap; flex-shrink: 0;
}
.badge-available  { background: #ECECEC; color: #616161; }
.badge-progress   { background: #E6F0FF; color: var(--brand-blue); }
.badge-completed  { background: #E8F5E9; color: #2E7D32; }