/**
 * Panel v3 — capa de rediseño sobre el escritorio unificado.
 *
 * Se carga DESPUÉS de `dashboard.css` y lo reestiliza sin modificarlo. Todo está scopeado bajo
 * `.midacta-ud`, igual que el original, así que nada de esto se escapa al resto del sitio.
 *
 * Se evita `!important` a propósito: alcanza con subir un nivel de especificidad
 * (`.midacta-ud .midacta-ud-layout` gana sobre `.midacta-ud-layout`). Si algún día hay que
 * quitar esta capa, se borra el archivo y el panel vuelve exactamente a como estaba.
 *
 * Basado en la maqueta aprobada (netlify) — tokens, sidebar, tarjetas y tipografía.
 */

/* =========================================================================
 * 1) TOKENS — se redefinen los del panel y se agregan los que faltaban.
 * ========================================================================= */
.midacta-ud {
	--midacta-navy: #002d74;
	--midacta-cyan: #00b2e3;
	--midacta-orange: #ffb548;
	--midacta-gray: #e2e8f0;
	--midacta-bg-page: #f4f6f9;
	--midacta-card: #ffffff;

	--pv3-azul: #002d74;
	--pv3-azul-d: #001e55;
	--pv3-celeste: #00b2e3;
	--pv3-celeste-d: #0099c6;
	--pv3-celeste-bg: #e5f7fc;
	--pv3-amarillo: #ffb548;
	--pv3-amarillo-d: #f0a030;
	--pv3-verde: #1fb573;
	--pv3-verde-bg: #e6f7ef;
	--pv3-rojo: #e84855;
	--pv3-rojo-bg: #feebed;
	--pv3-gris-bg: #f4f6f9;
	--pv3-gris-bg2: #eef1f6;
	--pv3-linea: #e2e8f0;
	--pv3-texto: #5a6a7e;
	--pv3-suave: #8b98ab;

	--pv3-mono: "DM Mono", ui-monospace, monospace;
	--pv3-r-sm: 8px;
	--pv3-r: 12px;
	--pv3-r-lg: 20px;

	--pv3-sombra-sm: 0 1px 3px rgba(0, 45, 116, 0.07), 0 1px 2px rgba(0, 45, 116, 0.04);
	--pv3-sombra: 0 4px 16px rgba(0, 45, 116, 0.08), 0 2px 4px rgba(0, 45, 116, 0.05);
	--pv3-sombra-lg: 0 20px 48px rgba(0, 45, 116, 0.12), 0 8px 16px rgba(0, 45, 116, 0.06);

	--pv3-sidebar: 260px;

	color: var(--pv3-azul);
}

/* Etiqueta monoespaciada en versalitas: el recurso que le da carácter a la maqueta. */
.midacta-ud .pv3-lab {
	font-family: var(--pv3-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pv3-texto);
}

/* =========================================================================
 * 2) LAYOUT — de barra horizontal a sidebar, sin tocar el markup original.
 *
 * El orden en el DOM es: topbar, [topbar v3 inyectada], body. Con grid se los
 * reubica sin depender de ese orden.
 * ========================================================================= */
.midacta-ud .midacta-ud-layout {
	display: grid;
	grid-template-columns: var(--pv3-sidebar) minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr);
	background: var(--pv3-gris-bg);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;

	/*
	 * ALTO DEL PANEL — POR QUÉ ESTÁ ESCRITO DOS VECES
	 *
	 * El panel va incrustado en una página que además trae cabecera del sitio, un título y un
	 * pie. Con `100vh` el panel solo ya llena la pantalla, así que todo lo demás empuja y la
	 * página termina con su propia barra de scroll. `--pv3-alto-libre` es justamente eso que
	 * la página pone arriba y abajo, medido por `panel-v3.js`.
	 *
	 * La primera línea es el respaldo y NO se borra: si el navegador no entiende `max()`,
	 * descarta la segunda declaración y queda el `100vh` de siempre. Sin ella, un navegador
	 * viejo se caería al `min-height: 0` del plugin y el panel colapsaría — que es como se
	 * rompieron "Mis clases" y "Chat Midacta" el 2026-08-18.
	 *
	 * El `max(60vh, …)` es la segunda red: pase lo que pase con la medición, el layout nunca
	 * puede quedar más bajo que 60vh.
	 */
	min-height: 100vh;
	min-height: max(60vh, calc(100vh - var(--pv3-alto-libre, 0px)));
}

/* ——— El header pasa a ser la columna izquierda, alto completo ——— */
.midacta-ud .midacta-ud-topbar {
	grid-column: 1;
	grid-row: 1 / -1;
	background: #fff;
	border-bottom: 0;
	border-right: 1px solid var(--pv3-linea);
	position: sticky;
	top: 0;
	align-self: start;
	/* Mismo criterio que el layout: respaldo primero, medición después. */
	height: 100vh;
	height: max(60vh, calc(100vh - var(--pv3-alto-libre, 0px)));
	z-index: 40;
}

.midacta-ud .midacta-ud-topbar__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-width: none;
	padding: 0;
	gap: 0;
}

/* ——— Marca y píldora de rol (bloque inyectado) ——— */
.midacta-ud .pv3-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 22px 24px;
	border-bottom: 1px solid var(--pv3-linea);
	flex-shrink: 0;
}

.midacta-ud .pv3-brand__logo {
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.02em;
	color: var(--pv3-azul);
}

.midacta-ud .pv3-brand__rol {
	font-family: var(--pv3-mono);
	font-size: 8px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 99px;
}

.midacta-ud .pv3-brand__rol--alumno {
	background: var(--pv3-celeste-bg);
	color: var(--pv3-celeste-d);
}

.midacta-ud .pv3-brand__rol--profesor {
	background: rgba(255, 181, 72, 0.18);
	color: var(--pv3-amarillo-d);
}

/* ——— Bloque de usuario ——— */
/* Al quitarse el encabezado de marca, la ficha del usuario pasó a ser lo primero del sidebar:
   necesita algo más de aire arriba para no quedar pegada al borde. */
