/* Foto de documento: câmera com moldura, escolha câmera/arquivo e revisão da foto (03/11/2026).
   Lógica em assets/js/foto-documento.js. Tudo grande de propósito: quem usa são motoristas, muitos
   já de idade, com o celular numa mão e o documento na outra. */

body.fd-aberto { overflow: hidden; }

.fd-tela {
    position: fixed;
    inset: 0;
    z-index: 100000; /* acima dos modais do formulário; abaixo do alerta de segurança (999999) */
    font-family: 'Barlow', system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.fd-tela button { flex: 0 0 auto; font-family: inherit; cursor: pointer; }

/* ── Câmera ─────────────────────────────────────────────────────────────── */
.fd-camera { background: #000; color: #fff; }
.fd-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fd-moldura-area {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    padding-bottom: 60px;
}
/* A sombra gigante é a máscara: escurece tudo fora do contorno. */
.fd-moldura {
    position: relative;
    border-radius: 16px;
    box-shadow: 0 0 0 200vmax rgba(5, 12, 10, .68);
    outline: 2px dashed rgba(255, 255, 255, .35);
    outline-offset: -2px;
    transition: outline-color .25s;
}
.fd-forma-cartao .fd-moldura { width: min(88vw, calc(58vh * 1.585)); aspect-ratio: 85.6 / 54; }
.fd-forma-folha .fd-moldura { height: min(64vh, calc(84vw * 1.414)); aspect-ratio: 210 / 297; }
.fd-forma-livre .fd-moldura-area { display: none; }

.fd-canto {
    position: absolute;
    width: 42px;
    height: 42px;
    border: 0 solid #fff;
    transition: border-color .25s;
}
.fd-canto.c1 { top: -3px; left: -3px; border-top-width: 6px; border-left-width: 6px; border-top-left-radius: 18px; }
.fd-canto.c2 { top: -3px; right: -3px; border-top-width: 6px; border-right-width: 6px; border-top-right-radius: 18px; }
.fd-canto.c3 { bottom: -3px; left: -3px; border-bottom-width: 6px; border-left-width: 6px; border-bottom-left-radius: 18px; }
.fd-canto.c4 { bottom: -3px; right: -3px; border-bottom-width: 6px; border-right-width: 6px; border-bottom-right-radius: 18px; }
.fd-luz-ok .fd-canto { border-color: #5ee0a5; }
.fd-luz-ok .fd-moldura { outline-color: rgba(94, 224, 165, .55); }

.fd-camera-topo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: max(14px, env(safe-area-inset-top)) 16px 14px;
    background: linear-gradient(rgba(0, 0, 0, .6), transparent);
}
.fd-camera-titulo {
    flex: 1;
    text-align: center;
    font-size: 19px;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.fd-fechar, .fd-lanterna {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fd-lanterna[hidden] { display: inline-flex; visibility: hidden; }
.fd-lanterna.ligada { background: #ffd24a; color: #1a1300; }

.fd-dica {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: calc(132px + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .55);
}
.fd-camera-rodape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 18px 0 max(24px, env(safe-area-inset-bottom));
}
.fd-disparo {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 5px solid #fff;
    background: transparent;
    padding: 5px;
}
.fd-disparo span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    transition: transform .1s;
}
.fd-disparo:active span { transform: scale(.88); }
.fd-luz-ok .fd-disparo { border-color: #5ee0a5; }
.fd-flash::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    animation: fd-flash .25s ease-out forwards;
}
@keyframes fd-flash { from { opacity: .85; } to { opacity: 0; } }

/* ── Escolha câmera / arquivo ────────────────────────────────────────────── */
.fd-escolha, .fd-revisao {
    background: rgba(8, 20, 17, .62);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.fd-escolha-caixa, .fd-revisao-caixa {
    width: min(520px, 100%);
    background: #fff;
    color: #0c1f1b;
    border-radius: 22px 22px 0 0;
    padding: 22px 18px max(18px, env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
    animation: fd-sobe .22s ease-out;
}
@media (min-width: 700px) {
    .fd-escolha, .fd-revisao { align-items: center; }
    .fd-escolha-caixa, .fd-revisao-caixa { border-radius: 22px; }
}
@keyframes fd-sobe { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.fd-escolha-titulo {
    font-size: 21px;
    font-weight: 800;
    margin: 0 4px 16px;
}
.fd-opcao {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 16px;
    border: 2px solid #d6e4df;
    background: #f6faf8;
    color: #0c1f1b;
}
.fd-opcao b { display: block; font-size: 19px; font-weight: 800; }
.fd-opcao small { display: block; font-size: 15px; color: #4a5f58; margin-top: 2px; }
.fd-opcao-icone {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3efea;
    color: #0c1f1b;
}
.fd-opcao-camera {
    border-color: #0c1f1b;
    background: linear-gradient(135deg, #0c1f1b, #17463b);
    color: #fff;
}
.fd-opcao-camera small { color: #bfe9d6; }
.fd-opcao-camera .fd-opcao-icone { background: #5ee0a5; color: #0c1f1b; }
.fd-cancelar {
    width: 100%;
    padding: 14px;
    border: 0;
    background: transparent;
    color: #4a5f58;
    font-size: 17px;
    font-weight: 700;
}

/* ── Revisão da foto ─────────────────────────────────────────────────────── */
.fd-revisao-caixa { max-height: 100dvh; overflow-y: auto; }
.fd-revisao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
}
.fd-revisao-topo .fd-fechar { background: #eef3f1; color: #0c1f1b; }
.fd-revisao-foto {
    border-radius: 14px;
    overflow: hidden;
    background: #0c1f1b;
    border: 3px solid #5ee0a5;
    display: flex;
    justify-content: center;
}
.fd-revisao-foto.ruim { border-color: #dc2626; }
.fd-revisao-foto img { display: block; max-width: 100%; max-height: 42vh; object-fit: contain; }
.fd-status {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 17px;
    line-height: 1.4;
}
.fd-status b { font-size: 18px; font-weight: 800; }
.fd-status.ok { background: #e6f8ef; color: #0d5c3b; }
.fd-status.ruim { background: #fdecec; color: #8f1515; }
.fd-status ul { margin: 8px 0 0; padding-left: 20px; }
.fd-status li { margin: 4px 0; }
.fd-nota { margin: 10px 0 0; font-size: 15px; color: #5b3b3b; }
.fd-acoes { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.fd-btn {
    width: 100%;
    padding: 16px;
    border-radius: 14px;
    border: 2px solid #c9d9d3;
    background: #fff;
    color: #0c1f1b;
    font-size: 18px;
    font-weight: 800;
}
.fd-btn.fd-primario {
    border-color: #0c1f1b;
    background: linear-gradient(135deg, #0c1f1b, #17463b);
    color: #fff;
}

/* O formulario.css crava `button { border-radius: 7px !important }` (camada antiga). Aqui só os
   botões destas telas voltam ao desenho delas. */
.fd-tela .fd-disparo,
.fd-tela .fd-fechar,
.fd-tela .fd-lanterna { border-radius: 50% !important; padding: 0 !important; }
.fd-tela .fd-disparo { padding: 5px !important; }
.fd-tela .fd-opcao { border-radius: 16px !important; }
.fd-tela .fd-btn { border-radius: 14px !important; }