/* ============================================================
   PATINHAGRAM — folha de estilo compartilhada
   Paleta: azul-patinha (confiança) + laranja-focinho (ação)
   Tipografia: Baloo 2 (display) + Nunito (texto)
   ============================================================ */

:root{
  --azul:#1B7A8C;
  --azul-escuro:#0F5260;
  --azul-claro:#E3F2F5;
  --laranja:#FF8A3D;
  --laranja-escuro:#E06F23;
  --laranja-claro:#FFF1E6;
  --alerta:#E84855;
  --alerta-claro:#FDE8EA;
  --verde:#3BA776;
  --verde-claro:#E5F5EE;
  --roxo:#7C6BD9;
  --roxo-claro:#EEEBFB;
  --creme:#FFF9F2;
  --branco:#FFFFFF;
  --tinta:#25333A;
  --tinta-suave:#5A6B73;
  --linha:#EDE4D8;
  --sombra:0 4px 18px rgba(37,51,58,.08);
  --sombra-forte:0 10px 30px rgba(37,51,58,.14);
  --raio:18px;
  --raio-p:12px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito',system-ui,sans-serif;
  background:var(--creme);
  color:var(--tinta);
  line-height:1.6;
  font-size:16px;
}
h1,h2,h3,h4,.display{font-family:'Baloo 2',cursive;line-height:1.15;font-weight:700}
img{max-width:100%}
a{color:var(--azul);text-decoration:none}
button{font-family:inherit;cursor:pointer}

