/* Front del portal (login, biblioteca, calendario, tutoriales, soporte).
   Sigue el mismo patrón visual que proyect/Ignitia-EduLab-acceso-
   biblioteca.html (login de dos columnas, sidebar de la app). No
   depende del CSS del theme — mismos tokens de marca y tipografías,
   copiados a propósito para que el portal siga funcionando aunque el
   theme cambie o esté inactivo. */

:root {
	--ignitia-navy: #00142d;
	--ignitia-navy-2: #0a2038;
	--ignitia-teal: #00989b;
	--ignitia-coral: #fd4a43;
	--ignitia-amarillo: #fcaa06;
	--ignitia-muted: #66768b;
	--ignitia-linea: #e3e7ea;
	--ignitia-sombra: 0 22px 50px -22px rgba(0, 20, 45, 0.28);
}

* {
	box-sizing: border-box;
}

.ignitia-portal-body {
	margin: 0;
	background: #f5f7f9;
	color: var(--ignitia-navy);
	font-family: 'Montserrat', sans-serif;
	line-height: 1.6;
}

h1,
h2,
h3,
h4 {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}

a {
	color: inherit;
}

/* ==================== Marca (logo oficial, archivo real) ==================== */

.ignitia-portal-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.ignitia-portal-brand__logo {
	display: block;
	height: 36px;
	width: auto;
}

/* ==================== Íconos (SVG propios, ver ignitia_portal_render_icon()) ==================== */

.ignitia-portal-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	vertical-align: -3px;
}

.ignitia-portal-icon svg {
	width: 100%;
	height: 100%;
}

/* .ignitia-portal-btn ya trae gap: 8px entre sus hijos (texto e ícono
   quedan bien espaciados sin importar el orden), así que el ícono no
   necesita su propio margen acá. */
.ignitia-portal-archivo-actual__icono .ignitia-portal-icon {
	width: 18px;
	height: 18px;
}

/* ==================== Botones ==================== */

.ignitia-portal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	padding: 13px 24px;
	border-radius: 9px;
	background: var(--ignitia-teal);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.ignitia-portal-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--ignitia-sombra);
}

.ignitia-portal-btn--block {
	width: 100%;
	margin-top: 22px;
}

.ignitia-portal-btn--sm {
	margin-top: 0;
	padding: 8px 16px;
	font-size: 13px;
}

