/**
 * The platform's look outside the campus. Task 5.32.
 *
 * FluentCommunity draws the campus and is left alone. Everything else a student
 * or teacher walks through is either the theme (the home, the directory, the
 * course page, the enrolment and payment screens) or Tutor (the aula dashboard
 * and the learning area), and this sheet makes those read as one building: the
 * same type, the same accent, the same cards and buttons.
 *
 * It is loaded after the theme and after Tutor, so it wins by order where the
 * specificity is equal, and it never uses `!important` except against a value
 * the theme writes inline on its own template markup.
 *
 * Tokens first. Everything below refers to them, so the brand pass in 5.15 is a
 * change to this block, not a hunt through the file.
 */

html:root {
	--in-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--in-accent: #1f6f8b;
	--in-accent-hover: #175468;
	--in-accent-soft: #e4eff3;
	--in-ink: #131820;
	--in-ink-2: #3d4652;
	--in-muted: #5c6675;
	--in-faint: #8a93a0;
	--in-line: #dfe4e9;
	--in-line-soft: #edf0f3;
	--in-bg: #f5f7f9;
	--in-card: #ffffff;
	--in-green: #2e7d5b;
	--in-green-soft: #e8f3ee;
	--in-red: #c0453b;
	--in-amber: #b4761a;
	--in-radius: 8px;
	--in-radius-sm: 6px;
	--in-shadow: 0 1px 2px rgba(19, 24, 32, 0.04);
	--in-measure: 1080px;

	/*
	 * Tutor 4 derives every brand-coloured surface, icon and button from this
	 * scale, so the aula follows the accent above. Generated with Tutor's own
	 * palette rules from #1f6f8b, so it is exactly what Tutor would print had
	 * the brand colour been set in its settings, minus the setting.
	 */
	--tutor-brand-100: #f4fbfd;
	--tutor-brand-200: #e6f6fa;
	--tutor-brand-300: #dff2f7;
	--tutor-brand-400: #aadfec;
	--tutor-brand-450: #a0d7e8;
	--tutor-brand-500: #52c4df;
	--tutor-brand-600: #1f6f8b;
	--tutor-brand-700: #3595c0;
	--tutor-brand-800: #32799b;
	--tutor-brand-900: #2d617c;
	--tutor-brand-950: #203b4a;
}

/* ------------------------------------------------------------------------
 * 1. The theme shell: header, content column, footer.
 *
 * Twenty Twenty-Five is a blog theme. Its measure is 645px, its body type is
 * 22px and its page title floats on its own column. Those are right for an
 * essay and wrong for a screen with cards on it, so the shell is brought in
 * line with the aula and the campus: 16px type, one 1080px column that the
 * title, the content and the header share, and a plain white bar on top.
 * ---------------------------------------------------------------------- */

body.wp-theme-twentytwentyfive {
	font-family: var(--in-font);
	font-size: 16px;
	line-height: 1.55;
	color: var(--in-ink);
	background: var(--in-bg);
	-webkit-font-smoothing: antialiased;
}

body.wp-theme-twentytwentyfive .wp-site-blocks {
	padding: 0;
}

/* Header. */
.wp-site-blocks > header.wp-block-template-part {
	background: var(--in-card);
	border-bottom: 1px solid var(--in-line);
}

.wp-site-blocks > header .wp-block-group.alignwide {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: var(--in-measure);
	margin-left: auto;
	margin-right: auto;
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}

.wp-site-blocks > header .wp-block-site-title {
	font-family: var(--in-font);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0;
}

.wp-site-blocks > header .wp-block-site-title a {
	color: var(--in-ink);
	text-decoration: none;
}

.wp-site-blocks > header .wp-block-navigation {
	font-family: var(--in-font);
	font-size: 15px;
	gap: 4px;
}

.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item__content {
	display: inline-block;
	padding: 7px 11px;
	border-radius: var(--in-radius-sm);
	color: var(--in-ink-2);
	font-weight: 500;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item__content:hover {
	background: var(--in-accent-soft);
	color: var(--in-accent);
}

.wp-site-blocks > header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-site-blocks > header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--in-accent);
	font-weight: 600;
}

/* The theme's overlay menu on small screens keeps its own look; only the type follows. */
.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 18px;
	padding: 10px 0;
}

