/* =====================================================================
   EQUESTRA — estilo visual
   ---------------------------------------------------------------------
   Paleta sóbria, de esporte tradicional: verde-escuro (pista/campo),
   dourado discreto (pódio) e muito espaço branco. O oposto do concorrente,
   que é marrom e denso.
   ===================================================================== */

:root{
  --verde:#143b2e;      /* institucional */
  --verde-claro:#1f5a45;
  --ouro:#b8912f;
  --texto:#1c1c1c;
  --suave:#6b7280;
  --linha:#e6e8e6;
  --fundo:#fbfbf9;
  --branco:#fff;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--texto);background:var(--fundo);line-height:1.5;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
a{color:inherit}

/* ---------- topo ---------- */
.topo{background:var(--verde);color:#fff;padding:14px 0}
.topo-conteudo{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.marca{text-decoration:none;display:flex;flex-direction:column;line-height:1.15}
.marca-nome{font-size:24px;font-weight:700;letter-spacing:.5px}
.marca-sub{font-size:12px;opacity:.75}
.busca{display:flex;gap:8px}
.busca input{
  padding:9px 14px;border:none;border-radius:20px;min-width:250px;
  font-size:14px;font-family:inherit;
}
.busca button{
  padding:9px 18px;border:1px solid rgba(255,255,255,.5);background:transparent;
  color:#fff;border-radius:20px;cursor:pointer;font-size:14px;font-family:inherit;
}
.busca button:hover{background:rgba(255,255,255,.12)}

/* ---------- hero ---------- */
.hero{padding:44px 0 28px;border-bottom:1px solid var(--linha)}
.hero h1{font-size:32px;font-weight:700;letter-spacing:-.5px}
.sub{color:var(--suave);font-size:15px;margin-top:6px;max-width:620px}
.numeros{display:flex;gap:36px;margin-top:24px;flex-wrap:wrap}
.numeros div{display:flex;flex-direction:column}
.numeros strong{font-size:26px;color:var(--verde)}
.numeros span{font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:.6px}

/* ---------- abas ---------- */
.abas{display:flex;gap:6px;align-items:center;margin:22px 0 14px;flex-wrap:wrap}
.abas a{
  padding:7px 16px;border-radius:18px;text-decoration:none;font-size:14px;
  border:1px solid var(--linha);background:var(--branco);color:var(--suave);
}
.abas a.ativa{background:var(--verde);color:#fff;border-color:var(--verde)}
.abas .nota{font-size:12px;color:var(--suave);font-style:italic}

/* ---------- tabela ---------- */
.tabela{
  width:100%;border-collapse:collapse;background:var(--branco);
  border:1px solid var(--linha);border-radius:10px;overflow:hidden;font-size:14px;
}
.tabela th{
  text-align:left;padding:11px 14px;background:#f4f5f3;color:var(--suave);
  font-size:11px;text-transform:uppercase;letter-spacing:.7px;font-weight:600;
  border-bottom:1px solid var(--linha);
}
.tabela td{padding:11px 14px;border-bottom:1px solid var(--linha)}
.tabela tr:last-child td{border-bottom:none}
.tabela tr:hover td{background:#fafaf8}
.tabela .n{text-align:right;font-variant-numeric:tabular-nums}
.tabela .pos{text-align:center;color:var(--suave);width:52px}
.forte{font-weight:700;color:var(--verde)}
.fino{color:var(--suave);font-size:13px}
.nome{font-weight:600;text-decoration:none;color:var(--verde)}
a.nome:hover{text-decoration:underline}

.medalha-1{color:var(--ouro);font-weight:700}
.medalha-2{color:#8a8a8a;font-weight:700}
.medalha-3{color:#a9754b;font-weight:700}

/* ---------- etiquetas ---------- */
.etiqueta{
  display:inline-block;font-size:10px;padding:2px 8px;border-radius:10px;
  text-transform:uppercase;letter-spacing:.5px;margin-left:6px;
  background:#eef1ee;color:var(--suave);vertical-align:middle;
}
.etiqueta.haras{background:#e7f0ea;color:var(--verde-claro)}
.etiqueta.empresa{background:#eef0f6;color:#4a5578}
.marca-duvida{
  font-size:10px;background:#fdf3e3;color:#96652a;padding:2px 7px;
  border-radius:9px;margin-left:6px;cursor:help;
}

/* ---------- ficha do haras ---------- */
.voltar{margin:18px 0 6px;font-size:14px}
.voltar a{color:var(--suave);text-decoration:none}
.voltar a:hover{color:var(--verde)}
.ficha{
  background:var(--branco);border:1px solid var(--linha);border-radius:12px;
  padding:26px;margin-bottom:26px;
}
.ficha-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.ficha h1{font-size:28px;margin-top:6px;letter-spacing:-.4px}
.destaque{text-align:center;background:var(--verde);color:#fff;border-radius:10px;padding:16px 26px}
.destaque strong{display:block;font-size:34px;line-height:1}
.destaque span{font-size:11px;text-transform:uppercase;letter-spacing:.7px;opacity:.85}
.indicadores{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:18px;margin-top:24px;padding-top:20px;border-top:1px solid var(--linha);
}
.indicadores div{display:flex;flex-direction:column}
.indicadores strong{font-size:22px;color:var(--verde)}
.indicadores span{font-size:11px;color:var(--suave);text-transform:uppercase;letter-spacing:.5px}
.premiacao{margin-top:16px;font-size:14px;color:var(--suave)}

/* ---------- blocos ---------- */
.bloco{margin-bottom:34px}
.bloco h2{font-size:19px;margin-bottom:4px}
.bloco .sub{margin-bottom:14px}
.bloco > .tabela{margin-top:12px}
.contador{
  font-size:12px;background:#eef1ee;color:var(--suave);
  padding:2px 9px;border-radius:10px;margin-left:6px;vertical-align:middle;
}
.cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:12px}
.cartao{background:var(--branco);border:1px solid var(--linha);border-radius:10px;padding:14px}
.cartao-nome{font-weight:600;color:var(--verde);font-size:14px}
.cartao-dados{font-size:12px;color:var(--suave);margin-top:4px}

/* ---------- diversos ---------- */
.resultado-busca{font-size:14px;color:var(--suave);margin-bottom:12px}
.resultado-busca a{color:var(--verde)}
.vazio{padding:40px 0;color:var(--suave);text-align:center}
.aviso{font-size:12px;color:var(--suave);margin:16px 0 40px;font-style:italic}
.rodape{border-top:1px solid var(--linha);padding:26px 0;margin-top:20px;background:var(--branco)}
.rodape p{font-size:13px;color:var(--suave)}
.rodape .fino{font-size:12px;margin-top:4px}

/* ---------- página inicial ---------- */
.capa-inicial{padding:52px 0 34px;text-align:center}
.capa-inicial h1{font-size:38px;line-height:1.2;letter-spacing:-.8px;color:var(--verde)}
.chamada{max-width:640px;margin:16px auto 0;color:var(--suave);font-size:16px}
.acoes-capa{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.faixa-numeros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:20px;
  background:var(--verde);color:#fff;border-radius:12px;padding:24px;margin-bottom:34px;
}
.faixa-numeros div{text-align:center}
.faixa-numeros strong{display:block;font-size:26px;line-height:1.1}
.faixa-numeros span{font-size:11px;text-transform:uppercase;letter-spacing:.6px;opacity:.85}
.tres-colunas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin:10px 0 46px}
.tres-colunas h3{font-size:16px;color:var(--verde);margin-bottom:6px}
.tres-colunas p{font-size:14px;color:var(--suave);margin-bottom:8px}
.tres-colunas a{color:var(--verde);font-size:14px}

/* ---------- contas, perfis e formulários ---------- */
.topo-direita{display:flex;align-items:center;gap:14px}
.link-topo{color:#fff;text-decoration:none;font-size:14px;opacity:.9}
.link-topo:hover{opacity:1;text-decoration:underline}

.painel-estreito{max-width:620px;margin:26px auto 40px}
.colunas-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px}
form label{display:block;margin:14px 0;font-size:14px;color:var(--suave)}
form input[type=text],form input[type=email],form input[type=password],
form input[type=search],form input:not([type]),form select,form textarea{
  display:block;width:100%;margin-top:5px;padding:10px 12px;font-size:15px;
  font-family:inherit;color:var(--texto);background:var(--branco);
  border:1px solid var(--linha);border-radius:8px;
}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--verde-claro);outline-offset:1px}
form input[type=file]{margin-top:6px;font-size:13px}
form textarea{resize:vertical}
.opcional{font-weight:400;color:var(--suave);font-size:12px}
button,.botao{
  display:inline-block;padding:10px 20px;font-size:14px;font-family:inherit;
  background:var(--verde);color:#fff;border:1px solid var(--verde);
  border-radius:22px;cursor:pointer;text-decoration:none;
}
button:hover,.botao:hover{background:var(--verde-claro);border-color:var(--verde-claro)}
.botao.secundario,button.secundario{background:transparent;color:var(--verde);border-color:var(--linha)}
.botao.secundario:hover{background:#f2f5f2}
button.link{background:none;border:none;color:var(--verde);padding:0;text-decoration:underline;font-size:14px}
.linha-secundaria{margin-top:10px}
.linha-campos{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.miudo{font-size:12px;color:var(--suave);margin-top:10px;line-height:1.5}

.alerta{padding:12px 16px;border-radius:10px;font-size:14px;margin:14px 0}
.alerta.ok{background:#e8f3ec;color:#14603f;border:1px solid #bcdcc8}
.alerta.erro{background:#fdecec;color:#8c2f2f;border:1px solid #f0c9c9}
.alerta.aviso{background:#fdf5e5;color:#8a6420;border:1px solid #ecdcb8}

/* identidade visual do perfil */
.capa-perfil{
  height:200px;border-radius:12px;overflow:hidden;margin:14px 0 -50px;
  border:1px solid var(--linha);background:#eef1ee;
}
.capa-perfil img{width:100%;height:100%;object-fit:cover;display:block}
.ficha.com-capa{position:relative}
.ficha-identidade{display:flex;gap:18px;align-items:flex-start}
.logo-perfil{
  width:96px;height:96px;border-radius:12px;object-fit:cover;
  border:1px solid var(--linha);background:#fff;flex-shrink:0;
}
.acoes-perfil{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.etiqueta.verificado{background:var(--verde);color:#fff}
.etiqueta.pendente{background:#fdf5e5;color:#8a6420}
.etiqueta.aprovada{background:#e8f3ec;color:#14603f}
.etiqueta.recusada{background:#fdecec;color:#8c2f2f}

/* editor da minha área */
.cabeca-area{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:26px 0 8px;flex-wrap:wrap}
.editor{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:20px}
.editor-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.grade-visual{display:grid;grid-template-columns:180px 1fr;gap:20px;margin-top:14px}
.rotulo{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--suave);margin-bottom:6px}
.rotulo em{text-transform:none;letter-spacing:0;font-style:normal}
.previa{border:1px dashed var(--linha);border-radius:10px;background:#f7f8f6;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.previa-logo{width:160px;height:160px}
.previa-capa{width:100%;height:160px}
.previa img{width:100%;height:100%;object-fit:cover}
.sem-img{font-size:12px;color:var(--suave)}
.acoes-remover{display:flex;gap:18px;margin-top:12px}

/* painel de aprovação */
.cartao-pedido{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:20px;margin-bottom:16px}
.pedido-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.nome.grande{font-size:18px}
.pedido-dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;font-size:14px}
.pedido-just{margin-top:14px;font-size:14px}
.pedido-just p{background:#f7f8f6;border-radius:8px;padding:10px 12px;margin-top:4px}
.pedido-prova{margin-top:14px}
.pedido-prova img{max-width:260px;border:1px solid var(--linha);border-radius:8px;margin-top:6px}
.pedido-acoes{display:flex;gap:8px;margin-top:16px;align-items:center;flex-wrap:wrap}
.pedido-acoes input{flex:1;min-width:200px;margin:0}
.resumo-pedido{background:#f7f8f6;border-radius:10px;padding:14px;font-size:14px;margin-top:14px}
.resumo-pedido p{margin:3px 0}

/* ---------------------------------------------------------------
   Menu de secoes no topo (Atletas · Criadores)
   --------------------------------------------------------------- */
.menu{display:flex;gap:22px;align-items:center}
.menu a{
  color:rgba(255,255,255,.82);text-decoration:none;font-size:14px;
  font-weight:500;padding:6px 0;border-bottom:2px solid transparent;
  white-space:nowrap;transition:color .15s,border-color .15s}
.menu a:hover{color:#fff}
.menu a.ativo{color:#fff;border-bottom-color:var(--ouro)}

/* etiquetas novas */
.etiqueta.atleta{background:#e9eef7;color:#33507e}
.etiqueta.cavalo{background:#efe9e2;color:#6b4f36}
.etiqueta.pessoa{background:#f2f0ea;color:#6c6250}
.etiqueta.categoria{background:#f4f2ec;color:#7a6a3c;letter-spacing:.04em}
.etiqueta.tecnica{background:#e7f0ea;color:var(--verde);cursor:help}

/* linha do tempo da posse */
.linha-tempo{list-style:none;margin:18px 0 0;padding:0 0 0 22px;
  border-left:2px solid var(--linha)}
.linha-tempo li{position:relative;padding:0 0 20px 16px}
.linha-tempo li:last-child{padding-bottom:0}
.linha-tempo li::before{
  content:"";position:absolute;left:-29px;top:4px;width:11px;height:11px;
  border-radius:50%;background:var(--branco);border:2px solid var(--linha)}
.linha-tempo li.vigente::before{background:var(--ouro);border-color:var(--ouro)}
.linha-tempo .periodo{font-size:12px;color:var(--suave);
  text-transform:uppercase;letter-spacing:.04em}
.linha-tempo .periodo .ate{text-transform:none;letter-spacing:0}
.linha-tempo .quem{margin-top:3px;font-size:15px}
.linha-tempo .quem a{color:var(--verde);font-weight:600;text-decoration:none}
.linha-tempo .quem a:hover{text-decoration:underline}
.linha-tempo .papel{display:inline-block;font-size:11px;color:var(--suave);
  text-transform:uppercase;letter-spacing:.06em;margin-right:8px}
.linha-tempo .e{color:var(--suave);font-weight:400}

/* ficha de criação — o bloco que vai virar o DNAEquestra */
.criacao{border-left:3px solid var(--ouro)}
.grade-criacao{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;margin-top:16px}
.grade-criacao .dado{
  background:var(--branco);border:1px solid var(--linha);
  border-radius:10px;padding:12px 14px}
.grade-criacao .rotulo{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--suave);margin-bottom:4px}
.grade-criacao strong{font-size:14px;color:var(--texto);font-weight:600}
.grade-criacao a{color:var(--verde)}

/* cartao clicavel (criadores na ficha do atleta) */
a.cartao{display:block;text-decoration:none;transition:border-color .15s,transform .15s}
a.cartao:hover{border-color:var(--ouro);transform:translateY(-1px)}

@media (max-width:640px){
  .grade-visual{grid-template-columns:1fr}
  .previa-logo{width:100%;max-width:200px}
  .ficha-identidade{flex-direction:column}
  .capa-perfil{height:130px;margin-bottom:-30px}
  .hero h1{font-size:24px}
  .busca input{min-width:0;width:100%}
  .topo-conteudo{flex-direction:column;align-items:stretch}
  .menu{justify-content:center;gap:26px;order:3}
  .tabela{font-size:13px}
  .tabela th,.tabela td{padding:9px 10px}
}