/* =================================================
 * ==== ESTILOS RESPONSIVE COMPLETOS Y MODERNOS ====
 * ================================================= */

/* 1) Top bar y botones */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: .75rem 1rem;
  background: linear-gradient(135deg, #e9edf2 0%, #e3e8ed 100%);
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  position: sticky;
  top: 0;
  z-index: 20;
}
.top-bar .spacer{ flex:1; }

.open-menu-btn,
.close-menu-btn {
  display: none;
  border: none;
  background-color: var(--primary-color);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.2s ease, transform 0.12s ease;
}
.open-menu-btn:hover,
.close-menu-btn:hover { background-color: var(--secondary-color); }
.open-menu-btn:active,
.close-menu-btn:active { transform: scale(0.95); }

/* 2) Móvil y tableta */
@media (max-width: 992px) {
  .main-container { display: block; }
  .content { width: 100%; padding: 1.5rem; }

  /* Sidebar oculta por defecto */
  .sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100%;
    z-index: 1000;
    transition: left 0.25s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,0.25);
    background-color: #1e1e1e;
  }
  .sidebar.show { left: 0; }

  .open-menu-btn { display: block; }

  .close-menu-btn {
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 2rem;
    background: none;
    padding: 0;
    color: white;
  }

  .overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999; display: none;
  }
  .overlay.show { display: block; }
}

/* 3) Campana de notificaciones */
.notification-bell {
  position: relative;
  font-size: 1.8rem;
  color: var(--primary-color);
  text-decoration: none;
  transition: transform 0.12s ease;
}
.notification-bell:hover { transform: scale(1.1); }

.notification-badge {
  position: absolute;
  top: -5px; right: -10px;
  background-color: #dc3545; color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 0.75rem; font-weight: bold;
  border: 1px solid white;
  transition: transform 0.2s ease;
}

@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.25)} 100%{transform:scale(1)} }
.badge-pulse { animation: pulse 0.6s ease; }

/* 4) Foro: grid para archivo + YouTube */
.foro-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: .6rem;
}
.foro-form-grid label{ display: block; margin-bottom: .25rem; }
.foro-form-grid input[type="url"],
.foro-form-grid input[type="file"]{ width: 100%; }
@media (max-width: 576px){ .foro-form-grid{ grid-template-columns: 1fr; } }

/* 5) Toolbar de filtros de cursos */
.courses-toolbar{
  display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; align-items:center;
}
.courses-toolbar input[type="text"],
.courses-toolbar select{
  padding:.55rem .7rem; border:1px solid var(--border-color);
  border-radius:10px; background:#fff;
}

/* 6) Grid de tarjetas */
.courses-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1200px){ .courses-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .courses-grid{ grid-template-columns: 1fr; } }

/* 7) Tarjeta de curso */
.course-card{
  background:var(--surface-color);
  border:1px solid var(--border-color);
  border-radius:14px;
  padding:1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.course-card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.1); }
.course-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem; margin-bottom:.35rem; }
.course-title{ margin:0; color:var(--text-color); font-size:1.05rem; }
.course-badges{ display:flex; gap:.35rem; flex-wrap:wrap; }
.course-desc{ color:var(--text-muted); margin:.25rem 0 .5rem; }
.course-meta{ display:flex; gap:1rem; color:var(--text-muted); font-size:.92rem; margin-bottom:.5rem; }

/* 8) Progreso compacto */
.progress{ margin:.25rem 0 .8rem; }
.progress-bar{
  width:100%; height:18px; border-radius:25px; background:#eef2f6; overflow:hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
}
.progress-fill{
  height:100%; background:var(--primary-color); color:#fff; font-size:.75rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:width .4s ease;
  background-image: linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%, transparent);
  background-size: 36px 36px;
}

/* 9) Acciones */
.course-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* 10) Empty state */
.empty-state{
  text-align:center; padding:2.5rem 1rem; border:1px dashed var(--border-color);
  border-radius:14px; background:#fff;
}
.empty-state .empty-emoji{ font-size:2rem; margin-bottom:.3rem; }

/* ==== Fixes globales ==== */
html, body { overflow-x: hidden; }
.main-container { width: 100%; }
.panel, .card, .dashboard-grid > *, .doc-dash-grid > * { min-width: 0; }