/* Main column. The theme pads the page with two 60-unit blocks; one 32px does. */
.wp-site-blocks > main.wp-block-group {
	margin-top: 0 !important;
}

.wp-site-blocks > main.wp-block-group > .wp-block-group.alignfull {
	padding-top: 32px !important;
	padding-bottom: 48px !important;
}

/* The no-title template used by the home has no inner group, so it pads itself. */
body.page-template-page-no-title .wp-site-blocks > main.wp-block-group {
	padding-top: 32px;
	padding-bottom: 48px;
}

/* The title, the content and everything in it share one column. */
.wp-site-blocks .wp-block-post-title,
.wp-site-blocks .entry-content > :where(:not(.alignfull):not(.alignleft):not(.alignright)),
.wp-site-blocks main > .entry-content > :where(:not(.alignfull):not(.alignleft):not(.alignright)) {
	max-width: var(--in-measure);
}

.wp-site-blocks .wp-block-post-title {
	font-family: var(--in-font);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0 auto 18px;
	color: var(--in-ink);
}

.wp-site-blocks .wp-block-post-featured-image:empty {
	display: none;
}

/* Type inside the content column. The theme sets these on the tag, so a class beats it. */
.wp-site-blocks .entry-content {
	font-size: 16px;
	line-height: 1.55;
}

.wp-site-blocks .entry-content p {
	font-size: 16px;
	line-height: 1.55;
	margin-block: 0 14px;
}

.wp-site-blocks .entry-content h2 {
	font-family: var(--in-font);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin-block: 24px 10px;
}

.wp-site-blocks .entry-content h3 {
	font-family: var(--in-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	margin-block: 18px 8px;
}

.wp-site-blocks .entry-content a:not([class]),
.wp-site-blocks .entry-content a.in-link {
	color: var(--in-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(31, 111, 139, 0.45);
}

.wp-site-blocks .entry-content a:not([class]):hover {
	color: var(--in-accent-hover);
	text-decoration-color: currentColor;
}

/* Footer. */
.wp-site-blocks > footer.wp-block-template-part {
	border-top: 1px solid var(--in-line);
	margin-top: 24px;
}

.wp-site-blocks > footer.wp-block-template-part p {
	font-family: var(--in-font);
	font-size: 13px;
	color: var(--in-muted);
}

/* ------------------------------------------------------------------------
 * 2. Our own furniture on theme pages: cards, buttons, panels.
 *
 * The screens are written in WordPress admin vocabulary (`button`,
 * `button-primary`, `description`, `notice`, `widefat`) plus a few `in-`
 * classes. One rule per word, so every screen gets the same button without
 * each one declaring it.
 * ---------------------------------------------------------------------- */

.wp-site-blocks .in-panel {
	font-family: var(--in-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--in-ink);
}

.wp-site-blocks .in-panel h2 {
	font-size: 16px;
	font-weight: 600;
	margin: 22px 0 8px;
}

.wp-site-blocks .in-panel h3 {
	font-size: 15px;
	font-weight: 600;
	margin: 16px 0 6px;
}

.wp-site-blocks .in-panel .description {
	color: var(--in-muted);
	font-size: 14px;
}

/* Buttons: one filled, one outlined, everywhere. */
.wp-site-blocks .in-panel .button,
.wp-site-blocks .entry-content .button,
.wp-site-blocks .in-panel button.button,
.wp-site-blocks .in-panel input[type="submit"].button,
.wp-site-blocks .in-home .in-home__button,
.wp-site-blocks .entry-content .in-class__button,
.wp-site-blocks .entry-content .wp-block-button__link,
.wp-site-blocks .entry-content .wp-element-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 38px;
	padding: 8px 16px;
	border: 1px solid var(--in-line);
	border-radius: var(--in-radius-sm);
	background: var(--in-card);
	color: var(--in-ink-2);
	font-family: var(--in-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--in-shadow);
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.wp-site-blocks .in-panel .button:hover,
.wp-site-blocks .entry-content .button:hover,
.wp-site-blocks .in-panel button.button:hover {
	background: var(--in-bg);
	border-color: #c9d1d9;
	color: var(--in-ink);
}

.wp-site-blocks .in-panel .button-primary,
.wp-site-blocks .entry-content .button-primary,
.wp-site-blocks .in-home .in-home__button,
.wp-site-blocks .in-home .button,
.wp-site-blocks .entry-content .in-class__button,
.wp-site-blocks .entry-content .wp-block-button__link,
.wp-site-blocks .entry-content .wp-element-button {
	background: var(--in-accent);
	border-color: var(--in-accent);
	color: #fff;
}

.wp-site-blocks .in-panel .button-primary:hover,
.wp-site-blocks .entry-content .button-primary:hover,
.wp-site-blocks .in-home .in-home__button:hover,
.wp-site-blocks .in-home .button:hover,
.wp-site-blocks .entry-content .in-class__button:hover,
.wp-site-blocks .entry-content .wp-block-button__link:hover,
.wp-site-blocks .entry-content .wp-element-button:hover {
	background: var(--in-accent-hover);
	border-color: var(--in-accent-hover);
	color: #fff;
}

.wp-site-blocks .in-panel .button-small,
.wp-site-blocks .entry-content .button-small {
	min-height: 30px;
	padding: 4px 10px;
	font-size: 13px;
}

.wp-site-blocks .in-panel .button[disabled],
.wp-site-blocks .in-panel .button.disabled {
	opacity: 0.55;
	cursor: default;
}

/* Form controls. */
.wp-site-blocks .in-panel input[type="text"],
.wp-site-blocks .in-panel input[type="url"],
.wp-site-blocks .in-panel input[type="email"],
.wp-site-blocks .in-panel input[type="number"],
.wp-site-blocks .in-panel input[type="search"],
.wp-site-blocks .in-panel input[type="date"],
.wp-site-blocks .in-panel select,
.wp-site-blocks .in-panel textarea,
.wp-site-blocks .entry-content input[type="text"]:not([class]),
.wp-site-blocks .entry-content input[type="search"]:not([class]),
.wp-site-blocks .entry-content select:not([class]) {
	font-family: var(--in-font);
	font-size: 14px;
	line-height: 1.3;
	padding: 8px 10px;
	border: 1px solid #c9d1d9;
	border-radius: var(--in-radius-sm);
	background: var(--in-card);
	color: var(--in-ink);
	min-height: 38px;
	max-width: 100%;
}

.wp-site-blocks .in-panel input:focus,
.wp-site-blocks .in-panel select:focus,
.wp-site-blocks .in-panel textarea:focus,
.wp-site-blocks .entry-content input:focus,
.wp-site-blocks .entry-content select:focus {
	outline: none;
	border-color: var(--in-accent);
	box-shadow: 0 0 0 3px rgba(31, 111, 139, 0.18);
}

/* Tables. */
.wp-site-blocks .in-panel table.widefat {
	border: 1px solid var(--in-line);
	border-radius: var(--in-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--in-card);
	font-size: 14px;
}

.wp-site-blocks .in-panel table.widefat th,
.wp-site-blocks .in-panel table.widefat td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--in-line-soft);
}

