/* Tutor LMS con el diseño del tema.
   1. Tokens de Tutor (--tutor-*) igualados a los del tema, en claro y oscuro.
      No se tocan cuando la alumna activa el alto contraste de Tutor.
   2. Ajustes del panel de Tutor.
   3. Piezas propias del plugin Tutor Training (.tt-*).
   4. Página de MasterClass (.mc). */

/* 1. Tokens ------------------------------------------------------------- */

:root:root {
	--tutor-brand-100: color-mix(in oklch, var(--c-primary) 24%, #fff);
	--tutor-brand-200: color-mix(in oklch, var(--c-primary) 42%, #fff);
	--tutor-brand-300: color-mix(in oklch, var(--c-primary) 62%, #fff);
	--tutor-brand-400: color-mix(in oklch, var(--c-primary) 82%, #fff);
	--tutor-brand-450: var(--c-primary);
	--tutor-brand-500: color-mix(in oklch, var(--c-primary) 88%, #000);
	--tutor-brand-600: var(--c-primary-ink);
	--tutor-brand-700: var(--c-primary-deep);
	--tutor-brand-800: color-mix(in oklch, var(--c-primary) 45%, #000);
	--tutor-brand-900: color-mix(in oklch, var(--c-primary) 36%, #000);
	--tutor-brand-950: color-mix(in oklch, var(--c-primary) 22%, #000);
	--tutor-color-primary: var(--c-primary-ink);
	--tutor-color-primary-hover: var(--c-primary-deep);
	--tutor-font-family-body: var(--font-body);
	--tutor-font-family-heading: var(--font-display);
	--tutor-button-radius: 999px;
	--tutor-input-radius: 12px;
	--tutor-modal-radius: 22px;
}

:root:root[data-tutor-theme]:not([data-tutor-contrast="high"]) {
	--tutor-surface-base: var(--bg);
	--tutor-surface-l1: var(--card);
	--tutor-surface-l1-hover: var(--raise);
	--tutor-surface-l2: var(--raise);
	--tutor-surface-l3: var(--raise);
	--tutor-surface-sidebar-l1: var(--card);
	--tutor-surface-brand-secondary: var(--c-primary-soft);
	--tutor-surface-brand-tertiary: var(--raise);
	--tutor-text-primary: var(--text);
	--tutor-text-secondary: color-mix(in srgb, var(--text) 82%, var(--muted));
	--tutor-text-subdued: var(--muted);
	--tutor-text-brand: var(--c-primary-ink);
	--tutor-icon-idle: var(--muted);
	--tutor-icon-brand: var(--c-primary-ink);
	--tutor-border-idle: var(--line);
	--tutor-body-color: var(--text);
	--tutor-border-color: var(--line);
	/* Botones "outline" de Tutor: con el borde casi blanco de Tutor no se veían sobre las tarjetas blancas. */
	--tutor-border-idle2: color-mix(in srgb, var(--c-primary-ink) 28%, transparent);
	--tutor-button-outline-inverse: var(--card);
	--tutor-button-outline-border-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c-primary-ink) 35%, transparent);
}

.tutor-btn-outline {
	color: var(--c-primary-ink);
	font-weight: 600;
}

/* 2. Panel de Tutor ---------------------------------------------------- */

.tutor-dashboard-layout {
	background: var(--bg);
}

.tutor-dashboard-layout :is(h1, h2, h3, .tutor-h1, .tutor-h2, .tutor-h3, .tutor-h4) {
	font-family: var(--font-display);
	letter-spacing: -0.012em;
}

.tutor-dashboard-sidebar-nav a {
	border-radius: var(--r-sm);
	transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.tutor-dashboard-sidebar-nav a.active {
	background: var(--c-primary-soft);
	color: var(--c-primary-deep);
	font-weight: 600;
}

:root[data-tutor-theme="dark"] .tutor-dashboard-sidebar-nav a.active {
	color: color-mix(in oklch, var(--c-primary) 6%, #fff);
}

.tutor-brand-logo img {
	max-height: 40px;
	width: auto;
}

/* El logo tiene letras oscuras: en oscuro va sobre una pastilla blanca. */
:root[data-tutor-theme="dark"] .tutor-brand-logo img {
	padding: 4px 8px;
	border-radius: 10px;
	background: #fff;
}

.tutor-btn.tutor-btn-primary {
	font-weight: 600;
}

/* 3. Piezas propias ----------------------------------------------------- */

.tt-pagina {
	display: grid;
	gap: 20px;
	max-width: 1080px;
}

.tt-pagina__cabeza h1 {
	margin: 0;
	font-size: var(--fs-xl);
	line-height: 1.15;
}

.tt-pagina__cabeza p {
	margin: 6px 0 0;
	color: var(--muted);
}

.tt-pagina__cabeza--fila {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: end;
	justify-content: space-between;
}

.tt-subtitulo {
	margin: 12px 0 0;
	font-size: var(--fs-l);
}

.tt-nota {
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-s);
}

.tt-enlace {
	color: var(--c-primary-ink);
	font-weight: 600;
	text-decoration: none;
}

.tt-enlace:hover {
	text-decoration: underline;
}

.tt-tarjeta {
	display: grid;
	gap: 12px;
	align-content: start;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--card);
	box-shadow: var(--card-sh);
}

.tt-tarjeta__cabeza {
	display: flex;
	gap: 10px;
	align-items: center;
}

.tt-tarjeta__cabeza h2 {
	margin: 0;
	font-size: var(--fs-m);
	font-weight: 600;
}

.tt-tarjeta__icono {
	display: grid;
	width: 36px;
	height: 36px;
	border-radius: var(--r-sm);
	background: var(--chip);
	color: var(--text);
	place-items: center;
}

.tt-tarjeta__icono--agua {
	background: var(--c-primary-soft);
	color: var(--c-primary-deep);
}

.tt-tarjeta__icono--racha {
	background: color-mix(in srgb, var(--c-accent) 35%, var(--card));
	color: #8a5a00;
}

:root[data-tutor-theme="dark"] .tt-tarjeta__icono--agua {
	color: #bdeef0;
}

:root[data-tutor-theme="dark"] .tt-tarjeta__icono--racha {
	color: var(--c-accent);
}

.tt-dato {
	margin: 0;
	color: var(--muted);
}

.tt-dato strong {
	margin-inline-end: 4px;
	color: var(--text);
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	line-height: 1;
}

/* Inicio: mensaje de la entrenadora y resumen */

.tt-mensaje {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 14px;
	align-items: start;
	margin-bottom: 20px;
	padding: 20px 20px 20px 18px;
	border-radius: var(--r-xl);
	background: linear-gradient(135deg, var(--c-secondary) 0%, #f6a07a 100%);
	color: #3d0d10;
	box-shadow: 0 18px 36px -22px rgb(217 71 79 / 70%);
}

.tt-mensaje[hidden] {
	display: none;
}

.tt-mensaje__icono {
	display: grid;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgb(255 255 255 / 45%);
	place-items: center;
}

.tt-mensaje__de {
	margin: 0;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.8;
}

.tt-mensaje h2 {
	margin: 2px 0 4px;
	color: inherit;
	font-size: var(--fs-l);
}

.tt-mensaje p {
	margin: 0;
}

.tt-mensaje__cerrar {
	display: grid;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 40%);
	color: inherit;
	cursor: pointer;
	place-items: center;
}

.tt-mensaje__cerrar:hover {
	background: rgb(255 255 255 / 65%);
}

.tt-resumen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 28px;
}

.tt-agua__cuenta {
	margin: 0;
	color: var(--muted);
}

.tt-agua__cuenta strong {
	color: var(--text);
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	line-height: 1;
}

.tt-agua__vasos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tt-agua__vasos i {
	width: 14px;
	height: 20px;
	border: 1.5px solid color-mix(in srgb, var(--c-primary) 55%, transparent);
	border-radius: 3px 3px 6px 6px;
	transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.tt-agua__vasos i.is-lleno {
	border-color: var(--c-primary);
	background: var(--c-primary);
	transform: translateY(-1px);
}

.tt-agua__botones {
	display: flex;
	gap: 10px;
}

.tt-boton-redondo {
	display: grid;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--raise);
	color: var(--text);
	cursor: pointer;
	place-items: center;
	transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}

.tt-boton-redondo:active {
	transform: scale(0.92);
}

.tt-boton-redondo--lleno {
	border-color: transparent;
	background: var(--c-primary-deep);
	color: #fff;
}

/* Comidas */

.tt-pestanas {
	display: inline-flex;
	gap: 4px;
	justify-self: start;
	padding: 4px;
	border-radius: var(--r-pill);
	background: var(--chip);
}

.tt-pestanas button {
	min-height: 38px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.tt-pestanas [aria-selected="true"] {
	background: var(--card);
	color: var(--text);
	box-shadow: var(--card-sh);
}

.tt-total {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
	margin: 0 0 12px;
	font-weight: 600;
}

.tt-lista-comidas {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-comida {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--card);
}

.tt-comida__momento {
	display: grid;
	align-content: start;
	color: var(--muted);
	font-size: var(--fs-s);
}

.tt-comida__momento strong {
	color: var(--c-primary-ink);
	font-size: var(--fs-xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.tt-comida h2 {
	margin: 0 0 6px;
	font-size: var(--fs-m);
}

.tt-macros {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.tt-macros span,
.tt-chip {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 10px;
	border-radius: var(--r-pill);
	background: var(--chip);
	color: var(--text);
	font-size: var(--fs-xs);
	font-weight: 600;
	white-space: nowrap;
}

.tt-chip--ok {
	background: var(--c-primary-soft);
	color: var(--c-primary-deep);
}

.tt-chip--aviso {
	background: var(--c-secondary-soft);
	color: var(--c-secondary-deep);
}

:root[data-tutor-theme="dark"] :is(.tt-chip--ok, .tt-chip--aviso) {
	color: var(--text);
}

.tt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.tt-cambiar {
	margin-top: 10px;
}

.tt-cambiar summary {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: var(--c-primary-ink);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.tt-cambiar summary::-webkit-details-marker {
	display: none;
}

.tt-cambiar ul {
	display: grid;
	gap: 6px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.tt-cambiar li {
	display: flex;
	justify-content: space-between;
	padding: 10px 12px;
	border-radius: var(--r-sm);
	background: var(--raise);
}

.tt-compras {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.tt-compras label {
	display: flex;
	gap: 10px;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--card);
	cursor: pointer;
}

.tt-compras input:checked + * ,
.tt-compras label:has(input:checked) {
	color: var(--muted);
	text-decoration: line-through;
}

/* Progreso */

.tt-progreso__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.tt-calendario {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-calendario li {
	aspect-ratio: 1;
	border-radius: 8px;
	background: var(--chip);
}

.tt-calendario li.is-hecho {
	background: var(--c-primary);
}

.tt-calendario li.is-hoy {
	outline: 2px solid var(--c-secondary);
	outline-offset: 1px;
}

.tt-form-linea {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: end;
}

.tt-form-linea label,
.tt-form-linea .tt-nota {
	grid-column: 1 / -1;
}

.tt-pagina :is(input[type="number"], input[type="text"], input[type="search"], input[type="date"], input[type="time"], input[type="email"], input[type="file"], select, textarea).tutor-form-control {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--raise);
	color: var(--text);
	font: inherit;
}

.tt-pagina :is(input, select, textarea).tutor-form-control:focus {
	border-color: var(--c-primary);
	outline: 0;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 22%, transparent);
}

.tt-calendario {
	max-width: 300px;
}

.tt-interruptor {
	display: flex;
	gap: 12px;
	align-items: center;
	cursor: pointer;
}

.tt-interruptor input {
	position: relative;
	flex: none;
	width: 44px;
	height: 26px;
	margin: 0;
	border-radius: var(--r-pill);
	background: var(--chip);
	box-shadow: inset 0 0 0 1px var(--line);
	cursor: pointer;
	transition: background 0.25s var(--ease);
	appearance: none;
}

.tt-interruptor input::after {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
	transition: transform 0.25s var(--ease);
	content: "";
}

.tt-interruptor input:checked {
	background: var(--c-primary-deep);
}

.tt-interruptor input:checked::after {
	transform: translateX(18px);
}

.tt-interruptor input:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/* Tablas, fichas y formularios */

.tt-tabla-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--card);
}

.tt-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-s);
}

.tt-tabla :is(th, td) {
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	text-align: start;
	vertical-align: middle;
}

.tt-tabla thead th {
	color: var(--muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tt-tabla tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}

.tt-tabla tbody th {
	font-weight: 600;
}

.tt-persona {
	display: flex;
	gap: 10px;
	align-items: center;
}

.tt-persona img {
	border-radius: 50%;
}

.tt-persona .tt-nota {
	display: block;
	font-weight: 400;
}

.tt-fichas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-fichas--lista {
	grid-template-columns: 1fr;
}

.tt-ficha {
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--card);
}

.tt-ficha :is(h2, h3) {
	margin: 0;
	font-size: var(--fs-m);
}

.tt-form {
	gap: 8px;
	max-width: 640px;
}

.tt-form label {
	margin-top: 6px;
	font-weight: 600;
}

.tt-form .tutor-btn {
	justify-self: start;
	margin-top: 8px;
}

.tt-buscar input {
	min-width: min(320px, 100%);
}

.tt-aviso {
	margin: 0;
	padding: 12px 16px;
	border-radius: var(--r-sm);
	background: var(--c-primary-soft);
	color: var(--text);
	font-weight: 600;
}

.tt-aviso--error {
	background: var(--c-secondary-soft);
}

/* Permisos */

.tt-permisos__form {
	gap: 4px;
	max-width: 720px;
}

.tt-permiso {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
}

.tt-permiso input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--c-primary-deep);
}

.tt-permiso > span {
	display: grid;
	gap: 2px;
}

.tt-permisos__form .tutor-btn {
	justify-self: start;
	margin-top: 14px;
}

.tt-permisos__datos {
	max-width: 720px;
}

.tt-permisos__datos h2 {
	margin: 0;
	font-size: var(--fs-l);
}

.tt-permisos__datos p {
	margin: 0;
}

.tt-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tt-boton-peligro.tt-boton-peligro {
	color: var(--c-secondary-deep);
}

/* MasterClass en el panel */

.tt-vivo {
	display: grid;
	gap: 8px;
	padding: clamp(20px, 3vw, 28px);
	border-radius: var(--r-xl);
	background:
		radial-gradient(120% 140% at 100% 0%, rgb(59 190 196 / 55%) 0%, transparent 60%),
		var(--c-primary-deep);
	color: #fff;
}

.tt-vivo h2 {
	margin: 0;
	color: #fff;
	font-size: var(--fs-xl);
	line-height: 1.15;
}

.tt-vivo__etiqueta {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	font-size: var(--fs-s);
	font-weight: 600;
	opacity: 0.9;
}

.tt-vivo__fecha {
	margin: 0;
	opacity: 0.9;
}

.tt-vivo__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 8px;
}

.tt-vivo .tt-nota {
	color: rgb(255 255 255 / 80%);
}

.tt-vivo .tutor-btn-primary {
	background: #fff;
	color: var(--c-primary-deep);
}

.tt-vivo .tutor-btn-primary:disabled {
	opacity: 0.55;
}

.tt-vivo .tutor-btn-outline {
	border: 1px solid rgb(255 255 255 / 55%);
	background: transparent;
	color: #fff;
}

.tt-vivo .tutor-btn-outline:hover {
	background: rgb(255 255 255 / 12%);
}

.tt-cursos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-curso a {
	display: grid;
	gap: 10px;
	padding: 10px 10px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--card);
	color: var(--text);
	text-decoration: none;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.tt-curso a:hover {
	box-shadow: var(--card-sh);
	transform: translateY(-2px);
}

.tt-curso__imagen {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--r-md);
	object-fit: cover;
}

.tt-curso__titulo {
	padding-inline: 4px;
	font-weight: 600;
}

.tt-barra {
	position: relative;
	display: block;
	height: 6px;
	overflow: hidden;
	margin-inline: 4px;
	border-radius: var(--r-pill);
	background: var(--chip);
}

.tt-barra::before {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--avance, 0%);
	border-radius: inherit;
	background: var(--c-primary);
	content: "";
}

/* Estado vacío */

.tt-vacio {
	display: grid;
	gap: 10px;
	justify-items: center;
	padding: clamp(28px, 6vw, 56px) 20px;
	border: 1.5px dashed color-mix(in srgb, var(--c-primary) 40%, var(--line));
	border-radius: var(--r-xl);
	background: color-mix(in srgb, var(--card) 60%, transparent);
	text-align: center;
}

.tt-vacio__icono {
	display: grid;
	width: 56px;
	height: 56px;
	border-radius: 18px;
	background: var(--c-primary-soft);
	color: var(--c-primary-deep);
	place-items: center;
}

.tt-vacio h2 {
	margin: 4px 0 0;
	font-size: var(--fs-l);
}

.tt-vacio p {
	max-width: 46ch;
	margin: 0;
	color: var(--muted);
}

@media (max-width: 640px) {
	.tt-comida {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.tt-comida__momento {
		display: flex;
		gap: 8px;
		align-items: baseline;
	}

	.tt-mensaje {
		grid-template-columns: 1fr auto;
	}

	.tt-mensaje__icono {
		display: none;
	}

	/* En el teléfono: agua a todo el ancho, racha y peso lado a lado. */
	.tt-resumen {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.tt-agua {
		grid-column: 1 / -1;
	}

	.tt-resumen .tt-tarjeta {
		padding: 16px;
	}
}

/* 4. Página de MasterClass --------------------------------------------- */

.mc {
	width: min(100% - 2 * var(--gutter), 1160px);
	margin: 32px auto 0;
}

.mc__cabeza {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: clamp(20px, 4vw, 48px);
	align-items: start;
	padding: clamp(24px, 4vw, 44px);
	border-radius: var(--r-xl);
	background:
		radial-gradient(90% 120% at 0% 0%, rgb(244 131 135 / 38%) 0%, transparent 55%),
		radial-gradient(80% 120% at 100% 100%, rgb(59 190 196 / 50%) 0%, transparent 60%),
		var(--c-primary-deep);
	color: #fff;
}

.mc__categoria {
	display: inline-flex;
	margin: 0;
	color: var(--c-accent);
	font-size: var(--fs-s);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mc__titulo {
	margin: 8px 0 0;
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.mc__bajada {
	max-width: 52ch;
	margin: 12px 0 0;
	opacity: 0.9;
}

.mc__vivo {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 24px;
	padding: 16px;
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: var(--r-lg);
	background: rgb(255 255 255 / 10%);
	backdrop-filter: blur(10px);
}

.mc__vivo-icono {
	display: grid;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-secondary);
	color: #fff;
	place-items: center;
}

.mc__vivo p {
	margin: 0;
}

.mc__vivo-etiqueta {
	font-size: var(--fs-s);
	opacity: 0.85;
}

.mc__vivo-fecha {
	font-weight: 700;
}

.mc__vivo-nota {
	flex-basis: 100%;
	font-size: var(--fs-s);
	opacity: 0.85;
}

.mc__vivo .tutor-btn-primary {
	margin-inline-start: auto;
	background: #fff;
	color: var(--c-primary-deep);
}

.mc__caja {
	display: grid;
	gap: 14px;
	padding: 14px;
	border-radius: var(--r-lg);
	background: var(--card);
	color: var(--text);
	box-shadow: 0 30px 50px -30px rgb(0 0 0 / 50%);
}

.mc__imagen {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-md);
	object-fit: cover;
}

.mc__avance p {
	margin: 0 0 6px;
	font-weight: 600;
}

.mc__avance .tt-barra {
	margin: 0;
}

.mc__cuerpo {
	display: grid;
	gap: 36px;
	max-width: 760px;
	margin-top: 40px;
}

.mc__seccion h2 {
	margin: 0 0 12px;
	font-family: var(--font-display);
	font-size: var(--fs-l);
}

.mc__sesiones {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	counter-reset: sesion;
	list-style: none;
}

.mc__sesiones > li {
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--card);
	counter-increment: sesion;
}

.mc__sesiones h3 {
	margin: 0 0 10px;
	font-size: var(--fs-m);
}

.mc__sesiones h3::before {
	margin-inline-end: 10px;
	color: var(--c-secondary-deep);
	font-family: var(--font-display);
	content: counter(sesion, decimal-leading-zero);
}

.mc__sesiones ul {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc__sesiones ul li {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 8px 10px;
	border-radius: var(--r-sm);
}

.mc__sesiones ul li:hover {
	background: var(--raise);
}

.mc__sesiones ul li.is-hecha {
	color: var(--muted);
}

.mc__sesiones a {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 860px) {
	.mc__cabeza {
		grid-template-columns: 1fr;
	}
}

/* Oscuro cuando la alumna sigue al teléfono (system) y el teléfono está en oscuro: mismos ajustes que arriba. */

@media (prefers-color-scheme: dark) {
	:root[data-tutor-theme="system"] .tutor-dashboard-sidebar-nav a.active,
	:root[data-tutor-theme="system"] :is(.tt-chip--ok, .tt-chip--aviso) {
		color: var(--text);
	}

	:root[data-tutor-theme="system"] .tutor-brand-logo img {
		padding: 4px 8px;
		border-radius: 10px;
		background: #fff;
	}

	:root[data-tutor-theme="system"] .tt-tarjeta__icono--agua {
		color: #bdeef0;
	}

	:root[data-tutor-theme="system"] .tt-tarjeta__icono--racha {
		color: var(--c-accent);
	}
}

/* ===== Herramientas de la entrenadora y fotos (v0.2) ===== */

.tt-volver {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-bottom: 8px;
	color: var(--muted);
	font-size: var(--fs-s);
	font-weight: 600;
	text-decoration: none;
}

.tt-volver:hover {
	color: var(--text);
}

button.tt-enlace {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

.tt-enlace--peligro.tt-enlace--peligro {
	color: var(--c-secondary-deep);
}

.tt-tarjeta__cabeza h3 {
	margin: 0;
	font-size: var(--fs-m);
	font-weight: 600;
}

.tt-tarjeta__icono--c-secondary {
	background: var(--c-secondary-soft);
	color: var(--c-secondary-deep);
}

/* Campos */

.tt-campo {
	display: grid;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.tt-form .tt-campo label,
.tt-campo > label,
.tt-campo > legend {
	margin: 0;
	padding: 0;
	font-weight: 600;
}

.tt-campos-2,
.tt-campos-4 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 12px;
}

.tt-campos-2 {
	align-items: start;
}

.tt-campos-4 {
	grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
}

.tt-con-unidad {
	display: flex;
	gap: 8px;
	align-items: center;
}

.tt-con-unidad > span {
	color: var(--muted);
	font-size: var(--fs-s);
}

.tt-form__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tt-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tt-form .tt-check,
.tt-check {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--raise);
	font-weight: 500;
	cursor: pointer;
}

.tt-check:has(input:checked) {
	border-color: var(--c-primary);
	background: var(--c-primary-soft);
}

.tt-check input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--c-primary-deep);
}

.tt-boton-icono {
	display: inline-grid;
	width: 40px;
	height: 40px;
	flex: none;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--card);
	color: var(--muted);
	cursor: pointer;
	place-items: center;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.tt-boton-icono:hover {
	border-color: var(--c-secondary);
	color: var(--c-secondary-deep);
}

.tt-pagina .tutor-btn {
	gap: 8px;
}

/* Armador semanal */

.tt-armador__form {
	display: grid;
	gap: 16px;
}

.tt-armador__form .tt-form {
	max-width: none;
}

.tt-armador__alumnas summary,
.tt-campo--alts summary {
	color: var(--c-primary-ink);
	font-weight: 600;
	cursor: pointer;
}

.tt-armador__alumnas[open] summary {
	margin-bottom: 10px;
}

.tt-armador__semana-cabeza {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	align-items: baseline;
	justify-content: space-between;
}

.tt-armador__semana-cabeza .tt-subtitulo {
	margin: 0;
}

.tt-pestanas--dias {
	display: flex;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

.tt-pestanas--dias button {
	display: inline-flex;
	flex: 1 0 auto;
	justify-content: center;
	gap: 6px;
	align-items: center;
	padding: 0 14px;
}

.tt-pestanas__corto {
	display: none;
}

.tt-pestanas__cuenta {
	display: inline-grid;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--r-pill);
	background: var(--raise);
	color: var(--muted);
	font-size: var(--fs-xs);
	place-items: center;
}

.tt-pestanas [aria-selected="true"] .tt-pestanas__cuenta {
	background: var(--c-primary-soft);
	color: var(--c-primary-deep);
}

.tt-armador__dia {
	display: grid;
	gap: 12px;
}

.tt-armador__dia[hidden] {
	display: none;
}

.tt-comida-filas {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-comida-fila {
	display: grid;
	grid-template-columns: auto minmax(140px, 1fr) 110px minmax(200px, 2fr) auto auto;
	gap: 10px;
	align-items: end;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--raise);
}

.tt-comida-fila .tt-campo > label {
	color: var(--muted);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.tt-comida-fila__mover {
	align-self: center;
	color: var(--muted);
	opacity: 0.6;
}

.tt-campo--alts {
	align-self: center;
}

.tt-campo--alts summary {
	min-height: 44px;
	padding: 10px 4px;
	white-space: nowrap;
}

.tt-campo--alts[open] {
	display: grid;
	grid-column: 2 / -1;
	order: 10;
	gap: 8px;
}

.tt-campo--alts[open] summary {
	min-height: 0;
	padding: 0;
}

.tt-armador__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.tt-copiar select {
	min-width: 220px;
}

.tt-armador__total {
	margin: 0 0 0 auto;
	color: var(--muted);
}

.tt-armador__total strong {
	color: var(--text);
	font-family: var(--font-display);
	font-size: var(--fs-l);
}

.tt-armador__vacio {
	padding: 16px;
	border: 1.5px dashed var(--line);
	border-radius: var(--r-md);
	text-align: center;
}

.tt-armador__guardar {
	position: sticky;
	bottom: 12px;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--card) 88%, transparent);
	box-shadow: var(--card-sh);
	backdrop-filter: blur(12px);
}

