/* =========================================
   VARIÁVEIS GLOBAIS E TEMA (CLARO/ESCURO)
========================================= */
:root {
  --text: #6b6375;
  --text-h: #08060d;
  --bg: #fff;
  --border: #e5e4e7;
  --code-bg: #f4f3ec;
  --accent: #aa3bff;
  --accent-bg: #aa3bff1a;
  --accent-border: #aa3bff80;
  --social-bg: #f4f3ec80;
  --shadow: #0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;
  --sans: system-ui, "Segoe UI", Roboto, sans-serif;
  --heading: system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, Consolas, monospace;
  font: 18px/145% var(--sans);
  letter-spacing: .18px;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light dark;
  font-synthesis: none;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    --text: #9ca3af;
    --text-h: #f3f4f6;
    --bg: #16171d;
    --border: #2e303a;
    --code-bg: #1f2028;
    --accent: #c084fc;
    --accent-bg: #c084fc26;
    --accent-border: #c084fc80;
    --social-bg: #2f303a80;
    --shadow: #0006 0 10px 15px -3px, #00000040 0 4px 6px -2px;
  }
}

/* =========================================
   CONFIGURAÇÕES BASE E RESET
========================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #f4f7f6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow-x: hidden; /* Trava a rolagem horizontal */
}

#root {
  text-align: center;
  border-inline: 1px solid var(--border);
  box-sizing: border-box;
  flex-direction: column;
  width: 100%;
  max-width: 1126px; 
  min-height: 100svh;
  margin: 0 auto;
  display: flex;
  overflow-x: hidden;
  background-color: #f4f7f6; /* Preenche fundo vazio */
}

h1, h2 {
  font-family: var(--heading);
  color: var(--text-h);
  font-weight: 500;
}

h1 {
  letter-spacing: -1.68px;
  margin: 32px 0;
  font-size: 56px;
  line-height: 1.2;
}

h2 {
  letter-spacing: -.24px;
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.2;
}

p { margin: 0; }

code, .counter {
  font-family: var(--mono);
  color: var(--text-h);
  border-radius: 4px;
  display: inline-flex;
}

code {
  background: var(--code-bg);
  padding: 4px 8px;
  font-size: 15px;
  line-height: 135%;
}

/* =========================================
   ESTILOS DO APLICATIVO
========================================= */
.container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 15px;
}

.title {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 2rem;
  line-height: 1.2;
}

.tabs {
  border-bottom: 2px solid #ddd;
  justify-content: center;
  flex-wrap: wrap; 
  gap: 10px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  display: flex;
}

.tab-btn {
  cursor: pointer;
  color: #555;
  background: #e0e0e0;
  border: none;
  border-radius: 5px;
  padding: 12px 24px;
  font-size: 1rem;
  transition: all .3s;
}

.tab-btn:hover { background: #d5d5d5; }
.tab-btn.active { color: #fff; background: #2c3e50; font-weight: 700; }

.card {
  text-align: center;
  background: #fff;
  border-radius: 10px;
  padding: 40px 20px;
  box-shadow: 0 4px 6px #0000000d;
}

.form-container {
  background: #fff;
  border-radius: 10px;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
  padding: 25px;
  display: flex;
  box-shadow: 0 4px 6px #0000000d;
}

.form-container.editing {
  background: #fffde7;
  border: 2px solid #f39c12;
}

.input-field {
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  transition: border-color .3s;
}

.input-field:focus { border-color: #3498db; }

/* BOTOES */
.btn {
  cursor: pointer;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 700;
  transition: opacity .3s;
}
.btn:hover { opacity: .9; }
.btn-primary { background: #27ae60; }
.btn-secondary { background: #3498db; }
.btn-dark { background: #2c3e50; }
.btn-warning { background: #f39c12; }
.btn-danger { background: #e74c3c; }
.btn-cancel { background: #95a5a6; }

.btn-sm {
  cursor: pointer;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: .9rem;
}

.button-group {
  gap: 10px;
  width: 100%;
  display: flex;
  flex-wrap: wrap; 
}

.button-group .btn { flex: 1; min-width: 120px; }

/* LISTAGENS */
.word-list {
  background: #fff;
  border-radius: 10px;
  list-style: none;
  overflow: hidden;
  box-shadow: 0 4px 6px #0000000d;
}

.word-item {
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 15px 20px;
  display: flex;
}
.word-item:last-child { border-bottom: none; }

.word-info { flex: 1 1 auto; }
.word-info strong { color: #2c3e50; font-size: 1.1rem; }
.word-info span { color: #7f8c8d; margin-left: 5px; font-size: .9rem; }

.word-actions {
  gap: 8px;
  display: flex;
}

/* =========================================
   REGRAS DE RESPONSIVIDADE (MOBILE FIXES)
========================================= */
@media (max-width: 1024px) {
  h1 { margin: 20px 0; font-size: 36px; }
  h2 { font-size: 20px; }
}

@media (max-width: 768px) {
  /* Tira a borda preta lateral que estava bugando o layout */
  #root { border-inline: none; }

  /* Abas em formato de coluna */
  .tabs { flex-direction: column; gap: 5px; }
  .tab-btn { width: 100%; margin: 0; }
  
  /* Ajustes dos Textos Grandes no Flashcard */
  h2 { font-size: 2rem !important; word-break: break-word; }

  /* Ajuste OBRIGATÓRIO do Filtro de Categorias */
  .card > div:first-of-type {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  
  /* Força o seletor a caber na tela cortando textos muito grandes */
  .card select.input-field {
    width: 100% !important;
    max-width: 100% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  /* Lista de palavras com itens 100% abaixo do texto */
  .word-item { flex-direction: column; align-items: flex-start; gap: 15px; }
  .word-info { line-height: 1.5; width: 100%; word-break: break-word; }
  
  /* Botões Editar/Excluir tela toda */
  .word-actions { width: 100%; }
  .word-actions .btn-sm { flex: 1; padding: 12px; }
  
  /* Grupo de botões do form em coluna */
  .button-group { flex-direction: column; }
  .button-group .btn { width: 100%; }

  /* Sobrescreve flex da barra de pesquisa */
  form[style*="display: flex"] { flex-direction: column !important; }
  form[style*="display: flex"] button { width: 100%; margin-top: 5px; }

  /* Sobrescreve o grid de 3 colunas dos verbos para 1 coluna no celular */
  div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}