:root {
  --color-primary: #0A67B7;
  --color-primary-dark: #084E8A;
  --color-accent: #F56A2A;
  --color-accent-dark: #d9581f;
  --color-text: #222222;
  --color-bg-light: #F5F5F5;
  --color-white: #FFFFFF;
  --color-danger: #C0392B;
  --color-border: #E0E0E0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--color-bg-light);
  color: var(--color-text);
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: var(--color-white);
  flex-wrap: wrap;
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  background: var(--color-white);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  line-height: 0;
}
.topbar__logo { height: 32px; width: auto; display: block; }
.topbar__nav { display: flex; gap: 1.25rem; }
.topbar__nav a { color: var(--color-white); opacity: 0.9; font-weight: 500; }
.topbar__nav a:hover { opacity: 1; text-decoration: underline; }
.topbar__user { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; }
.topbar__user small { opacity: 0.75; }
.topbar__user .btn-link { color: var(--color-white); text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.page-head h1 { margin: 0; font-size: 1.4rem; color: var(--color-primary-dark); }

.btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}
.btn:hover { background: var(--color-accent-dark); text-decoration: none; }
.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary); color: var(--color-white); }
.btn--perigo { background: var(--color-danger); }
.btn--perigo:hover { background: #96281c; }
.btn-link { background: none; border: none; color: var(--color-primary); cursor: pointer; padding: 0; font-size: 0.9rem; }
.btn-link--perigo { color: var(--color-danger); }

.filtros {
  display: flex;
  align-items: end;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--color-white);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  border: 1px solid var(--color-border);
}
.filtros label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; }
.filtros select, .filtros input { padding: 0.45rem; border: 1px solid var(--color-border); border-radius: 5px; }