.midacta-ud .pv3-user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 22px 24px 18px;
	border-bottom: 1px solid var(--pv3-linea);
	flex-shrink: 0;
}

.midacta-ud .pv3-user__avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	letter-spacing: -0.02em;
	background: linear-gradient(145deg, #7ddff5, #00b2e3);
}

.midacta-ud .pv3-user__avatar--profesor {
	background: linear-gradient(145deg, #3a6bbe, #002d74);
}

.midacta-ud .pv3-user__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.midacta-ud .pv3-user__info {
	min-width: 0;
	flex: 1;
}

.midacta-ud .pv3-user__nombre {
	font-weight: 700;
	font-size: 14px;
	color: var(--pv3-azul);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.midacta-ud .pv3-user__meta {
	font-size: 12px;
	color: var(--pv3-texto);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ——— Navegación vertical ——— */
.midacta-ud .midacta-ud-nav,
.midacta-ud .midacta-ud-topbar__nav {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	padding: 14px 12px;
	flex: 1;
	/*
	 * De acá salía la segunda barra de scroll.
	 *
	 * En el panel original este `<nav>` era una tira de pestañas HORIZONTAL, y su CSS le pone
	 * `overflow-x: auto` con barra fina y estilizada. Esta capa lo convirtió en columna
	 * vertical pero nunca apagó ese eje: bastaba con que un ítem midiera unos píxeles más que
	 * la columna para que apareciera una barrita horizontal dentro del menú. Eso es el "doble
	 * scroll sutil" reportado el 2026-08-18.
	 *
	 * Se apaga el eje horizontal y se deja sólo el vertical, que sí hace falta si alguna vez
	 * el menú no entra. `min-height: 0` es lo que permite que un hijo flex se achique por
	 * debajo de su contenido; sin eso el desborde vertical no funcionaría.
	 *
	 * NO se tocan las alturas: el `height: 100vh` de la columna y el `min-height: 100vh` del
	 * layout se quedan como están. Cambiarlos dejó "Mis clases" y "Chat Midacta" en blanco
	 * (2026-08-18), porque al abrir un embebido el plugin colapsa el layout con
	 * `:has(#midacta-ud-embed:not([hidden])) { min-height: 0 }` —un selector que pesa más que
	 * el nuestro, ya que `:has()` toma la especificidad de un id— y ese 100vh es lo único que
	 * le sigue dando alto a la columna del contenido.
	 */
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 0;
	margin: 0;
}

.midacta-ud .midacta-ud-nav__link {
	display: flex;
	align-items: center;
	/* El panel los centraba como pestañas horizontales; acá van alineados a la izquierda. */
	justify-content: flex-start;
	gap: 11px;
	width: 100%;
	min-height: 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	white-space: normal;
	color: var(--pv3-texto);
	transition: background 140ms ease, color 140ms ease;
}

.midacta-ud .midacta-ud-nav__link:hover {
	background: var(--pv3-gris-bg);
	color: var(--pv3-azul);
}

.midacta-ud .midacta-ud-nav__link--selected,
.midacta-ud .midacta-ud-nav__link[aria-current="page"] {
	background: var(--pv3-celeste-bg);
	color: var(--pv3-celeste-d);
	font-weight: 600;
}

.midacta-ud .midacta-ud-nav__icon {
	flex-shrink: 0;
	opacity: 0.85;
}

/* Contador de no leídos al final del ítem de chat. */
.midacta-ud .pv3-nav-badge {
	margin-left: auto;
	background: var(--pv3-rojo);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.6;
	padding: 2px 7px;
	border-radius: 99px;
	min-width: 18px;
	text-align: center;
}

/* ——— Pie del sidebar ——— */
/*
 * "Cerrar sesión" — el pie del menú.
 *
 * El plugin lo dibuja como una píldora con borde y le fija el color con `!important`:
 *
 *     .midacta-ud-topbar__logout        { color: var(--midacta-tab-active) !important;
 *                                         border: 1px solid rgba(0,45,98,.35); border-radius: 50px }
 *     .midacta-ud-topbar__logout:hover  { color: #fff !important; background: var(--midacta-tab-active) }
 *
 * Contra `!important` no alcanza con especificidad, así que el color se declara acá también
 * con `!important` (y con más peso: 0,3,0 contra 0,2,0). Dos cosas se veían mal por esto:
 *
 *   · en reposo quedaba azul marino fuerte, desentonando con el resto del menú, que es gris;
 *   · al pasar el mouse el texto se ponía BLANCO sobre el fondo rosa claro de acá —o sea,
 *     ilegible—, porque el fondo lo ganaba esta hoja y el color lo ganaba el `!important`.
 *
 * Además su `border` de píldora pintaba los cuatro lados: con `border-radius: 0` quedaba un
 * rectángulo alrededor del pie. Por eso primero se apaga el borde entero y recién después se
 * pone la línea de arriba, que es la única que corresponde.
 */
.midacta-ud .midacta-ud-topbar__logout {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 14px 24px;
	border: 0;
	border-top: 1px solid var(--pv3-linea);
	border-radius: 0;
	background: transparent;
	color: var(--pv3-texto) !important;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	flex-shrink: 0;
	transition: color 140ms ease, background 140ms ease;
}

/* El ícono de salida del plugin se pinta con `currentColor`, así que acompaña el hover solo.
   Se lo lleva al tamaño de los íconos del menú, que estaba en 0.85em (unos 11px). */
.midacta-ud .midacta-ud-topbar__logout::before {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.midacta-ud .midacta-ud-topbar__logout:hover,
.midacta-ud .midacta-ud-topbar__logout:focus {
	background: var(--pv3-rojo-bg);
	/* Rojo propio, más oscuro que `--pv3-rojo`: ese sobre `--pv3-rojo-bg` da 3,3:1 y el
	   mínimo legible para texto de este tamaño es 4,5:1. Éste da 5,4:1. El token no se toca
	   porque lo usan las tarjetas de alerta, donde va sobre blanco y sí alcanza. */
	color: #b32d38 !important;
	border-top-color: var(--pv3-linea);
}

/* =========================================================================
 * 3) BARRA SUPERIOR (inyectada) — título de sección y accesos.
 * ========================================================================= */
.midacta-ud .pv3-topbar {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 32px;
	background: #fff;
	border-bottom: 1px solid var(--pv3-linea);
	position: sticky;
	top: 0;
	z-index: 30;
}

.midacta-ud .pv3-topbar__left {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.midacta-ud .pv3-topbar__titulo {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--pv3-azul);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.midacta-ud .pv3-topbar__right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.midacta-ud .pv3-icon-btn {
	position: relative;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--pv3-texto);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease;
}

.midacta-ud .pv3-icon-btn:hover {
	background: var(--pv3-gris-bg);
	color: var(--pv3-azul);
}

.midacta-ud .pv3-icon-btn__dot {
	position: absolute;
	top: 7px;
	right: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pv3-rojo);
	border: 2px solid #fff;
}

/* Botón hamburguesa: sólo en mobile. */
.midacta-ud .pv3-menu-btn {
	display: none;
}

/* =========================================================================
 * 4) CUERPO
 * ========================================================================= */
.midacta-ud .midacta-ud-body {
	grid-column: 2;
	grid-row: 2;
	background: var(--pv3-gris-bg);
	min-width: 0;
}

.midacta-ud .midacta-ud-main {
	padding: 28px 32px 60px;
	max-width: 1320px;
	width: 100%;
	background: transparent;
}

.midacta-ud .midacta-ud-banner {
	margin: 20px 32px 0;
	border-radius: var(--pv3-r);
}

/* =========================================================================
 * 5) TARJETAS DE MÉTRICAS (inyectadas)
 * ========================================================================= */
.midacta-ud .pv3-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.midacta-ud .pv3-stat {
	/* Columna de alto completo para que las cuatro tarjetas midan igual, sea cual sea la
	   etiqueta con la que se rendericen (<a>, <button> o <div>). */
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	background: #fff;
	border: 1px solid var(--pv3-linea);
	border-radius: var(--pv3-r-lg);
	padding: 20px 22px;
	color: inherit;
	text-decoration: none;
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

/* La tarjeta puede ser <a>, <button> o <div> según a dónde lleve (ver midacta_pv3_html_stat).
   Como <button>, hay que devolverle el aspecto de bloque que el navegador le quita. */
.midacta-ud button.pv3-stat {
	width: 100%;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.midacta-ud a.pv3-stat:hover,
.midacta-ud button.pv3-stat:hover {
	transform: translateY(-2px);
	box-shadow: var(--pv3-sombra);
	border-color: var(--pv3-celeste);
}

.midacta-ud .pv3-stat__lab {
	display: block;
	margin-bottom: 10px;
}

.midacta-ud .pv3-stat__val {
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-weight: 700;
	font-size: 28px;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--pv3-azul);
}

.midacta-ud .pv3-stat__chg {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--pv3-texto);
}

.midacta-ud .pv3-stat__chg--sube {
	color: var(--pv3-verde);
}

.midacta-ud .pv3-stat__chg--baja {
	color: var(--pv3-rojo);
}

/* Mensajes sin leer: la única tarjeta que grita, y sólo cuando hay algo. */
.midacta-ud .pv3-stat--alerta {
	border-color: rgba(232, 72, 85, 0.35);
	background: linear-gradient(180deg, var(--pv3-rojo-bg) 0%, #fff 60%);
}

.midacta-ud .pv3-stat--alerta .pv3-stat__val {
	color: var(--pv3-rojo);
}

/* =========================================================================
 * 5-bis) LO QUE EL INICIO NUEVO REEMPLAZA
 *
 * El Inicio v3 muestra próxima clase, clases restantes, próximas clases, reportes y ficha del
 * profesor. Eso mismo lo venían inyectando cinco mu-plugins dentro de `.midacta-ud-grid`.
 * Sin esta regla aparecería todo dos veces en la misma pantalla.
 *
 * NO se desactivó ningún plugin: siguen cargados y sus funciones se reutilizan (de hecho, el
 * Inicio nuevo llama a varias). Sólo se oculta su salida visual.
 *
 * Para volver al Inicio anterior, borrar este bloque.
 * ========================================================================= */
.midacta-ud .midacta-chat-aviso {
	display: none;
}

/*
 * EXCEPCIÓN IMPORTANTE: la tarjeta de "ficha pendiente" NO se oculta.
 *
 * Ocultar el `.midacta-ud-grid` entero fue un error: adentro vive la tarjeta de
 * `midacta-ficha-pendiente.php`, que es **el único camino por el que el profesor llega al
 * formulario con `?appointment_id=N`**. Sin ese parámetro el reporte se guarda huérfano y no
 * se puede atribuir a ningún alumno. O sea que ocultarla no tapaba un duplicado: rompía la
 * carga de reportes.
 *
 * Por eso ahora se ocultan los hijos del grid uno por uno (que sí están duplicados en el
 * Inicio nuevo) y se deja pasar esa tarjeta.
 */
.midacta-ud .midacta-ud-home > .midacta-ud-grid {
	display: block;
	gap: 0;
}

.midacta-ud .midacta-ud-home > .midacta-ud-grid > *:not(.midacta-ficha-pendiente) {
	display: none;
}

/* La ficha pendiente es una tarea que el profesor debe, así que va arriba de todo. */
.midacta-ud .midacta-ud-home {
	display: flex;
	flex-direction: column;
}

.midacta-ud .midacta-ud-home > .midacta-ud-grid {
	order: -1;
}

.midacta-ud .midacta-ficha-pendiente {
	margin-bottom: 22px;
}

/* =========================================================================
 * 6) GRÁFICO (inyectado)
 * ========================================================================= */
.midacta-ud .pv3-chart {
	background: #fff;
	border: 1px solid var(--pv3-linea);
	border-radius: var(--pv3-r-lg);
	padding: 24px 26px;
	margin-bottom: 24px;
	box-shadow: var(--pv3-sombra-sm);
}

.midacta-ud .pv3-chart__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.midacta-ud .pv3-chart__titulo {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--pv3-azul);
}

.midacta-ud .pv3-chart__sub {
	font-size: 13px;
	color: var(--pv3-texto);
}

.midacta-ud .pv3-chart__svg {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 14px;
	overflow: visible;
}

.midacta-ud .pv3-chart__barra {
	fill: var(--pv3-celeste);
	transition: fill 160ms ease;
}

.midacta-ud .pv3-chart__col:hover .pv3-chart__barra {
	fill: var(--pv3-azul);
}

.midacta-ud .pv3-chart__barra--vacia {
	fill: var(--pv3-gris-bg2);
}

.midacta-ud .pv3-chart__mes,
.midacta-ud .pv3-chart__num {
	font-family: var(--pv3-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	fill: var(--pv3-texto);
}

.midacta-ud .pv3-chart__num {
	font-weight: 500;
	fill: var(--pv3-azul);
}

.midacta-ud .pv3-chart__vacio {
	padding: 26px 0 8px;
	text-align: center;
	font-size: 13px;
	color: var(--pv3-texto);
}

/* =========================================================================
 * 7) TARJETAS Y BOTONES EXISTENTES — se alinean con la maqueta.
 * ========================================================================= */
.midacta-ud .midacta-ud-cards {
	gap: 16px;
}

.midacta-ud .midacta-ud-card,
.midacta-ud .midacta-ud-content-card,
.midacta-ud .midacta-ud-profile-card,
.midacta-ud .midacta-ud-commission__card {
	background: #fff;
	border: 1px solid var(--pv3-linea);
	border-radius: var(--pv3-r-lg);
	box-shadow: var(--pv3-sombra-sm);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.midacta-ud .midacta-ud-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--pv3-sombra);
	border-color: var(--pv3-celeste);
}

.midacta-ud .midacta-ud-card--muted {
	opacity: 0.6;
}

.midacta-ud .midacta-ud-card--muted:hover {
	transform: none;
	box-shadow: var(--pv3-sombra-sm);
	border-color: var(--pv3-linea);
}

.midacta-ud .midacta-ud-card__title,
.midacta-ud .midacta-ud-content-card__title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--pv3-azul);
}

.midacta-ud .midacta-ud-card__cta,
.midacta-ud .midacta-ud-gc-status__btn,
.midacta-ud .midacta-ud-auth-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border: 0;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.005em;
	white-space: nowrap;
	background: var(--pv3-azul);
	color: #fff;
	cursor: pointer;
	transition: background 160ms ease, transform 160ms ease;
}

