/* =========================================================================
   Protegetumesa Learning Platform v3.0
   Tipografia grande y botones amplios: los usuarios son profesoras +50.
   ====================================================================== */

/* El theme de WordPress suele encerrar el contenido en una columna angosta.
   En las paginas del plugin ensanchamos ese contenedor para que el panel
   pueda respirar. Solo afecta a estas paginas, no al resto del sitio. */
body.ptm-page .entry-content,
body.ptm-page .wp-block-post-content,
body.ptm-page .page-content,
body.ptm-page .site-main,
body.ptm-page .site-content,
body.ptm-page .content-area,
body.ptm-page .wp-site-blocks,
body.ptm-page .hentry,
body.ptm-page #content,
body.ptm-page #primary,
body.ptm-page main,
body.ptm-page article,
body.ptm-page .entry-content > *:not(.ptm-container),
body.ptm-page .wp-block-post-content > *:not(.ptm-container) {
	max-width: none !important;
	width: auto !important;
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Hello Elementor (y casi todos los themes) imprimen el titulo de la pagina
   arriba del contenido. Como el panel ya trae su propia cabecera azul con el
   titulo, quedaba repetido dos veces. Lo ocultamos solo en estas paginas. */
body.ptm-page .page-header,
body.ptm-page > .site-main > .entry-title,
body.ptm-page .site-main > header.entry-header {
	display: none;
}

/* Elementor puede aplicar tipografia global a los botones desde Ajustes del
   sitio (mayusculas, espaciado, otra fuente) con selectores mas fuertes que
   los nuestros. Reafirmamos solo lo que descolocaria el diseno; el tamano y
   el espaciado los siguen manejando las reglas normales y las media queries. */
.ptm-container .ptm-btn,
.ptm-container .ptm-input {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}


/* Ancho real del panel. Va con !important a proposito: los themes de bloques
   (Twenty Twenty-Four, Twenty Twenty-Five) limitan el ancho de todo lo que
   cuelga del contenido con una regla de igual especificidad que la nuestra,
   y como sus estilos globales se imprimen despues, ganaban ellos. */
body.ptm-page .ptm-container {
	width: 100% !important;
	max-width: 1800px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 782px) {
	body.ptm-page .ptm-container {
		max-width: 100% !important;
	}
}

/* Si la pagina se construye con Elementor y el shortcode del panel se
   inserta con el widget "Shortcode", el widget no debe recortar el ancho. */
body.ptm-page .elementor-widget-shortcode,
body.ptm-page .elementor-shortcode {
	width: 100%;
	max-width: none;
}

.ptm-container {
	--ptm-primary: #0069d9;
	--ptm-primary-dark: #004a99;
	--ptm-green: #1a7f37;
	--ptm-red: #b32d2e;
	--ptm-amber: #b8860b;
	--ptm-border: #e0e4e8;
	--ptm-bg-soft: #f6f8fb;

	/* Contenedor centrado. Ocupa todo el ancho disponible hasta un maximo
	   comodo de lectura y despues se centra solo con margenes automaticos.
	   NO usamos 100vw: esa unidad incluye el ancho de la barra de scroll,
	   asi que en desktop el bloque terminaba unos pixeles mas ancho que la
	   ventana y todo se veia corrido hacia un costado. */
	width: 100%;
	max-width: 1800px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px clamp(16px, 4vw, 72px) 70px;
	box-sizing: border-box;
	color: #2b2b2b;
	font-size: 17px;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.ptm-container *,
.ptm-container *::before,
.ptm-container *::after {
	box-sizing: border-box;
}

.ptm-container img,
.ptm-container video,
.ptm-container iframe,
.ptm-container table {
	max-width: 100%;
}

/* ---------- Cabecera ---------- */

.ptm-header {
	background: linear-gradient(135deg, var(--ptm-primary) 0%, var(--ptm-primary-dark) 100%);
	color: #fff;
	padding: 34px 28px;
	border-radius: 12px;
	margin-bottom: 22px;
	text-align: center;
}

.ptm-header h1 {
	margin: 0 0 8px;
	font-size: 30px;
	color: #fff;
	line-height: 1.2;
}

.ptm-header p {
	margin: 4px 0 0;
	opacity: .93;
	font-size: 17px;
}

.ptm-header a {
	color: #fff;
	text-decoration: underline;
}

/* ---------- Navegacion ---------- */

.ptm-nav {
	display: flex;
	gap: 8px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}

.ptm-nav-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 20px;
	border-radius: 8px;
	background: var(--ptm-bg-soft);
	border: 1px solid var(--ptm-border);
	color: #33475b;
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	white-space: nowrap;
}

.ptm-nav-item:hover {
	background: #e8eef7;
	color: var(--ptm-primary-dark);
}

.ptm-nav-active {
	background: var(--ptm-primary);
	border-color: var(--ptm-primary);
	color: #fff;
}

.ptm-nav-active:hover {
	background: var(--ptm-primary-dark);
	color: #fff;
}

.ptm-nav-logout {
	margin-left: auto;
}

/* ---------- Migas ---------- */

.ptm-breadcrumb {
	margin-bottom: 18px;
	font-size: 15px;
	color: #66707a;
}

.ptm-breadcrumb a {
	color: var(--ptm-primary);
}

.ptm-breadcrumb .ptm-sep {
	margin: 0 4px;
	color: #aeb6be;
}

/* ---------- Tarjetas ---------- */

.ptm-card {
	background: #fff;
	border: 1px solid var(--ptm-border);
	border-radius: 12px;
	padding: 26px;
	margin-bottom: 22px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.ptm-card h2 {
	margin: 0 0 18px;
	font-size: 22px;
	color: var(--ptm-primary-dark);
	border-bottom: 2px solid #eaf1fa;
	padding-bottom: 12px;
}

/* Titulo de tarjeta + boton de accion principal, uno al lado del otro en
   desktop y apilados en mobile. */
.ptm-card-head-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.ptm-card-head-row h2 {
	margin-bottom: 0;
	border-bottom: none;
	padding-bottom: 0;
	flex: 1 1 auto;
}

.ptm-card-head-row .ptm-btn {
	flex-shrink: 0;
}

@media (max-width: 480px) {
	.ptm-card-head-row .ptm-btn {
		width: 100%;
	}
}

.ptm-card h3 {
	font-size: 18px;
	margin: 22px 0 12px;
}

.ptm-subcard {
	background: var(--ptm-bg-soft);
	border: 1px solid var(--ptm-border);
	border-radius: 10px;
	padding: 22px;
	margin-top: 24px;
}

.ptm-subcard h3 {
	margin-top: 0;
}

.ptm-group-title {
	font-size: 17px;
	color: var(--ptm-primary-dark);
	margin: 22px 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px dashed var(--ptm-border);
}

.ptm-hint {
	font-size: 15px;
	color: #5c6670;
	margin: 0 0 14px;
}

.ptm-empty {
	color: #78828c;
	font-style: italic;
	margin: 8px 0 16px;
}

.ptm-danger-zone {
	border-color: #f3c9c9;
	background: #fffafa;
}

.ptm-danger-zone h2 {
	color: var(--ptm-red);
	border-bottom-color: #f7dcdc;
}

/* Tarjeta "de accion": para que se note de un vistazo donde se crea algo
   nuevo (un curso, una clase, un modulo, un examen), en vez de que se
   confunda con el resto de las tarjetas blancas de la pagina. */
.ptm-card-action {
	background: #eef6ff;
	border: 2px solid #bfdcfb;
}

.ptm-card-action h2 {
	color: var(--ptm-primary-dark);
	border-bottom-color: #bfdcfb;
}

.ptm-card-action > .ptm-form,
.ptm-card-action > .ptm-hint {
	max-width: 720px;
}

/* Mismo criterio para los formularios de "agregar" que cuelgan dentro de
   una tarjeta ya existente (agregar modulo, agregar clase). */
.ptm-subcard-action {
	background: #eef6ff;
	border-color: #bfdcfb;
}

.ptm-subcard-action h3 {
	color: var(--ptm-primary-dark);
}

/* ---------- Estadisticas ---------- */

.ptm-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 22px;
}

.ptm-stat {
	background: #fff;
	border: 1px solid var(--ptm-border);
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	color: #2b2b2b;
	display: block;
}

.ptm-stat:hover {
	border-color: var(--ptm-primary);
}

.ptm-stat-alert {
	border-color: var(--ptm-amber);
	background: #fffdf5;
}

.ptm-stat-number {
	display: block;
	font-size: 34px;
	font-weight: 700;
	color: var(--ptm-primary-dark);
	line-height: 1.1;
}

.ptm-stat-label {
	display: block;
	font-size: 15px;
	color: #5c6670;
	margin-top: 4px;
}

/* ---------- Grilla de cursos ---------- */

.ptm-course-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	margin-bottom: 18px;
}

