/* =================================================================== */
/* 1. VARIÁVEIS E ESTILOS GERAIS
/* =================================================================== */
:root {
	--custom-yellow: #ffee00;
	--custom-text: #233343;
	--custom-card-bg: #2c3e50;
	--custom-card-header-bg: #34495e;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
}

a, .bi-question-circle, .bi-mailbox {
	color: var(--custom-yellow);
	text-decoration: none;
}

a:hover {
	color: #fff;
}

.text-custom-yellow {
	color: var(--custom-yellow) !important;
}

/* =================================================================== */
/* 2. COMPONENTES PERSONALIZADOS
/* =================================================================== */

/* Cabeçalho */
.header-main {
	background-color: var(--custom-text);
	color: #fff;
	border-bottom: 5px solid var(--custom-yellow);
}

.header-main h1, .header-main .lead {
	color: #fff;
}

#foto {
	width: 150px;
	height: 150px;
}

.bi-translate,
.bi-share, .bi-printer {
  font-size: 1.5em; /* Aumenta o tamanho em 5% */
}

/* Cards */
.card {
	background-color: var(--custom-card-bg);
	border: 1px solid var(--custom-card-header-bg);
}

.card-header {
	background-color: var(--custom-card-header-bg);
	color: var(--custom-yellow);
	border-bottom: 1px solid var(--custom-card-header-bg);
}

.card-header h4 {
	margin: 0;
	display: flex;
	align-items: center;
	color: var(--custom-yellow);
}

.card-header-icon {
	vertical-align: middle;
	margin-right: 8px;
}

.card-title-custom {
	color: var(--custom-yellow);
	display: flex;
	align-items: center;
}

.material-icons {
	vertical-align: middle;
	margin-right: 8px;
}

/* Barra de Progresso */
.progress .progress-bar {
	background-color: var(--custom-yellow);
	background-image: linear-gradient(135deg,
			rgba(0, 0, 0, 0.2) 25%, transparent 25%,
			transparent 50%, rgba(0, 0, 0, 0.2) 50%,
			rgba(0, 0, 0, 0.2) 75%, transparent 75%,
			transparent);
	background-size: 1rem 1rem;
	animation: progress-animation 45s linear infinite;
	color: var(--custom-text);
	font-weight: bold;
}

@keyframes progress-animation {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}

/* Thumbnail do Portfólio */
.portfolio-thumbnail {
	border: 2px solid var(--custom-card-header-bg);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-thumbnail:hover {
	transform: scale(1.03);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* =================================================================== */
/* 3. ESTILOS DE IMPRESSÃO
/* =================================================================== */
@media print {
  /* Oculta elementos que não são relevantes para a impressão */
  .dropdown,
  #share-button,
  #print-button,
  footer,
  .popover {
    display: none !important;
  }

  /* Garante que o corpo do documento tenha um fundo branco para impressão */
  body {
    background-color: #fff !important;
  }
}