.ignitia-portal-btn--outline {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.ignitia-portal-vacio {
	color: var(--ignitia-muted);
}

.ignitia-portal-aviso-admin {
	margin: 20px 0;
	padding: 12px 16px;
	border-radius: 8px;
	background: #fff4dc;
	color: #8a5a00;
	font-size: 0.88rem;
}

/* ==================== Avisos flotantes (toast) ====================
   Componente nativo (ver assets/js/toast.js) — reemplaza a los mensajes
   de error que antes forzaban una recarga de página con ?error=... en
   la URL. No depende de ninguna librería externa. */

.ignitia-portal-toasts {
	position: fixed;
	z-index: 1000;
	top: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min(360px, calc(100vw - 40px));
}

.ignitia-portal-toast {
	position: relative;
	padding: 14px 40px 14px 16px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 16px 34px -10px rgba(0, 20, 45, 0.35);
	border-left: 4px solid var(--ignitia-coral);
	color: var(--ignitia-navy);
	font-family: 'Montserrat', sans-serif;
	font-size: 0.86rem;
	line-height: 1.45;
	animation: ignitia-portal-toast-entrar 0.2s ease;
}

.ignitia-portal-toast--exito {
	border-left-color: var(--ignitia-teal);
}

.ignitia-portal-toast.is-saliendo {
	opacity: 0;
	transform: translateX(12px);
	transition: 0.2s ease;
}

.ignitia-portal-toast__cerrar {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	border: 0;
	background: transparent;
	color: var(--ignitia-muted);
	font-size: 0.7rem;
	line-height: 1;
	cursor: pointer;
}

@keyframes ignitia-portal-toast-entrar {
	from {
		opacity: 0;
		transform: translateX(12px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (max-width: 620px) {
	.ignitia-portal-toasts {
		top: auto;
		bottom: 20px;
		right: 20px;
		left: 20px;
		max-width: none;
	}
}

/* ==================== Login (dos columnas, igual al prototipo) ==================== */

.ignitia-portal-login-shell {
	/* dvh (no vh) porque en Safari de celular "100vh" mide como si la
	   barra de direcciones estuviera siempre oculta — con la barra visible
	   eso mide más alto de lo que en verdad se ve, dejando contenido fijo
	   más arriba del borde real de la pantalla. dvh sí sigue el tamaño
	   real visible en cada momento. La línea de vh queda antes como
	   respaldo para navegadores que no entienden dvh todavía. */
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	background: #fff;
}

.ignitia-portal-login-side {
	position: relative;
	overflow: hidden;
	padding: 44px 64px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--ignitia-navy);
	color: #fff;
}

.ignitia-portal-login-side::before,
.ignitia-portal-login-side::after {
	content: '';
	position: absolute;
	border-radius: 50%;
}

.ignitia-portal-login-side::before {
	width: 430px;
	height: 430px;
	right: -240px;
	top: -100px;
	background: var(--ignitia-teal);
	opacity: 0.75;
}

.ignitia-portal-login-side::after {
	width: 370px;
	height: 370px;
	left: -220px;
	bottom: -170px;
	background: var(--ignitia-amarillo);
	opacity: 0.32;
}

.ignitia-portal-login-side .ignitia-portal-brand,
.ignitia-portal-login-message,
.ignitia-portal-login-side__nota {
	position: relative;
	z-index: 1;
}

.ignitia-portal-login-message {
	max-width: 480px;
}

.ignitia-portal-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	color: #6de0db;
	font-family: 'Poppins', sans-serif;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.ignitia-portal-eyebrow::before {
	content: '';
	width: 26px;
	height: 2px;
	background: #6de0db;
}

.ignitia-portal-login-message h1 {
	font-size: clamp(2rem, 3.4vw, 3.2rem);
	line-height: 1.14;
	margin: 0 0 18px;
}

.ignitia-portal-login-message p {
	color: #bdcbda;
	line-height: 1.7;
}

.ignitia-portal-mini-cards {
	display: flex;
	gap: 12px;
	margin-top: 32px;
}

.ignitia-portal-mini-card {
	width: 92px;
	height: 105px;
	padding: 13px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.11);
	font-family: 'Poppins', sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.3;
}

.ignitia-portal-mini-card:nth-child(2) {
	background: var(--ignitia-teal);
}

.ignitia-portal-mini-card:nth-child(3) {
	background: var(--ignitia-coral);
}

.ignitia-portal-mini-card__icono {
	display: block;
	width: 27px;
	height: 27px;
	margin-bottom: 17px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.22);
}

.ignitia-portal-login-side__nota {
	color: #91a8bd;
	font-size: 0.8rem;
}

.ignitia-portal-login-main {
	display: grid;
	place-items: center;
	padding: 40px;
}

.ignitia-portal-login-box {
	width: min(400px, 100%);
}

.ignitia-portal-back-link {
	display: inline-flex;
	gap: 8px;
	margin-bottom: 40px;
	color: var(--ignitia-muted);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 600;
}

.ignitia-portal-login-box h2 {
	font-size: 1.8rem;
	margin-bottom: 8px;
}

.ignitia-portal-login-box > p {
	color: var(--ignitia-muted);
	line-height: 1.6;
	margin-bottom: 26px;
}

/* Estado "listo" de olvidé/restablecer contraseña: reemplaza al
   formulario en el sitio, sin navegar a otra pantalla. */
.ignitia-portal-auth-confirmacion {
	padding: 18px;
	border-radius: 10px;
	background: #e0f5f4;
}

.ignitia-portal-auth-confirmacion p {
	margin: 0 0 14px;
	color: #00696b;
	line-height: 1.6;
}

.ignitia-portal-auth-confirmacion .ignitia-portal-btn {
	margin-top: 0;
}

.ignitia-portal-form-label {
	display: block;
	margin: 0 0 8px;
	font-size: 0.85rem;
	font-weight: 700;
}

.ignitia-portal-field {
	width: 100%;
	height: 48px;
	margin-bottom: 18px;
	padding: 0 14px;
	border: 1px solid #d8e0e9;
	border-radius: 8px;
	outline: 0;
	color: var(--ignitia-navy);
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
}

.ignitia-portal-field:focus {
	border-color: var(--ignitia-teal);
	box-shadow: 0 0 0 3px rgba(0, 152, 155, 0.12);
}

/* Envuelve un campo de contraseña con un botón adentro (ojito de
   mostrar/ocultar, o generar una nueva) — mismo mecanismo para los dos,
   solo cambia qué botón traen. El margen que normalmente lleva
   .ignitia-portal-field pasa al wrapper para no perder el espaciado en
   los formularios sueltos (login, restablecer); dentro de un
   .ignitia-portal-campo (formularios de admin) ya lo maneja el grid, así
   que ahí se anula. */
.ignitia-portal-password-wrap {
	position: relative;
	margin-bottom: 18px;
}

.ignitia-portal-password-wrap .ignitia-portal-field {
	margin-bottom: 0;
	padding-right: 42px;
}

/* Edge agrega su propio ícono nativo de "mostrar contraseña" (el
   ovalito con la flecha) adentro del campo — sin esto queda duplicado
   al lado del ojito propio. Chrome y Firefox no ponen ninguno, así que
   no hace falta un equivalente para ellos. */
.ignitia-portal-password-wrap .ignitia-portal-field::-ms-reveal,
.ignitia-portal-password-wrap .ignitia-portal-field::-ms-clear {
	display: none;
}

.ignitia-portal-campo .ignitia-portal-password-wrap {
	margin-bottom: 0;
}

.ignitia-portal-password-wrap__boton {
	position: absolute;
	top: 50%;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--ignitia-muted);
	cursor: pointer;
	transform: translateY(-50%);
}

.ignitia-portal-password-wrap__boton:hover {
	background: #f0f3f5;
	color: var(--ignitia-teal);
}

.ignitia-portal-password-wrap__boton .ignitia-portal-icon {
	width: 17px;
	height: 17px;
}

.ignitia-portal-form-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: -4px 0 8px;
	font-size: 0.82rem;
}

.ignitia-portal-form-row label {
	color: var(--ignitia-muted);
}

.ignitia-portal-form-row a {
	color: var(--ignitia-teal);
	font-weight: 700;
	text-decoration: none;
}

.ignitia-portal-form-note {
	margin: 22px 0 0;
	color: var(--ignitia-muted);
	font-size: 0.82rem;
	text-align: center;
	line-height: 1.55;
}

.ignitia-portal-form-note a {
	color: var(--ignitia-teal);
	font-weight: 700;
	text-decoration: none;
}

@media (max-width: 900px) {
	.ignitia-portal-login-shell {
		grid-template-columns: 1fr;
	}

	.ignitia-portal-login-side {
		padding: 32px;
	}

	.ignitia-portal-login-message p,
	.ignitia-portal-mini-cards {
		display: none;
	}
}

/* ==================== App shell (topbar + sidebar) ==================== */

.ignitia-portal-app-top {
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32px;
	background: #fff;
	border-bottom: 1px solid var(--ignitia-linea);
}

