/* ═══════════════════════════════════════════════════════════
   CuidaMais – styles.css  v4 (identidade visual oficial)
   Paleta da identidade: 2 tons de verde + laranja pastel + creme
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  /* ── Verde petróleo (identidade) ── */
  --teal-dark:    #0F6B61;  /* verde escuro principal (logo, títulos) */
  --teal-mid:     #2BAA9E;  /* verde médio (botões, FAB) */
  --teal-light:   #D6EDE8;  /* verde claro creme (backgrounds suaves) */

  /* ── Laranja pastel (identidade) ── */
  --orange:        #F39C5A; /* laranja pastel principal */
  --orange-light:  #FDE4CC; /* laranja claro creme (backgrounds) */
  --orange-strong: #E07A2E; /* laranja saturado para alertas urgentes */

  /* ── Cores funcionais auxiliares ── */
  --purple:       #7B5EA7;  /* contexto Parceiro */
  --purple-light: #F0EBF8;
  --red:          #E05454;  /* erros / emergências */
  --red-light:    #FDEAEA;

  /* ── Dourado (memorial) ── */
  --gold:         #B8860B;
  --gold-light:   #FBF1D9;
  --gold-strong:  #8C6508;

  /* ── Neutros ── */
  --bg:           #FAF4E8;  /* fundo creme da identidade */
  --surface:      #FFFFFF;
  --border:       #EDE6D6;  /* borda harmoniza com creme */
  --text-dark:    #1E2A28;
  --text-body:    #4A5450;
  --text-muted:   #8B8B8B;

  --shadow-sm:    0 2px 8px rgba(0,0,0,.06);
  --shadow-md:    0 4px 20px rgba(0,0,0,.10);
  --shadow-fab:   0 6px 24px rgba(15,107,97,.40);

  --r-sm:   10px; --r-md: 16px; --r-lg: 22px;
  --r-xl:   32px; --r-full: 9999px;
  --font:   'Nunito', system-ui, sans-serif;
  --px:     18px;
  --nav-h:  72px;
  --ctx-h:  0px;
}

/* ══════════════════════════════════════════════════════════
   TELA DE LOGIN
   ══════════════════════════════════════════════════════════ */
.auth-screen{
  position:fixed;inset:0;
  width:100%;height:100dvh;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:24px 20px;
  z-index:9999;
  font-family:var(--font);
  overflow-y:auto;
}
.auth-screen.hidden{display:none}
#auth-view-login.hidden{display:none}
#auth-view-cadastro.hidden{display:none}

.auth-container{
  width:100%;max-width:380px;
  display:flex;flex-direction:column;align-items:center;
}

/* Logo no topo */
.auth-logo{
  margin-bottom:36px;
  margin-top: 10px;
  display:flex;align-items:center;justify-content:center;
}
.auth-logo-img{
  width:auto;height:42px;
  object-fit:contain;
  display:block;
}
.auth-logo-img:not([src=""]):not([src*="undefined"]) + .auth-logo-fallback{
  display:none;
}
.auth-logo-img[src=""],
.auth-logo-img:not([src]){
  display:none;
}
.auth-logo-fallback{
  display:flex;align-items:center;gap:10px;
}
.auth-brand-mark{
  width:48px;height:48px;
  background:var(--teal-dark);
  border-radius:50%;
  position:relative;
}
.auth-brand-mark::before{
  content:'';
  width:18px;height:18px;
  background:var(--orange);
  border-radius:50%;
  position:absolute;
  bottom:4px;right:4px;
  border:3px solid var(--bg);
}
.auth-brand-name{
  font-size:1.7rem;font-weight:800;letter-spacing:-.02em;
  color:var(--teal-dark);
}

/* Título e subtítulo */
.auth-title{
  font-size:1.6rem;font-weight:800;
  color:var(--text-dark);
  text-align:center;
  margin-bottom:6px;
  letter-spacing:-.01em;
}
.auth-subtitle{
  font-size:.92rem;color:var(--text-muted);
  text-align:center;margin-bottom:32px;
  line-height:1.4;
}

/* Formulário */
.auth-form{width:100%}

.auth-field{margin-bottom:16px;position:relative}
.auth-label{
  display:block;font-size:.78rem;font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:8px;
}
.auth-input{
  width:100%;
  padding:15px 18px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  font-size:.96rem;font-weight:600;
  color:var(--text-dark);
  outline:none;
  transition:border-color .18s,box-shadow .18s;
  font-family:var(--font);
}
.auth-input:focus{
  border-color:var(--teal-mid);
  box-shadow:0 0 0 3px rgba(43,170,158,.15);
}
.auth-input::placeholder{color:var(--text-muted);font-weight:500}

.auth-forgot{
  position:absolute;
  right:0;top:0;
  font-size:.74rem;font-weight:700;
  color:var(--teal-dark);
  background:none;border:none;cursor:pointer;
  padding:2px 0;
}
.auth-forgot:active{opacity:.6}

/* Botão principal */
.auth-submit{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--teal-dark);color:white;
  font-size:1rem;font-weight:800;
  padding:16px 24px;
  border-radius:var(--r-full);
  border:none;cursor:pointer;
  margin-top:10px;
  transition:transform .12s,opacity .15s;
  font-family:var(--font);
}
.auth-submit:active{transform:scale(.98);opacity:.92}
.auth-submit svg{transition:transform .2s}
.auth-submit:hover svg{transform:translateX(3px)}

/* Divisor */
.auth-divider{
  text-align:center;
  margin:22px 0;
  position:relative;
  color:var(--text-muted);
  font-size:.78rem;font-weight:600;
}
.auth-divider::before,.auth-divider::after{
  content:'';position:absolute;top:50%;
  width:calc(50% - 24px);height:1px;
  background:var(--border);
}
.auth-divider::before{left:0}
.auth-divider::after{right:0}
.auth-divider span{
  background:var(--bg);padding:0 10px;
  position:relative;
}

/* Botão secundário */
.auth-secondary{
  width:100%;
  background:transparent;
  color:var(--teal-dark);
  border:1.5px solid var(--teal-dark);
  font-size:.95rem;font-weight:700;
  padding:14px 24px;
  border-radius:var(--r-full);
  cursor:pointer;
  transition:background .15s;
  font-family:var(--font);
}
.auth-secondary:active{background:var(--teal-light)}

/* Rodapé */
.auth-footer{
  margin-top:32px;
  font-size:.74rem;color:var(--text-muted);
  text-align:center;line-height:1.5;
  max-width:300px;
}

/* App escondido quando login está ativo */
#app.hidden{display:none}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;touch-action:pan-x pan-y}
body{font-family:var(--font);background:#E8E3D8;color:var(--text-dark);
  display:flex;justify-content:center;align-items:flex-start;
  min-height:100dvh;overflow:hidden;touch-action:pan-x pan-y}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit}
img{display:block}

/* ── APP SHELL ───────────────────────────────────────────── */
#app{position:relative;width:100%;max-width:430px;height:100dvh;display:flex;flex-direction:column;
  background:var(--bg);overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.18)}

#screens-container{position:relative;flex:1;overflow:hidden;min-height:0;}

/* ── BANNER DE CONTEXTO (Família / Parceiro) ─────────────── */
.ctx-banner{
  position:relative;
  z-index:50;
  background:var(--purple);
  transition:max-height .25s ease, opacity .25s ease;
  max-height:60px;
  overflow:hidden;
}
.ctx-banner.hidden{max-height:0;opacity:0;pointer-events:none}
.ctx-banner-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px var(--px);
  color:white;font-size:.8rem;font-weight:700;
}
.ctx-banner-info{display:flex;flex-direction:column;gap:1px}
.ctx-banner-label{font-size:.68rem;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
.ctx-banner-name{font-size:.88rem;font-weight:800}
.ctx-switch-btn{
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.4);
  border-radius:var(--r-full);
  color:white;font-size:.75rem;font-weight:700;
  padding:5px 12px;
  transition:background .15s;
}
.ctx-switch-btn:active{background:rgba(255,255,255,.35)}

/* Toggle button no header */
.ctx-toggle-btn{
  font-size:.7rem;font-weight:700;
  padding:5px 10px;border-radius:var(--r-full);
  border:1.5px solid var(--border);
  color:var(--text-muted);
  transition:all .15s;
  white-space:nowrap;
}
.ctx-toggle-btn.parceiro-mode{
  background:var(--purple-light);color:var(--purple);border-color:var(--purple);
}

/* ── TELAS ───────────────────────────────────────────────── */
.screen{
  position:absolute;
  inset:0;
  opacity:0;pointer-events:none;
  transform:translateX(40px);
  transition:opacity .28s ease,transform .28s ease;
}
.screen.active{opacity:1;pointer-events:auto;transform:translateX(0)}
.screen.slide-out{opacity:0;transform:translateX(-40px)}
.screen-scroll{
  height:100%;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.screen-scroll::-webkit-scrollbar{display:none}
.bottom-spacer{height:28px}

/* ── HEADERS ─────────────────────────────────────────────── */
.home-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px var(--px) 14px;
}
.greeting-label{font-size:1.2rem;font-weight:800;color:var(--text-dark)}
.greeting-sub{font-size:.84rem;color:var(--text-muted);margin-top:2px}

.inner-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--px) 10px;
  background:var(--bg);position:sticky;top:0;z-index:10;
}
.inner-title{font-size:1.1rem;font-weight:800;color:var(--text-dark)}
.inner-title.solo{flex:1}

/* ── BOTÕES ÍCONE ────────────────────────────────────────── */
.icon-btn{
  width:40px;height:40px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-body);flex-shrink:0;transition:background .15s;
}
.icon-btn:active{background:var(--teal-light)}
.notif-btn{position:relative}
.notif-dot{
  position:absolute;top:8px;right:8px;
  width:8px;height:8px;background:var(--orange-strong);
  border-radius:var(--r-full);border:2px solid var(--bg);
}
.back-btn{color:var(--teal-dark)}
.icon-wrap{width:36px;height:36px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center}
.icon-wrap.teal{background:var(--teal-light);color:var(--teal-dark)}

