/* ========= style.css (updated) =========
   Atualizado para incluir correções de alinhamento das caixas
   e unificação do visual dos controles (checkboxes/radios) no dashboard.
   As regras específicas do dashboard estão ao final do arquivo para
   sobrescrever regras anteriores quando necessário.
======================================== */

/* Reset / base */
body {
    margin: 0;
    padding: 0;
    background: #edece8;
}

/* Página inicial */

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    background: white;
}

#headerLogo {
    max-height: 150px;
    width: auto;
}

/* Centraliza os botões quando há múltiplos */
.header-nav {
    display: flex;
    justify-content: center; /* Centraliza o grupo de botões */
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    flex: 1;
}

/* Estilo normal dos botões */
.nav-btn {
    color: rgb(104, 55, 19);
    border: none;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    transition: color 0.2s, text-decoration 0.2s;
    background: none;
    padding: 0 8px;
}


.nav-btn:hover {
    color: burlywood;
    text-decoration: underline;
    background: none;
}

.login-btn button {
    padding: 15px 25px;
    background: rgb(104, 55, 19);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 15px;
}


.exemploCard {
  width: 70%;   /* ajusta o tamanho fixo relativo */
  height: auto;
  display: block;
  margin: 50px auto;
}

.faq-section {
  max-width: 800px;
  margin: 80px auto;
  padding: 20px;
  background-color: white;
  border-radius: 12px;
  border: 2px solid #693713;
}

.faq-section h2 {
  text-align: center;
  color: #693713;
  margin-bottom: 30px;
}

.faq-item {
  border-bottom: 1px solid #e0c5a5;
  margin-bottom: 10px;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-weight: bold;
  font-size: 18px;
  color: #693713;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 15px;
  transition: background-color 0.2s ease;
}

.faq-question:hover {
  background-color: #f9efe6;
}

.faq-arrow {
  width: 8px;
  height: 8px;
  border-right: 3px solid #693713;
  border-bottom: 3px solid #693713;
  transform: rotate(45deg); /* seta para a direita */
  transition: transform 0.25s ease;
  pointer-events: none;
}

.faq-item.active .faq-arrow {
  transform: rotate(135deg); /* seta aponta para baixo quando aberto */
}

.faq-answer {
  display: none;
  padding: 0 15px 15px;
  color: rgb(104, 55, 19);
  line-height: 1.5;
  font-size: 15px;
}

.faq-item.active .faq-answer {
  display: block;
}




.footer {
    width: 100%;
    background: white;
    text-align: center;
    position: fixed; /* ou 'relative' se preferir que fique no fluxo normal da página */
    bottom: 0;
    left: 0;
    font-size: 16px;
    padding: 10px;
}


/* Sobre Mim */

.sobre-mim-container {
    margin: 20px auto;
    width: 90%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: rgb(104, 55, 19);
    margin: 40px auto;
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 2px solid rgb(104, 55, 19);
    line-height: 2;
 }



.sobre-mim-container h4 {
    margin-bottom: 9px; /* diminui o espaço abaixo do h4 */
}

.sobre-mim-container p {
    margin-top: 12px;    /* diminui o espaço acima do p */
    margin-bottom: 20px; /* opcional: controla o espaço abaixo do p */
    font-size: 15px;
    text-align: left;
 }



.img-text-flex {
    display: flex;
    align-items: center;
    gap: 30px; /* Espaço entre imagem e texto */
}

.circle-img {
    width: 120px;      /* Tamanho do círculo */
    height: 120px;
    object-fit: cover;
    border-radius: 50%; /* Deixa a imagem circular */
    border: 2px solid rgb(104, 55, 19); /* opcional, cor da borda */
}


/* Container da caixa de texto */

.text-box-container {
    margin: 20px auto;
    width: 70%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: rgb(104, 55, 19);
    margin: 40px auto;
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 2px solid rgb(104, 55, 19);
    line-height: 1.5;
}


.text-box-container h4 {
    margin-bottom: 4px; /* diminui o espaço abaixo do h4 */
    text-align: left;
}

.text-box-container p {
    margin-top: 2px;    /* diminui o espaço acima do p */
    margin-bottom: 8px; /* opcional: controla o espaço abaixo do p */
    text-align: left
}


/* Cadastro */

/* Adicione estas regras ao seu style.css (ou substitua/mescle com as existentes) */

/* Estilo unificado para inputs do formulário */
.form-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
  background: #fff;
  color: #333;
  outline: none;
}

