:root {
  --bg: #430e14;
  --bg-panel: #55151b;
  --bg-panel-2: #621b21;
  --accent: #F28300;
  --accent-dim: #9d5500;
  --accent-glow: rgba(242, 131, 0, 0.35);
  --magenta: #C18B39;
  --text-main: #f5e6dc;
  --text-dim: #c9a39c;
  --border: rgba(233, 185, 182, 0.35);
  --font-mono: 'Courier Prime', monospace;
  --font-display: 'Fraunces', serif;
}

.icone-svg {
  vertical-align: -3px;
  flex-shrink: 0;
}

.login-box h1,
.painel-header h1,
h1, h2, h3 {
  font-style: italic;
  font-weight: 500;
}

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

body {
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* ===== FUNDO ANIMADO (Iridescence) — atrás de todo o conteúdo ===== */
#fx-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.prompt-line {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--accent-dim);
  margin-bottom: 0.3rem;
  letter-spacing: 0.5px;
}

.prompt-symbol {
  color: var(--magenta);
}

/* ===== TELA DE LOGIN ===== */
.login-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2.5rem;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 0 30px var(--accent-glow);
}

.login-box h1 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--text-main);
  margin-bottom: 1.5rem;
  text-shadow: 0 0 12px var(--accent-glow);
}

.form-login {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.form-login label {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.form-login input {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
  outline: none;
}

.form-login input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.form-login button {
  margin-top: 0.6rem;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.form-login button:hover {
  background: var(--accent-glow);
  box-shadow: 0 0 15px var(--accent-glow);
}

.erro-login {
  color: var(--magenta);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.voltar-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-decoration: none;
}

.voltar-link:hover {
  color: var(--accent);
}

/* ===== PAINEL PRIVADO ===== */
.painel-container {
  max-width: 900px;
  width: 100%;
}

.painel-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  margin-bottom: 2.5rem;
  position: relative;
}

.painel-header h1 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--text-main);
  text-shadow: 0 0 12px var(--accent-glow);
}

.painel-secao {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.8rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
}

.painel-secao h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

.painel-vazio {
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* ===== MENU DO PAINEL (rotina / projetos) ===== */
.menu-painel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
}

.card-menu-painel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.8rem 1.6rem;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.card-menu-painel:hover,
.card-menu-painel:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--accent-glow);
}

.card-menu-icone {
  color: var(--accent);
  display: flex;
  margin-bottom: 0.2rem;
}

.card-menu-icone svg {
  display: block;
}

.card-menu-titulo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-main);
}

.card-menu-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* ===== ROTINA SEMANAL (TABELA) ===== */
.rotina-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.rotina-cabecalho h2 {
  margin-bottom: 0;
}