.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.meta-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.meta-card__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.meta-card__cabecalho h2 { margin: 0; font-size: 1.05rem; color: var(--color-primary-dark); }
.meta-card__editar { position: relative; }
.meta-card__form {
  position: absolute;
  right: 0;
  top: 1.6rem;
  z-index: 5;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.85rem;
  display: flex;
  align-items: end;
  gap: 0.75rem;
  white-space: nowrap;
}
.meta-card__form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; }
.meta-card__form input { padding: 0.45rem; border: 1px solid var(--color-border); border-radius: 5px; width: 140px; }
.meta-gauge-linha { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.meta-gauge { position: relative; width: 160px; height: 160px; flex: none; }
.meta-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.meta-gauge__fundo { fill: none; stroke: var(--color-primary); stroke-width: 16; }
.meta-gauge__progresso {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 16;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}
.meta-gauge__texto {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.meta-gauge__texto strong { font-size: 1.6rem; color: var(--color-primary-dark); }
.meta-gauge__texto span { font-size: 0.8rem; color: #777; }
.meta-gauge__detalhes { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.95rem; }
.meta-gauge__linha { display: flex; align-items: center; gap: 0.5rem; }
.meta-gauge__linha--ok { font-weight: 700; color: var(--color-primary-dark); }
.meta-gauge__bolinha { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.meta-gauge__bolinha--vendido { background: var(--color-accent); }
.meta-gauge__bolinha--meta { background: var(--color-primary); }

.grafico-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.5rem;
}
.grafico-card h2 { margin: 0 0 1.5rem; font-size: 1.05rem; color: var(--color-primary-dark); }
.grafico {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  height: 220px;
  padding: 0 0.5rem;
}
.grafico__coluna {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.grafico__valor { font-size: 0.75rem; color: #666; margin-bottom: 0.4rem; white-space: nowrap; }
.grafico__barra {
  width: 100%;
  max-width: 48px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 6px 6px 0 0;
  transition: height 0.3s ease;
}
.grafico__label { margin-top: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--color-text); }

.ranking-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.ranking-card h2 { margin: 0 0 1.25rem; font-size: 1.05rem; color: var(--color-primary-dark); }
.ranking-posicao { font-size: 1.1rem; text-align: center; width: 3rem; }

.podio {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0 0;
  margin-bottom: 2rem;
}
.podio__coluna {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
}
.podio__medalha { font-size: 2.5rem; line-height: 1; margin-bottom: 0.4rem; }
.podio__nome { font-weight: 700; font-size: 1.05rem; color: var(--color-text); text-align: center; }
.podio__valor { font-size: 1.15rem; font-weight: 800; color: var(--color-primary-dark); margin-top: 0.2rem; }
.podio__info { font-size: 0.78rem; color: #777; margin-bottom: 0.75rem; text-align: center; }
.podio__bloco {
  width: 100%;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-white);
}
.podio__bloco--1 { height: 150px; background: linear-gradient(180deg, #FFD75E, #E8A311); }
.podio__bloco--2 { height: 110px; background: linear-gradient(180deg, #D9D9D9, #A8A8A8); }
.podio__bloco--3 { height: 80px; background: linear-gradient(180deg, #E8A97A, #C97A3F); }

@media (max-width: 600px) {
  .podio { gap: 0.75rem; }
  .podio__coluna { width: 100px; }
  .podio__medalha { font-size: 2rem; }
}

.ranking-lista { list-style: none; margin: 0; padding: 0; }
.ranking-lista__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.4rem;
  border-bottom: 1px solid var(--color-border);
}
.ranking-lista__item:last-child { border-bottom: none; }
.ranking-lista__posicao {
  width: 2rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-align: center;
  flex: none;
}
.ranking-lista__nome { font-weight: 600; flex: 1; }
.ranking-lista__info { color: #777; font-size: 0.85rem; flex: none; }
.ranking-lista__valor { font-weight: 700; color: var(--color-primary-dark); flex: none; min-width: 130px; text-align: right; }

@media (max-width: 600px) {
  .ranking-lista__item { flex-wrap: wrap; }
  .ranking-lista__info { width: 100%; order: 3; margin-left: 2rem; }
}
.resumo__item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}
.resumo__item span { display: block; font-size: 0.8rem; color: #666; margin-bottom: 0.25rem; }
.resumo__item strong { font-size: 1.25rem; color: var(--color-primary-dark); }

.table-wrap { overflow-x: auto; background: var(--color-white); border-radius: 8px; border: 1px solid var(--color-border); }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabela th, .tabela td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--color-border); }
.tabela th { background: var(--color-bg-light); color: var(--color-primary-dark); font-weight: 700; }
.tabela__vazio { text-align: center; color: #888; padding: 2rem; }
.tabela__acoes a { font-weight: 600; }

.form-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form-card fieldset { border: 1px solid var(--color-border); border-radius: 6px; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.form-card legend { font-weight: 700; color: var(--color-primary-dark); padding: 0 0.4rem; }
.form-card label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; flex: 1; }
.form-card input, .form-card select, .form-card textarea {
  padding: 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  font-size: 0.95rem;
  font-family: inherit;
}

.cotas-bloco {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cotas-bloco__titulo { margin: 0; font-weight: 700; font-size: 0.9rem; color: var(--color-primary-dark); }
#cotas-lista { display: flex; flex-direction: column; gap: 0.75rem; }
.cota-linha {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.75rem;
}
.cota-linha label { flex: 1; margin-bottom: 0; }
.remover-cota-linha {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-danger);
  flex: none;
}
.remover-cota-linha:hover { background: #FBEAE8; }
#adicionar-cota-linha { align-self: flex-start; font-weight: 600; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-actions { display: flex; gap: 0.75rem; }

.alert { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
.alert--erro { background: #FBEAE8; color: var(--color-danger); border: 1px solid #F1C4BE; }
.alert--ok { background: #E9F7EF; color: #1E7A3B; border: 1px solid #BEE5CB; }

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}
.auth-box {
  background: var(--color-white);
  padding: 2rem;
  border-radius: 10px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.auth-box h1 { font-size: 1.3rem; color: var(--color-primary-dark); margin-top: 0; }
.auth-box h1 span { display: block; font-size: 0.85rem; font-weight: 400; color: #777; }
.auth-box form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.auth-box label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; }
.auth-box input { padding: 0.6rem; border: 1px solid var(--color-border); border-radius: 5px; }

.campo-senha { position: relative; display: flex; }
.campo-senha input { flex: 1; padding-right: 2.4rem !important; }
.olho-senha {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.2rem;
  color: #666;
}
.olho-senha:hover { color: var(--color-primary); }

.trocar-senha { display: inline-block; margin-right: 0.75rem; }
.trocar-senha summary { cursor: pointer; }
.trocar-senha__form {
  margin-top: 0.5rem;
  display: flex;
  align-items: end;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.75rem;
}
.trocar-senha__form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; }
.trocar-senha__form input { padding: 0.45rem; border: 1px solid var(--color-border); border-radius: 5px; }