.ignitia-portal-app-top__right {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ignitia-portal-user-info {
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--ignitia-muted);
}

.ignitia-portal-user-info b {
	display: block;
	font-size: 0.8rem;
	color: var(--ignitia-navy);
}

.ignitia-portal-avatar {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #e0f6f5;
	color: var(--ignitia-teal);
	font-size: 0.82rem;
	font-weight: 800;
}

.ignitia-portal-app-layout {
	/* dvh en vez de vh: en Safari de celular "100vh" mide como si la
	   barra de direcciones estuviera siempre oculta, así que con la barra
	   visible esta sección queda más alta de lo que en verdad se ve en
	   pantalla — eso es lo que hacía que el dock del menú (fixed, más
	   abajo en este archivo) pareciera "flotar" a media página en vez de
	   quedar pegado al borde real. dvh sí sigue el tamaño visible real.
	   La línea de vh queda antes como respaldo para navegadores viejos. */
	min-height: calc(100vh - 68px);
	min-height: calc(100dvh - 68px);
	padding-left: 237px;
}

/* position: fixed en todos los anchos (no un ítem de grid/flex, ver el
   comentario en inc/front.php) — reserva el ancho con el padding-left de
   arriba en vez de una columna de grid. */
.ignitia-portal-sidebar {
	position: fixed;
	z-index: 20;
	top: 68px;
	left: 0;
	bottom: 0;
	width: 237px;
	overflow-y: auto;
	padding: 29px 16px;
	background: var(--ignitia-navy);
	color: #c0cddb;
}

.ignitia-portal-school-label {
	padding: 0 13px 25px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.69rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #7f98b1;
}

.ignitia-portal-school-label b {
	display: block;
	overflow: hidden;
	color: #fff;
	margin-top: 5px;
	font-size: 0.9rem;
	letter-spacing: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-transform: none;
}

.ignitia-portal-side-menu {
	display: grid;
	gap: 5px;
}

.ignitia-portal-app-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 13px;
	border-radius: 7px;
	background: transparent;
	color: #b6c6d5;
	text-align: left;
	font-size: 0.87rem;
	text-decoration: none;
	border: 0;
	font-family: 'Montserrat', sans-serif;
}

.ignitia-portal-app-nav:hover,
.ignitia-portal-app-nav.active {
	background: rgba(255, 255, 255, 0.11);
	color: #fff;
}

.ignitia-portal-app-nav .ignitia-portal-icon {
	width: 19px;
	height: 19px;
	flex: none;
}

.ignitia-portal-app-nav--salir {
	margin-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 18px;
}

.ignitia-portal-side-bottom {
	margin-top: 42px;
	padding: 18px 13px;
	border-radius: 9px;
	background: rgba(0, 152, 155, 0.15);
	font-size: 0.76rem;
	line-height: 1.55;
	color: #bce9e7;
}

.ignitia-portal-side-bottom b {
	color: #fff;
	display: block;
	margin-bottom: 3px;
}

.ignitia-portal-app-main {
	padding: 39px 44px;
	max-width: 1200px;
	width: 100%;
	min-width: 0;
	margin: auto;
}

.ignitia-portal-heading {
	margin-bottom: 30px;
}

.ignitia-portal-heading h1 {
	font-size: 2rem;
	margin: 0 0 8px;
}

.ignitia-portal-heading p {
	max-width: 650px;
	margin: 0;
	color: var(--ignitia-muted);
	line-height: 1.55;
}

@media (max-width: 900px) {
	.ignitia-portal-app-layout {
		padding-left: 70px;
	}

	.ignitia-portal-sidebar {
		width: 70px;
		padding: 20px 9px;
	}

	.ignitia-portal-school-label,
	.ignitia-portal-side-bottom,
	.ignitia-portal-app-nav {
		font-size: 0;
	}

	.ignitia-portal-app-nav {
		justify-content: center;
		padding: 13px;
	}

	.ignitia-portal-app-main {
		padding: 31px 22px;
	}
}