.tt-armador__extra {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
}

/* Editor de receta */

.tt-receta-editor__form {
	max-width: 760px;
	gap: 16px;
}

.tt-receta-editor__foto {
	width: 160px;
	height: 120px;
	border-radius: var(--r-md);
	object-fit: cover;
}

/* Fotos de progreso */

.tt-fotos {
	margin-top: 16px;
}

.tt-fotos__comparar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	max-width: 480px;
}

.tt-fotos__comparar figure {
	display: grid;
	gap: 6px;
	margin: 0;
}

.tt-fotos__comparar img,
.tt-fotos__galeria img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	border-radius: var(--r-lg);
	background: var(--chip);
	object-fit: cover;
}

.tt-fotos__galeria img {
	border-radius: var(--r-md);
}

.tt-fotos__comparar figcaption {
	color: var(--muted);
	font-size: var(--fs-s);
}

.tt-fotos__comparar figcaption strong {
	margin-inline-end: 6px;
	color: var(--text);
}

.tt-fotos__galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-fotos__galeria li {
	position: relative;
	display: grid;
	gap: 4px;
}

.tt-fotos__pie {
	color: var(--muted);
	font-size: var(--fs-xs);
}

.tt-fotos__galeria form {
	position: absolute;
	top: 6px;
	right: 6px;
}