.midacta-ud .midacta-ud-card__cta:hover,
.midacta-ud .midacta-ud-gc-status__btn:hover,
.midacta-ud .midacta-ud-auth-submit:hover {
	background: var(--pv3-azul-d);
	transform: translateY(-1px);
}

/* =========================================================================
 * 8) FORMULARIOS
 * ========================================================================= */
.midacta-ud input[type="text"],
.midacta-ud input[type="email"],
.midacta-ud input[type="tel"],
.midacta-ud input[type="url"],
.midacta-ud input[type="password"],
.midacta-ud input[type="number"],
.midacta-ud select,
.midacta-ud textarea {
	border: 1.5px solid var(--pv3-linea);
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 14px;
	color: var(--pv3-azul);
	background: #fff;
	outline: 0;
	transition: border-color 150ms ease;
}

.midacta-ud input:focus,
.midacta-ud select:focus,
.midacta-ud textarea:focus {
	border-color: var(--pv3-celeste);
	box-shadow: none;
}

.midacta-ud label {
	font-size: 12px;
	font-weight: 600;
	color: var(--pv3-azul);
}

/* =========================================================================
 * 9) EMBEBIDOS (Amelia, Better Messages)
 * ========================================================================= */
.midacta-ud .midacta-ud-embed__bar {
	background: #fff;
	border-bottom: 1px solid var(--pv3-linea);
	border-radius: var(--pv3-r-lg) var(--pv3-r-lg) 0 0;
}

