/* Común a los tres portales (Ion, paciente y centro): el azul de marca, el foco visible y el botón
   de pago ya enviado */
:root {
	--brand: #2e37a4;
	--brand-dark: #232a86;
	--text-muted: #5c5f66; /* 6,4:1 sobre blanco, a diferencia del #6c757d de Bootstrap en fondos grises */
	--focus-ring: var(--brand); /* 9,5:1 sobre blanco */
	--focus-halo: #fff;
}

/* Foco visible con teclado (WCAG 2.4.7) en todo lo que se alcanza con Tab; con el mouse no se dibuja.
   Lo que solo se enfoca por código (tabindex="-1": paneles, modales, destinos de un salto) queda
   fuera. Dos tonos, el anillo de marca con un halo blanco, para que se vea sobre fondos claros y
   oscuros (los footers y el color de cada centro). Va con !important porque las hojas de cada
   portal y de Bootstrap quitan el outline o cambian la sombra en :focus; el halo reemplaza la
   sombra propia del elemento mientras tiene el foco. La etiqueta de un .btn-check (el input va
   oculto) lleva el mismo anillo. Los campos de formulario conservan el foco de Bootstrap */
:is(a, button, .btn, .nav-link, .btn-close, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
.btn-check:focus-visible + .btn {
	outline: 3px solid var(--focus-ring) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px var(--focus-halo) !important;
	transition: none;
}

/* Botón de un formulario data-submit-once (drapp.js), también fuera del form: ya enviado espera sin hover ni clic */
[type="submit"][data-submitting] {
	opacity: 0.85;
	pointer-events: none;
}