/* ================================================
   COMPONENTS.CSS — Componentes reutilizáveis
   ================================================ */

/* ---- Indicadores de status ---- */
.bom {
	width: 14px;
	height: 14px;
	border-radius: 14px;
	background-color: #2ecc71;
	margin-left: 10px;
	margin-right: 5px;
}

.ruim {
	width: 14px;
	height: 14px;
	border-radius: 14px;
	background-color: #ef4836;
	margin-left: 10px;
	margin-right: 5px;
}

.padrao, .padrao div {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ok {
	color: #348049;
}

.alerta {
	color: #ef4836;
}

/* ---- Bolinhas e dezenas ---- */
.bolinha {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 4px 4px;
	width: 44px;
	height: 44px;
	border-radius: 22px;
	color: #fff;
	font-weight: bold;
	float: left;
	background-color: #b2099b;
}

.quadrado {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 4px 6px;
	width: 48px;
	height: 30px;
	font-weight: bold;
	position: relative;
	float: left;
	background-color: #dddddd;
	padding: 5px;
	cursor: pointer;
	user-select: none;
}

.quadrado2 {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 4px 6px;
	width: 48px;
	height: 30px;
	font-weight: bold;
	float: left;
	color: #fff;
	background-color: #b2099b;
	padding: 5px;
}

.dezena-bolinha {
	width: 30px;
	height: 30px;
	font-size: 13px;
	color: #fff;
	font-weight: bold;
	border-radius: 50%;
	background-color: #b2099b;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s;
}

.dezena-bolinha:hover {
	transform: scale(1.1);
	background-color: #9c27b0;
}

.dznUnt {
	width: 30px;
	height: 30px;
	font-size: 13px;
	color: #fff;
	font-weight: bold;
	border-radius: 50%;
	background-color: #b2099b;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s;
}

.rstDznUnt {
	width: 20px;
	height: 20px;
	padding: 4px;
	margin: 5px 0 0 5px;
	color: #fff;
	font-weight: bold;
	border: 1px solid #444;
	border-radius: 50px;
	background-color: #930989;
	float: left;
}

.dezena-jogo-salvo {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
	border: 1px solid #cccccc;
	width: 40px;
	height: 40px;
	border-radius: 40px;
	float: left;
	margin: 5px 5px 5px 8px;
	background-color: #cc6699;
}

/* Labels de posição nas dezenas */
.fibonacci {
	font-size: 10px;
	position: absolute;
	left: 48px;
	top: 28px;
}

.primo {
	font-size: 10px;
	position: absolute;
	right: 50px;
	bottom: 28px;
}

.multiplo {
	font-size: 10px;
	position: absolute;
	right: 48px;
	top: 28px;
}

.repetido {
	font-size: 10px;
	position: absolute;
	left: 48px;
	bottom: 28px;
}

/* ---- Tabelas ---- */
table {
	width: 90%;
	border: 1px solid #ccc;
	border-spacing: 0;
	border-collapse: collapse;
}

table tr th {
	color: #fff;
	padding: 5px 3px 5px 3px;
	background-color: #930989;
}

table tr td {
	border: 1px solid #b2b2b2;
	height: 40px;
	background-color: #fff;
}

.verde {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background-color: #6ee18e;
}

.vermelho {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background-color: #e27c7a;
}

.tblaRst {
	width: 535px;
	padding: 0 0 5px 10px;
}

.tblRstRptda {
	width: 230px;
	padding: 0 0 5px 10px;
}

/* ---- Botões ---- */
.btn-marcar-all, .btn-limpar, .btn-simular {
	padding: 10px 0 10px 0;
	width: 300px;
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	border-radius: 4px;
	margin-right: 10px;
	border: 1px solid #c93fb6;
	background-color: #930989;
	cursor: pointer;
}

/* ---- Mensagem / alerta ---- */
.mensagem {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	width: 50%;
	color: #222;
	margin: 10px 0 10px 0;
	padding: 10px 0 10px 0;
	border: 1px solid #222;
	border-radius: 5px;
	background-color: #ccc;
}

/* ---- Itens de jogos listados ---- */
.listOfGames {
	flex: 12;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 8px 0 8px 0;
	text-align: center;
}

.contentorDzn {
	display: flex;
	justify-content: space-around;
}

.numero {
	flex: 1;
	text-align: center;
	padding: 8px 0 8px 0;
	border-right: 1px solid #666;
}

.numero-th {
	flex: 1;
	text-align: center;
	padding: 8px 0 8px 0;
	border-right: 1px solid #666;
}

.fcDelete {
	font-weight: bold;
	color: red;
	flex: 1;
	text-align: center;
	padding: 8px 0 8px 0;
	border-left: 1px solid #666;
}