.midacta-ud .midacta-ud-embed {
	border: 1px solid var(--pv3-linea);
	border-radius: var(--pv3-r-lg);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--pv3-sombra-sm);
}

/* =========================================================================
 * 11) RÓTULOS E ÍCONOS DEL MENÚ
 *
 * Los íconos del panel son `<span>` vacíos que su CSS oculta (`display:none`), así que no
 * sirven. Se dibujan con `mask-image` sobre `::before`: al pintarse con `background-color:
 * currentColor`, el ícono cambia de color solo en hover y en el ítem activo, sin duplicar
 * ningún archivo ni depender de JavaScript.
 * ========================================================================= */
.midacta-ud .pv3-seccion {
	display: block;
	padding: 14px 12px 8px;
	font-family: var(--pv3-mono);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pv3-suave);
}

.midacta-ud .midacta-ud-nav__link::before {
	content: "";
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	background-color: var(--pv3-suave);
	/* Respaldo: sin `mask-image` el ::before se pinta entero y queda un cuadrado macizo. Un
	   ítem del menú que no tenga ícono propio muestra un punto neutro y no un bloque gris. */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color 140ms ease;
}

.midacta-ud .midacta-ud-nav__link:hover::before {
	background-color: var(--pv3-azul);
}

.midacta-ud .midacta-ud-nav__link--selected::before,
.midacta-ud .midacta-ud-nav__link[aria-current="page"]::before {
	background-color: var(--pv3-celeste-d);
}

.midacta-ud .midacta-ud-nav__link--inicio::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5V20a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5V20a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

.midacta-ud .midacta-ud-nav__link--calendario::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.midacta-ud .midacta-ud-nav__link--chat::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8z'/%3E%3C/svg%3E");
}

.midacta-ud .midacta-ud-nav__link--registro::before,
.midacta-ud .midacta-ud-nav__link--fichar::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}

.midacta-ud .midacta-ud-nav__link--perfil::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* Sobre los pagos → tarjeta. */
.midacta-ud .midacta-ud-nav__link--pagos::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3Cline x1='6' y1='15' x2='9' y2='15'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3Cline x1='6' y1='15' x2='9' y2='15'/%3E%3C/svg%3E");
}