.wp-site-blocks .in-panel table.widefat thead th {
	background: var(--in-bg);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--in-muted);
}

.wp-site-blocks .in-panel table.widefat tbody tr:last-child td {
	border-bottom: 0;
}

.wp-site-blocks .in-panel table.striped tbody tr:nth-child(odd) {
	background: #fbfcfd;
}

/* Notices. */
.wp-site-blocks .in-panel .notice {
	padding: 10px 14px;
	border: 1px solid var(--in-line);
	border-left-width: 4px;
	border-radius: var(--in-radius-sm);
	background: var(--in-card);
	font-size: 14px;
}

/* Tabs on the panels: a row of pills under the heading. */
.wp-site-blocks .in-panel__tabs,
.tutor-dashboard-layout .in-panel__tabs {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--in-line);
	margin: 0 0 20px;
	padding: 0 0 10px;
}

.wp-site-blocks .in-panel__tabs a,
.tutor-dashboard-layout .in-panel__tabs a {
	padding: 7px 13px;
	border: 0;
	border-radius: 999px;
	color: var(--in-muted);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	line-height: 1.2;
	margin: 0;
}

.wp-site-blocks .in-panel__tabs a:hover,
.tutor-dashboard-layout .in-panel__tabs a:hover {
	background: var(--in-bg);
	color: var(--in-ink);
}

.wp-site-blocks .in-panel__tabs a.is-active,
.tutor-dashboard-layout .in-panel__tabs a.is-active {
	background: var(--in-accent-soft);
	color: var(--in-accent);
	font-weight: 600;
	border: 0;
	margin-bottom: 0;
}