/* ── CARD GENÉRICO ───────────────────────────────────────── */
.card{background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:18px;margin:0 var(--px) 14px}

/* ── PET CARD (HOME) ─────────────────────────────────────── */
.pet-card{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-top:4px}
.pet-avatar{width:70px;height:70px;border-radius:var(--r-full);object-fit:cover;
  flex-shrink:0;border:3px solid var(--teal-light)}
.pet-card-info{flex:1;min-width:0}
.pet-name{font-size:1rem;font-weight:800;color:var(--text-dark)}
.pet-detail{font-size:.8rem;color:var(--text-muted);margin:2px 0 10px}

/* ── STATUS BADGE ────────────────────────────────────────── */
.status-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--r-full);
  font-size:.72rem;font-weight:700;
}
.status-badge.ativo      {background:var(--teal-light);color:var(--teal-dark)}
.status-badge.falecido   {background:var(--gold-light);color:var(--gold-strong)}
.status-badge.desaparecido{background:var(--orange-light);color:var(--orange)}
.status-badge.parceiro-ativo{background:var(--purple-light);color:var(--purple)}
.status-badge.pendente   {background:var(--orange-light);color:var(--orange)}
.status-badge.encerrado  {background:var(--border);color:var(--text-muted)}
.status-badge.congelado  {background:#E8E8F0;color:#666}
.status-badge.atrasado   {background:var(--red-light);color:var(--red)}
.status-badge.inativo    {background:var(--red-light);color:var(--red)}

/* ── SEÇÃO HEADER ────────────────────────────────────────── */
.section-header{display:flex;align-items:center;justify-content:space-between;
  padding:4px var(--px) 8px}
.section-title{font-size:.95rem;font-weight:800;color:var(--text-dark)}
.link-btn{font-size:.82rem;font-weight:700;color:var(--teal-mid)}

/* ── BOTÕES ──────────────────────────────────────────────── */
.btn-primary{
  display:block;width:auto;
  background:var(--teal-dark);color:white;
  font-size:.95rem;font-weight:700;padding:15px 24px;
  border-radius:var(--r-full);text-align:center;
  transition:opacity .15s,transform .1s;letter-spacing:.01em;
}
.btn-primary.full-width{width:100%}
.btn-primary:active{opacity:.88;transform:scale(.98)}
.btn-outline-sm{
  display:inline-block;padding:5px 14px;
  border:1.5px solid var(--teal-mid);border-radius:var(--r-full);
  color:var(--teal-dark);font-size:.8rem;font-weight:700;transition:background .15s;
}
.btn-outline-sm:active{background:var(--teal-light)}
.btn-outline-modal{
  flex:1;padding:15px;border:1.5px solid var(--border);border-radius:var(--r-full);
  font-size:.95rem;font-weight:700;color:var(--text-body);background:var(--bg);
  text-align:center;transition:background .15s;
}
.btn-outline-modal:active{background:var(--border)}
.btn-add-pet-full{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:4px var(--px) 0;padding:16px;
  border:2px dashed var(--border);border-radius:var(--r-lg);
  font-size:.9rem;font-weight:700;color:var(--text-muted);
  width:calc(100% - var(--px)*2);transition:border-color .15s,color .15s;
}
.btn-add-pet-full:active{border-color:var(--teal-mid);color:var(--teal-dark)}
.btn-add-pet-full span{font-size:1.4rem;color:var(--teal-mid)}

/* ── HOME: LISTA DE CUIDADOS ─────────────────────────────── */
.cuidados-list{
  margin:0 var(--px) 14px;background:var(--surface);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;
}
.cuidado-item{display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-bottom:1px solid var(--border)}
.cuidado-item:last-child{border-bottom:none}
.cuidado-item[data-nav]{cursor:pointer;transition:background .15s}
.cuidado-item[data-nav]:active{background:var(--bg)}
.cuidado-icon{width:40px;height:40px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.cuidado-icon.teal  {background:var(--teal-light)}
.cuidado-icon.orange{background:var(--orange-light)}
.cuidado-icon.purple{background:var(--purple-light)}
.cuidado-info{flex:1;min-width:0}
.cuidado-nome{font-size:.9rem;font-weight:700;color:var(--text-dark)}
.cuidado-data{font-size:.78rem;color:var(--text-muted);margin-top:1px}
.cuidado-badge{font-size:.75rem;font-weight:700;white-space:nowrap}
.cuidado-badge.urgent{color:var(--orange-strong)}
.cuidado-badge.soon  {color:var(--teal-mid)}
.cuidado-badge.later {color:var(--text-muted)}
.cuidado-badge.atrasado{color:var(--red)}

/* ── HOME: MENSAGEM DO DIA ───────────────────────────────── */
.tip-card{
  background:linear-gradient(135deg,var(--teal-dark) 0%,var(--teal-mid) 100%);
  color:white;display:flex;align-items:center;gap:12px;
  padding:20px 18px;overflow:hidden;position:relative;
}
.tip-text{flex:1;min-width:0}
.tip-eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;opacity:.75;margin-bottom:4px}
.tip-headline{font-size:.95rem;font-weight:800;line-height:1.3;margin-bottom:12px}
.btn-tip{display:inline-block;background:rgba(255,255,255,.2);
  border:1.5px solid rgba(255,255,255,.5);color:white;border-radius:var(--r-full);
  padding:6px 16px;font-size:.82rem;font-weight:700;backdrop-filter:blur(4px)}
.tip-img{width:84px;height:84px;border-radius:var(--r-md);object-fit:cover;
  flex-shrink:0;border:2px solid rgba(255,255,255,.25)}

/* ── HOME: SCROLL HORIZONTAL DE PETS ────────────────────── */
.pets-scroll-wrap{overflow-x:auto;overflow-y:visible;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 0 12px}
.pets-scroll-wrap::-webkit-scrollbar{display:none}
.pets-scroll{display:flex;gap:12px;padding:0 var(--px);width:max-content}
.mini-pet-card{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:14px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;
  min-width:108px;cursor:pointer;transition:transform .15s;
  border:2px solid transparent;
}
.mini-pet-card:active{transform:scale(.96)}
.mini-pet-card.ativo-selecionado{border-color:var(--teal-mid)}
.mini-pet-avatar{width:54px;height:54px;border-radius:var(--r-full);object-fit:cover;
  border:2px solid var(--teal-light)}
.mini-pet-nome{font-size:.82rem;font-weight:800;color:var(--text-dark)}
.mini-pet-especie{font-size:.7rem;color:var(--text-muted)}

/* ── MEUS PETS — lista ───────────────────────────────────── */
.meupet-card{background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);margin:0 var(--px) 14px;overflow:hidden}
.meupet-header{display:flex;align-items:center;gap:14px;padding:16px 18px 14px}
.meupet-avatar{width:60px;height:60px;border-radius:var(--r-full);object-fit:cover;
  flex-shrink:0;border:3px solid var(--teal-light)}
.meupet-info{flex:1;min-width:0}
.meupet-nome{font-size:1rem;font-weight:800;color:var(--text-dark)}
.meupet-detalhe{font-size:.8rem;color:var(--text-muted);margin:2px 0 6px}
.meupet-actions{display:flex;border-top:1px solid var(--border)}
.meupet-action-btn{
  flex:1;padding:13px 8px;font-size:.79rem;font-weight:700;
  color:var(--text-body);text-align:center;
  border-right:1px solid var(--border);transition:background .15s;
}
.meupet-action-btn:last-child{border-right:none}
.meupet-action-btn:active{background:var(--bg)}
.meupet-action-btn.primary-action{color:var(--teal-dark)}
.meupet-action-btn.danger-action {color:var(--orange)}

/* ── PERFIL ──────────────────────────────────────────────── */
.perfil-hero{display:flex;flex-direction:column;align-items:center;padding:8px var(--px) 18px}
.perfil-avatar-wrap{position:relative;margin-bottom:12px}
.perfil-avatar{width:96px;height:96px;border-radius:var(--r-full);object-fit:cover;
  border:4px solid var(--surface);box-shadow:var(--shadow-md)}
.avatar-edit-btn{
  position:absolute;bottom:0;right:0;width:28px;height:28px;
  background:var(--teal-mid);border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;color:white;
  box-shadow:0 2px 8px rgba(0,0,0,.15);border:2px solid var(--surface);
}
.perfil-name{font-size:1.25rem;font-weight:800;color:var(--text-dark)}
.perfil-sub{font-size:.84rem;color:var(--text-muted);margin-top:3px}
/* Aviso de histórico congelado */
.frozen-banner{
  margin:0 var(--px) 12px;padding:12px 14px;
  background:var(--purple-light);border-radius:var(--r-md);
  border-left:3px solid var(--purple);
  font-size:.82rem;color:var(--purple);line-height:1.4;font-weight:600;
}
.frozen-banner strong{font-weight:800}

/* ── ABAS ────────────────────────────────────────────────── */
.tabs-bar{
  display:flex;padding:0 var(--px);
  border-bottom:2px solid var(--border);margin-bottom:18px;
  overflow-x:auto;scrollbar-width:none;gap:0;
}
.tabs-bar::-webkit-scrollbar{display:none}
.tab{
  flex-shrink:0;padding:10px 13px;font-size:.84rem;font-weight:700;
  color:var(--text-muted);border-bottom:2.5px solid transparent;
  margin-bottom:-2px;transition:color .2s,border-color .2s;white-space:nowrap;
}
.tab.active{color:var(--teal-dark);border-bottom-color:var(--teal-mid)}

/* ── INFO CARD ───────────────────────────────────────────── */
.info-card{padding:6px 18px;margin:0 var(--px) 14px}
.info-row{display:flex;justify-content:space-between;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--border)}
.info-row.no-border{border-bottom:none}
.info-label{font-size:.87rem;color:var(--text-muted);font-weight:600}
.info-val{font-size:.9rem;font-weight:700;color:var(--text-dark);text-align:right;max-width:55%}

/* ── REGISTROS ───────────────────────────────────────────── */
.registros-cats{display:flex;gap:8px;padding:0 var(--px) 14px;
  overflow-x:auto;scrollbar-width:none}
