/* ================================================================
   Shortcode [corsi_utente] — Area riservata
================================================================ */

/* ── Variabili ─────────────────────────────────────────────────── */
.cu-wrap {
	--cu-navy:       #1e3a5f;
	--cu-navy-dk:    #152a44;
	--cu-navy-lt:    #2c5282;
	--cu-orange:     #e67e22;
	--cu-orange-dk:  #c7621a;
	--cu-green:      #27ae60;
	--cu-blue:       #3498db;
	--cu-text:       #333;
	--cu-muted:      #666;
	--cu-border:     #e5e5e5;
	--cu-bg:         #fafafa;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cu-text);
}

/* ── User card ─────────────────────────────────────────────────── */
.cu-user-card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
	border-left: 4px solid var(--cu-navy);
	margin: 0 0 28px;
}
.cu-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--cu-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 700;
	flex-shrink: 0;
}
.cu-user-info { flex: 1; }
.cu-user-name  { font-size: 20px; color: var(--cu-navy); font-weight: 700; }
.cu-user-email { color: var(--cu-muted); font-size: 13px; margin-top: 2px; }
.cu-user-meta  { margin-top: 6px; font-size: 12px; color: var(--cu-muted); }
.cu-user-meta strong { color: var(--cu-navy); }
.cu-btn-logout {
	background: var(--cu-navy);
	color: #fff !important;
	border: none;
	padding: 10px 20px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	cursor: pointer;
	border-radius: 2px;
	text-decoration: none !important;
	transition: background .2s;
	white-space: nowrap;
}
.cu-btn-logout:hover { background: var(--cu-orange) !important; }

/* ── Stats ─────────────────────────────────────────────────────── */
.cu-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	margin-bottom: 36px;
}
.cu-stat {
	background: #fff;
	border: 1px solid var(--cu-border);
	border-top: 3px solid var(--cu-orange);
	padding: 18px 20px;
	text-align: center;
}
.cu-stat--total    { border-top-color: var(--cu-navy); }
.cu-stat--progress { border-top-color: var(--cu-orange); }
.cu-stat--done     { border-top-color: var(--cu-green); }
.cu-stat--new      { border-top-color: var(--cu-blue); }
.cu-stat-num { font-size: 32px; color: var(--cu-navy); font-weight: 700; line-height: 1; }
.cu-stat-lbl { font-size: 11px; color: var(--cu-muted); text-transform: uppercase; letter-spacing: .8px; margin-top: 6px; }

/* ── Section title ─────────────────────────────────────────────── */
.cu-section-title {
	font-size: 24px;
	color: var(--cu-navy);
	font-weight: 400;
	margin: 0 0 5px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--cu-navy);
	position: relative;
}
.cu-section-title::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 80px;
	height: 2px;
	background: var(--cu-orange);
}

/* ── Filtri ────────────────────────────────────────────────────── */
.cu-filters {
	display: flex;
	gap: 10px;
	margin: 20px 0;
	flex-wrap: wrap;
	align-items: center;
}
.cu-chip {
	padding: 6px 14px;
	font-size: 12px;
	background: #fff;
	border: 1px solid var(--cu-border);
	color: var(--cu-muted);
	cursor: pointer;
	border-radius: 20px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	transition: all .2s;
	font-family: inherit;
}
.cu-chip--active,
.cu-chip:hover {
	background: var(--cu-navy);
	color: #fff;
	border-color: var(--cu-navy);
}
.cu-search { margin-left: auto; }
.cu-search input {
	padding: 8px 12px;
	border: 1px solid var(--cu-border);
	font-size: 13px;
	width: 220px;
	font-family: inherit;
	outline: none;
}
.cu-search input:focus { border-color: var(--cu-navy); }

