/* ═══════════════════════════════════════════════════════════════
   CLUB LOVE PET — APP DO TUTOR (PWA)
   Estilos específicos do app. O design system (tokens Bold Pop,
   componentes) vem de globals.css (copiado do site). Aqui só o que é
   próprio do app: container mobile, barra inferior + FAB carteirinha,
   cabeçalho de tela, placeholders e a Carteirinha (cartão temável).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --tab-h: 4.25rem;            /* altura útil da barra inferior */
  --app-max: 30rem;           /* largura mobile; centraliza no desktop */
}

html, body {
  height: 100%;
  /* iOS: trava o eixo X no html (o que rola) + no body, e desliga o
     rubber-band lateral elástico. Sem isso o app "balança" pros lados
     no iPhone e volta ao centro. O quique vertical (natural) fica. */
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
body {
  background: var(--clp-bg);
}

#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* ─── Container da tela ──────────────────────────────────────── */
.view {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  padding: max(env(safe-area-inset-top), .5rem) 1.125rem
           calc(var(--tab-h) + env(safe-area-inset-bottom) + 1.5rem);
}

/* ─── Cabeçalho de tela ──────────────────────────────────────── */
.screen-head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.25rem 0 .75rem;
}
.screen-head .back {
  flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--clp-surface);
  border: 1.5px solid var(--clp-border);
  color: var(--clp-tx);
  box-shadow: var(--sh-xs);
  transition: border-color var(--t), color var(--t);
}
.screen-head .back:hover { border-color: var(--clp-primary); color: var(--clp-primary); }
.screen-head .back svg { width: 1.25rem; height: 1.25rem; }
.screen-head h1 {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  letter-spacing: -0.02em;
  color: var(--clp-tx);
  margin: .35rem 0 0;
  line-height: 1.1;
}
.screen-sub {
  font-family: 'DM Sans', sans-serif;
  color: var(--clp-tx-muted);
  font-size: .95rem;
  margin: .3rem 0 0;
}

/* eyebrow-pill (marca Bold Pop) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .28rem .8rem;
  border-radius: 999px;
  background: var(--clp-primary-light);
  color: var(--clp-primary-dark);
}

/* ─── Placeholder "em construção" (telas ainda não feitas) ───── */
.constru {
  margin-top: 1rem;
  background: var(--clp-surface);
  border: 1.5px dashed var(--clp-border);
  border-radius: var(--r-2xl);
  padding: 2.25rem 1.5rem;
  text-align: center;
  color: var(--clp-tx-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  line-height: 1.55;
}
.constru .ic {
  width: 3.25rem; height: 3.25rem;
  margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--clp-secondary-light);
  color: var(--clp-secondary-dark);
}
.constru .ic svg { width: 1.5rem; height: 1.5rem; }

/* ─── Barra inferior (5 itens, carteirinha central elevada) ──── */
.tab-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max);
  z-index: 40;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--clp-surface);
  border-top: 1px solid var(--clp-border-light);
  box-shadow: 0 -8px 28px -14px rgba(15, 23, 42, .22);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: 'Fredoka', sans-serif;
  font-size: .66rem;
  font-weight: 500;
  color: var(--clp-tx-muted);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t);
}
.tab-item svg { width: 1.45rem; height: 1.45rem; }
.tab-item.is-active { color: var(--clp-primary); }

/* Item central: FAB elevado da carteirinha */
.tab-fab {
  position: relative;
  justify-content: flex-end;
  padding-bottom: .55rem;
}
.tab-fab .fab {
  position: absolute;
  top: -1.7rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3.7rem; height: 3.7rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--clp-primary), var(--clp-primary-dark));
  color: #fff;
  border: 4px solid var(--clp-surface);
  box-shadow: 0 14px 26px -10px rgba(var(--clp-primary-rgb), .65);
  transition: transform var(--t), box-shadow var(--t);
}
.tab-fab .fab svg { width: 1.7rem; height: 1.7rem; }
.tab-fab:active .fab { transform: translateX(-50%) scale(.96); }
.tab-fab.is-active .fab {
  box-shadow: 0 14px 26px -8px rgba(var(--clp-primary-rgb), .8),
              0 0 0 4px var(--clp-primary-light);
}
.tab-fab .fab-label { color: var(--clp-tx-muted); }
.tab-fab.is-active .fab-label { color: var(--clp-primary); }