.registros-cats::-webkit-scrollbar{display:none}
.reg-cat-pill{
  flex-shrink:0;padding:6px 14px;border-radius:var(--r-full);
  font-size:.8rem;font-weight:700;background:var(--surface);
  color:var(--text-body);border:1.5px solid var(--border);transition:all .18s;
}
.reg-cat-pill.active{background:var(--teal-dark);color:white;border-color:var(--teal-dark)}
.registros-list{padding:0 var(--px)}
.reg-item{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:10px}
.reg-icon{width:42px;height:42px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.reg-icon.teal  {background:var(--teal-light)}
.reg-icon.orange{background:var(--orange-light)}
.reg-info{flex:1;min-width:0}
.reg-nome{font-size:.9rem;font-weight:700;color:var(--text-dark)}
.reg-meta{font-size:.76rem;color:var(--text-muted);margin-top:2px}
.reg-origem{
  font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:var(--r-full);
  white-space:nowrap;flex-shrink:0;
}
.reg-origem.familia {background:var(--teal-light);color:var(--teal-dark)}
.reg-origem.parceiro{background:var(--purple-light);color:var(--purple)}
.reg-origem.social  {background:var(--orange-light);color:var(--orange)}

/* ── REGISTROS · CAMPO DE BUSCA ─────────────────────────── */
.reg-busca-wrap{
  position:relative;
  margin:0 var(--px) 14px;
  display:flex;align-items:center;
}
.reg-busca-icon{
  position:absolute;left:14px;
  color:var(--text-muted);pointer-events:none;
}
.reg-busca-input{
  width:100%;
  padding:11px 38px 11px 38px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  font-size:.88rem;font-weight:600;
  color:var(--text-dark);
  outline:none;
  transition:border-color .18s,box-shadow .18s;
}
.reg-busca-input:focus{
  border-color:var(--teal-mid);
  box-shadow:0 0 0 3px rgba(42,168,153,.15);
}
.reg-busca-input::placeholder{color:var(--text-muted);font-weight:500}
.reg-busca-input::-webkit-search-cancel-button{display:none}
.reg-busca-clear{
  position:absolute;right:8px;
  width:26px;height:26px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--border);color:var(--text-body);
  font-size:1.1rem;font-weight:700;line-height:1;
  transition:background .15s;
}
.reg-busca-clear:active{background:var(--text-muted);color:white}

/* ── REGISTROS · AÇÕES (botões de anexo) ────────────────── */
.reg-acoes{
  display:flex;align-items:center;gap:6px;
  flex-shrink:0;
}
.reg-anexo-btn{
  width:30px;height:30px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--text-body);
  border:1.5px solid var(--border);
  flex-shrink:0;
  transition:all .15s;
  padding:0;
}
.reg-anexo-btn:active{
  background:var(--teal-light);
  border-color:var(--teal-mid);
  color:var(--teal-dark);
  transform:scale(.92);
}
/* Quando o registro já tem anexo, o botão de visualização fica destacado */
.reg-anexo-btn--ver{
  background:var(--teal-light);
  border-color:var(--teal-mid);
  color:var(--teal-dark);
}
.reg-anexo-icon-emoji{font-size:1rem;line-height:1}
.reg-anexo-icon-img{
  width:18px;height:18px;border-radius:var(--r-full);
  object-fit:cover;
}
.reg-divider{
  width:1px;height:18px;
  background:var(--border);
  flex-shrink:0;
}

/* ══════════════════════════════════════════════════════════
   MODAL: CADASTRO / EDIÇÃO DE PET
   ══════════════════════════════════════════════════════════ */

/* Upload do avatar circular no topo */
.pet-avatar-upload{
  display:flex;flex-direction:column;align-items:center;
  margin:8px 0 24px;
  gap:10px;
}
.pet-avatar-circle{
  width:96px;height:96px;
  border-radius:50%;
  background:var(--bg);
  border:2px dashed var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);
  overflow:hidden;
  position:relative;
}
.pet-avatar-circle img{
  width:100%;height:100%;object-fit:cover;
  display:block;
}
.pet-avatar-upload-btn{
  background:var(--teal-light);
  color:var(--teal-dark);
  border:none;border-radius:var(--r-full);
  padding:8px 16px;
  font-size:.82rem;font-weight:700;
  display:flex;align-items:center;gap:6px;
  cursor:pointer;
  transition:background .15s;
  font-family:var(--font);
}
.pet-avatar-upload-btn:active{background:#C5E4DE}
.pet-avatar-hint{
  font-size:.7rem;color:var(--text-muted);font-weight:600;
}

/* Seções do formulário */
.pet-form-section{margin-bottom:8px}
.pet-form-section-title{
  font-size:.74rem;font-weight:800;
  color:var(--teal-dark);
  text-transform:uppercase;letter-spacing:.1em;
  margin:18px 0 12px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.pet-form-section-title:first-child{
  border-top:none;padding-top:0;margin-top:0;
}

/* Layout em duas colunas */
.form-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:12px;
}
.form-row .form-group{margin-bottom:15px}

/* Asterisco de campo obrigatório */
.req{color:var(--orange-strong);font-weight:800}

/* Botão "Mais informações" */
.pet-expand-btn{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px;
  background:transparent;
  border:1.5px dashed var(--border);
  border-radius:var(--r-md);
  color:var(--teal-dark);
  font-size:.92rem;font-weight:700;
  cursor:pointer;
  margin:8px 0 16px;
  transition:all .15s;
  font-family:var(--font);
}
.pet-expand-btn:active{
  background:var(--teal-light);
  border-color:var(--teal-mid);
  border-style:solid;
}
.pet-expand-btn.expanded svg{transform:rotate(45deg)}
.pet-expand-btn svg{transition:transform .25s}
.pet-expand-btn.expanded span::before{content:"Menos "}
.pet-expand-btn.expanded span{visibility:hidden;position:relative}
.pet-expand-btn.expanded span::before{
  visibility:visible;position:absolute;left:0;
  content:"Menos informações";
}

/* Seção extra (oculta) */
.pet-form-extra{
  animation:pet-expand .25s ease;
}
.pet-form-extra.hidden{display:none}
@keyframes pet-expand{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

/* Chips de personalidade */
.pet-personalidade-grid{
  display:flex;flex-wrap:wrap;gap:7px;
  margin-top:4px;
}
.pers-chip{
  padding:7px 14px;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:var(--r-full);
  font-size:.82rem;font-weight:700;
  color:var(--text-body);
  cursor:pointer;
  transition:all .15s;
  font-family:var(--font);
}
.pers-chip:active{transform:scale(.96)}
.pers-chip.selected{
  background:var(--teal-light);
  border-color:var(--teal-mid);
  color:var(--teal-dark);
}

/* ══════════════════════════════════════════════════════════
   MODAL: VISUALIZADOR DE ANEXO
   ══════════════════════════════════════════════════════════ */
.modal-anexo{
  max-height:95dvh;
  display:flex;flex-direction:column;
}
.anexo-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:14px;
}
.anexo-preview{
  flex:1;min-height:280px;max-height:60dvh;
  background:var(--bg);
  border-radius:var(--r-md);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.anexo-img-preview{
  max-width:100%;max-height:100%;
  display:block;
  object-fit:contain;
}
.anexo-pdf-preview{
  width:100%;height:60dvh;
  border:none;background:white;
}
.anexo-generic{
  text-align:center;padding:30px 20px;
  display:flex;flex-direction:column;align-items:center;
}

/* ══════════════════════════════════════════════════════════
   CONQUISTAS — emblemas, grid, destaques
   ══════════════════════════════════════════════════════════ */

/* ── Emblemas no card do pet (home / meus pets) ─────────── */
.pet-card-emblemas{
  display:inline-flex;align-items:center;gap:4px;
  margin-left:8px;vertical-align:middle;
}
.card-emblema{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:var(--r-full);
  background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  font-size:.95rem;line-height:1;
  overflow:hidden;flex-shrink:0;
}
.card-emblema img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-full)}
.card-emblema-emoji{display:block;line-height:1}
.card-emblema-placeholder{
  background:transparent;
  border:1.5px dashed var(--border);
  box-shadow:none;cursor:pointer;
}
.card-emblema-placeholder:active{border-color:var(--teal-mid)}

/* ── Emblemas no perfil do pet (até 4, maiores) ─────────── */
.perfil-emblemas{
  display:flex;justify-content:center;gap:10px;
  margin-top:14px;
}
.perfil-emblema{
  width:44px;height:44px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  font-size:1.5rem;line-height:1;
  overflow:hidden;flex-shrink:0;
  transition:transform .15s;
  border:none;cursor:pointer;
}
.perfil-emblema:active{transform:scale(.92)}
.perfil-emblema img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-full);display:block}
.perfil-emblema span{display:block;line-height:1}
.perfil-emblema-placeholder{
  background:transparent;
  border:1.5px dashed var(--border);
  box-shadow:none;color:var(--text-muted);
  font-size:1.2rem;font-weight:700;
}
.perfil-emblema-placeholder:active{border-color:var(--teal-mid);color:var(--teal-dark)}
.perfil-emblema-placeholder span{font-size:1.3rem;line-height:1}

/* ── Aba Conquistas: grid 3 colunas ──────────────────────── */
.conq-ajuda{
  margin:0 var(--px) 14px;padding:12px 14px;
  background:var(--teal-light);border-radius:var(--r-md);
}
.conq-ajuda p{font-size:.82rem;color:var(--text-body);line-height:1.4}

.conq-section-title{
  font-size:.76rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-muted);
  padding:14px var(--px) 10px;
}
.conq-section-title--bloq{color:var(--text-muted);opacity:.7}

.conq-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding:0 var(--px) 8px;
}

.conq-card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  padding:12px 8px;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:6px;cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s;
  font-family:var(--font);
}
.conq-card:active{transform:scale(.96)}

/* Emblema interno */
.conq-emblema{
  position:relative;
  width:56px;height:56px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;line-height:1;overflow:visible;
}
.conq-emblema img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-full);display:block}
.conq-emoji{display:block;line-height:1}

