/* ==========================================================================
   ESTILOS GERAIS DA PLATAFORMA (TEMA AZUL-CÉU E CINZA)
   ========================================================================== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    background-color: #f0f4f8;
    color: #333;
    padding: 20px;
    margin: 0;
}
h1, h2, h3 {
    color: #0b7dda;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
    margin-bottom: 25px;
}
.container {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
}

/* ==========================================================================
   1. TELA DE LOGIN (`index.html`)
   ========================================================================== */
.login-container {
    max-width: 450px;
    margin: 100px auto 0 auto;
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
}
.subtitulo-login {
    font-size: 15px;
    color: #666;
    margin-bottom: 30px;
}
.campo-grupo {
    text-align: left;
    margin-bottom: 25px;
}
.campo-grupo label {
    display: block;
    font-weight: bold;
    color: #555;
    margin-bottom: 8px;
    font-size: 15px;
}
.campo-grupo input {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    border: 2px solid #bcd2ee;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.campo-grupo input:focus {
    border-color: #0b7dda;
}
.btn-login {
    background-color: #0b7dda;
    color: white;
    border: none;
    padding: 14px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
    box-shadow: 0 4px 6px rgba(11, 125, 218, 0.2);
}
.btn-login:hover {
    background-color: #0860bc;
}

/* ==========================================================================
   2. MENU PRINCIPAL DE NÍVEIS (`menu.html`)
   ========================================================================== */