/* Desktop: emoldura o app como um "device" centralizado */
@media (min-width: 32rem) {
  body { background: #e6edf5; }
  .view { background: var(--clp-bg); }
}

/* ═══════════════════════════════════════════════════════════════
   TELA 6 — CARTEIRINHA DIGITAL (cartão temável: rosa / branca / azul)
   ═══════════════════════════════════════════════════════════════ */

.cart-stage { margin-top: .85rem; }

/* Troca de pet (segmented) */
.pet-switch {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .25rem 0 .85rem;
}
.pet-switch-item {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  color: var(--clp-tx-muted);
  background: var(--clp-surface);
  border: 1.5px solid var(--clp-border);
  border-radius: 999px;
  padding: .4rem .9rem;
  cursor: pointer;
  transition: all var(--t);
}
.pet-switch-item:hover { border-color: var(--clp-primary); color: var(--clp-primary); }
.pet-switch-item.is-active {
  background: var(--clp-primary);
  border-color: var(--clp-primary);
  color: #fff;
}

/* ─── Cartão (layout comum) ──────────────────────────────────── */
.cart-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 1.35rem 1.4rem 1.3rem;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.cart-wm {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.cart-card > *:not(.cart-wm) { position: relative; z-index: 1; }

.cart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.cart-eyebrow {
  display: block;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cart-logo { height: 1.75rem; margin-top: .4rem; display: block; }

.cart-mid { display: flex; align-items: center; gap: .95rem; margin: 1.05rem 0 1.15rem; }
.cart-photo {
  width: 4.7rem; height: 4.7rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .45);
}
.cart-photo img { width: 100%; height: 100%; object-fit: cover; }
.cart-photo svg { width: 2.4rem; height: 2.4rem; }
.cart-names { min-width: 0; }
.cart-petname {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.05;
  margin: 0;
}
.cart-tutor { font-family: 'DM Sans', sans-serif; font-size: .9rem; margin: .2rem 0 0; }

.cart-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.cart-numlabel {
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 .2rem;
}
.cart-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .1em;
  margin: 0;
}
.cart-foot-right { text-align: right; flex-shrink: 0; }
.cart-plan-pill {
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .42rem .9rem;
  border-radius: 10px;
  box-shadow: 0 8px 18px -8px rgba(15, 23, 42, .35);
}
.cart-exp { font-family: 'DM Sans', sans-serif; font-size: .72rem; margin: .45rem 0 0; }

/* STATUS "Ativa" — verde vivo com brilho pulsante (chama atenção) */
.cart-ativa {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #053d22;
  background: linear-gradient(135deg, #2be06b, #10c455);
  padding: .44rem .95rem;
  border-radius: 999px;
  animation: cart-ativa-glow 2s ease-in-out infinite;
}
.cart-ativa .dot { width: 9px; height: 9px; border-radius: 50%; background: #053d22; animation: cart-pulse 1.4s ease-in-out infinite; }
.cart-ativa.is-inativa { color: #475569; background: #e2e8f0; animation: none; }
.cart-ativa.is-inativa .dot { background: #94a3b8; animation: none; }
@keyframes cart-pulse { 50% { opacity: .25; } }
@keyframes cart-ativa-glow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34, 222, 108, .30), 0 8px 18px -6px rgba(16, 196, 85, .55); }
  50%      { box-shadow: 0 0 0 8px rgba(34, 222, 108, .12), 0 10px 24px -6px rgba(16, 196, 85, .8); }
}

/* ─── TEMA: BRANCA ───────────────────────────────────────────── */
.t-branca {
  color: var(--clp-tx);
  background: linear-gradient(160deg, #ffffff 0%, #f5fbfd 100%);
  border: 1.5px solid var(--clp-border);
  box-shadow: 0 18px 40px -20px rgba(15, 23, 42, .35);
}
.t-branca .cart-eyebrow { color: var(--clp-tx-muted); }
.t-branca .cart-logo { filter: none; }
.t-branca .cart-wm { color: var(--clp-primary); opacity: .07; }
.t-branca .cart-photo { border: 3px solid var(--clp-primary-light); background: var(--clp-primary-light); }
.t-branca .cart-photo svg { color: var(--clp-primary); }
.t-branca .cart-petname { color: var(--clp-cyan-deep); }
.t-branca .cart-tutor { color: var(--clp-tx-muted); }
.t-branca .cart-numlabel { color: var(--clp-tx-subtle); }
.t-branca .cart-num { color: var(--clp-cyan-deep); }
.t-branca .cart-exp { color: var(--clp-tx-subtle); }
.t-branca .cart-plan-pill { color: #fff; background: linear-gradient(135deg, var(--clp-secondary), var(--clp-secondary-dark)); }

/* ─── TEMA: AZUL ─────────────────────────────────────────────── */
.t-azul {
  color: #fff;
  background: linear-gradient(140deg, #19c2e3 0%, #0a93cf 45%, #0b63b0 100%);
  border: 1.5px solid transparent;
  box-shadow: 0 20px 42px -20px rgba(7, 60, 110, .85);
}
.t-azul .cart-eyebrow { color: rgba(255, 255, 255, .8); }
.t-azul .cart-logo { filter: brightness(0) invert(1); }
.t-azul .cart-wm { color: #fff; opacity: .10; }
.t-azul .cart-photo { border: 3px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .18); }
.t-azul .cart-photo svg { color: #fff; }
.t-azul .cart-petname { color: #fff; }
.t-azul .cart-tutor { color: rgba(255, 255, 255, .88); }
.t-azul .cart-numlabel { color: rgba(255, 255, 255, .65); }
.t-azul .cart-num { color: #fff; }
.t-azul .cart-exp { color: rgba(255, 255, 255, .78); }
.t-azul .cart-plan-pill { color: #fff; background: linear-gradient(135deg, var(--clp-secondary), var(--clp-secondary-dark)); }

/* ─── TEMA: ROSA ─────────────────────────────────────────────── */
.t-rosa {
  color: #fff;
  background: linear-gradient(140deg, #ff9aa6 0%, #ff6f7e 45%, #e8566a 100%);
  border: 1.5px solid transparent;
  box-shadow: 0 20px 42px -20px rgba(200, 60, 80, .7);
}
.t-rosa .cart-eyebrow { color: rgba(255, 255, 255, .85); }
.t-rosa .cart-logo { filter: brightness(0) invert(1); }
.t-rosa .cart-wm { color: #fff; opacity: .13; }
.t-rosa .cart-photo { border: 3px solid rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .2); }
.t-rosa .cart-photo svg { color: #fff; }
.t-rosa .cart-petname { color: #fff; }
.t-rosa .cart-tutor { color: rgba(255, 255, 255, .9); }
.t-rosa .cart-numlabel { color: rgba(255, 255, 255, .7); }
.t-rosa .cart-num { color: #fff; }
.t-rosa .cart-exp { color: rgba(255, 255, 255, .82); }
.t-rosa .cart-plan-pill { color: var(--clp-secondary-dark); background: #fff; }

/* ─── TEMA: PRETA ────────────────────────────────────────────── */
.t-preta {
  color: #fff;
  background: linear-gradient(140deg, #2b3038 0%, #15181d 55%, #0a0c10 100%);
  border: 1.5px solid #2a2f37;
  box-shadow: 0 20px 42px -20px rgba(0, 0, 0, .85);
}
.t-preta .cart-eyebrow { color: rgba(255, 255, 255, .7); }
.t-preta .cart-logo { filter: brightness(0) invert(1); }
.t-preta .cart-wm { color: #fff; opacity: .08; }
.t-preta .cart-photo { border: 3px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .12); }
.t-preta .cart-photo svg { color: #fff; }
.t-preta .cart-petname { color: #fff; }
.t-preta .cart-tutor { color: rgba(255, 255, 255, .82); }
.t-preta .cart-numlabel { color: rgba(255, 255, 255, .6); }
.t-preta .cart-num { color: #fff; }
.t-preta .cart-exp { color: rgba(255, 255, 255, .72); }
.t-preta .cart-plan-pill { color: #fff; background: linear-gradient(135deg, var(--clp-secondary), var(--clp-secondary-dark)); }

/* ─── Botão "Personalizar" + box (bottom-sheet) de cor ───────── */
.personalizar-wrap { text-align: center; margin-top: 1rem; }
.btn-personalizar {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: .88rem;
  color: var(--clp-tx-muted);
  background: var(--clp-surface);
  border: 1.5px solid var(--clp-border);
  border-radius: 999px;
  padding: .6rem 1.15rem;
  cursor: pointer;
  transition: all var(--t);
}
.btn-personalizar:hover { border-color: var(--clp-primary); color: var(--clp-primary); }
.btn-personalizar svg { width: 1.05rem; height: 1.05rem; }

.cor-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15, 23, 42, .5);
}
.cor-modal[hidden] { display: none; }
.cor-sheet {
  width: 100%; max-width: var(--app-max);
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
  animation: cor-sheet-up .25s ease;
}
@keyframes cor-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cor-sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: var(--clp-border); margin: 0 auto .9rem; }
.cor-sheet-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--clp-tx); margin: 0 0 .25rem; text-align: center; }
.cor-sheet-sub { font-family: 'DM Sans', sans-serif; font-size: .88rem; color: var(--clp-tx-muted); text-align: center; margin: 0 0 1.1rem; }
.cor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.cor-opt {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  background: none; border: 1.5px solid transparent; border-radius: 14px;
  padding: .65rem .2rem; cursor: pointer; transition: all var(--t);
}
.cor-opt:hover { background: var(--clp-surface-2); }
.cor-opt.is-active { border-color: var(--clp-primary); background: var(--clp-primary-light); }
.cor-opt-label { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .78rem; color: var(--clp-tx); }
.cor-done {
  margin-top: 1.15rem; width: 100%;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .95rem;
  color: #fff; background: var(--clp-primary); border: none;
  border-radius: var(--r-full); padding: .8rem 1rem; cursor: pointer;
  transition: background var(--t);
}
.cor-done:hover { background: var(--clp-primary-dark); }

.cor-swatch {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--clp-border);
}
.sw-rosa   { background: linear-gradient(135deg, #ff9aa6, #e8566a); }
.sw-branca { background: linear-gradient(135deg, #ffffff, #e9eef3); }
.sw-azul   { background: linear-gradient(135deg, #19c2e3, #0b63b0); }
.sw-preta  { background: linear-gradient(135deg, #3a3f47, #0a0c10); }

/* ─── Ações abaixo do cartão ─────────────────────────────────── */
.cart-actions {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-top: 1.15rem;
}
.cart-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: .9rem 1.25rem;
  border-radius: var(--r-full);
  border: none;
  background: var(--clp-secondary);
  color: #fff;
  box-shadow: 0 12px 26px -10px rgba(var(--clp-secondary-rgb), .6);
  transition: transform var(--t), filter var(--t);
}
.cart-cta:hover { transform: translateY(-2px); }
.cart-cta:active { transform: translateY(0); filter: brightness(.96); }
.cart-cta svg { width: 1.25rem; height: 1.25rem; }

/* Painel do QR (expande) */
.cart-qr { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.cart-qr.is-open { max-height: 32rem; }
.cart-qr-inner {
  background: #fff;
  border: 1.5px solid var(--clp-border);
  border-radius: var(--r-xl);
  padding: 1.25rem;
  text-align: center;
  box-shadow: var(--sh-sm);
}
.qr-ph { width: 168px; height: 168px; margin: 0 auto .75rem; display: block; border-radius: var(--r-sm); }
.cart-qr-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600; font-size: 1.02rem; letter-spacing: .08em;
  color: var(--clp-cyan-deep); margin: 0;
}
.cart-qr-help { font-family: 'DM Sans', sans-serif; font-size: .85rem; color: var(--clp-tx-muted); margin: .35rem 0 0; }
.cart-qr-demo { font-family: 'DM Sans', sans-serif; font-size: .72rem; color: var(--clp-tx-subtle); margin: .6rem 0 0; }

/* Instalar PWA */
.cart-install {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  padding: .8rem 1.25rem;
  border-radius: var(--r-full);
  background: #fff;
  color: var(--clp-primary);
  border: 1.5px solid var(--clp-primary);
  transition: background var(--t), color var(--t);
}
.cart-install:hover { background: var(--clp-primary-light); }
.cart-install svg { width: 1.15rem; height: 1.15rem; }
.cart-hint { font-family: 'DM Sans', sans-serif; font-size: .82rem; color: var(--clp-tx-muted); text-align: center; margin: .2rem 0 0; line-height: 1.5; }

.cart-micro { font-family: 'DM Sans', sans-serif; font-size: .78rem; color: var(--clp-tx-subtle); text-align: center; margin: 1.1rem 0 0; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════
   TELA 5 — DETALHE DO CREDENCIADO (momento da verdade)
   ═══════════════════════════════════════════════════════════════ */

.cr-screen { padding-bottom: 3.75rem; }   /* folga para a cinta fixa */

.cr-top { display: flex; padding: .25rem 0 .5rem; }
.cr-back {
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--clp-surface);
  border: 1.5px solid var(--clp-border);
  color: var(--clp-tx);
  box-shadow: var(--sh-xs);
  cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
.cr-back:hover { border-color: var(--clp-primary); color: var(--clp-primary); }
.cr-back svg { width: 1.25rem; height: 1.25rem; }

/* Hero */
.cr-hero {
  border-radius: var(--r-2xl);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--clp-border-light);
  box-shadow: var(--sh-sm);
}
.cr-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-hero-ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  background: linear-gradient(135deg, var(--clp-primary), var(--clp-primary-dark));
  color: rgba(255, 255, 255, .7);
}
.cr-hero-ph svg { width: 26%; max-width: 88px; }
.cr-hero-ph-lbl { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .8rem; letter-spacing: .04em; }
.cr-hero-ph.is-neutral { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }

.cr-head { padding: 1rem 0 .25rem; }
.cr-nome {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  letter-spacing: -0.02em;
  color: var(--clp-tx);
  margin: .5rem 0 .15rem;
  line-height: 1.1;
}
.cr-selo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  color: #fff; flex-shrink: 0;
}
.cr-selo svg { width: .85rem; height: .85rem; }
.cr-loc {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: 'DM Sans', sans-serif; font-size: .92rem; color: var(--clp-tx-muted);
  margin: 0;
}
.cr-loc svg { width: .9rem; height: .9rem; color: var(--clp-secondary); }
.cr-rating {
  display: flex; align-items: center; gap: .45rem;
  margin-top: .5rem; font-family: 'DM Sans', sans-serif;
}
.cr-rating .stars-5 { --stars-size: 1.1rem; }
.cr-rating-score { font-weight: 700; color: var(--clp-tx); }
.cr-rating-count { font-size: .82rem; color: var(--clp-tx-subtle); }
.cr-badge-destaque {
  display: inline-block; margin-top: .6rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .72rem;
  background: #fef3c7; color: #b45309; padding: .25rem .7rem; border-radius: 999px;
}

/* Contato */
.cr-contato { display: flex; flex-direction: column; gap: .6rem; margin: 1.1rem 0 .25rem; }
.cr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .95rem;
  padding: .85rem 1.25rem; border-radius: var(--r-full);
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.cr-btn svg { width: 1.15rem; height: 1.15rem; }
.cr-btn:hover { transform: translateY(-2px); }
.cr-btn.is-wa { background: #25D366; color: #fff; box-shadow: 0 10px 24px -10px rgba(37, 211, 102, .6); }
.cr-btn.is-phone { background: #fff; color: var(--clp-primary); border-color: var(--clp-primary); }
.cr-btn.is-phone:hover { background: var(--clp-primary); color: #fff; }
.cr-btn.is-maps { background: #fff; color: var(--clp-tx-muted); border-color: var(--clp-border); }
.cr-btn.is-maps:hover { background: var(--clp-surface-2); border-color: var(--clp-tx-subtle); }
.cr-btn.is-agendar { background: var(--clp-surface-2); color: var(--clp-tx-subtle); border-color: var(--clp-border); cursor: not-allowed; }
.cr-btn.is-agendar:hover { transform: none; }

/* Card de seção */
.cr-card {
  background: var(--clp-surface);
  border: 1px solid var(--clp-border-light);
  border-radius: var(--r-2xl);
  padding: 1.25rem 1.25rem;
  margin-top: 1rem;
  box-shadow: var(--sh-xs);
}
.cr-sec-title {
  display: flex; align-items: center; gap: .55rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.1rem;
  color: var(--clp-tx); margin: 0 0 .9rem;
}
.cr-sec-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 9px;
  background: var(--clp-primary-light); color: var(--clp-primary);
}
.cr-sec-ic svg { width: 1rem; height: 1rem; }
.cr-sobre { font-family: 'DM Sans', sans-serif; color: var(--clp-tx); line-height: 1.6; margin: 0; }

/* Benefício Club */
.cr-benef {
  margin-top: 1.1rem;
  background: linear-gradient(135deg, var(--clp-secondary), #ff9aa3);
  color: #fff; border-radius: var(--r-2xl); padding: 1.4rem 1.35rem;
  box-shadow: var(--sh-pink-glow);
}
.cr-benef-eyebrow {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .9);
}
.cr-benef-pct {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 2.6rem; line-height: 1;
  margin: .35rem 0 0;
}
.cr-benef-pct small { font-size: 1.2rem; font-weight: 600; margin-left: .15rem; }
.cr-benef-sub { font-family: 'DM Sans', sans-serif; font-size: .92rem; color: rgba(255, 255, 255, .95); margin: .15rem 0 0; }
.cr-benef-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.cr-benef-list li { display: flex; align-items: flex-start; gap: .5rem; font-family: 'DM Sans', sans-serif; font-size: .9rem; line-height: 1.45; }
.cr-benef-list svg { width: .95rem; height: .95rem; flex-shrink: 0; margin-top: .15rem; }

/* Serviços */
.cr-serv-list { display: flex; flex-direction: column; gap: .5rem; }
.cr-serv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .9rem; background: var(--clp-surface-2);
  border: 1.5px solid var(--clp-border-light); border-radius: 14px;
}
.cr-serv-nome {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: .92rem; color: var(--clp-tx);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cr-serv-nome svg { width: .95rem; height: .95rem; flex-shrink: 0; color: var(--clp-primary); }
.cr-serv-desc {
  flex-shrink: 0; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .82rem;
  color: var(--clp-secondary-dark); background: var(--clp-secondary-light);
  padding: .25rem .7rem; border-radius: 999px;
}
.cr-serv-desc.is-zero { color: var(--clp-tx-muted); background: var(--clp-border); }

/* Produtos */
.cr-hint-prod { font-family: 'DM Sans', sans-serif; font-size: .8rem; color: var(--clp-tx-muted); margin: 0 0 .9rem; }
.pr-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.pr-tab {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .78rem;
  color: var(--clp-tx-muted); background: var(--clp-surface-2);
  border: 1px solid transparent; border-radius: 999px; padding: .35rem .8rem; cursor: pointer;
  transition: all var(--t);
}
.pr-tab:hover { background: var(--clp-border-light); }
.pr-tab.is-active { background: var(--clp-primary); color: #fff; }
.pr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 26rem) { .pr-grid { grid-template-columns: repeat(3, 1fr); } }
.pr-card { display: block; border: 1px solid var(--clp-border-light); border-radius: 14px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: transform var(--t), box-shadow var(--t); }
.pr-card.is-clickable { cursor: pointer; }
.pr-card.is-clickable:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.pr-img { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(135deg, var(--clp-primary-light), #d4f4fa); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pr-img img { width: 100%; height: 100%; object-fit: cover; }
.pr-ph { display: flex; flex-direction: column; align-items: center; gap: .25rem; color: var(--clp-primary); opacity: .6; }
.pr-ph svg { width: 1.9rem; height: 1.9rem; }
.pr-ph span { font-family: 'DM Sans', sans-serif; font-size: .62rem; font-weight: 600; }
.pr-off {
  position: absolute; top: 6px; left: 6px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .6rem;
  background: var(--clp-secondary); color: #fff; padding: .15rem .45rem; border-radius: 999px;
}
.pr-info { padding: .55rem .6rem; }
.pr-nome {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .82rem; color: var(--clp-tx);
  line-height: 1.25; min-height: 2.05rem;
}
.pr-precos { margin-top: .35rem; }
.pr-cheio { display: block; font-size: .78rem; color: var(--clp-tx-muted); text-decoration: line-through; }
.pr-assoc { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--clp-secondary-dark); line-height: 1.1; }
.pr-assoc-lbl { display: block; font-size: .6rem; font-weight: 600; color: var(--clp-secondary-dark); }
.pr-unico { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1rem; color: var(--clp-tx); }

/* ── Tela 5.1 — Detalhe do produto ── */
.pd-hero {
  position: relative; margin: .25rem 0 1rem;
  background: #fff; border: 1.5px solid var(--clp-border); border-radius: var(--r-2xl);
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pd-hero img { width: 100%; height: 100%; object-fit: contain; }
.pd-hero-ph { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--clp-tx-muted); font-size: .8rem; }
.pd-hero-ph svg { width: 2.6rem; height: 2.6rem; }
.pd-off { position: absolute; top: .8rem; left: .8rem; font-size: .72rem; }
.pd-head { margin-bottom: .9rem; }
.pd-nome { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.4rem; line-height: 1.2; color: var(--clp-tx); margin: .5rem 0 .3rem; }
.pd-loja { display: inline-block; font-size: .82rem; font-weight: 500; color: var(--clp-primary-dark); }
.pd-precos { display: flex; flex-direction: column; gap: .12rem; margin-bottom: 1.1rem; }
.pd-cheio { font-size: .95rem; color: var(--clp-tx-muted); text-decoration: line-through; }
.pd-assoc { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--clp-secondary-dark); }
.pd-assoc-lbl { font-size: .78rem; font-weight: 600; color: var(--clp-secondary-dark); }
.pd-unico { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.9rem; color: var(--clp-tx); }
.pd-contato { margin-bottom: 1.1rem; }

/* Horário */
.cr-hora-status {
  display: inline-flex; align-items: center; gap: .35rem; margin-left: auto;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .78rem;
  padding: .2rem .6rem; border-radius: 999px;
}
.cr-hora-status.is-aberto { background: var(--clp-success-bg); color: var(--clp-success); }
.cr-hora-status.is-fechado { background: var(--clp-error-bg); color: var(--clp-error); }
.cr-hora-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cr-hora-list { display: flex; flex-direction: column; gap: .35rem; font-family: 'DM Sans', sans-serif; font-size: .9rem; }
.cr-hora-row { display: flex; justify-content: space-between; gap: 1rem; }
.cr-hora-dia { color: var(--clp-tx-muted); }
.cr-hora-h { color: var(--clp-tx); font-weight: 500; }
.cr-hora-row.is-hoje .cr-hora-dia, .cr-hora-row.is-hoje .cr-hora-h { color: var(--clp-secondary); font-weight: 600; }

/* Localização */
.cr-endereco p { font-family: 'DM Sans', sans-serif; color: var(--clp-tx); line-height: 1.5; margin: 0 0 .5rem; }
.cr-maps-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .85rem; color: var(--clp-primary);
  text-decoration: none;
}
.cr-maps-link svg { width: .85rem; height: .85rem; }
.cr-map { width: 100%; height: 200px; border: 0; border-radius: var(--r-lg); margin-top: .9rem; box-shadow: inset 0 0 0 1.5px var(--clp-border); }

/* Estado mapeado */
.cr-badge-nao {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--clp-tx-muted); background: var(--clp-border); padding: .3rem .7rem; border-radius: 999px;
}
.cr-badge-nao svg { width: .85rem; height: .85rem; }
.cr-aviso {
  margin-top: 1rem; background: var(--clp-warning-bg);
  border: 1px solid rgba(var(--clp-warning-rgb), .25); border-radius: var(--r-lg);
  padding: .9rem 1.1rem;
}
.cr-aviso p { font-family: 'DM Sans', sans-serif; font-size: .9rem; color: #92600a; line-height: 1.55; margin: 0; }

/* Cinta fixa "Mostrar carteirinha" (acima da barra inferior) */
.cr-cinta {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
  width: 100%; max-width: var(--app-max);
  z-index: 35;
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .9rem;
  background: var(--clp-cyan-deep);
  color: #fff;
  box-shadow: 0 -6px 20px -10px rgba(0, 0, 0, .35);
}
.cr-cinta-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.cr-cinta-txt strong { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .9rem; }
.cr-cinta-txt span { font-family: 'DM Sans', sans-serif; font-size: .76rem; color: rgba(255, 255, 255, .8); }
.cr-cinta-btn {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .85rem;
  background: var(--clp-secondary); color: #fff; text-decoration: none;
  padding: .55rem .9rem; border-radius: 999px;
  box-shadow: 0 8px 18px -8px rgba(var(--clp-secondary-rgb), .7);
}
.cr-cinta-btn svg { width: 1rem; height: 1rem; }

/* ═══════════════════════════════════════════════════════════════
   TELA 1 — SPLASH + LOGIN (autenticação mock)
   ═══════════════════════════════════════════════════════════════ */

/* Modo auth: fundo suave de marca, esconde a barra e remove a folga do rodapé */
body.is-auth { background: linear-gradient(180deg, #e9fbfe 0%, #ffffff 52%); }
body.is-auth .tab-bar { display: none; }
body.is-auth .view { padding-bottom: 1.5rem; background: transparent; }

/* Splash */
.splash {
  min-height: calc(100vh - 2.5rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1rem; cursor: pointer; padding: 2rem 0;
}
.splash-logo { height: 2.2rem; }
.splash-art { width: min(74%, 16rem); height: auto; }
.splash-h1 {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: clamp(1.4rem, 6vw, 1.9rem); line-height: 1.12;
  letter-spacing: -0.02em; color: var(--clp-ink); margin: 0;
}
.splash-load { display: flex; gap: .4rem; margin-top: .5rem; }
.splash-load span {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--clp-primary);
  animation: splash-dot 1.2s ease-in-out infinite;
}
.splash-load span:nth-child(2) { animation-delay: .15s; }
.splash-load span:nth-child(3) { animation-delay: .3s; }
@keyframes splash-dot { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* Login / Boas-vindas */
.login {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .35rem; padding: 1.25rem 0 1rem;
}
.login-logo { height: 2rem; margin-bottom: .25rem; }
.login-art { width: min(46%, 11rem); height: auto; }
.login-h1 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.6rem; color: var(--clp-ink); margin: .4rem 0 0; }
.login-sub { font-family: 'DM Sans', sans-serif; font-size: .92rem; color: var(--clp-tx-muted); line-height: 1.5; margin: .15rem 0 1.1rem; max-width: 22rem; }
.login-form { width: 100%; display: flex; flex-direction: column; gap: .7rem; }
.login-field { display: flex; flex-direction: column; gap: .3rem; text-align: left; }
.login-field span { font-family: 'DM Sans', sans-serif; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--clp-tx-muted); }
.login-field input, .login-field select {
  width: 100%; background: var(--clp-surface);
  border: 1.5px solid var(--clp-border); border-radius: var(--r-lg);
  padding: .75rem .9rem; font-size: .95rem; color: var(--clp-tx);
  outline: none; transition: border-color var(--t), box-shadow var(--t);
}
.login-field input:focus, .login-field select:focus { border-color: var(--clp-primary); box-shadow: 0 0 0 3px rgba(var(--clp-primary-rgb), .12); }
.login-btn {
  margin-top: .35rem; width: 100%;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1rem;
  color: #fff; background: var(--clp-primary); border: none;
  border-radius: var(--r-full); padding: .9rem 1rem; cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(var(--clp-primary-rgb), .6);
  transition: background var(--t), transform var(--t);
}
.login-btn:hover { background: var(--clp-primary-dark); transform: translateY(-1px); }
.login-criar { margin-top: .9rem; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .92rem; color: var(--clp-primary); background: none; border: none; cursor: pointer; }
.login-criar:hover { color: var(--clp-primary-dark); text-decoration: underline; }
.login-demo { font-family: 'DM Sans', sans-serif; font-size: .72rem; color: var(--clp-tx-subtle); margin: 1rem 0 0; }

/* ── Gerenciar pets (gp-*) ─────────────────────────────────────────── */
.gp-screen { padding: 1rem 1rem 6rem; }
.gp-head-txt { margin-top: .25rem; }
.gp-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--clp-ink); margin: .15rem 0 0; }
.gp-count { font-family: 'DM Sans', sans-serif; font-size: .82rem; color: var(--clp-tx-muted); margin: .2rem 0 .9rem; }
.gp-list { display: flex; flex-direction: column; gap: .7rem; }
.gp-pet {
  display: flex; align-items: center; gap: .8rem;
  background: var(--clp-surface); border: 1.5px solid var(--clp-border);
  border-radius: var(--r-lg); padding: .7rem .8rem;
}
.gp-foto-btn { position: relative; flex: 0 0 auto; border: none; background: none; padding: 0; cursor: pointer; line-height: 0; }
.gp-av { width: 52px; height: 52px; border-radius: var(--r-full); object-fit: cover; display: inline-flex; align-items: center; justify-content: center; }
.gp-av.is-ph { background: rgba(var(--clp-primary-rgb), .12); color: var(--clp-primary); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.3rem; }
.gp-foto-cam {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px;
  background: var(--clp-primary); color: #fff; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--clp-surface);
}
.gp-foto-cam svg { width: 12px; height: 12px; }
.gp-pet-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gp-pet-nome { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1rem; color: var(--clp-ink); }
.gp-pet-meta { font-family: 'DM Sans', sans-serif; font-size: .82rem; color: var(--clp-tx-muted); }
.gp-acts { display: flex; gap: .4rem; flex: 0 0 auto; }
.gp-act {
  width: 38px; height: 38px; border-radius: var(--r-lg);
  border: 1.5px solid var(--clp-border); background: var(--clp-surface);
  color: var(--clp-tx-muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
.gp-act svg { width: 18px; height: 18px; }
.gp-act:hover { border-color: var(--clp-primary); color: var(--clp-primary); }
.gp-act.is-danger:hover { border-color: #dc2626; color: #dc2626; }
.gp-add {
  margin-top: 1rem; width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .95rem; color: var(--clp-primary);
  background: rgba(var(--clp-primary-rgb), .06); border: 1.5px dashed rgba(var(--clp-primary-rgb), .5);
  border-radius: var(--r-lg); padding: .85rem 1rem; cursor: pointer; transition: background var(--t);
}
.gp-add svg { width: 18px; height: 18px; }
.gp-add:hover { background: rgba(var(--clp-primary-rgb), .12); }
.gp-limit { margin-top: 1rem; font-family: 'DM Sans', sans-serif; font-size: .82rem; color: var(--clp-tx-muted); text-align: center; }
.gp-vazio { font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--clp-tx-muted); text-align: center; padding: 1.2rem 0; }
.gp-erro { font-family: 'DM Sans', sans-serif; font-size: .9rem; color: #dc2626; text-align: center; padding: 1.2rem 0; }
.gp-form-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--clp-ink); margin: .2rem 0 .8rem; }
.gp-form { width: 100%; }

/* ── Editar dados pessoais (ep-*) ───────────────────────────────────── */
.ep-wrap { padding: 1rem 1rem 6rem; max-width: 30rem; margin: 0 auto; }
.ep-hint { font-family: 'DM Sans', sans-serif; font-size: .75rem; color: var(--clp-tx-muted); margin: -.4rem 0 .2rem; }
.ep-wrap .login-field input:disabled { opacity: .65; cursor: not-allowed; }

/* ── Financeiro (fin-*) ─────────────────────────────────────────────── */
.fin-wrap { padding: 1rem 1rem 6rem; max-width: 32rem; margin: 0 auto; }
.fin-plano { background: var(--clp-surface); border: 1.5px solid var(--clp-border); border-radius: var(--r-lg); padding: 1rem; }
.fin-valor { font-family: 'DM Sans', sans-serif; margin: .5rem 0 0; color: var(--clp-ink); }
.fin-valor b { font-family: 'Fredoka', sans-serif; font-size: 1.5rem; }
.fin-valor span { color: var(--clp-tx-muted); font-size: .9rem; }
.fin-plano-meta { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; }
.fin-meta-lbl { font-family: 'DM Sans', sans-serif; font-size: .8rem; color: var(--clp-tx-muted); }
.fin-sit { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .85rem; padding: .15rem .6rem; border-radius: var(--r-full); background: rgba(0,0,0,.05); color: var(--clp-tx-muted); }
.fin-sit.is-ok { background: rgba(5,150,105,.12); color: #059669; }
.fin-sit.is-bad { background: rgba(220,38,38,.12); color: #dc2626; }
.fin-sec { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--clp-ink); margin: 1.3rem 0 .6rem; }
.fin-lista { display: flex; flex-direction: column; gap: .6rem; }
.fin-fatura { display: flex; align-items: center; justify-content: space-between; gap: .8rem; background: var(--clp-surface); border: 1.5px solid var(--clp-border); border-radius: var(--r-lg); padding: .8rem .9rem; }
.fin-fat-info { display: flex; flex-direction: column; gap: .2rem; }
.fin-fat-venc { font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--clp-ink); }
.fin-fat-status { font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; width: fit-content; }
.fin-fat-status.is-pend { color: var(--clp-tx-muted); }
.fin-fat-status.is-venc { color: #dc2626; }
.fin-fat-acao { display: flex; align-items: center; gap: .7rem; }
.fin-fat-valor { font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--clp-ink); }
.fin-pagar { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .85rem; color: #fff; background: var(--clp-primary); border-radius: var(--r-full); padding: .45rem .9rem; text-decoration: none; }
.fin-pagar:hover { background: var(--clp-primary-dark); }
.fin-vazio { font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--clp-tx-muted); text-align: center; padding: 1.4rem 0; background: var(--clp-surface); border: 1.5px dashed var(--clp-border); border-radius: var(--r-lg); }
.fin-total { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: .8rem; border-top: 1.5px solid var(--clp-border); }
.fin-total span { font-family: 'DM Sans', sans-serif; color: var(--clp-tx-muted); }
.fin-total b { font-family: 'Fredoka', sans-serif; font-size: 1.2rem; color: var(--clp-ink); }

/* Botão Sair (Perfil) */
.btn-sair {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 1rem; width: 100%;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .95rem;
  color: var(--clp-error); background: #fff;
  border: 1.5px solid var(--clp-error-bg); border-radius: var(--r-full);
  padding: .8rem 1rem; cursor: pointer; transition: background var(--t);
}
.btn-sair:hover { background: var(--clp-error-bg); }
.btn-sair svg { width: 1.1rem; height: 1.1rem; }

/* ═══════════════════════════════════════════════════════════════
   TELA 4 — BUSCAR CREDENCIADO (lista + mapa Google)
   ═══════════════════════════════════════════════════════════════ */

/* Barra de busca */
.bs-searchbar { position: relative; margin: .25rem 0 .85rem; }
.bs-search-ic {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
  width: 1.1rem; height: 1.1rem; color: var(--clp-tx-subtle); pointer-events: none;
}
.bs-search-ic svg { width: 100%; height: 100%; }
.bs-search-input {
  width: 100%; background: var(--clp-surface);
  border: 1.5px solid var(--clp-border); border-radius: var(--r-full);
  padding: .8rem 2.7rem; font-size: .95rem; color: var(--clp-tx);
  font-family: 'DM Sans', sans-serif; outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.bs-search-input::placeholder { color: var(--clp-tx-subtle); }
.bs-search-input:focus { border-color: var(--clp-primary); box-shadow: 0 0 0 3px rgba(var(--clp-primary-rgb), .12); }
.bs-search-clear {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  width: 1.85rem; height: 1.85rem; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: var(--clp-border-light); color: var(--clp-tx-muted);
  border-radius: 50%; cursor: pointer; transition: background var(--t);
}
.bs-search-clear svg { width: .95rem; height: .95rem; }
.bs-search-clear:hover { background: var(--clp-border); }

/* Chips de categoria (scroll horizontal, com legenda de cor dos pins) */
.bs-chips {
  display: flex; gap: .45rem; overflow-x: auto;
  padding: .15rem .1rem .55rem; margin: 0 -.1rem; scrollbar-width: none;
}
.bs-chips::-webkit-scrollbar { display: none; }
.bs-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .82rem; color: var(--clp-tx-muted);
  background: var(--clp-surface); border: 1.5px solid var(--clp-border); border-radius: 999px;
  padding: .42rem .85rem; cursor: pointer; white-space: nowrap; transition: all var(--t);
}
.bs-chip:hover { border-color: var(--clp-primary); color: var(--clp-primary); }
.bs-chip.is-active { background: var(--clp-primary); border-color: var(--clp-primary); color: #fff; }
.bs-chip-dot { width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); }
.bs-chip.is-active .bs-chip-dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }

/* Toolbar: contagem + toggle lista/mapa */
.bs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .35rem 0 .9rem; }
.bs-count { font-family: 'DM Sans', sans-serif; font-size: .82rem; font-weight: 600; color: var(--clp-tx-muted); }
.bs-toggle { display: inline-flex; background: var(--clp-surface-2); border: 1.5px solid var(--clp-border); border-radius: 999px; padding: 3px; }
.bs-toggle-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .8rem; color: var(--clp-tx-muted);
  background: none; border: none; border-radius: 999px; padding: .4rem .8rem; cursor: pointer;
  transition: color var(--t), background var(--t), box-shadow var(--t);
}
.bs-toggle-btn svg { width: 1rem; height: 1rem; }
.bs-toggle-btn.is-active { background: var(--clp-surface); color: var(--clp-primary); box-shadow: var(--sh-xs); }

/* Lista de cards */
.bs-list { display: flex; flex-direction: column; gap: .7rem; }
.bs-card {
  display: flex; align-items: center; gap: .85rem; padding: .7rem;
  text-decoration: none; color: inherit;
  background: var(--clp-surface); border: 1px solid var(--clp-border-light); border-radius: var(--r-2xl);
  box-shadow: var(--sh-xs); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.bs-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--clp-border); }
.bs-card:active { transform: translateY(0); }
.bs-thumb { position: relative; flex-shrink: 0; width: 5rem; height: 5rem; border-radius: var(--r-xl); overflow: hidden; }
.bs-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-thumb-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--clp-primary), var(--clp-primary-dark)); color: rgba(255, 255, 255, .75);
}
.bs-thumb-ph.is-neutral { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.bs-thumb-ph svg { width: 55%; }
.bs-promo {
  position: absolute; top: 4px; left: 4px; z-index: 1;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .58rem; line-height: 1;
  background: var(--clp-secondary); color: #fff; padding: .22rem .42rem; border-radius: 999px;
  box-shadow: 0 4px 10px -4px rgba(var(--clp-secondary-rgb), .8);
}
.bs-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .16rem; }
.bs-card-cat {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .66rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--cat-cor, var(--clp-primary));
}
.bs-card-nome {
  display: flex; align-items: center; gap: .3rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--clp-tx); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-selo {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #fff;
}
.bs-selo svg { width: .62rem; height: .62rem; }
.bs-card-meta { display: flex; align-items: center; gap: .7rem; margin-top: .1rem; font-family: 'DM Sans', sans-serif; font-size: .8rem; color: var(--clp-tx-muted); }
.bs-rating { display: inline-flex; align-items: center; gap: .3rem; }
.bs-rating .stars-5 { --stars-size: .82rem; }
.bs-rating b { font-weight: 700; color: var(--clp-tx); }
.bs-dist { display: inline-flex; align-items: center; gap: .2rem; }
.bs-dist svg { width: .8rem; height: .8rem; color: var(--clp-secondary); }
.bs-tag-nao {
  align-self: flex-start; margin-top: .2rem;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .6rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--clp-tx-muted); background: var(--clp-border); padding: .12rem .45rem; border-radius: 999px;
}
.bs-chevron { flex-shrink: 0; color: var(--clp-tx-subtle); }
.bs-chevron svg { width: 1.1rem; height: 1.1rem; }

/* Estado vazio */
.bs-empty {
  text-align: center; padding: 2.5rem 1.5rem;
  background: var(--clp-surface); border: 1.5px dashed var(--clp-border); border-radius: var(--r-2xl);
}
.bs-empty-t { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1rem; color: var(--clp-tx); margin: 0; }
.bs-empty-s { font-family: 'DM Sans', sans-serif; font-size: .88rem; color: var(--clp-tx-muted); margin: .3rem 0 0; }

/* Mapa */
.bs-map-wrap { position: relative; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--sh-sm); border: 1px solid var(--clp-border-light); }
.bs-map { width: 100%; height: 62vh; min-height: 22rem; background: var(--clp-border-light); }
.bs-map-aviso {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: linear-gradient(135deg, #eef4f8, #f8fafc);
}
.bs-map-msg { text-align: center; max-width: 20rem; font-family: 'DM Sans', sans-serif; font-size: .92rem; color: var(--clp-tx-muted); }
.bs-map-msg-t { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--clp-tx); margin: 0; }
.bs-map-msg-s { font-size: .86rem; line-height: 1.5; margin: .4rem 0 .9rem; }
.bs-map-msg-s code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; background: var(--clp-border-light); padding: .05rem .35rem; border-radius: 6px; color: var(--clp-tx); }
.bs-map-acts { display: flex; gap: .5rem; justify-content: center; }
.bs-map-btn {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .88rem; color: #fff;
  background: var(--clp-primary); border: none; border-radius: var(--r-full); padding: .6rem 1.1rem; cursor: pointer;
  transition: background var(--t);
}
.bs-map-btn:hover { background: var(--clp-primary-dark); }
.bs-map-btn.is-ghost { background: #fff; color: var(--clp-tx-muted); border: 1.5px solid var(--clp-border); }
.bs-map-btn.is-ghost:hover { background: var(--clp-surface-2); }
.bs-spin {
  display: inline-block; width: 1.1rem; height: 1.1rem; margin-right: .5rem; vertical-align: -.2rem;
  border: 2.5px solid var(--clp-border); border-top-color: var(--clp-primary); border-radius: 50%;
  animation: bs-spin .7s linear infinite;
}
@keyframes bs-spin { to { transform: rotate(360deg); } }

/* InfoWindow do mapa */
.bs-iw { font-family: 'DM Sans', sans-serif; padding: .15rem .1rem; min-width: 9rem; }
.bs-iw strong { display: block; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .95rem; color: var(--clp-tx); }
.bs-iw span { display: block; font-size: .78rem; color: var(--clp-tx-muted); margin: .1rem 0 .35rem; }
.bs-iw a { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .82rem; color: var(--clp-primary); text-decoration: none; }
.bs-iw a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   TELA 2 — HOME (saudação + pet ativo + cuidados + promoções + atalhos)
   ═══════════════════════════════════════════════════════════════ */

/* Saudação */
.hm-greet { padding: 1.25rem 0 .35rem; }
.hm-ola {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: clamp(1.5rem, 6.5vw, 1.95rem);
  letter-spacing: -0.02em; color: var(--clp-tx); margin: .35rem 0 0; line-height: 1.1;
}
.hm-greet-sub { font-family: 'DM Sans', sans-serif; color: var(--clp-tx-muted); font-size: .92rem; margin: .25rem 0 0; }

/* Seletor de pet (avatares) */
.hm-pets { display: flex; gap: .5rem; padding: .55rem 0 .15rem; flex-wrap: wrap; }
.hm-pet-btn {
  width: 2.9rem; height: 2.9rem; padding: 0; border-radius: 50%;
  border: 2.5px solid transparent; background: none; cursor: pointer; overflow: hidden;
  transition: border-color var(--t), transform var(--t);
}
.hm-pet-btn:active { transform: scale(.95); }
.hm-pet-btn.is-active { border-color: var(--clp-primary); }
.hm-pet-av { width: 100%; height: 100%; border-radius: 50%; display: block; }
.hm-pet-av.is-img { object-fit: cover; }
.hm-pet-av.is-ph {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, var(--clp-primary), var(--clp-primary-dark));
}

/* Card do pet ativo */
.hm-petcard {
  display: flex; align-items: center; gap: .95rem; margin-top: .55rem;
  background: var(--clp-surface); border: 1px solid var(--clp-border-light); border-radius: var(--r-2xl);
  padding: 1rem; box-shadow: var(--sh-sm); text-decoration: none; color: inherit;
  transition: transform var(--t), box-shadow var(--t);
}
.hm-petcard:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.hm-petcard-go { flex-shrink: 0; color: var(--clp-tx-subtle); align-self: center; }
.hm-petcard-go svg { width: 1.1rem; height: 1.1rem; }
.hm-av { width: 4.5rem; height: 4.5rem; flex-shrink: 0; border-radius: 50%; display: block; box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .4); }
.hm-av.is-img { object-fit: cover; }
.hm-av.is-ph {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.6rem; color: #fff;
  background: linear-gradient(135deg, var(--clp-primary), var(--clp-primary-dark));
}
.hm-petinfo { flex: 1; min-width: 0; }
.hm-petlabel { font-family: 'DM Sans', sans-serif; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--clp-tx-subtle); }
.hm-petnome { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.35rem; color: var(--clp-cyan-deep); line-height: 1.1; margin: .1rem 0 .15rem; }
.hm-petmeta { font-family: 'DM Sans', sans-serif; font-size: .82rem; color: var(--clp-tx-muted); margin: 0; line-height: 1.3; }
.hm-peso { flex-shrink: 0; text-align: right; }
.hm-peso-num { display: flex; align-items: baseline; justify-content: flex-end; gap: .15rem; }
.hm-peso-num b { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--clp-tx); }
.hm-peso-num span { font-family: 'DM Sans', sans-serif; font-size: .78rem; color: var(--clp-tx-muted); }
.hm-peso-graf { color: var(--clp-primary); margin-top: .1rem; }
.hm-spark { width: 6.5rem; height: 2rem; display: block; margin-left: auto; }
.hm-peso-delta { display: block; font-family: 'DM Sans', sans-serif; font-size: .68rem; font-weight: 600; color: var(--clp-tx-subtle); margin-top: .05rem; }

/* Seções */
.hm-sec { margin-top: 1.4rem; }
.hm-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.hm-sec-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--clp-tx); margin: 0; }
.hm-sec-link { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .82rem; color: var(--clp-primary); text-decoration: none; flex-shrink: 0; }
.hm-sec-link:hover { color: var(--clp-primary-dark); }

/* Próximos cuidados (scroll horizontal) */
.hm-cuid-row { display: flex; gap: .6rem; overflow-x: auto; padding: .1rem .1rem .4rem; margin: 0 -.1rem; scrollbar-width: none; }
.hm-cuid-row::-webkit-scrollbar { display: none; }
.hm-cuid {
  flex: 0 0 10.5rem; display: flex; flex-direction: column; gap: .35rem;
  background: var(--clp-surface); border: 1px solid var(--clp-border-light); border-radius: var(--r-xl);
  padding: .85rem .9rem; box-shadow: var(--sh-xs);
}
.hm-cuid-ic { width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--clp-primary-light); color: var(--clp-primary); }
.hm-cuid-ic svg { width: 1.1rem; height: 1.1rem; }
.hm-cuid.is-vacina .hm-cuid-ic { background: var(--clp-secondary-light); color: var(--clp-secondary-dark); }
.hm-cuid.is-banho .hm-cuid-ic { background: var(--clp-primary-light); color: var(--clp-primary-dark); }
.hm-cuid.is-vermifugo .hm-cuid-ic { background: var(--clp-warning-bg); color: var(--clp-warning); }
.hm-cuid.is-consulta .hm-cuid-ic { background: var(--clp-info-bg); color: var(--clp-info); }
.hm-cuid-tipo { font-family: 'DM Sans', sans-serif; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--clp-tx-subtle); margin-top: .15rem; }
.hm-cuid-tit { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .92rem; color: var(--clp-tx); line-height: 1.2; }
.hm-cuid-quando { font-family: 'DM Sans', sans-serif; font-size: .78rem; color: var(--clp-tx-muted); }
.hm-cuid-quando.is-urgente { color: var(--clp-secondary-dark); font-weight: 700; }
.hm-cuid-local { display: inline-flex; align-items: center; gap: .2rem; font-family: 'DM Sans', sans-serif; font-size: .7rem; color: var(--clp-tx-subtle); }
.hm-cuid-local svg { width: .75rem; height: .75rem; color: var(--clp-secondary); flex-shrink: 0; }
.hm-cuid-vazio { font-family: 'DM Sans', sans-serif; font-size: .88rem; color: var(--clp-tx-muted); background: var(--clp-surface-2); border: 1.5px dashed var(--clp-border); border-radius: var(--r-xl); padding: 1rem; margin: 0; text-align: center; }

/* Promoções (scroll horizontal) */
.hm-promo-row { display: flex; gap: .7rem; overflow-x: auto; padding: .1rem .1rem .4rem; margin: 0 -.1rem; scrollbar-width: none; }
.hm-promo-row::-webkit-scrollbar { display: none; }
.hm-promo { flex: 0 0 9rem; text-decoration: none; color: inherit; }
.hm-promo-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; display: block; box-shadow: var(--sh-xs); }
.hm-promo-img { width: 100%; height: 100%; object-fit: cover; }
.hm-promo-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--clp-primary), var(--clp-primary-dark)); color: rgba(255, 255, 255, .75); }
.hm-promo-ph svg { width: 42%; }
.hm-promo-off {
  position: absolute; left: 6px; bottom: 6px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .62rem; color: #fff;
  background: var(--clp-secondary); padding: .2rem .5rem; border-radius: 999px;
  box-shadow: 0 4px 10px -4px rgba(var(--clp-secondary-rgb), .8);
}
.hm-promo-cat { display: block; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--clp-primary-dark); margin: .45rem 0 .1rem; }
.hm-promo-nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .88rem; color: var(--clp-tx); line-height: 1.2; }