/* foco */
.form-input:focus {
  border-color: rgb(104, 55, 19);
  box-shadow: 0 0 0 3px rgba(139,94,60,0.08);
}

/* ajustes opcionais para .form-group e labels */
.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-weight: 300;
  margin-bottom: 4px;
  color: rgb(104, 55, 19);
}

label {
    min-width: 70px; /* Ajuste conforme o tamanho desejado */
    margin-right: 20px;
    color: rgb(104, 55, 19);
}

input[type="email"],
input[type="password"] {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}


.register-Container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px; /* Espaço do topo, opcional */
    max-width: 600px;
    margin: 40px auto;
    padding: 24px;
    background: #fff;
    border: 1px solid rgb(104, 55, 19);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}




.register-btn {
    width: 100%;
    max-width: 100px;   /* ou o tamanho que preferir */
    padding: 10px;
    margin-top: 10px;
    background: rgb(104, 55, 19);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

/* ===== Dashboard ===== */


/* Ajuste: centralizar logo nas páginas de dashboard e flashcards com flexbox */
body#dashboardPage .header-content,
body#flashcardPage .header-content {
  display: flex;
  align-items: center;
  justify-content: center; /* centraliza o logo */
  position: relative;
  padding: 12px 30px;
  background: white;
}

/* Coloca o botão do sidebar à esquerda (não interfere na centralização) */
body#dashboardPage .header-content #sidebarToggle,
body#flashcardPage .header-content #sidebarToggle {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
}

/* Coloca o botão de atalhos (ou outro botão) à direita */
body#dashboardPage .header-content #toggleShortcuts,
body#flashcardPage .header-content #toggleShortcuts {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
}

/* Garante que o logo fique centralizado e acima de botões */
body#dashboardPage .header-content #headerLogo,
body#flashcardPage .header-content #headerLogo {
  position: relative;
  left: 0;
  transform: none;
  margin: 0 auto;
  z-index: 20;
  max-height: 110px; /* ajuste se necessário */
}

/* Assegura que a linha <hr> continue visível */
.header-content + hr {
  border: none;
  border-top: 2px solid rgb(104, 55, 19);
  margin: 0;
  position: relative;
  z-index: 0;
}

/* Responsivo: em telas pequenas revertemos para layout normal (botões no fluxo) */
@media (max-width: 768px) {
  body#dashboardPage .header-content,
  body#flashcardPage .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  body#dashboardPage .header-content #sidebarToggle,
  body#flashcardPage .header-content #sidebarToggle,
  body#dashboardPage .header-content #toggleShortcuts,
  body#flashcardPage .header-content #toggleShortcuts {
    position: relative;
    transform: none;
    left: auto;
    right: auto;
  }
  body#dashboardPage .header-content #headerLogo,
  body#flashcardPage .header-content #headerLogo {
    margin: 0;
    max-height: 90px;
  }
}

/* ===== Sidebar retrátil (adicionar ao final do style.css) ===== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 280px;
  max-width: 85%;
  background: white;
  border-right: 2px solid rgb(104, 55, 19);
  box-shadow: 2px 0 8px rgba(0,0,0,0.08);
  transform: translateX(-110%);
  transition: transform 0.25s ease-in-out;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.sidebar-logo {
  max-height: 48px;
  width: auto;
}

.sidebar-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: rgb(104,55,19);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.sidebar-link {
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: rgb(104,55,19);
  font-weight: bold;
  background: none;
}

.sidebar-link:hover {
  background: #f6efe4;
}

/* overlay (para mobile/fechar ao clicar fora) */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 1900;
}

/* quando aberto */
.sidebar-open .sidebar {
  transform: translateX(0);
}
.sidebar-open .sidebar-overlay {
  opacity: 1;
  visibility: visible;
}

/* desloca o container principal em desktop quando aberto */
@media (min-width: 900px) {
  .sidebar-open .theme-selector-container {
    margin-left: 320px; /* espaço para o sidebar + gap */
    transition: margin-left 0.25s ease;
  }
}

/* estilo do botão de toggle (no header) */
#sidebarToggle {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: rgb(104,55,19);
  padding: 8px;
  border-radius: 6px;
}
#sidebarToggle:hover {
  background: #f6efe4;
}

