/* --- Estilos Gerais e Reset Básico --- */

body {
    font-family: Arial, sans-serif;
    margin: 1PX;
    padding: 1PX;
    background-color: #427250;  /* floresta alterado p esquerda /* #478b47; #418341; verde bons   /*#32cd32;  verde grama feio   /* #20b2aa; verde mar quase bom /* #7fffd4; aquamarine feio /* #00ff7f; Verde Primavera  feio /* #98fb98; menta feio/* /* #2e6f40; VERDE FLORESTA  /* #f0f0f0; branco   */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- Cabeçalho Principal --- */
#mainHeader {
    background-color: #2e6f40; /*VERDE FLORESTA, #####################################################*/
    color: white;
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);  /* ################### 5 / 2 ALTERADO 2109 1227*/
    position: sticky;
    top: 0;
    z-index: 1000;
}

#mainHeader h1 { /*PROFESSOR RUAS - ATIVIDADES POR HABILIDADE ################## */
    margin: 0;
    font-size: 1.8em;
    color: white;
}

/* --- Wrapper para o Conteúdo Principal (Botões, Páginas e Sidebar) --- */
.main-content-wrapper {
    display: flex;  /*MUDAR P BLOCK ?*/
    flex-grow: 1;
    width: 100%;
    max-width: 1600px; /* MUDAR P NONE? */
    /*align-items: flex-start; /* Alinha os itens ao topo  DESATIVADO EM 140725 ######################################*/
    justify-content: center; /* Centraliza horizontalmente MODIFICADO EM 140725 210725 ################################*/

    margin: 2px auto; /* original 20  ALT 280725 ###### MUDAR P 0 ?*/
    padding: 2PX 2px;  /* original 20  ALTERADO EM 280725 ###### ###### MUDAR P 0 ?*/
    padding-top: 2px;  /* Reduz o padding superior */
    box-sizing: border-box;
    gap: 30px; /* original 30*/
}

/* --- Container dos Botões e Páginas (Conteúdo Central) --- */
.container {
    display: flex;
    align-items: flex-start;
    gap: 15px; /* original 30px */
    flex-wrap: wrap; /* nowrap ############# alt 280725 */
    flex-grow: 1;
    min-width: 0;
}

/* --- Barra Lateral Direita --- */
#rightSidebar {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 250px;
    flex-shrink: 0;
    box-sizing: border-box;
    position: sticky;
    top: 80px;
    align-self: flex-start;
}

#rightSidebar h2 {
    margin-top: 0;
    font-size: 1.4em;
    color: #2e6f40; /*VERDE FLORESTA  #007bff;*/
    text-align: center;
}

#rightSidebar p, #rightSidebar ul {
    font-size: 0.9em;
    line-height: 1.6;
}
#rightSidebar ul {
    list-style: none;
    padding: 0;
}
#rightSidebar li {
    margin-bottom: 5px;
}
#rightSidebar a {
    color: #0056b3;
    text-decoration: none;
}
#rightSidebar a:hover {
    text-decoration: underline;
}


/* --- Grupo de Botões --- */
.button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

/* --- Inputs e Select --- */
button, input[type="number"], select {
    width: 180px;
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
}

button {
    background-color: #2e6f40; /*VERDE FLORESTA #007bff; */
    color: white;
    border: none;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

input[type="number"], select {
    border: 1px solid #ccc;
}

/* --- Container das Páginas --- */
.page-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espaçamento entre as páginas A4 na tela */
    align-items: center;
    flex-grow: 1;
    min-width: 0;
}