/* Atalhos */
.hm-atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.hm-atalho {
  display: flex; flex-direction: column; align-items: center; gap: .45rem; text-decoration: none;
  background: var(--clp-surface); border: 1px solid var(--clp-border-light); border-radius: var(--r-xl);
  padding: .9rem .4rem; box-shadow: var(--sh-xs); transition: transform var(--t), box-shadow var(--t);
}
.hm-atalho:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.hm-atalho-ic {
  width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--clp-primary-light); color: var(--clp-primary);
}
.hm-atalho-ic svg { width: 1.3rem; height: 1.3rem; }
.hm-atalho-lbl { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .72rem; color: var(--clp-tx); }

/* Card editorial Bold Pop */
.hm-edit {
  margin-top: 1.4rem; position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--clp-cyan-deep) 0%, #0a5566 100%);
  border-radius: var(--r-2xl); padding: 1.5rem 1.4rem; color: #fff;
  box-shadow: 0 18px 38px -20px rgba(0, 56, 69, .8);
}
.hm-edit-eyebrow {
  display: inline-block; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--clp-cyan-deep);
  background: #fff; padding: .25rem .7rem; border-radius: 999px;
}
.hm-edit-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.15; margin: .65rem 0 0; }
.hm-edit-txt { font-family: 'DM Sans', sans-serif; font-size: .9rem; color: rgba(255, 255, 255, .9); line-height: 1.5; margin: .45rem 0 0; }
.hm-edit-cta {
  display: inline-flex; align-items: center; gap: .15rem; margin-top: 1rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .9rem; color: #fff; text-decoration: none;
  background: var(--clp-secondary); padding: .6rem 1.1rem; border-radius: var(--r-full);
  box-shadow: 0 10px 22px -10px rgba(var(--clp-secondary-rgb), .8);
}
.hm-edit-cta svg { width: 1rem; height: 1rem; }