.conq-star-marker{
  position:absolute;top:-4px;right:-4px;
  width:20px;height:20px;border-radius:var(--r-full);
  background:var(--orange-strong);color:white;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:800;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
  border:2px solid var(--surface);
}

.conq-nome{
  font-size:.74rem;font-weight:800;color:var(--text-dark);
  line-height:1.15;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.conq-data{font-size:.68rem;color:var(--text-muted);font-weight:600}

/* Conquistadas — cor por categoria do emblema */
.conq-conquistada.conq-teal   .conq-emblema{background:var(--teal-light)}
.conq-conquistada.conq-orange .conq-emblema{background:var(--orange-light)}
.conq-conquistada.conq-purple .conq-emblema{background:var(--purple-light)}

.conq-conquistada.destacada{
  border-color:var(--orange-strong);
  box-shadow:0 0 0 3px rgba(224,122,46,.15);
  background:#FFFCF7;
}

/* Bloqueadas — cinza, interrogação */
.conq-bloqueada{
  opacity:.55;cursor:default;
  background:var(--bg);
}
.conq-bloqueada:active{transform:none}
.conq-bloqueada .conq-emblema{
  background:var(--border);color:var(--text-muted);
}
.conq-bloqueada-icon{
  font-size:1.8rem;font-weight:800;color:var(--text-muted);
}

/* ══════════════════════════════════════════════════════════
   NOTIFICAÇÕES — painel lateral
   ══════════════════════════════════════════════════════════ */
.notif-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;gap:12px;
}
.notif-items{display:flex;flex-direction:column;gap:0}
.notif-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--border);
  cursor:pointer;position:relative;
  transition:background .12s;
}
.notif-item:last-child{border-bottom:none}
.notif-item:active{background:var(--bg)}
.notif-item.lida{opacity:.6}
.notif-icone{
  width:40px;height:40px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0;
}
.notif-icone.teal  {background:var(--teal-light)}
.notif-icone.orange{background:var(--orange-light)}
.notif-icone.purple{background:var(--purple-light)}
.notif-corpo{flex:1;min-width:0}
.notif-titulo{font-size:.92rem;font-weight:800;color:var(--text-dark)}
.notif-msg{font-size:.82rem;color:var(--text-body);margin-top:2px;line-height:1.4}
.notif-data{font-size:.72rem;color:var(--text-muted);margin-top:4px;font-weight:600}
.notif-dot-pequeno{
  width:8px;height:8px;border-radius:var(--r-full);
  background:var(--orange-strong);
  position:absolute;top:18px;right:0;
  flex-shrink:0;
}