.ptm-course-card {
	display: block;
	background: var(--ptm-bg-soft);
	border: 1px solid var(--ptm-border);
	border-radius: 10px;
	padding: 18px;
	text-decoration: none;
	color: #2b2b2b;
}

.ptm-course-card:hover {
	border-color: var(--ptm-primary);
	background: #eef4fc;
}

.ptm-course-card h3 {
	margin: 10px 0 6px;
	font-size: 18px;
	color: var(--ptm-primary-dark);
}

.ptm-course-card p {
	margin: 0;
	font-size: 14px;
	color: #5c6670;
}

.ptm-student-course {
	background: #fff;
	border: 1px solid var(--ptm-border);
	border-radius: 12px;
	padding: 22px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.ptm-student-course-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	flex-wrap: wrap;
}

.ptm-student-course h3 {
	margin: 0;
	font-size: 20px;
	color: var(--ptm-primary-dark);
}

.ptm-course-desc {
	font-size: 15px;
	color: #5c6670;
}

.ptm-course-grid-student {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* ---------- Listas ---------- */

.ptm-list {
	border: 1px solid var(--ptm-border);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 16px;
}

.ptm-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--ptm-border);
	background: #fff;
	flex-wrap: wrap;
}

.ptm-list-item:last-child {
	border-bottom: none;
}