/* ═══════════════════════════════════════════════════════════════
   TELA 3 — PERFIL DO PET (ficha: hero, dados, peso, abas)
   ═══════════════════════════════════════════════════════════════ */

.pt-screen { padding-bottom: 1rem; }
.pt-top { display: flex; padding: .25rem 0 .5rem; }
.pt-back {
  width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--clp-surface); border: 1.5px solid var(--clp-border);
  color: var(--clp-tx); box-shadow: var(--sh-xs); cursor: pointer; transition: border-color var(--t), color var(--t);
}
.pt-back:hover { border-color: var(--clp-primary); color: var(--clp-primary); }
.pt-back svg { width: 1.25rem; height: 1.25rem; }

/* Hero */
.pt-hero { border-radius: var(--r-2xl); overflow: hidden; aspect-ratio: 16 / 11; background: var(--clp-border-light); box-shadow: var(--sh-sm); }
.pt-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-hero-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--clp-primary), var(--clp-primary-dark)); color: rgba(255, 255, 255, .7); }
.pt-hero-ph svg { width: 28%; max-width: 90px; }

.pt-head { padding: 1rem 0 .25rem; }
.pt-nome { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: clamp(1.5rem, 6vw, 1.9rem); letter-spacing: -0.02em; color: var(--clp-tx); margin: .5rem 0 .1rem; line-height: 1.1; }
.pt-meta { font-family: 'DM Sans', sans-serif; font-size: .92rem; color: var(--clp-tx-muted); margin: 0; }

