/**
 * Dafo Dashboard — Escritorio del Alumno (Tutor LMS)
 * Fidelidad visual al mockup Next.js. Tokens del spec-visual-escritorio.md.
 * Marca: navy / azul / verde / ámbar — SIN ROSA.
 * Scope: solo en is_tutor_dashboard() (encolado condicional en functions.php).
 * Agente Gestor 2026-06-26.
 */

/* ============================================================
   0. TOKENS
   ============================================================ */
.dafo-dashboard {
	--dafo-deep:       #04044A; /* Deep Twilight */
	--dafo-navy:       #000877; /* Navy */
	--dafo-blue:       #00A3FF; /* Blue Bell */
	--dafo-icy:        #AFE2FF; /* Icy (numero apagado = 0) */
	--dafo-bg:         #F7F8FC; /* Ghost White — fondo pagina */
	--dafo-text:       #141414;
	--dafo-border:     #E6EDF5;
	--dafo-white:      #FFFFFF;
	--dafo-green:      #059669; /* emerald-600 eyebrow */
	--dafo-green2:     #16A34A; /* green-600 numero completados >0 */
	--dafo-amber-bg:   #FEF3C7;
	--dafo-amber-tx:   #92400E;
	--dafo-bluebadge-bg:#DBEAFE;
	--dafo-bluebadge-tx:#1D4ED8;
	--dafo-red:        #DC2626;
	--dafo-shadow-xs:  0 1px 2px rgba(0,0,0,.05);
	--dafo-shadow-sm:  0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
	--dafo-shadow-md:  0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
	--dafo-head: "adineue PRO", "Space Grotesk", Montserrat, sans-serif;
	--dafo-body: Gotham, Montserrat, Inter, sans-serif;
	--dafo-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ============================================================
   1. PAGINA / CONTENEDOR
   ============================================================ */
/* La hoja solo carga en el dashboard => seguro pintar el contenedor de pagina. */
#content,
.site-content,
.ast-container-fluid > #primary,
#primary {
	background: #F7F8FC;
}
.ast-container { max-width: 1320px; }

.dafo-dashboard {
	font-family: var(--dafo-body);
	color: var(--dafo-text);
	background: #F7F8FC;
}
.dafo-dashboard *,
.dafo-dashboard *::before,
.dafo-dashboard *::after { box-sizing: border-box; }

.dafo-dash-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 16px 80px;
}
@media (min-width:640px){ .dafo-dash-container { padding-left:24px; padding-right:24px; } }
@media (min-width:1024px){ .dafo-dash-container { padding-left:32px; padding-right:32px; } }

/* Neutralizar estilos base de Tutor sobre el wrapper que conservamos */
.dafo-dashboard.tutor-wrap { padding: 0; margin: 0; }
.dafo-content .tutor-dashboard-content {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
}

/* ============================================================
   2. HEADER DE PERFIL (cover + datos)
   ============================================================ */
.dafo-profile-card {
	position: relative;
	background: var(--dafo-white);
	border: 1px solid var(--dafo-border);
	border-radius: 24px;
	box-shadow: var(--dafo-shadow-sm);
	overflow: hidden;
	margin-bottom: 32px;
}

.dafo-cover {
	position: relative;
	width: 100%;
	height: 176px;
	background: linear-gradient(to right, #04044A 0%, #000877 100%);
}
@media (min-width:640px){ .dafo-cover { height: 208px; } }

.dafo-cover-overlay {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(0,163,255,0.2), transparent 70%);
	pointer-events: none;
}

.dafo-profile-body {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 24px;
	padding: 0 24px 24px;
}

.dafo-profile-left {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	min-width: 0;
}