.ptm-list-item:nth-child(even) {
	background: #fbfcfe;
}

.ptm-list-main {
	flex: 1 1 260px;
	min-width: 0;
}

.ptm-list-main strong {
	display: block;
	font-size: 16px;
}

.ptm-list-main small {
	display: block;
	color: #6a747e;
	font-size: 14px;
	margin-top: 2px;
}

.ptm-list-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.ptm-inline-form {
	display: inline;
	margin: 0;
}

.ptm-option-preview {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	font-size: 14px;
}

.ptm-option-preview li {
	color: #6a747e;
	padding: 1px 0;
}

.ptm-option-preview .ptm-opt-correct {
	color: var(--ptm-green);
	font-weight: 600;
}

/* ---------- Tablas ---------- */

.ptm-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ptm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.ptm-table th {
	background: var(--ptm-bg-soft);
	text-align: left;
	padding: 14px 12px;
	font-weight: 700;
	color: var(--ptm-primary-dark);
	border-bottom: 2px solid #d7e3f2;
	white-space: nowrap;
}

.ptm-table td {
	padding: 14px 12px;
	border-bottom: 1px solid #ececec;
	vertical-align: top;
}

.ptm-table tbody tr:hover {
	background: #fafcff;
}

.ptm-table small {
	color: #6a747e;
	font-size: 14px;
}

.ptm-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: flex-start;
}

.ptm-actions form {
	margin: 0;
}

