/**
 * Aula Amarilla — Clases en vivo + Calendario alumno + Adjuntos
 *
 * Usa los tokens tipográficos del theme (definidos en style.css :root):
 *   --pa-font-section-title / --pa-font-subsection / --pa-font-card-title-lg /
 *   --pa-font-card-title / --pa-font-body / --pa-font-body-sm /
 *   --pa-font-button / --pa-font-meta / --pa-font-label / --pa-font-micro
 *
 * Ver assets/css/README.md para la regla de qué token usar en cada rol.
 */

/* ─── Bloque "Clases en vivo" en el single del curso ───────────────────── */

.pa-clases-block { margin-top: 2rem; }
.pa-clases-block__title {
	font-family: var(--pa-font-titulo);
	font-size: var(--pa-font-section-title);
	font-weight: 700;
	line-height: var(--pa-lh-tight, 1.15);
	margin: 0 0 1.25rem;
	color: var(--pa-negro, #1f2937);
}
.pa-clases-list {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.pa-clases-list { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Card individual ──────────────────────────────────────────────────── */

.pa-clase {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 22px 24px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-family: var(--pa-font-cuerpo);
}
.pa-clase--ongoing  { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,.08); }
.pa-clase--imminent { border-color: #f59e0b; }
.pa-clase--completed { background: #f9fafb; }
.pa-clase--cancelled { opacity: .7; background: #f9fafb; }

.pa-clase__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pa-clase__badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-family: var(--pa-font-titulo);
	font-size: var(--pa-font-micro);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: #e5e7eb;
	color: #374151;
}
.pa-clase__badge--ongoing  { background: #dc2626; color: #fff; animation: pa-clase-blink 1.5s ease-in-out infinite; }
.pa-clase__badge--imminent { background: #fef3c7; color: #92400e; }
.pa-clase__badge--completed{ background: #dcfce7; color: #166534; }
.pa-clase__badge--cancelled{ background: #fee2e2; color: #991b1b; }

@keyframes pa-clase-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: .65; }
}

.pa-clase__platform {
	font-size: var(--pa-font-label);
	color: #6b7280;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.pa-clase__title {
	font-family: var(--pa-font-titulo);
	font-size: var(--pa-font-card-title-lg);
	font-weight: 700;
	line-height: var(--pa-lh-tight, 1.2);
	margin: 0;
	color: var(--pa-negro, #111827);
}
.pa-clase__meta {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
	font-size: var(--pa-font-body-sm);
	color: #4b5563;
	line-height: var(--pa-lh-normal, 1.5);
}
.pa-clase__meta li { display: flex; align-items: center; gap: 10px; }
.pa-clase__meta code,
.pa-clase__meta strong {
	font-family: var(--pa-font-cuerpo);
	font-size: var(--pa-font-body-sm);
}
.pa-clase__meta code {
	background: #f3f4f6;
	padding: 2px 8px;
	border-radius: 4px;
}
.pa-clase__msg {
	margin: 0;
	color: #6b7280;
	font-size: var(--pa-font-body-sm);
	font-style: italic;
}
.pa-clase__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
}

/* Botones — texto blanco explícito en :link/:visited para pisar el a-color del theme */
.pa-clase .pa-clase__btn,
.pa-clase .pa-clase__btn:link,
.pa-clase .pa-clase__btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 20px;
	border-radius: 8px;
	font-family: var(--pa-font-titulo);
	font-size: var(--pa-font-button);
	font-weight: 700;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.pa-clase .pa-clase__btn--primary,
.pa-clase .pa-clase__btn--primary:link,
.pa-clase .pa-clase__btn--primary:visited {
	background: var(--pa-negro, #111827);
	color: #ffffff;
}
.pa-clase .pa-clase__btn--primary:hover,
.pa-clase .pa-clase__btn--primary:focus,
.pa-clase .pa-clase__btn--primary:active {
	background: var(--pa-amarillo, #eab308);
	color: var(--pa-negro, #111827);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
	text-decoration: none;
}
.pa-clase .pa-clase__btn--ghost,
.pa-clase .pa-clase__btn--ghost:link,
.pa-clase .pa-clase__btn--ghost:visited {
	background: #f3f4f6;
	color: #374151;
	border: 1px solid #e5e7eb;
}
.pa-clase .pa-clase__btn--ghost:hover,
.pa-clase .pa-clase__btn--ghost:focus,
.pa-clase .pa-clase__btn--ghost:active {
	background: #e5e7eb;
	color: var(--pa-negro, #111827);
	text-decoration: none;
}
.pa-clase__notes {
	margin-top: 6px;
	padding: 12px 14px;
	background: #f9fafb;
	border-left: 3px solid #d1d5db;
	border-radius: 4px;
	font-size: var(--pa-font-body-sm);
	color: #4b5563;
	line-height: var(--pa-lh-normal, 1.5);
}
.pa-clase__notes strong { display: block; color: var(--pa-negro, #111827); margin-bottom: 4px; }

/* ─── Calendario del alumno (Blueprint 06) ─────────────────────────────── */

.pa-aula-calendar {
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 12px;
	padding: 22px 24px;
	margin: 0 0 28px;
	font-family: var(--pa-font-cuerpo);
}
.pa-aula-calendar__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.pa-aula-calendar__title {
	font-family: var(--pa-font-titulo);
	font-size: var(--pa-font-subsection);
	font-weight: 700;
	line-height: var(--pa-lh-tight, 1.15);
	margin: 0;
	color: #78350f;
}
.pa-aula-calendar__count {
	font-size: var(--pa-font-label);
	color: #92400e;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.pa-aula-calendar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.pa-aula-calendar__item {
	display: grid;
	grid-template-columns: minmax(120px, max-content) 1fr auto;
	gap: 20px;
	align-items: center;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid #fef3c7;
	border-radius: 8px;
}
.pa-aula-calendar__when { white-space: nowrap; }
.pa-aula-calendar__item--ongoing  { border-left: 4px solid #dc2626; }
.pa-aula-calendar__item--imminent { border-left: 4px solid #f59e0b; }

.pa-aula-calendar__when { display: flex; flex-direction: column; gap: 3px; }
.pa-aula-calendar__date {
	font-family: var(--pa-font-titulo);
	font-weight: 700;
	color: var(--pa-negro, #111827);
	font-size: var(--pa-font-body-sm);
	line-height: var(--pa-lh-tight, 1.2);
}
.pa-aula-calendar__diff {
	font-size: var(--pa-font-label);
	color: #6b7280;
	font-weight: 600;
}
.pa-aula-calendar__clase {
	font-family: var(--pa-font-titulo);
	margin: 0 0 4px;
	font-size: var(--pa-font-card-title);
	font-weight: 700;
	line-height: var(--pa-lh-tight, 1.2);
	color: var(--pa-negro, #111827);
}
.pa-aula-calendar__sub {
	font-size: var(--pa-font-meta);
	color: #6b7280;
	line-height: var(--pa-lh-normal, 1.5);
}
.pa-aula-calendar__sub a,
.pa-aula-calendar__sub a:link,
.pa-aula-calendar__sub a:visited { color: #4b5563; text-decoration: none; }
.pa-aula-calendar__sub a:hover { text-decoration: underline; color: var(--pa-negro, #111827); }

.pa-aula-calendar .pa-aula-calendar__btn,
.pa-aula-calendar .pa-aula-calendar__btn:link,
.pa-aula-calendar .pa-aula-calendar__btn:visited {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 6px;
	font-family: var(--pa-font-titulo);
	font-size: var(--pa-font-meta);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pa-aula-calendar .pa-aula-calendar__btn--primary,
.pa-aula-calendar .pa-aula-calendar__btn--primary:link,
.pa-aula-calendar .pa-aula-calendar__btn--primary:visited {
	background: var(--pa-negro, #111827);
	color: #ffffff;
}
.pa-aula-calendar .pa-aula-calendar__btn--primary:hover,
.pa-aula-calendar .pa-aula-calendar__btn--primary:focus,
.pa-aula-calendar .pa-aula-calendar__btn--primary:active {
	background: var(--pa-amarillo, #eab308);
	color: var(--pa-negro, #111827);
	text-decoration: none;
	box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.pa-aula-calendar .pa-aula-calendar__btn--ghost,
.pa-aula-calendar .pa-aula-calendar__btn--ghost:link,
.pa-aula-calendar .pa-aula-calendar__btn--ghost:visited {
	background: #f3f4f6;
	color: #374151;
	border: 1px solid #e5e7eb;
}
.pa-aula-calendar .pa-aula-calendar__btn--ghost:hover,
.pa-aula-calendar .pa-aula-calendar__btn--ghost:focus,
.pa-aula-calendar .pa-aula-calendar__btn--ghost:active {
	background: #e5e7eb;
	color: var(--pa-negro, #111827);
	text-decoration: none;
}

@media (max-width: 640px) {
	.pa-aula-calendar__item {
		grid-template-columns: 1fr;
	}
	.pa-aula-calendar__cta { justify-self: start; }
}

/* ─── Adjuntos del curso (Blueprint 09 § A) ────────────────────────────── */

.pa-adjuntos { font-family: var(--pa-font-cuerpo); }
.pa-adjuntos__note {
	margin: 0 0 14px;
	padding: 12px 16px;
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	color: #78350f;
	font-size: var(--pa-font-body-sm);
	line-height: var(--pa-lh-normal, 1.5);
	border-radius: 4px;
}
.pa-adjuntos__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.pa-adjuntos__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pa-adjuntos__item:hover { border-color: #d1d5db; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.pa-adjuntos__icon { font-size: 22px; }
.pa-adjuntos__label {
	flex: 1;
	font-family: var(--pa-font-titulo);
	font-size: var(--pa-font-body-sm);
	color: var(--pa-negro, #111827);
	font-weight: 600;
	line-height: var(--pa-lh-normal, 1.5);
}
.pa-adjuntos .pa-adjuntos__btn,
.pa-adjuntos .pa-adjuntos__btn:link,
.pa-adjuntos .pa-adjuntos__btn:visited {
	padding: 8px 18px;
	background: var(--pa-negro, #111827);
	color: #ffffff;
	border-radius: 6px;
	font-family: var(--pa-font-titulo);
	font-size: var(--pa-font-meta);
	font-weight: 700;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.pa-adjuntos .pa-adjuntos__btn:hover,
.pa-adjuntos .pa-adjuntos__btn:focus,
.pa-adjuntos .pa-adjuntos__btn:active {
	background: var(--pa-amarillo, #eab308);
	color: var(--pa-negro, #111827);
	text-decoration: none;
}
.pa-adjuntos__lock { color: #9ca3af; font-size: 18px; }