/* Stats */
.pt-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: 1.1rem; }
.pt-stat { background: var(--clp-surface); border: 1px solid var(--clp-border-light); border-radius: var(--r-lg); padding: .7rem .85rem; box-shadow: var(--sh-xs); }
.pt-stat-lbl { display: block; font-family: 'DM Sans', sans-serif; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--clp-tx-subtle); }
.pt-stat-val { display: block; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1rem; color: var(--clp-tx); margin-top: .12rem; }

/* Card genérico + gráfico de peso */
.pt-card { background: var(--clp-surface); border: 1px solid var(--clp-border-light); border-radius: var(--r-2xl); padding: 1.1rem 1.15rem; margin-top: 1rem; box-shadow: var(--sh-xs); }
.pt-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.pt-card-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--clp-tx); margin: 0; }
.pt-card-now { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--clp-primary); }
.pt-graf { color: var(--clp-primary); }
.pt-spark { width: 100%; height: 64px; display: block; }
.pt-spark-area { fill: rgba(var(--clp-primary-rgb), .12); stroke: none; }
.pt-graf-eixo { display: flex; justify-content: space-between; margin-top: .35rem; font-family: 'DM Sans', sans-serif; font-size: .64rem; color: var(--clp-tx-subtle); }

/* Abas */
.pt-tabs { display: flex; gap: .25rem; background: var(--clp-surface-2); border: 1.5px solid var(--clp-border); border-radius: 999px; padding: 3px; margin: 1.2rem 0 1rem; }
.pt-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .76rem; color: var(--clp-tx-muted);
  background: none; border: none; border-radius: 999px; padding: .5rem .2rem; cursor: pointer; white-space: nowrap;
  transition: color var(--t), background var(--t), box-shadow var(--t);
}
.pt-tab svg { width: .95rem; height: .95rem; flex-shrink: 0; }
.pt-tab.is-active { background: var(--clp-surface); color: var(--clp-primary); box-shadow: var(--sh-xs); }