/* Stacking de dashboard en móvil */
.panel-reminder { gap: 1rem; }
@media (max-width: 992px) {
  .dashboard-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "reminder"
      "calendar"
      "tasks"
      "announcements";
    gap: 1rem;
  }
  .content { padding: 1rem; }
  .panel-reminder { flex-direction: column; align-items: flex-start; }
  .card-calendar { aspect-ratio: auto; }
  .calendar-mini, .calendar-grid { width: 100%; }
  .table-container { overflow-x: auto; }
}

@media (max-width: 600px) {
  .content { padding: .85rem; }
  .panel-body { padding: .9rem; }
}

/* Overlay sidebar móvil */
#sidebar-overlay { display: none; }
#sidebar-overlay.show { display: block; }
.sidebar { will-change: left; }

/* ===== Acciones a la derecha (topbar) ===== */
.topbar-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  position: static !important;
}

/* Campana */
.notif-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
}
.notification-bell{ font-size: 1.4rem; line-height: 1; }
.notification-badge{
  position: absolute; top: -4px; right: -6px;
  background: #dc3545; color: #fff;
  border-radius: 999px; padding: 2px 6px;
  font-size: .72rem; font-weight: 700;
  border: 1px solid #fff;
}

/* Avatar + nombre (fix color) */
.userbox{ display:flex; align-items:center; gap:8px; text-decoration:none; }
.userbox .user-avatar{
  width:36px; height:36px; border-radius:50%; overflow:hidden;
  box-shadow:0 1px 4px rgba(16,24,40,.12);
}
.userbox .user-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.userbox .user-name{ color:#000; font-weight:600; }

/* Responsive del topbar */
@media (max-width: 640px){
  .top-bar{ padding: .6rem .75rem; }
  .topbar-actions{ gap: 8px; }
  .userbox .user-name{ display:none; }
  .userbox .user-avatar{ width:30px; height:30px; }
  .notif-btn{ width:34px; height:34px; }
}

/* =========================================
   Mis Calificaciones — Responsive helpers
   ========================================= */

/* Filtro */
.grades-filter{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  align-items:center;
}
.grades-filter select{
  min-width:220px;
}

/* Tarjetas resumen */
.grades-summary-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
}
.grades-summary-card{ margin:0; }
.grades-summary-card-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
}
.gs-title{ font-weight:800; color:#0f172a; }
.gs-sub{ font-size:.9rem; }
.gs-progress{ min-width:120px; }
.gs-progress .progress-bar{
  height:8px; background:#eef2f7; border-radius:999px; overflow:hidden;
}

@media (max-width: 992px){
  .grades-summary-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .grades-summary-grid{ grid-template-columns: 1fr; }
}

/* Tabla responsive (stacked) */
.styled-table--responsive thead{
  display: table-header-group;
}
@media (max-width: 640px){
  .styled-table--responsive thead{
    /* ocultamos encabezado en móvil */
    position:absolute; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden;
  }
  .styled-table--responsive tbody tr{
    display:block;
    background:#fff;
    border:1px solid var(--border-color);
    border-radius:12px;
    padding:.75rem .9rem;
    margin-bottom:.75rem;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
  }
  .styled-table--responsive tbody td{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:.75rem;
    padding:.35rem 0 !important;
    border:none !important;
    width:100% !important;
  }
  .styled-table--responsive tbody td::before{
    content: attr(data-label);
    font-weight:600;
    color: var(--text-muted);
  }
  .styled-table--responsive tbody td.text-right{
    justify-content:flex-end;
  }
}

/* Paginación compacta */
.pager{
  margin-top:1rem;
  text-align:center;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:center;
}

/* ===== Botones: ajustes responsive ===== */
@media (max-width: 640px){
  .btn-group .btn{ flex:1 1 auto; }
  .top-bar .btn{ padding:.5rem .8rem; }
  .btn-lg{ padding:.75rem 1.1rem; }
}

/* Botones sobre fondos muy claros de topbar */
.top-bar .btn-primary{ box-shadow: 0 3px 10px rgba(30,136,229,.15); }