/* Container para garantir que a tabela role no mobile sem quebrar o layout */
.tabela-responsiva {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 2rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	border-radius: 20px;
	/* Bordas arredondadas modernas */

	/* Estilização base da tabela */
	table {
		width: 100%;
		border-collapse: collapse;
		font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
		font-size: 0.95rem;
		background-color: var(--cor-fundo);
		text-align: left;
	}

	/* Título da Tabela (Caption) */
	caption {
		font-size: 1.25rem;
		font-weight: 700;
		text-align: left;
		color: #2c3e50;

		padding: 1rem 0;
	}

	/* Cabeçalho Fixo (Sticky Header) */
	thead {

		th {
			position: sticky;
			top: 0;
			z-index: 10;

			font-size: 0.85rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.5px;

			background-color: #deefff;
			padding: 16px;
		}
	}

	/* Células e Linhas do Corpo */
	th[scope="row"],
	td {
		padding: 14px 16px;
		border-bottom: 1px solid #e2e8f0;
		color: #334155;
		vertical-align: middle;
	}

	/* Destaca o tipo de ocorrência na primeira coluna */
	th[scope="row"] {
		font-weight: 600;
		color: #1e293b;
	}

	/* Linhas Zebradas para facilitar a leitura */
	tbody tr:nth-child(even) {
		background-color: #f8fafc;
	}

	/* Efeito Hover na linha (Ajuda o olho a não se perder na leitura) */
	tbody tr:hover {
		background-color: #f1f5f9;
		transition: background-color 0.2s ease-in-out;
	}

	/* Destaca o texto do telefone de plantão */
	td:last-child {
		font-weight: 700;
		color: #b45309;
		/* Tom de alerta para números de emergência */
	}
}

/* Destacando a coluna de Telefones de Plantão usando o colgroup */
.col-plantao {
	background-color: #fffbeb;
	/* Fundo amarelo muito sutil */
	border-left: 2px solid #e4e3e3;
	/* Borda lateral para chamar atenção */
}

@media (prefers-color-scheme: dark) {
	.tabela-responsiva {
		thead {

			th {

				background-color: #2b2d30;
			}
		}

		th[scope="row"],
		td {
			color: #fafcff;
		}

		th[scope="row"] {
			color: #f9fbff;
		}

		tbody tr:nth-child(even) {
			background-color: #242525;
		}

		tbody tr:hover {
			background-color: #1b1b1b;
		}

		/* Células e Linhas do Corpo */
		th[scope="row"],
		td {
			border-bottom: 1px solid #292929;
		}

		td:last-child {
			color: #ff8629;
		}
	}

	.col-plantao {
		background-color: var(--cor-fundo);
		/* Fundo amarelo muito sutil */
		border-left: 2px solid #1b1b1b;
		/* Borda lateral para chamar atenção */
	}
}