#pageContainer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center; /* MODIFICADO P RIGHT 140725 SEM EFEITO, JA REVERTIDO*/
    flex-grow: 1;
    min-width: 0;
}
/* --- Estilo da Página A4 --- */
.page-a4 {
    width: 210mm;
    min-height: 297mm; /* Use min-height para que o A4 se expanda se o conteúdo for maior */
    background-color: white;
    padding: 10mm;
    /*box-sizing: border-box;*/
    /* AQUI ESTÁ A MÁGICA: */
    outline: 0.5mm solid #333; /* Define a "borda interna" ALTERADO EM 2109  1231 #######################*/
    outline-offset: -6mm;   /* Empurra a "borda interna" para dentro do elemento,
    afastando-a do limite do padding. O valor negativo faz com que ela se mova para dentro.
    Ajuste este valor para controlar a distância entre a borda e o limite do padding. */
    
    box-shadow: 0 2px 5px rgba(235, 25, 25, 0.1);      /* ESSENCIAL: Remove a sombra que pode esconder a borda */
    transform: none;        /* Remove o efeito de zoom que pode afinar a borda */
    margin: 10px auto; /* Centraliza horizontalmente */
}
/* --- Títulos e Instruções (dentro das páginas) --- */
/* CONSOLIDADO: Estilos comuns para h1, h2, h3 dentro do A4 */
.page-a4 h1, .page-a4 h2, .page-a4 h3 {
    font-family: Century, serif; /* Adicionado fallback genérico */
    font-style: italic;
    text-align: center; 
    color: #333;
    margin-top: 2mm; /* Mantido como estava */
    font-weight: 400; /* Normal para todos eles */
}

/* Estilos específicos (tamanhos de fonte e margens) */
.page-a4 h1 { /* Este h1 se aplica a títulos dentro das páginas A4, não ao cabeçalho principal */
    font-size: 0.8em; /* Preferi manter a sua última definição */
    margin-TOP: 1px; /* ALTERADO 2109  1755 #####################################################*/
    margin-bottom: 6px; /* ALTERADO 2109  1755 ##################################################*/
}

.page-a4 h2 {
    font-size: 1.4em;
    margin-bottom: 5px;
}

.page-a4 h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.instructions {
    font-family: Century, serif;
    font-size: 1em;
    margin-bottom: 2px; /* Manter pequeno para evitar grande espaço vazio */
    text-align: justify;
    line-height: 1.0;
}

.section-title {
    font-size: 1.4em;
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: center; /*#######################################################################*/
    color: #555;
}

/* --- Expressões (questões) --- */
.expressao-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 8px; /*###################################################################################################*/
    /* ALTERADO: Margin-bottom muito alto. Isso pode causar problemas de layout e quebra de página. */
    /* Se você quer espaço entre as questões, é melhor usar margin-bottom para .item-expression ###########################*/
    /* Ou então, um valor menor e mais controlado aqui. */
    margin-bottom: 10px; /* modif 190925 Ajuste conforme o espaçamento desejado entre as linhas de expressão */
    flex-wrap: wrap; /* Garante que os itens quebrem para a próxima linha se não houver espaço */
}

.item-expression {
    display: flex;
    align-items: center; /*baseline;*/
    gap: 8px;     /*###################################################################*/
    flex-grow: 1;
    min-width: 140px;
    /* ADICIONADO: Margem inferior para espaçamento entre as linhas de questões #### MODIFICADO PARA 50PX EM 100925 P TESTES ####### */
    margin-bottom: 25px; /*#################### modif 190925 ############################*/
}

.expressao {
    font-size: 1em;
}

.item-letter {
    font-size: 1em;
    font-weight: bold; /* Mantenha bold se quiser a letra em negrito */
    color: #333;
    white-space: nowrap;
}

.inline-text {
    font-size: 1em;
    font-weight: 400;
    color: #333;
}

/* Estilo para o Rodapé das Respostas (exibição na tela) */
.respostas-rodape {
    margin-top: 8px; /* Espaço entre a última expressão e o cabeçalho das respostas #################################################*/
    padding-top: 5px;
    text-align: left;
    font-size: 0.9em;
    /* page-break-inside: avoid; // Esta é uma propriedade de impressão, não tem efeito na tela */
}

.respostas-rodape h3 {
    text-align: left; /* Alinha o título "Respostas" à esquerda */
    margin-bottom: 6px;
    font-size: 1.1em;
    color: #555;
}