/* Avatar — circulo 112px (96 mobile) borde blanco 4px, solapa el cover */
.dafo-avatar {
	position: relative;
	z-index: 3;
	width: 96px;
	height: 96px;
	margin-top: -48px;
	border-radius: 9999px;
	border: 4px solid #fff;
	box-shadow: var(--dafo-shadow-md);
	background: #D0DFEE;
	overflow: hidden;
	flex-shrink: 0;
}
@media (min-width:640px){
	.dafo-avatar { width:112px; height:112px; margin-top:-56px; }
}
.dafo-avatar img,
.dafo-avatar .tutor-avatar,
.dafo-avatar .tutor-ratio,
.dafo-avatar .tutor-ratio > * {
	width: 100% !important;
	height: 100% !important;
	border-radius: 9999px !important;
	object-fit: cover;
}
.dafo-avatar .tutor-avatar { padding:0 !important; margin:0 !important; }
.dafo-avatar .tutor-avatar-text,
.dafo-avatar .tutor-avatar > * {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #04044A, #000877);
	color: #fff;
	font-family: var(--dafo-head);
	font-size: 34px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.dafo-profile-meta { padding-bottom: 4px; min-width: 0; }

.dafo-name {
	font-family: var(--dafo-head);
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	letter-spacing: 0.72px;
	color: var(--dafo-deep);
	margin: 0 0 4px;
}

.dafo-meta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.dafo-role-badge {
	display: inline-block;
	background: var(--dafo-amber-bg);
	color: var(--dafo-amber-tx);
	font-family: var(--dafo-mono);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.9px;
	padding: 2px 10px;
	border-radius: 4px;
}
.dafo-sep { color: rgba(4,4,74,0.4); font-size: 12px; line-height: 1; }
.dafo-job-title {
	font-family: var(--dafo-body);
	font-size: 12px;
	font-weight: 400;
	color: rgba(4,4,74,0.7);
}

/* Tres stats del header (derecha) */
.dafo-profile-stats {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	padding-bottom: 4px;
	margin-left: auto;
}
.dafo-hstat { text-align: center; }
.dafo-hstat-num {
	display: block;
	font-family: var(--dafo-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}
.dafo-hstat-enrolled  { color: var(--dafo-deep); }
.dafo-hstat-active    { color: var(--dafo-blue); }
/* Header mini-stats: color FIJO por estado siempre (la regla Icy-cuando-0 NO aplica acá,
   solo al numero grande de la stat-card). COMPLETADOS del header = verde siempre. */
.dafo-hstat-completed { color: var(--dafo-green2); }
.dafo-hstat-label {
	display: block;
	font-family: var(--dafo-body);
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: rgba(4,4,74,0.7);
	margin-top: 2px;
}

/* ============================================================
   3. GRID PRINCIPAL (sidebar + contenido)
   ============================================================ */
.dafo-dash-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
}
@media (min-width:1024px){
	.dafo-dash-grid { grid-template-columns: minmax(0,1fr) minmax(0,3fr); }
}

/* ============================================================
   4. SIDEBAR — MENU DEL ALUMNO
   ============================================================ */
.dafo-sidebar {
	background: var(--dafo-white);
	border: 1px solid var(--dafo-border);
	border-radius: 16px;
	padding: 20px;
	box-shadow: var(--dafo-shadow-sm);
}
.dafo-menu-eyebrow {
	font-family: var(--dafo-head);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(4,4,74,0.5);
	padding: 0 12px 8px;
	margin-bottom: 12px;
}
.dafo-menu { display: flex; flex-direction: column; gap: 4px; }
.dafo-menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	font-family: var(--dafo-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--dafo-text);
	text-decoration: none;
	transition: all .15s ease;
	cursor: pointer;
}
.dafo-menu-item:hover {
	background: #F1F5F9;
	color: var(--dafo-navy);
}
.dafo-menu-item.dafo-menu-active,
.dafo-menu-item.dafo-menu-active:hover {
	background: var(--dafo-navy);
	color: #fff;
	box-shadow: var(--dafo-shadow-sm);
}
.dafo-menu-label { line-height: 1.2; }
.dafo-menu-badge {
	flex-shrink: 0;
	background: var(--dafo-bluebadge-bg);
	color: var(--dafo-bluebadge-tx);
	font-family: var(--dafo-body);
	font-size: 9px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 9999px;
	line-height: 1.4;
}
.dafo-menu-item.dafo-menu-active .dafo-menu-badge {
	background: rgba(255,255,255,0.22);
	color: #fff;
}
.dafo-menu-divider {
	height: 1px;
	background: var(--dafo-border);
	margin: 12px 0;
}
.dafo-menu-item.dafo-menu-logout { color: var(--dafo-red); }
.dafo-menu-item.dafo-menu-logout:hover { background: #FEF2F2; color: var(--dafo-red); }

/* ============================================================
   5. STAT-CARDS (3 col)
   ============================================================ */
.dafo-content { min-width: 0; }
.dafo-statcards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 32px;
}
@media (min-width:640px){ .dafo-statcards { grid-template-columns: repeat(3,1fr); } }