/* em telas pequenas, o header deve permitir que o botão fique visível */
@media (max-width: 768px) {
  .header-content {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* quando o sidebar estiver fechado, não desloca o conteúdo */
  .theme-selector-container {
    margin-left: 0 !important;
  }
}


/* Login Styles */



.login-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: auto;

    color: rgb(104, 55, 19);

    font-size: small;
    max-width: 350px;
    margin: 40px auto;
    padding: 24px;
    background: #fff;
    border: 1px solid rgb(104, 55, 19);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);

}

.login-container h2 {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
  color: rgb(104, 55, 19);
}

.login-container input {

    padding: 10px;

    margin: 5px 0;

    width: 200px;

    font-size: 1rem;

    font-family: Verdana, Geneva, Tahoma, sans-serif;

}



.login-container button {

    padding: 10px 20px;

    margin-top: 10px;

    font-size: 1rem;

    font-family: Verdana, Geneva, Tahoma, sans-serif;

    cursor: pointer;

    background-color: rgb(104, 55, 19);

    color: white;

    border: none;

    border-radius: 5px;

}



.login-container button:hover {

    background-color: burlywood;

    font-family: Verdana, Geneva, Tahoma, sans-serif;

}


hr {
    border: none;
    border-top: 2px solid rgb(104, 55, 19);
    margin: 0 0 30px 0;
    width: 100%;
}


/* Seleção de tema */

.shortcuts-toggle {
  background-color: rgb(104, 55, 19);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
cursor: pointer;
  margin-left: 20px;
  transition: background 0.3s;
}

.shortcuts-toggle:hover {
  background-color: #A0522D;
}

.shortcuts-box {
  margin: 20px auto;
  padding: 14px 18px;
  background: white;
  border: 2px solid rgb(104, 55, 19);
  border-radius: 8px;
  color: rgb(104, 55, 19);
  font-size: 15px;
  line-height: 1.6;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}



.theme-selector-container {
    background-color: white;
    border: 2px solid rgb(104, 55, 19);
    border-radius: 12px;
    padding: 20px 30px;
    /* largura preferida e limite máximo responsivo */
    flex: 1 1 720px;          /* permite crescer/encolher no flex container */
    max-width: 800px;         /* limita o máximo em telas grandes */
    width: 100%;              /* ocupa o espaço do flex-basis até max-width */
    margin: 40px auto;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}


.theme-selector-container h2 {
    margin-bottom: 20px;
    color: rgb(104, 55, 19);
    text-align: center;
}


/* Estilo básico para lista */
ul, #themeTree ul {
  list-style-type: none;
color: rgb(104, 55, 19);
}

/* Estilo do caret (seta) */
.caret {
    display: block; /* garante que fique em linha própria */
    font-weight: bold;
    cursor: pointer;
    padding-left: 5px;
    margin-bottom: 5px;
}


/* Antes do texto, desenha a seta */
.caret::before {
  content: "\276F"; /* ❯ */
  color: rgb(104, 55, 19);
    display: inline-block;
    margin-right: 6px;
    transform: rotate(0deg);
    transition: transform 0.2s;
}
.caret-down::before {
    transform: rotate(90deg);
}
.nested {
    display: none;
    margin-left: 20px;
}
.nested.active {
    display: block;
}



/* Árvore de temas/subtemas */

.theme-tree label {
    cursor: pointer;
    color: rgb(104, 55, 19);
    user-select: none;
    font-size: 1.1rem;
    font-weight: normal;
    margin-bottom: 40px;
}

.theme-tree .caret {
    font-weight: bold;
    font-size: 0.95em;
    flex-grow: 1;
    user-select: none;
}

.theme-tree ul.nested {
    padding-left: 10px;
    display: none;
    /* Oculto inicialmente */
}

.theme-tree ul.nested.active {
    display: block;
}

/* Espaçamento entre temas principais */
#themeTree > ul > li {
  margin-bottom: 25px; /* ajuste o valor como quiser (20–40px funciona bem) */
}


ul.nested {
    font-size: 0.9em; /* ou 0.8em, se quiser menor */
    margin-left: 20px;
    font-weight: normal;
    padding: 4px 8px;
    margin-top: 6px; /* Espaço acima da lista de subtemas */
    margin-bottom: 10px; /* Espaço abaixo (entre grupos de temas) */
}

/* Também pode ajustar o tamanho da label dos checkboxes */
ul.nested label {
    font-size: 0.95em;
    font-weight: normal;
    white-space: nowrap;
}

ul.nested li {
  display: block; /* Muda de flex para block */
  margin-bottom: 8px; /* espaço entre subtemas */
  padding-left: 20px; /* recuo leve */
}