/* Formulario de "Aprobar" con el selector de curso al lado del boton. */
.ptm-actions form:has(.ptm-input-course-pick) {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ptm-input-course-pick {
	width: auto;
	min-width: 190px;
}

@media (max-width: 480px) {
	.ptm-actions form:has(.ptm-input-course-pick) {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.ptm-input-course-pick {
		width: 100%;
	}
}

/* Mini formulario de "Asignar otro curso" dentro de una celda de tabla. */
.ptm-details-compact {
	margin-top: 6px;
}

.ptm-details-compact > summary {
	padding: 6px 0;
	font-size: 14px;
}

.ptm-details-compact .ptm-form {
	padding: 8px 0 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ptm-details-compact .ptm-input {
	width: auto;
	min-width: 170px;
}

/* ---------- Badges ---------- */

.ptm-badge {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 700;
	background: #eceff2;
	color: #55606a;
	white-space: nowrap;
}

.ptm-badge-pending {
	background: #fff3cd;
	color: #7a5b00;
}

.ptm-badge-approved {
	background: #d7f2dd;
	color: var(--ptm-green);
}

.ptm-badge-rejected {
	background: #fbdcdc;
	color: var(--ptm-red);
}

.ptm-state-passed {
	background: #d7f2dd;
	color: var(--ptm-green);
}

.ptm-state-failed {
	background: #fbdcdc;
	color: var(--ptm-red);
}

.ptm-state-pending_review {
	background: #fff3cd;
	color: #7a5b00;
}

.ptm-state-in_progress,
.ptm-state-completed {
	background: #dbe9fb;
	color: var(--ptm-primary-dark);
}

/* ---------- Formularios ---------- */

/* Los formularios se limitan a un ancho legible, pero centrados dentro de
   la tarjeta: si quedaran pegados a la izquierda de una tarjeta ancha, la
   pantalla se ve desbalanceada. */
.ptm-form {
	width: 100%;
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}

.ptm-form-group {
	margin-bottom: 20px;
}

.ptm-form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 18px;
}

.ptm-form-group label {
	display: block;
	margin-bottom: 7px;
	font-weight: 600;
	font-size: 16px;
}

.ptm-input {
	width: 100%;
	padding: 13px 15px;
	border: 2px solid #d6dade;
	border-radius: 8px;
	font-size: 17px;
	font-family: inherit;
	background: #fff;
	color: #2b2b2b;
}

textarea.ptm-input {
	line-height: 1.5;
	resize: vertical;
}

.ptm-input-small {
	max-width: 140px;
}

.ptm-input:focus {
	outline: none;
	border-color: var(--ptm-primary);
	box-shadow: 0 0 0 3px rgba(0, 105, 217, .12);
}

.ptm-form-group small {
	display: block;
	margin-top: 6px;
	color: #6a747e;
	font-size: 14px;
	line-height: 1.45;
}

.ptm-radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 22px;
	font-weight: 400;
	cursor: pointer;
}

.ptm-radio input {
	width: 20px;
	height: 20px;
}

.ptm-filter-form {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
}

.ptm-filter-form label {
	font-weight: 600;
}

.ptm-filter-form .ptm-input {
	width: auto;
	min-width: 240px;
}

.ptm-details {
	margin-top: 18px;
	border: 1px solid var(--ptm-border);
	border-radius: 10px;
	padding: 0;
	background: var(--ptm-bg-soft);
}

.ptm-details > summary {
	cursor: pointer;
	padding: 15px 18px;
	font-weight: 700;
	color: var(--ptm-primary-dark);
	font-size: 16px;
	list-style: none;
}

.ptm-details > summary::before {
	content: '+ ';
	font-weight: 700;
}

.ptm-details[open] > summary::before {
	content: '\2212 ';
}

.ptm-details[open] > summary {
	border-bottom: 1px solid var(--ptm-border);
	margin-bottom: 18px;
}

.ptm-details .ptm-form {
	padding: 0 18px 18px;
}

/* Opciones de respuesta en el editor de preguntas */

.ptm-option-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.ptm-option-mark input {
	width: 22px;
	height: 22px;
	cursor: pointer;
}

/* Los campos se muestran/ocultan segun el tipo elegido (lo hace el JS). */
.ptm-qfield {
	display: none;
}

.ptm-qfield.ptm-visible {
	display: block;
}

.ptm-hint-single,
.ptm-hint-multiple {
	display: none;
}

/* ---------- Botones ---------- */

.ptm-btn {
	display: inline-block;
	padding: 13px 22px;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background .2s ease;
	min-height: 48px;
	line-height: 1.4;
}

.ptm-btn-primary {
	background: var(--ptm-primary);
	color: #fff;
	width: 100%;
	max-width: 780px;
	font-size: 18px;
	padding: 15px 24px;
}

.ptm-btn-primary:hover {
	background: var(--ptm-primary-dark);
	color: #fff;
}

.ptm-btn-inline {
	width: auto;
	max-width: none;
	font-size: 16px;
	padding: 13px 22px;
}

.ptm-btn-secondary {
	background: #5a636c;
	color: #fff;
	width: auto;
}

.ptm-btn-secondary:hover {
	background: #414951;
	color: #fff;
}

.ptm-btn-approve {
	background: var(--ptm-green);
	color: #fff;
	width: auto;
}

.ptm-btn-approve:hover {
	background: #14622b;
	color: #fff;
}

.ptm-btn-reject {
	background: var(--ptm-red);
	color: #fff;
	width: auto;
}

.ptm-btn-reject:hover {
	background: #8b2223;
	color: #fff;
}

.ptm-btn-small {
	padding: 8px 14px;
	font-size: 14px;
	min-height: 40px;
	width: auto;
}

.ptm-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ptm-border);
	border-radius: 8px;
	background: #fff;
	color: #55606a;
	text-decoration: none;
	font-size: 18px;
	cursor: pointer;
	line-height: 1;
}

