/*
 * Zoe Vision - Provador Virtual
 * Estrutura geral, câmera, calibração, botões e prévia.
 */

#provador-container {
		background: #000;
		text-align: center;
		padding: 20px;
		position: relative;
	}
/* restante do CSS da OS */
#camera-wrapper {
		position: relative;
		display: inline-block;
	}
#video{
    width:100%;
    max-width:500px;
    border-radius:10px;
    display:none;
}
#cameraCanvas{
    width:100%;
    max-width:500px;
    border-radius:10px;
    display:none;
}
#oculosOverlay{
    position:absolute;
    display:none;
    top:0;
    left:0;
    width:150px;
    transform:translate(-50%, -50%);
    pointer-events:none;
    z-index:10;
}
#guiaCartao {
		position: absolute;
		left: 50%;
		top: 58%;
		width: 55%;
		aspect-ratio: 85.6 / 53.98;
		transform: translate(-50%, -50%);
		border: 3px dashed #00ffd5;
		border-radius: 10px;
		display: none;
		z-index: 20;
		pointer-events: none;
		box-shadow: 0 0 18px rgba(0,255,213,0.8);
	}
#textoGuiaCartao {
		position: absolute;
		left: 50%;
		top: calc(58% + 80px);
		transform: translateX(-50%);
		color: #00ffd5;
		background: rgba(0,0,0,0.75);
		padding: 8px 12px;
		border-radius: 8px;
		font-size: 13px;
		display: none;
		z-index: 21;
		max-width: 90%;
	}
#statusCalibracao {
		color: #00ffd5;
		margin-top: 10px;
		font-size: 14px;
		display: none;
	}
.Button {
		background: none;
		padding: 0;
		margin: 10px auto 0 auto;
		border: none;
		display: block;
		width: 100%;
		max-width: 300px;
		height: 60px;
		position: relative;
		color: #98A5A6;
		font-size: 16px;
		cursor: pointer;
		transition: transform 0.3s, color 0.3s;
	}
.Button:hover {
		color: #ffffff;
		transform: scale(1.03);
	}
.Button-svg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
.Button-line--outer {
		stroke-dasharray: 336px 336px;
		stroke-dashoffset: 0;
		animation: outer-dashoffset 6s linear infinite;
	}
.Button-line--inner {
		stroke-dasharray: 336px 336px;
		stroke-dashoffset: 0;
		animation: inner-dashoffset 5s linear infinite;
	}
.Button-content {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
@keyframes outer-dashoffset {
		0% {
			stroke-dashoffset: 0;
			stroke-dasharray: 336px 336px;
		}
		50% {
			stroke-dasharray: 224px 448px;
		}
		100% {
			stroke-dashoffset: 672px;
			stroke-dasharray: 336px 336px;
		}
	}
@keyframes inner-dashoffset {
		0% {
			stroke-dashoffset: 0;
			stroke-dasharray: 336px 336px;
		}
		50% {
			stroke-dasharray: 224px 448px;
		}
		100% {
			stroke-dashoffset: -672px;
			stroke-dasharray: 336px 336px;
		}
	}
#acoes-provador {
		margin-top: 15px;
		display: none;
		justify-content: center;
		gap: 10px;
		flex-wrap: wrap;
	}
.botao-acao {
		margin-top: 10px;
		padding: 10px 14px;
		color: #fff;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		font-weight: bold;
	}
#btnFecharCamera {
		background: #ff4d4d;
	}
#btnCapturarImagem {
		background: #009dff;
	}
#btnEnviarWhatsapp {
		background: #25d366;
	}
#btnCalibrarCartao {
		background: #00a889;
	}
#btnConfirmarCalibracao {
		background: #7a00ff;
		display: none;
	}
#btnGerarMedidas {
		background: #2d7ff9;
		display: none;
	}
#downloadCaptura {
		margin-top: 10px;
		padding: 10px 14px;
		background: #666;
		color: #fff;
		border-radius: 8px;
		text-decoration: none;
		display: none;
	}
#previewCapturaBox {
		display: none;
		margin-top: 20px;
	}
#previewCapturaProvador {
		max-width: 100%;
		width: 420px;
		border: 1px solid #ccc;
		border-radius: 8px;
		margin-top: 8px;
	}
#calibrationOverlay{
		position:absolute;
		inset:0;
		display:none;
		align-items:center;
		justify-content:center;
		flex-direction:column;
		z-index:9999;
		pointer-events:none;
	}
#faceGuide{
		width:220px;
		height:290px;
		border:4px solid #ff3b3b;
		border-radius:50%;
		transition:.3s;
		box-shadow:0 0 25px rgba(255,59,59,.5);
	}
#faceGuide.valid{
		border-color:#00ff88;
		box-shadow:0 0 30px rgba(0,255,136,.7);
	}
#calibrationText{
		margin-top:20px;
		background:rgba(0,0,0,.7);
		color:#fff;
		padding:12px 18px;
		border-radius:12px;
		font-size:18px;
		font-weight:bold;
		text-align:center;
	}
/* Tela inicial - Informe seu grau */