/* Aba Saúde */
.pt-saude { display: flex; flex-direction: column; gap: .6rem; }
.pt-saude-row { display: flex; align-items: center; gap: .7rem; background: var(--clp-surface); border: 1px solid var(--clp-border-light); border-radius: var(--r-lg); padding: .75rem .85rem; box-shadow: var(--sh-xs); }
.pt-saude-ic { width: 2.1rem; height: 2.1rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.pt-saude-ic.is-ok { background: var(--clp-success-bg); color: var(--clp-success); }
.pt-saude-ic.is-alerta { background: var(--clp-warning-bg); color: var(--clp-warning); }
.pt-saude-ic svg { width: 1.05rem; height: 1.05rem; }
.pt-saude-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-saude-txt strong { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .92rem; color: var(--clp-tx); }
.pt-saude-txt span { font-family: 'DM Sans', sans-serif; font-size: .78rem; color: var(--clp-tx-muted); }
.pt-status { flex-shrink: 0; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .72rem; padding: .25rem .6rem; border-radius: 999px; }
.pt-status.is-ok { background: var(--clp-success-bg); color: var(--clp-success); }
.pt-status.is-alerta { background: var(--clp-warning-bg); color: var(--clp-warning); }

/* Aba Vacinas (timeline) */
.pt-timeline { list-style: none; margin: 0; padding: .2rem 0 0; }
.pt-tl-item { position: relative; display: flex; gap: .8rem; padding: 0 0 1.1rem; }
.pt-tl-item:not(:last-child)::before { content: ""; position: absolute; left: .62rem; top: 1.5rem; bottom: -.1rem; width: 2px; background: var(--clp-border); }
.pt-tl-dot { width: 1.3rem; height: 1.3rem; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1; }
.pt-tl-item.is-tomada .pt-tl-dot { background: var(--clp-success); color: #fff; }
.pt-tl-item.is-pendente .pt-tl-dot { background: #fff; border: 2px solid var(--clp-secondary); }
.pt-tl-dot svg { width: .72rem; height: .72rem; }
.pt-tl-body { display: flex; flex-direction: column; padding-top: .05rem; }
.pt-tl-nome { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .92rem; color: var(--clp-tx); }
.pt-tl-quando { font-family: 'DM Sans', sans-serif; font-size: .78rem; color: var(--clp-tx-muted); }
.pt-tl-item.is-pendente .pt-tl-quando { color: var(--clp-secondary-dark); font-weight: 600; }

/* Aba Histórico */
.pt-econ { background: linear-gradient(135deg, var(--clp-secondary), #ff9aa3); color: #fff; border-radius: var(--r-2xl); padding: 1.1rem 1.2rem; margin-bottom: .9rem; text-align: center; box-shadow: var(--sh-pink-glow); }
.pt-econ-lbl { display: block; font-family: 'DM Sans', sans-serif; font-size: .8rem; color: rgba(255, 255, 255, .9); }
.pt-econ-val { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 2rem; line-height: 1.1; }
.pt-econ-sub { display: block; font-family: 'DM Sans', sans-serif; font-size: .76rem; color: rgba(255, 255, 255, .9); }
.pt-hist { display: flex; flex-direction: column; gap: .6rem; }
.pt-hist-row { background: var(--clp-surface); border: 1px solid var(--clp-border-light); border-radius: var(--r-lg); padding: .8rem .9rem; box-shadow: var(--sh-xs); }
.pt-hist-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pt-hist-serv { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .95rem; color: var(--clp-tx); }
.pt-hist-val { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .95rem; color: var(--clp-tx); flex-shrink: 0; }
.pt-hist-bot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .3rem; }
.pt-hist-cred { display: inline-flex; align-items: center; gap: .25rem; font-family: 'DM Sans', sans-serif; font-size: .78rem; color: var(--clp-tx-muted); min-width: 0; }
.pt-hist-cred svg { width: .8rem; height: .8rem; color: var(--clp-secondary); flex-shrink: 0; }
.pt-hist-data { font-family: 'DM Sans', sans-serif; font-size: .76rem; color: var(--clp-tx-subtle); flex-shrink: 0; }
.pt-hist-econ { display: inline-block; margin-top: .55rem; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .72rem; color: var(--clp-success); background: var(--clp-success-bg); padding: .2rem .6rem; border-radius: 999px; }

/* Aba Fotos */
.pt-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pt-foto { aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; background: var(--clp-border-light); }
.pt-foto img { width: 100%; height: 100%; object-fit: cover; }

.pt-vazio { font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--clp-tx-muted); text-align: center; padding: 1.6rem 1rem; background: var(--clp-surface-2); border: 1.5px dashed var(--clp-border); border-radius: var(--r-xl); margin: .2rem 0 0; }

/* Botão flutuante "Adicionar" (futuro — desabilitado) */
.pt-fab-wrap {
  position: fixed; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--app-max); z-index: 38;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 1rem);
  display: flex; justify-content: flex-end; padding: 0 1.125rem; pointer-events: none;
}
.pt-fab {
  pointer-events: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .9rem; color: var(--clp-tx-muted);
  background: var(--clp-surface); border: 1.5px solid var(--clp-border); border-radius: var(--r-full);
  padding: .7rem 1.15rem; box-shadow: var(--sh-md); cursor: not-allowed;
}
.pt-fab svg { width: 1.15rem; height: 1.15rem; }

/* ═══════════════════════════════════════════════════════════════
   TELA 7 — SAÚDE E CONTEÚDO (destaque + feed + calendário)
   ═══════════════════════════════════════════════════════════════ */

/* Card editorial em destaque (ciano-deep suave — mesmo padrão do editorial da Home) */
.sd-feat {
  position: relative; margin-top: .25rem; overflow: hidden;
  background: linear-gradient(140deg, var(--clp-cyan-deep) 0%, #0a5566 100%);
  border-radius: var(--r-2xl); padding: 1.5rem 1.4rem; color: #fff;
  box-shadow: 0 18px 38px -20px rgba(0, 56, 69, .8);
}
.sd-feat-eyebrow { display: inline-block; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--clp-cyan-deep); background: #fff; padding: .25rem .7rem; border-radius: 999px; }
.sd-feat-cat { display: inline-block; margin-left: .45rem; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.sd-feat-tit { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.3rem; color: #fff; line-height: 1.15; margin: .7rem 0 0; }
.sd-feat-resumo { font-family: 'DM Sans', sans-serif; font-size: .9rem; color: rgba(255, 255, 255, .9); line-height: 1.5; margin: .45rem 0 0; }
.sd-feat-tempo { display: inline-flex; align-items: center; gap: .3rem; margin-top: .85rem; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .78rem; color: #fff; }
.sd-feat-tempo svg { width: .9rem; height: .9rem; }

/* Cabeçalho da seção de dicas (abaixo do calendário) */
.sd-feed-head { margin-top: 1.4rem; margin-bottom: .25rem; }
.sd-sec-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--clp-tx); margin: 0; }

/* Feed de dicas (cards horizontais) */
.sd-feed { display: flex; flex-direction: column; gap: .7rem; margin-top: .2rem; }
.sd-art { display: flex; gap: .85rem; background: var(--clp-surface); border: 1px solid var(--clp-border-light); border-radius: var(--r-2xl); padding: .7rem; box-shadow: var(--sh-xs); }
.sd-art-thumb { flex-shrink: 0; width: 5rem; height: 5rem; border-radius: var(--r-xl); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .85); background: linear-gradient(135deg, var(--cat-cor, var(--clp-primary)), rgba(15, 23, 42, .25)); }
.sd-art-thumb svg { width: 52%; }
.sd-art-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.sd-art-cat { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cat-cor, var(--clp-primary)); }
.sd-art-tit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .98rem; color: var(--clp-tx); line-height: 1.2; margin: .05rem 0; }
.sd-art-resumo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: 'DM Sans', sans-serif; font-size: .8rem; color: var(--clp-tx-muted); line-height: 1.4; margin: 0; }
.sd-art-tempo { display: inline-flex; align-items: center; gap: .25rem; margin-top: .35rem; font-family: 'DM Sans', sans-serif; font-size: .72rem; color: var(--clp-tx-subtle); }
.sd-art-tempo svg { width: .8rem; height: .8rem; }
.sd-feed-vazio { font-family: 'DM Sans', sans-serif; font-size: .88rem; color: var(--clp-tx-muted); text-align: center; padding: 1.4rem 1rem; background: var(--clp-surface-2); border: 1.5px dashed var(--clp-border); border-radius: var(--r-xl); margin: 0; }