.container{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---------- Header ---------- */
.topo{
  position:sticky;top:0;z-index:900;
  background:rgba(255,249,242,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linha);
}
.topo-inner{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:flex;align-items:center;gap:9px;font-family:'Baloo 2';font-size:1.45rem;font-weight:800;color:var(--azul-escuro)}
.logo .pata{font-size:1.5rem;transform:rotate(-18deg);display:inline-block}
.logo b{color:var(--laranja)}
.menu{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.menu a{padding:8px 14px;border-radius:999px;font-weight:700;color:var(--tinta-suave);font-size:.95rem;transition:.15s}
.menu a:hover{background:var(--azul-claro);color:var(--azul-escuro)}
.menu a.ativo{background:var(--azul);color:#fff}
.menu a.destaque{background:var(--laranja);color:#fff}
.menu a.destaque:hover{background:var(--laranja-escuro)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:13px 26px;border-radius:999px;border:none;
  font-weight:800;font-size:1rem;transition:.15s;text-decoration:none;
}
.btn:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.btn-laranja{background:var(--laranja);color:#fff}
.btn-laranja:hover{background:var(--laranja-escuro);transform:translateY(-2px)}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-escuro);transform:translateY(-2px)}
.btn-alerta{background:var(--alerta);color:#fff}
.btn-alerta:hover{filter:brightness(.92);transform:translateY(-2px)}
.btn-fantasma{background:transparent;color:var(--azul-escuro);border:2px solid var(--azul)}
.btn-fantasma:hover{background:var(--azul-claro)}
.btn-branco{background:#fff;color:var(--azul-escuro);box-shadow:var(--sombra)}
.btn-p{padding:8px 16px;font-size:.88rem}

/* ---------- Cards ---------- */
.card{background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);padding:24px}
.card-hover{transition:.18s}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--sombra-forte)}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;font-size:.78rem;font-weight:800;letter-spacing:.02em}
.badge-perdido{background:var(--alerta-claro);color:var(--alerta)}
.badge-encontrado{background:var(--laranja-claro);color:var(--laranja-escuro)}
.badge-reunido{background:var(--verde-claro);color:var(--verde)}
.badge-azul{background:var(--azul-claro);color:var(--azul-escuro)}
.badge-roxo{background:var(--roxo-claro);color:var(--roxo)}

/* ---------- Avatares de pet ---------- */
.pet-foto{
  display:flex;align-items:center;justify-content:center;
  font-size:3.2rem;border-radius:var(--raio-p);
  aspect-ratio:4/3;width:100%;
}
.g1{background:linear-gradient(135deg,#FFD9A0,#FF8A3D)}
.g2{background:linear-gradient(135deg,#A8E2EE,#1B7A8C)}
.g3{background:linear-gradient(135deg,#D8CEFF,#7C6BD9)}
.g4{background:linear-gradient(135deg,#BDEBD3,#3BA776)}
.g5{background:linear-gradient(135deg,#FFC9CE,#E84855)}
.g6{background:linear-gradient(135deg,#FFE9A8,#E8B339)}

/* ---------- Formulários ---------- */
label{font-weight:800;font-size:.9rem;display:block;margin-bottom:6px;color:var(--tinta)}
input,select,textarea{
  width:100%;padding:12px 15px;border:2px solid var(--linha);
  border-radius:var(--raio-p);font-family:inherit;font-size:1rem;
  background:#fff;color:var(--tinta);transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul)}
.campo{margin-bottom:18px}
.dica{font-size:.82rem;color:var(--tinta-suave);margin-top:5px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* upload de foto */
.upload-area{
  border:3px dashed var(--azul);border-radius:var(--raio);
  background:var(--azul-claro);padding:36px;text-align:center;
  cursor:pointer;transition:.15s;color:var(--azul-escuro);font-weight:700;
}
.upload-area:hover{background:#d3ecf1}
.upload-area .icone{font-size:2.6rem;display:block;margin-bottom:8px}

/* ---------- Seções ---------- */
.secao{padding:64px 0}
.secao-titulo{text-align:center;max-width:640px;margin:0 auto 42px}
.secao-titulo h2{font-size:2.1rem;color:var(--azul-escuro)}
.secao-titulo p{color:var(--tinta-suave);margin-top:8px}
.olho{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--laranja-escuro);margin-bottom:10px}

/* ---------- Trilha de patinhas (assinatura) ---------- */
.trilha{display:flex;gap:14px;justify-content:center;margin:18px 0;user-select:none}
.trilha span{font-size:1.1rem;opacity:.35;transform:rotate(-20deg)}
.trilha span:nth-child(2n){transform:rotate(15deg) translateY(-6px)}

/* ---------- Passaporte de vacinas ---------- */
.passaporte{
  background:linear-gradient(160deg,#0F5260,#1B7A8C);
  border-radius:var(--raio);padding:26px;color:#fff;
  position:relative;overflow:hidden;
}
.passaporte::after{
  content:"🐾";position:absolute;right:-18px;bottom:-24px;
  font-size:9rem;opacity:.08;transform:rotate(-15deg);
}
.passaporte h3{color:#fff;display:flex;align-items:center;gap:10px}
.carimbos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:18px}
.carimbo{
  background:rgba(255,255,255,.1);border:2px dashed rgba(255,255,255,.45);
  border-radius:14px;padding:14px;text-align:center;position:relative;
}
.carimbo .selo{
  width:54px;height:54px;border-radius:50%;margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  border:3px solid;transform:rotate(-8deg);font-weight:800;
}
.carimbo.ok .selo{border-color:#7BE3AE;background:rgba(59,167,118,.3)}
.carimbo.breve .selo{border-color:#FFD27A;background:rgba(255,176,32,.25)}
.carimbo.atrasada .selo{border-color:#FF9AA4;background:rgba(232,72,85,.3)}
.carimbo strong{display:block;font-size:.92rem}
.carimbo small{opacity:.8;font-size:.76rem}
.carimbo .status{font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-top:6px;display:inline-block;padding:2px 8px;border-radius:999px}
.carimbo.ok .status{background:#7BE3AE;color:#0F5260}
.carimbo.breve .status{background:#FFD27A;color:#6b4d00}
.carimbo.atrasada .status{background:#FF9AA4;color:#6b0f17}

/* ---------- Tabelas ---------- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-suave);padding:10px 12px;border-bottom:2px solid var(--linha)}
td{padding:13px 12px;border-bottom:1px solid var(--linha);font-size:.95rem}
tr:hover td{background:var(--creme)}

/* ---------- Modal ---------- */
.modal-fundo{
  position:fixed;inset:0;background:rgba(15,40,48,.55);
  display:none;align-items:center;justify-content:center;z-index:1000;padding:20px;
}
.modal-fundo.aberto{display:flex}
.modal{background:#fff;border-radius:var(--raio);max-width:520px;width:100%;padding:30px;max-height:90vh;overflow:auto;position:relative}
.modal .fechar{position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.4rem;color:var(--tinta-suave)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(120px);
  background:var(--tinta);color:#fff;padding:14px 26px;border-radius:999px;
  font-weight:700;box-shadow:var(--sombra-forte);transition:.3s;z-index:1100;opacity:0;
}
.toast.mostrar{transform:translateX(-50%) translateY(0);opacity:1}

/* ---------- Sidebar (área logada / admin) ---------- */
.layout-app{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 68px)}
.sidebar{background:#fff;border-right:1px solid var(--linha);padding:24px 14px}
.sidebar a{
  display:flex;align-items:center;gap:11px;padding:11px 15px;border-radius:var(--raio-p);
  font-weight:700;color:var(--tinta-suave);margin-bottom:4px;font-size:.95rem;
}
.sidebar a:hover{background:var(--creme);color:var(--tinta)}
.sidebar a.ativo{background:var(--azul);color:#fff}
.sidebar .rotulo{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tinta-suave);margin:18px 15px 8px;font-weight:800}
.conteudo-app{padding:34px;max-width:1100px}

/* ---------- KPIs ---------- */
.kpi{background:#fff;border-radius:var(--raio);padding:20px 22px;box-shadow:var(--sombra)}
.kpi .num{font-family:'Baloo 2';font-size:2rem;font-weight:800;color:var(--azul-escuro);line-height:1.1}
.kpi .desc{font-size:.85rem;color:var(--tinta-suave);font-weight:700}
.kpi .delta{font-size:.78rem;font-weight:800;color:var(--verde)}
.kpi.kpi-laranja .num{color:var(--laranja-escuro)}
.kpi.kpi-alerta .num{color:var(--alerta)}
.kpi.kpi-verde .num{color:var(--verde)}

/* barras simples */
.barra-linha{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.barra-linha .nome{width:130px;font-weight:700;font-size:.88rem}
.barra-trilho{flex:1;height:14px;background:var(--azul-claro);border-radius:999px;overflow:hidden}
.barra-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--azul),#3FB3C9)}
.barra-linha .valor{width:60px;text-align:right;font-weight:800;font-size:.85rem;color:var(--azul-escuro)}

/* ---------- Agenda ---------- */
.calendario{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-dia-nome{text-align:center;font-size:.75rem;font-weight:800;text-transform:uppercase;color:var(--tinta-suave);padding:6px 0}
.cal-dia{
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio-p);
  min-height:86px;padding:7px;font-size:.8rem;position:relative;
}
.cal-dia .n{font-weight:800;color:var(--tinta-suave)}
.cal-dia.hoje{border:2px solid var(--laranja)}
.cal-dia.fora{opacity:.35}
.evento{
  display:block;border-radius:7px;padding:2px 7px;font-size:.7rem;font-weight:800;
  margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
}
.ev-banho{background:var(--azul-claro);color:var(--azul-escuro)}
.ev-tosa{background:var(--roxo-claro);color:var(--roxo)}
.ev-vacina{background:var(--verde-claro);color:var(--verde)}
.ev-vet{background:var(--alerta-claro);color:var(--alerta)}

/* ---------- Steps (wizard) ---------- */
.passos{display:flex;justify-content:center;gap:0;margin-bottom:34px}
.passo{display:flex;align-items:center;gap:10px}
.passo .bolha{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--linha);color:var(--tinta-suave);font-weight:800;font-family:'Baloo 2';
}
.passo.feito .bolha{background:var(--verde);color:#fff}
.passo.atual .bolha{background:var(--laranja);color:#fff;box-shadow:0 0 0 6px var(--laranja-claro)}
.passo .nome-passo{font-weight:800;font-size:.88rem;color:var(--tinta-suave)}
.passo.atual .nome-passo{color:var(--tinta)}
.passo-linha{width:60px;height:3px;background:var(--linha);margin:0 12px;border-radius:99px}

/* ---------- Rodapé ---------- */
.rodape{background:var(--azul-escuro);color:#cfe6eb;padding:48px 0 28px;margin-top:60px}
.rodape h4{color:#fff;margin-bottom:12px}
.rodape a{color:#cfe6eb;display:block;margin-bottom:7px;font-size:.92rem}
.rodape a:hover{color:#fff}
.rodape-base{border-top:1px solid rgba(255,255,255,.15);margin-top:34px;padding-top:20px;font-size:.85rem;text-align:center;opacity:.75}

/* ---------- Responsivo ---------- */
@media(max-width:900px){
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .layout-app{grid-template-columns:1fr}
  .sidebar{display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid var(--linha);padding:10px}
  .sidebar .rotulo{display:none}
  .sidebar a{white-space:nowrap;margin:0 4px 0 0}
  .conteudo-app{padding:22px}
}
@media(max-width:620px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .topo-inner{height:auto;padding:12px 0;flex-wrap:wrap}
  .menu{width:100%;justify-content:flex-start}
  .secao{padding:42px 0}
  .calendario{gap:4px}
  .cal-dia{min-height:64px}
  .passo .nome-passo{display:none}
  .passo-linha{width:24px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}