/* -----------------------------------------------------------
   BASE
----------------------------------------------------------- */
body {
	font-family: 'Inter', sans-serif;
	background: #faf7f7;
	color: #333;
}

/* -----------------------------------------------------------
   HEADER & LAYOUT
----------------------------------------------------------- */
#sub_content_in h1 {
	font-weight: 700;
	letter-spacing: 0.5px;
}

.bg_color_gray {
	background: #f4f1f1;
}

/* -----------------------------------------------------------
   CARDS – LISTA DE TESTES
----------------------------------------------------------- */
.test-card {
	background: white;
	border-radius: 14px;
	padding: 22px;
	margin-bottom: 18px;
	box-shadow: 0 3px 10px rgba(0,0,0,0.06);
	border: 1px solid #e9cecd;
	transition: all .2s ease;
}

	.test-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 18px rgba(0,0,0,0.10);
	}

/* Cabeçalho do card */
.test-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.test-name {
	font-size: 1.2rem;
	font-weight: 600;
	color: #555;
}

.test-date {
	font-size: 0.9rem;
	color: #777;
}

/* Botão de ver respostas */
.btn-respostas {
	background: #e9cecd;
	color: #555;
	border: none;
	padding: 10px 16px;
	border-radius: 10px;
	transition: all .2s;
	font-weight: 600;
}

	.btn-respostas:hover {
		background: #d7b6b4;
	}

/* Botão de deletar */
.delete-button {
	background: #c0392b !important;
	border-radius: 8px;
}

	.delete-button:hover {
		filter: brightness(0.90);
	}

/* -----------------------------------------------------------
   BUSCA
----------------------------------------------------------- */
#searchInput {
	border-radius: 10px;
	border: 1px solid #ddd;
	background: white;
	padding-left: 34px;
	transition: all .2s;
}

	#searchInput:focus {
		border-color: #bfa4a3;
		box-shadow: 0 0 8px rgba(233, 206, 205, 0.5);
	}

/* Quando abrir teste completo, esconder busca */
body.modo-detalhe #searchInput,
body.modo-detalhe #sortSelect {
	display: none !important;
}

/* -----------------------------------------------------------
   BOTÃO VOLTAR — FIXO NO TOPO
----------------------------------------------------------- */
.btn-voltar {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 10px 18px;
	background: #e9cecd;
	color: #555;
	border-radius: 10px;
	border: 1px solid #d7b6b4;
	margin-bottom: 18px;
	font-weight: 600;
	box-shadow: 0 2px 10px rgba(0,0,0,0.06);
	display: inline-block;
}

	.btn-voltar:hover {
		background: #d7b6b4;
	}

.btn-voltar {
	border: none;
	display: flex;
	align-items: center;
	gap: 6px;
	color: #555;
	font-weight: 600;
	font-size: 17px;
	cursor: pointer;
	margin-bottom: 20px;
}

.btn-voltar {
	
	border: none;
	color: #555;
	font-size: 18px;
	cursor: pointer;
	margin-bottom: 10px;
}

/* -----------------------------------------------------------
   RESUMO (SÍNTESE) NO TOPO DO DETALHE
----------------------------------------------------------- */
.resumo-card {
	background: #fff;
	border: 1px solid #e9cecd;
	border-radius: 14px;
	padding: 24px;
	margin-bottom: 30px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.resumo-titulo {
	font-size: 1.3rem;
	font-weight: 700;
	color: #555;
	margin-bottom: 12px;
}

.resumo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.resumo-item {
	padding: 12px 14px;
	background: #fdf9f9;
	border-radius: 10px;
	border: 1px solid #e6d5d5;
	font-size: 0.95rem;
	color: #444;
	font-weight: 500;
}

/* -----------------------------------------------------------
   TABELAS DO DETALHE
----------------------------------------------------------- */
.table {
	border-radius: 10px !important;
	overflow: hidden;
	background: white;
	border: 1px solid #e9cecd;
}

	.table thead {
		background: #e9cecd !important;
		color: #555;
	}

	.table tbody tr:hover {
		background: #f7eeee;
	}

/* -----------------------------------------------------------
   MICRO ANIMAÇÕES
----------------------------------------------------------- */
.fade-in {
	animation: fadeIn .35s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* -----------------------------------------------------------
   MOBILE
----------------------------------------------------------- */
@media (max-width: 576px) {

	.test-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.btn-respostas {
		width: 100%;
	}

	.btn-voltar {
		width: 100%;
		text-align: center;
	}



	.resumo-grid {
		grid-template-columns: 1fr;
	}
}


.card-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.card-menu {
	font-size: 22px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
	user-select: none;
	color: #444;
	transition: 0.2s;
}

	.card-menu:hover {
		background: rgba(0,0,0,0.05);
	}

.menu-opcoes {
	position: absolute;
	right: 10px;
	top: 55px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	display: none;
	z-index: 50;
}

.menu-item {
	padding: 10px 14px;
	cursor: pointer;
	transition: 0.2s;
}

	.menu-item:hover {
		background: #f8f8f8;
	}


.test-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 14px;
	padding: 22px;
	margin-bottom: 20px;
	cursor: pointer;
	transition: 0.2s;
	position: relative;
}

	.test-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	}

