/*
 * SEGURIDAD — Gestión de Accesos LMS · Tarjeta de acceso del estudiante (1.0.1)
 * Identidad visual ADOSIP.
 *
 * Encapsulado: todas las reglas cuelgan de .sga-access y no afectan a ningún otro
 * botón, enlace o campo de WordPress, MasterStudy, Elementor o el tema.
 *
 * Causa del error de botones invisibles en 1.0.0-rc.1: reglas globales del tema
 * (p. ej. reset.css de Hello Elementor: «[type=button],[type=submit],button{background-color:transparent;color:#c36}»
 * y en :hover/:focus «background-color:#c36;color:#fff») se cargaban después de esta hoja con la misma
 * especificidad y anulaban el fondo, mientras el texto blanco seguía forzado → blanco sobre blanco.
 * Por eso aquí los selectores de botones y campos usan doble clase bajo .sga-access y !important en las
 * propiedades que los temas suelen reescribir, en todos los estados (hover, focus, active, disabled, carga).
 */

.sga-access {
	--sga-blue: #08198f;
	--sga-blue-hover: #061270;
	--sga-blue-active: #040c52;
	--sga-blue-soft: #eef1fb;
	--sga-white: #ffffff;
	--sga-bg: #f5f7fb;
	--sga-border: #dce3ef;
	--sga-text: #172033;
	--sga-muted: #64748b;
	--sga-ok: #0f6b3a;
	--sga-ok-bg: #e7f5ee;
	--sga-ok-border: #b9e2cb;
	--sga-warn: #8a4b00;
	--sga-warn-bg: #fff5e6;
	--sga-warn-border: #f5d7a8;
	--sga-err: #b42318;
	--sga-err-bg: #fdeceb;
	--sga-err-border: #f6c7c3;
	--sga-radius: 12px;
	--sga-radius-sm: 8px;
	--sga-focus: 0 0 0 3px rgba(8, 25, 143, 0.22);

	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 16px;
	padding: 20px;
	border: 1px solid var(--sga-border);
	border-radius: var(--sga-radius);
	background: var(--sga-white);
	box-shadow: 0 1px 2px rgba(23, 32, 51, 0.04);
	color: var(--sga-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

.sga-access *,
.sga-access *::before,
.sga-access *::after {
	box-sizing: border-box;
}

.sga-access [hidden] {
	display: none !important;
}

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

.sga-access .sga-access__header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 14px;
}

.sga-access .sga-access__icon {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--sga-blue-soft);
	color: var(--sga-blue);
}

.sga-access .sga-access__heading {
	min-width: 0;
}

.sga-access .sga-access__title {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--sga-text) !important;
	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	line-height: 1.3 !important;
	text-transform: none !important;
}

.sga-access .sga-access__subtitle {
	margin: 3px 0 0 !important;
	padding: 0;
	color: var(--sga-muted) !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
}

/* ---------- Textos ---------- */

.sga-access .sga-access__text {
	margin: 0 0 14px !important;
	padding: 0;
	color: var(--sga-text) !important;
	font-size: 14.5px !important;
	line-height: 1.55 !important;
}