.tt-fotos__borrar {
	width: 34px;
	height: 34px;
	border-color: transparent;
	background: color-mix(in srgb, var(--card) 85%, transparent);
	backdrop-filter: blur(6px);
}

.tt-fotos__subir {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
	gap: 12px;
	align-items: end;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

/* Ficha de alumna */

.tt-ficha-alumna__cabeza {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	margin-bottom: 16px;
}

.tt-ficha-alumna__cabeza img {
	border-radius: 50%;
}

.tt-ficha-alumna__cabeza > div {
	flex: 1;
	min-width: 200px;
}

.tt-ficha-alumna__cabeza h1 {
	margin: 0;
	font-size: var(--fs-xl);
	line-height: 1.15;
}

.tt-ficha-alumna__cabeza a:not(.tutor-btn) {
	color: inherit;
}

.tt-ficha-alumna__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 16px;
	margin-top: 16px;
}

.tt-ficha-alumna > .tt-form {
	max-width: none;
	margin-top: 16px;
}

.tt-avances {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-avances li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 10px;
	align-items: center;
}

.tt-avances .tt-barra {
	grid-column: 1;
	margin: 0;
}

.tt-avances__pct {
	grid-row: 1 / span 2;
	grid-column: 2;
	font-weight: 700;
}

.tt-barras-agua {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
	max-width: 320px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-barras-agua li {
	display: grid;
	gap: 4px;
	justify-items: center;
}

.tt-barras-agua__barra {
	position: relative;
	display: block;
	width: 100%;
	max-width: 28px;
	height: 72px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--chip);
}