.test-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.test-info .test-name {
	font-size: 20px;
	font-weight: 600;
	color: #333;
	margin-bottom: 2px;
}

.test-info .test-date {
	font-size: 14px;
	color: #777;
}

.test-chevron {
	font-size: 32px;
	font-weight: 300;
	color: #555;
	opacity: 0.4;
	transition: 0.2s;
}

.test-card:hover .test-chevron {
	opacity: 0.8;
	transform: translateX(3px);
}

.test-tags {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tag {
	background: #f5eeee;
	color: #444;
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 12px;
	border: 1px solid #e5dada;
	white-space: nowrap;
}

/* Container geral */
.filter-container {
	display: flex;
	gap: 16px;
	margin-bottom: 25px;
	padding: 16px;
	background: #f8f3f3;
	border: 1px solid #e9cecd;
	border-radius: 12px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

/* Input de busca */
.filter-input-wrapper {
	flex: 1;
	min-width: 260px;
	position: relative;
}

.filter-icon {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	font-size: 16px;
	color: #777;
}

.filter-input {
	width: 100%;
	padding: 12px 16px 12px 40px;
	border: 1px solid #e0c8c8;
	border-radius: 10px;
	background: white;
	font-size: 15px;
	transition: 0.25s;
}

	.filter-input:focus {
		border-color: #c08f8b;
		background: #fff;
		box-shadow: 0 0 0 3px rgba(233, 206, 205, 0.4);
		outline: none;
	}

/* Select estilizado */
.filter-select-wrapper {
	min-width: 200px;
}

.filter-select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #e0c8c8;
	background: white url("data:image/svg+xml;utf8,<svg fill='gray' height='24' width='24' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 12px center;
	appearance: none;
	border-radius: 10px;
	font-size: 15px;
	cursor: pointer;
	transition: 0.25s;
}

	.filter-select:focus {
		border-color: #c08f8b;
		box-shadow: 0 0 0 3px rgba(233, 206, 205, 0.4);
		outline: none;
	}

/* Animação suave */
.fade-in {
	animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


.detalhe-wrapper {
	padding: 20px 5px 80px;
}



.detalhe-card {
	background: #fff;
	border-radius: 14px;
	border: 1px solid #e9cecd;
	padding: 20px;
	margin-bottom: 30px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.detalhe-nome {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: #555;
}

.detalhe-data {
	margin-top: 4px;
	color: #777;
	font-size: 14px;
}

.detalhe-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.tag {
	background: #e9cecd;
	padding: 6px 12px;
	border-radius: 10px;
	font-size: 13px;
	color: #555;
	font-weight: 600;
}

table {
	margin-bottom: 40px !important;
	border-radius: 12px !important;
	overflow: hidden;
}

h3.fase-title {
	margin: 15px 0 10px;
	color: #555;
	font-weight: 700;
	font-size: 20px;
}

.fade-in {
	animation: fadeIn .35s ease-in-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.titulo-fase {
	font-weight: 700;
	color: #555;
	border-left: 5px solid #e9cecd;
	padding-left: 10px;
}

.tabela-fase td {
	background: #fff;
}

.tabela-fase tr:hover td {
	background: #f8f1f1;
}

.detalhe-card {
	background: #fff;
	border-radius: 14px;
	padding: 20px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
	border: 1px solid #e9cecd;
}

.detalhe-tags .tag {
	background: #e9cecd;
	color: #555;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 13px;
	margin-right: 6px;
}




.tabela-head th {
	background: #f7f3f3; /* tom suave combinando com o restante */
	color: #555;
	font-weight: 600;
	padding: 10px 12px;
	border-bottom: 2px solid #e3d5d5;
}

.tabela-fase th,
.tabela-fase td {
	vertical-align: middle;
}

.col-valor {
	width: 80px;
}


/* ===========================
   TIPOGRAFIA GLOBAL
   =========================== */

html {
	font-size: 15px; /* base ligeiramente menor que 16 para dar elegância */
}

body {
	font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #444;
	background-color: #faf6f6; /* fundo bem suave, combinando com os cards */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Títulos da página */
h1, h2, h3, h4, h5 {
	font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #444;
	font-weight: 600;
	letter-spacing: 0.02em; /* leve espaçamento para ficar mais “clean” */
	margin-bottom: 0.75rem;
}

/* Título principal do bloco de resultados (caso use) */
.section-title {
	font-size: 1.4rem;
	font-weight: 600;
}

/* Texto padrão */
p, li, td, th, span {
	font-size: 0.95rem;
	line-height: 1.55;
}

/* ===========================
   CARDS DA LISTA DE TESTES
   =========================== */

.test-card {
	font-size: 0.95rem;
}

.test-name {
	font-size: 1.05rem;
	font-weight: 600;
	color: #444;
}

.test-date {
	font-size: 0.82rem;
	color: #8b7f7f;
}

/* Tags de resultado O/D, S/R, etc. */
.tag {
	font-size: 0.8rem;
	font-weight: 500;
}

/* Chevrons, ícones, etc. */
.test-chevron {
	font-size: 1.4rem;
	font-weight: 500;
}

/* ===========================
   FILTRO (BUSCA E ORDEM)
   =========================== */

.filter-input,
.filter-select {
	font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.9rem;
}

/* ===========================
   TABELAS DE FASES
   =========================== */

.tabela-fase {
	font-size: 0.9rem;
}

	.tabela-fase th,
	.tabela-fase td {
		padding: 9px 12px;
	}

	.tabela-fase thead th {
		font-weight: 600;
	}

	/* Valores numéricos da coluna de valor */
	.tabela-fase .col-valor {
		font-weight: 600;
		text-align: center;
	}

		/* Deixar os números um pouco menores para não “gritar” tanto */
		.tabela-fase .col-valor b {
			font-weight: 600;
			font-size: 0.9rem;
		}

/* ===========================
   CABEÇALHO DA TABELA (já ajustado)
   =========================== */

.tabela-head th {
	background: #f7f3f3;
	color: #555;
	font-weight: 600;
	padding: 10px 12px;
	border-bottom: 2px solid #e3d5d5;
}


.btn-action {
	background-color: #e9cecd;
	color: #333;
	border: none;
	padding: 10px 22px;
	font-size: 0.92rem;
	border-radius: 12px;
	font-weight: 600;
	transition: all .2s ease;
}

	.btn-action:hover {
		background-color: #dcb7b5;
		transform: translateY(-1px);
	}

.btn-outline {
	background: transparent;
	border: 2px solid #e9cecd;
	color: #555;
	padding: 9px 20px;
	font-size: 0.92rem;
	border-radius: 12px;
	font-weight: 600;
	transition: all .2s ease;
}

	.btn-outline:hover {
		background: #f7f1f1;
		border-color: #dcb7b5;
		transform: translateY(-1px);
	}


/* Rodapé de transparência da Fase 1 */
.tabela-fase tfoot td {
	background: #fffaf9;
	border-top: 0;
	padding-top: 0;
}

.transparencia-bloco {
	margin-top: 12px;
	padding: 14px 16px;
	border-radius: 14px;
	background: #fff6f5;
	border: 1px dashed rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.transparencia-titulo {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: #999;
	font-weight: 600;
	margin-bottom: 2px;
}

.transparencia-linha {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 0.9rem;
	color: #555;
}

.transparencia-label {
	color: #777;
}

.transparencia-score {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: #444;
}

.transparencia-faixa {
	font-weight: 500;
	color: #555;
}

.transparencia-tag {
	padding: 3px 12px;
	border-radius: 999px;
	background: #e9cecd;
	color: #433;
	font-size: 0.85rem;
	font-weight: 600;
}

.transparencia-bloco {
	position: relative; /* ← ESSENCIAL para o badge ficar no card */
	background: #fff7f7;
	border: 1px solid #f0dcdc;
	border-radius: 14px;
	padding: 22px;
	margin-top: 25px;
	font-size: 0.95rem;
	color: #555;
}


.transparencia-help {
	position: absolute;
	top: 10px;
	right: 12px;
	background: #e9e9e9;
	color: #555;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: 0.2s ease;
	z-index: 10;
}

	.transparencia-help:hover {
		background: #dcdcdc;
	}

/* Modal Tooltip */
.tooltip-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.35);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.tooltip-box {
	background: #fff;
	padding: 24px 28px;
	border-radius: 16px;
	width: 360px;
	max-width: 90%;
	box-shadow: 0 8px 30px rgba(0,0,0,0.12);
	font-size: 0.92rem;
	color: #444;
	font-weight: 400;
	line-height: 1.45;
}

	.tooltip-box h4 {
		font-weight: 600;
		margin-bottom: 14px;
		font-size: 1.05rem;
		color: #333;
	}

	.tooltip-box ul {
		padding-left: 18px;
		margin: 0;
	}

.tooltip-close {
	margin-top: 18px;
	display: block;
	text-align: center;
	background: #e5e5e5;
	padding: 8px 16px;
	border-radius: 10px;
	cursor: pointer;
	font-weight: 600;
	color: #333;
	transition: 0.2s;
}

	.tooltip-close:hover {
		background: #d8d8d8;
	}


.floating-delete-btn {
	position: fixed;
	bottom: 28px;
	right: 28px;
	background: #e9cecd;
	color: #555;
	border: none;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	font-size: 26px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
	cursor: pointer;
	transition: all .25s ease;
	z-index: 9999;
}

	.floating-delete-btn:hover {
		background: #d7b8b7;
		transform: scale(1.08);
	}


.custom-header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 25px 0 10px 0;
	position: relative;
}

.logo-indi {
	width: 110px;
	cursor: pointer;
}

.btn-voltarMenu {
	position: absolute;
	left: 25px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #e9cecd;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: 0.25s ease;
	box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

	.btn-voltarMenu:hover {
		background: #e9cecd;
		border-color: #e2bdbd;
	}

.arrow-left {
	width: 10px;
	height: 10px;
	border-left: 2px solid #555;
	border-bottom: 2px solid #555;
	transform: rotate(45deg);
	margin-left: 3px;
}

.btn-voltarMenu:hover .arrow-left {
	border-color: #555;
}


/* CAIXA PRINCIPAL */
.swal-indi-popup {
	border-radius: 18px !important;
	padding: 28px 22px !important;
	background: #fff8f8 !important;
	border: 1px solid #f1dcdc !important;
}

/* TÍTULO */
.swal-indi-title {
	font-size: 22px !important;
	font-weight: 600 !important;
	color: #555 !important;
	margin-bottom: 6px !important;
}

/* TEXTO */
.swal-indi-text {
	font-size: 15px !important;
	color: #777 !important;
	margin-bottom: 20px !important;
}

/* BOTÃO CONFIRMAR */
.swal-indi-confirm {
	background: #c94848 !important;
	color: white !important;
	padding: 10px 28px !important;
	font-size: 15px !important;
	border-radius: 8px !important;
	margin-right: 10px !important;
	border: none !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	font-weight: 600 !important;
	cursor: pointer;
}

	.swal-indi-confirm:hover {
		background: #b93535 !important;
	}

/* BOTÃO CANCELAR */
.swal-indi-cancel {
	background: #e9cecd !important;
	color: #555 !important;
	padding: 10px 22px !important;
	font-size: 15px !important;
	border-radius: 8px !important;
	border: none !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	font-weight: 600 !important;
	cursor: pointer;
}

	.swal-indi-cancel:hover {
		background: #dfbcbc !important;
	}

/* ÍCONE */
.swal2-icon.swal2-warning {
	border-color: #e9cecd !important;
	color: #555 !important;
}


/* --------------------------------- */
/* Header */
/* --------------------------------- */
.anam-header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 66px;
	background: #fff;
	z-index: 10;
	display: flex;
	align-items: center;
	padding: 0 18px;
	justify-content: center;
}


/* Logo */
.anam-logo {
	height: 34px;
	cursor: pointer;
}

/* --------------------------------- */
/* Title */
/* --------------------------------- */
.anam-title {
	margin-top: 95px;
	margin-bottom: 25px;
	text-align: center;
}

	.anam-title h1 {
		font-size: 26px;
		font-weight: 600;
	}

	.anam-title p {
		color: #555;
	}

/* --------------------------------- */
/* Cards */
/* --------------------------------- */
.anam-container {
	padding-bottom: 40px;
}

.anam-card {
	background: #fff;
	border-radius: 14px;
	padding: 16px 20px;
	margin-bottom: 15px;
	box-shadow: 0 2px 7px rgba(0,0,0,0.05);
	cursor: pointer;
	transition: .2s ease-in-out;
}

	.anam-card:hover {
		transform: translateY(-3px);
	}

.anam-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.anam-name {
	font-size: 18px;
	font-weight: 600;
}

.anam-date {
	color: #777;
	font-size: 14px;
}

/* Chevron */
.chevron {
	font-size: 24px;
	transition: .2s;
}

.anam-card.open .chevron {
	transform: rotate(90deg);
}

/* --------------------------------- */
/* Conteúdo interno */
/* --------------------------------- */
.anam-content {
	display: none;
	margin-top: 15px;
	border-top: 1px solid #eee;
	padding-top: 15px;
}

.anam-item {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	font-size: 15px;
	border-bottom: 1px solid #f4f4f4;
}

.anam-label {
	font-weight: 500;
	color: #444;
}

.anam-value {
	color: #333;
	font-weight: 400;
}