.sga-access .sga-access__note {
	margin: 0 0 14px !important;
	padding: 10px 12px;
	border: 1px solid var(--sga-border);
	border-radius: var(--sga-radius-sm);
	background: var(--sga-bg);
	color: var(--sga-muted) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

/* ---------- Indicadores de estado ---------- */

.sga-access .sga-access__badge {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px !important;
	padding: 4px 10px 4px 9px !important;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

.sga-access .sga-access__dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.sga-access .sga-access__badge--pending {
	border-color: var(--sga-warn-border);
	background: var(--sga-warn-bg);
	color: var(--sga-warn) !important;
}

.sga-access .sga-access__badge--approved {
	border-color: #c9d1f2;
	background: var(--sga-blue-soft);
	color: var(--sga-blue) !important;
}

.sga-access .sga-access__badge--rejected {
	border-color: var(--sga-err-border);
	background: var(--sga-err-bg);
	color: var(--sga-err) !important;
}

.sga-access .sga-access__badge--granted {
	border-color: var(--sga-ok-border);
	background: var(--sga-ok-bg);
	color: var(--sga-ok) !important;
}

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

.sga-access .sga-access__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.sga-access .sga-btn.sga-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: relative;
	display: inline-flex !important;
	flex: 1 1 160px;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	width: auto !important;
	min-width: 0;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 10px 18px !important;
	border-width: 1.5px !important;
	border-style: solid !important;
	border-radius: var(--sga-radius-sm) !important;
	background-image: none !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	font-style: normal !important;
	letter-spacing: normal !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	white-space: normal !important;
	cursor: pointer;
	opacity: 1 !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Principal: azul institucional, texto blanco (todos los estados) */
.sga-access .sga-btn.sga-btn--primary,
.sga-access .sga-btn.sga-btn--primary:visited {
	border-color: var(--sga-blue) !important;
	background-color: var(--sga-blue) !important;
	color: var(--sga-white) !important;
}

.sga-access .sga-btn.sga-btn--primary:hover {
	border-color: var(--sga-blue-hover) !important;
	background-color: var(--sga-blue-hover) !important;
	color: var(--sga-white) !important;
}

.sga-access .sga-btn.sga-btn--primary:active {
	border-color: var(--sga-blue-active) !important;
	background-color: var(--sga-blue-active) !important;
	color: var(--sga-white) !important;
}

.sga-access .sga-btn.sga-btn--primary:focus,
.sga-access .sga-btn.sga-btn--primary:focus-visible {
	border-color: var(--sga-blue) !important;
	background-color: var(--sga-blue) !important;
	color: var(--sga-white) !important;
}

/* Secundario: blanco, borde y texto azul (todos los estados) */
.sga-access .sga-btn.sga-btn--secondary,
.sga-access .sga-btn.sga-btn--secondary:visited,
.sga-access .sga-btn.sga-btn--secondary:focus {
	border-color: var(--sga-blue) !important;
	background-color: var(--sga-white) !important;
	color: var(--sga-blue) !important;
}

.sga-access .sga-btn.sga-btn--secondary:hover,
.sga-access .sga-btn.sga-btn--secondary:active,
.sga-access .sga-btn.sga-btn--secondary[aria-expanded="true"] {
	border-color: var(--sga-blue) !important;
	background-color: var(--sga-blue-soft) !important;
	color: var(--sga-blue) !important;
}

/* Botón auxiliar «Pegar» */
.sga-access .sga-btn.sga-btn--ghost,
.sga-access .sga-btn.sga-btn--ghost:focus {
	flex: 0 0 auto;
	min-height: 44px !important;
	padding: 8px 14px !important;
	border-color: var(--sga-border) !important;
	background-color: var(--sga-white) !important;
	color: var(--sga-blue) !important;
	font-size: 14px !important;
}

.sga-access .sga-btn.sga-btn--ghost:hover,
.sga-access .sga-btn.sga-btn--ghost:active {
	border-color: var(--sga-blue) !important;
	background-color: var(--sga-blue-soft) !important;
	color: var(--sga-blue) !important;
}

/* Foco accesible visible solo con teclado; no cambia colores */
.sga-access .sga-btn.sga-btn:focus {
	outline: none !important;
}

.sga-access .sga-btn.sga-btn:focus-visible {
	outline: none !important;
	box-shadow: var(--sga-focus) !important;
}

/* Desactivado y en carga */
.sga-access .sga-btn.sga-btn:disabled,
.sga-access .sga-btn.sga-btn[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.6 !important;
}

.sga-access .sga-btn.sga-btn[aria-busy="true"] {
	cursor: progress;
	opacity: 0.85 !important;
}

.sga-access .sga-btn.sga-btn--primary:disabled,
.sga-access .sga-btn.sga-btn--primary[aria-busy="true"] {
	border-color: var(--sga-blue) !important;
	background-color: var(--sga-blue) !important;
	color: var(--sga-white) !important;
}

.sga-access .sga-btn.sga-btn--secondary:disabled,
.sga-access .sga-btn.sga-btn--secondary[aria-busy="true"] {
	border-color: var(--sga-blue) !important;
	background-color: var(--sga-white) !important;
	color: var(--sga-blue) !important;
}

.sga-access .sga-btn__spinner {
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: sga-spin 0.75s linear infinite;
}

@keyframes sga-spin {
	to {
		transform: rotate(360deg);
	}
}

.sga-access .sga-btn.sga-btn--block {
	flex-basis: 100%;
	width: 100% !important;
}

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

.sga-access .sga-access__form {
	margin: 14px 0 0;
	padding: 16px;
	border: 1px solid var(--sga-border);
	border-radius: var(--sga-radius-sm);
	background: var(--sga-bg);
}

.sga-access .sga-access__label {
	display: block !important;
	margin: 0 0 6px !important;
	padding: 0;
	color: var(--sga-text) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
}

.sga-access .sga-access__optional {
	color: var(--sga-muted);
	font-weight: 400;
}

.sga-access .sga-access__field {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.sga-access .sga-access__input.sga-access__input {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: block !important;
	flex: 1 1 auto;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	height: auto !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 10px 12px !important;
	border: 1px solid var(--sga-border) !important;
	border-radius: var(--sga-radius-sm) !important;
	background: var(--sga-white) !important;
	box-shadow: none !important;
	color: var(--sga-text) !important;
	font-family: inherit !important;
	font-size: 16px !important; /* evita el zoom automático en iOS */
	line-height: 1.4 !important;
	outline: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.sga-access .sga-access__input.sga-access__input::placeholder {
	color: #94a3b8 !important;
	opacity: 1;
}

.sga-access .sga-access__input.sga-access__input:hover {
	border-color: #b8c4da !important;
}

.sga-access .sga-access__input.sga-access__input:focus {
	border-color: var(--sga-blue) !important;
	box-shadow: var(--sga-focus) !important;
}

.sga-access .sga-access__input.sga-access__input[aria-invalid="true"] {
	border-color: var(--sga-err) !important;
	box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14) !important;
}

.sga-access .sga-access__input.sga-access__input:disabled {
	background: var(--sga-bg) !important;
	color: var(--sga-muted) !important;
	cursor: not-allowed;
}

.sga-access .sga-access__textarea.sga-access__textarea {
	min-height: 84px !important;
	max-height: 200px;
	resize: vertical;
}

.sga-access .sga-access__input--token.sga-access__input--token {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
	font-size: 15px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
}

.sga-access .sga-access__hint {
	margin: 6px 0 12px !important;
	padding: 0;
	color: var(--sga-muted) !important;
	font-size: 12.5px !important;
	line-height: 1.45 !important;
}

.sga-access .sga-access__hint[data-sga-count] {
	text-align: right;
}

/* ---------- Mensajes (éxito, error, información) ---------- */

.sga-access .sga-access__feedback:empty {
	display: none;
}

.sga-access .sga-access__feedback {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 14px 0 0;
	padding: 11px 13px;
	border: 1px solid transparent;
	border-radius: var(--sga-radius-sm);
	font-size: 14px;
	line-height: 1.45;
}

.sga-access .sga-access__feedback svg {
	flex: 0 0 18px;
	margin-top: 1px;
}

.sga-access .sga-access__feedback.is-success {
	border-color: var(--sga-ok-border);
	background: var(--sga-ok-bg);
	color: var(--sga-ok);
}

.sga-access .sga-access__feedback.is-error {
	border-color: var(--sga-err-border);
	background: var(--sga-err-bg);
	color: var(--sga-err);
}

.sga-access .sga-access__feedback.is-info {
	border-color: #c9d1f2;
	background: var(--sga-blue-soft);
	color: var(--sga-blue);
}

/* ---------- Aviso compacto (autorizado en curso de pago) ---------- */

.sga-access.sga-access--notice {
	padding: 12px 14px;
	border-color: var(--sga-ok-border);
	background: var(--sga-ok-bg);
	box-shadow: none;
}

.sga-access--notice .sga-access__badge {
	margin: 0 0 4px !important;
}

.sga-access--notice .sga-access__text {
	margin: 0 !important;
	color: var(--sga-ok) !important;
	font-size: 14px !important;
}

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

@media (max-width: 480px) {
	.sga-access {
		padding: 16px;
		border-radius: 10px;
	}

	.sga-access .sga-btn.sga-btn {
		flex-basis: 100%;
		width: 100% !important;
	}

	.sga-access .sga-btn.sga-btn--paste {
		flex-basis: auto;
		width: auto !important;
	}

	.sga-access .sga-access__form {
		padding: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sga-access .sga-btn__spinner {
		animation-duration: 2s;
	}

	.sga-access .sga-btn.sga-btn,
	.sga-access .sga-access__input.sga-access__input {
		transition: none !important;
	}
}