ul.nested li input[type="checkbox"] {
  transform: scale(1.1);   /* Tamanho confortável */
  margin: 0;               /* Remove margens padrão */
}

ul.nested li label {
  margin: 0;
  line-height: 1.2;        /* Alinhamento vertical mais fino */
  font-size: 0.95em;
}




/* ADICIONE este bloco ao final do style.css (ou substitua as regras equivalentes) */
/* Garante que a ordem visual seja: caret (seta) -> checkbox -> nome do tema (mesma linha, sem quebra) */

#themeTree li > div,
#themeTree li > .inline-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important; /* evita quebra do nome + (n) */
}

/* caret: primeira posição */
#themeTree li > div > .caret,
#themeTree li > .inline-wrapper > .caret {
  order: 0 !important;
  flex: 0 0 auto !important;
}

/* checkbox entre a seta e o nome do tema */
#themeTree li > div > input[type="checkbox"],
#themeTree li > .inline-wrapper > input[type="checkbox"] {
  order: 1 !important;
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  margin: 0 6px 0 0 !important;
  width: auto !important;
  height: auto !important;
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  flex: 0 0 auto !important;
}

/* label / texto do tema em último (sempre na mesma linha) */
#themeTree li > div > label,
#themeTree li > div > span:not(.caret),
#themeTree li > .inline-wrapper > label,
#themeTree li > .inline-wrapper > span:not(.caret) {
  order: 2 !important;
  white-space: nowrap !important;
}

/* Remove o quadrado customizado desenhado pelo ::before (se existir), para evitar duplicação */
.theme-tree input[type="checkbox"] + label::before,
#themeTree input[type="checkbox"] + label::before {
  display: none !important;
  content: none !important;
}

/* Garanta que os subníveis também mantenham a mesma linha para cada item */
#themeTree ul.nested li > div,
#themeTree ul.nested li > .inline-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

/* Pequenos ajustes responsivos */
@media (max-width: 900px) {
  #themeTree li > div,
  #themeTree li > .inline-wrapper {
    font-size: 0.95rem !important;
  }
}


/* Botão Começar fora do box */
.start-button-container {
    text-align: center;
    margin-top: 15px;
}