.respostas-grid {
    display: flex;
    /*flex-wrap: wrap; /* Permite que as respostas quebrem para a próxima linha #######ALTERADO 200725 ######################################*/
    gap: 12px; /* Espaçamento entre as respostas (horizontal e vertical)###################################################### */
    line-height: 1.6; /* Garante bom espaçamento entre as linhas de respostas */
    padding: 0 3mm; /* Adiciona padding horizontal para não grudar nas bordas da folha A4 */
}

.respostas-grid span {
    /* ADICIONADO: Transforma o span em um container flex para alinhar o texto e a fração da resposta */
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Espaço entre a letra/sinal de igual e a fração da resposta */
    white-space: nowrap;
}


/* --- Media Queries para Responsividade --- */

/* Tablets */
@media (max-width: 900px) and (min-width: 481px) {
    .page-a4 {
        width: calc(100vw - 40px);
        max-width: 210mm;
        margin: 15px auto;
        padding: 15px;
    }
}

/* Smartphones */
@media (max-width: 480px) {
    /* Main wrapper */
    .main-content-wrapper {
        flex-direction: column;
        align-items: center;
        margin: 10px auto;
        padding: 0 10px;
        gap: 15px;
    }

    /* Sidebar */
    #rightSidebar {
        width: 90%;
        max-width: 300px;
        position: static;
        top: auto;
        align-self: auto;
    }
    #rightSidebar h2 {
        font-size: 1.3em;
    }
    #rightSidebar p, #rightSidebar ul {
        font-size: 0.85em;
    }

    /* Container Principal (Botões e Páginas) */
    .container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
    }

    .button-group {
        width: 90%;
        max-width: 300px;
    }

    button, input[type="number"], select {
        width: 100%;
    }

    .page-a4 {
        /* ALTERADO: Use `vw` para preencher a largura da tela visível no mobile */
        width: calc(100vw - 20px); /* Garante que a página ocupe a largura da tela com margem mínima */
        max-width: 210mm; /* Impede que fique maior que A4 real em tablets grandes */
        min-height: auto;
        padding: 10px;
        margin: 10px auto; /* Centraliza horizontalmente */
        /*border: 1mm solid #555; /*ESTAVA 0,5mm ###################### 270725*/
        /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);*/
        /*box-sizing: border-box;*/
                /* O padding empurra a borda e o conteúdo para dentro do elemento */
        padding-top: 3mm; /* Isso será sobrescrito pela regra de impressão */
        padding-bottom: 3mm; /* Isso será sobrescrito pela regra de impressão */
        padding-left: 3mm; /* Isso será sobrescrito pela regra de impressão */
        padding-right: 3mm; /* Isso será sobrescrito pela regra de impressão */
        /* REMOVIDO: transform e margin-bottom para mobile */
        transform: none;
        margin-bottom: 20px; /* Espaço entre páginas */
    }

    h1 { font-size: 0.7em; margin-bottom: 5px; } /* H1 dentro da page-a4 */
    #mainHeader h1 { font-size: 1.4em; } /* H1 do cabeçalho principal */
    h2 { font-size: 1.2em; margin-bottom: 3px; }
    h3 { font-size: 1em; margin-bottom: 5px; }
    .instructions { font-size: 0.9em; margin-bottom: 5px; }

    .expressao-row {
        flex-direction: column; /* Em mobile, questões uma abaixo da outra */
        gap: 10mm;
        margin-bottom: 10px; /* Ajustado para mobile */
        align-items: flex-start;
    }

    .item-expression {
        width: 100%;
        min-width: unset;
        gap: 5px;
        margin-bottom: 5px; /* Espaçamento entre as questões em mobile */
    }

    .expressao {
        font-size: 1.1em;
    }

    .item-letter {
        font-size: 1.1em;
    }

    #resultadoDisplay {
        width: 100%;
        font-size: 0.8em;
    }
}