/* ── LINHA DA VIDA ───────────────────────────────────────── */
.vida-timeline{padding:0 var(--px)}
.vida-item{display:flex;gap:14px;padding-bottom:0;position:relative}
.vida-item:not(:last-child) .vida-dot-wrap::after{
  content:'';position:absolute;top:36px;left:17px;width:2px;
  background:var(--border);bottom:0;
}
.vida-dot-wrap{
  display:flex;flex-direction:column;align-items:center;
  flex-shrink:0;position:relative;width:36px;
}
.vida-dot{
  width:36px;height:36px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;z-index:1;
}
.vida-dot.tutor      {background:#E8F5E9;font-size:.9rem}
.vida-dot.memoria    {background:var(--orange-light)}
.vida-dot.registro   {background:var(--teal-light)}
.vida-dot.novoLar    {background:#FFF3E0}
.vida-dot.atual      {background:var(--teal-dark);color:white}
.vida-body{flex:1;padding-bottom:24px}
.vida-data{font-size:.72rem;color:var(--text-muted);font-weight:700;margin-bottom:2px}
.vida-titulo{font-size:.9rem;font-weight:800;color:var(--text-dark)}
.vida-sub{font-size:.8rem;color:var(--text-body);margin-top:2px;line-height:1.4}
.vida-tutor-card{
  background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-sm);
  padding:10px 14px;margin-top:8px;display:flex;align-items:center;gap:10px;
}
.vida-tutor-avatar{
  width:32px;height:32px;border-radius:var(--r-full);background:var(--teal-light);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;color:var(--teal-dark);flex-shrink:0;
}
.vida-tutor-info p:first-child{font-size:.84rem;font-weight:800;color:var(--text-dark)}
.vida-tutor-info p:last-child {font-size:.74rem;color:var(--text-muted)}
.vida-periodo{font-size:.72rem;color:var(--text-muted);margin-top:3px}

/* ── ACESSO / COMPARTILHAMENTOS ──────────────────────────── */
.comp-section{padding:0 var(--px) 8px}
.comp-section-title{
  font-size:.76rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-muted);margin-bottom:10px;padding-top:4px;
}
.comp-item{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:12px;padding:14px 18px;margin-bottom:10px;
  cursor:pointer;transition:box-shadow .15s;
}
.comp-item:active{box-shadow:var(--shadow-md)}
.comp-avatar{
  width:42px;height:42px;border-radius:var(--r-full);
  background:var(--teal-light);display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;font-weight:800;color:var(--teal-dark);
}
.comp-info{flex:1;min-width:0}
.comp-nome{font-size:.9rem;font-weight:700;color:var(--text-dark)}
.comp-tipo{font-size:.76rem;color:var(--text-muted);margin-top:1px}
.comp-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.btn-compartilhar{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:calc(100% - var(--px)*2);margin:8px var(--px) 0;padding:14px;
  background:var(--teal-light);border-radius:var(--r-full);
  font-size:.9rem;font-weight:700;color:var(--teal-dark);transition:background .15s;
}
.btn-compartilhar:active{background:#c8ebe7}

/* ── FILTROS ─────────────────────────────────────────────── */
.filter-bar{display:flex;gap:8px;padding:0 var(--px) 16px;
  overflow-x:auto;scrollbar-width:none}
.filter-bar::-webkit-scrollbar{display:none}
.filter-pill{
  flex-shrink:0;padding:7px 15px;border-radius:var(--r-full);
  font-size:.82rem;font-weight:700;background:var(--surface);
  color:var(--text-body);border:1.5px solid var(--border);transition:all .18s;
}
.filter-pill.active{background:var(--teal-dark);color:white;border-color:var(--teal-dark)}

/* ── HISTÓRICO ───────────────────────────────────────────── */
.hist-month{font-size:.76rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-muted);padding:0 var(--px) 10px;margin-top:4px}
.hist-group{background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;margin:0 var(--px) 14px}
.hist-item{display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--border)}
.hist-item:last-child{border-bottom:none}
.hist-icon{width:38px;height:38px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.hist-icon.teal  {background:var(--teal-light)}
.hist-icon.orange{background:var(--orange-light)}
.hist-icon.purple{background:var(--purple-light)}
.hist-info{flex:1;min-width:0}
.hist-nome{font-size:.9rem;font-weight:700;color:var(--text-dark)}
.hist-meta{font-size:.74rem;color:var(--text-muted);margin-top:1px}
.hist-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.hist-local{font-size:.78rem;font-weight:600;color:var(--text-muted);text-align:right;
  max-width:110px;line-height:1.2}

/* ── HISTÓRICO · Avatar do pet com badge da categoria ───── */
.hist-pet-avatar-wrap{
  position:relative;flex-shrink:0;
  width:42px;height:42px;
}
.hist-pet-avatar{
  width:42px;height:42px;border-radius:var(--r-full);
  object-fit:cover;
  border:2px solid var(--teal-light);
  display:block;
}
.hist-cat-badge{
  position:absolute;bottom:-2px;right:-4px;
  width:22px;height:22px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;line-height:1;
  background:var(--surface);
  border:2px solid var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.hist-cat-badge.teal  {background:var(--teal-light)}
.hist-cat-badge.orange{background:var(--orange-light)}
.hist-cat-badge.purple{background:var(--purple-light)}

/* ── HISTÓRICO · CAMPO DE BUSCA ─────────────────────────── */
.hist-busca-wrap{
  position:relative;
  margin:0 var(--px) 14px;
  display:flex;align-items:center;
}
.hist-busca-icon{
  position:absolute;left:14px;
  color:var(--text-muted);pointer-events:none;
}
.hist-busca-input{
  width:100%;
  padding:11px 38px 11px 38px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  font-size:.88rem;font-weight:600;
  color:var(--text-dark);
  outline:none;
  transition:border-color .18s,box-shadow .18s;
}
.hist-busca-input:focus{
  border-color:var(--teal-mid);
  box-shadow:0 0 0 3px rgba(42,168,153,.15);
}
.hist-busca-input::placeholder{color:var(--text-muted);font-weight:500}
.hist-busca-input::-webkit-search-cancel-button{display:none}
.hist-busca-clear{
  position:absolute;right:8px;
  width:26px;height:26px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--border);color:var(--text-body);
  font-size:1.1rem;font-weight:700;line-height:1;
  transition:background .15s;
}
.hist-busca-clear:active{background:var(--text-muted);color:white}

/* ── LEMBRETES ───────────────────────────────────────────── */
.lem-list-inner{display:flex;flex-direction:column;gap:10px;padding:0 var(--px)}
.lem-item{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:14px;padding:15px 18px}
.lem-item.atrasado{border-left:3px solid var(--red)}
.lem-icon{width:42px;height:42px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.lem-icon.teal  {background:var(--teal-light)}
.lem-icon.orange{background:var(--orange-light)}
.lem-info{flex:1;min-width:0}
.lem-nome{font-size:.92rem;font-weight:700;color:var(--text-dark)}
.lem-data{font-size:.78rem;margin-top:2px;font-weight:700}
.lem-data.urgente {color:var(--orange-strong)}
.lem-data.atrasado{color:var(--red)}
.lem-data.soon    {color:var(--teal-mid)}
.lem-data.done    {color:var(--text-muted)}
.toggle{position:relative;width:44px;height:26px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-track{position:absolute;inset:0;background:var(--border);
  border-radius:var(--r-full);transition:background .2s;cursor:pointer}
.toggle input:checked+.toggle-track{background:var(--teal-mid)}
.toggle-track::after{content:'';position:absolute;top:3px;left:3px;
  width:20px;height:20px;background:white;border-radius:var(--r-full);
  box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .2s}
.toggle input:checked+.toggle-track::after{transform:translateX(18px)}

/* ── LEMBRETES · FILTRO DE PET (CHIPS - modo família) ───── */
.lem-chips-wrap{
  overflow-x:auto;overflow-y:visible;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:0 0 14px;margin-top:-4px;
}
.lem-chips-wrap::-webkit-scrollbar{display:none}
.lem-chips{
  display:flex;gap:8px;
  padding:0 var(--px);
  width:max-content;
}
.lem-chip{
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;
  padding:6px 14px 6px 6px;
  border-radius:var(--r-full);
  background:var(--surface);
  border:1.5px solid var(--border);
  font-size:.84rem;font-weight:700;
  color:var(--text-body);
  transition:all .18s;
}
.lem-chip.active{
  background:var(--teal-dark);
  border-color:var(--teal-dark);
  color:white;
}
.lem-chip-avatar{
  width:26px;height:26px;border-radius:var(--r-full);
  object-fit:cover;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.2);
}
.lem-chip-all-icon{
  width:26px;height:26px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--teal-light);
  font-size:.95rem;flex-shrink:0;
}
.lem-chip.active .lem-chip-all-icon{
  background:rgba(255,255,255,.18);
}

/* ── LEMBRETES · FILTRO DE PET (DROPDOWN - modo parceiro) ── */
.lem-dropdown-wrap{
  position:relative;
  margin:0 var(--px) 14px;
}
.lem-dropdown-trigger{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:12px 14px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  font-size:.88rem;font-weight:700;
  color:var(--text-dark);
  transition:border-color .18s, box-shadow .18s;
  text-align:left;
}
.lem-dropdown-trigger:active{background:var(--bg)}
.lem-dropdown-trigger.open{
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(123,94,167,.12);
}
.lem-dropdown-icon{
  color:var(--purple);flex-shrink:0;
}
.lem-dropdown-label{
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lem-dropdown-tutor{
  color:var(--text-muted);font-weight:600;font-size:.82rem;
}
.lem-dropdown-count{
  color:var(--text-muted);font-weight:600;font-size:.82rem;
}
.lem-dropdown-chevron{
  color:var(--text-muted);flex-shrink:0;
  transition:transform .25s ease;
}
.lem-dropdown-trigger.open .lem-dropdown-chevron{
  transform:rotate(180deg);
}
.lem-dropdown-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--surface);
  border-radius:var(--r-md);
  box-shadow:0 8px 28px rgba(0,0,0,.15);
  border:1px solid var(--border);
  max-height:320px;overflow-y:auto;
  z-index:60;
  animation:lem-dropdown-in .18s ease-out;
}
@keyframes lem-dropdown-in{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:translateY(0)}
}
.lem-dropdown-opt{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:12px 14px;
  border-bottom:1px solid var(--border);
  text-align:left;
  transition:background .12s;
}
.lem-dropdown-opt:last-child{border-bottom:none}
.lem-dropdown-opt:active{background:var(--bg)}
.lem-dropdown-opt.active{background:var(--purple-light)}
.lem-dropdown-opt-avatar{
  width:36px;height:36px;border-radius:var(--r-full);
  object-fit:cover;flex-shrink:0;
  border:2px solid var(--teal-light);
}
.lem-dropdown-opt-icon{
  width:36px;height:36px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--teal-light);
  font-size:1.05rem;flex-shrink:0;
}
.lem-dropdown-opt-info{flex:1;min-width:0}
.lem-dropdown-opt-nome{
  font-size:.9rem;font-weight:700;color:var(--text-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lem-dropdown-opt-sub{
  font-size:.74rem;color:var(--text-muted);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lem-dropdown-check{
  font-size:1rem;font-weight:800;color:var(--purple);
  flex-shrink:0;
}

/* ── PARCEIROS / PETS ACOMPANHADOS ──────────────────────── */
.parceiros-header-card{
  background:linear-gradient(135deg,var(--purple),#9B79CC);
  color:white;margin:0 var(--px) 18px;border-radius:var(--r-lg);
  padding:18px;
}
.parceiros-header-card h3{font-size:1rem;font-weight:800;margin-bottom:4px}
.parceiros-header-card p{font-size:.84rem;opacity:.85;line-height:1.4}
.parceiro-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 var(--px)}
.parceiro-card{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:16px;text-align:center;border:1.5px solid var(--border);
  cursor:pointer;transition:border-color .15s;
}
.parceiro-card:active{border-color:var(--teal-mid)}
.parceiro-emoji{font-size:1.8rem;margin-bottom:8px}
.parceiro-tipo{font-size:.85rem;font-weight:800;color:var(--text-dark)}
.parceiro-count{
  display:inline-block;margin-top:8px;font-size:.72rem;font-weight:700;
  padding:2px 10px;border-radius:var(--r-full);
  background:var(--teal-light);color:var(--teal-dark);
}
/* Pet acompanhado (visão parceiro) */
.pet-acomp-card{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  margin:0 var(--px) 14px;overflow:hidden;
}
.pet-acomp-header{display:flex;align-items:center;gap:14px;padding:16px 18px 12px}
.pet-acomp-avatar{width:56px;height:56px;border-radius:var(--r-full);
  object-fit:cover;border:3px solid var(--purple-light)}
.pet-acomp-info{flex:1;min-width:0}
.pet-acomp-nome{font-size:1rem;font-weight:800;color:var(--text-dark)}
.pet-acomp-detalhe{font-size:.8rem;color:var(--text-muted);margin:2px 0 5px}
.pet-acomp-tutor{font-size:.76rem;color:var(--text-body);font-weight:600}
.pet-acomp-perms{
  display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 14px;
}
.perm-tag{
  font-size:.7rem;font-weight:700;padding:3px 10px;
  border-radius:var(--r-full);background:var(--teal-light);color:var(--teal-dark);
}
.pet-acomp-frozen{
  padding:10px 18px;background:var(--purple-light);
  border-top:1px solid rgba(123,94,167,.15);
  font-size:.78rem;color:var(--purple);font-weight:600;
  display:flex;align-items:center;gap:6px;
}
.pet-acomp-actions{display:flex;border-top:1px solid var(--border)}
.pet-acomp-action{
  flex:1;padding:12px;font-size:.8rem;font-weight:700;text-align:center;
  color:var(--teal-dark);transition:background .15s;
  border-right:1px solid var(--border);
}
.pet-acomp-action:last-child{border-right:none}
.pet-acomp-action:active{background:var(--bg)}

/* ── MODAL ───────────────────────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;max-width:430px;margin:0 auto;background:rgba(30,42,40,.45);
  backdrop-filter:blur(3px);z-index:200;
  display:flex;align-items:flex-end;transition:opacity .25s;
}
.modal-backdrop.hidden{opacity:0;pointer-events:none}
.modal-backdrop.hiding{opacity:0}
.modal{
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:12px var(--px) 32px;width:100%;max-height:92dvh;overflow-y:auto;
  transform:translateY(0);transition:transform .3s cubic-bezier(.32,.72,0,1);
  padding-bottom:calc(32px + env(safe-area-inset-bottom,0));
}
.modal-backdrop.hidden .modal{transform:translateY(100%)}
.modal-handle{width:40px;height:4px;background:var(--border);
  border-radius:var(--r-full);margin:0 auto 20px}
.modal-title{font-size:1.1rem;font-weight:800;color:var(--text-dark);margin-bottom:6px}
.modal-subtitle{font-size:.84rem;color:var(--text-muted);margin-bottom:20px;line-height:1.4}
.modal-actions{display:flex;gap:12px;margin-top:22px}
.modal-actions .btn-primary{flex:1.6}

/* ── SELETOR DE CATEGORIA (Modal "Novo Registro") ─────────
   Layout B: grid 3 colunas com cards maiores e bem espaçados.
   Cabe nome completo "Medicamento" sem cortar.
   --------------------------------------------------------- */
.tipo-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin-bottom:4px;
}
/* Mantido para o modal de convite (8 opções) */
.tipo-grid--3{grid-template-columns:repeat(3,1fr)}

.tipo-btn{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:8px;
  padding:18px 8px;
  min-height:88px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  font-size:.82rem;font-weight:700;
  color:var(--text-body);
  transition:all .18s ease;
  position:relative;
}
.tipo-btn span:first-child{
  font-size:0.9rem;
  line-height:1;
  transition:transform .18s ease;
}
.tipo-btn:active{
  background:var(--teal-light);
  transform:scale(.97);
}
.tipo-btn.selected{
  background:var(--teal-light);
  border-color:var(--teal-mid);
  border-width:2px;
  color:var(--teal-dark);
  box-shadow:0 0 0 3px rgba(43,170,158,.12);
}
.tipo-btn.selected span:first-child{
  transform:scale(1.1);
}

/* Variante para o modal de convite (manter 4 colunas, mais compacto) */
.tipo-grid--compact{
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.tipo-grid--compact .tipo-btn{
  min-height:70px;
  padding:10px 4px;
  gap:5px;
  font-size:.7rem;
}
.tipo-grid--compact .tipo-btn span:first-child{
  font-size:0.9rem;
}

/* Formulário */
.form-group{margin-bottom:15px}
.form-label{
  display:block;font-size:.8rem;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px;
}
.form-input,.form-select{
  width:100%;padding:13px 16px;border:1.5px solid var(--border);
  border-radius:var(--r-md);font-size:.94rem;font-weight:600;
  color:var(--text-dark);background:var(--bg);outline:none;
  appearance:none;-webkit-appearance:none;
  transition:border-color .18s,box-shadow .18s;
}
.form-input:focus,.form-select:focus{
  border-color:var(--teal-mid);box-shadow:0 0 0 3px rgba(42,168,153,.15);
}
.form-textarea{resize:none;height:80px;line-height:1.5}

/* Permissões */
.perm-section{background:var(--bg);border-radius:var(--r-md);padding:12px 14px;margin-bottom:10px}
.perm-section-label{font-size:.74rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-muted);margin-bottom:10px}
.perm-list{display:flex;flex-direction:column;gap:10px}
.perm-item{display:flex;align-items:center;gap:10px;cursor:pointer}
.perm-item input[type=checkbox]{
  width:18px;height:18px;accent-color:var(--teal-dark);flex-shrink:0;cursor:pointer;
}
.perm-item span{font-size:.88rem;font-weight:600;color:var(--text-body)}

/* Novo Lar */
.novoLar-header{text-align:center;margin-bottom:16px}
.novoLar-icon{font-size:2rem;display:block;margin-bottom:8px}
.novoLar-aviso{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--orange-light);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:18px;
  font-size:.82rem;color:var(--text-body);line-height:1.4;
}
.novoLar-aviso span{flex-shrink:0}
.nL-confirm-card{
  background:var(--bg);border-radius:var(--r-lg);padding:18px;
  text-align:center;margin-bottom:12px;
}
.nL-arrow{font-size:1rem;color:var(--text-muted);margin:10px 0;font-weight:600}
.nL-box{background:var(--surface);border-radius:var(--r-md);padding:12px;margin-bottom:0}
.nL-box-label{font-size:.72rem;color:var(--text-muted);font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.nL-box-nome{font-size:1rem;font-weight:800;color:var(--text-dark)}
.nL-box-sub{font-size:.82rem;color:var(--text-muted)}

/* ── MENU INFERIOR ───────────────────────────────────────── */
.bottom-nav{
  position:relative;height:var(--nav-h);width:100%;flex-shrink:0;
  background:var(--surface);display:flex;align-items:center;justify-content:space-around;
  box-shadow:0 -1px 0 var(--border),0 -8px 32px rgba(0,0,0,.06);
  padding-bottom:env(safe-area-inset-bottom,0);z-index:100;
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:8px 4px;color:var(--text-muted);transition:color .18s;
  min-height:56px;justify-content:center;
}
.nav-item.active{color:var(--teal-dark)}
.nav-item.active .nav-icon svg{stroke:var(--teal-dark)}
.nav-label{font-size:.64rem;font-weight:700;letter-spacing:.01em}
.nav-icon svg{transition:stroke .18s}
.nav-fab{
  width:56px;height:56px;
  background:linear-gradient(135deg,var(--teal-mid),var(--teal-dark));
  border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-fab);flex-shrink:0;margin-top:-20px;
  transition:transform .15s,box-shadow .15s;
  animation:fab-pulse 3s ease-in-out infinite;
}
.nav-fab:active{transform:scale(.93);animation:none}
@keyframes fab-pulse{
  0%,100%{box-shadow:var(--shadow-fab)}
  50%{box-shadow:0 8px 32px rgba(26,122,110,.55)}
}

/* ── TOAST ───────────────────────────────────────────────── */
.toast{
  position:absolute;bottom:calc(var(--nav-h)+16px);
  left:var(--px);right:var(--px);
  background:var(--text-dark);color:white;padding:14px 18px;
  border-radius:var(--r-md);font-size:.88rem;font-weight:700;
  box-shadow:var(--shadow-md);z-index:300;text-align:center;
  animation:toast-in .3s ease forwards;
}
.toast.out{animation:toast-out .3s ease forwards}
@keyframes toast-in {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes toast-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(12px)}}

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:40px 24px;gap:10px;
}
.empty-icon{font-size:2.5rem}
.empty-text{font-size:1rem;font-weight:700;color:var(--text-dark)}
.empty-sub{font-size:.84rem;color:var(--text-muted);line-height:1.4}
.empty-state-pet{padding:48px 24px 36px}
.empty-state-pet .empty-icon{font-size:3.2rem}
.empty-state-pet #btn-primeiro-pet{margin-top:10px;padding:13px 28px;width:auto}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .nav-fab{animation:none}
  .screen,.modal{transition:none}
}