.start-button {
    padding: 12px 28px;
    font-weight: bold;
    font-size: 1.1rem;
    background-color: rgb(104, 55, 19);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.start-button:hover {
    background-color: burlywood;
}

/* Estilo das opções de tema */
.subjects label {
    display: block;
    margin: 10px 0;
    font-size: 1.1rem;
    cursor: pointer;
}


/* Lista de matérias */
.subjects {
    margin-bottom: 40px;
    color: black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: medium;
}

.subjects label {
    display: block;
    margin: 10px 0;
    font-size: 1.1rem;
    cursor: pointer;
}

.start-button-container {
    text-align: center;
    /* centraliza o botão */
    margin-top: 20px;
    /* espaço entre o box e o botão */
}

/* Botão */
.start-button {
    padding: 12px 28px;
    font-weight: bold;
    font-size: 1.1rem;
    background-color: rgb(104, 55, 19);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.start-button:hover {
    background-color: burlywood;
}



/* Flashcards Styles */

body {

    font-family: Verdana, Geneva, Tahoma, sans-serif;

    color: white;

    text-align: center;

}



.container {

  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  box-sizing: border-box;
}



.card {
  position: relative;
  width: 100%;
  background-color: #fff;
  border: 2px solid rgb(104, 55, 19);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: center;
  box-sizing: border-box;
}

/* Conteúdo central do card */
.card-content {
  word-wrap: break-word;
  overflow-y: auto;
  max-height: 70vh;
}

.card-front {
    font-size: 1rem;
    font-weight: normal;
    color: rgb(104, 55, 19);
    margin-bottom: 30px;
}

.card-back {
    font-size: 1.1rem;
    color: rgb(104, 55, 19);
    margin-bottom: 30px;
    height: auto;
    transition: visibility 0.3s;
}

.card-back.show {
    visibility: visible;
}

.card-back-comment {
  font-size: 0.9rem;      /* ajuste conforme o desejado */
  text-align: left;
  color: rgb(104, 55, 19);
  line-height: 1.4;
}

/* Garante que ul/ol/li herdem o mesmo tamanho e peso do texto */
.card-back-comment ul,
.card-back-comment li {
  font-size: 0.9rem !important;
}
  
.card-counter {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    font-weight: bold;
    color: rgb(104, 55, 19);
    margin-top: 20px;
}


ol {
  list-style-position: inside; /* faz o número ficar próximo ao texto */
  padding-left: 0;            /* remove o recuo extra à esquerda */
  margin-left: 0;             /* remove margem padrão */
}

ol li {
  text-align: left;           /* garante alinhamento do texto */
  margin: 4px 0;              /* ajusta o espaçamento vertical */
}


.card-content ul {
  list-style-type: disc;      /* adiciona os bullets */
  list-style-position: inside;/* mantém o bullet perto do texto */
  padding-left: 20px;            /* remove recuo extra */
  margin: 10px auto;          /* centraliza a lista */
  text-align: left;             /* centraliza o conteúdo */
}

.card-content ul li {
  color: rgb(104, 55, 19);    /* mesma cor do texto */
  font-size: 1rem;
  margin: 6px 0;
  text-align:left;
}


#cardFrontImage,
#cardBackImage {
    max-width: 100%;
    max-height: 300px;
    margin: 30px auto;
    display: block; /* para centralizar */
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(104, 55, 19, 0.3);
}

.card img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.cloze-answer {
    color: rgb(104, 55, 19);
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 3px;
}

.cloze-hidden {
  color:#4285F4;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
}

.cloze-revealed {
  color:#4285F4;
  font-weight: bold;
}


.fraction {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

.fraction .numerator {
  display: block;
}

.fraction .denominator {
  display: block;
  border-top: 1px solid #000;
}


/* Remove position absolute das setas */
.arrow {
  position: static; /* tira o posicionamento absoluto */
  transform: none;
  width: 50px;
  height: 50px;
  font-size: 2rem;
  color: rgb(104, 55, 19);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow:hover {
  color: burlywood;
}


/* Seta esquerda desativada (primeiro card) */
.arrow.left.first {
  color: #edece8;        /* cor apagada */
  cursor: not-allowed; /* cursor desativado */
}

/* Seta direita desativada (último card) */
.arrow.right.last {
  color: #edece8;
  cursor: not-allowed;
}




#backButton {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #8b5a2b;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: background-color 0.2s ease, transform 0.2s ease;
  z-index: 1000; /* garante que fique acima de outros elementos */
}

#backButton:hover {
  background-color: #a56a3f;
}

#backButton:active {
  transform: translateX(-50%) scale(0.97);
}

/* ajuste para telas pequenas */
@media (max-width: 768px) {
  #backButton {
    position: relative !important;
    transform: none !important;
    left: auto !important;
    bottom: auto !important;
    margin: 20px auto !important;
    display: block !important;
  }
}



/* Controls (show answer) */
.controls {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* espaçamento entre seta, botão e seta */
}

.show-answer {
  background-color: rgb(104, 55, 19);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}

.show-answer:hover {
    background-color: #A0522D;
    /* marrom mais claro no hover */
}


#themeSelectionFooter {
    position: fixed;       /* fixa na tela */
    bottom: 20px;          /* distância do rodapé */
    left: 50%;             /* centraliza horizontalmente */
    transform: translateX(-50%);
    z-index: 1000;         /* acima de outros elementos */
    text-align: center;
}

#themeSelectionFooter .nav-btn {
    padding: 12px 28px;
    font-size: 0.8rem !important;
    background-color: transparent !important;
    color: rgb(104, 55, 19) !important;
    font-weight: normal !important;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
    white-space: nowrap; /* evita quebra de linha */
}

#themeSelectionFooter .nav-btn:hover {
    background-color: burlywood;
}



/* Responsivo */
@media (max-width: 420px) {
    .card {
        padding: 18px 48px;
    }

    .arrow {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        line-height: 36px;
    }

    .show-answer {
        width: 80%;
        font-size: 0.9rem;
    }
}

.back-button {
    position: fixed;
    bottom: 10px;
    /* distância do rodapé */
    left: 50%;
    /* centraliza horizontalmente */
    transform: translateX(-50%);
    /* ajusta para ficar bem no meio */
    padding: 12px 28px;
    font-weight: bold;
    font-size: 1rem;
    color: rgb(104, 55, 19);
    background: none;
    border: none;
    padding: 0;
    margin: 10px;
    border-radius: 6px;
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    z-index: 1000;
}

.back-button:hover {
    background: burlywood;
}

/* 🌐 AJUSTES DE RESPONSIVIDADE GERAL */