/* Cards de dica como links (sem aparência de link) */
a.sd-art { text-decoration: none; color: inherit; transition: box-shadow var(--t), transform var(--t); }
a.sd-art:active { transform: scale(.992); }
a.sd-feat { display: block; text-decoration: none; transition: box-shadow var(--t), transform var(--t); }
a.sd-feat:active { transform: scale(.995); }

/* ─── Página de leitura do artigo (#/conteudo/:id) ─────────────────── */
.cd-top { padding: 1.25rem 0 .25rem; }
.cd-top .back { flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--clp-surface); border: 1.5px solid var(--clp-border); color: var(--clp-tx); box-shadow: var(--sh-xs); transition: border-color var(--t), color var(--t); }
.cd-top .back:hover { border-color: var(--clp-primary); color: var(--clp-primary); }
.cd-top .back svg { width: 1.25rem; height: 1.25rem; }
.cd-art { margin-top: .25rem; }
.cd-hero { height: 9.5rem; border-radius: var(--r-2xl); overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cat-cor, var(--clp-primary)), rgba(15, 23, 42, .3)); color: rgba(255, 255, 255, .9); }
.cd-hero-ph svg { width: 4.5rem; height: 4.5rem; }
.cd-hero-img { width: 100%; height: 100%; object-fit: cover; }
.cd-cat { display: inline-block; margin-top: 1rem; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--cat-cor, var(--clp-primary)); }
.cd-tit { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.55rem; line-height: 1.15; color: var(--clp-tx); margin: .3rem 0 0; }
.cd-meta { display: inline-flex; align-items: center; gap: .3rem; margin-top: .55rem; font-family: 'DM Sans', sans-serif; font-size: .8rem; color: var(--clp-tx-subtle); }
.cd-meta svg { width: .9rem; height: .9rem; }
.cd-body { margin-top: 1.1rem; }
.cd-body p { font-family: 'DM Sans', sans-serif; font-size: .98rem; line-height: 1.7; color: var(--clp-tx); margin: 0 0 1rem; }
.cd-body p:first-child { font-size: 1.06rem; }

/* Calendário do mês */
.sd-cal { margin-top: 1.4rem; background: var(--clp-surface); border: 1px solid var(--clp-border-light); border-radius: var(--r-2xl); padding: 1.15rem; box-shadow: var(--sh-xs); }
.sd-cal-head { margin-bottom: .8rem; }
.sd-cal-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--clp-tx); margin: 0; text-transform: capitalize; }
.sd-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .15rem; text-align: center; }
.sd-cal-dow { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .66rem; color: var(--clp-tx-subtle); padding: .2rem 0; }
.sd-cal-day { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-family: 'DM Sans', sans-serif; font-size: .8rem; color: var(--clp-tx); border-radius: 50%; }
.sd-cal-day.is-empty { visibility: hidden; }
.sd-cal-day.is-hoje { background: var(--clp-primary); color: #fff; font-weight: 700; }
.sd-cal-day.is-lembrete::after { content: ""; position: absolute; bottom: 13%; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--clp-secondary); }
.sd-cal-day.is-hoje.is-lembrete::after { background: #fff; }
.sd-cal-list { margin-top: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.sd-lemb { display: flex; align-items: center; gap: .7rem; background: var(--clp-surface-2); border: 1px solid var(--clp-border-light); border-radius: var(--r-lg); padding: .6rem .75rem; }
.sd-lemb-data { flex-shrink: 0; width: 2.6rem; text-align: center; display: flex; flex-direction: column; line-height: 1.05; }
.sd-lemb-data b { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--clp-secondary-dark); }
.sd-lemb-data span { font-family: 'DM Sans', sans-serif; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--clp-tx-subtle); }
.sd-lemb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sd-lemb-body strong { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .9rem; color: var(--clp-tx); }
.sd-lemb-body span { font-family: 'DM Sans', sans-serif; font-size: .76rem; color: var(--clp-tx-muted); }
.sd-lemb-ic { width: 2rem; height: 2rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--clp-primary-light); color: var(--clp-primary); }
.sd-lemb-ic svg { width: 1rem; height: 1rem; }
.sd-lemb-ic.is-vacina { background: var(--clp-secondary-light); color: var(--clp-secondary-dark); }
.sd-lemb-ic.is-banho { background: var(--clp-primary-light); color: var(--clp-primary-dark); }
.sd-lemb-ic.is-vermifugo { background: var(--clp-warning-bg); color: var(--clp-warning); }
.sd-lemb-ic.is-consulta { background: var(--clp-info-bg); color: var(--clp-info); }
.sd-cal-vazio { font-family: 'DM Sans', sans-serif; font-size: .88rem; color: var(--clp-tx-muted); text-align: center; padding: 1rem; margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   TELA 8 — NOTIFICAÇÕES (feed agrupado + filtros + não lidas)
   ═══════════════════════════════════════════════════════════════ */

.nt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .25rem 0 .65rem; }
.nt-count { font-family: 'DM Sans', sans-serif; font-size: .82rem; font-weight: 600; color: var(--clp-tx-muted); }
.nt-marcar { display: inline-flex; align-items: center; gap: .35rem; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .8rem; color: var(--clp-primary); background: none; border: none; cursor: pointer; padding: .2rem 0; transition: color var(--t); }
.nt-marcar svg { width: .95rem; height: .95rem; }
.nt-marcar:hover:not(:disabled) { color: var(--clp-primary-dark); }
.nt-marcar:disabled { color: var(--clp-tx-subtle); cursor: default; }