/* Cards used across the custom screens. */
.wp-site-blocks .in-card {
	background: var(--in-card);
	border: 1px solid var(--in-line);
	border-radius: var(--in-radius);
	box-shadow: var(--in-shadow);
	padding: 18px 20px;
}

.wp-site-blocks .in-card h2 {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--in-ink);
}

/* ------------------------------------------------------------------------
 * 3. The home. A greeting, a checklist while it is needed, the next class, and
 *    a grid of cards, one per thing a student does here.
 * ---------------------------------------------------------------------- */

.wp-site-blocks .in-home {
	max-width: var(--in-measure);
	padding: 0 0 24px;
}

.wp-site-blocks .in-home > h1 {
	font-family: var(--in-font);
	font-size: 28px !important;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
	/* 20px, not 4: at 4 the greeting read as part of the first card. */
	margin: 0 0 20px !important;
	color: var(--in-ink);
}

.wp-site-blocks .in-home > h1 + p {
	color: var(--in-muted);
	margin: 0 0 20px;
}

.wp-site-blocks .in-home .in-card {
	margin: 0 0 18px;
}

.wp-site-blocks .in-home .in-grid {
	gap: 18px;
	margin-bottom: 18px;
}

.wp-site-blocks .in-home .in-grid .in-card {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks .in-home .in-card p {
	font-size: 14.5px;
	margin: 0 0 8px;
}

.wp-site-blocks .in-home .in-card p:last-child {
	margin-bottom: 0;
}

.wp-site-blocks .in-home .in-card--next {
	border-left: 4px solid var(--in-accent);
}

.wp-site-blocks .in-home .in-card--intro {
	border-left: 4px solid var(--in-green);
	background: var(--in-green-soft);
}

.wp-site-blocks .in-home .in-card--intro ul {
	font-size: 14.5px;
}

.wp-site-blocks .in-home .in-card--intro li {
	line-height: 1.5;
}

.wp-site-blocks .in-home .in-card--intro .button {
	min-height: 32px;
	padding: 5px 12px;
	font-size: 13px;
}

.wp-site-blocks .in-home .in-card--pending {
	opacity: 1;
	border-style: solid;
	background: #fbfcfd;
	color: var(--in-muted);
}

.wp-site-blocks .in-home .in-home__meta {
	font-size: 13.5px;
	color: var(--in-muted);
}

.wp-site-blocks .in-home .in-card ul:not(.in-home__cuotas) {
	margin: 0;
	padding-left: 18px;
	font-size: 14.5px;
}

.wp-site-blocks .in-home .in-card ul:not(.in-home__cuotas) li {
	margin: 0 0 6px;
}

.wp-site-blocks .in-home .in-card ul:not(.in-home__cuotas) li a:not(.button) {
	color: var(--in-accent);
	font-weight: 600;
	text-decoration: none;
}

.wp-site-blocks .in-home .in-card ul:not(.in-home__cuotas) li a:not(.button):hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wp-site-blocks .in-home .in-card > a:not(.in-home__button):not(.button) {
	color: var(--in-accent);
	font-weight: 600;
	text-decoration: none;
	font-size: 14.5px;
}

.wp-site-blocks .in-home .in-card > a:not(.in-home__button):not(.button):hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wp-site-blocks .in-home .in-home__cuotas {
	font-size: 14px;
}

.wp-site-blocks .in-home .in-home__cuotas li {
	padding: 8px 0;
	border-bottom: 1px solid var(--in-line-soft);
}

.wp-site-blocks .in-home code {
	display: inline-block;
	font-size: 12px;
	line-height: 1.5;
	padding: 4px 8px;
	border-radius: 4px;
	background: var(--in-bg);
	border: 1px solid var(--in-line);
	color: var(--in-ink-2);
	word-break: break-all;
	max-width: 100%;
}

/* ------------------------------------------------------------------------
 * 4. The Tutor dashboard, `/aula/…`. Tutor 4 draws its own shell and inherits
 *    the theme's 22px body type into anything of ours that has no size of its
 *    own; the rules here give our screens inside it a size, and turn the plain
 *    links on "Materias" into the buttons they are.
 * ---------------------------------------------------------------------- */

.tutor-dashboard-layout {
	font-family: var(--in-font);
}

.tutor-dashboard-layout .tutor-dashboard-page {
	font-size: 15px;
	line-height: 1.5;
	color: var(--in-ink);
}

.tutor-dashboard-layout .tutor-dashboard-page .tutor-color-muted {
	color: var(--in-muted);
}

.tutor-dashboard-layout .tutor-dashboard-page h3.tutor-fs-5 {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0 0 12px;
	color: var(--in-ink);
}

.tutor-dashboard-layout .tutor-dashboard-page h3.tutor-fs-5:not(:first-child) {
	margin-top: 8px;
}

.tutor-dashboard-layout .tutor-dashboard-page .tutor-card {
	background: var(--in-card);
	border: 1px solid var(--in-line);
	border-radius: 10px;
	box-shadow: var(--in-shadow);
}

.tutor-dashboard-layout .tutor-dashboard-page .tutor-card.tutor-mb-32 {
	margin-bottom: 28px;
}

.tutor-dashboard-layout .tutor-dashboard-page .tutor-card > .tutor-card-body {
	padding: 6px 22px;
}

.tutor-dashboard-layout .tutor-dashboard-page .tutor-card > .tutor-card-body > p.tutor-color-muted {
	padding: 12px 0;
	margin: 0;
	font-size: 14.5px;
}

/* One materia per row. */
.tutor-dashboard-layout .tutor-dashboard-page .tutor-card-body > ul > li {
	padding: 16px 0 !important;
	border-bottom: 1px solid var(--in-line-soft) !important;
}

.tutor-dashboard-layout .tutor-dashboard-page .tutor-card-body > ul > li:last-child {
	border-bottom: 0 !important;
}

.tutor-dashboard-layout .tutor-dashboard-page .tutor-card-body > ul > li > strong {
	font-size: 16px !important;
	font-weight: 600;
	color: var(--in-ink);
}

.tutor-dashboard-layout .tutor-dashboard-page .tutor-card-body > ul > li > strong + .tutor-color-muted {
	font-size: 13.5px;
	margin-left: 6px;
}

.tutor-dashboard-layout .tutor-dashboard-page .tutor-card-body > ul > li > br + span {
	display: block;
	margin-top: 3px;
	font-size: 14px;
}

.tutor-dashboard-layout .tutor-dashboard-page .tutor-card-body > ul > li > div {
	margin-top: 12px !important;
	gap: 8px !important;
}

.tutor-dashboard-layout .tutor-dashboard-page .tutor-card-body > ul > li > div > a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 6px 14px;
	border: 1px solid var(--in-line);
	border-radius: var(--in-radius-sm);
	background: var(--in-card);
	color: var(--in-ink-2);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: var(--in-shadow);
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.tutor-dashboard-layout .tutor-dashboard-page .tutor-card-body > ul > li > div > a:hover {
	background: var(--in-bg);
	border-color: #c9d1d9;
	color: var(--in-ink);
}

/* The first link on a row is the door into the aula. */
.tutor-dashboard-layout .tutor-dashboard-page .tutor-card-body > ul > li > div > a:first-child {
	background: var(--in-accent);
	border-color: var(--in-accent);
	color: #fff;
}

.tutor-dashboard-layout .tutor-dashboard-page .tutor-card-body > ul > li > div > a:first-child:hover {
	background: var(--in-accent-hover);
	border-color: var(--in-accent-hover);
	color: #fff;
}

/* The aula's home: a materia card is a title and a door, and the door is always visible. */
.tutor-dashboard-layout .tutor-progress-card .tutor-progress-card-actions {
	opacity: 1;
	visibility: visible;
}

.tutor-dashboard-layout .tutor-progress-card-actions .tutor-btn {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 7px 14px;
	border: 1px solid var(--in-line);
	border-radius: var(--in-radius-sm);
	background: var(--in-card);
	color: var(--in-ink-2);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: var(--in-shadow);
}

.tutor-dashboard-layout .tutor-progress-card:hover .tutor-progress-card-actions .tutor-btn {
	background: var(--in-accent);
	border-color: var(--in-accent);
	color: #fff;
}

/* A generated materia has no picture; a grey mountain says "broken", so it goes. */
.tutor-dashboard-layout .tutor-progress-card-thumbnail:has(> img[src*="placeholder"]),
.tutor-dashboard-layout .tutor-progress-card-thumbnail:has(> a > img[src*="placeholder"]) {
	display: none;
}

.tutor-dashboard-layout .tutor-progress-card {
	border: 1px solid var(--in-line);
	border-radius: 10px;
	box-shadow: var(--in-shadow);
}

.tutor-dashboard-layout .tutor-progress-card:hover {
	border-color: #c9d1d9;
}

.tutor-dashboard-layout .tutor-progress-card-content h3 {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.tutor-dashboard-layout .tutor-progress-card-content h3 a {
	color: var(--in-ink);
	text-decoration: none;
}

/* The teacher panel inside the dashboard: same words as on the theme pages. */
.tutor-dashboard-layout .in-panel {
	font-size: 14.5px;
	line-height: 1.5;
}

.tutor-dashboard-layout .in-panel h2 {
	font-size: 16px;
	font-weight: 600;
	margin: 22px 0 8px;
}

.tutor-dashboard-layout .in-panel h2:first-child {
	margin-top: 0;
}

.tutor-dashboard-layout .in-panel .button {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 6px 14px;
	border: 1px solid var(--in-line);
	border-radius: var(--in-radius-sm);
	background: var(--in-card);
	color: var(--in-ink-2);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: var(--in-shadow);
}

.tutor-dashboard-layout .in-panel .button:hover {
	background: var(--in-bg);
	border-color: #c9d1d9;
}

.tutor-dashboard-layout .in-panel .button-primary {
	background: var(--in-accent);
	border-color: var(--in-accent);
	color: #fff;
}

.tutor-dashboard-layout .in-panel .button-primary:hover {
	background: var(--in-accent-hover);
	border-color: var(--in-accent-hover);
}

.tutor-dashboard-layout .in-panel .button-small {
	min-height: 28px;
	padding: 3px 10px;
	font-size: 12.5px;
}

.tutor-dashboard-layout .in-panel table.widefat {
	border: 1px solid var(--in-line);
	border-radius: var(--in-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 14px;
}

.tutor-dashboard-layout .in-panel table.widefat th,
.tutor-dashboard-layout .in-panel table.widefat td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--in-line-soft);
}

.tutor-dashboard-layout .in-panel table.widefat thead th {
	background: var(--in-bg);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--in-muted);
}