@media (max-width: 1024px) {
  /* Reduz espaçamentos em telas médias */
  .header-content {
    padding: 0 20px;
    flex-wrap: wrap;
    gap: 10px;
  }

  #headerLogo {
    max-height: 100px;
  }

  .header-nav {
    gap: 15px;
  }

  .footer {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  /* Header: empilha logo e menu */
  .header-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
  }

  .header-nav {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;           /* ocupa a largura */
    justify-content: center; /* centraliza os botões */
    margin-top: 10px;       /* espaço abaixo do logo */
    position: static;        /* remove absolute que causava sobreposição */
    transform: none;
  }
  .login-btn button {
    width: 100%;
    font-size: 1rem;
  }

  /* Containers principais */
  .sobre-mim-container,
  .text-box-container,
  .theme-selector-container,
  .register-Container,
  .login-container {
    width: 90%;
    padding: 16px;
    box-sizing: border-box;
  }

  .img-text-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .circle-img {
    width: 100px;
    height: 100px;
  }

  /* Formulários */
  .form-group {
    flex-direction: column;
    align-items: flex-start;
  }

  label {
    margin-bottom: 6px;
  }

  input[type="email"],
  input[type="password"] {
    width: 100%;
  }

  .register-btn {
    max-width: 150px;
    font-size: 1rem;
  }

  /* Flashcards */
  
    .container {
    padding: 10px;
  }


  .card {
    padding: 14px;
  }

  .card-content {
    max-height: 60vh;
  }
  
  .arrow {
    width: 40px;
    height: 40px;
    font-size: 1.8rem;
  }

  .card-front,
  .card-back {
    font-size: 1rem;
  }

  .show-answer {
    width: 80%;
    font-size: 0.9rem;
  }

  /* Botão Voltar */
  .back-button {
    position: relative;
    display: block;
    margin: 20px auto;
    background: rgb(104, 55, 19);
    color: white;
    padding: 10px 24px;
  }

  .back-button:hover {
    background: burlywood;
    color: white;
  }

  /* Footer fixo pode atrapalhar no mobile */
  .footer {
    position: relative;
  }

    #themeSelectionFooter {
        position: relative;   /* entra no fluxo normal */
        bottom: auto;
        left: auto;
        transform: none;
        margin: 20px auto;   /* centraliza horizontalmente */
    }

    #themeSelectionFooter .nav-btn {
        font-size: 1rem;
        padding: 10px 20px;  /* reduz para caber em telas pequenas */
    }
}

@media (max-width: 480px) {
  /* Tamanhos menores para celulares compactos */
  .header-content {
    padding: 10px;
  }

  #headerLogo {
    max-height: 80px;
  }

  .nav-btn {
    font-size: 0.9rem;
  }

  .theme-selector-container {
    padding: 15px;
    max-width: 100%;
  }

  .start-button {
    width: 100%;
    font-size: 1rem;
    padding: 10px;
  }

  .card {
    padding: 16px;
  }

  .arrow {
    font-size: 1.5rem;
  }

  .show-answer {
    font-size: 0.85rem;
  }

  .footer {
    font-size: 13px;
    padding: 8px;
  }
}

/* Corrige layout do formulário no celular */
@media (max-width: 768px) {
  body {
    margin: 0;
    padding: 0;
  }

  main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding: 0 20px;
  }

  .login-container {
    width: 100%;
    max-width: 400px;
    background-color: #f8f8f8;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin-top: 30px;
  }

  .login-container h2 {
    text-align: center;
    font-size: 1.5rem;
    color: rgb(104, 55, 19);
  }

  .login-container input {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    margin: 8px 0;
    font-size: 1rem;
    box-sizing: border-box;
  }

  .login-container button {
    width: 100%;
    max-width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    font-weight: bold;
    background-color: rgb(104, 55, 19);
    color: white;
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
  }

  .login-container button:hover {
    background-color: rgb(85, 44, 16);
  }

  .footer {
    text-align: center;
    width: 100%;
    padding: 15px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    border-top: 1px solid #ddd;
    font-size: 14px;
  }
}

/* ======= BASE ======= */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

main {
  flex: 1;
}

/* Footer sempre ao final */
.footer {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: auto;
  background: white;
  text-align: center;
  font-size: 16px;
  padding: 10px;
  color: rgb(104, 55, 19);
}

/* ======= BOTÃO VOLTAR ======= */
.back-button {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 28px;
  font-weight: bold;
  font-size: 1rem;
  color: rgb(104, 55, 19);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  z-index: 1000;
}