@media (max-width: 620px) {
	.ignitia-portal-app-top__right .ignitia-portal-user-info {
		display: none;
	}

	/* En una pantalla de celular el riel lateral (ya angosto desde los
	   900px) sigue robándole ancho al contenido. El prototipo original lo
	   resuelve convirtiendo el sidebar en una barra fija abajo, como
	   cualquier app — se sigue el mismo patrón acá. */
	.ignitia-portal-app-layout {
		padding-left: 0;
	}

	/* Dock flotante en vez de una barra pegada al borde: separado de los
	   3 bordes, con esquinas redondeadas y sombra propia. El ancho es el
	   que pida el contenido (hasta el tope de abajo), no 100%. */
	.ignitia-portal-sidebar {
		top: auto;
		left: 50%;
		right: auto;
		bottom: 14px;
		transform: translateX(-50%);
		width: auto;
		max-width: calc(100% - 24px);
		height: auto;
		display: flex;
		align-items: center;
		padding: 8px;
		border-radius: 999px;
		overflow-x: auto;
		box-shadow: 0 16px 32px -12px rgba(0, 20, 45, 0.5);
	}

	/* El nombre de la institución y el aviso de ayuda no caben en un dock
	   compacto — la institución ya se identifica dentro de cada
	   pantalla, así que no hace falta repetirla acá. */
	.ignitia-portal-school-label,
	.ignitia-portal-side-bottom {
		display: none;
	}

	.ignitia-portal-side-menu {
		display: flex;
		width: auto;
		gap: 2px;
	}

	/* gap: 0 acá (no solo "sin la línea") porque el estilo base trae
	   gap: 12px para la lista vertical de escritorio — sin anularlo
	   explícitamente seguía aplicando acá también. El texto de la
	   etiqueta existe en el HTML para los ítems que no están activos
	   (solo se esconde con font-size: 0, ver más abajo), y ese gap
	   contaba el espacio hacia el texto invisible aunque no se viera
	   nada — el ícono quedaba descentrado dentro de su círculo. El gap
	   se agrega de nuevo solo en .active, que es cuando sí hay texto
	   real que separar. */
	.ignitia-portal-app-nav {
		flex: none;
		width: auto;
		justify-content: center;
		gap: 0;
		padding: 10px;
		border-radius: 999px;
		white-space: nowrap;
	}

	.ignitia-portal-app-nav--salir {
		margin-top: 0;
		border-top: 0;
		padding-top: 10px;
	}

	/* En vez de un tooltip al pasar el mouse (no existe "hover" en un
	   celular), el ítem activo se expande y muestra su etiqueta — el
	   mismo propósito (decir en qué sección estás) resuelto para touch. */
	.ignitia-portal-app-nav.active {
		font-size: 0.78rem;
		gap: 6px;
		padding: 10px 16px;
		background: var(--ignitia-teal);
	}

	/* El contenido no debe quedar tapado detrás del dock fijo. */
	.ignitia-portal-app-main {
		padding-bottom: 96px;
	}

	/* Con 4 botones (Suspender/Nueva contraseña/Editar/Eliminar) el nowrap
	   de la tabla obligaba a la fila entera a ser mucho más ancha que la
	   pantalla — se deja que envuelvan a una segunda línea dentro de la
	   misma celda. */
	.ignitia-portal-table__acciones {
		white-space: normal;
	}

	.ignitia-portal-table__acciones .ignitia-portal-btn {
		margin: 4px 0 0 5px;
	}

	.ignitia-portal-form-grid {
		grid-template-columns: 1fr;
	}
}

/* ==================== Inicio (bienvenida) ==================== */

.ignitia-portal-welcome-box {
	display: grid;
	grid-template-columns: 1.25fr 0.8fr;
	gap: 25px;
	min-height: 182px;
	margin: 0 0 31px;
	padding: 30px;
	border-radius: 14px;
	background: linear-gradient(110deg, #e6f9f8, #faffff);
	overflow: hidden;
}

.ignitia-portal-welcome-box h2 {
	font-size: 1.55rem;
	margin-bottom: 9px;
}

.ignitia-portal-welcome-box p {
	max-width: 550px;
	margin: 0;
	color: #52657a;
	line-height: 1.6;
}

.ignitia-portal-welcome-stat {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 22px;
	padding: 9px 14px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.7);
	color: var(--ignitia-navy);
	font-size: 0.85rem;
}

.ignitia-portal-welcome-stat strong {
	color: var(--ignitia-teal);
	font-family: 'Poppins', sans-serif;
	font-size: 1.05rem;
}

.ignitia-portal-welcome-graphic {
	position: relative;
	min-height: 120px;
}

/* Tarjeta decorativa flotante — el mismo recurso visual que usa el
   prototipo en el hero público (dashboard-card/template-card), reciclado
   acá para que la bienvenida no se sienta como una pantalla vacía. */
.ignitia-portal-mock-card {
	position: absolute;
	right: 15px;
	bottom: -9px;
	width: 160px;
	padding: 17px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 12px 22px rgba(6, 26, 53, 0.09);
	transform: rotate(7deg);
}

.ignitia-portal-mock-card b {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 0.7rem;
	color: var(--ignitia-navy);
}

.ignitia-portal-mock-card i {
	display: block;
	height: 11px;
	margin-top: 9px;
	border-radius: 4px;
	background: #e7f7f6;
}

.ignitia-portal-mock-card i:nth-child(3) {
	width: 72%;
	background: #ffedea;
}

.ignitia-portal-mock-card i:nth-child(4) {
	width: 52%;
	background: #fff2d8;
}

.ignitia-portal-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin-bottom: 31px;
}

.ignitia-portal-stat-card {
	padding: 18px 20px;
	border: 1px solid var(--ignitia-linea);
	border-radius: 12px;
	background: #fff;
}

.ignitia-portal-stat-card strong {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 1.7rem;
	color: var(--ignitia-navy);
}

.ignitia-portal-stat-card span {
	color: var(--ignitia-muted);
	font-size: 0.8rem;
}

.ignitia-portal-tips-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 17px;
}

.ignitia-portal-tip {
	padding: 22px;
	border-radius: 11px;
	background: #fff;
	border: 1px solid var(--ignitia-linea);
	text-decoration: none;
	color: inherit;
	transition: 0.2s;
}

a.ignitia-portal-tip:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 22px rgba(6, 26, 53, 0.1);
	border-color: transparent;
}

.ignitia-portal-tip__numero {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: #e1f7f6;
	color: var(--ignitia-teal);
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
}

.ignitia-portal-tip h3 {
	font-size: 1rem;
	margin: 13px 0 6px;
}

.ignitia-portal-tip p {
	margin: 0;
	color: var(--ignitia-muted);
	font-size: 0.82rem;
	line-height: 1.55;
}

@media (max-width: 620px) {
	.ignitia-portal-welcome-box {
		grid-template-columns: 1fr;
		padding: 23px;
		min-height: 0;
	}

	.ignitia-portal-welcome-graphic {
		display: none;
	}
}

/* ==================== Biblioteca: tarjetas de categoría ==================== */

.ignitia-portal-library-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.ignitia-portal-segment-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--ignitia-linea);
	border-radius: 12px;
	background: #fff;
	transition: 0.2s;
}

/* La tarjeta entera es el enlace, pero los botones de gestión del admin van
   por encima — de ahí que el <a> sea un hijo y no el contenedor. */