/* ── Griglia ───────────────────────────────────────────────────── */
.cu-grid {
	display: grid;
	gap: 20px;
	margin-top: 20px;
}
.cu-cols-1 { grid-template-columns: 1fr; }
.cu-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cu-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cu-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Card corso ────────────────────────────────────────────────── */
.cu-course {
	background: #fff;
	border: 1px solid var(--cu-border);
	border-top: 4px solid var(--cu-orange);
	display: flex;
	flex-direction: column;
	transition: all .25s;
}
.cu-course:hover {
	box-shadow: 0 6px 16px rgba(30,58,95,.12);
	transform: translateY(-2px);
}
.cu-course--completed   { border-top-color: var(--cu-green); }
.cu-course--in-progress { border-top-color: var(--cu-orange); }
.cu-course--new         { border-top-color: var(--cu-blue); }

.cu-course-header { padding: 20px 20px 12px; position: relative; }

.cu-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 4px 10px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	border-radius: 2px;
	color: #fff;
}
.cu-badge--done     { background: var(--cu-green); }
.cu-badge--progress { background: var(--cu-orange); }
.cu-badge--new      { background: var(--cu-navy); }

.cu-category {
	font-size: 10px;
	color: var(--cu-muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 8px;
	font-weight: 600;
}
.cu-category::before { content: '▸ '; color: var(--cu-orange); }

.cu-course-title {
	font-size: 18px;
	color: var(--cu-navy);
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	padding-right: 70px;
	min-height: 48px;
}
.cu-course-title a { color: inherit; text-decoration: none; }
.cu-course-title a:hover { color: var(--cu-orange); }

.cu-course-body { padding: 0 20px 12px; flex: 1; }

.cu-meta {
	display: flex;
	gap: 15px;
	font-size: 11px;
	color: var(--cu-muted);
	margin-top: 4px;
}
.cu-meta-lessons::before  { content: '📚 '; }
.cu-meta-duration::before { content: '⏱ '; }

.cu-excerpt { color: var(--cu-muted); font-size: 13px; margin-top: 10px; line-height: 1.6; }

/* ── Barra progresso ───────────────────────────────────────────── */
.cu-progress-wrap { padding: 0 20px 14px; }
.cu-progress-label {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--cu-muted);
	margin-bottom: 6px;
	font-weight: 600;
}
.cu-progress-label strong { color: var(--cu-navy); }
.cu-progress-bar {
	height: 6px;
	background: #eee;
	overflow: hidden;
	border-radius: 3px;
}
.cu-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--cu-orange), var(--cu-orange-dk));
	transition: width .4s;
}
.cu-course--completed .cu-progress-fill {
	background: linear-gradient(90deg, var(--cu-green), #1e8449);
}

/* ── Footer card ───────────────────────────────────────────────── */
.cu-course-footer {
	padding: 14px 20px;
	border-top: 1px solid var(--cu-border);
	background: var(--cu-bg);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}
.cu-label-done  { font-size: 12px; color: var(--cu-green); font-weight: 700; }
.cu-label-muted { font-size: 11px; color: var(--cu-muted); }
.cu-btn-course {
	color: var(--cu-orange) !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .5px;
	transition: color .2s;
	white-space: nowrap;
}
.cu-btn-course::after { content: ' →'; display: inline-block; transition: transform .2s; }
.cu-btn-course:hover { color: var(--cu-navy) !important; }
.cu-btn-course:hover::after { transform: translateX(4px); }
.cu-btn-disabled {
	color: #aaa;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .4px;
}

/* ── Stati vuoti ───────────────────────────────────────────────── */
.cu-no-results,
.cu-empty {
	padding: 20px;
	background: #fff;
	border-left: 4px solid var(--cu-navy);
	border: 1px solid var(--cu-border);
	margin-top: 20px;
	color: var(--cu-muted);
}

/* ── Login ─────────────────────────────────────────────────────── */
.cu-login-wrap  { max-width: 420px; margin: 30px auto; }
.cu-login-title { color: #1e3a5f; margin-bottom: 16px; }
.cu-login-error { color: #c0392b; margin-bottom: 12px; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.cu-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.cu-grid  { grid-template-columns: 1fr !important; }
	.cu-stats { grid-template-columns: repeat(2, 1fr); }
	.cu-user-card { flex-direction: column; text-align: center; }
	.cu-search { margin-left: 0; width: 100%; }
	.cu-search input { width: 100%; }
}