@charset "utf-8";
/* CSS Document */


/* formulário para cadastro de cliente */

.pag .insc_formulario_titulo { position:relative; width:780px; background:#FFF; padding:10px 10px 10px 10px; border-bottom:1px solid #666; font-size:14pt; }

.pag .insc_formulario { margin:0 8px; position:relative; padding:12px 12px 62px 12px; font-size:10pt; }

.pag .insc_formulario > .etapa {  }

.pag .insc_formulario > .etapa > .lbl,
.pag .insc_formulario > .etapa > .val,
.pag .insc_formulario > .etapa > .inf,
.pag .insc_formulario > .etapa > .co,
.pag .insc_formulario > .etapa > .valf { float:left; height:32px; line-height:32px; margin:0 10px 8px 0; border-bottom:1px solid     #FFF; border-top:1px solid #FFF; }
.pag .insc_formulario > .etapa > .lbl { width:140px; border-bottom:1px solid #DDD; }
.pag .insc_formulario > .etapa > .val { width:300px; border:1px solid #DDD; padding:2px; border-radius: 5px; }
.pag .insc_formulario > .etapa > .val_p { width:80px; }
.pag .insc_formulario > .etapa > .val_m { width:116px; }
.pag .insc_formulario > .etapa > .valf { width:300px; border-bottom:1px solid #DDD; text-indent:8px; color:#000; background:#dfffdd; position:relative; }
.pag .insc_formulario > .etapa > .valf:after { content:""; position:absolute; right:3px; top:3px; background:url(https://d3uoy00rlf75l0.cloudfront.net/site/www/check-cad.png); width:28px; height:28px; }
.pag .insc_formulario > .etapa > .co { width:auto; color: tomato; }
.pag .insc_formulario > .etapa > .inf { }
.pag .insc_formulario > .etapa > div > input,
.pag .insc_formulario > .etapa > div > select { width:100%; height:100%; border:none; background:none; text-indent:8px; color:#000; }

.pag .insc_formulario > .etapa > .btn_enviar { position:relative; margin:20px auto; padding:8px 0px; width:200px; text-align:center; border:2px solid  var(--gold); background: var(--gold); cursor:pointer; color:var(--blue); border-radius: 10px; }
.pag .insc_formulario > .etapa > .btn_enviar:hover { background: white; }

@media ( max-width: 740px ) {
    .pag .insc_formulario_titulo { position:relative; width:780px; background:#FFF; padding:10px 10px 10px 10px; border-bottom:1px solid #666; font-size:14pt; }

    .pag .insc_formulario { margin:0 8px; position:relative; padding:12px 0 62px; font-size:10pt; }

    .pag .insc_formulario > .etapa {  }

    .pag .insc_formulario > .etapa > .lbl,
    .pag .insc_formulario > .etapa > .val,
    .pag .insc_formulario > .etapa > .inf,
    .pag .insc_formulario > .etapa > .co,
    .pag .insc_formulario > .etapa > .valf { float:left; height:32px; line-height:32px; margin:0 10px 8px 0; border-bottom:1px solid #FFF; border-top:1px solid #FFF; }
    .pag .insc_formulario > .etapa > .lbl { width:140px; border-bottom:1px solid #DDD; }
    .pag .insc_formulario > .etapa > .val { width:270px; border:1px solid #DDD; }
    .pag .insc_formulario > .etapa > .val_p { width:80px; }
    .pag .insc_formulario > .etapa > .val_m { width:116px; }
    .pag .insc_formulario > .etapa > .valf { width:270px; border-bottom:1px solid #DDD; text-indent:8px; color:#000; background:#dfffdd; position:relative; }
    .pag .insc_formulario > .etapa > .valf:after { content:""; position:absolute; right:3px; top:3px; background:url(https://d3uoy00rlf75l0.cloudfront.net/site/www/check-cad.png); width:28px; height:28px; }
    .pag .insc_formulario > .etapa > .co { width:auto; color: tomato; }
    .pag .insc_formulario > .etapa > .inf { display:none; }
    .pag .insc_formulario > .etapa > div > input,
    .pag .insc_formulario > .etapa > div > select { width:100%; height:100%; border:none; background:none; text-indent:8px; color:#000; }

    .pag .insc_formulario > .etapa > .btn_enviar { position:relative; margin:20px auto; padding:8px 0px; width:200px; text-align:center; border:1px solid  var(--gold); background: var(--gold); cursor:pointer; color:#FFFFFF; }
}

@media ( max-width: 420px ) {
    .pag .insc_formulario_titulo { position:relative; width:780px; background:#FFF; padding:10px 10px 10px 10px; border-bottom:1px solid #666; font-size:14pt; }

    .pag .insc_formulario { margin:0 8px; position:relative; padding:12px 0 62px; font-size:10pt; }

    .pag .insc_formulario > .etapa { margin-top:-20px; }

    .pag .insc_formulario > .etapa > .lbl,
    .pag .insc_formulario > .etapa > .val,
    .pag .insc_formulario > .etapa > .inf,
    .pag .insc_formulario > .etapa > .co,
    .pag .insc_formulario > .etapa > .valf { float:none; height:32px; line-height:32px; margin:0 10px 8px 0; border-bottom:1px solid #FFF; border-top:1px solid #FFF; }
    .pag .insc_formulario > .etapa > .lbl { width:140px; border-bottom:none; height:18px; line-height:18px; margin-top:20px; }
    .pag .insc_formulario > .etapa > .val { width:280px; border:1px solid #DDD; }
    .pag .insc_formulario > .etapa > .val_p { width:80px; }
    .pag .insc_formulario > .etapa > .val_m { width:116px; }
    .pag .insc_formulario > .etapa > .valf { width:280px; border-bottom:1px solid #DDD; text-indent:8px; color:#000; background:#dfffdd; position:relative; }
    .pag .insc_formulario > .etapa > .valf:after { content:""; position:absolute; right:3px; top:3px; background:url(https://d3uoy00rlf75l0.cloudfront.net/site/www/check-cad.png); width:28px; height:28px; }
    .pag .insc_formulario > .etapa > .co { display:none; }
    .pag .insc_formulario > .etapa > .inf { display:none; }
    .pag .insc_formulario > .etapa > div > input,
    .pag .insc_formulario > .etapa > div > select { width:100%; height:100%; border:none; background:none; text-indent:8px; color:#000; }

    .pag .insc_formulario > .etapa > .btn_enviar { position:relative; margin:50px auto 0; padding:8px 0px; width:200px; text-align:center; border:1px solid  var(--gold); background: var(--gold); cursor:pointer; color:#FFFFFF; }
}


/* caixa para termos de uso */

.termos { margin:20px 0 10px 0; font-weight:bold; }
.box_termos { margin:0 0; border:1px solid #CCC; padding:10px; height:80px; overflow:auto; }
.check_aceite { margin:10px 0 0 0; font-weight:bold; }
.check_aceite > .lbl { float:left; }
.check_aceite > .check { float:left; margin:0 0 0 20px; }


/* tela informando que usuário já existe */

.usuario_existe { margin:0 8px; position:relative; padding:12px 12px 62px 12px; font-size:10pt; }
.usuario_existe > a { color:#FFF; padding:5px 18px; border-radius: 10px; line-height:32px; background: var(--gold);  color:var(--blue); cursor:pointer; margin:4px 0; display: block;  }


/* etapa 2.5 – documentos */
.etapa3_intro { margin: 0 0 16px 0; color: #555; line-height: 1.5; clear: both; }
.doc_upload_wrap { margin: 16px 0; clear: both; }
.doc_upload_item { margin-bottom: 16px; clear: both; }
.doc_upload_item .lbl { float: left; width: 220px; font-weight: 600; }
.doc_upload_item .val { float: left; }
.doc_upload_item .val input[type="file"] { padding: 4px; }
.doc_upload_item .doc_status { float: left; margin-left: 12px; font-size: 0.9em; }
.doc_upload_info { margin: 12px 0; font-size: 0.9em; color: #666; clear: both; }
.doc_cnh_tipo_wrap { margin-top: 8px; clear: both; }
.doc_cnh_tipo_wrap .val select { width: 100%; padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; }
.doc_frente_verso_wrap { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; clear: both; }
.doc_frente_verso_wrap .doc_upload_item { margin-bottom: 12px; }
.doc_upload_resumo { margin-top: 8px; font-size: 0.9em; color: #366; }
#doc_tipo_sel { width: 100%; padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; }
#btn_ir_verificacao_facial { margin-top: 16px; clear: both; }

/* etapa 3 – verificação facial estilo banco (enquadramento oval) */
.liveness_area { max-width: 480px; margin: 16px 0; }
.liveness_titulo { font-size: 1.1em; font-weight: 600; margin: 0 0 12px 0; color: #333; }
.liveness_frame { position: relative; width: 100%; padding-bottom: 75%; background: #111; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.liveness_frame video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.liveness_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(ellipse 38% 48% at 50% 52%, transparent 0%, transparent 99%, rgba(0,0,0,0.65) 100%); }
.liveness_oval_borda { position: absolute; top: 52%; left: 50%; width: 76%; height: 96%; transform: translate(-50%, -50%); border: 3px solid rgba(255,255,255,0.9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); }
.liveness_instrucao { font-size: 0.9em; color: #555; margin: 12px 0 16px 0; line-height: 1.4; }
.liveness_preview { max-width: 100%; max-height: 280px; border-radius: 12px; border: 2px solid #ddd; display: block; margin: 12px 0; }
.liveness_botoes { margin: 16px 0; }
.liveness_botoes .btn_enviar { margin-right: 10px; }

@media (max-width: 500px) {
    .liveness_area { margin: 12px 0; }
    .liveness_frame { border-radius: 8px; }
    .liveness_oval_borda { border-width: 2px; }
}


/* botão Iniciar verificação */
.liveness_iniciar_wrap { margin: 20px 0; clear: both; }
.liveness_iniciar_btn { min-width: 220px; padding: 12px 24px; font-size: 1em; }


/* modal / overlay verificação facial */
.liveness_modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.liveness_modal_backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); cursor: pointer; }
.liveness_modal_content { position: relative; background: #fff; border-radius: 12px; padding: 24px; max-width: 520px; width: 100%; max-height: 95vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,0.3); }
.liveness_modal_fechar { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: none; background: #eee; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; color: #333; padding: 0; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.liveness_modal_fechar:hover { background: #ddd; }
.liveness_indisponivel { padding: 20px; text-align: center; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 8px; color: #721c24; }
.liveness_indisponivel_titulo { font-weight: bold; margin: 0 0 8px 0; color: #721c24; }
.liveness_indisponivel_txt { margin: 0; font-size: 0.95em; color: #721c24; }
.liveness_indisponivel_txt2 { margin: 12px 0 16px 0; font-size: 0.9em; color: #666; }
.liveness_voltar_btn { margin-top: 12px; }

/* Modal React Face Liveness: sem CSS nosso no modal/verificação; só AWS (amplify-ui.css). Ocultar nosso botão de fechar é feito via JS em cadastro.js. */

/* mobile: fullscreen */
@media (max-width: 767px) {
    .liveness_modal { padding: 0; align-items: stretch; }
    .liveness_modal_content { max-width: none; border-radius: 0; max-height: none; padding: 16px; padding-top: 48px; min-height: 100vh; box-sizing: border-box; }
    .liveness_modal_fechar { top: 12px; right: 12px; width: 44px; height: 44px; font-size: 28px; background: rgba(0,0,0,0.1); }
    .liveness_modal_fechar:hover { background: rgba(0,0,0,0.2); }
    .liveness_area { max-width: none; }
    .liveness_frame { padding-bottom: 85%; }
}