/**
 * El panel de la profesora y los avisos de cada asignatura
 * ═════════════════════════════════════════════════════════════════
 *
 * Tutor 4 no pinta el panel con las mismas variables que el resto del plugin:
 * tiene un segundo juego (--tutor-surface-*, --tutor-text-*, --tutor-border-*)
 * con una versión clara y otra oscura, más variantes de alto contraste y de
 * daltonismo. Por eso aquí NO se reescribe ese juego entero: se cambian solo
 * dos fondos —los que hacen que el panel se vea de la Fundación y no de
 * Tutor—, y el resto del archivo da forma a las piezas propias (las cifras,
 * «Seguir viendo», los avisos) y a las tres o cuatro del plugin que se ven
 * dentro de ellas.
 *
 * Regla al ampliar: si se toca un --tutor-*, comprobar antes si ese nombre
 * aparece también en los bloques [data-tutor-contrast] o [data-tutor-vision]
 * de wp-content/plugins/tutor/assets/css/tutor-core.min.css. Si aparece, no se
 * toca: son los ajustes de accesibilidad de Tutor y pisarlos los deja sin
 * efecto sin que nadie se entere.
 */

/* ── Las tipografías de la marca, en todo el panel ────────────────
 *
 * Tutor escribe font-family: var(--tutor-font-family-body, "Inter"), … en
 * cada regla, pero solo declara la variable en su modo infantil. Al
 * declararla aquí cambia el panel entero de una vez, sin tocar un solo
 * selector suyo. No depende del tema claro/oscuro, así que va en :root. */
:root {
	--tutor-font-family-body: "Quicksand";
	--tutor-font-family-heading: "Fraunces";
}

/* ── El fondo del panel ───────────────────────────────────────────
 *
 * Solo en claro. El selector deja fuera el modo oscuro de Tutor a propósito:
 * la Fundación no tiene paleta oscura, así que quien lo encienda verá el
 * oscuro del plugin entero y coherente, y no medio crema medio negro.
 * (Lo que abre el panel en claro por defecto es un ajuste, no este archivo:
 * ver fg_lms_ajustes_panel en inc/panel.php.) */
:root[data-tutor-theme="light"],
:root:not([data-tutor-theme]) {
	--tutor-surface-base: #F6F0E2;        /* el crema de la plataforma */
	--tutor-surface-sidebar-l1: #FBF7EC;  /* el menú, medio tono por encima */
}
@media (prefers-color-scheme: light) {
	:root[data-tutor-theme="system"] {
		--tutor-surface-base: #F6F0E2;
		--tutor-surface-sidebar-l1: #FBF7EC;
	}
}

/* ── Menú lateral ────────────────────────────────────────────────── */
.tutor-dashboard-sidebar {
	border-inline-end: 1px solid var(--fg-line);
}
.tutor-dashboard-sidebar-nav ul li a {
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: 10px;
	margin-inline: 12px;
	padding-inline: 12px;
}
.tutor-dashboard-sidebar-nav ul li a.active {
	color: var(--fg-orange);
	background: rgba(255, 91, 0, 0.08);
}
/* En versalitas se partía en dos líneas y dejaba la flecha descolgada: el
   menú solo mide 274px. En caja baja cabe de una. */
.tutor-see-all-courses {
	font-family: var(--fg-body);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--fg-ink-70);
}
.tutor-see-all-courses:hover { color: var(--fg-orange); }

/* ── Cabecera del panel: el saludo ───────────────────────────────── */
.tutor-dashboard-header {
	border-bottom: 1px solid var(--fg-line);
}
.tutor-dashboard-header-left .tutor-h5 {
	font-family: var(--fg-display);
	font-weight: 600;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	font-variation-settings: "opsz" 144, "SOFT" 80;
}

/* ── Las cuatro cifras ────────────────────────────────────────────
 *
 * Una sola pieza dividida por filetes, no cuatro tarjetas sueltas: son cuatro
 * lecturas del mismo dato, no cuatro cosas distintas. El filete se consigue
 * con el hueco de la rejilla teñido, que es lo único que sigue cuadrando
 * cuando la rejilla se parte en dos filas en el móvil. */
