/* Identidad COITT sobre Bootstrap. Los colores base se afinaran mas adelante. */
:root {
	--coitt-primario: #1f4e79;
	--coitt-primario-oscuro: #163a5a;
}

.coitt-navbar {
	background-color: #fff;
	border-bottom: 1px solid #dee2e6;
}

/* Textos de las opciones de la cabecera en color corporativo. */
.coitt-navbar .navbar-brand,
.coitt-navbar .nav-link {
	color: var(--coitt-primario);
}
.coitt-navbar .nav-link {
	font-weight: 500;
	padding: 0.25rem 0.6rem;
	border-radius: 0.375rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.coitt-navbar .nav-link:hover,
.coitt-navbar .nav-link:focus {
	color: var(--coitt-primario-oscuro);
	background-color: rgba(31, 78, 121, 0.08);
}

/* Bloque de sesion (usuario autenticado): boton "Cerrar sesion" arriba y el
   email del usuario justo debajo, alineados a la derecha y separados de los items
   por una linea vertical. */
.coitt-sesion {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding-left: 0.75rem;
	border-left: 1px solid #dee2e6;
}
.coitt-usuario {
	font-size: 0.75rem;
	color: #6c757d;
	line-height: 1.1;
}

/* Logo del COITT (a color) sobre la cabecera blanca. */
.coitt-logo {
	background: transparent;
	padding: 0;
}

/* Cabecera compacta: una sola banda con el alto del logo. El logo va a la
   izquierda; el titulo "Canal de Denuncias" en la fila superior y el menu en la
   fila inferior (NO en la misma linea). En escritorio (>=1024px) el titulo va
   centrado respecto a la pagina y el menu abajo-derecha (ambos absolutos, no
   aportan altura). En pantallas pequenas se apilan (la cabecera puede crecer). */
.coitt-cabecera {
	min-height: 84px;
}
.coitt-brand-centrado {
	text-align: center;
}
.coitt-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: flex-end;
}
@media (max-width: 1023.98px) {
	.coitt-cabecera {
		flex-wrap: wrap;
	}
	.coitt-brand-centrado,
	.coitt-menu {
		flex: 1 1 100%;
	}
	.coitt-menu {
		justify-content: center;
	}
	/* Movil: el bloque de sesion (Cerrar sesion + email) se alinea con el logo,
	   arriba a la derecha, y el menu (Denuncias/Usuarios) queda centrado debajo. */
	.coitt-sesion {
		position: absolute;
		top: 0.5rem;
		right: 0;
		border-left: none;
		padding-left: 0;
		align-items: center;
	}
}
@media (min-width: 1024px) {
	.coitt-brand-centrado {
		position: absolute;
		top: 6px;
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
	}
	.coitt-menu {
		position: absolute;
		right: 0;
		bottom: 6px;
	}
}

.btn-primary {
	--bs-btn-bg: var(--coitt-primario);
	--bs-btn-border-color: var(--coitt-primario);
	--bs-btn-hover-bg: var(--coitt-primario-oscuro);
	--bs-btn-hover-border-color: var(--coitt-primario-oscuro);
	--bs-btn-active-bg: var(--coitt-primario-oscuro);
	--bs-btn-active-border-color: var(--coitt-primario-oscuro);
}

a {
	color: var(--coitt-primario);
}

.text-coitt {
	color: var(--coitt-primario);
}

/* Placeholder de los desplegables: gris atenuado mientras la opción vacía esté
   seleccionada, para que no parezca un valor válido. Las opciones, en color normal. */
.form-select:has(option[value=""]:checked) {
	color: var(--bs-secondary-color);
}
.form-select option {
	color: var(--bs-body-color);
}

/* Indicador de pasos del asistente. */
.wizard-steps .wizard-step {
	cursor: pointer;
	color: var(--bs-secondary-color);
	font-size: .9rem;
}
.wizard-steps .wizard-step .badge {
	background: var(--bs-secondary-bg);
	color: var(--bs-secondary-color);
}
.wizard-steps .wizard-step.activo {
	color: var(--coitt-primario);
	font-weight: 600;
}
.wizard-steps .wizard-step.activo .badge {
	background: var(--coitt-primario);
	color: #fff;
}

/* Numero de Expediente destacado en la confirmacion. */
.numero-expediente {
	font-family: var(--bs-font-monospace);
	font-size: 1.25rem;
	letter-spacing: .03em;
	word-break: break-all;
}