.dafo-statcard {
	background: var(--dafo-white);
	border: 1px solid var(--dafo-border);
	border-radius: 16px;
	box-shadow: var(--dafo-shadow-sm);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.dafo-statcard-eyebrow {
	font-family: var(--dafo-head);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.dafo-statcard-enrolled  .dafo-statcard-eyebrow { color: rgba(4,4,74,0.5); }
.dafo-statcard-active    .dafo-statcard-eyebrow { color: var(--dafo-blue); }
.dafo-statcard-completed .dafo-statcard-eyebrow { color: var(--dafo-green); }
.dafo-statcard-num {
	font-family: var(--dafo-body);
	font-size: 30px;
	font-weight: 500;
	line-height: 36px;
}
.dafo-statcard-enrolled  .dafo-statcard-num { color: var(--dafo-deep); }
.dafo-statcard-active    .dafo-statcard-num { color: var(--dafo-blue); }
.dafo-statcard-completed .dafo-statcard-num { color: var(--dafo-green2); }
.dafo-statcard-num.dafo-stat-zero { color: var(--dafo-icy); }
.dafo-statcard-sub {
	font-family: var(--dafo-body);
	font-size: 10px;
	font-weight: 400;
	color: rgba(4,4,74,0.7);
}

/* ============================================================
   6. SECCION "CURSO EN CURSO" + course-cards
   ============================================================ */
.dafo-section-title {
	font-family: var(--dafo-head);
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.28px;
	color: var(--dafo-deep);
	margin: 0 0 16px;
}
.dafo-course-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width:768px){ .dafo-course-grid { grid-template-columns: repeat(2,1fr); } }

.dafo-course-card {
	background: var(--dafo-white);
	border: 1px solid var(--dafo-border);
	border-radius: 16px;
	box-shadow: var(--dafo-shadow-xs);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .15s ease;
}
.dafo-course-card:hover { box-shadow: var(--dafo-shadow-sm); }

.dafo-course-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--dafo-border);
	overflow: hidden;
}
.dafo-course-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.dafo-course-cat {
	position: absolute;
	bottom: 8px;
	left: 8px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-family: var(--dafo-mono);
	font-size: 9px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.9px;
	padding: 2px 8px;
	border-radius: 4px;
}
.dafo-course-rating {
	position: absolute;
	bottom: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-family: var(--dafo-body);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
}
.dafo-course-rating svg { width: 11px; height: 11px; display: block; }