.ptm-icon-btn:hover {
	border-color: var(--ptm-primary);
	color: var(--ptm-primary);
}

.ptm-icon-danger:hover {
	border-color: var(--ptm-red);
	color: var(--ptm-red);
}

.ptm-quicklinks {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

/* ---------- Avisos ---------- */

.ptm-success,
.ptm-error,
.ptm-info-box {
	padding: 16px 20px;
	border-radius: 8px;
	margin-bottom: 20px;
	font-size: 16px;
}

.ptm-success {
	background: #e6f6ea;
	color: #14622b;
	border-left: 4px solid var(--ptm-green);
}

.ptm-error {
	background: #fdeaea;
	color: #8b2223;
	border-left: 4px solid var(--ptm-red);
}

.ptm-info-box {
	background: #f0f6ff;
	border-left: 4px solid var(--ptm-primary);
	color: #24435f;
}

.ptm-info-box h3 {
	margin: 0 0 8px;
	font-size: 17px;
	color: var(--ptm-primary-dark);
}

.ptm-info-box ol,
.ptm-info-box ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

.ptm-info-box li {
	margin: 5px 0;
}

.ptm-info-box p:last-child {
	margin-bottom: 0;
}

.ptm-locked {
	background: var(--ptm-bg-soft);
	border-left: 4px solid #aeb6be;
	padding: 14px 18px;
	border-radius: 8px;
	color: #55606a;
	font-size: 15px;
}

.ptm-credentials-box {
	background: #fffbe8;
	border: 2px dashed var(--ptm-amber);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
}

.ptm-credentials-box h4 {
	margin: 0 0 12px;
	font-size: 17px;
}

.ptm-credentials-box p {
	margin: 6px 0;
}

.ptm-credentials-box code {
	background: rgba(0, 0, 0, .07);
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 16px;
	word-break: break-all;
}

/* ---------- Barra de progreso ---------- */

.ptm-progress {
	background: #e6eaef;
	border-radius: 20px;
	height: 12px;
	overflow: hidden;
	margin: 8px 0 4px;
	min-width: 110px;
}

.ptm-progress-big {
	height: 20px;
}

.ptm-progress-bar {
	background: linear-gradient(90deg, var(--ptm-primary) 0%, var(--ptm-green) 100%);
	height: 100%;
	border-radius: 20px;
	transition: width .3s ease;
}

.ptm-progress-label {
	font-size: 15px;
	color: #5c6670;
	margin: 4px 0 14px;
}

/* ---------- Lista de clases del alumno ---------- */

.ptm-lesson-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	counter-reset: none;
	border: 1px solid var(--ptm-border);
	border-radius: 10px;
	overflow: hidden;
}

