/* =========================================================
   LD Meus Cursos — Estilos públicos
   Versão: 1.1.0
   ========================================================= */

/* ── Variáveis ─────────────────────────────────────────── */
.ldmc-wrapper {
	--ldmc-primary : #2563eb;
	--ldmc-green   : #22c55e;
	--ldmc-amber   : #f59e0b;
	--ldmc-purple  : #7c3aed;
	--ldmc-radius  : 12px;
	--ldmc-shadow  : 0 2px 12px rgba(0,0,0,.09);
	font-family    : inherit;
	max-width      : 1200px;
	margin         : 0 auto;
	padding        : 28px 0;
}

/* ── Cabeçalho ─────────────────────────────────────────── */
.ldmc-header  { margin-bottom: 28px; }
.ldmc-titulo  { font-size: 1.75rem; font-weight: 700; color: #0f172a; margin: 0 0 16px; }

.ldmc-stats   { display: flex; gap: 16px; flex-wrap: wrap; }

.ldmc-stat {
	background   : #f8fafc;
	border       : 1px solid #e2e8f0;
	border-radius: 10px;
	padding      : 12px 20px;
	text-align   : center;
	min-width    : 100px;
	flex         : 1;
}
.ldmc-stat--green { border-color: #bbf7d0; background: #f0fdf4; }
.ldmc-stat--amber { border-color: #fde68a; background: #fffbeb; }
.ldmc-stat--blue  { border-color: #bfdbfe; background: #eff6ff; }

.ldmc-stat-num {
	display    : block;
	font-size  : 1.6rem;
	font-weight: 700;
	line-height: 1;
	color      : #0f172a;
}
.ldmc-stat--green .ldmc-stat-num { color: #16a34a; }
.ldmc-stat--amber .ldmc-stat-num { color: #d97706; }
.ldmc-stat--blue  .ldmc-stat-num { color: #2563eb; }

.ldmc-stat-label {
	font-size : .75rem;
	color     : #64748b;
	margin-top: 4px;
	display   : block;
}

/* ── Grid ──────────────────────────────────────────────── */
.ldmc-grid {
	display              : grid;
	gap                  : 24px;
	grid-template-columns: repeat(3, 1fr);
}
.ldmc-cols-1 { grid-template-columns: 1fr; }
.ldmc-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ldmc-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ldmc-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Layout lista ───────────────────────────────────────── */
.ldmc-grid.ldmc-list                 { grid-template-columns: 1fr !important; }
.ldmc-grid.ldmc-list .ldmc-card      { flex-direction: row; }
.ldmc-grid.ldmc-list .ldmc-thumb     { width: 240px; flex-shrink: 0; aspect-ratio: auto; }
.ldmc-grid.ldmc-list .ldmc-body      { flex: 1; }

/* ── Responsivo ─────────────────────────────────────────── */
@media (max-width: 960px) {
	.ldmc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
	.ldmc-grid           { grid-template-columns: 1fr !important; }
	.ldmc-card           { flex-direction: column !important; }
	.ldmc-thumb          { width: 100% !important; aspect-ratio: 16/9 !important; }
	.ldmc-stats          { gap: 10px; }
	.ldmc-stat           { min-width: 80px; padding: 10px 12px; }
	.ldmc-stat-num       { font-size: 1.3rem; }
}

/* ── Card ───────────────────────────────────────────────── */
.ldmc-card {
	background    : #fff;
	border-radius : var(--ldmc-radius);
	box-shadow    : var(--ldmc-shadow);
	border        : 1px solid #e2e8f0;
	overflow      : hidden;
	display       : flex;
	flex-direction: column;
	transition    : transform .2s ease, box-shadow .2s ease;
}
.ldmc-card:hover {
	transform : translateY(-4px);
	box-shadow: 0 8px 28px rgba(0,0,0,.13);
}

/* ── Thumbnail ───────────────────────────────────────────── */
.ldmc-thumb {
	position       : relative;
	display        : block;
	aspect-ratio   : 16/9;
	overflow       : hidden;
	background     : #f1f5f9;
	text-decoration: none;
}
.ldmc-thumb img {
	width     : 100%;
	height    : 100%;
	object-fit: cover;
	transition: transform .35s ease;
	display   : block;
}
.ldmc-card:hover .ldmc-thumb img { transform: scale(1.05); }

/* ── Badge de status ────────────────────────────────────── */
.ldmc-badge {
	position      : absolute;
	top           : 10px;
	right         : 10px;
	padding       : 4px 11px;
	border-radius : 99px;
	font-size     : .68rem;
	font-weight   : 700;
	letter-spacing: .04em;
	color         : #fff;
	background    : rgba(0,0,0,.45);
	white-space   : nowrap;
}
.ldmc-concluido    .ldmc-badge { background: var(--ldmc-green); }
.ldmc-andamento    .ldmc-badge { background: var(--ldmc-amber); }
.ldmc-nao-iniciado .ldmc-badge { background: #94a3b8; }

/* ── Overlay concluído ───────────────────────────────────── */
.ldmc-done-overlay {
	position  : absolute;
	bottom    : 10px;
	left      : 10px;
	font-size : 1.6rem;
	filter    : drop-shadow(0 1px 3px rgba(0,0,0,.45));
	line-height: 1;
}

/* ── Corpo do card ───────────────────────────────────────── */
.ldmc-body {
	padding       : 18px;
	display       : flex;
	flex-direction: column;
	flex          : 1;
	gap           : 12px;
}

.ldmc-course-title {
	margin     : 0;
	font-size  : 1rem;
	font-weight: 600;
	line-height: 1.4;
}
.ldmc-course-title a { color: #0f172a; text-decoration: none; }
.ldmc-course-title a:hover { color: var(--ldmc-primary); text-decoration: underline; }

.ldmc-excerpt { margin: 0; font-size: .85rem; color: #64748b; line-height: 1.55; }

/* ── Progresso ───────────────────────────────────────────── */
.ldmc-progress-track {
	background   : #e2e8f0;
	border-radius: 99px;
	height       : 8px;
	overflow     : hidden;
}
.ldmc-progress-fill {
	height       : 100%;
	border-radius: 99px;
	background   : linear-gradient(90deg, var(--ldmc-primary), var(--ldmc-purple));
	transition   : width .65s ease;
}
.ldmc-concluido .ldmc-progress-fill {
	background: var(--ldmc-green);
}
.ldmc-andamento .ldmc-progress-fill {
	background: linear-gradient(90deg, var(--ldmc-amber), #f97316);
}
.ldmc-progress-info {
	display        : flex;
	justify-content: space-between;
	font-size      : .73rem;
	color          : #64748b;
	margin-top     : 5px;
}
.ldmc-progress-info strong { color: #0f172a; }

/* ── Botões de ação ─────────────────────────────────────── */
.ldmc-actions {
	display    : flex;
	gap        : 8px;
	flex-wrap  : wrap;
	margin-top : auto;
}
.ldmc-btn {
	display        : inline-flex;
	align-items    : center;
	justify-content: center;
	gap            : 5px;
	padding        : 9px 18px;
	border-radius  : 8px;
	font-size      : .84rem;
	font-weight    : 600;
	text-decoration: none;
	border         : none;
	cursor         : pointer;
	line-height    : 1;
	flex           : 1;
	transition     : background .2s, color .2s, box-shadow .2s;
	white-space    : nowrap;
}
.ldmc-btn--primary            { background: var(--ldmc-primary); color: #fff; }
.ldmc-btn--primary:hover      { background: #1d4ed8; color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,.35); }
.ldmc-btn--start              { background: var(--ldmc-purple);  color: #fff; }
.ldmc-btn--start:hover        { background: #6d28d9; color: #fff; }
.ldmc-btn--cert               { background: var(--ldmc-green);   color: #fff; flex: none; }
.ldmc-btn--cert:hover         { background: #16a34a; color: #fff; }
.ldmc-btn--ghost              { background: #f1f5f9; color: #475569; }
.ldmc-btn--ghost:hover        { background: #e2e8f0; color: #1e293b; }

/* ── Aviso / vazio ───────────────────────────────────────── */
.ldmc-aviso {
	background   : #f8fafc;
	border       : 1px dashed #cbd5e1;
	border-radius: var(--ldmc-radius);
	padding      : 32px 24px;
	text-align   : center;
	color        : #64748b;
	font-size    : .95rem;
}
.ldmc-aviso a { color: var(--ldmc-primary); font-weight: 600; }
.ldmc-aviso p { margin: 0; }

/* ── Botão de refresh via API ────────────────────────────── */
.ldmc-api-refresh { margin-top: 24px; text-align: center; }
.ldmc-api-refresh .ldmc-btn { flex: none; padding: 10px 24px; }

/* ── [logout_link] ───────────────────────────────────────── */
.ldmc-logout-link {
	color          : #dc2626;
	font-weight    : 600;
	text-decoration: none;
	font-size      : .9rem;
	transition     : color .2s;
}
.ldmc-logout-link:hover {
	color          : #b91c1c;
	text-decoration: underline;
}

.ldmc-logout-btn {
	display        : inline-flex;
	align-items    : center;
	gap            : 6px;
	padding        : 9px 20px;
	border-radius  : 8px;
	background     : #fee2e2;
	color          : #dc2626;
	font-weight    : 600;
	font-size      : .88rem;
	text-decoration: none;
	border         : 1px solid #fecaca;
	transition     : background .2s, color .2s, border-color .2s;
	cursor         : pointer;
}
.ldmc-logout-btn:hover {
	background  : #dc2626;
	color       : #fff;
	border-color: #dc2626;
}