/* Acuerdos y herramientas → documento firmado. */
.midacta-ud .midacta-ud-nav__link--acuerdos::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
}

/* Profesores (sólo alumnos) → grupo de personas. */
/*
 * "Mi proceso" (alumno) y "Acompañamiento Midacta" (profesor): una flecha de evolución, que es de
 * lo que habla esa pantalla. Sin esta regla el ítem quedaba con el punto genérico, porque los
 * íconos del menú se dibujan por slug y estos dos slugs son nuevos (2026-09-24).
 */
.midacta-ud .midacta-ud-nav__link--mi-proceso::before,
.midacta-ud .midacta-ud-nav__link--acompanamiento::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 17 9 11 13 15 21 7'/%3E%3Cpolyline points='15 7 21 7 21 13'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 17 9 11 13 15 21 7'/%3E%3Cpolyline points='15 7 21 7 21 13'/%3E%3C/svg%3E");
}

.midacta-ud .midacta-ud-nav__link--profesores::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* Ajustes de la plataforma (sólo administración) → controles. */
.midacta-ud .midacta-ud-nav__link--ajustes-plataforma::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E");
}

/* =========================================================================
 * 12) TARJETAS DE CONTENIDO, FILAS Y BOTONES
 * ========================================================================= */
.midacta-ud .pv3-card {
	display: block;
	background: #fff;
	border: 1px solid var(--pv3-linea);
	border-radius: var(--pv3-r-lg);
	padding: 24px 26px;
	margin-bottom: 22px;
	box-shadow: var(--pv3-sombra-sm);
}

.midacta-ud .pv3-card__h {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.midacta-ud .pv3-card__t {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--pv3-azul);
}

.midacta-ud .pv3-card__sub {
	margin-top: 3px;
	font-size: 13px;
	color: var(--pv3-texto);
}

.midacta-ud .pv3-vacio {
	margin: 0;
	padding: 26px 0 10px;
	text-align: center;
	font-size: 13px;
	color: var(--pv3-texto);
}

/* ——— Filas (clases y reportes comparten anatomía) ——— */
.midacta-ud .pv3-filas {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.midacta-ud .pv3-fila {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--pv3-linea);
	border-radius: var(--pv3-r);
	background: #fff;
	transition: border-color 160ms ease;
}

.midacta-ud .pv3-fila:hover {
	border-color: var(--pv3-celeste);
}

.midacta-ud .pv3-fecha {
	display: block;
	min-width: 62px;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--pv3-gris-bg);
	text-align: center;
}

.midacta-ud .pv3-fecha__d {
	display: block;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: var(--pv3-azul);
}

.midacta-ud .pv3-fecha__m {
	display: block;
	margin-top: 3px;
	font-family: var(--pv3-mono);
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pv3-texto);
}

.midacta-ud .pv3-fila__t {
	font-size: 14px;
	font-weight: 600;
	color: var(--pv3-azul);
}

.midacta-ud .pv3-fila__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 2px;
	font-size: 12px;
	color: var(--pv3-texto);
}

.midacta-ud .pv3-fila__acciones {
	display: flex;
	gap: 6px;
}

/* =========================================================================
 * 12-bis) TARJETAS DE CLASE
 *
 * Grilla que se reacomoda sola: con `auto-fill` y un mínimo de 262px pasa de 3 a 2 y a 1
 * columna según el ancho disponible, sin necesidad de un breakpoint por cada caso.
 * ========================================================================= */
.midacta-ud .pv3-clases {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
	gap: 14px;
}

.midacta-ud .pv3-clase {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 18px 16px;
	border: 1px solid var(--pv3-linea);
	border-radius: var(--pv3-r);
	background: #fff;
	overflow: hidden;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

/* Franja de color: deja ver el estado de un vistazo, antes de leer la píldora. */
.midacta-ud .pv3-clase::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
}

.midacta-ud .pv3-clase--ok::before {
	background: var(--pv3-verde);
}

.midacta-ud .pv3-clase--pend::before {
	background: var(--pv3-amarillo);
}

.midacta-ud .pv3-clase:hover {
	border-color: var(--pv3-celeste);
	box-shadow: var(--pv3-sombra);
	transform: translateY(-2px);
}

.midacta-ud .pv3-clase__h {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.midacta-ud .pv3-clase__fecha {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--pv3-gris-bg);
}

.midacta-ud .pv3-clase__d {
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--pv3-azul);
}

.midacta-ud .pv3-clase__m {
	margin-top: 3px;
	font-family: var(--pv3-mono);
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pv3-texto);
}

.midacta-ud .pv3-clase__cabecera {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	text-align: right;
}

.midacta-ud .pv3-clase__cuando {
	font-size: 12px;
	color: var(--pv3-suave);
}

.midacta-ud .pv3-clase__quien {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.midacta-ud .pv3-clase__av {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(145deg, #3a6bbe, #002d74);
}

.midacta-ud .pv3-clase__persona {
	min-width: 0;
}

.midacta-ud .pv3-clase__nm {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--pv3-azul);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.midacta-ud .pv3-clase__mt {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	color: var(--pv3-texto);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.midacta-ud .pv3-clase__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0;
	padding: 12px 0 0;
	list-style: none;
	border-top: 1px solid var(--pv3-linea);
}

.midacta-ud .pv3-clase__datos li {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 12px;
	color: var(--pv3-texto);
}

.midacta-ud .pv3-clase__datos svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--pv3-suave);
}

.midacta-ud .pv3-clase__acciones {
	display: flex;
	gap: 8px;
	margin-top: auto;
}

/* Los botones reparten el ancho: quedan parejos aunque uno diga "Unirse" y el otro
   "Reprogramar". */
.midacta-ud .pv3-clase__acciones .pv3-btn {
	flex: 1;
}