.btn-exportar-pdf {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.btn-exportar-pdf:hover {
  background: var(--accent-glow);
  box-shadow: 0 0 15px var(--accent-glow);
}

.rotina-botoes-exportar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.checkbox-tarefa-estatico {
  color: var(--accent);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Navegação por dia (só aparece no mobile — ver media query) */
.rotina-nav-mobile {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  margin-bottom: 0.8rem;
}

.rotina-nav-mobile button {
  background: none;
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.rotina-nav-mobile button:hover {
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.rotina-nav-mobile .dia-atual-nome {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--accent);
}

/* Modo de captura: some com tudo que não deve ir na imagem compartilhada */
body.modo-captura-imagem .no-print {
  display: none !important;
}

.rotina-print-titulo {
  display: none;
}

.form-add-rotina {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.2rem;
}

.campo-rotina {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.campo-rotina label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.campo-rotina input,
.campo-rotina select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  outline: none;
}

.campo-rotina input:focus,
.campo-rotina select:focus {
  border-color: var(--accent);
}

.campo-rotina-texto {
  flex: 1;
  min-width: 160px;
}

/* ---- seletor de horário (hora + minuto, múltiplos de 5) ---- */
.seletor-horario {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.seletor-horario select {
  padding: 0.5rem 0.4rem;
  min-width: 3.4rem;
  text-align: center;
}

.seletor-horario-dois-pontos {
  color: var(--text-dim);
  font-weight: bold;
}

.horario-fim-tarefa {
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-left: 0.3rem;
  white-space: nowrap;
}

.campo-rotina-dias {
  gap: 0.45rem;
}

.chips-dias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip-dia {
  position: relative;
  cursor: pointer;
}

.chip-dia input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.chip-dia span {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.75rem;
  color: var(--text-dim);
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  user-select: none;
}

.chip-dia input:checked + span {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.chip-dia input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.btn-marcar-todos-dias {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.btn-marcar-todos-dias:hover {
  color: var(--accent);
}

.btn-add-rotina {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.55rem 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.btn-add-rotina:hover {
  background: var(--accent-glow);
  box-shadow: 0 0 15px var(--accent-glow);
}

.tabela-rotina-wrapper {
  overflow-x: auto;
}

.tabela-rotina {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

.tabela-rotina th {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  padding: 0.7rem 0.6rem;
  text-align: center;
  vertical-align: top;
}

.th-horario {
  min-width: 90px;
}

.rotina-dia-nome {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--accent);
}

.rotina-dia-progresso {
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 0.15rem;
}

.tabela-rotina td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.6rem;
  vertical-align: middle;
  min-width: 100px;
  text-align: center;
}

.celula-horario {
  position: sticky;
  left: 0;
  background: var(--bg-panel-2);
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--accent);
  text-align: center;
  white-space: nowrap;
}

.linha-tarefa {
  display: block;
  margin-bottom: 0.3rem;
}

.linha-tarefa:last-child {
  margin-bottom: 0;
}

.linha-tarefa-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.checkbox-tarefa {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.texto-tarefa {
  flex: 0 1 auto;
  font-size: 0.85rem;
  color: var(--text-main);
  text-align: center;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  max-width: 100%;
}

.tarefa-feita .texto-tarefa {
  color: var(--text-dim);
  text-decoration: line-through;
}

.btn-remover-tarefa {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.2s;
}

.btn-remover-tarefa:hover {
  color: var(--magenta);
}

.btn-editar-tarefa {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.2s;
}

.btn-editar-tarefa:hover {
  color: var(--accent);
}

.rotina-vazia {
  text-align: center;
  color: var(--text-dim);
  padding: 1.5rem !important;
  font-size: 0.85rem;
}

/* ===== PROJETOS PRIVADOS ===== */
.form-add-projeto {
  display: flex;
  align-items: flex-end;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.form-add-projeto .campo-form {
  flex: 1;
  min-width: 220px;
}

.lista-projetos {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.item-projeto {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.8rem 1rem;
}

.item-projeto-conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.item-projeto-titulo {
  font-size: 0.95rem;
  color: var(--text-main);
  word-break: break-word;
}

.item-projeto-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  word-break: break-word;
}

.item-projeto-feito .item-projeto-titulo,
.item-projeto-feito .item-projeto-desc {
  color: var(--text-dim);
  text-decoration: line-through;
}

/* ===== LINKS ÚTEIS ===== */
.form-add-link {
  display: flex;
  align-items: flex-end;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.form-add-link .campo-form {
  flex: 1;
  min-width: 200px;
}

.grade-links-uteis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

.bloco-link-util {
  position: relative;
}

.bloco-link-util-abrir {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.4rem 1rem;
  text-decoration: none;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.bloco-link-util-abrir:hover,
.bloco-link-util-abrir:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--accent-glow);
}

.bloco-link-util-imagem {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  flex-shrink: 0;
}

.bloco-link-util-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bloco-link-util-letra {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--accent);
}

.bloco-link-util-imagem > .bloco-link-util-letra {
  display: flex;
}

.bloco-link-util-titulo {
  font-size: 0.85rem;
  color: var(--text-main);
  word-break: break-word;
}

.form-remover-link {
  position: absolute;
  top: -8px;
  right: -8px;
}

.btn-remover-bloco-link {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.btn-remover-bloco-link:hover {
  color: var(--magenta);
  border-color: var(--magenta);
}

/* Modo visualização (padrão) / edição dos links úteis — mesmo padrão
   usado em #rotina.modo-edicao. */
#links-uteis:not(.modo-edicao) .somente-modo-edicao {
  display: none !important;
}

/* ===== IMPRESSÃO / EXPORTAR PDF ===== */
@media print {
  .no-print {
    display: none !important;
  }

  html, body {
    background: #fff;
    color: #111;
    height: auto;
    display: block;
    padding: 0;
  }

  .painel-container {
    max-width: 100%;
    display: block;
  }

  .painel-secao {
    background: #fff;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .rotina-print-titulo {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: 1.7rem;
    color: #430e14;
    border-bottom: 3px solid #F28300;
    padding-bottom: 0.3rem;
    margin-bottom: 0.6rem;
  }

  .rotina-print-titulo::after {
    content: "semana atual";
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #6b6b6b;
  }

  .tabela-rotina-wrapper {
    overflow: visible;
  }

  .tabela-rotina {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 1.5px solid #2a0f12;
    border-radius: 10px;
    overflow: hidden;
  }

  .tabela-rotina th {
    color: #fff;
    border: 1px solid #2a0f12;
    padding: 0.4rem 0.3rem;
  }

  /* Cada dia da semana ganha uma cor própria no cabeçalho — deixa a
     tabela impressa muito mais fácil de escanear visualmente. */
  .tabela-rotina th[data-dia="segunda"] { background: #1d4ed8; }
  .tabela-rotina th[data-dia="terca"]  { background: #b45309; }
  .tabela-rotina th[data-dia="quarta"] { background: #15803d; }
  .tabela-rotina th[data-dia="quinta"] { background: #a21caf; }
  .tabela-rotina th[data-dia="sexta"]  { background: #b91c1c; }
  .tabela-rotina th[data-dia="sabado"] { background: #0e7490; }
  .tabela-rotina th[data-dia="domingo"]{ background: #6d28d9; }
  .th-horario { background: #430e14; }

  .rotina-dia-nome {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: #fff;
  }

  .rotina-dia-progresso {
    color: #e7f7ec;
  }

  .tabela-rotina td {
    border: 1px solid #cfcfcf;
    color: #111;
    padding: 0.35rem 0.4rem;
    min-width: 0;
    text-align: center;
    vertical-align: middle;
  }

  .celula-horario {
    position: static;
    background: #eaf3ec !important;
    color: #430e14;
    font-weight: bold;
    border-right: 2px solid #2a0f12;
  }

  /* Cada linha de horário recebe uma cor própria e bem saturada, pra
     acompanhar a mesma faixa de horário visualmente ao longo da semana */
  .tabela-rotina tbody tr:nth-child(6n+1) td:not(.celula-horario) { background: #d3e4ff; }
  .tabela-rotina tbody tr:nth-child(6n+2) td:not(.celula-horario) { background: #ffedb0; }
  .tabela-rotina tbody tr:nth-child(6n+3) td:not(.celula-horario) { background: #cdf3da; }
  .tabela-rotina tbody tr:nth-child(6n+4) td:not(.celula-horario) { background: #fbd2de; }
  .tabela-rotina tbody tr:nth-child(6n+5) td:not(.celula-horario) { background: #e3d4fb; }
  .tabela-rotina tbody tr:nth-child(6n+6) td:not(.celula-horario) { background: #ffdcb0; }

  .tabela-rotina tbody tr:nth-child(6n+1) .celula-horario { background: #b7d1ff !important; }
  .tabela-rotina tbody tr:nth-child(6n+2) .celula-horario { background: #ffe089 !important; }
  .tabela-rotina tbody tr:nth-child(6n+3) .celula-horario { background: #a7e8bd !important; }
  .tabela-rotina tbody tr:nth-child(6n+4) .celula-horario { background: #f7b3c8 !important; }
  .tabela-rotina tbody tr:nth-child(6n+5) .celula-horario { background: #c9b0f7 !important; }
  .tabela-rotina tbody tr:nth-child(6n+6) .celula-horario { background: #ffc785 !important; }

  .linha-tarefa {
    margin-bottom: 0.2rem;
    gap: 0.3rem;
  }

  .linha-tarefa-visual {
    justify-content: center;
  }

  .texto-tarefa {
    color: #161616;
    text-align: center;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  .tarefa-feita .texto-tarefa {
    color: #6b6b6b;
    text-decoration: line-through;
  }

  .checkbox-tarefa {
    color: #430e14;
    font-size: 0.85rem;
  }

  .celula-vazia {
    opacity: 0.35;
  }

  /* ---- ajuste automático de densidade para caber em 1 página ---- */
  .tabela-rotina-densa-1 .tabela-rotina th,
  .tabela-rotina-densa-1 .tabela-rotina td { padding: 0.3rem 0.35rem; }
  .tabela-rotina-densa-1 .texto-tarefa,
  .tabela-rotina-densa-1 .celula-horario,
  .tabela-rotina-densa-1 .rotina-dia-progresso { font-size: 0.78rem; }

  .tabela-rotina-densa-2 .tabela-rotina th,
  .tabela-rotina-densa-2 .tabela-rotina td { padding: 0.22rem 0.3rem; }
  .tabela-rotina-densa-2 .texto-tarefa,
  .tabela-rotina-densa-2 .celula-horario,
  .tabela-rotina-densa-2 .rotina-dia-progresso { font-size: 0.68rem; }
  .tabela-rotina-densa-2 .linha-tarefa { margin-bottom: 0.1rem; }

  .tabela-rotina-densa-3 .tabela-rotina th,
  .tabela-rotina-densa-3 .tabela-rotina td { padding: 0.14rem 0.25rem; }
  .tabela-rotina-densa-3 .texto-tarefa,
  .tabela-rotina-densa-3 .celula-horario,
  .tabela-rotina-densa-3 .rotina-dia-progresso { font-size: 0.6rem; line-height: 1.15; }
  .tabela-rotina-densa-3 .linha-tarefa { margin-bottom: 0.05rem; }
  .tabela-rotina-densa-3 .rotina-dia-nome { font-size: 0.9rem; }

  @page {
    size: landscape;
    margin: 1cm;
  }
}

/* ===== AVISO DE ACESSO TEMPORÁRIO ===== */
.aviso-temporario {
  background: var(--bg-panel-2);
  border: 1px solid var(--magenta);
  border-radius: 6px;
  padding: 1rem 1.4rem;
  margin-bottom: 1.5rem;
  color: var(--text-main);
}

.aviso-expira {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

.painel-header-acoes {
  display: flex;
  gap: 1rem;
  position: absolute;
  top: 0;
  right: 0;
}

.admin-link {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
}

.admin-link:hover {
  color: var(--accent);
}

.logout-link {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
}

.logout-link:hover {
  color: var(--magenta);
}

/* ===== ESTATÍSTICAS ===== */
.stats-resumo {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
}

.stat-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.2rem 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 130px;
}

.stat-numero {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--accent);
  line-height: 1;
  text-shadow: 0 0 10px var(--accent-glow);
}

.stat-legenda {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.4rem;
}

.stats-grafico-titulo {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.8rem;
}

.stats-barra-linha {
  display: grid;
  grid-template-columns: 50px 1fr 30px;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.stats-barra-fundo {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  height: 14px;
  overflow: hidden;
}

.stats-barra-preenchida {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  height: 100%;
  min-width: 2px;
  transition: width 0.3s;
}

.stats-barra-valor {
  text-align: right;
  color: var(--text-main);
}

/* ===== FORMULÁRIO DE GERAR SENHA TEMPORÁRIA ===== */
.senha-flash {
  background: var(--bg-panel-2);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 1rem 1.4rem;
  margin-bottom: 1.5rem;
}

.senha-flash-aviso {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}

.senha-flash code {
  display: inline-block;
  font-size: 1.4rem;
  color: var(--accent);
  letter-spacing: 1px;
}

.form-gerar-temp {
  display: flex;
  align-items: flex-end;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.campo-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-width: 200px;
}

.campo-form-curto {
  flex: 0 0 140px;
  min-width: 140px;
}

.campo-form label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.campo-form input {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 0.65rem 0.8rem;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
  width: 100%;
}

.campo-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.btn-gerar {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 0.65rem 1.4rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.btn-gerar:hover {
  background: var(--accent-glow);
  box-shadow: 0 0 15px var(--accent-glow);
}

/* ===== TABELA DE ACESSOS ===== */
.tabela-acessos {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tabela-acessos-cabecalho,
.tabela-acessos-linha {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.8fr 0.8fr;
  align-items: center;
  gap: 0.8rem;
}

.tabela-acessos-cabecalho-fixa,
.tabela-acessos-linha-fixa {
  grid-template-columns: 2fr 1.2fr 1fr 0.8fr;
}

.secao-explicacao {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.tabela-acessos-cabecalho {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  padding: 0 1rem;
  margin-bottom: 0.2rem;
}

.tabela-acessos-linha {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  font-size: 0.85rem;
}

.tabela-acessos-linha.inativo {
  opacity: 0.45;
}

.col-motivo {
  color: var(--text-main);
  font-weight: 600;
}

.col-data {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.status-badge {
  justify-self: start;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  border: 1px solid currentColor;
}

.status-ativo {
  color: var(--accent);
}

.status-expirado {
  color: var(--text-dim);
}

.status-revogado {
  color: var(--magenta);
}

.col-acao {
  justify-self: end;
}

.btn-revogar {
  background: transparent;
  border: 1px solid var(--magenta);
  color: var(--magenta);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.btn-revogar:hover {
  background: rgba(255, 77, 77, 0.15);
}

@media screen and (max-width: 700px) {
  .tabela-acessos-cabecalho {
    display: none;
  }

  .tabela-acessos-linha {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .col-acao {
    justify-self: start;
    margin-top: 0.4rem;
  }

  body {
    padding: 1.2rem 0.8rem;
    align-items: flex-start;
  }

  .login-box {
    padding: 1.8rem 1.4rem;
  }

  /* ---- cabeçalho do painel ---- */
  .painel-header {
    gap: 0.7rem;
    margin-bottom: 1.8rem;
  }

  .painel-header h1 {
    font-size: 1.9rem;
  }

  .painel-header-acoes {
    position: static;
    justify-content: flex-start;
  }

  .painel-secao {
    padding: 1.2rem 1rem;
  }

  /* ---- menu rotina/projetos ---- */
  .menu-painel {
    grid-template-columns: 1fr;
  }

  /* ---- formulário de nova tarefa da rotina ---- */
  .form-add-rotina,
  .form-add-projeto,
  .form-add-link,
  .form-gerar-temp {
    flex-direction: column;
    align-items: stretch;
  }

  .campo-rotina-texto,
  .form-add-projeto .campo-form,
  .form-add-link .campo-form {
    min-width: 0;
  }

  .campo-form-curto {
    flex: 1;
    min-width: 0;
  }

  .btn-add-rotina,
  .btn-gerar {
    width: 100%;
  }

  .rotina-cabecalho {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-exportar-pdf {
    width: 100%;
  }

  .rotina-botoes-exportar {
    width: 100%;
    flex-wrap: nowrap;
  }

  .rotina-botoes-exportar .btn-exportar-pdf {
    width: auto;
    flex: 1;
  }

  /* ---- grade da rotina: modo "um dia por vez", continua em formato de tabela ---- */
  .tabela-rotina-wrapper {
    overflow-x: visible;
  }

  .tabela-rotina {
    min-width: 0;
    width: 100%;
  }

  .rotina-nav-mobile {
    display: flex;
  }

  .tabela-rotina-grade th:not(.th-horario),
  .tabela-rotina-grade td:not(.celula-horario) {
    display: none;
  }

  /* Baseado em data-dia (não em posição/nth-child): com células
     mescladas (rowspan), uma linha pode "pular" colunas, o que faria
     a contagem por posição errar o dia mostrado. */
  .tabela-rotina-grade[data-dia-ativo="segunda"] [data-dia="segunda"],
  .tabela-rotina-grade[data-dia-ativo="terca"] [data-dia="terca"],
  .tabela-rotina-grade[data-dia-ativo="quarta"] [data-dia="quarta"],
  .tabela-rotina-grade[data-dia-ativo="quinta"] [data-dia="quinta"],
  .tabela-rotina-grade[data-dia-ativo="sexta"] [data-dia="sexta"],
  .tabela-rotina-grade[data-dia-ativo="sabado"] [data-dia="sabado"],
  .tabela-rotina-grade[data-dia-ativo="domingo"] [data-dia="domingo"] {
    display: table-cell;
  }

  .celula-horario {
    position: static;
    white-space: nowrap;
  }

  /* ---- estatísticas do admin ---- */
  .stats-resumo {
    gap: 0.8rem;
  }

  .stat-card {
    flex: 1;
    min-width: 0;
    padding: 1rem;
  }
}

/* ============================================================
   NOVIDADES: AJAX, TOASTS, PWA E RECORRÊNCIA
   ============================================================ */

/* ---- transição suave ao trocar conteúdo via AJAX ---- */
.fade-atualizando {
  opacity: 0.35;
  transform: translateY(2px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.tarefa-processando {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.tarefa-removendo {
  opacity: 0.25;
  transform: scale(0.97);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.linha-tarefa {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ---- Modo visualização (padrão) / edição da rotina ---- */
/* Por padrão (fora do modo edição), esconde tudo que serve só pra
   editar: botão de adicionar, editar e remover tarefas. Assim que
   #rotina.modo-edicao é ativado, essas regras deixam de valer e os
   elementos voltam a usar seu display normal (flex/grid/etc). */
#rotina:not(.modo-edicao) .somente-modo-edicao {
  display: none !important;
}

/* Editor inline de uma tarefa: fica escondido até clicar em "✎" */
.editor-tarefa {
  display: none;
}

.linha-tarefa.editando .linha-tarefa-visual {
  display: none;
}

.linha-tarefa.editando .editor-tarefa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  margin-top: 0.3rem;
  padding: 0.7rem;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.editor-tarefa-campo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.editor-tarefa-campo select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-family: var(--font-mono);
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
}

.editor-tarefa-acoes {
  display: flex;
  gap: 0.4rem;
}

.btn-salvar-editor-tarefa {
  background: var(--accent);
  color: var(--bg);
  border: none;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
}

.btn-cancelar-editor-tarefa {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
}

/* ---- Células mescladas (tarefas com início/término, rowspan) ---- */
.celula-mesclada {
  vertical-align: middle !important;
  border-left: 3px solid var(--accent) !important;
  background: linear-gradient(160deg, rgba(242, 131, 0, 0.1), rgba(242, 131, 0, 0.01)) !important;
}

/* ---- resumo da semana (rotina) ---- */
.rotina-resumo-semana {
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}

/* ---- badge de recorrência mensal (projetos) ---- */
.badge-recorrente {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--magenta);
  border: 1px solid var(--magenta);
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.campo-checkbox-recorrente {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0.4rem 0 0.8rem;
  cursor: pointer;
}

.campo-checkbox-recorrente input {
  accent-color: var(--accent);
}

/* ---- status do resumo por e-mail (admin) ---- */
.resumo-email-status {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0.6rem 0 1rem;
}

/* ---- TOASTS (notificações de feedback) ---- */
#toasts-container {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: min(320px, calc(100vw - 2.4rem));
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-dim);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}

.toast-visivel {
  opacity: 1;
  transform: translateX(0);
}

.toast-saindo {
  opacity: 0;
  transform: translateX(24px);
}

.toast-icone {
  flex-shrink: 0;
  width: 1.3rem;
  height: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
}

.toast-sucesso { border-left-color: var(--accent); }
.toast-sucesso .toast-icone { background: var(--accent-glow); color: var(--accent); }

.toast-erro { border-left-color: #ff4d4d; }
.toast-erro .toast-icone { background: rgba(255, 77, 77, 0.18); color: #ff4d4d; }

.toast-info { border-left-color: var(--magenta); }
.toast-info .toast-icone { background: rgba(193, 139, 57, 0.2); color: #C18B39; }

@media (max-width: 600px) {
  #toasts-container {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: none;
  }
}

/* ---- botão "instalar app" (PWA) — escondido por padrão, JS revela quando disponível ---- */
#btn-instalar-app {
  background: transparent;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
}

#btn-instalar-app[hidden] {
  display: none;
}

/* ============================================================
   FINANÇAS — só classes novas, prefixadas com "financas-".
   Reaproveita as variáveis de tema (--accent, --bg-panel, etc.)
   e vários componentes já existentes (stat-card, toast, campo-form,
   status-badge...). Nenhuma regra acima foi alterada.
   ============================================================ */

.financas-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.financas-filtros {
  display: flex;
  align-items: flex-end;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.financas-campo-filtro {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.financas-campo-filtro label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.financas-campo-filtro select,
.financas-campo-filtro input {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  outline: none;
}

.financas-campo-filtro select:focus,
.financas-campo-filtro input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.financas-periodo-custom {
  display: none;
  gap: 0.6rem;
}

.financas-periodo-custom.financas-visivel {
  display: flex;
}

.financas-acoes-topo {
  display: flex;
  gap: 0.6rem;
}

.btn-financas-editar,
.btn-financas-salvar,
.btn-financas-cancelar {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.55rem 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.btn-financas-editar:hover,
.btn-financas-salvar:hover {
  background: var(--accent-glow);
  box-shadow: 0 0 15px var(--accent-glow);
}

.btn-financas-cancelar {
  border-color: var(--text-dim);
  color: var(--text-dim);
}

.btn-financas-cancelar:hover {
  border-color: var(--magenta);
  color: var(--magenta);
  background: rgba(193, 139, 57, 0.12);
}

/* ---- resumo (cards) ---- */
.financas-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.8rem;
  align-items: stretch;
}

.financas-stat-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.15rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.financas-stat-legenda {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.financas-stat-valor {
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: 1.15;
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
}

.financas-stat-saldo-positivo {
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
}

.financas-stat-saldo-negativo {
  color: #ff6b6b;
  text-shadow: 0 0 6px rgba(255, 107, 107, 0.35);
}

.financas-meta-card {
  grid-column: 1 / -1;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.15rem 1.3rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.financas-meta-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.financas-meta-topo strong {
  color: var(--text-main);
  font-weight: normal;
}

.financas-meta-barra-fundo {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 14px;
  overflow: hidden;
}

.financas-meta-barra-preenchida {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
  height: 100%;
  min-width: 2px;
  border-radius: 10px;
  transition: width 0.4s ease;
}

.financas-meta-barra-preenchida.financas-meta-estourada {
  background: var(--magenta);
  box-shadow: 0 0 6px rgba(193, 139, 57, 0.3);
}

/* ---- gráficos ---- */
.financas-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.2rem;
  margin-bottom: 1.8rem;
  align-items: stretch;
}

.financas-grafico-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
}

.financas-grafico-titulo {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.8rem;
}

/* Chart.js precisa de um container com altura FIXA e position:relative —
   sem isso, ele entra num loop de redimensionamento e o canvas cresce
   sem parar, empurrando/sobrepondo o que vem depois na página. */
.financas-grafico-caixa {
  position: relative;
  height: 220px;
  width: 100%;
}

.financas-grafico-caixa canvas {
  max-width: 100%;
}

.financas-grafico-vazio {
  color: var(--text-dim);
  font-size: 0.8rem;
  text-align: center;
  padding: 2rem 0;
}

/* ---- listas (fixos / variáveis / vencimentos) ---- */
.financas-listas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}

.financas-lista-bloco {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.15rem 1.3rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.financas-lista-titulo {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.financas-lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.financas-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.financas-item-vencendo {
  border-left: 3px solid #ffb347;
}

.financas-item-atrasado {
  border-left: 3px solid #ff6b6b;
}

.financas-item-entrando {
  opacity: 0;
  transform: translateY(-6px);
}

.financas-item-saindo {
  opacity: 0;
  transform: translateX(12px);
}

.financas-item-check {
  background: none;
  border: 1px solid var(--border);
  color: var(--accent);
  border-radius: 6px;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.financas-item-check:hover {
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.financas-item-conteudo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.financas-item-linha-topo {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: baseline;
}

.financas-item-nome {
  font-size: 0.9rem;
  color: var(--text-main);
  word-break: break-word;
}

.financas-item-valor {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-main);
  white-space: nowrap;
}

.financas-item-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--text-dim);
}

.financas-item-pago .financas-item-nome,
.financas-item-pago .financas-item-valor {
  color: var(--text-dim);
  text-decoration: line-through;
}

.financas-categoria-badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0.12rem 0.5rem;
  border-radius: 6px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.financas-item-acoes {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.financas-item-acoes button {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.2rem;
  transition: color 0.2s;
}

.financas-item-acoes button:hover {
  color: var(--accent);
}

.financas-item-acoes .financas-btn-excluir:hover {
  color: var(--magenta);
}

.financas-lista-vazia {
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* ---- edição inline de um item ---- */
.financas-item-edicao {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.financas-item-edicao-linha {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.financas-item-edicao input,
.financas-item-edicao select {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  outline: none;
  min-width: 0;
  flex: 1;
}

.financas-item-edicao input:focus,
.financas-item-edicao select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.financas-item-edicao-checkbox {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-dim);
  flex: 0 0 auto;
}

/* ---- formulário de adicionar (só aparece em modo edição) ---- */
.financas-form-add {
  display: none;
  align-items: flex-end;
  gap: 0.8rem;
  flex-wrap: wrap;
  background: var(--bg-panel);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-top: 0.9rem;
}

.financas-modo-edicao .financas-form-add {
  display: flex;
}

.financas-form-add .campo-form {
  min-width: 130px;
}

/* ---- modal de confirmação ---- */
.financas-modal-fundo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 9, 0.72);
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
}

.financas-modal-fundo.financas-modal-aberto {
  display: flex;
}

.financas-modal {
  background: var(--bg-panel);
  border: 1px solid var(--accent-dim);
  border-radius: 10px;
  padding: 1.7rem;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 24px var(--accent-glow);
}

.financas-modal p {
  color: var(--text-main);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 1.3rem;
}

.financas-modal-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.financas-modal-acoes button {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.55rem 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.financas-modal-confirmar {
  background: transparent;
  border: 1px solid var(--magenta);
  color: var(--magenta);
}

.financas-modal-confirmar:hover {
  background: rgba(193, 139, 57, 0.16);
  box-shadow: 0 0 15px rgba(193, 139, 57, 0.28);
}

.financas-modal-cancelar {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.financas-modal-cancelar:hover {
  color: var(--text-main);
  border-color: var(--text-dim);
}

@media (max-width: 768px) {
  .financas-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .financas-filtros {
    flex-direction: column;
    align-items: stretch;
  }

  .financas-acoes-topo {
    justify-content: stretch;
  }

  .btn-financas-editar,
  .btn-financas-salvar,
  .btn-financas-cancelar {
    flex: 1;
  }

  .financas-listas {
    grid-template-columns: 1fr;
  }

  .financas-item-linha-topo {
    flex-direction: column;
    gap: 0.1rem;
  }
}

/* ============================================================
   IFSC — notas, faltas e faltas abonadas por matéria.
   Reaproveita vários componentes de FINANÇAS (financas-toolbar,
   financas-stat-card, financas-meta-barra...) por serem genéricos
   o bastante; só o que é específico de matéria/nota ganha classe
   nova aqui, prefixada "ifsc-".
   ============================================================ */

.ifsc-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}

.ifsc-materia-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.ifsc-materia-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
}

.ifsc-materia-nome {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--accent);
  line-height: 1.25;
}

.ifsc-materia-local {
  font-size: 0.72rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
}

.ifsc-notas-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ifsc-nota-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  min-width: 3.2rem;
}

.ifsc-nota-media {
  border-color: var(--accent-dim);
}

.ifsc-nota-numero {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ifsc-nota-valor {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-main);
}

.ifsc-nota-media .ifsc-nota-valor {
  color: var(--accent);
}

.ifsc-faltas-bloco {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.ifsc-faltas-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.ifsc-faltas-numeros strong {
  color: var(--text-main);
  font-weight: normal;
}

.ifsc-status-badge {
  align-self: flex-start;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  border: 1px solid currentColor;
}

.ifsc-status-ok { color: var(--accent); }
.ifsc-status-atencao { color: #ffb347; }
.ifsc-status-excedido { color: var(--magenta); }
.ifsc-status-semlimite { color: var(--text-dim); }

/* ---- modo edição ---- */
.ifsc-notas-edicao,
.ifsc-faltas-edicao {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
}

.ifsc-nota-campo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ifsc-nota-campo input {
  width: 4.2rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  outline: none;
}

.ifsc-nota-campo input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.ifsc-ff-preview {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-left: auto;
}

.ifsc-ff-preview strong {
  color: var(--text-main);
  font-weight: normal;
}

@media (max-width: 768px) {
  .ifsc-grade {
    grid-template-columns: 1fr;
  }

  .ifsc-ff-preview {
    margin-left: 0;
  }
}

/* ===== IFSC: abas ===== */
.ifsc-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.2rem;
}

.ifsc-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.6rem 0.2rem;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.ifsc-tab-btn:hover {
  color: var(--text-main);
}

.ifsc-tab-btn.ativa {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ===== IFSC: tarefas por matéria ===== */
.ifsc-legenda-prioridade {
  font-weight: bold;
}

.ifsc-item-tarefa {
  align-items: center;
}

.ifsc-prioridade-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.ifsc-prioridade-imediato,
.ifsc-legenda-prioridade.ifsc-prioridade-imediato {
  color: var(--magenta);
}

.ifsc-prioridade-espera,
.ifsc-legenda-prioridade.ifsc-prioridade-espera {
  color: #ffb347;
}

.ifsc-prioridade-tranquilo,
.ifsc-legenda-prioridade.ifsc-prioridade-tranquilo {
  color: var(--accent);
}

/* ============================================================
   SIDEBAR RETRÁTIL
   ------------------------------------------------------------
   Colapsada (desktop): rail de 68px só com ícones, centralizados.
   Expandida: hover OU fixada via botão de pin (persiste na sessão).
   Mobile: vira um drawer off-canvas acionado pelo botão hambúrguer.
   ============================================================ */

body.tem-sidebar {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  min-height: 100vh;
}

.painel-conteudo {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding: 2rem 1.2rem 3rem;
}

.sidebar-backdrop {
  display: none;
}

.sidebar-toggle-mobile {
  display: none;
}

.sidebar {
  --sidebar-largura-fechada: 68px;
  --sidebar-largura-aberta: 244px;

  flex-shrink: 0;
  width: var(--sidebar-largura-fechada);
  height: 100vh;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease;
  position: sticky;
  top: 0;
  z-index: 50;
}

.sidebar:hover,
.sidebar.sidebar-fixada {
  width: var(--sidebar-largura-aberta);
}

/* Tudo que só faz sentido com a sidebar aberta (textos, setas, badges)
   fica com opacidade 0 e largura 0 enquanto colapsada — nunca "solto"
   ocupando espaço ou espremendo o ícone. */
.sidebar-so-aberta {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.sidebar:hover .sidebar-so-aberta,
.sidebar.sidebar-fixada .sidebar-so-aberta {
  opacity: 1;
  max-width: 999px;
  pointer-events: auto;
}

.sidebar-topo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 56px;
  padding: 0 0.9rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-marca {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  flex: 1;
  min-width: 0;
}

.sidebar-toggle-pin {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0.3rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  margin-left: auto;
}

.sidebar-toggle-pin:hover {
  background: var(--bg-panel-2);
}

.sidebar.sidebar-fixada .sidebar-toggle-pin {
  color: var(--text-main);
  background: var(--bg-panel-2);
}

.sidebar-grupos {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.6rem 0;
  scrollbar-width: thin;
}

.sidebar-grupo {
  width: var(--sidebar-largura-aberta);
}

.sidebar-grupo-cabecalho {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  height: 46px;
  padding: 0 0.9rem;
  background: none;
  border: none;
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.sidebar-grupo-cabecalho:hover,
.sidebar-item-ativo {
  color: var(--accent);
  background: var(--bg-panel-2);
}

.sidebar-icone {
  flex-shrink: 0;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-seta {
  font-size: 0.7rem;
  color: var(--text-dim);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.sidebar-grupo-aberto .sidebar-seta {
  transform: rotate(-180deg);
}

/* O acordeão só existe visualmente quando a sidebar está aberta —
   colapsada, mesmo o grupo "ativo" fica só com o ícone destacado. */
.sidebar-subitens {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
  width: var(--sidebar-largura-aberta);
}

.sidebar:hover .sidebar-grupo-aberto .sidebar-subitens,
.sidebar.sidebar-fixada .sidebar-grupo-aberto .sidebar-subitens {
  max-height: 320px;
}

.sidebar-subitem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 40px;
  padding: 0 0.9rem 0 2.7rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-decoration: none;
  white-space: nowrap;
}

.sidebar-subitem:hover,
.sidebar-subitem.sidebar-item-ativo {
  color: var(--accent);
  background: var(--bg-panel-2);
}

.sidebar-badge-construcao {
  flex-shrink: 0;
  font-size: 0.62rem;
  color: var(--magenta);
  border: 1px solid var(--magenta);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  white-space: nowrap;
}

.sidebar-rodape {
  border-top: 1px solid var(--border);
  padding: 0.5rem 0;
  flex-shrink: 0;
}

.sidebar-rodape-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  height: 44px;
  padding: 0 0.9rem;
  width: var(--sidebar-largura-aberta);
  color: var(--text-dim);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.sidebar-rodape-link:hover {
  color: var(--accent);
  background: var(--bg-panel-2);
}

/* ---- Mobile: sidebar vira drawer off-canvas ---- */
@media (max-width: 860px) {
  body.tem-sidebar {
    display: block;
  }

  .painel-conteudo {
    padding: 4.2rem 1rem 3rem;
    display: block;
  }

  .sidebar-toggle-mobile {
    display: flex;
    position: fixed;
    top: 0.9rem;
    left: 1rem;
    z-index: 220;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--accent);
    padding: 0.5rem;
    cursor: pointer;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-largura-aberta) !important;
    max-width: 82vw;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 230;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.5);
  }

  /* no mobile a sidebar sempre abre "cheia" — não existe estado colapsado */
  .sidebar .sidebar-so-aberta {
    opacity: 1;
    max-width: 999px;
    pointer-events: auto;
  }

  .sidebar .sidebar-grupo-aberto .sidebar-subitens {
    max-height: 320px;
  }

  .sidebar.sidebar-aberta-mobile {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 225;
  }

  .sidebar.sidebar-aberta-mobile ~ .sidebar-backdrop,
  body.sidebar-mobile-travando-scroll .sidebar-backdrop {
    display: block;
  }

  body.sidebar-mobile-travando-scroll {
    overflow: hidden;
  }
}

/* ============================================================
   DASHBOARD GERAL (Início)
   ============================================================ */
.dashboard-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.dashboard-card {
  display: block;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.3rem 1.4rem;
  text-decoration: none;
  color: var(--text-main);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.dashboard-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.dashboard-card-construcao {
  opacity: 0.75;
}

.dashboard-card-cabecalho {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  color: var(--accent);
}

.dashboard-card-titulo {
  font-family: var(--font-display);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dashboard-card-numero {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--text-main);
}

.dashboard-card-numero-legenda {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
}

.dashboard-card-detalhe,
.dashboard-card-vazio {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-top: 0.3rem;
}

.dashboard-card-lista {
  list-style: none;
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.dashboard-card-lista li {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-dim);
}

.dashboard-item-feito {
  text-decoration: line-through;
  opacity: 0.6;
}

/* ============================================================
   ROUPAS — grid do guarda-roupa
   ============================================================ */
.roupas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.9rem;
}

.roupas-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.roupas-card-suja {
  opacity: 0.6;
}

.roupas-card-imagem {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 6px;
}

.roupas-card-sem-imagem {
  width: 100%;
  height: 110px;
  border-radius: 6px;
  background: var(--bg-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.roupas-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.roupas-card-nome {
  font-size: 0.88rem;
  color: var(--text-main);
}

.roupas-card-meta {
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* ============================================================
   TREINO — cronômetro de descanso
   ============================================================ */
.treino-timer {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
}

.treino-timer-display {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--accent);
  min-width: 90px;
}

.treino-timer-botoes {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.treino-timer-botoes button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
}

.treino-timer-botoes button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

#treino-timer-iniciar {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}