/* ============================
   Estilos generales / base
   ============================ */

body {
  background-color: #f5f5f7;
}

/* Que las tarjetas no queden tan apretadas en pantallas pequeñas */
.card {
  border-radius: 0.75rem;
  border: 1px solid rgba(0,0,0,0.04);
}

/* Ajuste suave de padding en card-body según tamaño */
.card-body {
  padding: 1.25rem;
}

/* Tablas: que sean siempre desplazables en horizontal */
.table-responsive {
  overflow-x: auto;
}

/* Las tablas del panel se ven mejor con un poquito menos de padding */
.table-sm th,
.table-sm td {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* Botones más "finger friendly" en general */
.btn {
  border-radius: 999px;
}

/* ============================
   Móviles pequeños (<= 576px)
   ============================ */
@media (max-width: 576px) {

  body {
    font-size: 0.9rem;
  }

  .container,
  .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .card-body {
    padding: 0.85rem;
  }

  /* Encabezados con d-flex (como el header de student_panel y panel)
     que se vean uno debajo del otro en móvil */
  .d-flex.justify-content-between.align-items-center {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem;
  }

  /* Alinear badges y botones con un poco de espacio vertical */
  .d-flex.align-items-center.gap-2,
  .d-flex.align-items-center.gap-1 {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Botones principales casi a ancho completo en cabeceras */
  #btnDownloadPdf,
  #btnStudentLogout,
  .btn-primary,
  .btn-success,
  .btn-outline-secondary {
    width: 100%;
    justify-content: center;
  }

  /* Formularios: que los campos usen todo el ancho en móviles */
  .row .col-md-6,
  .row .col-md-4,
  .row .col-md-3,
  .row .col-md-2 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm {
    font-size: 0.9rem;
  }

  /* Tablas: texto un poco más pequeño para que quepa mejor */
  .table-sm th,
  .table-sm td {
    font-size: 0.82rem;
    white-space: nowrap;
  }

  /* Evitar que la tabla crezca demasiado en alto: scroll horizontal */
  .table-responsive {
    margin-bottom: 0.75rem;
  }

  /* Cinturón visual (faja) en student_panel: que no quede muy ancho */
  td > div[style*="border-radius: 999px"] {
    max-width: 130px !important;
  }

  /* Modales: que usen casi todo el ancho en móviles */
  .modal-dialog {
    margin: 0.5rem;
    max-width: 100%;
  }
  .hide-on-cell {
      display: none;
  }

}

/* ============================
   Tablets (577px – 991px)
   ============================ */
@media (min-width: 577px) and (max-width: 991.98px) {
 .hide-on-cell {
      display: none;
  }
  .container,
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .card-body {
    padding: 1rem;
  }

  /* Header de paneles: aún puede ser horizontal, pero con más espacio */
  .d-flex.justify-content-between.align-items-center {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  /* Botones de acción del header más cómodos */
  #btnDownloadPdf,
  #btnStudentLogout {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Tablas: no tan comprimidas, pero con opción de scroll horizontal */
  .table-sm th,
  .table-sm td {
    font-size: 0.86rem;
  }

}
.truncate {
  max-width: 30ch; /* Limits to ~20 characters */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Adds "..." for overflow */
}

/* ============================
   Mejoras visuales suaves
   ============================ */

/* Títulos de secciones */
.card .h5,
.card h5,
.card h6 {
  font-weight: 600;
}

/* Textos de ayuda */
.form-text {
  font-size: 0.78rem;
}

/* Pie de página / nota pequeña */
.text-muted.small {
  line-height: 1.3;
}

/* Bordes suaves para tablas de resumen */
.table-bordered > :not(caption) > * > * {
  border-color: rgba(0,0,0,0.08);
}
/* =========================
   Versión móvil / responsive
   ========================= */
@media (max-width: 767.98px) {

  body {
    font-size: 0.92rem;
  }

  /* Contenedores principales del panel */
  #student-panel-wrapper .container,
  #main-panel-wrapper .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .card {
    margin-bottom: 0.75rem;
  }

  /* Ocultar columnas marcadas para móvil */
  .hide-on-cell {
    display: none !important;
  }

  /* Tablas más compactas */
  .table-sm th,
  .table-sm td {
    padding: 0.35rem 0.4rem;
    vertical-align: middle;
    font-size: 0.8rem;
  }

  /* Botones más pequeños cómodos en móvil */
  .btn-group-sm > .btn,
  .btn-sm {
    padding: 0.2rem 0.45rem;
    font-size: 0.78rem;
  }

  /* Headers que deben apilarse en móvil */
  .panel-header-responsive {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .panel-header-responsive .no-print {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-start;
  }

  .panel-header-responsive .no-print > * {
    flex: 1 1 auto;
  }
}