/* Cuando todavía no se puede entrar, el lugar del botón lo ocupa una explicación: "Se habilita
   15 min antes" / "Enlace pendiente". Ocupa el mismo espacio que ocuparía el botón —de ahí el
   flex:1 y la altura— para que la grilla de tarjetas no se desalinee según el estado de cada
   una. Deliberadamente sin borde ni fondo: tiene que leerse como texto, no como algo clickeable. */
.midacta-ud .pv3-clase__pista {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 0 8px;
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
	color: var(--pv3-suave);
}

/* =========================================================================
 * 12-ter) FORMULARIO DE SUBIDA DE REPORTES
 * ========================================================================= */
.midacta-ud .pv3-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	align-items: end;
}

.midacta-ud .pv3-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.midacta-ud .pv3-campo label {
	font-size: 12px;
	font-weight: 600;
	color: var(--pv3-azul);
}

.midacta-ud .pv3-campo__opt {
	font-weight: 400;
	color: var(--pv3-texto);
}

.midacta-ud .pv3-campo__ayuda {
	font-size: 11px;
	color: var(--pv3-suave);
}

.midacta-ud .pv3-campo input[type="file"] {
	padding: 9px 12px;
	border: 1.5px dashed var(--pv3-linea);
	border-radius: 10px;
	font-size: 13px;
	background: var(--pv3-gris-bg);
	cursor: pointer;
}

.midacta-ud .pv3-campo input[type="file"]:hover {
	border-color: var(--pv3-celeste);
}

.midacta-ud .pv3-form__acciones {
	margin: 0;
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
}

.midacta-ud .pv3-aviso {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: var(--pv3-r);
	font-size: 13px;
	font-weight: 500;
}

.midacta-ud .pv3-aviso--ok {
	background: var(--pv3-verde-bg);
	color: #0e7a4d;
}

.midacta-ud .pv3-aviso--error {
	background: var(--pv3-rojo-bg);
	color: var(--pv3-rojo);
}