.tutor-dashboard-layout .in-panel input[type="text"],
.tutor-dashboard-layout .in-panel input[type="url"],
.tutor-dashboard-layout .in-panel input[type="number"],
.tutor-dashboard-layout .in-panel input[type="search"],
.tutor-dashboard-layout .in-panel select,
.tutor-dashboard-layout .in-panel textarea {
	font-family: var(--in-font);
	font-size: 14px;
	padding: 7px 10px;
	border: 1px solid #c9d1d9;
	border-radius: var(--in-radius-sm);
	min-height: 36px;
}

.tutor-dashboard-layout .in-panel .notice {
	border: 1px solid var(--in-line);
	border-left-width: 4px;
	border-radius: var(--in-radius-sm);
	font-size: 14px;
}

/*
 * The two doors out of the aula — to the campus, and into today's class — are
 * inserted into Tutor's own header row and dressed in `AulaCopy`, beside the
 * `.in-crossover` they share. Nothing about them is positioned here: pinning
 * them to the corner of the viewport is what put them on top of each other and
 * on top of the photo.
 */

/* ------------------------------------------------------------------------
 * 5. The course page, `/cursos/…`, which the theme wraps. Tutor's container
 *    is brought onto the same column as everything else, and the placeholder
 *    picture a generated materia gets is dropped rather than shown.
 * ---------------------------------------------------------------------- */