.back-button:hover {
  background: burlywood;
}

/* ======= GERAL (Telas grandes) ======= */
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
}

#headerLogo {
  max-height: 120px;
}

.header-nav {
  display: flex;
  gap: 20px;
}

/* ======= RESPONSIVIDADE ======= */

/* 🌐 Tablets e telas médias */
@media (max-width: 1024px) {
  .header-content {
    padding: 0 20px;
    flex-wrap: wrap;
    gap: 10px;
  }

  #headerLogo {
    max-height: 100px;
  }

  .footer {
    font-size: 14px;
  }
}

/* 📱 Smartphones (modo retrato) */
@media (max-width: 768px) {
  /* HEADER */
  .header-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
  }

  .header-nav {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* CONTAINERS PRINCIPAIS */
  .theme-selector-container,
  .register-Container,
  .login-container {
    width: 90%;
    padding: 16px;
    box-sizing: border-box;
    margin: 0 auto;
  }

  /* FORMULÁRIOS */
  .login-container {
    background-color: #f8f8f8;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin-top: 30px;
    max-width: 400px;
  }

  .login-container h2 {
    text-align: center;
    font-size: 1.5rem;
    color: rgb(104, 55, 19);
  }

  .login-container input,
  .login-container button {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    margin: 8px 0;
    box-sizing: border-box;
    border-radius: 8px;
  }

  .login-container button {
    background-color: rgb(104, 55, 19);
    color: white;
    border: none;
    font-weight: bold;
  }

  .login-container button:hover {
    background-color: rgb(85, 44, 16);
  }

  /* FLASHCARDS */
  .container {
    padding: 10px;
  }

  .card {
    padding: 14px;
  }

  .card-content {
    max-height: 60vh;
  }

  .card-front,
  .card-back {
    font-size: 1rem;
  }

  .arrow {
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
  }

  .show-answer {
    width: 80%;
    font-size: 0.9rem;
  }

  /* BOTÃO VOLTAR */
  .back-button {
    position: relative;
    display: block;
    margin: 20px auto;
    background: rgb(104, 55, 19);
    color: white;
    padding: 10px 24px;
  }

  .footer {
    position: relative;
    font-size: 14px;
  }
}

/* 📲 Celulares pequenos (≤480px) */
@media (max-width: 480px) {
  #headerLogo {
    max-height: 80px;
  }

  .nav-btn {
    font-size: 0.9rem;
  }

  .start-button {
    width: 100%;
    font-size: 1rem;
    padding: 10px;
  }

  .card {
    padding: 16px;
  }

  .arrow {
    font-size: 1.4rem;
  }

  .show-answer {
    font-size: 0.85rem;
  }

  .footer {
    font-size: 13px;
    padding: 8px;
  }
}

/* --- CORREÇÃO: Subtemas aninhados no celular --- */
@media (max-width: 768px) {
  .theme-selector-container {
    width: 95%;
    max-width: 100%;
    padding: 15px;
    box-sizing: border-box;
    overflow-x: auto; /* permite rolar se ainda ultrapassar */
  }

  /* Reduz recuo dos subníveis */
  ul.nested {
    margin-left: 10px !important;
    padding-left: 10px !important;
  }

  ul.nested ul.nested {
    margin-left: 10px !important;
    padding-left: 10px !important;
  }

  /* Evita quebra de palavras longas */
  .theme-tree label {
    white-space: normal !important;
    word-wrap: break-word;
  }
}

/* ============================
   DASHBOARD-SPECIFIC TWEAKS
   ============================ */

/* Garante que as duas colunas fiquem alinhadas pelo topo */
.dashboard-main {
  display: flex !important;
  align-items: flex-start !important; /* alinha pelas bordas superiores */
  gap: 24px;
  box-sizing: border-box;
}

/* Remove margin top extra do seletor para não empurrar sua caixa para baixo */
.theme-selector-container {
  margin-top: 0 !important;
}

/* Ajuste do título dentro do seletor (evita que o h2 empurre o conteúdo) */
.theme-selector-container h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

/* Faz com que a caixa de 'Modo de estudo' use o mesmo padding/borda visual do seletor */
#studyModeBox > div,
.theme-selector-container {
  padding: 20px 30px;
  border: 2px solid rgb(104,55,19);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

/* Torna os labels das opções do modo de estudo uma linha com gap (mesmo comportamento do selector)
   e também padroniza os labels da árvore de temas */
.study-mode-label,
.theme-tree label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #693713;
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
}