.container-menu-principal {
    max-width: 750px;
    margin: 40px auto;
    background: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
}
.boas-vindas-card {
    background-color: #f0f8ff;
    border-left: 5px solid #0b7dda;
    padding: 15px 20px;
    border-radius: 4px;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #333;
}
.boas-vindas-card p {
    margin: 5px 0 0 0;
    font-size: 15px;
    font-weight: normal;
    color: #666;
}
.grade-topicos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}
.topico-btn {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}
.topico-btn:hover {
    transform: translateX(5px);
}
.btn-star { background-color: #fff9db; color: #f59f00; border-color: #ffe066; }
.btn-basico { background-color: #ebfbee; color: #2b8a3e; border-color: #b2f2bb; }
.btn-inter { background-color: #e6eff7; color: #0b7dda; border-color: #87ceeb; }
.btn-avancado { background-color: #f3f0ff; color: #9c36b5; border-color: #d0bfff; }
.btn-fluencia { background-color: #fff0f6; color: #e64980; border-color: #ffdeeb; }
.btn-ntc { background-color: #ffdada; color: #EE0000; border-color: #ffa4a4; }
.btn-voltar-login { background: none; border: none; color: #777; font-size: 15px; cursor: pointer; font-weight: bold; text-decoration: underline; }

/* ==========================================================================
   3. PAINEL LET'S START (`indexletstart.html`)
   ========================================================================== */
.menu-abas {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
}
.aba-btn {
    background-color: #e6eff7;
    color: #0b7dda;
    border: 2px solid #87ceeb;
    padding: 12px 25px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.aba-btn:hover, .aba-btn.ativa {
    background-color: #87ceeb;
    color: #fff;
    border-color: #87ceeb;
}
.secao-conteudo { display: none; }
.secao-conteudo.ativa { display: block; }
.table-responsive { overflow-x: auto; margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; background-color: #fafbfc; }
th { background-color: #87ceeb; color: #fff; padding: 10px; font-size: 16px; border: 1px solid #b0e2ff; }
td { border: 1px solid #e1e8ed; padding: 15px 8px; font-size: 18px; font-weight: bold; cursor: pointer; background-color: #fff; transition: all 0.2s ease; }
td:hover { background-color: #f0f8ff; transform: scale(1.05); }

.col-red { color: #ff4d4d; }
.col-orange { color: #ff944d; }
.col-green { color: #5cd65c; }
.col-lightblue { color: #00bfff; }
.col-blue { color: #3366ff; }
.col-purple { color: #cc66ff; }

.amostra-cor {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
    border: 2px solid #fff;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.caderno {
    margin: 20px auto;
    width: 100%;
    max-width: 600px;
    background-color: #fffde0;
    border-left: 5px solid #ff4d4d;
    border-radius: 4px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.15);
    padding: 25px;
    color: #111;
    font-family: 'Courier New', Courier, monospace;
    text-align: left;
    display: none;
    box-sizing: border-box;
}
.caderno .titulo-item { font-size: 32px; font-weight: bold; margin-bottom: 10px; color: #0b7dda; }
.caderno .exemplo-frase { font-size: 18px; color: #222; border-top: 1px dashed #ccc; padding-top: 10px; margin-bottom: 8px; }
.caderno .traducao-frase { font-size: 16px; color: #666; font-style: italic; }

/* ==========================================================================
   4. QUIZ DO BÁSICO 1 (`indexb1.html`)
   ========================================================================== */
.topo-quiz {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #555;
    align-items: center;
}
#placarAcertos { color: #2b8a3e; }
#placarErros { color: #ff4d4d; }
#fraseLacunasQuiz {
    font-size: 22px;
    font-weight: bold;
    color: #111;
    line-height: 2.2;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
    text-align: left;
}
.lacuna-quiz {
    display: inline-block;
    min-width: 90px;
    text-align: center;
    margin: 0 5px;
    padding: 0 4px;
    transition: all 0.3s ease;
}
.opcao-btn-quiz {
    background-color: #e6eff7;
    color: #0b7dda;
    border: 2px solid #87ceeb;
    padding: 14px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.opcao-btn-quiz:hover:not(:disabled) {
    background-color: #2196F3;
    color: #fff;
}
.opcao-btn-quiz:disabled {
    background-color: #f1f3f5;
    color: #cccccc;
    border-color: #e9ecef;
    cursor: not-allowed;
}
#btnProximaQuiz {
    background-color: #0b7dda;
    color: white;
    border: none;
    padding: 14px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}
#btnProximaQuiz:disabled {
    background-color: #cccccc;
    color: #666;
    cursor: not-allowed;
}
.tempo-urgente {
    color: #ff4d4d !important;
    animation: piscarTempo 0.5s infinite alternate;
}
@keyframes piscarTempo { from { opacity: 1; } to { opacity: 0.4; } }
.btn-reiniciar {
    background-color: #0b7dda;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
}

/* ==========================================================================
   5. AJUSTES DE IMPRESSÃO
   ========================================================================== */
@media print {
    .container, .menu-abas, button, .secao-conteudo, .caderno, div[style*="margin-bottom"], a, .container-menu-principal, .login-container {
        display: none !important;
    }
    body { background: white !important; color: #000 !important; padding: 0 !important; margin: 0 !important; }
    #folhaImpressao { display: block !important; visibility: visible !important; text-align: left !important; width: 100% !important; }
    .titulo-impressao { font-family: sans-serif !important; font-size: 26px !important; font-weight: bold !important; border-bottom: 3px double #000 !important; padding-bottom: 10px !important; margin-bottom: 30px !important; text-align: center !important; }
    .bloco-exercicio { margin-bottom: 25px !important; page-break-inside: avoid !important; }
    .linha-caligrafia { font-family: sans-serif !important; font-size: 18px !important; letter-spacing: 1px !important; color: #333 !important; margin-top: 8px !important; }
    .linha-resposta { border-bottom: 1px dashed #444 !important; height: 25px !important; margin-top: 8px !important; margin-bottom: 15px !important; width: 100% !important; }
}
#folhaImpressao { display: none; }







/* ==========================================================================
   6. EXCLUSIVO: SUBMENU DO BÁSICO 1 (ESTILO ENGLISH+)
   ========================================================================== */
.container-menu-b1 {
    max-width: 650px;
    margin: 50px auto;
    background: #ffffff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
}
.header-b1 {
    text-align: left;
    margin-bottom: 25px;
    padding-left: 10px;
}
.logo-english {
    font-size: 48px;
    font-weight: 800;
    color: #0b7dda; /* Azul principal */
    margin: 0;
    font-family: 'Arial Black', Gadget, sans-serif;
    letter-spacing: -1px;
}
.logo-english .plus-sign {
    color: #ff6b35; /* Laranja idêntico ao '+' da foto */
    font-size: 54px;
    margin-left: 2px;
}
.subtitle-b1 {
    font-size: 22px;
    font-weight: bold;
    color: #444;
    margin: 5px 0 0 0;
    letter-spacing: 1px;
}
.grade-habilidades {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.hab-btn {
    width: 100%;
    padding: 18px 20px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
}
.hab-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.hab-icon {
    font-size: 24px;
    margin-right: 15px;
}
/* Cores temáticas simulando os livros e objetos da foto */
.btn-grammar { background-color: #ffeaec; color: #d9383a; border-color: #ffc9cd; }
.btn-vocab { background-color: #eaf2ff; color: #1a66ff; border-color: #ccdfff; }
.btn-reading { background-color: #f1f3f5; color: #495057; border-color: #dee2e6; }
.btn-listening { background-color: #fff4e6; color: #fd7e14; border-color: #ffe8cc; }
.btn-songs { background-color: #f7ddf2; color: #fd04aa; border-color: #fcb4f0; }









/* ==========================================================================
   7. EXCLUSIVO: ESTANTE DE LIVROS GRAMATICAIS CLARA (`grammarb1.html`)
   ========================================================================== */
.container-estante-grammar {
    max-width: 800px;
    margin: 40px auto;
    background: #ffffff; /* 🎯 Mudado para o fundo branco clássico das outras telas */
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Mesma sombra sutil padrão */
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
}
.prateleira-linha {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    border-bottom: 6px solid #bcd2ee; /* 🎯 Prateleira agora é uma linha cinza-azulada elegante */
    padding-bottom: 5px;
    gap: 15px;
}
.bloco-livros {
    display: flex;
    flex-direction: column-reverse; /* Empilha os sub-livros em cima da base */
    width: 220px;
}
.livro-principal {
    width: 100%;
    padding: 16px 5px;
    font-size: 16px;
    font-weight: 800;
    color: white;
    border: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}
.sub-livros {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 2px;
}
.sub-livros span {
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding: 8px;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    text-align: center;
}
.sub-livros span:hover, .livro-principal:hover, .livro-unico:hover {
    transform: translateY(-4px); /* 🎯 Efeito moderno: o livro sobe de leve ao passar o mouse */
    filter: brightness(1.08);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.livro-unico {
    width: 140px;
    height: 160px;
    font-size: 15px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    box-shadow: -2px -2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    transition: all 0.2s ease;
}
/* Mantém as cores vivas e fiéis aos blocos da imagem original */
.bloco-be .livro-principal { background-color: #0b7dda; } /* Azul padrão da plataforma */
.bloco-be .sub-livros span { background-color: #4da3ff; color: #fff; }
.bloco-progressive .livro-principal { background-color: #2b8a3e; } /* Verde padrão da plataforma */
.bloco-progressive .sub-livros span { background-color: #5cd65c; }
.btn-demonstrativos { background-color: #a0522d; border-left: 10px solid #8b4513; }
.bloco-pronouns .livro-principal { background-color: #d9383a; }
.bloco-pronouns .sub-livros span { background-color: #ff6b6d; }
.btn-articles { background-color: #9c36b5; height: 150px; } /* Roxo padrão do menu */
.bloco-nouns .livro-principal { background-color: #495057; }
.bloco-nouns .sub-livros span { background-color: #78909c; color: #fff; }
.btn-there { background-color: #00796b; height: 140px; border-left: 6px solid #004d40; }






/* ==========================================================================
   8. EXCLUSIVO: BAÚ DE VOCABULÁRIO (`vocabularyb1.html`)
   ========================================================================== */
.grade-bau-livros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 20px;
    padding: 10px;
}
.livro-bau {
    height: 150px;
    font-size: 18px;
    font-weight: 800;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset -5px -5px 0px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.livro-bau:hover {
    transform: translateY(-5px) rotate(2deg); /* Efeito dinâmico divertido de balanço */
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
    filter: brightness(1.1);
}
/* Tons inspirados no baú do tesouro clássico da foto */
.v-laranja { background-color: #ff6b35; border-left: 8px solid #cc4e14; }
.v-verde { background-color: #2b8a3e; border-left: 8px solid #1e632b; }
.v-vermelho { background-color: #cc1111; border-left: 8px solid #990000; }
.v-marrom { background-color: #8b4513; border-left: 8px solid #5c2c0a; }
.v-azul { background-color: #0b7dda; border-left: 8px solid #085da6; }
.v-roxo { background-color: #9c36b5; border-left: 8px solid #75228a; }
.v-rosa { background-color: #e64980; border-left: 8px solid #b82559; }
.v-royal { background-color: #0044cc; border-left: 8px solid #002da6; }
.v-esmeralda { background-color: #00796b; border-left: 8px solid #004d40; }
.v-cinza { background-color: #495057; border-left: 8px solid #2b2e33; }






/* ==========================================================================
   9. EXCLUSIVO: CENTRAL DE LECTURA DE VOCABULÁRIO (`vocab_view.html`)
   ========================================================================== */
.container-vocab-view {
    max-width: 800px;
    margin: 20px auto;
    background: #ffffff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
}
/* Estilização do Livro Aberto */
.livro-aberto-container {
    display: flex;
    background: #ffffff;
    border: 2px solid #b5b5b5;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1), inset 0 0 20px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
}
.pagina-livro {
    flex: 1;
    padding: 25px 20px;
    background: #fdfdfd;
    box-sizing: border-box;
}
.divisoria-central-livro {
    width: 4px;
    background: linear-gradient(to right, #e0e0e0, #999, #e0e0e0);
    box-shadow: inset 1px 0 3px rgba(0,0,0,0.2);
}
.lista-palavras-vocab {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lista-palavras-vocab li {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.lista-palavras-vocab li:hover, .lista-palavras-vocab li.selecionada {
    background-color: #0b7dda;
    color: white;
}

/* Estilização do Bloco de Notas Espiralado */
.bloco-notas-espiral {
    display: flex;
    background: #fffde0; /* Amarelo pautado clássico */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 1px solid #e6e3b8;
    position: relative;
    border-top: 15px dashed #6c757d; /* 🎯 Simula a espiral de wire-o superior da foto */
    box-sizing: border-box;
}
.botoes-laterais-bloco {
    width: 75px;
    background-color: #f7f4cc;
    border-right: 2px dashed #e6e3b8;
    padding: 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    box-sizing: border-box;
}
.btn-circular {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}
.btn-circular small { font-size: 9px; margin-top: 1px; text-transform: uppercase; }
.btn-ouvir-vocab { background-color: #2196F3; color: white; }
.btn-traduzir-vocab { background-color: #ffd700; color: #111; }
.btn-circular:hover { transform: scale(1.06); filter: brightness(1.1); }

.conteudo-papel-amarelo {
    flex: 1;
    padding: 25px;
    text-align: left;
    font-family: 'Courier New', Courier, monospace;
    color: #222;
}
.classe-gramatical-vocab {
    font-size: 20px;
    font-weight: bold;
    color: #0b7dda;
    margin-bottom: 12px;
    text-transform: lowercase;
    font-style: italic;
}
.exemplos-texto-vocab {
    font-size: 17px;
    line-height: 1.6;
    white-space: pre-line; /* Mantém as quebras de linha das frases */
}
.traducao-texto-vocab {
    margin-top: 15px;
    border-top: 1px dashed #cdc9a5;
    padding-top: 15px;
    font-size: 15px;
    color: #555;
    white-space: pre-line;
}



/* 🔵 EFEITO HOVER PREMIUM: Muda os botões para azul ao passar o mouse (B2 e B3) */
.opcao-quiz-btn:hover {
    background-color: #2196F3 !important; /* Transforma o fundo no azul clássico do projeto */
    color: white !important;               /* Deixa o texto branco para dar leitura perfeita */
    border-color: #1e88e5 !important;      /* Aplica uma borda azul um pouco mais escura */
    transform: translateY(-2px);           /* Dá uma leve subidinha 3D para parecer clicável */
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.2); /* Cria uma sombra suave azulada de fundo */
}


/* ==========================================================================
   🏛️ SEPARADOR OFICIAL EM DUAS COLUNAS INDEPENDENTES (FORA DA CAIXA)
   ========================================================================== */

/* 1. Alinha a estrutura principal em formato de linha para as colunas ficarem lado a lado */
.layout-menu-duas-colunas {
    display: flex !important;
    flex-direction: row !important; /* Força o alinhamento lado a lado */
    gap: 30px !important; /* Espaço de respiro perfeito entre as colunas */
    max-width: 1200px !important; /* Dá largura para as duas colunas respirarem */
    margin: 40px auto !important;
    align-items: flex-start !important; /* Alinha o topo delas perfeitamente */
    box-sizing: border-box !important;
    text-align: left !important;
}

/* 2. Coluna da Esquerda (Caixa Principal do Menu) - Fica isolada no canto dela */
.coluna-esquerda-menu {
    flex: 1 !important; /* Ocupa o maior espaço da tela de forma elástica */
    background: #ffffff !important;
    padding: 30px !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    border: 1px solid #dcdcdc !important;
    box-sizing: border-box !important;
}

/* 3. Coluna da Direita (Nova Lateral Separada) - Segura as caixinhas individuais */
.coluna-direita-utilidades {
    width: 320px !important; /* Largura exata da barra lateral para não amassar */
    display: flex !important;
    flex-direction: column !important; /* Empilha as novidades e o teste na vertical */
    gap: 20px !important; /* Espaço de respiro entre a caixa de cima e a de baixo */
    box-sizing: border-box !important;
    flex-shrink: 0 !important; /* Impede que a coluna da direita seja esmagada */
}



/* Ajuste de responsividade: Se abrir no celular, as colunas vão para baixo sozinhas */
@media (max-width: 900px) {
    .layout-menu-duas-colunas {
        flex-direction: column !important;
        padding: 10px !important;
    }
    .coluna-direita-utilidades {
        width: 100% !important;
    }
}