/* =========================================================
   HOME BICHO CERTO
   Upgrade visual
   ========================================================= */

/* ---------------------------------------------------------
   TOPO / BOAS-VINDAS
   --------------------------------------------------------- */

.bc-hero{
	position: relative;
	overflow: hidden;
	margin-bottom: 14px;
	padding: 22px 24px;
	border-radius: 18px;
	border: 1px solid rgba(0,178,133,.18);

	background:
		radial-gradient(
			circle at 92% 10%,
			rgba(var(--bc-user-rgb, 23,38,54), .10),
			transparent 34%
		),
		linear-gradient(
			135deg,
			#ffffff 0%,
			#fbfcfd 58%,
			rgba(var(--bc-user-rgb, 23,38,54), .035) 100%
		);

	box-shadow:
		0 8px 24px rgba(9,85,78,.08),
		inset 0 1px 0 rgba(255,255,255,.8);
}

.bc-hero::before{
	content:"";
	position:absolute;
	top:-70px;
	right:-55px;
	width:190px;
	height:190px;
	border-radius:50%;
	background:rgba(var(--bc-user-rgb, 23,38,54), .075);
	pointer-events:none;
}

.bc-hero::after{
	content:"";
	position:absolute;
	right:55px;
	bottom:-75px;
	width:145px;
	height:145px;
	border-radius:50%;
	background:rgba(var(--bc-user-rgb, 23,38,54), .045);
	pointer-events:none;
}

.bc-hero h4{
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	margin:0 0 5px;
	color:#1f2937;
	font-size:1.18rem;
	font-weight:800;
	line-height:1.3;
}

.bc-hero h4 span{
	color:var(--bc-user-color, #172636);
}

.bc-hero .breadcrumb{
	position:relative;
	z-index:2;
	margin:0;
	padding:0;
	background:transparent;
}

.bc-hero .breadcrumb-item{
	color:#748078;
	font-size:.86rem;
	line-height:1.4;
}

.bc-hero .breadcrumb-item.active{
	color:#748078;
}


/* ---------------------------------------------------------
   CARDS DA HOME
   --------------------------------------------------------- */

#main .card{
	border:1px solid #e7ece9;
	border-radius:14px;
	box-shadow:0 5px 18px rgba(25,55,45,.06);
	overflow:hidden;
}

#main .card-header{
	border-bottom:0;
}

#main .card.info-card{
	transition:
		transform .18s ease,
		box-shadow .18s ease;
}

@media (hover:hover){
	#main .card.info-card:hover{
		transform:translateY(-2px);
		box-shadow:0 9px 24px rgba(25,55,45,.10);
	}
}


/* ---------------------------------------------------------
   CABEÇALHOS ESCUROS DOS CARDS
   --------------------------------------------------------- */

#main .card-header.bg-dark{
	background:
		linear-gradient(
			135deg,
			#263238,
			#202a2e
		) !important;

	border-bottom:0;
}

#main .card-header h6{
	letter-spacing:.15px;
}


/* ---------------------------------------------------------
   BOTÕES
   --------------------------------------------------------- */

#main .btn{
	border-radius:8px;
	font-weight:600;
}

#main .btn-dark{
	background:#263238;
	border-color:#263238;
}

#main .btn-success{
	background:#008c69;
	border-color:#008c69;
}


/* ---------------------------------------------------------
   TABELAS
   --------------------------------------------------------- */

#main .table{
	--bs-table-hover-bg:rgba(0,178,133,.045);
}

#main .table > :not(caption) > * > *{
	vertical-align:middle;
}


/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

#main a{
	transition:
		color .18s ease,
		opacity .18s ease;
}


/* ---------------------------------------------------------
   ÁREA PRINCIPAL / DEGRADÊ FIXO DA HOME
   --------------------------------------------------------- */

#main.main{
    position:relative;
    isolation:isolate;
    --bc-home-gradient-height:125px;
}

/*
 * Camada independente do fundo do template.
 * Fica visível assim que a home abre e não depende do card.
 */
#main.main::before{
    content:"";
    position:absolute;
    z-index:0;

    /*
     * Sobe a camada alguns pixels para que ela entre por baixo do header.
     * Visualmente, barra superior + degradê passam a formar uma peça única.
     */
    top:-18px;
    left:0;
    right:0;

    height:calc(var(--bc-home-gradient-height) + 18px) !important;
    min-height:calc(var(--bc-home-gradient-height) + 18px) !important;
    max-height:calc(var(--bc-home-gradient-height) + 18px) !important;

    pointer-events:none;

    /*
     * Começa com a MESMA cor sólida do header e só depois perde intensidade:
     * 100% -> 100% -> 80% -> transparente.
     */
    background:linear-gradient(
        180deg,
        rgba(var(--bc-user-rgb, 23,38,54), 1) 0%,
        rgba(var(--bc-user-rgb, 23,38,54), 1) 22%,
        rgba(var(--bc-user-rgb, 23,38,54), .72) 58%,
        rgba(var(--bc-user-rgb, 23,38,54), 0) 100%
    );

    transition:background .18s ease;
}

/* mantém todo o conteúdo da home acima da camada */
#main.main > *{
    position:relative;
    z-index:1;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:767px){

	.bc-hero{
		margin-bottom:12px;
		padding:17px 16px;
		border-radius:14px;
	}

	.bc-hero h4{
		font-size:1rem;
		margin-bottom:4px;
	}

	.bc-hero .breadcrumb-item{
		font-size:.78rem;
		line-height:1.35;
	}

	.bc-hero::before{
		top:-70px;
		right:-75px;
		width:165px;
		height:165px;
	}

	.bc-hero::after{
		display:none;
	}

	#main .card{
		border-radius:12px;
		box-shadow:0 3px 12px rgba(25,55,45,.055);
	}

	#main.main{
		--bc-home-gradient-height:110px;
	}

	#main.main::before{
		top:-20px;
		height:calc(var(--bc-home-gradient-height) + 20px) !important;
		min-height:calc(var(--bc-home-gradient-height) + 20px) !important;
		max-height:calc(var(--bc-home-gradient-height) + 20px) !important;
	}

}


/* ---------------------------------------------------------
   CELULARES PEQUENOS
   --------------------------------------------------------- */

@media (max-width:390px){

	.bc-hero{
		padding:15px 14px;
	}

	.bc-hero h4{
		font-size:.95rem;
	}

	.bc-hero .breadcrumb-item{
		font-size:.75rem;
	}

}