.dafo-course-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	flex: 1 1 auto;
}
.dafo-course-title {
	font-family: var(--dafo-head);
	font-size: 12px;
	font-weight: 400;
	line-height: 16.5px;
	color: var(--dafo-deep);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dafo-progress-block { display: flex; flex-direction: column; gap: 8px; }
.dafo-progress-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dafo-progress-label {
	font-family: var(--dafo-body);
	font-size: 12px;
	font-weight: 400;
	color: rgba(4,4,74,0.7);
}
.dafo-progress-pct {
	font-family: var(--dafo-body);
	font-size: 12px;
	font-weight: 700;
	color: var(--dafo-blue);
}
.dafo-progress-track {
	width: 100%;
	height: 6px;
	background: var(--dafo-border);
	border-radius: 9999px;
	overflow: hidden;
}
.dafo-progress-fill {
	height: 100%;
	border-radius: 9999px;
	background: linear-gradient(to right, #00A3FF, #000877);
	transition: width .3s ease;
}

.dafo-course-btn {
	display: block;
	width: 100%;
	margin-top: auto;
	text-align: center;
	padding: 8px 12px;
	background: var(--dafo-navy);
	color: #fff;
	font-family: var(--dafo-body);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	text-decoration: none;
	border-radius: 8px;
	transition: background .15s ease;
}
.dafo-course-btn:hover { background: #0003FF; color: #fff; }

/* ============================================================
   7. RESPONSIVE — colapso (sidebar arriba) ya cubierto por el grid 1-col <1024px
   ============================================================ */
@media (max-width:1023px){
	.dafo-sidebar { margin-bottom: 0; }
}
/* Header de perfil en mobile (<640px): apila y centra como el mockup */
@media (max-width:639px){
	.dafo-profile-body { flex-direction: column; align-items: center; }
	.dafo-profile-left { flex-direction: column; align-items: center; text-align: center; }
	.dafo-profile-meta { padding-bottom: 0; text-align: center; }
	.dafo-name { text-align: center; }
	.dafo-meta-row { justify-content: center; }
	.dafo-profile-stats { margin-left: 0; width: 100%; justify-content: center; gap: 28px; }
}
@media (max-width:480px){
	.dafo-profile-stats { gap: 18px; width: 100%; justify-content: center; margin-left: 0; }
	.dafo-name { font-size: 20px; line-height: 28px; }
}
 /* DAFO login footer */ .tutor-text-center.tutor-color-secondary.tutor-mt-20{text-align:center !important;line-height:1.7 !important;} .tutor-text-center.tutor-color-secondary.tutor-mt-20 .tutor-btn-link,.tutor-text-center.tutor-color-secondary.tutor-mt-20 a.tutor-btn{display:inline !important;padding:0 !important;margin:0 0 0 5px !important;min-height:0 !important;height:auto !important;line-height:inherit !important;vertical-align:baseline !important;background:transparent !important;border:0 !important;box-shadow:none !important;color:#000877 !important;font-weight:700 !important;white-space:nowrap !important;} 
/* DAFO login footer nbsp v2 (glifo nbsp roto de Gotham parte el pie) */
.tutor-text-center.tutor-color-secondary.tutor-mt-20{text-align:center !important;font-family:Montserrat,'Helvetica Neue',Arial,sans-serif !important;line-height:1.7 !important;}
.tutor-text-center.tutor-color-secondary.tutor-mt-20 .tutor-btn-link,.tutor-text-center.tutor-color-secondary.tutor-mt-20 a.tutor-btn{display:inline !important;font-family:Montserrat,'Helvetica Neue',Arial,sans-serif !important;padding:0 !important;margin:0 0 0 5px !important;min-height:0 !important;height:auto !important;line-height:inherit !important;vertical-align:baseline !important;background:transparent !important;border:0 !important;box-shadow:none !important;color:#000877 !important;font-weight:700 !important;white-space:nowrap !important;}


/* ============================================================
   8. DAFO FIX ACTIVE-COURSES (2026-07-02) - Dashboard "Cursos inscritos/activos"
   (template NATIVO de Tutor tutor/dashboard/enrolled-courses.php, SIN override
   en child) - mismo antipatron ya resuelto en la grilla /cursos/ (post 955) y
   el sidebar del curso individual 832 (tutor-single-course.css): fila flex
   rating+boton con justify-content:space-between SIN flex-wrap -> el boton
   'Ver Curso' (.dafo-ver-curso, flex:0 1 auto) se comprimia en vez de bajar
   entero, partiendo su propio texto en 2 lineas ('Ver'/'Curso').
   Selector real (NATIVO de Tutor, distinto de .dafo-ratings-row usado en la
   grilla): .tutor-course-ratings > .tutor-ratings + a.dafo-ver-curso.
   ============================================================ */
/* ===== DAFO FIX ACTIVE-COURSES ===== */
.tutor-course-ratings {
	flex-wrap: wrap;
	row-gap: 8px;
}
.tutor-course-ratings .tutor-ratings {
	min-width: 0;
	flex: 1 1 auto;
}
.tutor-course-ratings .dafo-ver-curso {
	flex: 0 0 auto;
	white-space: nowrap;
	margin-left: auto;
}