/* Tema comun de SIRR: colores del logo (images/logo_prin.jpg) y fondo de pagina.
   Lo cargan el login y las demas pantallas; cambiar el fondo aqui lo cambia en todas. */
:root {
	--rojo: #b21623;
	--rojo-claro: #d42a38;
	--fondo: #0d0d10;
	--tarjeta: #17171c;
	--borde: #2a2a32;
	--texto: #f3f3f5;
	--texto-suave: #9a9aa6;
}

html {
	min-height: 100%;
}

body {
	background:
		radial-gradient(900px 600px at 85% -10%, rgba(178, 22, 35, 0.35), transparent 60%),
		radial-gradient(700px 500px at -10% 110%, rgba(178, 22, 35, 0.22), transparent 60%),
		var(--fondo);
	background-attachment: fixed;
}

/* Logo centrado en la parte superior de las paginas internas. */
.logo-interno {
	margin: 0 0 22px;
	text-align: center;
}

.logo-interno img {
	width: 96px;
	height: 96px;
	border-radius: 20px;
	box-shadow: 0 10px 26px rgba(178, 22, 35, 0.45);
}

/* En la pagina de inicio, que no tiene mas contenido, el logo va grande. */
.logo-interno.grande {
	margin-top: 8vh;
}

.logo-interno.grande img {
	width: 200px;
	height: 200px;
	border-radius: 40px;
}

/* Botones principales (.btn-primary de Bootstrap 3): rojo del logo en lugar del azul de fabrica.
   Los selectores repiten los estados de Bootstrap para ganarle en todos ellos. */
.btn-primary,
.btn-primary:link,
.btn-primary:visited {
	border-color: var(--rojo-claro);
	background-color: var(--rojo);
	background-image: none;
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary.active:hover,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary {
	border-color: #ff5a67;
	background-color: var(--rojo-claro);
	color: #fff;
}

.btn-primary:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.btn-primary.disabled,
.btn-primary[disabled],
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary {
	border-color: var(--rojo-claro);
	background-color: var(--rojo);
	opacity: 0.6;
}