/* Prevenção estrita de transbordo e zoom-out para Mobile-First */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#e5e5e5;
    padding:20px;
    -webkit-text-size-adjust: 100%;
}

.container{
    display:flex;
    gap:25px;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap;
    width: 100%;
}

.painel{
    width:350px;
    background:#fff;
    padding:20px;
    border-radius:15px;
    box-shadow:0 0 15px rgba(0,0,0,.15);
}

.painel h2{
    text-align:center;
    margin-bottom:20px;
}

.campo{
    margin-bottom:15px;
}

.campo label{
    display:block;
    font-weight:bold;
    margin-bottom:5px;
}

.campo input{
    width:100%;
    height:42px;
    border:1px solid #ccc;
    border-radius:8px;
    padding:10px;
}

.campo input[type=file]{
    padding:6px;
}

.botao{
    width:100%;
    height:50px;
    border:none;
    border-radius:10px;
    background:#003b80;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
}

.botao:hover{
    opacity:.9;
}

#folha{
    position:relative;
    width:794px;
    height:1123px;
    background:#fff;
    overflow:hidden;
    flex-shrink: 0;
}

#fundo{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
}

#nomePreview{
    position:absolute;
    top:225px;
    left:50%;
    transform:translateX(-50%);
    width:500px;
    text-align:center;
    font-size:24px;
    font-weight:bold;
    color:#000;
}

#fotoPreview{
    position:absolute;
    top:305px;
    left:50%;
    width:340px;
    height:430px;
    object-fit:cover;
    display:none;
    transform: translateX(-50%) translateY(0px) scale(1);
    transform-origin:center center;
}

#equipPreview{
    position:absolute;
    top:980px;
    left:90px;
    width:260px;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    color:#163b8f;
}

#dataPreview{
    position:absolute;
    top:980px;
    right:100px;
    width:170px;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    color:#000;
}

/* Media Queries Responsivas Modificadas para Evitar Cortes Horizontais */
@media(max-width:1200px){
    #folha{
        transform:scale(.65);
        transform-origin:top center;
    }
}

@media(max-width:768px){
    body {
        padding: 10px;
    }
    
    .painel {
        width: 100%;
        max-width: 100%;
    }

    /* O container se adapta e centraliza matematicamente o elemento escalado */
    #folha {
        --escala-mobile: 0.45;
        transform: scale(var(--escala-mobile));
        transform-origin: top center;
        margin-left: calc((100% - (794px * var(--escala-mobile))) / 2);
        margin-right: calc((100% - (794px * var(--escala-mobile))) / 2);
        margin-bottom: calc(-1123px * (1 - var(--escala-mobile))); 
    }
}

@media(max-width:480px){
    #folha {
        --escala-mobile: 0.38;
        transform: scale(var(--escala-mobile));
        transform-origin: top center;
        margin-left: calc((100% - (794px * var(--escala-mobile))) / 2);
        margin-right: calc((100% - (794px * var(--escala-mobile))) / 2);
        margin-bottom: calc(-1123px * (1 - var(--escala-mobile)));
    }
}

/* Impressão */
@media print {
    body{
        background:#fff;
        padding:0;
        margin:0;
    }

    .painel{
        display:none;
    }

    .container{
        display:block;
    }

    #folha{
        margin:auto !important;
        width:794px;
        height:1123px;
        transform:none !important;
        margin-bottom: 0 !important;
    }
}