/* Ajustes finos para labels na árvore de temas */
.theme-tree label {
  font-size: 0.95em;
  margin: 0;
}

/* ============================
   Custom unified square controls (show ✓ for both theme checkboxes and study-mode radios)
   - Hides native visuals for only the dashboard controls and draws a custom square + check
   - Works for: .theme-tree input[type="checkbox"] (input + label sibling)
                .study-mode-label input[type="radio"] (input + span sibling inside label)
   ============================ */
/* Hide native radios and reuse the same custom square visual as the checkboxes */
.study-mode-label input[type="radio"],
.study-mode-label input[type="checkbox"],
.theme-tree input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  pointer-events: auto; /* mantém clique/foco funcionando */
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

/* Pseudo element used as the visible square (keeps same look for radio + checkbox) */
.study-mode-label input[type="radio"] + span::before,
.study-mode-label input[type="checkbox"] + span::before,
.theme-tree input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #693713;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  margin-right: 8px;
  vertical-align: middle;
  text-align: center;
  line-height: 18px;
  font-size: 14px;
  color: #693713;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

/* Mostrar ✓ quando marcado (igual para radios e checkboxes) */
.study-mode-label input[type="radio"]:checked + span::before,
.study-mode-label input[type="checkbox"]:checked + span::before,
.theme-tree input[type="checkbox"]:checked + label::before {
  content: "✓";
  color: #693713;
  background: #fff;
  border-color: #693713;
}

/* foco acessível — quando o input recebe foco, destacar o quadrado adjacente */
.study-mode-label input[type="radio"]:focus + span::before,
.study-mode-label input[type="checkbox"]:focus + span::before,
.theme-tree input[type="checkbox"]:focus + label::before {
  outline: 3px solid rgba(105,55,19,0.12);
  outline-offset: 2px;
}

/* Se por algum motivo há inputs dentro de ul.nested (subtemas), garantir override */
ul.nested li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
}

/* Responsividade: empilha em telas pequenas */
@media (max-width: 900px) {
  .dashboard-main { flex-direction: column; }
  #studyModeBox { width: 100% !important; max-width: none; }
}


/* ===== texto.php - ajuste responsivo para mobile ===== */

/* Wrapper reduzido em telas pequenas */
@media (max-width: 900px) {
  /* Container principal ganha padding lateral menor */
  #textoContainer {
    padding: 8px;
  }

  /* Cards menores e com menos padding para caber na tela */
  .texto-card {
    padding: 12px;
    margin: 12px 6px;
    border-radius: 8px;
  }

  .texto-card h4 {
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .texto-card .front {
    font-size: 0.98rem;
  }

  .texto-card .comment {
    font-size: 0.95rem;
    line-height: 1.45;
  }

  /* imagens: ocupam toda a largura disponível, mantendo proporção */
  .texto-card img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 8px 0;
  }

  /* Botão voltar ocupa largura e tem alvo maior para toque */
  .back-to-dashboard {
    display: block;
    width: 100%;
    max-width: none;
    text-align: center;
    padding: 12px;
    font-size: 1rem;
    margin-bottom: 12px;
  }
}

/* Em telas bem pequenas reduzir ainda mais */
@media (max-width: 420px) {
  .texto-card {
    padding: 10px;
    margin: 10px 6px;
  }

  .texto-card h4 {
    font-size: 0.95rem;
  }
}

/* Sidebar overlay behavior (é importante em mobile) */
@media (max-width: 900px) {
  .sidebar {
    width: 85%;
    max-width: 420px;
  }
  .sidebar-nav .sidebar-link {
    padding: 14px 12px; /* alvo maior */
    font-size: 1rem;
  }
  .sidebar-overlay {
    display: block;
  }
}

/* Acessibilidade: foco nos links do sidebar */
.sidebar-nav .sidebar-link:focus,
.sidebar-nav .sidebar-link:hover {
  background: #f6efe4;
  outline: none;
}

/* Opcional: deixar as respostas (comment) colapsáveis para economizar espaço */
.texto-card .comment {
  transition: max-height 0.22s ease;
  overflow: hidden;
  /* por padrão mostramos tudo; se aplicar classe .collapsed, ficamos com altura limitada */
}
.texto-card.collapsed .comment {
  max-height: 0;
  padding: 0;
  margin: 0;
}
.texto-card .toggle-comment {
  display: inline-block;
  margin-top: 8px;
  color: #693713;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}