.partner-search-wrap {
  padding: 0 var(--px) 14px;
}

.partner-search-input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-dark);
  font-size: .92rem;
  font-weight: 600;
  outline: none;
  box-shadow: var(--shadow-sm);
}

.partner-search-input::placeholder {
  color: var(--text-muted);
}

.partner-search-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(123,94,167,.12);
}



.pet-acomp-card.compact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 var(--px) 10px;
  cursor: pointer;
}

.pet-acomp-avatar.compact {
  width: 48px;
  height: 48px;
  border-width: 2px;
}

.pet-acomp-card.compact .pet-acomp-info {
  flex: 1;
  min-width: 0;
}

.pet-acomp-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pet-acomp-card.compact .pet-acomp-nome {
  font-size: .95rem;
  line-height: 1.1;
}

.pet-acomp-card.compact .pet-acomp-detalhe,
.pet-acomp-card.compact .pet-acomp-tutor {
  font-size: .75rem;
  line-height: 1.25;
}

.status-badge.compact {
  font-size: .65rem;
  padding: 2px 8px;
  white-space: nowrap;
}

.pet-acomp-arrow {
  font-size: 1.5rem;
  color: var(--text-muted);
  line-height: 1;
}
/* ══════════════════════════════════════════════════════════
   MINHA CONTA — PERFIL DO USUÁRIO / MEU PLANO
   ══════════════════════════════════════════════════════════ */
.conta-avatar-circle{
  display:flex;align-items:center;justify-content:center;
  background:var(--teal-light);color:var(--teal-dark);
  font-size:1.6rem;font-weight:800;
}

.btn-logout{color:var(--red);flex:none;width:100%}

/* Cartões de plano (modal de upgrade) */
.plano-card{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:18px;margin-bottom:12px;border:2px solid transparent;
}
.plano-card.atual{border-color:var(--teal-mid);background:#F5FBFA}
.plano-card-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:6px;
}
.plano-card-nome{font-size:1rem;font-weight:800;color:var(--text-dark)}
.plano-card-desc{font-size:.82rem;color:var(--text-muted);line-height:1.4;margin-bottom:14px}
.plano-badge-atual{
  font-size:.68rem;font-weight:800;color:var(--teal-dark);background:var(--teal-light);
  padding:3px 10px;border-radius:var(--r-full);text-transform:uppercase;
  letter-spacing:.04em;white-space:nowrap;flex-shrink:0;
}

/* ══════════════════════════════════════════════════════════
   SELETOR DE CONTAS (família + cada conta parceira)
   ══════════════════════════════════════════════════════════ */
.conta-sel-item{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-radius:var(--r-lg);
  margin-bottom:8px;cursor:pointer;border:2px solid transparent;
  background:var(--bg);transition:border-color .15s,background .15s;
}
.conta-sel-item:active{background:var(--teal-light)}
.conta-sel-item.ativo{border-color:var(--teal-mid);background:#F5FBFA}
.conta-sel-icone{
  width:40px;height:40px;border-radius:var(--r-full);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.conta-sel-icone.teal  {background:var(--teal-light)}
.conta-sel-icone.purple{background:var(--purple-light)}
.conta-sel-info{flex:1;min-width:0}
.conta-sel-nome{font-size:.9rem;font-weight:800;color:var(--text-dark)}
.conta-sel-papel{font-size:.76rem;color:var(--text-muted);margin-top:1px}
.conta-sel-check{color:var(--teal-dark);font-size:1.1rem;font-weight:800;flex-shrink:0}

/* ── ABA "CONTAS" (Minha Conta) — cards administrativos ─── */
.conta-admin-card{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:10px;
}
.conta-admin-icone{
  width:40px;height:40px;border-radius:var(--r-full);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.conta-admin-icone.teal  {background:var(--teal-light)}
.conta-admin-icone.purple{background:var(--purple-light)}
.conta-admin-info{flex:1;min-width:0}
.conta-admin-nome{font-size:.9rem;font-weight:800;color:var(--text-dark)}
.conta-admin-tipo{font-size:.76rem;color:var(--text-muted);margin-top:1px}

/* ── GERENCIAR CONTA — lista de colaboradores ───────────── */
#gc-colaboradores-section.hidden{display:none}
.gc-colab-item{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--border);
}
.gc-colab-item:last-child{border-bottom:none}
.gc-colab-avatar{
  width:36px;height:36px;border-radius:var(--r-full);flex-shrink:0;
  background:var(--teal-light);color:var(--teal-dark);
  display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:800;
}
.gc-colab-info{flex:1;min-width:0}
.gc-colab-nome{font-size:.86rem;font-weight:700;color:var(--text-dark)}
.gc-colab-email{font-size:.74rem;color:var(--text-muted);margin-top:1px}
.gc-add-colaborador{display:flex;gap:8px;margin-top:10px}
.gc-add-colaborador .form-input{margin-bottom:0}
.gc-add-colaborador .btn-outline-sm{flex-shrink:0;white-space:nowrap}

/* ── EDITAR DADOS — aviso de confirmação de e-mail ──────── */
.ec-email-hint{
  font-size:.74rem;color:var(--text-muted);margin-top:6px;line-height:1.4;
}

/* ── MODAL NOVO REGISTRO — campos condicionais ──────────── */
#f-data-group.hidden,
#f-hora-group.hidden,
#f-recorrencia-group.hidden,
#f-recorrencia-fim-group.hidden{display:none}
.modal-link-row{margin:-6px 0 14px}

/* ── LEMBRETES — indicador de recorrência ───────────────── */
.lem-recorrencia-badge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:.7rem;font-weight:700;color:var(--purple);
  margin-left:6px;
}

/* ══════════════════════════════════════════════════════════
   ABA SAÚDE — EVOLUÇÃO DE PESO
   ══════════════════════════════════════════════════════════ */
.peso-card{padding:16px}
.peso-card-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;gap:10px;
}
.peso-atual-label{font-size:.74rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.peso-atual-valor{font-size:1.3rem;font-weight:800;color:var(--text-dark);margin-top:1px}

.peso-grafico-wrap{margin-top:4px}
.peso-grafico-svg{width:100%;height:110px;display:block}
.peso-grafico-legenda{
  display:flex;justify-content:space-between;
  font-size:.72rem;color:var(--text-muted);margin-top:2px;
}
.peso-grafico-vazio{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;padding:24px 12px 10px;color:var(--text-muted);
}
.peso-grafico-vazio span{font-size:1.6rem}
.peso-grafico-vazio p{font-size:.8rem;line-height:1.4;max-width:220px}

/* ══════════════════════════════════════════════════════════
   MEMORIAL — PET FALECIDO
   ══════════════════════════════════════════════════════════ */
.memorial-banner{
  margin:0 var(--px) 12px;padding:14px 16px;
  background:var(--gold-light);border-radius:var(--r-md);
  border-left:3px solid var(--gold);
  font-size:.84rem;color:var(--gold-strong);line-height:1.5;font-weight:600;
  text-align:center;
}
.memorial-banner strong{font-weight:800}
.memorial-mensagem{
  font-style:italic;font-weight:500;margin-top:8px;
  color:var(--text-body);font-size:.86rem;
}

/* Avatar com "moldura" dourada — perfil do pet, hero */
.perfil-avatar-wrap.memorial{
  border-radius:var(--r-full);
  box-shadow:0 0 0 3px var(--surface), 0 0 0 6px var(--gold);
}
.perfil-avatar.memorial{filter:saturate(.92)}

/* Card principal da Home */
.pet-card.memorial{
  background:linear-gradient(135deg, var(--gold-light), var(--surface));
  border:1px solid var(--gold);
}
.pet-avatar.memorial{box-shadow:0 0 0 3px var(--gold)}

/* Cards de listagem (Meus Pets / Pets Acompanhados) */
.meupet-card.memorial{
  background:linear-gradient(135deg, var(--gold-light), var(--surface));
  border:1px solid var(--gold);
}
.meupet-avatar.memorial{box-shadow:0 0 0 2.5px var(--gold)}

/* Mini-card do seletor de pets na Home */
.mini-pet-card.memorial .mini-pet-avatar{box-shadow:0 0 0 2.5px var(--gold)}

/* Link "Alterar status" no hero do perfil */
.perfil-status-link{display:block;margin:6px auto 0}

/* ── MODAL: STATUS DO PET ────────────────────────────────── */
.status-opcoes{display:flex;gap:10px;margin-bottom:4px}
.status-opcao-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:16px 8px;border-radius:var(--r-lg);border:2px solid var(--border);
  background:var(--surface);font-size:.8rem;font-weight:700;color:var(--text-body);
  cursor:pointer;transition:border-color .15s,background .15s;
}
.status-opcao-btn:active{background:var(--bg)}
.status-opcao-emoji{font-size:1.5rem}
.status-opcao-btn.selected{border-color:var(--teal-mid);background:var(--teal-light);color:var(--teal-dark)}
.status-opcao-btn[data-status-opcao="falecido"].selected{border-color:var(--gold);background:var(--gold-light);color:var(--gold-strong)}
.status-opcao-btn[data-status-opcao="desaparecido"].selected{border-color:var(--orange);background:var(--orange-light);color:var(--orange-strong)}
.status-falecido-aviso{
  font-size:.8rem;color:var(--gold-strong);background:var(--gold-light);
  padding:10px 12px;border-radius:var(--r-md);line-height:1.4;margin-bottom:14px;
}