body.single-courses .tutor-course-details-page.tutor-container {
	max-width: calc(var(--in-measure) + 48px);
	padding-left: 24px;
	padding-right: 24px;
	font-family: var(--in-font);
}

body.single-courses .tutor-course-thumbnail:has(> img[src*="placeholder"]) {
	display: none;
}

body.single-courses .tutor-course-details-title {
	font-family: var(--in-font);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 20px;
}

body.single-courses .tutor-course-details-tab .tutor-nav-link {
	font-family: var(--in-font);
}

body.single-courses .tutor-course-details-page .tutor-fs-5 {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

body.single-courses .tutor-course-details-page .tutor-course-content {
	font-size: 15.5px;
	line-height: 1.6;
}

body.single-courses .tutor-sidebar-card,
body.single-courses .tutor-course-details-instructors {
	border: 1px solid var(--in-line);
	border-radius: 10px;
	background: var(--in-card);
	box-shadow: var(--in-shadow);
}

body.single-courses .tutor-sidebar-card > .tutor-card-body {
	padding: 20px;
}

body.single-courses .tutor-sidebar-card .tutor-btn-primary.tutor-btn-block {
	margin-top: 0 !important;
	border-radius: var(--in-radius-sm);
	font-weight: 600;
}

/* An empty footer under the button is a white box with nothing in it. */
body.single-courses .tutor-sidebar-card > .tutor-card-footer:not(:has(li)) {
	display: none;
}

/* With no picture between them, the title and the tabs sit closer. */
body.single-courses .tutor-course-details-header {
	margin-bottom: 12px !important;
}

body.single-courses .tutor-course-thumbnail + .tutor-course-details-tab {
	margin-top: 16px !important;
}

body.single-courses .tutor-course-details-instructors {
	padding: 18px 20px;
}

body.single-courses .tutor-course-topic .tutor-accordion-item-header,
body.single-courses .tutor-course-topic-title {
	font-family: var(--in-font);
}

body.single-courses .tutor-course-content-list-item a,
body.single-courses .tutor-course-content-list .tutor-course-content-list-item-title {
	text-decoration: none;
	font-weight: 500;
}

body.single-courses .tutor-course-content-list-item a:hover {
	color: var(--in-accent);
}

/* ------------------------------------------------------------------------
 * 6. The learning area: a class. Tutor's own shell, with our three panels in
 *    the tab. The one unstyled thing in it was the link to the group.
 * ---------------------------------------------------------------------- */

.tutor-learning-area-container {
	font-family: var(--in-font);
}

.tutor-learning-area-container .tutor-lesson-content {
	font-size: 15px;
	line-height: 1.55;
	color: var(--in-ink);
}

.tutor-learning-area-container .tutor-tab-panel > p > a[href*="/space/"] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 7px 14px;
	border: 1px solid var(--in-line);
	border-radius: var(--in-radius-sm);
	background: var(--in-card);
	color: var(--in-ink-2);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: var(--in-shadow);
}

