/* ============================================================
   DASHBOARD (/dashboard) — ported from mock-up-FD/tablero.html
   All classes prefixed `fdash-` and scoped under `.fdash-root`
   (mockup used generic names like .card/.step that collide with
   Bootstrap / MudBlazor). Fonts Space Grotesk + Sora already loaded.
   ============================================================ */

.fdash-root {
  font-family: 'Sora', sans-serif;
  color: #0F172A;
  background: #F8FAFC;

  /* Full-bleed across the MudContainer gutter + top mt-4 */
  position: relative;
  margin-top: -16px;
  margin-left: -16px;
  margin-right: -16px;
  padding: 2rem 16px;
  min-height: 100vh;
}
@media (min-width: 600px) {
  .fdash-root { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
}
.fdash-root * { box-sizing: border-box; }
.fdash-root h1, .fdash-root h2, .fdash-root p { margin: 0; }

.fdash-container { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.fdash-root h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px; font-weight: 600; margin-bottom: 4px; color: #0F172A;
  display: flex; align-items: center; gap: 8px;
}
.fdash-root h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px; font-weight: 600; color: #0F172A;
}
.fdash-subtitle { color: #64748B; font-size: 15px; line-height: 1.6; font-weight: 300; }
.fdash-grid-main { display: grid; grid-template-columns: 2.1fr 1fr; gap: 1.5rem; align-items: start; }
.fdash-col { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.fdash-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 1.25rem; }
.fdash-card-accent { background: #F0F6FF; border: 1px solid #CCE0FB; }

.fdash-steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 1rem; }
.fdash-step { border: 1px solid #E2E8F0; border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow: visible; }
.fdash-step-title { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 14px; color: #0F172A; text-align: center; }
.fdash-step-desc { font-size: 12px; color: #64748B; line-height: 1.5; font-weight: 300; text-align: center; }
.fdash-step-icon-wrap {
  width: 40px; height: 40px; border-radius: 10px; background: #E6F1FB; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.fdash-step-icon { color: #155EEF; display: flex; }
.fdash-step-icon svg { width: 22px; height: 22px; }
.fdash-step-icon-img { width: 24px; height: 24px; object-fit: contain; }

.fdash-step button {
  border-radius: 8px; border: none; cursor: pointer; color: #fff;
  font-size: 13px; font-weight: 700; padding: 8px 14px; margin-top: auto;
  font-family: 'Sora', sans-serif; transition: opacity 0.15s;
}
.fdash-step button:hover { opacity: 0.85; }

.fdash-step-cyan { background: #F8FAFC; border: 1.5px solid #06B6D4; }
.fdash-step-cyan .fdash-step-title { color: #06B6D4; font-weight: 700; }
.fdash-step-cyan .fdash-step-icon { color: #06B6D4; }
.fdash-step-cyan button { background: #06B6D4; }

.fdash-step-green { background: #F8FAFC; border: 1.5px solid #22C55E; }
.fdash-step-green .fdash-step-title { color: #22C55E; font-weight: 700; }
.fdash-step-green .fdash-step-icon { color: #22C55E; }
.fdash-step-green button { background: #22C55E; }

.fdash-step-amber { background: #F8FAFC; border: 1.5px solid #F59E0B; }
.fdash-step-amber .fdash-step-title { color: #F59E0B; font-weight: 700; }
.fdash-step-amber .fdash-step-icon { color: #F59E0B; }
.fdash-step-amber button { background: #F59E0B; }

.fdash-step-cm { background: #F8FAFC; border: 1.5px solid #5849E1; }
.fdash-step-cm .fdash-step-icon-wrap { background: #fff; }
.fdash-step-cm .fdash-step-title { color: #5849E1; font-weight: 700; }
.fdash-step-cm button { background: #5849E1; }

.fdash-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.fdash-link { font-size: 13px; color: #155EEF; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; cursor: pointer; background: none; border: none; padding: 0; font-family: 'Sora', sans-serif; }
.fdash-link svg { width: 15px; height: 15px; }

.fdash-videos-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; row-gap: 1.25rem; }
.fdash-video-thumb {
  position: relative; aspect-ratio: 16/10; border-radius: 8px; background-color: #F8FAFC;
  background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 1px solid #E2E8F0; text-decoration: none;
}
.fdash-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.fdash-play-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(15,23,42,0.6); display: flex; align-items: center; justify-content: center; }
.fdash-play-btn svg { width: 18px; height: 18px; color: #fff; }
.fdash-duration { position: absolute; bottom: 6px; right: 6px; background: rgba(15,23,42,0.75); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 4px; }
.fdash-video-title { margin-top: 8px; font-size: 13px; font-weight: 500; line-height: 1.4; color: #0F172A; }

.fdash-sidebar { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.fdash-ai-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fdash-ai-avatar { width: 28px; height: 28px; border-radius: 50%; background: #155EEF; display: flex; align-items: center; justify-content: center; }
.fdash-ai-avatar svg { width: 15px; height: 15px; color: #fff; }
.fdash-ai-prompt { margin-bottom: 10px; font-size: 13px; color: #64748B; font-weight: 300; }
.fdash-ai-input-row { position: relative; margin-bottom: 14px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 12px 12px 44px; }
.fdash-ai-input-row textarea { width: 100%; border: none; resize: none; font-size: 14px; font-family: 'Sora', sans-serif; color: #0F172A; min-height: 64px; background: transparent; }
.fdash-ai-input-row textarea:focus { outline: none; }
.fdash-ai-input-row textarea::placeholder { color: #94A3B8; }
.fdash-ai-input-row:focus-within { border-color: #155EEF; }
.fdash-ai-send { background: #155EEF; color: #fff; border: none; width: 36px; height: 36px; padding: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 10px; right: 10px; cursor: pointer; }
.fdash-ai-send svg { width: 16px; height: 16px; }
.fdash-ai-suggested-label { margin-bottom: 8px; font-size: 12px; font-weight: 500; color: #64748B; }
.fdash-ai-suggested { display: flex; flex-direction: column; gap: 6px; }
.fdash-ai-suggested button { text-align: left; font-size: 13px; padding: 8px 12px; border-radius: 8px; border: 1px solid #E2E8F0; background: #fff; cursor: pointer; font-family: 'Sora', sans-serif; font-weight: 500; color: #0F172A; transition: opacity 0.15s; }
.fdash-ai-suggested button:hover { opacity: 0.85; }
.fdash-view-all { display: block; text-align: right; margin-top: 12px; font-size: 13px; color: #155EEF; text-decoration: none; font-weight: 500; cursor: pointer; }

.fdash-plan-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fdash-plan-add-icon { color: #fff; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; background: #155EEF; border: none; display: flex; align-items: center; justify-content: center; padding: 0; }
.fdash-plan-add-icon:hover { background: #0E47C2; }
.fdash-plan-add-icon svg { width: 18px; height: 18px; }
.fdash-plan-week-label { margin-bottom: 10px; font-size: 13px; font-weight: 500; color: #64748B; }
.fdash-plan-empty { font-size: 13px; color: #94A3B8; font-weight: 300; padding: 6px 0; }
.fdash-plan-list { display: flex; flex-direction: column; }
.fdash-plan-item { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #0F172A; padding: 10px 0; border-bottom: 0.5px solid #E2E8F0; }
.fdash-plan-item:last-child { border-bottom: none; }
.fdash-plan-item-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; cursor: pointer; }
.fdash-plan-item-title { font-size: 14px; color: #0F172A; }
.fdash-plan-item-meta { font-size: 12px; color: #155EEF; }
.fdash-plan-delete { margin-left: auto; color: #CBD5E1; cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s; display: flex; }
.fdash-plan-delete svg { width: 15px; height: 15px; }
.fdash-plan-item:hover .fdash-plan-delete { opacity: 1; }
.fdash-plan-delete:hover { color: #E24B4A; }
.fdash-plan-check {
  appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid #CBD5E1; flex-shrink: 0; cursor: pointer; position: relative; margin: 0; background: #fff;
}
.fdash-plan-check:checked { background: #155EEF; border-color: #155EEF; }
.fdash-plan-check:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Reminder modal */
.fdash-rem-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.4); display: flex; align-items: center; justify-content: center; z-index: 1400; }
.fdash-rem-modal { background: #fff; border-radius: 12px; padding: 1.25rem; width: 320px; max-width: 90vw; border: 1px solid #E2E8F0; }
.fdash-rem-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.fdash-rem-close { color: #64748B; cursor: pointer; display: flex; background: none; border: none; padding: 0; }
.fdash-rem-close:hover { color: #0F172A; }
.fdash-rem-close svg { width: 18px; height: 18px; }
.fdash-rem-body { display: flex; flex-direction: column; gap: 10px; }
.fdash-rem-label { font-size: 12px; font-weight: 500; color: #64748B; }
.fdash-rem-input { width: 100%; border: 1px solid #E2E8F0; border-radius: 8px; padding: 8px 10px; font-size: 14px; font-family: 'Sora', sans-serif; color: #0F172A; resize: none; }
.fdash-rem-input:focus { outline: 2px solid #155EEF; outline-offset: -1px; }
.fdash-rem-row { display: flex; gap: 10px; }
.fdash-rem-row > div { flex: 1; }
.fdash-rem-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 1.25rem; }
.fdash-rem-btn-primary { background: #155EEF; color: #fff; border: none; flex: 1; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Sora', sans-serif; }
.fdash-rem-btn-secondary { background: #fff; color: #E24B4A; border: 1px solid #E2E8F0; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Sora', sans-serif; }

@media (max-width: 960px) {
  .fdash-grid-main { grid-template-columns: 1fr; }
  .fdash-steps-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fdash-videos-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .fdash-steps-grid { grid-template-columns: 1fr; }
  .fdash-videos-grid { grid-template-columns: 1fr; }
  .fdash-root { padding-top: 1rem; }
}