.fg-panel-cifras {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--fg-line);
	border: 1px solid var(--fg-line);
	border-radius: 14px;
	overflow: hidden;
}
.fg-cifra {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 22px 26px;
	background: var(--tutor-surface-l1, #fff);
	text-decoration: none;
	color: inherit;
}
.fg-cifra__valor {
	font-family: var(--fg-display);
	font-weight: 600;
	font-size: clamp(2rem, 4vw, 2.6rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 144, "SOFT" 80;
	color: var(--fg-ink);
}
.fg-cifra__rotulo {
	font-family: var(--fg-body);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-ink-50);
}

/* La única que lleva enlace se distingue antes de pasar el ratón: la flecha
   la delata. Las otras tres son números y nada más. */
.fg-cifra--enlace { transition: background 0.18s ease; }
.fg-cifra--enlace .fg-cifra__rotulo::after {
	content: " →";
	color: var(--fg-orange);
}
.fg-cifra--enlace:hover { background: #FBF7EC; }
.fg-cifra--enlace:hover .fg-cifra__valor { color: var(--fg-orange); }
.fg-cifra--enlace:focus-visible {
	outline: 2px solid var(--fg-orange);
	outline-offset: -2px;
}

/* ── «Seguir viendo» ─────────────────────────────────────────────── */
.fg-panel-seguir { margin-top: 36px; }
.fg-panel-seguir__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 16px;
}
.fg-panel-seguir__rotulo {
	margin: 0;
	font-family: var(--fg-display);
	font-weight: 600;
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	font-variation-settings: "opsz" 144, "SOFT" 80;
	color: var(--fg-ink);
}
.fg-panel-seguir__todas {
	flex: none;
	font-family: var(--fg-body);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-orange);
	text-decoration: none;
}
.fg-panel-seguir__todas:hover { text-decoration: underline; }
.fg-panel-seguir__lista {
	display: grid;
	gap: 12px;
}

/* ── «Mis asignaturas»: la lista sin caja ─────────────────────────
 *
 * Tutor mete las tarjetas dentro de un panel blanco con borde. Ese panel
 * existía para sujetar la fila de pestañas; al quitarlas (ver
 * tutor/dashboard/courses.php) quedaba una caja blanca alrededor de unas
 * tarjetas blancas: dos bordes seguidos que no separan nada. Se deja la lista
 * apoyada directamente en el crema, igual que «Seguir viendo» del panel.
 */
.tutor-dashboard-courses-card {
	background-color: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
}
/* Las clases de relleno que traía el panel (tutor-p-6) sobran sin panel. */
.tutor-dashboard-courses-card > * {
	padding-inline: 0;
}
.tutor-dashboard-courses-card > .tutor-dashboard-courses-list { padding-top: 0; }

/* ── La tarjeta de curso del panel (plantilla de Tutor) ──────────── */
.tutor-dashboard-layout .tutor-progress-card {
	border-color: var(--fg-line);
	border-radius: 14px;
	transition: transform 0.18s ease, border-color 0.18s ease;
}
.tutor-dashboard-layout .tutor-progress-card:hover {
	transform: translateY(-2px);
	border-color: var(--fg-orange);
}
.tutor-dashboard-layout .tutor-progress-card-thumbnail { border-radius: 10px; }
.tutor-dashboard-layout .tutor-progress-card-title {
	font-family: var(--fg-display);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-variation-settings: "opsz" 144, "SOFT" 80;
}
.tutor-dashboard-layout .tutor-progress-card-category {
	font-family: var(--fg-body);
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-ink-50);
}
.tutor-dashboard-layout .tutor-progress-card-details {
	font-family: var(--fg-body);
	font-size: 0.8rem;
	color: var(--fg-ink-50);
}

/* ── Barras de progreso ──────────────────────────────────────────
 *
 * Tutor las pinta con su verde de «éxito». En la ficha de la asignatura la
 * misma barra ya es naranja (.fg-bar en tutor-components.css), y ver el mismo
 * dato de dos colores en dos pantallas hace dudar de las dos. Se toca aquí y
 * no en el token --tutor-actions-success-primary porque ese color también es
 * el de los checks de «terminado», que sí deben seguir siendo verdes, y porque
 * los modos de daltonismo de Tutor lo reescriben. */
.tutor-dashboard-layout .tutor-progress-bar {
	height: 8px;
	background: var(--fg-beige);
	box-shadow: none;
}
.tutor-dashboard-layout .tutor-progress-bar-fill {
	background-color: var(--fg-orange);
}
/*
 * Tutor remata el relleno con un destello: una rayita de 8×1,5 px al 40% de
 * opacidad, pegada a 4 px del extremo. La pinta con --tutor-actions-success-
 * secondary, que sigue siendo verde porque el token no se toca (ver arriba), y
 * sobre el naranja se leía como una mota verde. Peor aún al 100%: caía justo en
 * la punta y parecía que a la barra le faltaba un trocito por llenar, o sea,
 * que la asignatura no estaba terminada del todo. Fuera.
 */
.tutor-dashboard-layout .tutor-progress-bar-fill::before,
.tutor-dashboard-layout .tutor-progress-bar-fill::after {
	display: none;
}

/* ── Avisos de la asignatura ─────────────────────────────────────
 *
 * Lista, no fichas: es un tablón de anuncios y se lee de arriba abajo. Las
 * fichas de Tutor partían cada aviso en dos cajas (una para el título y otra
 * para el texto) y hacían que dos avisos seguidos parecieran cuatro cosas. */