.tutor-learning-area-container .tutor-tab-panel > p > a[href*="/space/"]::after {
	content: "\2192";
	font-weight: 400;
	color: var(--in-faint);
}

.tutor-learning-area-container .tutor-tab-panel > p > a[href*="/space/"]:hover {
	background: var(--in-bg);
	border-color: #c9d1d9;
	color: var(--in-ink);
}

.tutor-learning-area-container .in-class,
.tutor-learning-area-container .in-mat,
.tutor-learning-area-container .in-rec--wait {
	border-radius: var(--in-radius);
}

.tutor-learning-area-container .in-class--live {
	border-color: var(--in-accent);
	background: var(--in-accent-soft);
}

.tutor-learning-area-container .in-class__button {
	border-radius: var(--in-radius-sm);
}

/* ------------------------------------------------------------------------
 * 7. Small screens.
 * ---------------------------------------------------------------------- */

@media (max-width: 782px) {
	.wp-site-blocks > header .wp-block-group.alignwide {
		padding-left: 16px;
		padding-right: 16px;
	}

	.wp-site-blocks > main.wp-block-group > .wp-block-group.alignfull {
		padding-top: 20px !important;
		padding-bottom: 32px !important;
	}

	body.page-template-page-no-title .wp-site-blocks > main.wp-block-group {
		padding-top: 20px;
	}

	.wp-site-blocks .wp-block-post-title,
	.wp-site-blocks .in-home > h1 {
		font-size: 24px !important;
	}

	.wp-site-blocks .in-home .in-grid {
		gap: 14px;
	}

	.tutor-dashboard-layout .tutor-dashboard-page .tutor-card > .tutor-card-body {
		padding: 4px 16px;
	}

	.tutor-dashboard-layout .tutor-dashboard-page .tutor-card-body > ul > li > div > a {
		min-height: 38px;
	}

	body.single-courses .tutor-course-details-page.tutor-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	body.single-courses .tutor-course-details-title {
		font-size: 24px;
	}
}