.ignitia-portal-segment-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ignitia-portal-segment-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 15px 28px rgba(6, 26, 53, 0.1);
	border-color: transparent;
}

.ignitia-portal-segment-card__visual {
	height: 138px;
	padding: 16px;
	position: relative;
	overflow: hidden;
	color: #fff;
}

.ignitia-portal-segment-card__visual::after {
	content: '';
	position: absolute;
	width: 78px;
	height: 78px;
	right: -21px;
	bottom: -27px;
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
}

.ignitia-portal-segment-card__count {
	position: relative;
	z-index: 1;
	display: inline-flex;
	padding: 4px 7px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.18);
	font-size: 0.68rem;
	font-weight: 700;
}

.ignitia-portal-segment-card__visual h4 {
	position: absolute;
	left: 16px;
	bottom: 10px;
	z-index: 1;
	margin: 0;
	font-size: 1.05rem;
	letter-spacing: -0.03em;
}

/* Mismos 9 degradados para la tarjeta de categoría y la de tema — así se
   ven como una sola familia visual en vez de dos estilos distintos. */
.ignitia-portal-segment-card__visual--1, .ignitia-portal-resource__preview--1 { background: linear-gradient(135deg, #00a8a8, #087a93); }
.ignitia-portal-segment-card__visual--2, .ignitia-portal-resource__preview--2 { background: linear-gradient(135deg, #ff695d, #f34665); }
.ignitia-portal-segment-card__visual--3, .ignitia-portal-resource__preview--3 { background: linear-gradient(135deg, #ffad0a, #f68a00); }
.ignitia-portal-segment-card__visual--4, .ignitia-portal-resource__preview--4 { background: linear-gradient(135deg, #102848, #1b4b76); }
.ignitia-portal-segment-card__visual--5, .ignitia-portal-resource__preview--5 { background: linear-gradient(135deg, #007e80, #00a8a8); }
.ignitia-portal-segment-card__visual--6, .ignitia-portal-resource__preview--6 { background: linear-gradient(135deg, #f15069, #ff8561); }
.ignitia-portal-segment-card__visual--7, .ignitia-portal-resource__preview--7 { background: linear-gradient(135deg, #172e4c, #00a8a8); }
.ignitia-portal-segment-card__visual--8, .ignitia-portal-resource__preview--8 { background: linear-gradient(135deg, #ff9f08, #ff5b4d); }
.ignitia-portal-segment-card__visual--9, .ignitia-portal-resource__preview--9 { background: linear-gradient(135deg, #0d7185, #4baecc); }

.ignitia-portal-segment-card__body {
	padding: 15px 17px;
	color: var(--ignitia-teal);
	font-size: 0.82rem;
	font-weight: 800;
}

.ignitia-portal-segment-card__body span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

@media (max-width: 900px) {
	.ignitia-portal-library-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.ignitia-portal-library-grid {
		grid-template-columns: 1fr;
	}
}

/* ==================== Biblioteca: recursos de una categoría ==================== */

.ignitia-portal-crumb {
	margin: 0 0 16px;
}

.ignitia-portal-crumb a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ignitia-teal);
	font-size: 0.82rem;
	font-weight: 800;
	text-decoration: none;
}

.ignitia-portal-resource-head {
	margin-bottom: 22px;
}

.ignitia-portal-resource-head p {
	margin: 6px 0 0;
	color: var(--ignitia-muted);
	font-size: 0.88rem;
}

.ignitia-portal-resources-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.ignitia-portal-resource {
	position: relative;
	border: 1px solid var(--ignitia-linea);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: 0.2s;
}

.ignitia-portal-resource__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ignitia-portal-resource:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 22px rgba(6, 26, 53, 0.1);
}

.ignitia-portal-resource__preview {
	position: relative;
	height: 130px;
	padding: 15px;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}

/* Mismo anillo decorativo que ya usa la tarjeta de categoría — sin esto,
   el color de fondo se sentía como un bloque plano sin nada adentro. */
.ignitia-portal-resource__preview::after {
	content: '';
	position: absolute;
	width: 64px;
	height: 64px;
	right: -18px;
	bottom: -22px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
}

.ignitia-portal-resource__icono {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.2);
	font-size: 0.8rem;
	font-weight: 700;
}

.ignitia-portal-resource__preview h5 {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.25;
}

.ignitia-portal-resource__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	padding: 13px;
}

/* Un tema sin link todavía no sirve para el colegio: se avisa en la tarjeta
   en vez de dejar un enlace que no lleva a ningún lado. */
.ignitia-portal-resource--sin-link .ignitia-portal-resource__preview {
	opacity: 0.55;
}

@media (max-width: 900px) {
	.ignitia-portal-resources-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.ignitia-portal-resources-grid {
		grid-template-columns: 1fr;
	}
}

/* ==================== Calendario ==================== */

.ignitia-portal-calendar-layout {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 24px;
}

.ignitia-portal-calendar-desc {
	padding: 31px;
	border-radius: 13px;
	background: linear-gradient(140deg, #e7f9f8, #fff);
}

.ignitia-portal-calendar-desc h2 {
	font-size: 1.5rem;
	margin-bottom: 12px;
}

.ignitia-portal-calendar-desc p {
	color: var(--ignitia-muted);
	line-height: 1.65;
}

.ignitia-portal-calendar-desc__nota {
	margin-top: 14px;
	font-size: 0.76rem;
}

.ignitia-portal-card-panel {
	padding: 28px;
	border-radius: 13px;
	background: #fff;
	border: 1px solid var(--ignitia-linea);
}

.ignitia-portal-card-panel h3 {
	font-size: 1.1rem;
	margin: 0 0 18px;
}

.ignitia-portal-month-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.ignitia-portal-month {
	padding: 13px;
	border-radius: 8px;
	border: 1px solid var(--ignitia-linea);
	font-size: 0.75rem;
	font-weight: 800;
}

@media (max-width: 900px) {
	.ignitia-portal-calendar-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	.ignitia-portal-month-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==================== Tutoriales ==================== */

.ignitia-portal-tutorials-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.ignitia-portal-video {
	position: relative;
	padding: 17px;
	border: 1px solid var(--ignitia-linea);
	border-radius: 10px;
	background: #fff;
}

.ignitia-portal-video__play {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: var(--ignitia-navy);
	margin-bottom: 12px;
}

.ignitia-portal-video__play iframe,
.ignitia-portal-video__play video {
	width: 100%;
	height: 100%;
}

/* En un tutorial la esquina superior es el reproductor, así que los
   controles van abajo para no pelearse con los botones del video. */
.ignitia-portal-video .ignitia-portal-card-actions {
	top: auto;
	bottom: 14px;
	right: 14px;
}

.ignitia-portal-video__info h3 {
	font-size: 0.95rem;
	margin: 0 0 6px;
}

.ignitia-portal-video__info p {
	margin: 0;
	color: var(--ignitia-muted);
	font-size: 0.82rem;
	line-height: 1.5;
}

@media (max-width: 620px) {
	.ignitia-portal-tutorials-grid {
		grid-template-columns: 1fr;
	}
}

/* ==================== Kit de gestión ====================
   Controles que solo se pintan para quien administra. Viven dentro de las
   mismas pantallas que ve el colegio, así que usan la marca del portal y no
   las clases del núcleo de WordPress (.button, .wp-list-table, .regular-text),
   que fuera de wp-admin no existen y se ven como cajas grises. */

.ignitia-portal-heading--acciones {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.ignitia-portal-aviso-gestion {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	padding: 12px 16px;
	border-radius: 9px;
	border: 1px dashed rgba(0, 152, 155, 0.45);
	background: rgba(0, 152, 155, 0.07);
	color: #00696b;
	font-size: 0.82rem;
	line-height: 1.45;
}

.ignitia-portal-gestion-panel {
	margin-top: 24px;
}

.ignitia-portal-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	margin-bottom: 18px;
}

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

.ignitia-portal-btn--ghost {
	background: #fff;
	color: var(--ignitia-navy);
	border: 1px solid #d3dce5;
}

.ignitia-portal-btn--ghost:hover {
	border-color: var(--ignitia-teal);
	color: var(--ignitia-teal);
}

.ignitia-portal-btn--danger {
	background: var(--ignitia-coral);
}

.ignitia-portal-btn--danger-ghost {
	background: #fff;
	color: var(--ignitia-coral);
	border: 1px solid #ffd2ce;
}

.ignitia-portal-btn--danger-ghost:hover {
	background: var(--ignitia-coral);
	color: #fff;
}

.ignitia-portal-btn--icon {
	width: 34px;
	height: 34px;
	margin-top: 0;
	padding: 0;
	border-radius: 8px;
	font-size: 0.9rem;
	line-height: 1;
}

.ignitia-portal-btn[disabled] {
	opacity: 0.55;
	cursor: default;
	transform: none;
	box-shadow: none;
}

/* Spinner que ui.js inserta en un botón mientras dura la petición (ver
   setCargando() en ui.js) — usa currentColor para el borde, así se ve
   bien tanto en botones sólidos (texto blanco) como en los --ghost
   (texto oscuro) sin necesitar una variante por color de botón. */
.ignitia-portal-spinner {
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 7px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -2px;
	animation: ignitia-portal-girar 0.6s linear infinite;
}

.ignitia-portal-btn--icon .ignitia-portal-spinner {
	margin-right: 0;
	vertical-align: -1px;
}

@keyframes ignitia-portal-girar {
	to {
		transform: rotate(360deg);
	}
}

.ignitia-portal-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* ---- Barra de acciones sobre una tarjeta ---- */

.ignitia-portal-card-actions {
	position: absolute;
	z-index: 2;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 6px;
	padding: 5px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 6px 16px rgba(0, 20, 45, 0.18);
}

.ignitia-portal-card-actions .ignitia-portal-btn--icon {
	background: transparent;
	color: var(--ignitia-navy);
	border: 0;
	box-shadow: none;
}

.ignitia-portal-card-actions .ignitia-portal-btn--icon:hover {
	background: #eef3f6;
	transform: none;
	color: var(--ignitia-teal);
}

.ignitia-portal-card-actions .ignitia-portal-btn--icon.is-danger:hover {
	background: #ffeceb;
	color: var(--ignitia-coral);
}

.ignitia-portal-drag-handle {
	cursor: grab;
}

.ignitia-portal-drag-handle:active {
	cursor: grabbing;
}

/* Placeholder que deja jQuery UI Sortable mientras se arrastra. */
.ignitia-portal-sortable-hueco {
	border: 2px dashed rgba(0, 152, 155, 0.5);
	border-radius: 12px;
	background: rgba(0, 152, 155, 0.06);
}

/* ---- Tarjeta "+ agregar", dentro de la misma grilla ---- */

.ignitia-portal-add-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 200px;
	width: 100%;
	padding: 20px;
	border: 2px dashed #cbd7e1;
	border-radius: 12px;
	background: transparent;
	color: var(--ignitia-muted);
	font-family: 'Poppins', sans-serif;
	font-size: 0.86rem;
	font-weight: 600;
	cursor: pointer;
	transition: 0.18s;
}

.ignitia-portal-add-card:hover {
	border-color: var(--ignitia-teal);
	background: rgba(0, 152, 155, 0.05);
	color: var(--ignitia-teal);
}

.ignitia-portal-add-card__signo {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(0, 152, 155, 0.12);
	color: var(--ignitia-teal);
}

.ignitia-portal-add-card__signo .ignitia-portal-icon {
	width: 20px;
	height: 20px;
}

.ignitia-portal-add-card--sm {
	min-height: 174px;
}

/* ---- Chips ---- */

.ignitia-portal-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: 'Poppins', sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.ignitia-portal-chip--compartido {
	background: #e0f5f4;
	color: #00696b;
}

.ignitia-portal-chip--sin-compartir {
	background: #fff2e0;
	color: #9a5b00;
}

.ignitia-portal-chip--activo {
	background: #e0f5f4;
	color: #00696b;
}

.ignitia-portal-chip--suspendido {
	background: #ffeceb;
	color: #c33a33;
}

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

.ignitia-portal-label {
	display: block;
	margin: 0 0 7px;
	font-family: 'Poppins', sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ignitia-navy);
}

.ignitia-portal-campo {
	margin-bottom: 16px;
}

.ignitia-portal-campo:last-of-type {
	margin-bottom: 0;
}

/* .ignitia-portal-field ya se define arriba (login). Se reutiliza tal cual en
   toda la gestión para que no haya dos estilos de input en el portal. */
.ignitia-portal-field--sm {
	height: 42px;
	margin-bottom: 0;
	font-size: 0.9rem;
}

.ignitia-portal-field--area {
	height: auto;
	min-height: 84px;
	padding: 12px 14px;
	line-height: 1.5;
	resize: vertical;
}

.ignitia-portal-campo .ignitia-portal-field {
	margin-bottom: 0;
}

.ignitia-portal-ayuda {
	display: block;
	margin-top: 6px;
	color: var(--ignitia-muted);
	font-size: 0.76rem;
	line-height: 1.45;
}

.ignitia-portal-form-error {
	display: block;
	margin-top: 10px;
	color: var(--ignitia-coral);
	font-size: 0.8rem;
	font-weight: 600;
}

.ignitia-portal-form-error:empty {
	display: none;
}

.ignitia-portal-radios {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ignitia-portal-radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid #d8e0e9;
	border-radius: 8px;
	font-size: 0.85rem;
	cursor: pointer;
}

.ignitia-portal-radio:has(input:checked) {
	border-color: var(--ignitia-teal);
	background: rgba(0, 152, 155, 0.06);
	color: var(--ignitia-teal);
	font-weight: 600;
}

/* Buscador arriba de la lista de colegios — filtra los checkboxes ya
   renderizados (ver assets/js/admin/library.js), sin pedir nada al
   servidor, así ningún colegio marcado se pierde por quedar fuera de la
   búsqueda. */
.ignitia-portal-campo .ignitia-portal-search {
	max-width: none;
	margin-bottom: 8px;
}

/* Lista de colegios con los que se comparte un tema. */
.ignitia-portal-check-list {
	max-height: 200px;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid #d8e0e9;
	border-radius: 8px;
}

.ignitia-portal-check {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 0.86rem;
	cursor: pointer;
}

.ignitia-portal-check:hover {
	background: #f2f6f8;
}

/* Checkbox propio en vez de dejar que el navegador dibuje el nativo —
   con solo accent-color cada sistema lo rendereaba distinto (en algunos
   quedaba grande y sin forma clara). Con appearance:none se dibuja
   siempre igual: caja + palomita con un pseudo-elemento, sin depender
   de ningún ícono ni marcado extra. */
.ignitia-portal-check input[type='checkbox'] {
	appearance: none;
	-webkit-appearance: none;
	display: inline-grid;
	place-content: center;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid #c7d1da;
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	transition: 0.15s;
}

.ignitia-portal-check input[type='checkbox']:checked {
	background: var(--ignitia-teal);
	border-color: var(--ignitia-teal);
}

.ignitia-portal-check input[type='checkbox']:checked::after {
	content: '';
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}

.ignitia-portal-check input[type='checkbox']:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 152, 155, 0.25);
}

.ignitia-portal-check-list__vacio {
	margin: 0;
	padding: 12px 10px;
	color: var(--ignitia-muted);
	font-size: 0.82rem;
}

/* ---- Subida de archivos ---- */

.ignitia-portal-uploader {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.ignitia-portal-uploader input[type='file'] {
	flex: 1 1 240px;
	min-width: 0;
	padding: 11px 12px;
	border: 1px dashed #cbd7e1;
	border-radius: 8px;
	background: #f8fafb;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.82rem;
	color: var(--ignitia-muted);
	cursor: pointer;
}

.ignitia-portal-uploader input[type='file']::file-selector-button {
	margin-right: 12px;
	padding: 7px 14px;
	border: 0;
	border-radius: 7px;
	background: var(--ignitia-navy);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
}

.ignitia-portal-archivo-actual {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 18px;
	padding: 14px 16px;
	border-radius: 10px;
	background: #f4f8f9;
}

.ignitia-portal-archivo-actual__icono {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 9px;
	background: var(--ignitia-teal);
	color: #fff;
	font-size: 1rem;
}

.ignitia-portal-archivo-actual__datos {
	min-width: 0;
	flex: 1;
	font-size: 0.85rem;
}

/* El botón de eliminar va pegado al borde derecho de la ficha — con
   .ignitia-portal-archivo-actual__datos ocupando el espacio disponible
   (flex: 1) queda ahí solo, sin necesitar margin-left: auto. */
.ignitia-portal-archivo-actual .ignitia-portal-btn {
	margin-top: 0;
	flex: none;
}

.ignitia-portal-archivo-actual__datos b {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ignitia-portal-archivo-actual__datos span {
	color: var(--ignitia-muted);
	font-size: 0.76rem;
}

/* ---- Tabla ---- */

.ignitia-portal-table {
	width: 100%;
	border-collapse: collapse;
}

.ignitia-portal-table th {
	padding: 12px 14px;
	border-bottom: 2px solid var(--ignitia-linea);
	color: var(--ignitia-muted);
	font-family: 'Poppins', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
}

.ignitia-portal-table td {
	padding: 14px;
	border-bottom: 1px solid #eef2f5;
	font-size: 0.87rem;
	vertical-align: middle;
}

.ignitia-portal-table tr:last-child td {
	border-bottom: 0;
}

.ignitia-portal-table__institucion {
	font-weight: 700;
	color: var(--ignitia-navy);
}

.ignitia-portal-table__acciones {
	text-align: right;
	white-space: nowrap;
}

.ignitia-portal-table__acciones .ignitia-portal-btn {
	margin-top: 0;
	margin-left: 5px;
}

.ignitia-portal-table__vacio td {
	padding: 26px 14px;
	color: var(--ignitia-muted);
	text-align: center;
}

.ignitia-portal-tabla-scroll {
	overflow-x: auto;
}

/* ---- Modal ---- */

.ignitia-portal-modal {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 20, 45, 0.55);
	overflow-y: auto;
}

.ignitia-portal-modal[hidden] {
	display: none;
}

.ignitia-portal-modal__box {
	width: min(480px, 100%);
	margin: auto;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 30px 70px -20px rgba(0, 20, 45, 0.5);
	overflow: hidden;
}

.ignitia-portal-modal__head {
	padding: 22px 26px 0;
}

.ignitia-portal-modal__head h2 {
	font-size: 1.25rem;
	margin: 0;
}

.ignitia-portal-modal__head p {
	margin: 7px 0 0;
	color: var(--ignitia-muted);
	font-size: 0.83rem;
	line-height: 1.5;
}

.ignitia-portal-modal__body {
	padding: 22px 26px;
}

.ignitia-portal-modal__acciones {
	display: flex;
	justify-content: flex-end;
	gap: 9px;
	padding: 16px 26px;
	border-top: 1px solid var(--ignitia-linea);
	background: #fafbfc;
}

.ignitia-portal-modal__acciones .ignitia-portal-btn {
	margin-top: 0;
}

/* Resumen de credenciales: se muestra una sola vez, así que se lee como una
   ficha para copiar, no como un párrafo cualquiera. */
.ignitia-portal-credenciales {
	margin: 0;
	border: 1px solid var(--ignitia-linea);
	border-radius: 10px;
	overflow: hidden;
}

.ignitia-portal-credenciales div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 15px;
	border-bottom: 1px solid #eef2f5;
}

.ignitia-portal-credenciales div:last-child {
	border-bottom: 0;
}

.ignitia-portal-credenciales dt {
	color: var(--ignitia-muted);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ignitia-portal-credenciales dd {
	margin: 0;
	font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ignitia-navy);
	overflow-wrap: anywhere;
	text-align: right;
}

/* ==================== Búsqueda y paginación (listados) ====================
   Compartido por accesos, categorías, temas y tutoriales — la misma
   barra de búsqueda y el mismo componente de paginación en las 4
   pantallas con listados que pueden crecer. */

.ignitia-portal-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.ignitia-portal-search {
	position: relative;
	flex: 1 1 260px;
	max-width: 360px;
}

.ignitia-portal-search .ignitia-portal-field {
	margin-bottom: 0;
	padding-left: 38px;
}

.ignitia-portal-search .ignitia-portal-icon {
	position: absolute;
	top: 50%;
	left: 13px;
	width: 15px;
	height: 15px;
	transform: translateY(-50%);
	color: var(--ignitia-muted);
	pointer-events: none;
}

.ignitia-portal-resultado {
	position: relative;
	min-height: 60px;
}

/* Mientras espera la respuesta de buscar/paginar, se atenúa en vez de
   desaparecer — evita el parpadeo de una lista vacía por un instante. */
.ignitia-portal-resultado.is-cargando {
	opacity: 0.5;
	pointer-events: none;
}

.ignitia-portal-paginacion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin-top: 26px;
}

.ignitia-portal-paginacion__num,
.ignitia-portal-paginacion__flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid var(--ignitia-linea);
	border-radius: 8px;
	background: #fff;
	color: var(--ignitia-navy);
	font-family: 'Poppins', sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}

.ignitia-portal-paginacion__num:hover,
.ignitia-portal-paginacion__flecha:hover {
	border-color: var(--ignitia-teal);
	color: var(--ignitia-teal);
}

.ignitia-portal-paginacion__num.active {
	background: var(--ignitia-teal);
	border-color: var(--ignitia-teal);
	color: #fff;
	cursor: default;
}

.ignitia-portal-paginacion__flecha[disabled] {
	opacity: 0.4;
	cursor: default;
}

.ignitia-portal-paginacion__flecha .ignitia-portal-icon {
	width: 13px;
	height: 13px;
}

.ignitia-portal-paginacion__puntos {
	padding: 0 4px;
	color: var(--ignitia-muted);
}

/* ==================== Soporte ==================== */

.ignitia-portal-support-box {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 30px;
	align-items: center;
	padding: 37px;
	border-radius: 13px;
	background: var(--ignitia-navy);
	color: #fff;
}

.ignitia-portal-support-box h2 {
	margin: 0 0 9px;
	font-size: 1.6rem;
}

.ignitia-portal-support-box p {
	max-width: 560px;
	margin: 0;
	color: #b8c7d8;
	line-height: 1.6;
}

.ignitia-portal-support-box__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

@media (max-width: 620px) {
	.ignitia-portal-support-box {
		grid-template-columns: 1fr;
		padding: 27px;
	}
}