@import "config.css";

/* LOGIN */
.pagina-login {
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
}

#ct_ops {
	width:100%;
	max-width:400px;
	background-color: var(--cor-superficie);
	border-radius: var(--raio);
	box-shadow: var(--sombra-card);
	border:1px solid var(--cor-borda);
	overflow:hidden;
}

/* área da logo sempre em fundo escuro - a imagem do cliente não tem
   contraste suficiente em fundo claro/branco */
#logo_ct_ops {
	width:100%;
	padding:28px 30px 20px 30px;
	box-sizing:border-box;
	text-align:center;
	background-color: var(--cor-escuro);
}
#logo_ct_ops img {max-width:150px;}

#corpo_ct_ops {width:100%; padding:8px 30px 32px 30px; box-sizing:border-box;}

#corpo_ct_ops label {
	font-size:12px;
	font-weight:600;
	letter-spacing:0.03em;
	text-transform:uppercase;
	color: var(--cor-texto-suave);
	margin:16px 0 6px 0;
}
#corpo_ct_ops label:first-of-type {margin-top:0;}

#ct_ops input[type="text"] {
	width:100%;
	padding:12px 14px;
	border:1px solid var(--cor-borda);
	border-radius:8px;
	font-family:inherit;
	font-size:14px;
	color: var(--cor-texto);
	background: var(--cor-superficie);
	transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
#ct_ops input[type="text"]:focus {
	border-color:#a1a1aa;
	box-shadow:0 0 0 3px rgba(24,24,27,0.08);
}

#ct_ops input[type="submit"] {
	width:100%;
	padding:13px;
	border:none;
	border-radius:8px;
	background-color: var(--cor-escuro);
	color:#fff;
	font-weight:600;
	font-size:14px;
	letter-spacing:0.02em;
	margin-top:22px;
	transition:background-color 0.15s ease;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
#ct_ops input[type="submit"]:hover {background-color: var(--cor-escuro-hover);}

altcha-widget {
	margin-top:18px;
	--altcha-color-base: #ffffff;
	--altcha-color-border: #e4e4e7;
	--altcha-color-text: #18181b;
	--altcha-color-border-focus: #a1a1aa;
	--altcha-border-radius: 8px;
	--altcha-max-width: 100%;
	font-family:inherit;
}
/* LOGIN */


/* DASHBOARD */
.topo {
	font-size:14px;
	color: var(--cor-texto);
	padding:18px 32px;
	border-bottom:1px solid var(--cor-borda);
	overflow:auto;
	background: var(--cor-superficie);
}
/* área da logo sempre em fundo escuro - ver #logo_ct_ops acima */
#logo {
	float:left;
	background-color: var(--cor-escuro);
	padding:8px 16px;
	border-radius:8px;
}
#logo img {display:block; max-height:32px; width:auto;}

.topo_right {float:right; overflow:hidden; text-align:right; margin-top:6px;}
.topo_right span {display:inline-block; margin-left:14px;}
.topo_right a {
	display:inline-block;
	padding:6px 16px;
	color: var(--cor-texto);
	background: var(--cor-fundo);
	border:1px solid var(--cor-borda);
	border-radius:20px;
	font-size:13px;
	transition:background-color 0.15s ease;
}
.topo_right a:hover {background-color:#ececee;}

#ct_exames {
	border-radius: var(--raio);
	overflow:hidden;
	width:100%;
	background-color: var(--cor-superficie);
	border:1px solid var(--cor-borda);
	color: var(--cor-texto);
	max-width:900px;
	margin:56px auto;
	box-shadow: var(--sombra-card);
}

#table_exames {width:100%; padding:28px 32px 32px 32px; box-sizing:border-box;}
#table_exames table {width:100%; border-collapse:collapse;}
#table_exames thead {background-color: var(--cor-fundo); color: var(--cor-texto-suave);}
#table_exames td, #table_exames th {border-bottom:1px solid var(--cor-borda); padding:12px 14px;}
#table_exames th {
	padding:12px 14px;
	text-align:left;
	font-size:11px;
	font-weight:600;
	letter-spacing:0.05em;
	text-transform:uppercase;
}
#table_exames td {font-size:14px;}

.btn-download {
	display:inline-block;
	padding:6px 16px;
	background-color: var(--cor-escuro);
	color:#fff !important;
	border-radius:20px;
	font-size:13px;
	font-weight:600;
	margin:2px 4px 2px 0;
	transition:background-color 0.15s ease;
}
.btn-download:hover {background-color: var(--cor-escuro-hover);}

.sem-arquivo {
	color: var(--cor-texto-suave);
	font-size:13px;
	line-height:1.5;
	margin:0;
}
/* DASHBOARD */


/* RESPONSIVO */
@media screen and (max-width:800px){
	.topo {text-align:center; padding:16px 20px;}
	#logo {float:none;}
	.topo_right {float:none; margin-top:12px;}
	#ct_exames {margin:32px auto; max-width:100%;}
}

@media screen and (max-width:500px){
	.pagina-login {padding:16px;}
	#logo_ct_ops, #corpo_ct_ops {padding-left:20px; padding-right:20px;}

	#table_exames {padding:20px 16px;}
	#table_exames table {border:1px solid var(--cor-borda); border-radius:8px; overflow:hidden;}
	#table_exames thead {
		border:none;
		clip:rect(0 0 0 0);
		height:1px;
		margin:-1px;
		overflow:hidden;
		padding:0;
		position:absolute;
		width:1px;
	}
	#table_exames tr {border-bottom:1px solid var(--cor-borda); display:block;}
	#table_exames tr:last-child {border-bottom:0;}
	#table_exames td {border-bottom:0; padding:10px 14px; display:block; text-align:right; font-size:13px;}
	#table_exames td::before {content:attr(data-label); float:left; font-weight:600; color:var(--cor-texto-suave);}
	#table_exames tr:nth-child(even) {background-color: var(--cor-fundo);}
}
/* RESPONSIVO */