/**
 * The member's photo and menu in the site header. Tasks 5.37, 5.38 and 5.39.
 *
 * Built to the campus's own numbers rather than to a look of our own: a 32px
 * circle with a chevron on its edge, a 200px panel with a hairline border, and
 * rows that light up on hover. FluentCommunity hides the name beside its avatar
 * and so do we, because the two corners have to read as one product.
 *
 * It opens on hover where there is a pointer and on tap everywhere, which is
 * what `details` gives without a line of script.
 */

.in-badge-item {
	display: flex;
	align-items: center;
	margin-left: 10px;
}

.in-badge {
	position: relative;
	display: inline-block;
}

.in-badge__face {
	display: block;
	cursor: pointer;
	list-style: none;
	line-height: 1;
}

.in-badge__face::-webkit-details-marker {
	display: none;
}

.in-badge__avatar {
	position: relative;
	display: block;
	line-height: 1;
}

.in-badge__photo {
	display: block;
	width: 32px;
	height: 32px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

.in-badge__caret {
	position: absolute;
	right: -1px;
	bottom: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--in-line-soft);
	box-shadow: 0 0 0 2px var(--in-card);
	color: var(--in-ink-2);
}

.in-badge__menu {
	display: none;
	position: absolute;
	right: 0;
	top: 110%;
	z-index: 30;
	min-width: 220px;
	padding: 10px;
	background: var(--in-card);
	border: 1px solid var(--in-line);
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
}

.in-badge[open] .in-badge__menu {
	display: block;
}

/* A pointer opens it by hovering, the way the campus does. */
@media (hover: hover) {
	.in-badge:hover .in-badge__menu,
	.in-badge:focus-within .in-badge__menu {
		display: block;
	}
}

.in-badge__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 6px;
	font-size: 14px;
	color: var(--in-ink);
	text-decoration: none;
}

/*
 * The icon column. The rows carry the campus's own icons and ours, drawn on a 20
 * box; without a column of their own they sat on the text's baseline and the one
 * row with a second line pushed its icon onto a line of its own.
 */
.in-badge__icon {
	display: flex;
	flex: 0 0 18px;
	align-items: center;
	justify-content: center;
	color: var(--in-muted);
}

.in-badge__icon svg {
	width: 18px;
	height: 18px;
}

.in-badge__text {
	min-width: 0;
}

.in-badge__item:hover {
	background: var(--in-line-soft);
	color: var(--in-ink);
}

.in-badge__item strong {
	display: block;
}

.in-badge__item span {
	display: block;
	font-size: 12px;
	color: var(--in-muted);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Inside the theme's collapsed menu the panel floats over nothing. */
@media (max-width: 781px) {
	.in-badge__menu {
		position: static;
		box-shadow: none;
		min-width: 0;
	}
}

/**
 * The platform's button, for our own blocks on somebody else's screen.
 *
 * The per-screen panels print their own styles, which is right for a rule used
 * once — but a button pasted into Tutor's dashboard or the theme's page needs to
 * look like a button wherever it lands, and a class that only exists inside one
 * panel's `<style>` renders as a bare link everywhere else. That is exactly what
 * happened to the calendar box on Mis materias.
 */

.in-button {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 6px;
	background: var(--in-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.in-button:hover,
.in-button:focus {
	background: var(--in-accent-hover);
	color: #fff;
	text-decoration: none;
}

/**
 * An intro line under a heading, outside a card.
 *
 * Tutor ships `.tutor-mb-16` three times: 16px in `tutor.min.css`, `margin:0`
 * in `tutor-front.min.css`, and **88px** in `tutor-core.min.css`, which is the
 * one the aula dashboard loads. So the sentence under "Trimestre que viene" sat
 * 88 pixels above the card it belongs to and read as something missing.
 * Reported by the client, September 29, 2026.
 */

.tutor-dashboard-layout .tutor-dashboard-page p.tutor-color-muted.tutor-mb-16 {
	margin: 0 0 12px;
}

/**
 * FluentCart's customer page, on the two points where it sells. Task 16.19.
 *
 * Its empty states end with a "Back to Shopping Now" button that goes to a shop
 * this school does not have: nothing on the platform is bought except a cursada,
 * and that is arranged with the school rather than added to a cart. The button
 * is drawn by their Vue app, so it goes here rather than through a filter.
 */

.fct-customer-dashboard-empty-state a.el-button {
	display: none;
}