/* ── MODAL NOVO REGISTRO — campos de vacina (Fabricante/Lote) ──── */
#f-vacina-extra.hidden{display:none}
.f-vacina-row{display:flex;gap:12px}
.f-vacina-row > div{flex:1}

/* ══════════════════════════════════════════════════════════
   ABA VACINAS — CARTEIRA DE VACINAÇÃO DIGITAL
   ══════════════════════════════════════════════════════════ */

/* Chips de resumo — agora clicáveis, mesmo padrão de filtro da aba Registros */
.vac-resumo{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:0 var(--px);margin-bottom:14px;
}
.vac-resumo-item{
  font-size:.78rem;font-weight:700;padding:6px 12px;
  border-radius:var(--r-full);background:var(--bg);
  border:2px solid transparent;cursor:pointer;
  transition:border-color .15s,opacity .15s;
}
.vac-resumo-item:active{opacity:.8}
.vac-resumo-item.done    {background:var(--teal-light);color:var(--teal-dark)}
.vac-resumo-item.atrasado{background:var(--red-light);color:var(--red)}
.vac-resumo-item.soon    {background:var(--orange-light);color:var(--orange-strong)}
.vac-resumo-item.done.active    {border-color:var(--teal-dark)}
.vac-resumo-item.atrasado.active{border-color:var(--red)}
.vac-resumo-item.soon.active    {border-color:var(--orange-strong)}

/* Grid compacto — 2 colunas, só o essencial pra escanear rápido */
.vac-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:0 var(--px);
}
.vac-card-compact{
  background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-sm);
  padding:12px;display:flex;flex-direction:column;gap:5px;
}
.vac-nome{font-size:.84rem;font-weight:800;color:var(--text-dark);line-height:1.3}
.vac-dose{
  font-size:.66rem;font-weight:700;color:var(--teal-dark);background:var(--teal-light);
  padding:1px 7px;border-radius:var(--r-full);margin-left:5px;white-space:nowrap;
}
.vac-status-badge{font-size:.72rem;font-weight:800;white-space:nowrap}
.vac-status-badge.atrasado{color:var(--red)}
.vac-status-badge.urgente {color:var(--orange-strong)}
.vac-status-badge.soon    {color:var(--teal-mid)}
.vac-status-badge.later   {color:var(--text-muted)}
.vac-status-badge.done    {color:var(--teal-dark)}
.vac-detalhe-compact{font-size:.72rem;color:var(--text-muted)}

/* ── MODAL NOVO REGISTRO — seleção de pet em lote ───────── */
#f-pet.hidden{display:none}
#f-pet-multi-toggle.hidden{display:none}
#f-pet-multi-group.hidden{display:none}
.f-pet-multi-link{display:block;margin-top:8px}
.f-pet-multi-wrap{margin-top:10px}
.f-pet-multi-todos-btn{
  font-size:.8rem;font-weight:700;color:var(--teal-dark);
  background:var(--teal-light);padding:7px 14px;border-radius:var(--r-full);
  margin-bottom:10px;display:inline-block;
}
.f-pet-multi-lista{display:flex;flex-direction:column;gap:8px}
.f-pet-multi-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:var(--r-md);background:var(--bg);cursor:pointer;
}
.f-pet-multi-item img{width:32px;height:32px;border-radius:var(--r-full);object-fit:cover;flex-shrink:0}
.f-pet-multi-item input{width:18px;height:18px;accent-color:var(--teal-mid);flex-shrink:0}
.f-pet-multi-item span{font-size:.86rem;font-weight:600;color:var(--text-dark)}

/* ══════════════════════════════════════════════════════════
   BANNER: CONVITES RECEBIDOS (Home)
   ══════════════════════════════════════════════════════════ */
.convites-recebidos{margin-bottom:16px}
.convites-recebidos-titulo{
  font-size:.92rem;font-weight:800;color:var(--text-dark);
  padding:0 var(--px);margin-bottom:8px;
}
.convite-recebido-card{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  border:1px solid var(--teal-light);
  margin:0 var(--px) 10px;padding:14px 16px;
}
.convite-recebido-nome{font-size:.92rem;font-weight:800;color:var(--text-dark)}
.convite-recebido-detalhe{font-size:.8rem;color:var(--text-muted);margin-top:2px}
.convite-recebido-acoes{display:flex;gap:10px;margin-top:12px}
.convite-recebido-acoes .btn-outline-sm,
.convite-recebido-acoes .btn-primary{flex:1;text-align:center}

/* Botão de Minha Conta dentro do cabeçalho de Meus Pets (só aparece no modo Parceiro) */
.icon-btn.hidden{display:none}

/* Texto de ajuda pequeno abaixo de um campo de formulário */
.form-hint{font-size:.76rem;color:var(--text-muted);margin-top:4px}

.form-group.hidden{display:none}

.convites-recebidos-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--px);margin-bottom:8px;
}
.convites-recebidos-header .convites-recebidos-titulo{margin-bottom:0}
.convites-recebidos-header .link-btn{font-size:.82rem;white-space:nowrap}

/* ══════════════════════════════════════════════════════════
   ZOOM AUTOMÁTICO NO MOBILE (iOS/Safari) — CORREÇÃO
   Abaixo de 16px, o Safari aplica zoom automático ao focar
   qualquer campo de texto. Garante 16px em TODOS os campos do
   app, independente da classe — sem isso, cada input teria que
   ser corrigido individualmente, um por um, no arquivo inteiro.
   ══════════════════════════════════════════════════════════ */
input, select, textarea {
  font-size: 16px !important;
}

/* ══════════════════════════════════════════════════════════
   PET BLOQUEADO PELO LIMITE DO PLANO
   ══════════════════════════════════════════════════════════ */
.meupet-card.bloqueado .meupet-header{opacity:.55;filter:grayscale(.6)}
.meupet-card.bloqueado .meupet-actions{opacity:.6}
.meupet-avatar.bloqueado{filter:grayscale(1)}
.meupet-upgrade-btn{
  width:100%;margin-top:10px;padding:10px;border:none;border-radius:var(--r-md);
  background:var(--orange-light);color:var(--orange-strong);
  font-size:.82rem;font-weight:700;cursor:pointer;
}

.meupet-encerrar-btn{
  width:100%;margin-top:10px;padding:9px;border:1.5px solid var(--border);
  border-radius:var(--r-md);background:var(--surface);color:var(--text-muted);
  font-size:.8rem;font-weight:700;cursor:pointer;
}
.meupet-encerrar-btn:active{background:var(--red-light);color:var(--red);border-color:var(--red)}

/* ══════════════════════════════════════════════════════════
   MODAL DE CONFIRMAÇÃO GENÉRICO
   ══════════════════════════════════════════════════════════ */
.confirmar-acoes{display:flex;gap:10px;margin-top:18px}
.btn-primary-danger{
  flex:1;padding:15px;border:none;border-radius:var(--r-full);
  font-size:.95rem;font-weight:700;color:#fff;background:var(--red);
  text-align:center;transition:opacity .15s;
}
.btn-primary-danger:active{opacity:.85}

/* ══════════════════════════════════════════════════════════
   SUPER ADMIN DASHBOARD
   ══════════════════════════════════════════════════════════ */