.tt-barras-agua__barra i {
	position: absolute;
	inset: auto 0 0;
	background: color-mix(in srgb, var(--c-primary) 55%, var(--card));
}

.tt-barras-agua__barra.is-meta i {
	background: var(--c-primary);
}

.tt-barras-agua__n {
	font-size: var(--fs-s);
	font-weight: 700;
}

.tt-barras-agua__dia {
	color: var(--muted);
	font-size: var(--fs-xs);
	text-transform: capitalize;
}

.tt-permisos-lista {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-permisos-lista li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 8px;
	align-items: center;
}

.tt-permisos-lista li > :first-child {
	color: var(--muted);
}

.tt-permisos-lista li.is-dado > :first-child {
	color: var(--c-primary-deep);
}

/* Resumen de la entrenadora (arriba del inicio de instructora de Tutor) */

.tt-coach {
	display: grid;
	gap: 16px;
	margin-bottom: 24px;
}

.tt-coach__cifras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-coach__cifras li {
	display: grid;
	gap: 2px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--card);
}

.tt-coach__cifras strong {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	line-height: 1;
}

.tt-coach__cifras span {
	color: var(--muted);
	font-size: var(--fs-s);
}

.tt-coach__cifras .is-aviso {
	border-color: color-mix(in srgb, var(--c-secondary) 45%, var(--line));
	background: color-mix(in srgb, var(--c-secondary-soft) 55%, var(--card));
}