/* --- Media Queries para Impressão --- */
@media print {
    
    /* Configuração da página */
    @page {
        size: A4;
        margin: 0;
    }
    
    /* Oculta elementos não imprimíveis */
    #mainHeader, 
    .button-group, 
    #rightSidebar,
    button,
    select,
    input,
    label {
        display: none !important;
    }
    
    /* Reset do body e html */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Remove estrutura de layout */
    .main-content-wrapper, /* zerado 100925 ###################################################*/
    .container,            /* zerado 100925 ###################################################*/
    .page-container {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        gap: 0 !important;
    }
}
    /* CONFIGURAÇÃO A4 CRÍTICA COM ESCALA 85% */
.page-a4 {
    /* Dimensões exatas A4 */
    width: 210mm !important;
    min-height: 297mm !important; /* Mudado de height para min-height */
    max-height: 297mm !important; /* Adicionar max-height */
    
    /* Padding ajustado para 85% da escala */
     padding: 6mm 12mm 1mm 12mm !important; /* 12top 12right 1bottom 12left /*ALTERADO 2109  1825 ################################## */
    
    /* Controle de quebra de página */
    page-break-after: always !important;
    page-break-inside: avoid !important;
    
    /* Garante que conteúdo não seja cortado */
    overflow: visible !important;
    
    /* Centralização */
    margin: 0 auto !important;
    
    /* Box model */
    box-sizing: border-box !important;
    
    /* ESCALA 85% APLICADA AO CONTEÚDO ##########################################################################*/
    font-size: 90% !important;  /* ESCALA 85% APLICADA AO CONTEÚDO ##############################################*/
}

/* Borda interna decorativa (restaurada) */
.page-a4::before {
    content: '' !important;
    position: absolute !important;
    top: 6mm !important;
    left: 6mm !important;
    right: 6mm !important;
    bottom: 6mm !important;
    /*border: 0.5mm solid #c91717 !important;   /*  INTERNA  ################################## */
    pointer-events: none !important;
    display: block !important; /* Mudado de none para block */
}
    
    /* Ajuste de tipografia proporcional a 85% */
    .page-a4 h1 { 
        font-size: 0.88em !important; /* 0.8 * 0.85  0.68 110925 #########################*/
        margin-bottom: 8px !important;
    }
    
    .page-a4 h2 { 
        font-size: 1.49em !important; /* 1.4 * 0.85  1.19 110925 ##########################*/
        margin-bottom: 4px !important;
    }
    
    .page-a4 h3 { 
        font-size: 1.32em !important; /* 1.2 * 0.85  1.02 110925 #############################*/
        margin-bottom: 8px !important;
    }
    
    .instructions { /* { font-size: 0.73em; margin-bottom: 1.3mm; line-height: 1.2; } /* 0.95/1.3 = 0.73 100925*/
        font-size: 1.32em !important; /* 0.85 110925 */
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }
    
    .exemplo {
        margin-top: 0 !important;
        margin-bottom: 8px !important; /*margin-bottom: 0mm; /* Espaço após o exemplo. Ajuste aqui. 100925*/
        font-size: 0.85em !important;
        line-height: 1.4 !important; /* line-height: 1.3; /* Ajuste o espaçamento entre linhas do exemplo ALTERADO 200925 1034*/
    }
    
    /* CORREÇÃO CRÍTICA: aumentar espaçamento das questões */
    .expressao-row {
        display: flex !important;
        /*justify-content: space-between !important; ############################### 2009 1052*/
        gap: 10px !important; 
        margin-bottom: 15mm !important; /*ALTERADO 0211  1747 ################################## ESTA MANDANDO EM TUDO!!!*/
        page-break-inside: avoid !important; 
    }
    
    .item-expression {
        flex: 0 0 48% !important;
        gap: 8px !important;
        /*margin-bottom: 6mm !important; /* REDUZIDO de 85px/24mm */
        page-break-inside: avoid !important;
        align-items: baseline; /* INSERIDO PARA TESTE ########################### 1009 2028*/
       
       /* Expressões com frações - MENOR espaçamento (já ocupam mais espaço) */
       .item-expression.com-fracao {
        margin-bottom: 2px !important; /*ALTERADO 2109  1745 ################################## */
       }
       /* Expressões sem frações - espaçamento maior (ocupam menos espaço) */
       .item-expression.sem-fracao {
        margin-bottom: 42px !important;
       }
   
    }
    
    .expressao {
        font-size: 1.1em; /* 1.15/1.3 = 0.88 ########################### ALTERADO P 1.1 1810 ############## */
        letter-spacing: 0.2em !important; /* INSERIDO PARA TESTE #### 2009 1036*/
        word-spacing: 0.40em !important; /* INSERIDO PARA TESTE #### 2009 1036*/
        /*line-height: 1.5 !important; /* INSERIDO PARA TESTE #### 1009 2028*/
        /*white-space: pre !important; /* INSERIDO PARA TESTE #### 1009 2028*/
    }

    .item-letter {
        font-size: 0.98em !important; /*########################### ALTERADO P 0.98 1810 ############# */
    }
    
    /* Respostas no rodapé */
    .respostas-rodape {
        margin-top: 1px !important;  /*ALTERADO 2109  1721 #### */
        margin-bottom: 0 !important;
        padding-top: 0px !important; /*ALTERADO 2109  1721 ##### */
        font-size: 0.95em !important; /* 0.9 * 0.85 */ /*########################### ALTERADO P 0.95 1810 ############# */
       
        page-break-inside: avoid !important;
    }
    
    .respostas-rodape h3 {
        font-size: 0.8em !important; /* 1.1 * 0.85 */
        margin-bottom: 1px !important;
    }
    
    .respostas-grid {
        gap: 7px !important;  /*ALTERADO 2109  1736 ################################## */
        padding: 0 !important;
    }
    
    /* Marca d'água */
    body::after {
        color: rgba(0, 0, 0, 0.15) !important;
        font-size: 3.4rem !important; /* 4rem * 0.85 */
    }
    
    /* Previne quebras órfãs */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid !important;
    }
    
    p, li {
        orphans: 3 !important;
        widows: 3 !important;
    }

 
