/* File: /asset/css/WeeklyGrid.css v4.0 */

/* === BASE === */
.weekly-grid-desktop, .weekly-grid-mobile {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.4;
  color: #333;
}

/* === DESKTOP === */
.weekly-grid-desktop { width: 100%; margin: 0 auto; }

.schedule-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
}

.schedule-table th,
.schedule-table td { overflow: hidden; text-overflow: ellipsis; }

.schedule-table th {
  background: #111;
  color: #fff;
  padding: 10px 6px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  word-break: break-word;
}

.time-header {
  width: 70px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
}

.time-label {
  width: 70px;
  background: #f8f9fa;
  border-right: 2px solid #dee2e6;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  font-size: 13px;
  color: #495057;
  padding: 8px 4px;
  white-space: nowrap;
}

.classes-cell {
  padding: 8px 6px;
  vertical-align: top;
  border-right: 1px solid #dee2e6;
  background: #fafbfc;
}
.classes-cell:last-child { border-right: none; }

/* === CARDS === */
.class-card {
  position: relative;
  margin-bottom: 6px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  min-height: 75px;
}
.class-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.class-card:last-child { margin-bottom: 0; }

.class-link { position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; }

.class-content {
  padding: 8px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.class-venue-line { display:flex; align-items:center; gap:5px; margin-bottom:2px; }

.modality-icon { width:16px; height:16px; object-fit:contain; filter:brightness(0) invert(1); opacity:0.9; flex-shrink:0; }
.modality-icon.hybrid-icon { width:32px; }

.class-venue { color:rgba(255,255,255,0.85); font-size:10px; font-weight:500; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.class-name  { color:#fff; font-weight:600; font-size:11px; line-height:1.2; word-break:break-word; }
.class-time  { color:rgba(255,255,255,0.9); font-size:10px; font-weight:500; font-family:'Monaco','Menlo',monospace; }
.class-modality { display:none; }

/* === MOBILE === */
.weekly-grid-mobile { max-width:480px; margin:0 auto; }

.day-selector {
  display:flex; background:#fff; border-radius:8px;
  padding:4px; margin-bottom:20px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1); overflow-x:auto;
}

.day-btn {
  flex:1; min-width:40px; padding:12px 6px;
  background:transparent; border:none; border-radius:6px;
  font-size:11px; font-weight:600; color:#6c757d;
  cursor:pointer; transition:all 0.2s ease;
  text-transform:uppercase; letter-spacing:0.3px;
}
.day-btn.active { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; transform:scale(1.05); }

.day-content { display:none; background:#fff; border-radius:8px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.day-content.active { display:block; }
.day-content h3 { margin:0 0 20px; font-size:24px; font-weight:700; color:#2c3e50; text-align:center; border-bottom:2px solid #eee; padding-bottom:10px; }

.time-period { margin-bottom:25px; }
.time-period:last-child { margin-bottom:0; }
.time-period h4 { margin:0 0 15px; font-size:18px; font-weight:600; color:#495057; text-transform:uppercase; border-left:4px solid #667eea; padding-left:12px; }

.classes-grid { display:grid; gap:12px; }

/* === TABLETS (769–1024px) === */
@media (max-width:1024px) and (min-width:769px) {
  .schedule-table th { font-size:11px; padding:8px 3px; }
  .time-label  { font-size:11px; width:58px; }
  .time-header { width:58px; }
  .classes-cell { padding:5px 3px; }
  .class-content { padding:5px; }
  .class-name  { font-size:10px; }
  .class-time  { font-size:9px; }
  .class-venue { font-size:9px; }
  .modality-icon { width:13px; height:13px; }
  .modality-icon.hybrid-icon { width:26px; }
}

/* === MÓVIL === */
@media (max-width:768px) {
  .weekly-grid-desktop { display:none; }
  .class-card { min-height:70px; }
}
@media (min-width:769px) { .weekly-grid-mobile { display:none; } }
@media (max-width:480px) {
  .day-btn { min-width:38px; padding:10px 4px; font-size:10px; }
  .day-content { padding:15px; }
  .day-content h3 { font-size:20px; }
  .time-period h4 { font-size:16px; }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion:reduce) {
  .class-card, .day-btn { transition:none; }
  .class-card:hover { transform:none; }
}

/* === DARK MODE === */
@media (prefers-color-scheme:dark) {
  .weekly-grid-desktop, .weekly-grid-mobile { color:#e9ecef; }
  .schedule-table { background:#2c3e50; }
  .classes-cell { background:#34495e; border-color:#495057; }
  .time-label { background:#495057; color:#e9ecef; }
  .day-content { background:#2c3e50; }
  .day-content h3 { color:#e9ecef; border-color:#495057; }
}