.fg-anuncios {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--fg-line);
}
.fg-anuncio {
	padding-block: 26px;
	border-bottom: 1px solid var(--fg-line);
}
.fg-anuncio__cabecera {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.fg-anuncio__titulo {
	margin: 0;
	font-family: var(--fg-display);
	font-weight: 600;
	font-size: clamp(1.15rem, 2.2vw, 1.45rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	font-variation-settings: "opsz" 144, "SOFT" 80;
	color: var(--fg-ink);
}
.fg-anuncio__nuevo {
	flex: none;
	padding: 4px 11px 3px;
	border-radius: 999px;
	background: var(--fg-orange);
	color: #fff;
	font-family: var(--fg-body);
	font-weight: 700;
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.fg-anuncio__fecha {
	display: block;
	margin-top: 8px;
	font-family: var(--fg-body);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-ink-50);
}
.fg-anuncio__texto {
	max-width: 62ch;
	margin-top: 14px;
	font-family: var(--fg-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--fg-ink-70);
}
.fg-anuncio__texto p { margin: 0 0 0.8em; }
.fg-anuncio__texto p:last-child { margin-bottom: 0; }
.fg-anuncio__texto a { color: var(--fg-orange); }

.fg-anuncios-vacio {
	padding: 44px 32px;
	border: 1px dashed var(--fg-line);
	border-radius: 14px;
	text-align: center;
	font-family: var(--fg-body);
	color: var(--fg-ink-50);
}
.fg-anuncios-vacio p { margin: 0; max-width: 46ch; margin-inline: auto; }
.fg-anuncios-vacio__titulo {
	margin-bottom: 8px !important;
	font-family: var(--fg-display);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--fg-ink);
	font-variation-settings: "opsz" 144, "SOFT" 80;
}

/* ── Pantallas estrechas ─────────────────────────────────────────── */
@media (max-width: 900px) {
	.fg-panel-cifras { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.fg-cifra { padding: 18px 16px 20px; }
	.fg-panel-seguir__head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ── El agujero de los 768 px ─────────────────────────────────────
 *
 * Tutor esconde el menú lateral con «max-width: 768px» y la barra inferior
 * con «min-width: 768px». En 768 exactos se cumplen las dos, así que el panel
 * se queda sin ninguna forma de navegar: ni menú a la izquierda ni barra
 * abajo. Y 768 no es un ancho cualquiera, es el del iPad en vertical.
 *
 * Se devuelve la barra inferior justo en ese ancho, que es lo que había un
 * píxel antes. (Fallo del plugin: comprobar al actualizar si ya lo han
 * corregido, buscando «tutor-dashboard-nav-mobile» en tutor-dashboard.min.css.)
 */
@media (min-width: 768px) and (max-width: 768px) {
	.tutor-dashboard-nav-mobile {
		display: block;
	}
}

/* ── Portada del perfil ──────────────────────────────────────────────
   Tutor pone por defecto una imagen de arcos azules y amarillos
   (cover-photo.webp) que no es de la marca. Si la persona no ha subido la
   suya, se ve el degradado naranja de la Fundación. */
.tutor-profile-card-header[style*="cover-photo"],
.tutor-account-cover-photo[style*="cover-photo"] {
  background-image:
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.22) 0 70px, transparent 71px),
    radial-gradient(circle at 12% 110%, rgba(11, 11, 11, 0.12) 0 120px, transparent 121px),
    linear-gradient(120deg, #FF5B00 0%, #FF8746 55%, #D9C7A3 100%) !important;
  background-size: cover !important;
}

/* ── Tarjeta de perfil ───────────────────────────────────────────────
   El nombre salía partido en tres líneas y, en móvil, el correo se salía
   de la tarjeta. */
/* Tutor la monta en dos columnas de ~250 px con los datos sin partir línea:
   el nombre salía en tres renglones y el correo se salía de la tarjeta. Una
   columna: nombre arriba, datos debajo. */
.tutor-profile-card-body {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  grid-template-areas: none !important;
  gap: 16px !important;
}
.tutor-profile-card-body > * {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  grid-area: auto !important;
  position: static !important;
  margin: 0 !important;
}
.tutor-profile-card-body-left,
.tutor-profile-card-body-right { min-width: 0; max-width: 100%; }
.tutor-profile-card-body-left { flex: 1 1 220px; min-height: 0 !important; } /* Tutor le da 140 px fijos: dejaba un hueco bajo el nombre */
.tutor-user-profile-title { overflow-wrap: anywhere; }
.tutor-user-profile-details { max-width: 100%; }
.tutor-user-profile-details { flex-wrap: wrap !important; gap: 8px !important; }
.tutor-user-profile-details li { max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; flex-wrap: wrap; }