/* MARCA D'ÁGUA */
body::after {
    content: "P r o f e s s o r _ R u a s";
    font-family: "Courier New", monospace;
    font-size: 3rem;
    color: rgba(0, 0, 0, 0.15); /* Quase transparente */
    position: fixed;
    z-index: 1; /* Na frente da folha A4 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-60deg);
    pointer-events: none; /* Para não interferir nos cliques */
    user-select: none; /* Para não ser selecionável */
    
    /* Impede seleção de texto */
    user-select: none;
    pointer-events: none;
    
    /* Efeito de sobreposição */
    white-space: nowrap;
    /*text-transform: uppercase;*/
    letter-spacing: 0.05em;
}

/* Ajuste para impressão */
@media print {
    body::after {
        color: rgba(0, 0, 0, 0.13); /* Mais claro na impressão */
        font-size: 4rem;
    }
}

/* --- Estilos para a frase motivacional e rodapé --- */
.success-phrase {
    text-align: center;
    font-size: 1.2em;
    color: #2e6f40;
    font-weight: bold;
    margin: 30px auto;
    padding: 15px;
    background-color: #f0f8f0;
    border-radius: 5px;
    max-width: 500px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.site-footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background-color: #2e6f40;
    color: white;
    font-size: 0.9em;
}

.site-footer a {
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
}

.site-footer a:hover {
    text-decoration: underline;
}

.site-footer small {
    opacity: 0.8;
}

@media screen {
    /* Expressões com frações - MENOR espaçamento (já ocupam mais espaço) */
    .item-expression.com-fracao {
        margin-bottom: 2px !important; /*ALTERADO 0211  1747 ########## funciona bem ###########*/
    }
    /* Expressões sem frações - espaçamento maior (ocupam menos espaço) */
    .item-expression.sem-fracao {
        margin-bottom: 42px !important;
    }

}