.sa-filtros{display:flex;gap:8px;padding:12px var(--px) 4px;overflow-x:auto;scrollbar-width:none}
.sa-filtros::-webkit-scrollbar{display:none}
.sa-filtro-btn{
  flex-shrink:0;padding:7px 14px;border-radius:var(--r-full);font-size:.8rem;font-weight:700;
  border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted);
  white-space:nowrap;transition:all .15s;
}
.sa-filtro-btn.active{background:var(--teal-dark);color:#fff;border-color:var(--teal-dark)}
.sa-custom-dates{
  display:flex;align-items:center;padding:8px var(--px);gap:4px;flex-wrap:wrap;
}
.sa-custom-dates .form-input{flex:1;min-width:130px}
.sa-loading{text-align:center;padding:40px;color:var(--text-muted);font-size:.9rem}

/* Cards de métrica */
.sa-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px var(--px) 8px}

.sa-card {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.sa-card.destaque {
  grid-column: 1 / -1;
  background: var(--teal-dark);
  color: #fff;
  border-radius: 22px;
  padding: 22px;
}

.sa-card-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.sa-card.destaque .sa-card-label {
  color: rgba(255, 255, 255, .7);
}

.sa-card-valor {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1;
}

.sa-card.destaque .sa-card-valor {
  color: #fff;
}

.sa-card-sub {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.sa-card.destaque .sa-card-sub {
  color: rgba(255, 255, 255, .65);
}

#screen-stats {
  overflow-y: auto;
  height: 100%;
}

#screen-stats .bottom-spacer {
  height: 80px;
}

/* Seção de gráfico */
.sa-chart-section{padding:8px var(--px) 16px}
.sa-chart-title{font-size:.82rem;font-weight:700;color:var(--text-muted);margin-bottom:8px}
.sa-chart-wrap{background:var(--surface);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-sm)}
.sa-chart-wrap canvas{max-height:140px}

/* Distribuição de planos */
.sa-planos{padding:0 var(--px) 16px}
.sa-plano-bar-wrap{margin-bottom:10px}
.sa-plano-label{display:flex;justify-content:space-between;font-size:.78rem;
  font-weight:700;color:var(--text-body);margin-bottom:4px}
.sa-plano-bar-bg{height:8px;border-radius:4px;background:var(--border);overflow:hidden}
.sa-plano-bar-fill{height:100%;border-radius:4px;transition:width .4s ease}
.sa-plano-free{background:var(--text-muted)}
.sa-plano-familia{background:var(--teal-mid)}
.sa-plano-parceiro{background:var(--orange)}



/* ══════════════════════════════════════════════════════════
   MENSAGEM DO DIA — NOVO CARD COM LIKE E SHARE
   ══════════════════════════════════════════════════════════ */
.tip-acoes{display:flex;align-items:center;gap:10px;margin-top:10px}
.tip-like-btn{
  display:flex;align-items:center;gap:5px;padding:7px 14px;
  border-radius:var(--r-full);border:1.5px solid var(--border);
  background:var(--surface);font-size:.85rem;font-weight:700;
  color:var(--text-muted);transition:all .15s;cursor:pointer;
}
.tip-like-btn.curtido{border-color:#e05454;color:#e05454;background:#fff0f0}
.tip-like-btn:active{transform:scale(.95)}
.tip-share-btn{
  display:flex;align-items:center;gap:6px;padding:7px 14px;
  border-radius:var(--r-full);border:1.5px solid var(--teal-mid);
  background:var(--surface);font-size:.85rem;font-weight:700;
  color:var(--teal-dark);transition:all .15s;cursor:pointer;
}
.tip-share-btn:active{background:var(--teal-light)}

/* ══════════════════════════════════════════════════════════
   GESTÃO DE MENSAGENS — PAINEL SUPER ADMIN
   ══════════════════════════════════════════════════════════ */
.sa-msg-card{
  background:var(--surface);border-radius:var(--r-lg);padding:16px;
  box-shadow:var(--shadow-sm);margin:0 var(--px) 12px; margin-top: 12px;
}
.sa-msg-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.sa-msg-titulo{font-size:.95rem;font-weight:800;color:var(--text-dark)}
.sa-msg-meta{font-size:.75rem;color:var(--text-muted);margin-top:3px}
.sa-msg-texto{font-size:.82rem;color:var(--text-body);margin-top:8px;line-height:1.5}
.sa-msg-acoes{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.sa-msg-tag{
  padding:3px 10px;border-radius:var(--r-full);font-size:.72rem;font-weight:700;
  background:var(--teal-light);color:var(--teal-dark);
}
.sa-msg-tag.todos{background:#fff3e0;color:#e65100}
.sa-msg-inativa .sa-msg-titulo{color:var(--text-muted)}
.sa-msg-inativa{opacity:.6}
.sa-novo-btn{
  position:sticky;bottom:80px;right:16px;float:right;
  width:52px;height:52px;border-radius:50%;
  background:var(--teal-dark);color:#fff;font-size:1.6rem;
  border:none;box-shadow:0 4px 16px rgba(0,0,0,.2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* ══════════════════════════════════════════════════════════
   MODAL MENSAGEM V2 — PREVIEW + BACKGROUND + FILTROS
   ══════════════════════════════════════════════════════════ */
.msg-preview-wrap{margin-bottom:16px}
.msg-preview-card{transition:background .3s}
.msg-img-toggle{display:flex;gap:6px;flex-wrap:wrap}
.msg-bg-cores{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.msg-bg-cor{
  width:36px;height:36px;border-radius:50%;border:3px solid transparent;
  cursor:pointer;transition:transform .15s;
}
.msg-bg-cor.active{border-color:var(--teal-dark);transform:scale(1.15)}
.msg-bg-cor:active{transform:scale(.9)}

/* ══════════════════════════════════════════════════════════
   MENU DE GESTÃO — CARDS DE NAVEGAÇÃO
   ══════════════════════════════════════════════════════════ */
.gestao-card{
  display:flex;align-items:center;gap:14px;padding:16px;
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);cursor:pointer;transition:opacity .15s;
}
.gestao-card:active{opacity:.75}
.gestao-card-icon{
  width:48px;height:48px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;flex-shrink:0;
}
.gestao-card-info{flex:1}
.gestao-card-titulo{font-size:.95rem;font-weight:800;color:var(--text-dark)}
/* ══════════════════════════════════════════════════════════
   MENU DE GESTÃO — CARDS DE NAVEGAÇÃO
   ══════════════════════════════════════════════════════════ */
.gestao-card{
  display:flex;align-items:center;gap:14px;padding:16px;
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);cursor:pointer;transition:opacity .15s;
}
.gestao-card:active{opacity:.75}
.gestao-card-icon{
  width:48px;height:48px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;flex-shrink:0;
}
.gestao-card-info{flex:1}
.gestao-card-titulo{font-size:.95rem;font-weight:800;color:var(--text-dark)}
/* ══════════════════════════════════════════════════════════
   ONBOARDING SLIDES — PRIMEIRO LOGIN
   ══════════════════════════════════════════════════════════ */
#onboarding{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
}
#onboarding.hidden{display:none}
#onboarding-slide{
  width:100%;height:100%;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
#ob-bg{
  position:absolute;inset:0;
  background:var(--teal-dark);
  transition:background .4s ease;
}
#ob-content{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:40px 32px 20px;text-align:center;
  position:relative;z-index:1;
}
#ob-emoji{font-size:4.5rem;margin-bottom:20px;line-height:1}
#ob-titulo{
  font-size:1.55rem;font-weight:800;color:#fff;
  margin-bottom:14px;line-height:1.25;
}
#ob-texto{
  font-size:.95rem;color:rgba(255,255,255,.85);
  line-height:1.65;max-width:320px;
}
#ob-footer{
  padding:24px 32px 40px;
  display:flex;flex-direction:column;
  align-items:center;gap:14px;
  position:relative;z-index:1;
}
#ob-dots{display:flex;gap:8px;margin-bottom:4px}
.ob-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.35);transition:all .25s;
}
.ob-dot.ativo{background:#fff;width:22px;border-radius:4px}
#ob-proximo{
  width:100%;max-width:280px;padding:16px;
  border-radius:var(--r-full);border:none;
  background:#fff;color:var(--teal-dark);
  font-size:1rem;font-weight:800;cursor:pointer;
  transition:opacity .15s;
}
#ob-proximo:active{opacity:.85}
#ob-pular{
  background:none;border:none;
  color:rgba(255,255,255,.6);font-size:.85rem;cursor:pointer;
}

/* ══════════════════════════════════════════════════════════
   CALENDÁRIO DE MENSAGENS
   ══════════════════════════════════════════════════════════ */
#sa-calendario{
  margin:0 var(--px) 8px;
  background:var(--surface);border-radius:var(--r-lg);
  padding:14px;box-shadow:var(--shadow-sm);
}
.cal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.cal-header span{font-size:.95rem;font-weight:800;color:var(--text-dark)}
.cal-nav-btn{
  width:32px;height:32px;border-radius:50%;border:none;
  background:var(--border);color:var(--text-body);
  font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.cal-nav-btn:active{opacity:.7}
.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
  text-align:center;
}
.cal-dia-label{
  font-size:.68rem;font-weight:700;color:var(--text-muted);
  padding-bottom:6px;
}
.cal-dia{
  position:relative;aspect-ratio:1;display:flex;
  align-items:center;justify-content:center;
  border-radius:50%;font-size:.82rem;cursor:pointer;
  color:var(--text-body);transition:background .15s;
}
.cal-dia:hover{background:var(--border)}
.cal-dia.hoje{font-weight:800;color:var(--teal-dark)}
.cal-dia.selecionado{background:var(--teal-dark);color:#fff}
.cal-dia.selecionado:hover{background:var(--teal-dark)}
.cal-dia.outro-mes{color:var(--border)}
/* Ponto indicador de post */
.cal-ponto{
  position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--orange);
}
.cal-dia.selecionado .cal-ponto{background:#fff}
.cal-limpar{
  width:100%;margin-top:10px;padding:8px;border:none;border-radius:var(--r-md);
  background:var(--border);color:var(--text-muted);font-size:.8rem;
  font-weight:700;cursor:pointer;
}

.hidden {
  display: none !important;
}