/*=========================================
QR CODES
=========================================*/

#areaQRCodes,
#areaQRCodes *{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

#areaQRCodes{
    font-family:Arial,Helvetica,sans-serif;
    background:#FFF;
}

/*==========================
PÁGINA
==========================*/

#areaQRCodes .pagina{

    width:100%;

}

#areaQRCodes .linha{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:2mm;

}

/*==========================
FICHA
==========================*/

#areaQRCodes .pagina{
    width:289mm;
    min-height:202mm;

    display:flex;
    flex-direction:column;

    page-break-after:always;

    margin:0 auto;   /* <-- importante */
}

#areaQRCodes .linha{

    display:flex;

    justify-content:center;

    gap:4mm;

}

#areaQRCodes .ficha{

    width:141mm;
    height:203mm;

    margin-top:3mm;

    display:flex;
    flex-direction:column;

    border:1px solid #BFC7D5;   /* ou #000 se preferir preta */
    border-radius:4px;

    padding:2mm;

    background:#FFF;

    overflow:hidden;

}

#areaQRCodes .fichaVazia{

    width:141mm;
    height:198mm;

    visibility:hidden;

}

#areaQRCodes .areaTabela{

    flex:1;

    display:flex;

    margin-top:3px;

}

#areaQRCodes{

    width:297mm;

    margin:0 auto;

}

/*==========================
CABEÇALHO
==========================*/

#areaQRCodes .cabecalho{

    position:relative;

    width:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    margin-bottom:6px;

}

#areaQRCodes .numeroChamadaCabecalho{

    position:absolute;

    top:3px;

    right:5px;

    color:#666;

    font-size:9px;

    font-weight:600;

    z-index:10;

}

#areaQRCodes .titulo{

    width:100%;

    text-align:center;

    font-size:13px;
    font-weight:bold;

    color:#003366;

    line-height:1.2;

    margin-top:3px;

}

#areaQRCodes .subtitulo{

    width:100%;

    text-align:center;

    font-size:8px;

    color:#666;

    margin-top:3px;
    margin-bottom:6px;   /* aumenta a distância */

}

#areaQRCodes .logo{

    display:block;

    max-width:250px;
    max-height:35px;

    width:auto;
    height:auto;

    margin:auto;

    object-fit:contain;

}

/*==========================
DADOS DO ALUNO
==========================*/

#areaQRCodes .cabecalhoAluno{
    display:grid;
    grid-template-columns:3.3fr 3fr 68px;
    gap:6px;
    align-items:start;
}

#areaQRCodes .dadosAluno{

    font-size:8px;

    line-height:1.45;

}

#areaQRCodes .dadosAluno div{

    margin-bottom:2px;

}

#areaQRCodes .dadosAluno strong{

    display:inline-block;

    width:60px;

}

/*==========================
INSTRUÇÕES
==========================*/

#areaQRCodes .blocoInstrucoes{

    font-size:7px;
    line-height:1.35;

}

#areaQRCodes .blocoInstrucoes strong{

    display:block;

    margin-bottom:3px;

    color:#003366;

    text-align:left;

    padding-left:12px;   /* igual ao início da lista */

}

#areaQRCodes .blocoInstrucoes ul{

    margin:0;

    padding-left:12px;

}

/*==========================
QR CODE
==========================*/

#areaQRCodes .blocoQR{

    display:flex;

    flex-direction:column;

    align-items:center;

}

#areaQRCodes .qrcode{

    width:68px;

    height:68px;

}

#areaQRCodes .observacaoQR{

    margin-top:2px;

    font-size:6px;

    color:#555;

    text-align:center;

}

/*==========================
GRADE DE COMUNICADOS
==========================*/

#areaQRCodes .gradeComunicados{

    flex:1;

    display:grid;

    grid-template-columns:
    16px
    12mm
    20mm
    auto;

    grid-template-rows:
        9mm
        repeat(25,1fr);

    width:100%;

    margin-top:4px;

    border-top:1px solid #000;
    border-left:1px solid #000;

}

#areaQRCodes .gradeComunicados > div{

    border-right:1px solid #000;
    border-bottom:1px solid #000;

    display:flex;

    align-items:center;

    padding:2px;

    overflow:hidden;

    font-size:7px;

}

#areaQRCodes .cab{

    background:#F2F2F2;

    font-size:8px;

    font-weight:bold;

    justify-content:center;

    text-align:center;

}

#areaQRCodes .numero{

    justify-content:center;

}

#areaQRCodes .data{

    justify-content:center;

}

#areaQRCodes .assinatura{

    justify-content:center;

}

#areaQRCodes .rodapefichaqrcode{

    margin-top:2px;

    text-align:center;

    font-size:5px;

    color:#777;

    flex-shrink:0;

}