.tt-coach__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 16px;
}

.tt-personas,
.tt-clases {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-personas li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: center;
	justify-content: space-between;
}

.tt-personas a {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
}

.tt-personas a:hover span {
	text-decoration: underline;
}

.tt-personas img {
	border-radius: 50%;
}

.tt-clases li {
	display: grid;
	gap: 2px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}

.tt-clases li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.tt-coach__permisos {
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

.tt-persona a {
	color: var(--text);
	font-weight: 600;
}

@media (max-width: 760px) {
	.tt-comida-fila {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	}

	.tt-comida-fila .tt-campo--hora input {
		min-width: 0;
	}

	.tt-comida-fila__mover {
		display: none;
	}

	.tt-comida-fila .tt-campo--receta {
		grid-row: 2;
		grid-column: 1 / -1;
	}

	.tt-comida-fila .tt-campo--alts,
	.tt-comida-fila .tt-campo--alts[open] {
		grid-row: 3;
		grid-column: 1 / 3;
	}

	.tt-comida-fila [data-tt-quitar] {
		grid-row: 3;
		grid-column: 3;
		align-self: start;
	}

	.tt-pestanas__largo,
	.tt-pestanas__cuenta {
		display: none;
	}

	.tt-pestanas__corto {
		display: inline;
	}

	.tt-pestanas--dias {
		justify-self: stretch;
	}

	.tt-pestanas--dias button {
		flex: 1;
		justify-content: center;
		padding: 0 8px;
	}

	.tt-armador__total {
		margin-left: 0;
	}

	.tt-copiar,
	.tt-copiar select {
		width: 100%;
		min-width: 0;
	}

	/* Encima de la barra inferior que Tutor muestra en el celular. */
	.tt-armador__guardar {
		bottom: calc(76px + env(safe-area-inset-bottom));
		border-radius: var(--r-lg);
	}

	.tt-armador__guardar .tutor-btn {
		flex: 1;
		justify-content: center;
	}

	.tt-fotos__subir {
		grid-template-columns: 1fr;
	}
}