.ptm-lesson-list li {
	border-bottom: 1px solid var(--ptm-border);
}

.ptm-lesson-list li:last-child {
	border-bottom: none;
}

.ptm-lesson-list a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	text-decoration: none;
	color: #2b2b2b;
	background: #fff;
}

.ptm-lesson-list a:hover {
	background: #f2f7fd;
}

.ptm-lesson-check {
	font-size: 20px;
	color: #b6bec6;
	width: 24px;
	flex-shrink: 0;
}

.ptm-lesson-done .ptm-lesson-check {
	color: var(--ptm-green);
}

.ptm-lesson-done .ptm-lesson-title {
	color: #66707a;
}

.ptm-lesson-title {
	flex: 1;
	font-weight: 600;
}

.ptm-lesson-type {
	font-size: 13px;
	color: #78828c;
	white-space: nowrap;
}

.ptm-exam-summary {
	list-style: none;
	margin: 12px 0;
	padding: 0;
	font-size: 15px;
}

.ptm-exam-summary li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px dashed var(--ptm-border);
}

.ptm-exam-mini {
	margin-bottom: 6px;
	font-size: 14px;
}

/* ---------- Vista de una clase ---------- */

.ptm-video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 10px;
	background: #000;
	margin-bottom: 20px;
}

.ptm-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ptm-pdf-frame {
	border: 1px solid var(--ptm-border);
	border-radius: 10px;
	overflow: hidden;
	height: 640px;
	margin-bottom: 20px;
}

.ptm-pdf-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.ptm-lesson-content {
	font-size: 18px;
	line-height: 1.75;
}

.ptm-lesson-content p {
	margin: 0 0 1em;
}

.ptm-lesson-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* ---------- Examen ---------- */

.ptm-timer {
	position: sticky;
	top: 0;
	z-index: 20;
	background: #fff3cd;
	border: 2px solid var(--ptm-amber);
	border-radius: 10px;
	padding: 12px 18px;
	margin-bottom: 18px;
	text-align: center;
	font-size: 17px;
	color: #6d5200;
}

.ptm-timer-value {
	font-size: 22px;
	font-variant-numeric: tabular-nums;
}

.ptm-timer-urgent {
	background: #fbdcdc;
	border-color: var(--ptm-red);
	color: var(--ptm-red);
}

.ptm-question {
	border: 1px solid var(--ptm-border);
	border-radius: 10px;
	padding: 22px;
	margin-bottom: 20px;
	background: #fff;
}

.ptm-question h3 {
	margin: 0 0 6px;
	font-size: 18px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	line-height: 1.45;
}

.ptm-question-number {
	background: var(--ptm-primary);
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.ptm-question-points {
	font-size: 14px;
	color: #78828c;
	margin: 0 0 14px 44px;
}

.ptm-answer-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ptm-answer-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 2px solid var(--ptm-border);
	border-radius: 8px;
	cursor: pointer;
	background: #fff;
	font-size: 17px;
}

.ptm-answer-option:hover {
	border-color: var(--ptm-primary);
	background: #f6faff;
}

.ptm-answer-option input {
	width: 22px;
	height: 22px;
	margin-top: 2px;
	flex-shrink: 0;
}

.ptm-exam-box {
	border: 1px solid var(--ptm-border);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 18px;
	background: var(--ptm-bg-soft);
}