/* ——— Píldoras de estado ——— */
.midacta-ud .pv3-estado {
	padding: 5px 10px;
	border-radius: 6px;
	font-family: var(--pv3-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.midacta-ud .pv3-estado--ok {
	background: var(--pv3-verde-bg);
	color: #0e7a4d;
}

.midacta-ud .pv3-estado--pend {
	background: rgba(255, 181, 72, 0.18);
	color: var(--pv3-amarillo-d);
}

.midacta-ud .pv3-estado--neutro {
	background: var(--pv3-gris-bg2);
	color: var(--pv3-texto);
}

/* ——— Botones ——— */
.midacta-ud .pv3-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border: 0;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.005em;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.midacta-ud .pv3-btn:hover {
	transform: translateY(-1px);
}

.midacta-ud .pv3-btn--sm {
	padding: 7px 12px;
	font-size: 12px;
	gap: 5px;
}

.midacta-ud .pv3-btn--celeste {
	background: var(--pv3-celeste);
	color: #fff;
}

.midacta-ud .pv3-btn--celeste:hover {
	background: var(--pv3-celeste-d);
}

.midacta-ud .pv3-btn--outline {
	background: transparent;
	color: var(--pv3-azul);
	border: 1.5px solid var(--pv3-linea);
}

.midacta-ud .pv3-btn--outline:hover {
	border-color: var(--pv3-azul);
	background: var(--pv3-gris-bg);
}

/* ——— Grilla inferior ——— */
.midacta-ud .pv3-grid {
	display: grid;
	grid-template-columns: 1.5fr minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}

.midacta-ud .pv3-grid > .pv3-card {
	margin-bottom: 0;
}

/* ——— Personas (profesor / alumnos) ——— */
.midacta-ud .pv3-persona {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
	color: inherit;
	text-decoration: none;
}

.midacta-ud .pv3-persona__av {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	flex-shrink: 0;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(145deg, #3a6bbe, #002d74);
}

.midacta-ud .pv3-persona__av--alumno {
	background: linear-gradient(145deg, #7ddff5, #00b2e3);
}

.midacta-ud .pv3-persona__nm {
	font-size: 16px;
	font-weight: 700;
	color: var(--pv3-azul);
}

.midacta-ud .pv3-persona__mt {
	margin-top: 2px;
	font-size: 13px;
	color: var(--pv3-texto);
}

.midacta-ud .pv3-persona__acciones {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.midacta-ud .pv3-persona__acciones .pv3-btn {
	flex: 1;
}

.midacta-ud .pv3-personas {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.midacta-ud .pv3-persona--fila {
	margin-bottom: 0;
	padding: 8px;
	border-radius: 10px;
	transition: background 140ms ease;
}

.midacta-ud .pv3-persona--fila:hover {
	background: var(--pv3-gris-bg);
}

.midacta-ud .pv3-persona--fila .pv3-persona__av {
	width: 38px;
	height: 38px;
	font-size: 14px;
}

.midacta-ud .pv3-persona--fila .pv3-persona__nm {
	font-size: 14px;
}

.midacta-ud .pv3-persona__datos {
	min-width: 0;
}

.midacta-ud .pv3-persona--fila .pv3-persona__mt {
	margin-top: 0;
	font-size: 12px;
}

/* Sufijo de las métricas ("/10", "hs", la hora de la próxima clase). */
.midacta-ud .pv3-stat__sup {
	font-size: 14px;
	font-weight: 600;
	color: var(--pv3-texto);
	vertical-align: baseline;
	top: 0;
}

/* =========================================================================
 * 10) RESPONSIVE
 * ========================================================================= */
@media (max-width: 1100px) {
	.midacta-ud .pv3-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.midacta-ud .pv3-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.midacta-ud .pv3-grid > .pv3-card {
		margin-bottom: 22px;
	}
}

@media (max-width: 782px) {
	/* El sidebar sale del flujo y se abre por encima. */
	.midacta-ud .midacta-ud-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
	}

	.midacta-ud .midacta-ud-topbar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: 280px;
		height: 100%;
		transform: translateX(-100%);
		transition: transform 250ms ease;
		z-index: 120;
	}

	.midacta-ud .midacta-ud-layout.pv3-abierto .midacta-ud-topbar {
		transform: translateX(0);
		box-shadow: var(--pv3-sombra-lg);
	}

	.midacta-ud .pv3-topbar,
	.midacta-ud .midacta-ud-body {
		grid-column: 1;
	}

	.midacta-ud .pv3-topbar {
		padding: 12px 18px;
	}

	.midacta-ud .pv3-menu-btn {
		display: flex;
	}

	.midacta-ud .midacta-ud-main {
		padding: 20px 18px 50px;
	}

	.midacta-ud .midacta-ud-banner {
		margin: 16px 18px 0;
	}

	/* Velo que apaga el fondo mientras el menú está abierto. */
	.midacta-ud .pv3-velo {
		position: fixed;
		inset: 0;
		background: rgba(0, 30, 85, 0.5);
		backdrop-filter: blur(2px);
		z-index: 110;
		border: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity 250ms ease, visibility 250ms ease;
	}

	.midacta-ud .midacta-ud-layout.pv3-abierto .pv3-velo {
		opacity: 1;
		visibility: visible;
	}

	.midacta-ud .pv3-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.midacta-ud .pv3-stat {
		padding: 14px 16px;
	}

	.midacta-ud .pv3-stat__val {
		font-size: 22px;
	}

	.midacta-ud .pv3-chart {
		padding: 18px;
	}

	/* En pantallas chicas los objetivos táctiles no bajan de 44px. */
	.midacta-ud .midacta-ud-nav__link,
	.midacta-ud .midacta-ud-card__cta,
	.midacta-ud .pv3-btn {
		min-height: 44px;
	}

	.midacta-ud .pv3-card {
		padding: 18px;
	}

	/*
	 * Las filas pasan a dos líneas: fecha + info arriba, estado y acciones abajo. Mantener
	 * cuatro columnas en un teléfono dejaría los botones ilegibles.
	 */
	.midacta-ud .pv3-fila {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 10px;
	}

	.midacta-ud .pv3-fila .pv3-estado,
	.midacta-ud .pv3-fila__acciones {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}

	.midacta-ud .pv3-estado {
		justify-self: start;
	}
}

/* En escritorio el velo nunca existe. */
@media (min-width: 783px) {
	.midacta-ud .pv3-velo {
		display: none;
	}
}

/* Respeta a quien pidió menos movimiento en el sistema operativo. */
@media (prefers-reduced-motion: reduce) {
	.midacta-ud .midacta-ud-topbar,
	.midacta-ud .midacta-ud-card,
	.midacta-ud .pv3-stat,
	.midacta-ud .pv3-velo {
		transition: none;
	}

	.midacta-ud .midacta-ud-card:hover,
	.midacta-ud a.pv3-stat:hover {
		transform: none;
	}
}

/* ——— Listado de alumnos: buscador y scroll ——————————————————————————————
 * La lista viene completa desde PHP; acá sólo se acota su alto para que la tarjeta no
 * crezca sin control y se le da un scroll propio. El buscador filtra en el navegador.
 */
.midacta-ud .pv3-buscador {
	position: relative;
	margin-bottom: 12px;
}

.midacta-ud .pv3-buscador__ico {
	position: absolute;
	top: 50%;
	left: 12px;
	width: 15px;
	height: 15px;
	transform: translateY(-50%);
	color: var(--pv3-texto);
	pointer-events: none;
}

.midacta-ud .pv3-buscador__campo {
	width: 100%;
	margin: 0;
	padding: 9px 12px 9px 34px;
	border: 1px solid var(--pv3-linea);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	font-size: 13px;
	line-height: 1.4;
	color: var(--pv3-azul);
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.midacta-ud .pv3-buscador__campo::placeholder {
	color: var(--pv3-texto);
	opacity: 0.75;
}

.midacta-ud .pv3-buscador__campo:focus {
	outline: none;
	border-color: var(--pv3-celeste);
	box-shadow: 0 0 0 3px rgba(0, 178, 227, 0.16);
}

/* Cruz de limpiar de Safari/Chrome: sin esto queda pisada por el padding. */
.midacta-ud .pv3-buscador__campo::-webkit-search-cancel-button {
	cursor: pointer;
}

.midacta-ud .pv3-personas--scroll {
	max-height: 336px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--pv3-linea) transparent;
}

.midacta-ud .pv3-personas--scroll::-webkit-scrollbar {
	width: 6px;
}

.midacta-ud .pv3-personas--scroll::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: var(--pv3-linea);
}

.midacta-ud .pv3-personas--scroll::-webkit-scrollbar-track {
	background: transparent;
}

/* `hidden` por sí solo no alcanza: las clases de arriba fijan `display` y le ganan. */
.midacta-ud .pv3-persona[hidden],
.midacta-ud .pv3-personas[hidden],
.midacta-ud .pv3-buscador[hidden],
.midacta-ud .pv3-vacio[hidden] {
	display: none;
}

/* =========================================================================
 * 15) BLINDAJE CONTRA EL CSS GLOBAL DE BOTONES
 *
 * El sitio define en el Customizer (bloque `wp-custom-css`, que se imprime DESPUÉS de esta
 * hoja) estilos para TODO <button> de la página:
 *
 *     [type=button], [type=submit], button { background-color:#002D74; color:#fff;
 *                                            padding:.5rem 1rem; margin-bottom:20px }
 *     [type=button]:hover, button:hover     { background-color:#0040a0; color:#fff }
 *
 * `[type=button]:hover` pesa lo mismo que `.midacta-ud .pv3-stat` (0,2,0): al empatar gana el
 * que va después, y el del Customizer va después. De ahí salían tres síntomas que parecían
 * no tener relación:
 *
 *   · la tarjeta "Próxima clase" —la única de las cuatro que se rendería como <button>—
 *     quedaba 20px más baja que las otras, por el `margin-bottom` heredado;
 *   · al pasar el mouse esa tarjeta se pintaba de azul y el número, que sigue siendo azul
 *     oscuro, quedaba ilegible encima;
 *   · "Reprogramar" pasaba a texto blanco sobre su propio fondo gris claro.
 *
 * Se declara acá lo nuestro con un selector de tipo extra (`button.`), para ganar por
 * especificidad y no por orden de carga. NO se toca el CSS del Customizer: es del cliente y
 * lo usa el resto del sitio.
 * ========================================================================= */
.midacta-ud button.pv3-stat,
.midacta-ud button.pv3-btn,
.midacta-ud button.pv3-icon-btn,
.midacta-ud button.pv3-velo {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* Tarjeta de métrica: el fondo y el texto no cambian por ser <button>. */
.midacta-ud button.pv3-stat,
.midacta-ud button.pv3-stat:hover,
.midacta-ud button.pv3-stat:focus {
	background: #fff;
	color: inherit;
}

.midacta-ud button.pv3-stat--alerta,
.midacta-ud button.pv3-stat--alerta:hover,
.midacta-ud button.pv3-stat--alerta:focus {
	background: linear-gradient(180deg, var(--pv3-rojo-bg) 0%, #fff 60%);
}

/* Cada variante de botón manda sobre su propio color en reposo, hover y foco. */
.midacta-ud button.pv3-btn--outline,
.midacta-ud button.pv3-btn--outline:focus {
	background: transparent;
	color: var(--pv3-azul);
}

.midacta-ud button.pv3-btn--outline:hover {
	background: var(--pv3-gris-bg);
	border-color: var(--pv3-azul);
	color: var(--pv3-azul);
}

.midacta-ud button.pv3-btn--celeste,
.midacta-ud button.pv3-btn--celeste:focus {
	background: var(--pv3-celeste);
	color: #fff;
}

.midacta-ud button.pv3-btn--celeste:hover {
	background: var(--pv3-celeste-d);
	color: #fff;
}

.midacta-ud button.pv3-icon-btn,
.midacta-ud button.pv3-icon-btn:focus {
	background: transparent;
	color: var(--pv3-texto);
}

.midacta-ud button.pv3-icon-btn:hover {
	background: var(--pv3-gris-bg);
	color: var(--pv3-azul);
}

/* El velo del menú sólo existe en mobile; ahí también hay que sostenerle el color, porque un
   toque deja el estado :hover pegado y la pantalla entera se pintaría de azul. */
@media (max-width: 782px) {
	.midacta-ud button.pv3-velo,
	.midacta-ud button.pv3-velo:hover,
	.midacta-ud button.pv3-velo:focus {
		background: rgba(0, 30, 85, 0.5);
	}
}

/* =========================================================================
 * Botón hamburguesa más visible en mobile (feedback del cliente, 2026-09-10)
 *
 * Antes era un ícono gris sobre fondo transparente y no se identificaba como menú. Ahora es
 * un círculo azul de la marca con el ícono en blanco (el <svg> usa currentColor).
 *
 * El selector lleva las DOS clases (.pv3-icon-btn.pv3-menu-btn) para ganarle por
 * especificidad a `.midacta-ud button.pv3-icon-btn` —y a sus :focus/:hover—, que lo dejan
 * transparente. :hover repite el mismo azul: en pantallas táctiles el estado queda pegado
 * después de tocar, y no tiene que cambiar de color.
 * ========================================================================= */
@media (max-width: 782px) {
	.midacta-ud button.pv3-icon-btn.pv3-menu-btn,
	.midacta-ud button.pv3-icon-btn.pv3-menu-btn:focus,
	.midacta-ud button.pv3-icon-btn.pv3-menu-btn:hover {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--pv3-azul);
		color: #fff;
		box-shadow: 0 2px 6px rgba(0, 45, 116, 0.25);
	}

	.midacta-ud button.pv3-icon-btn.pv3-menu-btn:focus-visible {
		outline: 2px solid var(--pv3-celeste);
		outline-offset: 2px;
	}
}

/* ——————————————————————————————————————————————————————————————
 * Feedback del cliente del 2026-09-24 — ajustes de celular.
 * —————————————————————————————————————————————————————————————— */

@media (max-width: 782px) {

	/*
	 * Se veían tres clases y el bloque frenaba el scroll de la pantalla. Se muestran dos: no se
	 * pierde nada, "Ver todas" sigue llevando a "Mis clases".
	 */
	.midacta-ud .pv3-clases > .pv3-clase:nth-child(n + 3) {
		display: none;
	}

	/*
	 * En el panel del profesor, "Tus alumnos" va antes que "Últimos reportes pedagógicos".
	 * En escritorio el orden no cambia: son dos columnas.
	 */
	.midacta-ud .pv3-grid {
		display: flex;
		flex-direction: column;
	}

	.midacta-ud .pv3-grid > .pv3-alumnos {
		order: -1;
	}
}

/* Botón "Ver mi perfil como lo ven los alumnos", arriba del formulario de "Mi perfil". */
.midacta-ud .pv3-verperfil {
	margin: 0 0 14px;
}

/*
 * "Quiere trabajar": lo que la familia escribió al reservar esa clase. Sólo lo ve el profesor
 * (ver midacta_pv3_html_tarjeta_clase). Pedido del cliente del 2026-10-02.
 */
.midacta-ud .pv3-clase__pedido {
	margin: 0 0 10px;
	padding: 8px 10px;
	background: var(--pv3-celeste-bg, #eef3fe);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--pv3-tinta, #0f2436);
}

/* --------------------------------------------------------------------------
 * Informes del Inicio y lista de profesores — feedback del cliente 2026-10-07
 * -------------------------------------------------------------------------- */

/* El cliente contó hasta 4 informes en el celular: quiere 2 ahí y 4 en computadora.
   Las filas vienen de dos listas (documentos y encuestas), así que el número de cada
   una lo pone PHP al armarlas (midacta_pv3_marcar_filas) y acá sólo se esconden. */
.pv3-fila--oculta { display: none !important; }

@media (max-width: 782px) {
	.pv3-fila--desde-escritorio { display: none !important; }
}

/* El lateral del alumno ahora lista a todos sus profesores: hace falta separarlos. */
.pv3-profe + .pv3-profe {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #e8edf3;
}