/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variáveis globais */
:root {
  /* Tipografia */
  --fonte-pequena: 0.875rem;
  --fonte-base: 1rem;
  --fonte-media: 1.25rem;
  --fonte-grande: 1.5rem;
  --fonte-gigante: 2rem;

  /* Espaçamentos */
  --espaco-xs: 0.5rem;
  --espaco-sm: 1rem;
  --espaco-md: 1.5rem;
  --espaco-lg: 2rem;
  --espaco-xl: 3rem;

  /* Paleta (claro → escuro) */
  --cor-ouro-claro: #dbcb6b;
  --cor-ouro-suave: #c2af5c;
  --cor-ouro: #b29e54;
  --cor-terra: #a4944c;
  --cor-marrom-profundo: #765d34;
}

/* Exemplo de uso */
body {
  font-size: var(--fonte-base);
  background-color: var(--cor-ouro-claro);
  color: var(--cor-marrom-profundo);
  font-family: Arial, sans-serif;
}

.layout {
  display: flex;
  min-height: 100vh;
  background-color: white;
}

/* SIDEBAR */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;

  width: 240px;
  height: 100vh;

  background-color: var(--cor-ouro-claro);
  padding: var(--espaco-md);

  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);

  transition: transform 0.3s ease;
  transform: translateX(0);
  z-index: 1000;
}

.sidebar.closed {
  transform: translateX(-100%);
}

.content {
  flex: 1;
  padding: var(--espaco-lg);
  background-color: white;

  margin-left: 240px;

  transition: margin-left 0.3s ease;
  overflow-x: hidden; /* evita corte lateral */
}

body.sidebar-closed .content {
  margin-left: 30px;
}

.sidebar a {
  color: var(--cor-marrom-profundo);
  text-decoration: none;
  padding: var(--espaco-xs);
  border-radius: 0.4rem;
  transition: 0.2s;
}

.sidebar a:hover {
  background-color: var(--cor-terra);
  color: white;
}

.sidebar-logo {
  display: flex;
  justify-content: center;
}

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

.menu-toggle {
  position: fixed;
  top: 15px;
  left: 15px;

  z-index: 1100;

  background-color: var(--cor-terra);
  color: white;
  border: none;

  font-size: 22px;
  padding: 8px 12px;
  border-radius: 0.4rem;

  cursor: pointer;

  transition: left 0.3s ease;
}

.botoes {
  position: fixed; /* melhor que relative pra flutuar na tela */
  right: 20px;
  bottom: 20px;

  display: flex;              /* <-- faltava isso */
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;

  z-index: 999;
}

/* menu escondido inicialmente */
.menu {
  display: none;
  flex-direction: column;
  gap: 10px;
}

/* quando ativo */
.menu.ativo {
  display: flex;
}

/* botões base */
.botoes a {
  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  font-size: 20px;

  width: 50px;
  height: 50px;
  border-radius: 50%;

  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: 0.2s;
}

/* botão principal (+) */
.botoes .toggle {
  background-color: var(--cor-terra, #8b6b2e);
  color: white;
}

/* cadastrar */
.botoes .add {
  background-color: #2ecc71;
  color: white;
}

/* editar */
.botoes .edit {
  background-color: #555;
  color: white;
}

/* deletar */
.botoes .delete {
  background-color: #e74c3c;
  color: white;
}

/* hover */
.botoes a:hover {
  transform: translateY(-3px);
  opacity: 0.9;
}

/* ===== TABLET E MOBILE ===== */
@media (max-width: 1024px) {
  .content {
    margin-left: 30px; /* não empurra mais */
  }

  .sidebar {
    transform: translateX(-100%); /* começa FECHADA */
  }

  .sidebar.open {
    transform: translateX(0); /* abre por cima */
  }

  body.sidebar-closed .content {
    margin-left: 30px;
  }
}

/* ===== CELULAR PEQUENO ===== */
@media (max-width: 480px) {

  /* Tipografia menor para caber melhor */
  body {
    font-size: var(--fonte-pequena);
  }

  /* Sidebar ocupa menos largura quando aberta */
  .sidebar {
    width: 200px;
    padding: var(--espaco-sm);
  }

  .sidebar a {
    font-size: 0.95rem;
    padding: 0.4rem;
  }

  .sidebar-logo img {
    max-width: 120px;
  }

  /* Conteúdo ocupa tela toda */
  .content {
    padding: var(--espaco-sm);
    margin-left: 35px;
  }

  body.sidebar-closed .content {
    margin-left: 35px;
  }

  /* Botão menu mais acessível */
  .menu-toggle {
    font-size: 20px;
    padding: 6px 10px;
    top: 10px;
    left: 10px;
  }

  /* Botões flutuantes menores */
  .botoes a {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .botoes {
    right: 12px;
    bottom: 12px;
    gap: 8px;
  }

  /* Menu flutuante mais compacto */
  .menu {
    gap: 8px;
  }
}

/* ===== ALTURA PEQUENA (SCROLL NO MENU) ===== */
@media (max-height: 440px) {

  .sidebar {
    overflow-y: auto;        /* ativa rolagem vertical */
    overflow-x: hidden;
    padding-right: 8px;      /* evita cortar scrollbar */
  }

  /* melhora o scroll no mobile */
  .sidebar::-webkit-scrollbar {
    width: 6px;
  }

  .sidebar::-webkit-scrollbar-thumb {
    background: var(--cor-terra);
    border-radius: 10px;
  }

  .sidebar::-webkit-scrollbar-track {
    background: transparent;
  }
}