.ptm-exam-box h3 {
	margin-top: 0;
}

.ptm-exam-meta {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	font-size: 15px;
	color: #55606a;
}

.ptm-exam-meta li {
	padding: 3px 0;
}

/* ---------- Resultados ---------- */

.ptm-result-head {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

.ptm-result-score {
	text-align: center;
	min-width: 160px;
}

.ptm-result-number {
	display: block;
	font-size: 52px;
	font-weight: 700;
	line-height: 1;
}

.ptm-result-detail {
	display: block;
	font-size: 15px;
	color: #5c6670;
	margin-top: 6px;
}

.ptm-result-verdict h2 {
	border: none;
	padding: 0;
	margin: 0 0 6px;
}

.ptm-result-passed {
	border-color: #b7e2c4;
	background: #f4fbf6;
}

.ptm-result-passed .ptm-result-number,
.ptm-result-passed .ptm-result-verdict h2 {
	color: var(--ptm-green);
}

.ptm-result-failed {
	border-color: #f0c8c8;
	background: #fdf7f7;
}

.ptm-result-failed .ptm-result-number,
.ptm-result-failed .ptm-result-verdict h2 {
	color: var(--ptm-red);
}

.ptm-review-block,
.ptm-grade-block {
	border: 1px solid var(--ptm-border);
	border-left-width: 5px;
	border-radius: 8px;
	padding: 18px 20px;
	margin-bottom: 16px;
	background: #fff;
}

.ptm-review-ok {
	border-left-color: var(--ptm-green);
}

.ptm-review-bad {
	border-left-color: var(--ptm-red);
}

.ptm-review-pending,
.ptm-grade-manual {
	border-left-color: var(--ptm-amber);
	background: #fffdf6;
}

.ptm-grade-auto {
	border-left-color: #c3cad1;
	background: var(--ptm-bg-soft);
}

.ptm-review-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.ptm-review-head h4 {
	margin: 0;
	font-size: 16px;
	color: #55606a;
}

.ptm-review-points {
	font-weight: 700;
	font-size: 16px;
}

.ptm-question-text {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 12px;
}

.ptm-review-options {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ptm-review-options li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 6px;
	margin-bottom: 6px;
	background: var(--ptm-bg-soft);
	font-size: 16px;
}

.ptm-review-options .ptm-opt-correct {
	background: #e6f6ea;
	color: #14622b;
	font-weight: 600;
}

.ptm-review-options .ptm-opt-wrong {
	background: #fdeaea;
	color: #8b2223;
	text-decoration: line-through;
}

.ptm-opt-mark {
	width: 20px;
	flex-shrink: 0;
	font-weight: 700;
}

.ptm-opt-yours {
	margin-left: auto;
	font-size: 13px;
	color: #66707a;
	font-style: italic;
	white-space: nowrap;
}

.ptm-explanation {
	margin-top: 12px;
	padding: 12px 15px;
	background: #f0f6ff;
	border-radius: 6px;
	font-size: 15px;
}

.ptm-student-answer {
	background: var(--ptm-bg-soft);
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 14px;
}

.ptm-student-answer p {
	margin: 6px 0 0;
	white-space: pre-wrap;
}

.ptm-auto-note {
	font-size: 15px;
	color: #55606a;
	margin: 0;
}

/* ---------- Boton flotante ---------- */

.ptm-floating-access {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9999;
	background: var(--ptm-primary, #0069d9);
	color: #fff !important;
	padding: 14px 22px;
	border-radius: 30px;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.ptm-floating-access:hover {
	background: #004a99;
}

/* ---------- Responsive ---------- */

@media (min-width: 783px) {
	.ptm-nav {
		position: sticky;
		top: 0;
		z-index: 20;
		background: #fff;
		padding: 10px 0;
	}
}

@media (max-width: 782px) {
	.ptm-container {
		font-size: 16px;
		max-width: 100%;
		padding: 14px 14px 80px;
	}

	.ptm-header {
		padding: 24px 18px;
	}

	.ptm-header h1 {
		font-size: 23px;
	}

	.ptm-card,
	.ptm-subcard {
		padding: 18px;
	}

	/* En celular la nav se comporta como una barra de pestanas horizontal
	   con scroll, en vez de romper en varias filas: ocupa menos alto y se
	   siente mas como una app. */
	.ptm-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 8px;
		margin: 0 -14px 18px;
		padding: 0 14px 6px;
	}

	.ptm-nav::-webkit-scrollbar {
		display: none;
	}

	.ptm-nav-item {
		padding: 10px 16px;
		font-size: 15px;
		flex: 0 0 auto;
	}

	.ptm-nav-logout {
		margin-left: 0;
	}

	.ptm-list-item {
		align-items: flex-start;
	}

	.ptm-list-actions {
		width: 100%;
		justify-content: flex-start;
	}

	.ptm-table {
		font-size: 15px;
	}

	.ptm-table th,
	.ptm-table td {
		padding: 10px 8px;
	}

	.ptm-result-head {
		gap: 16px;
		justify-content: center;
		text-align: center;
	}

	.ptm-result-number {
		font-size: 44px;
	}

	.ptm-question-points {
		margin-left: 0;
	}

	.ptm-pdf-frame {
		height: 65vh;
		min-height: 320px;
	}

	.ptm-filter-form .ptm-input {
		width: 100%;
		min-width: 0;
	}

	.ptm-input-small {
		max-width: 100%;
	}

	.ptm-quicklinks {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 480px) {
	.ptm-header {
		padding: 20px 16px;
		border-radius: 10px;
	}

	.ptm-header h1 {
		font-size: 21px;
	}

	.ptm-stats {
		grid-template-columns: 1fr 1fr;
	}

	.ptm-btn-primary,
	.ptm-btn {
		width: 100%;
	}

	.ptm-btn-inline {
		width: auto;
	}

	.ptm-list-item {
		flex-direction: column;
		align-items: stretch;
	}

	.ptm-list-actions {
		gap: 8px;
	}

	.ptm-type-option {
		flex: 1 1 100%;
	}
}

@media print {
	.ptm-nav,
	.ptm-floating-access,
	.ptm-btn {
		display: none !important;
	}
}

/* =========================================================================
   Editor de clases: tipo en botones grandes, estado "editando", PDF/video
   ====================================================================== */

.ptm-lesson-type-icon {
	font-size: 20px;
	margin-right: 8px;
}

.ptm-list-main {
	display: flex;
	align-items: flex-start;
}

.ptm-list-item-editing {
	background: #fff8e8 !important;
	box-shadow: inset 3px 0 0 var(--ptm-amber);
}

.ptm-subcard-editing {
	background: #fff8e8;
	border-color: var(--ptm-amber);
}

.ptm-subcard-editing h3 {
	color: #8a6100;
}

.ptm-type-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ptm-type-option {
	flex: 1 1 200px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border: 2px solid var(--ptm-border);
	border-radius: 10px;
	cursor: pointer;
	background: #fff;
	font-weight: 600;
	transition: border-color .15s, background .15s;
}

.ptm-type-option:hover {
	border-color: var(--ptm-primary);
}

.ptm-type-option input {
	width: 20px;
	height: 20px;
	cursor: pointer;
	flex-shrink: 0;
}

.ptm-type-option:has(input:checked),
.ptm-type-option-selected {
	border-color: var(--ptm-primary);
	background: #eef5ff;
}

.ptm-field-media {
	background: var(--ptm-bg-soft);
	border: 1px solid var(--ptm-border);
	border-radius: 10px;
	padding: 16px;
}

.ptm-file-current {
	display: block;
	margin-top: 6px;
	color: #33475b;
}

.ptm-file-current a {
	color: var(--ptm-primary);
	font-weight: 600;
}

.ptm-video-native {
	background: #000;
}

.ptm-video-native video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
}

.ptm-pdf-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}