.nt-feed { display: flex; flex-direction: column; gap: 1.1rem; margin-top: .3rem; }
.nt-group { display: flex; flex-direction: column; gap: .5rem; }
.nt-group-title { font-family: 'DM Sans', sans-serif; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--clp-tx-subtle); margin: 0 0 .1rem; }

.nt-item {
  position: relative; display: flex; align-items: flex-start; gap: .8rem; padding: .85rem .9rem;
  background: var(--clp-surface); border: 1px solid var(--clp-border-light); border-radius: var(--r-xl);
  box-shadow: var(--sh-xs); text-decoration: none; color: inherit;
  transition: transform var(--t), box-shadow var(--t);
}
a.nt-item:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.nt-item.is-nova { border-color: rgba(var(--clp-primary-rgb), .28); }
.nt-ic { width: 2.4rem; height: 2.4rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.nt-ic svg { width: 1.2rem; height: 1.2rem; }
.nt-ic.is-lembrete { background: var(--clp-primary-light); color: var(--clp-primary); }
.nt-ic.is-promocao { background: var(--clp-secondary-light); color: var(--clp-secondary-dark); }
.nt-ic.is-conta { background: var(--clp-info-bg); color: var(--clp-info); }
.nt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; padding-right: .8rem; }
.nt-tit { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .95rem; color: var(--clp-tx); line-height: 1.2; }
.nt-item.is-lida .nt-tit { color: var(--clp-tx-muted); }
.nt-txt { font-family: 'DM Sans', sans-serif; font-size: .82rem; color: var(--clp-tx-muted); line-height: 1.4; }
.nt-time { font-family: 'DM Sans', sans-serif; font-size: .72rem; color: var(--clp-tx-subtle); margin-top: .15rem; }
.nt-dot { position: absolute; top: .9rem; right: .9rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--clp-secondary); box-shadow: 0 0 0 3px rgba(var(--clp-secondary-rgb), .15); }
.nt-empty { font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--clp-tx-muted); text-align: center; padding: 2rem 1rem; background: var(--clp-surface-2); border: 1.5px dashed var(--clp-border); border-radius: var(--r-xl); margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   TELA 9 — PERFIL DO TUTOR (plano + pets + configurações)
   ═══════════════════════════════════════════════════════════════ */

.pf-head { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 0 1rem; }
.pf-av { width: 4.5rem; height: 4.5rem; flex-shrink: 0; border-radius: 50%; display: block; box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .4); }
.pf-av.is-img { object-fit: cover; }
.pf-av.is-ph { display: flex; align-items: center; justify-content: center; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, var(--clp-secondary), var(--clp-secondary-dark)); }
.pf-head-txt { min-width: 0; }
.pf-nome { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.5rem; color: var(--clp-cyan-deep); margin: 0; line-height: 1.1; }
.pf-sub { display: inline-flex; align-items: center; gap: .25rem; font-family: 'DM Sans', sans-serif; font-size: .85rem; color: var(--clp-tx-muted); margin: .25rem 0 0; }
.pf-sub svg { width: .85rem; height: .85rem; color: var(--clp-secondary); }
.pf-num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; letter-spacing: .06em; color: var(--clp-tx-subtle); margin: .2rem 0 0; }

/* Card do plano */
.pf-plano { background: var(--clp-surface); border: 1px solid var(--clp-border-light); border-radius: var(--r-2xl); padding: 1.25rem; box-shadow: var(--sh-sm); }
.pf-plano-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pf-plano-link { display: inline-flex; align-items: center; gap: .3rem; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .82rem; color: var(--clp-primary); text-decoration: none; }
.pf-plano-link svg { width: .95rem; height: .95rem; }
.pf-plano-link:hover { color: var(--clp-primary-dark); }
.pf-plano-valor { display: flex; align-items: baseline; gap: .25rem; margin: .9rem 0 0; }
.pf-plano-valor b { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.9rem; color: var(--clp-tx); }
.pf-plano-valor span { font-family: 'DM Sans', sans-serif; font-size: .85rem; color: var(--clp-tx-muted); }
.pf-plano-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--clp-border-light); }
.pf-meta-lbl { display: block; font-family: 'DM Sans', sans-serif; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--clp-tx-subtle); }
.pf-meta-val { display: block; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .92rem; color: var(--clp-tx); margin-top: .15rem; }
.pf-meta-val.pf-status { text-transform: capitalize; }
.pf-meta-val.pf-status.is-ativa { color: var(--clp-success); }

/* Lista de pets */
.pf-sec { margin-top: 1.4rem; }
.pf-sec-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--clp-tx); margin: 0 0 .7rem; }
.pf-pets { display: flex; flex-direction: column; gap: .6rem; }
.pf-pet { display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem; background: var(--clp-surface); border: 1px solid var(--clp-border-light); border-radius: var(--r-xl); box-shadow: var(--sh-xs); text-decoration: none; color: inherit; transition: transform var(--t), box-shadow var(--t); }
.pf-pet:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.pf-pet-av { width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 50%; display: block; }
.pf-pet-av.is-img { object-fit: cover; }
.pf-pet-av.is-ph { display: flex; align-items: center; justify-content: center; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, var(--clp-primary), var(--clp-primary-dark)); }
.pf-pet-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-pet-nome { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .98rem; color: var(--clp-tx); }
.pf-pet-raca { font-family: 'DM Sans', sans-serif; font-size: .78rem; color: var(--clp-tx-muted); }
.pf-pet-go { color: var(--clp-tx-subtle); flex-shrink: 0; }
.pf-pet-go svg { width: 1.05rem; height: 1.05rem; }

/* Blocos de configuração */
.pf-bloco { margin-top: 1.4rem; }
.pf-bloco-title { font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--clp-tx-subtle); margin: 0 0 .55rem; padding-left: .15rem; }
.pf-rows { background: var(--clp-surface); border: 1px solid var(--clp-border-light); border-radius: var(--r-2xl); box-shadow: var(--sh-xs); overflow: hidden; }
.pf-row { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .85rem 1rem; background: none; border: none; border-bottom: 1px solid var(--clp-border-light); text-align: left; text-decoration: none; color: inherit; font-family: inherit; cursor: pointer; transition: background var(--t); }
.pf-row:last-child { border-bottom: none; }
a.pf-row:hover, label.pf-row:hover { background: var(--clp-surface-2); }
.pf-row[disabled] { cursor: default; }
.pf-row[disabled]:hover { background: none; }
.pf-row-ic { width: 2.1rem; height: 2.1rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--clp-surface-2); color: var(--clp-tx-muted); }
.pf-row-ic svg { width: 1.1rem; height: 1.1rem; }
.pf-row-label { flex: 1; min-width: 0; font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: .92rem; color: var(--clp-tx); }
.pf-row[disabled] .pf-row-label { color: var(--clp-tx-muted); }
.pf-row-go { color: var(--clp-tx-subtle); flex-shrink: 0; }
.pf-row-go svg { width: 1rem; height: 1rem; }
.pf-row-val { font-family: 'DM Sans', sans-serif; font-size: .85rem; color: var(--clp-tx-muted); flex-shrink: 0; }
.pf-row-tag { flex-shrink: 0; font-family: 'DM Sans', sans-serif; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--clp-tx-subtle); background: var(--clp-border-light); padding: .2rem .5rem; border-radius: 999px; }
.pf-row-toggle .toggle { flex-shrink: 0; }

/* ── Banner "instalar na tela inicial" (Home) ─────────────────────── */
.pwa-banner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.25rem;
  padding: .8rem .9rem;
  background: linear-gradient(135deg, var(--clp-secondary), var(--clp-secondary-dark));
  border: none;
  border-radius: var(--r-xl);
  box-shadow: 0 12px 26px -12px rgba(var(--clp-secondary-rgb), .65);
}
.pwa-banner-ic {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
.pwa-banner-ic svg { width: 1.3rem; height: 1.3rem; }
.pwa-banner-txt { min-width: 0; }
.pwa-banner-tit {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.2;
  color: #fff;
}
.pwa-banner-sub {
  font-size: .76rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, .85);
  margin-top: .12rem;
}
.pwa-banner-cta {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  color: var(--clp-secondary-dark);
  background: #fff;
  border: none;
  border-radius: 999px;
  padding: .5rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t);
}
.pwa-banner-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(15, 23, 42, .3); }
.pwa-banner-x {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  color: rgba(255, 255, 255, .85);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--t), background var(--t);
}
.pwa-banner-x:hover { color: #fff; background: rgba(255, 255, 255, .18); }
.pwa-banner-x svg { width: 1.05rem; height: 1.05rem; }
.pwa-banner-hint {
  grid-column: 1 / -1;
  font-size: .76rem;
  line-height: 1.35;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border-radius: 12px;
  padding: .5rem .7rem;
  margin-top: .15rem;
}

/* ── Ficha do pet: remover item + form inline (CRUD de saúde/vacinas) ── */
.pt-del {
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--clp-tx-subtle);
  border-radius: 8px;
  cursor: pointer;
  transition: color var(--t), background var(--t);
}
.pt-del:hover { color: var(--clp-secondary-dark); background: var(--clp-secondary-light); }
.pt-del:disabled { opacity: .5; cursor: default; }
.pt-del svg { width: .95rem; height: .95rem; }
.pt-tl-item .pt-del { align-self: center; }
.pt-form { margin-top: .8rem; }