/* =========================================================
   MyPet — design system do front-end
   Mobile-first. As variáveis de cor vêm do admin (Settings).
   ========================================================= */

:root {
	--fscp-primary: #1565F0;
	--fscp-accent: #17B4C6;
	--fscp-dark: #0E2A5C;
	--fscp-amber: #FBB03B;

	--fscp-ink: #16213C;
	--fscp-muted: #64748B;
	--fscp-line: #E4EBF5;
	--fscp-bg: #F5F8FD;
	--fscp-surface: #FFFFFF;
	--fscp-ok: #16A34A;
	--fscp-warn: #D97706;
	--fscp-danger: #DC2626;

	--fscp-r-sm: 10px;
	--fscp-r: 16px;
	--fscp-r-lg: 22px;
	--fscp-shadow: 0 10px 30px -18px rgba(14, 42, 92, .45);
	--fscp-shadow-lg: 0 24px 60px -30px rgba(14, 42, 92, .55);
	--fscp-nav-h: 68px;

	/* Visto das listas: o mesmo traco do conjunto de icones, em mascara. */
	--fscp-visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.fscp-app,
.fscp-app * { box-sizing: border-box; }

.fscp-app {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
	color: var(--fscp-ink);
	background: var(--fscp-bg);
	min-height: 100vh;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
}

.fscp-app img { max-width: 100%; height: auto; }
.fscp-app a { color: var(--fscp-primary); text-decoration: none; }
.fscp-app a:hover { text-decoration: underline; }
.fscp-app h1, .fscp-app h2, .fscp-app h3, .fscp-app h4 {
	margin: 0 0 .4em; line-height: 1.2; color: var(--fscp-dark); font-weight: 800;
	letter-spacing: -.015em;
}
.fscp-app p { margin: 0 0 1em; }
.fscp-app ul { margin: 0 0 1em; padding-left: 1.2em; }

.fscp-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.fscp-wrap--estreito { max-width: 560px; }
.fscp-dim { color: var(--fscp-muted); font-size: .875rem; }
.fscp-center { text-align: center; }
.fscp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------
   Cabeçalho público
   --------------------------------------------------------- */
.fscp-topbar {
	position: sticky; top: 0; z-index: 40;
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--fscp-line);
}
.fscp-topbar__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; min-height: 64px;
}
.fscp-logo { display: flex; align-items: center; gap: 10px; text-decoration: none !important; }
.fscp-logo img { height: 40px; width: auto; display: block; }
.fscp-logo__texto { font-weight: 900; font-size: 1.15rem; color: var(--fscp-dark); letter-spacing: -.02em; }
.fscp-topbar__acoes { display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------
   Botões
   --------------------------------------------------------- */
.fscp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 20px; border-radius: 999px;
	font-weight: 700; font-size: .95rem; border: 0; cursor: pointer;
	background: var(--fscp-primary); color: #fff !important; text-decoration: none !important;
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
	box-shadow: 0 12px 24px -14px var(--fscp-primary);
	line-height: 1;
}
.fscp-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.fscp-btn:active { transform: translateY(0); }
.fscp-btn--grad { background: linear-gradient(135deg, var(--fscp-primary), var(--fscp-accent)); }
.fscp-btn--ghost {
	background: transparent; color: var(--fscp-dark) !important;
	border: 1.5px solid var(--fscp-line); box-shadow: none;
}
.fscp-btn--ghost:hover { border-color: var(--fscp-primary); color: var(--fscp-primary) !important; }
.fscp-btn--claro { background: #fff; color: var(--fscp-primary) !important; box-shadow: var(--fscp-shadow); }
.fscp-btn--perigo { background: var(--fscp-danger); box-shadow: none; }
.fscp-btn--bloco { width: 100%; }
.fscp-btn--sm { min-height: 38px; padding: 0 14px; font-size: .85rem; }
.fscp-btn[disabled] { opacity: .55; pointer-events: none; }

/* ---------------------------------------------------------
   Formulários
   --------------------------------------------------------- */
.fscp-campo { margin-bottom: 16px; }
.fscp-campo > label,
.fscp-rotulo {
	display: block; font-weight: 700; font-size: .85rem;
	color: var(--fscp-dark); margin-bottom: 6px;
}
.fscp-app input[type=text], .fscp-app input[type=email], .fscp-app input[type=tel],
.fscp-app input[type=password], .fscp-app input[type=date], .fscp-app input[type=number],
.fscp-app input[type=search], .fscp-app input[type=time], .fscp-app select, .fscp-app textarea {
	width: 100%; min-height: 50px; padding: 12px 14px;
	border: 1.5px solid var(--fscp-line); border-radius: var(--fscp-r-sm);
	background: #FBFDFF; font-size: 16px; color: var(--fscp-ink);
	font-family: inherit; transition: border-color .12s, box-shadow .12s;
	appearance: none; -webkit-appearance: none;
}
.fscp-app select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.fscp-app textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.fscp-app input:focus, .fscp-app select:focus, .fscp-app textarea:focus {
	outline: none; border-color: var(--fscp-primary);
	box-shadow: 0 0 0 4px rgba(21, 101, 240, .14);
}
.fscp-ajuda { display: block; margin-top: 5px; font-size: .8rem; color: var(--fscp-muted); }
.fscp-check {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: .9rem; margin-bottom: 12px; cursor: pointer; color: var(--fscp-ink);
}
.fscp-check input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: 0 0 auto; accent-color: var(--fscp-primary); }
.fscp-linha { display: grid; gap: 12px; }
@media (min-width: 640px) {
	.fscp-linha--2 { grid-template-columns: 1fr 1fr; }
	.fscp-linha--3 { grid-template-columns: repeat(3, 1fr); }
}
.fscp-arquivo {
	display: flex; align-items: center; gap: 10px; padding: 12px;
	border: 1.5px dashed var(--fscp-line); border-radius: var(--fscp-r-sm);
	background: #FBFDFF; font-size: .875rem; color: var(--fscp-muted);
}
.fscp-arquivo input { border: 0; background: none; min-height: 0; padding: 0; font-size: .85rem; }

/* ---------------------------------------------------------
   Cartões e alertas
   --------------------------------------------------------- */
.fscp-card {
	background: var(--fscp-surface); border: 1px solid var(--fscp-line);
	border-radius: var(--fscp-r); padding: 18px; box-shadow: var(--fscp-shadow);
}
.fscp-card--limpo { box-shadow: none; }
.fscp-card__titulo {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; margin-bottom: 12px;
}
.fscp-card__titulo h2, .fscp-card__titulo h3 { margin: 0; font-size: 1.05rem; }

.fscp-alerta {
	border-radius: var(--fscp-r-sm); padding: 13px 15px; margin-bottom: 16px;
	font-size: .9rem; border: 1px solid transparent; display: flex; gap: 10px; align-items: flex-start;
}
.fscp-alerta--ok { background: #E9F8EF; border-color: #B7E6C9; color: #14532D; }
.fscp-alerta--erro { background: #FDECEC; border-color: #F3C0C0; color: #7F1D1D; }
.fscp-alerta--info { background: #E9F1FE; border-color: #C2DAFB; color: #0E2A5C; }
.fscp-alerta--aviso { background: #FEF5E7; border-color: #F8DCA8; color: #7C4A03; }

.fscp-tag {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: .04em; background: #EEF3FA; color: var(--fscp-dark);
}
.fscp-tag--trial { background: #E6F7FA; color: #0B6A78; }
.fscp-tag--ativa { background: #E9F8EF; color: #14532D; }
.fscp-tag--vencida, .fscp-tag--falha, .fscp-tag--cancelada { background: #FDECEC; color: #7F1D1D; }
.fscp-tag--pendente, .fscp-tag--fila { background: #FEF5E7; color: #7C4A03; }
.fscp-tag--pago, .fscp-tag--enviado { background: #E9F8EF; color: #14532D; }
.fscp-tag--alerta { background: #FDECEC; color: #B91C1C; }

/* ---------------------------------------------------------
   Landing
   --------------------------------------------------------- */
.fscp-hero {
	position: relative; overflow: hidden; padding: 40px 0 56px;
	background:
		radial-gradient(900px 420px at 12% -10%, rgba(21,101,240,.16), transparent 62%),
		radial-gradient(760px 420px at 108% 6%, rgba(23,180,198,.18), transparent 58%),
		linear-gradient(170deg, #FBFDFF 0%, #EFF5FE 100%);
}
.fscp-hero__grid { display: grid; gap: 28px; align-items: center; }
.fscp-hero h1 { font-size: clamp(1.9rem, 6.5vw, 3.2rem); letter-spacing: -.03em; }
.fscp-hero h1 span { background: linear-gradient(120deg, var(--fscp-primary), var(--fscp-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fscp-hero__lead { font-size: 1.05rem; color: #40506B; max-width: 46ch; }
.fscp-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.fscp-hero__selo {
	display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
	background: #fff; border: 1px solid var(--fscp-line); border-radius: 999px;
	font-size: .8rem; font-weight: 700; color: var(--fscp-dark); margin-bottom: 16px;
	box-shadow: var(--fscp-shadow);
}
.fscp-hero__arte { display: flex; justify-content: center; }
.fscp-mockup {
	width: min(300px, 78vw); background: #fff; border-radius: 28px; padding: 14px;
	box-shadow: var(--fscp-shadow-lg); border: 1px solid var(--fscp-line);
}
.fscp-mockup__topo {
	background: linear-gradient(135deg, var(--fscp-dark), var(--fscp-primary));
	border-radius: 18px; padding: 16px; color: #fff; margin-bottom: 12px;
}
.fscp-mockup__topo strong { display: block; font-size: 1.15rem; }
.fscp-mockup__topo span { font-size: .78rem; opacity: .78; }
.fscp-mockup__item {
	display: flex; align-items: center; gap: 10px; padding: 10px 12px;
	border: 1px solid var(--fscp-line); border-radius: 12px; margin-bottom: 8px; font-size: .82rem;
}
.fscp-mockup__item b { display: block; color: var(--fscp-dark); }
.fscp-mockup__item i { font-style: normal; font-size: 1.15rem; }

.fscp-secao { padding: 48px 0; }
.fscp-secao--alt { background: #fff; border-top: 1px solid var(--fscp-line); border-bottom: 1px solid var(--fscp-line); }
.fscp-secao__cab { max-width: 640px; margin: 0 auto 30px; text-align: center; }
.fscp-secao__cab h2 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); }
.fscp-secao__cab p { color: var(--fscp-muted); }

.fscp-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .fscp-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
	.fscp-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.fscp-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.fscp-recurso { background: #fff; border: 1px solid var(--fscp-line); border-radius: var(--fscp-r); padding: 20px; }
.fscp-recurso__icone {
	width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
	font-size: 1.4rem; margin-bottom: 12px;
	background: linear-gradient(135deg, rgba(21,101,240,.12), rgba(23,180,198,.16));
}
.fscp-recurso h3 { font-size: 1rem; }
.fscp-recurso p { font-size: .9rem; color: var(--fscp-muted); margin: 0; }

/* Preços */
.fscp-precos { display: grid; gap: 16px; }
@media (min-width: 860px) { .fscp-precos { grid-template-columns: repeat(3, 1fr); } }
.fscp-preco {
	background: #fff; border: 1.5px solid var(--fscp-line); border-radius: var(--fscp-r-lg);
	padding: 26px 22px; text-align: center; position: relative;
}
.fscp-preco--destaque {
	border-color: var(--fscp-primary);
	box-shadow: var(--fscp-shadow-lg);
	background: linear-gradient(180deg, #fff, #F7FAFF);
}
.fscp-preco__selo {
	position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
	background: linear-gradient(135deg, var(--fscp-primary), var(--fscp-accent));
	color: #fff; font-size: .7rem; font-weight: 800; padding: 5px 14px; border-radius: 999px;
	text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.fscp-preco__faixa { font-weight: 800; color: var(--fscp-dark); margin-bottom: 6px; }
.fscp-preco__valor { font-size: 2.4rem; font-weight: 900; color: var(--fscp-primary); letter-spacing: -.03em; line-height: 1; }
.fscp-preco__valor small { font-size: .85rem; font-weight: 700; color: var(--fscp-muted); display: block; margin-top: 6px; }
.fscp-preco__total { font-size: .85rem; color: var(--fscp-muted); margin: 10px 0 16px; }

.fscp-faq details {
	background: #fff; border: 1px solid var(--fscp-line); border-radius: var(--fscp-r-sm);
	padding: 14px 16px; margin-bottom: 10px;
}
.fscp-faq summary { font-weight: 700; cursor: pointer; color: var(--fscp-dark); list-style: none; }
.fscp-faq summary::-webkit-details-marker { display: none; }
.fscp-faq summary::after { content: '+'; float: right; color: var(--fscp-primary); font-size: 1.3rem; line-height: 1; }
.fscp-faq details[open] summary::after { content: '–'; }
.fscp-faq p { margin: 10px 0 0; color: var(--fscp-muted); font-size: .92rem; }

.fscp-cta-final {
	background: linear-gradient(135deg, var(--fscp-dark), var(--fscp-primary));
	color: #fff; border-radius: var(--fscp-r-lg); padding: 36px 24px; text-align: center;
}
.fscp-cta-final h2 { color: #fff; }
.fscp-cta-final p { opacity: .86; max-width: 44ch; margin: 0 auto 20px; }

.fscp-rodape {
	background: var(--fscp-dark); color: rgba(255,255,255,.72);
	padding: 34px 0 26px; font-size: .875rem; margin-top: auto;
}
.fscp-rodape a { color: #fff; opacity: .82; }
.fscp-rodape__grid { display: grid; gap: 18px; }
@media (min-width: 720px) { .fscp-rodape__grid { grid-template-columns: 2fr 1fr 1fr; } }
.fscp-rodape__aviso {
	margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14);
	font-size: .78rem; opacity: .68; line-height: 1.6;
}

/* ---------------------------------------------------------
   Autenticação
   --------------------------------------------------------- */
.fscp-auth {
	min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
	padding: 28px 16px 40px;
	background:
		radial-gradient(900px 460px at 10% -10%, rgba(21,101,240,.14), transparent 60%),
		radial-gradient(760px 420px at 106% 8%, rgba(23,180,198,.16), transparent 56%),
		linear-gradient(170deg, #FBFDFF 0%, #EDF3FC 100%);
}
.fscp-auth__caixa {
	width: 100%; max-width: 440px; margin: 0 auto;
	background: #fff; border: 1px solid var(--fscp-line); border-radius: var(--fscp-r-lg);
	padding: 28px 24px 26px; box-shadow: var(--fscp-shadow-lg);
}
.fscp-auth__marca { text-align: center; margin-bottom: 22px; }
.fscp-auth__marca img { height: 76px; width: auto; margin: 0 auto 6px; display: block; }
.fscp-auth__marca p { font-size: .85rem; color: var(--fscp-muted); margin: 0; }
.fscp-auth__caixa h1 { font-size: 1.35rem; text-align: center; margin-bottom: 4px; }
.fscp-auth__sub { text-align: center; color: var(--fscp-muted); font-size: .9rem; margin-bottom: 20px; }
.fscp-auth__rodape { text-align: center; margin-top: 18px; font-size: .9rem; color: var(--fscp-muted); }
.fscp-auth__links { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; margin-top: -6px; margin-bottom: 16px; }
.fscp-senha { position: relative; }
.fscp-senha button {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	background: none; border: 0; cursor: pointer; font-size: 1.05rem; padding: 8px; color: var(--fscp-muted);
}
.fscp-beneficios { list-style: none; padding: 0; margin: 18px 0 0; font-size: .85rem; color: var(--fscp-muted); }
.fscp-beneficios li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 7px; }
.fscp-beneficios li::before {
	content: ''; flex: 0 0 auto;
	width: 1.05em; height: 1.05em; margin-top: .18em;
	background: var(--fscp-ok);
	-webkit-mask: var(--fscp-visto) center / contain no-repeat;
	        mask: var(--fscp-visto) center / contain no-repeat;
}

/* ---------------------------------------------------------
   Painel do tutor
   --------------------------------------------------------- */
.fscp-painel { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: calc(var(--fscp-nav-h) + env(safe-area-inset-bottom)); }
.fscp-painel__topo {
	position: sticky; top: 0; z-index: 30;
	background: linear-gradient(135deg, var(--fscp-dark), var(--fscp-primary));
	color: #fff; padding: 14px 0 16px;
}
.fscp-painel__topo .fscp-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fscp-painel__marca { display: flex; align-items: center; gap: 10px; color: #fff !important; text-decoration: none !important; }
.fscp-painel__marca img { height: 34px; width: auto; max-width: none; flex: 0 0 auto; }
.fscp-painel__marca strong { font-size: 1.15rem; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.fscp-painel__perfil { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.fscp-painel__avatar {
	width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2);
	display: grid; place-items: center; font-weight: 800; color: #fff;
}
.fscp-painel__conteudo { flex: 1; padding: 18px 0 28px; }

.fscp-nav {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
	background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
	border-top: 1px solid var(--fscp-line);
	display: grid; grid-template-columns: repeat(5, 1fr);
	padding-bottom: env(safe-area-inset-bottom);
}
.fscp-nav a {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	min-height: var(--fscp-nav-h); font-size: .68rem; font-weight: 700;
	color: var(--fscp-muted); text-decoration: none !important; padding: 6px 2px;
}
.fscp-nav a i { font-style: normal; font-size: 1.3rem; line-height: 1; }
.fscp-nav a.ativo { color: var(--fscp-primary); }

@media (min-width: 900px) {
	.fscp-painel { padding-bottom: 0; }
	.fscp-nav {
		position: static; display: flex; justify-content: center; gap: 6px;
		border-top: 0; border-bottom: 1px solid var(--fscp-line); background: #fff;
	}
	.fscp-nav a { flex-direction: row; min-height: 54px; font-size: .88rem; padding: 0 16px; border-radius: 0; }
	.fscp-nav a.ativo { box-shadow: inset 0 -3px 0 var(--fscp-primary); }
}

/* Faixa de assinatura */
.fscp-assinatura-faixa {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
	padding: 12px 16px; border-radius: var(--fscp-r-sm); margin-bottom: 18px;
	font-size: .88rem; border: 1px solid;
}
.fscp-assinatura-faixa--trial { background: #E6F7FA; border-color: #A9E4EC; color: #0B6A78; }
.fscp-assinatura-faixa--ativa { background: #E9F8EF; border-color: #B7E6C9; color: #14532D; }
.fscp-assinatura-faixa--vencida,
.fscp-assinatura-faixa--cancelada,
.fscp-assinatura-faixa--inexistente { background: #FDECEC; border-color: #F3C0C0; color: #7F1D1D; }

/* Pets */
.fscp-pets { display: grid; gap: 14px; }
@media (min-width: 560px) { .fscp-pets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .fscp-pets { grid-template-columns: repeat(3, 1fr); } }
.fscp-pet-card {
	display: flex; gap: 14px; align-items: center; padding: 14px;
	background: #fff; border: 1px solid var(--fscp-line); border-radius: var(--fscp-r);
	box-shadow: var(--fscp-shadow); text-decoration: none !important; color: inherit !important;
	transition: transform .12s, box-shadow .12s;
}
.fscp-pet-card:hover { transform: translateY(-2px); box-shadow: var(--fscp-shadow-lg); }
.fscp-pet-card__foto {
	width: 68px; height: 68px; border-radius: 18px; object-fit: cover; flex: 0 0 auto;
	background: #E8F0FB;
}
.fscp-pet-card__nome { font-weight: 800; color: var(--fscp-dark); font-size: 1.05rem; }
.fscp-pet-card__meta { font-size: .82rem; color: var(--fscp-muted); }
.fscp-pet-card--novo {
	justify-content: center; border-style: dashed; box-shadow: none;
	color: var(--fscp-primary) !important; font-weight: 700; min-height: 96px;
}

/* Próximos cuidados */
.fscp-pendencia {
	display: flex; gap: 12px; align-items: flex-start; padding: 14px;
	border: 1px solid var(--fscp-line); border-radius: var(--fscp-r); background: #fff;
	margin-bottom: 10px;
}
.fscp-pendencia--atrasado { border-color: #F3C0C0; background: #FFF8F8; }
.fscp-pendencia--hoje { border-color: #F8DCA8; background: #FFFCF5; }
.fscp-pendencia__icone {
	width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
	background: #EEF3FA; color: var(--fscp-primary); flex: 0 0 auto;
}
.fscp-pendencia__corpo { flex: 1; min-width: 0; }
.fscp-pendencia__titulo { font-weight: 700; color: var(--fscp-dark); }
.fscp-pendencia__meta { font-size: .82rem; color: var(--fscp-muted); }
.fscp-pendencia__acoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Abas do prontuário — barra segmentada, cantos retos ---------------------- */
.fscp-abas {
	display: flex; gap: 2px; margin-bottom: 18px; padding: 4px;
	background: var(--fscp-surface); border: 1px solid var(--fscp-line);
	border-radius: 10px; box-shadow: var(--fscp-shadow);
	/* Na tela larga as abas quebram em duas linhas em vez de rolar: com 9
	   seções, a última ficava escondida atrás da barra de rolagem. */
	flex-wrap: wrap;
}

/* No celular volta a rolar na horizontal — empilhar 9 abas comeria a tela. */
@media (max-width: 900px) {
	.fscp-abas {
		flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
		scrollbar-width: thin; scrollbar-color: var(--fscp-line) transparent;
	}
}
.fscp-abas::-webkit-scrollbar { height: 6px; }
.fscp-abas::-webkit-scrollbar-track { background: transparent; }
.fscp-abas::-webkit-scrollbar-thumb { background: var(--fscp-line); border-radius: 3px; }

.fscp-abas a {
	display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
	white-space: nowrap; padding: 10px 14px;
	border-radius: 6px; border: 0;
	font-size: .84rem; font-weight: 700; line-height: 1;
	background: transparent; color: var(--fscp-muted);
	text-decoration: none !important; transition: background .14s, color .14s;
}
.fscp-abas a:hover { background: #EEF5FF; color: var(--fscp-primary); }
.fscp-abas a:focus-visible { outline: 2px solid var(--fscp-primary); outline-offset: -2px; }
.fscp-abas a.ativo {
	background: linear-gradient(135deg, var(--fscp-primary), var(--fscp-accent));
	color: #fff !important;
	box-shadow: 0 6px 14px -8px var(--fscp-primary);
}

/* Ícone com largura fixa: todos os rótulos alinham no mesmo eixo */
.fscp-abas__icone {
	font-style: normal; font-size: .98rem; line-height: 1;
	width: 1.15em; text-align: center; flex: 0 0 auto;
}

@media (max-width: 560px) {
	.fscp-abas { border-radius: 8px; padding: 3px; }
	.fscp-abas a { padding: 9px 11px; font-size: .8rem; gap: 6px; }
}

/* Ficha do pet */
.fscp-ficha {
	display: flex; gap: 16px; align-items: center; padding: 18px; margin-bottom: 16px;
	background: linear-gradient(135deg, var(--fscp-dark), var(--fscp-primary));
	border-radius: var(--fscp-r-lg); color: #fff;
}
.fscp-ficha__foto {
	width: 88px; height: 88px; border-radius: 22px; object-fit: cover;
	border: 3px solid rgba(255,255,255,.3); flex: 0 0 auto; background: #fff;
}
.fscp-ficha h1 { color: #fff; font-size: 1.5rem; margin-bottom: 2px; }
.fscp-ficha__meta { font-size: .85rem; opacity: .85; }
.fscp-ficha__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.fscp-alergias {
	background: #FDECEC; border: 1px solid #F3C0C0; border-radius: var(--fscp-r-sm);
	padding: 12px 14px; margin-bottom: 16px;
}
.fscp-alergias strong { color: #B91C1C; display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.fscp-alergias ul { margin: 0; padding-left: 18px; font-size: .9rem; color: #7F1D1D; }

/* Linha do tempo */
.fscp-timeline { position: relative; padding-left: 26px; }
.fscp-timeline::before {
	content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--fscp-line);
}
.fscp-tl-item { position: relative; margin-bottom: 14px; }
.fscp-tl-item::before {
	content: ''; position: absolute; left: -22px; top: 16px; width: 12px; height: 12px;
	border-radius: 50%; background: #fff; border: 3px solid var(--fscp-primary);
}
.fscp-tl-item--destaque::before { border-color: var(--fscp-danger); }
.fscp-tl-card {
	background: #fff; border: 1px solid var(--fscp-line); border-radius: var(--fscp-r-sm); padding: 12px 14px;
}
.fscp-tl-card__topo { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.fscp-tl-card__data { font-size: .78rem; color: var(--fscp-muted); font-weight: 700; }
.fscp-tl-card h4 { margin: 4px 0 2px; font-size: .98rem; }
.fscp-tl-card p { margin: 0; font-size: .85rem; color: var(--fscp-muted); }

/* Tabelas responsivas */
.fscp-tabela-wrap {
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	border: 1px solid var(--fscp-line); border-radius: var(--fscp-r);
	background: var(--fscp-surface); box-shadow: var(--fscp-shadow);
}
.fscp-tabela {
	width: 100%; border-collapse: collapse; font-size: .88rem;
	background: transparent; min-width: 520px;
}

/* Blindagem contra o tema.
   O hello-elementor (e vários outros) estilizam QUALQUER <table> da pagina:
   `table td, table th { border: 1px solid ... }` desenha grade vertical, e
   `table tbody > tr:nth-child(odd) > td { background: ... }` pinta zebrado no
   TD — que cobre o fundo do TR por mais especifico que ele seja. Por isso os
   resets abaixo miram a mesma celula, com especificidade suficiente. */
.fscp-app .fscp-tabela > thead > tr > th,
.fscp-app .fscp-tabela > tbody > tr > td,
.fscp-app .fscp-tabela > tbody > tr > th {
	border: 0;
	border-bottom: 1px solid var(--fscp-line);
	background: transparent;
	padding: 14px 18px;
	text-align: left;
	vertical-align: middle;
	line-height: 1.4;
}
.fscp-app .fscp-tabela > tbody > tr:last-child > td { border-bottom: 0; }

.fscp-tabela th {
	font-size: .68rem; text-transform: uppercase;
	letter-spacing: .08em; color: var(--fscp-muted); font-weight: 800;
	white-space: nowrap;
}
.fscp-app .fscp-tabela > thead > tr > th {
	padding-top: 12px; padding-bottom: 12px;
	border-bottom: 1px solid var(--fscp-line);
}

/* O realce da linha tambem vai no TD, pelo mesmo motivo. */
.fscp-tabela > tbody > tr { transition: background .12s; }
.fscp-app .fscp-tabela > tbody > tr:hover > td,
.fscp-app .fscp-tabela > tbody > tr:hover > th { background: #F7FAFE; }

/* Tabela de pesagens ------------------------------------------------------- */
.fscp-tabela__data { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fscp-tabela__peso {
	font-size: 1.05rem; font-weight: 800; color: var(--fscp-dark);
	white-space: nowrap; font-variant-numeric: tabular-nums;
}
.fscp-tabela__peso small {
	font-size: .72rem; font-weight: 600; color: var(--fscp-muted); margin-left: 3px;
}

.fscp-selo-mini {
	display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 4px;
	font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
	background: #EEF5FF; color: var(--fscp-primary); border: 1px solid #D6E6FF;
	vertical-align: middle;
}

/* Variação entre uma pesagem e a anterior */
.fscp-var {
	display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
	font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fscp-var--sobe  { color: #B45309; }
.fscp-var--desce { color: #1D6FA5; }
.fscp-var--zero  { color: var(--fscp-muted); font-weight: 600; }

/* Onde foi pesado */
.fscp-origem {
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
	padding: 4px 10px; border-radius: 6px; font-size: .78rem; font-weight: 700;
	background: #F1F5FB; color: var(--fscp-dark); border: 1px solid var(--fscp-line);
}
.fscp-origem i { font-style: normal; font-size: .85rem; }

/* Ação discreta: aparece de leve, fica vermelha ao passar o mouse */
.fscp-tabela__acao { width: 1%; text-align: right; }
.fscp-tabela__acao form { margin: 0; }
.fscp-lixeira {
	border: 1px solid transparent; background: transparent; cursor: pointer;
	width: 32px; height: 32px; border-radius: 6px; line-height: 1;
	font-size: .9rem; opacity: .45; transition: .15s;
}
.fscp-tabela tbody tr:hover .fscp-lixeira { opacity: .8; }
.fscp-lixeira:hover { opacity: 1; background: #FEF2F2; border-color: #FBD5D5; }
.fscp-lixeira:focus-visible { opacity: 1; outline: 2px solid var(--fscp-danger); outline-offset: 1px; }

@media (max-width: 560px) {
	.fscp-tabela th, .fscp-tabela td { padding: 11px 12px; }
	.fscp-tabela__peso { font-size: .95rem; }
}

/* Modal */
.fscp-modal { border: 0; padding: 0; border-radius: var(--fscp-r-lg); max-width: 560px; width: calc(100% - 24px); box-shadow: var(--fscp-shadow-lg); }
.fscp-modal::backdrop { background: rgba(14, 42, 92, .45); backdrop-filter: blur(3px); }
.fscp-modal__corpo { padding: 22px 20px 20px; max-height: 82vh; overflow-y: auto; }
.fscp-modal__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.fscp-modal__topo h3 { margin: 0; font-size: 1.1rem; }
.fscp-modal__fechar { background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--fscp-muted); padding: 4px 8px; }

/* Vazio */
.fscp-vazio { text-align: center; padding: 34px 20px; color: var(--fscp-muted); background: #fff; border: 1px dashed var(--fscp-line); border-radius: var(--fscp-r); }
.fscp-vazio__emoji { display: block; margin-bottom: 10px; color: var(--fscp-line); }
.fscp-vazio__emoji .fscp-i { width: 2.4rem; height: 2.4rem; vertical-align: 0; color: #C3D2E8; }

/* Métricas */
.fscp-metricas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
@media (min-width: 720px) { .fscp-metricas { grid-template-columns: repeat(4, 1fr); } }
.fscp-metrica { background: #fff; border: 1px solid var(--fscp-line); border-radius: var(--fscp-r-sm); padding: 14px; text-align: center; }
.fscp-metrica strong { display: block; font-size: 1.5rem; color: var(--fscp-primary); line-height: 1.1; }
.fscp-metrica span { font-size: .76rem; color: var(--fscp-muted); }

/* Pix */
.fscp-pix { text-align: center; }
.fscp-pix img { width: min(260px, 70vw); border-radius: var(--fscp-r-sm); border: 1px solid var(--fscp-line); }
.fscp-pix__codigo {
	display: flex; gap: 8px; margin-top: 14px;
}
.fscp-pix__codigo input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }

/* Gráfico de peso */
.fscp-grafico { width: 100%; height: 220px; display: block; }

/* Carteirinha pública */
.fscp-publica { padding: 24px 0 40px; }
.fscp-publica__cartao {
	background: linear-gradient(150deg, var(--fscp-dark), var(--fscp-primary));
	border-radius: var(--fscp-r-lg); padding: 22px; color: #fff; box-shadow: var(--fscp-shadow-lg);
}
.fscp-publica__dados { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.fscp-publica__dados span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
.fscp-publica__dados strong { font-size: .95rem; }

/* Impressão */
@media print {
	.fscp-nav, .fscp-painel__topo, .fscp-topbar, .fscp-rodape, .fscp-ficha__acoes, .fscp-abas { display: none !important; }
	.fscp-app { background: #fff; }
}

/* ---------------------------------------------------------
   Ampliação de plano (vagas de pet)
   --------------------------------------------------------- */
.fscp-vagas { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--fscp-muted); margin: 10px 0 0; }
.fscp-vagas__barra { flex: 1 1 auto; height: 8px; background: #EEF3FA; border-radius: 99px; overflow: hidden; max-width: 220px; }
.fscp-vagas__barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--fscp-primary), var(--fscp-accent)); }

.fscp-upsell { max-width: 480px; margin: 0 auto; text-align: center; padding: 12px 0 8px; }
.fscp-upsell__emoji { font-size: 3rem; display: block; margin-bottom: 6px; }
.fscp-upsell h1 { font-size: 1.5rem; margin-bottom: 6px; }
.fscp-upsell__lead { color: var(--fscp-muted); font-size: .95rem; }
.fscp-upsell__card {
	background: #fff; border: 1.5px solid var(--fscp-primary); border-radius: var(--fscp-r-lg);
	padding: 24px 22px; box-shadow: var(--fscp-shadow-lg); text-align: left; margin-top: 18px;
}
.fscp-upsell__rotulo { display: block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--fscp-muted); text-align: center; }
.fscp-upsell__valor { display: block; text-align: center; font-size: 2.4rem; font-weight: 900; color: var(--fscp-primary); letter-spacing: -.03em; line-height: 1.1; margin: 4px 0; }
.fscp-upsell__obs { display: block; text-align: center; font-size: .8rem; color: var(--fscp-muted); margin-bottom: 18px; }
.fscp-upsell__lista { list-style: none; padding: 0; margin: 0 0 20px; font-size: .9rem; }
.fscp-upsell__lista li { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 9px; color: var(--fscp-ink); }
.fscp-upsell__lista li::before {
	content: ''; flex: 0 0 auto;
	width: 1.05em; height: 1.05em; margin-top: .18em;
	background: var(--fscp-ok);
	-webkit-mask: var(--fscp-visto) center / contain no-repeat;
	        mask: var(--fscp-visto) center / contain no-repeat;
}

/* ---------------------------------------------------------
   Perfil do tutor e recorte redondo da foto
   --------------------------------------------------------- */
.fscp-perfil__topo { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.fscp-perfil__avatar {
	width: 76px; height: 76px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
	display: grid; place-items: center; background: linear-gradient(135deg, var(--fscp-primary), var(--fscp-accent));
	color: #fff; font-weight: 900; font-size: 1.5rem; letter-spacing: -.02em;
	box-shadow: 0 8px 20px -12px rgba(14,42,92,.6);
}
.fscp-perfil__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fscp-perfil__acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.fscp-cropper {
	margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--fscp-line);
	display: flex; flex-direction: column; align-items: center;
}
.fscp-cropper__tela {
	width: 260px; height: 260px; max-width: 78vw; border-radius: 50%;
	background: #EEF3FA; cursor: grab; touch-action: none;
	box-shadow: 0 14px 34px -20px rgba(14,42,92,.7);
}
.fscp-cropper__tela:active { cursor: grabbing; }
.fscp-cropper__zoom {
	display: flex; align-items: center; gap: 10px; width: min(300px, 82vw); margin: 16px 0 4px;
	font-size: .9rem; color: var(--fscp-muted);
}
.fscp-cropper__zoom input[type=range] {
	flex: 1 1 auto; -webkit-appearance: none; appearance: none;
	height: 6px; border-radius: 99px; background: var(--fscp-line); min-height: 0; padding: 0; border: 0;
}
.fscp-cropper__zoom input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
	background: var(--fscp-primary); border: 3px solid #fff; cursor: pointer;
	box-shadow: 0 2px 8px rgba(14,42,92,.35);
}
.fscp-cropper__zoom input[type=range]::-moz-range-thumb {
	width: 22px; height: 22px; border-radius: 50%; background: var(--fscp-primary);
	border: 3px solid #fff; cursor: pointer;
}
.fscp-cropper__botoes { display: flex; gap: 8px; margin-top: 12px; }

/* Avatar do cabeçalho com foto */
.fscp-painel__avatar { overflow: hidden; padding: 0; }
.fscp-painel__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* ==========================================================================
   Formulário do pet — blocos numerados, foto com prévia e seletor de raça
   ========================================================================== */

.fscp-visualmente-oculto {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fscp-req { color: var(--fscp-danger); font-weight: 700; }

/* Cabeçalho da tela ------------------------------------------------------- */
.fscp-formcab {
	display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start;
	justify-content: space-between; margin: 0 0 22px;
}
.fscp-formcab__texto { flex: 1 1 320px; min-width: 0; }
.fscp-formcab__olho {
	display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .1em;
	text-transform: uppercase; color: var(--fscp-accent); margin-bottom: 6px;
}
.fscp-formcab h1 { font-size: 1.5rem; margin: 0 0 6px; }
.fscp-formcab p { margin: 0; color: var(--fscp-muted); font-size: .9rem; max-width: 62ch; line-height: 1.55; }

.fscp-formcab__plano {
	flex: 0 0 auto; min-width: 190px; padding: 14px 16px;
	border: 1.5px solid var(--fscp-line); border-radius: var(--fscp-r);
	background: var(--fscp-surface); box-shadow: var(--fscp-shadow);
}
.fscp-formcab__vaga { display: block; font-weight: 800; color: var(--fscp-dark); font-size: .95rem; }
.fscp-formcab__plano small { display: block; margin-top: 6px; color: var(--fscp-muted); font-size: .76rem; line-height: 1.4; }
.fscp-pontos { display: flex; gap: 5px; margin-top: 9px; }
.fscp-pontos i { width: 20px; height: 6px; border-radius: 3px; background: var(--fscp-line); }
.fscp-pontos i.cheio { background: var(--fscp-primary); }
.fscp-pontos i.atual { background: var(--fscp-amber); }

/* Blocos ------------------------------------------------------------------ */
.fscp-bloco {
	background: var(--fscp-surface); border: 1px solid var(--fscp-line);
	border-radius: var(--fscp-r-lg); box-shadow: var(--fscp-shadow);
	margin-bottom: 18px; overflow: hidden;
}
.fscp-bloco__cab {
	display: flex; gap: 13px; align-items: flex-start;
	padding: 18px 20px; border-bottom: 1px solid var(--fscp-line);
	background: linear-gradient(180deg, #FBFDFF, var(--fscp-surface));
}
.fscp-bloco__num {
	flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
	display: grid; place-items: center; font-weight: 800; font-size: .9rem;
	color: #fff; background: linear-gradient(135deg, var(--fscp-primary), var(--fscp-accent));
}
.fscp-bloco__num--alerta { background: var(--fscp-danger); }
.fscp-bloco__cab h2 { font-size: 1.02rem; margin: 2px 0 3px; }
.fscp-bloco__cab p { margin: 0; font-size: .82rem; color: var(--fscp-muted); line-height: 1.45; }
.fscp-bloco__corpo { padding: 20px; }
.fscp-bloco__corpo > .fscp-campo:last-child,
.fscp-bloco__corpo > .fscp-linha:last-child { margin-bottom: 0; }
.fscp-bloco--zona { border-color: #FBD5D5; }

/* Foto -------------------------------------------------------------------- */
.fscp-foto {
	display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
	padding: 14px; margin-bottom: 18px;
	border: 1.5px dashed var(--fscp-line); border-radius: var(--fscp-r);
	background: #FBFDFF;
}
.fscp-foto__previa { position: relative; flex: 0 0 auto; }
.fscp-foto__previa img {
	width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
	background: #EAF2FF; border: 3px solid #fff; box-shadow: var(--fscp-shadow);
	display: block;
}
.fscp-foto__selo {
	position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px;
	border-radius: 50%; background: var(--fscp-primary); color: #fff;
	display: grid; place-items: center; font-size: .8rem; border: 2px solid #fff;
}
.fscp-foto__acao { flex: 1 1 220px; min-width: 0; }
.fscp-foto__acao .fscp-ajuda { margin-top: 8px; }
.fscp-foto__nome {
	display: block; margin-top: 6px; font-size: .8rem; font-weight: 700;
	color: var(--fscp-primary); word-break: break-all;
}
label.fscp-btn { cursor: pointer; }

/* Rádios em cartão (sexo) ------------------------------------------------- */
.fscp-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fscp-opcao { position: relative; margin: 0; }
.fscp-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.fscp-opcao span {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 10px; border: 1.5px solid var(--fscp-line); border-radius: var(--fscp-r-sm);
	background: #FBFDFF; font-weight: 700; font-size: .9rem; color: var(--fscp-ink);
	cursor: pointer; transition: .15s;
}
.fscp-opcao span i { font-style: normal; font-size: 1.1rem; color: var(--fscp-muted); }
.fscp-opcao:hover span { border-color: var(--fscp-accent); }
.fscp-opcao input:checked + span {
	border-color: var(--fscp-primary); background: #EEF5FF; color: var(--fscp-primary);
	box-shadow: inset 0 0 0 1px var(--fscp-primary);
}
.fscp-opcao input:checked + span i { color: var(--fscp-primary); }
.fscp-opcao input:focus-visible + span { outline: 2px solid var(--fscp-primary); outline-offset: 2px; }

/* Seletor de raça --------------------------------------------------------- */
.fscp-raca__abrir {
	margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
	font-size: .83rem; font-weight: 700; color: var(--fscp-primary);
}
.fscp-raca__abrir:hover { text-decoration: underline; }
.fscp-raca__nova {
	margin-top: 12px; padding: 14px; border-radius: var(--fscp-r-sm);
	background: #EEF5FF; border: 1px solid #D6E6FF;
}
.fscp-raca__nova > label {
	display: block; font-size: .78rem; font-weight: 800; text-transform: uppercase;
	letter-spacing: .04em; color: var(--fscp-dark); margin-bottom: 7px;
}
.fscp-raca__linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fscp-raca__linha input[type="text"] { flex: 1 1 200px; min-width: 0; background: #fff; }
.fscp-raca__nova .fscp-ajuda { margin-top: 8px; }
.fscp-raca__nova .fscp-ajuda.erro { color: var(--fscp-danger); font-weight: 700; }
.fscp-raca__nova .fscp-ajuda.ok { color: var(--fscp-ok); font-weight: 700; }

/* Campo com sufixo (kg) --------------------------------------------------- */
.fscp-sufixo { position: relative; display: block; }
.fscp-sufixo input { padding-right: 44px; }
.fscp-sufixo span {
	position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	font-size: .85rem; font-weight: 700; color: var(--fscp-muted); pointer-events: none;
}

/* Marcadores (checkbox em cartão) ----------------------------------------- */
.fscp-marcadores { display: grid; gap: 10px; margin-bottom: 18px; }
@media (min-width: 620px) { .fscp-marcadores { grid-template-columns: 1fr 1fr; } }
.fscp-marcador {
	display: flex; gap: 11px; align-items: flex-start; margin: 0;
	padding: 13px 14px; border: 1.5px solid var(--fscp-line);
	border-radius: var(--fscp-r-sm); background: #FBFDFF; cursor: pointer; transition: .15s;
}
.fscp-marcador:hover { border-color: var(--fscp-accent); }
.fscp-marcador input { margin: 2px 0 0; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--fscp-primary); }
.fscp-marcador strong { display: block; font-size: .88rem; color: var(--fscp-dark); }
.fscp-marcador small { display: block; margin-top: 2px; font-size: .76rem; color: var(--fscp-muted); line-height: 1.4; }
.fscp-marcador:has(input:checked) { border-color: var(--fscp-primary); background: #EEF5FF; }

/* Ações ------------------------------------------------------------------- */
.fscp-form__acoes {
	display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; padding-top: 4px;
}
@media (max-width: 560px) {
	.fscp-form__acoes { flex-direction: column-reverse; }
	.fscp-form__acoes .fscp-btn { width: 100%; }
	.fscp-opcoes { grid-template-columns: 1fr; }
	.fscp-formcab__plano { width: 100%; }
}

/* ==========================================================================
   Pagamento Pix — tudo sem recarregar a página
   ========================================================================== */

.fscp-suspensa {
	border: 1.5px solid #F5A9A9; background: linear-gradient(180deg, #FFF5F5, #FFFFFF);
	border-radius: var(--fscp-r-lg); padding: 20px; margin-bottom: 18px;
	box-shadow: var(--fscp-shadow);
}
.fscp-suspensa__topo { display: flex; gap: 12px; align-items: flex-start; }
.fscp-suspensa__icone {
	flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center; font-size: 1.2rem;
	background: #FEE2E2; color: #B91C1C;
}
.fscp-suspensa h2 { font-size: 1.05rem; margin: 4px 0 6px; color: #B91C1C; }
.fscp-suspensa p { margin: 0 0 6px; font-size: .89rem; color: var(--fscp-ink); line-height: 1.55; }
.fscp-suspensa .fscp-btn { margin-top: 14px; }

.fscp-pagar { display: grid; gap: 18px; }
@media (min-width: 760px) { .fscp-pagar--comqr { grid-template-columns: 236px 1fr; align-items: start; } }

.fscp-pagar__qr {
	background: #fff; border: 1px solid var(--fscp-line); border-radius: var(--fscp-r);
	padding: 12px; text-align: center;
}
.fscp-pagar__qr img { width: 100%; max-width: 210px; height: auto; display: block; margin: 0 auto; image-rendering: pixelated; }
.fscp-pagar__valor { font-size: 2rem; font-weight: 900; color: var(--fscp-primary); line-height: 1; display: block; }
.fscp-pagar__resumo { margin: 6px 0 14px; }
.fscp-pagar__passos { margin: 0 0 14px; padding-left: 20px; font-size: .86rem; color: var(--fscp-muted); line-height: 1.7; }
.fscp-pagar__passos li::marker { color: var(--fscp-primary); font-weight: 800; }

.fscp-pix__codigo { display: flex; gap: 8px; align-items: center; }
.fscp-pix__codigo input { flex: 1 1 auto; min-width: 0; font-size: .78rem; font-family: ui-monospace, Menlo, Consolas, monospace; }

.fscp-pagar__estado {
	display: flex; gap: 9px; align-items: center; margin-top: 14px;
	padding: 11px 14px; border-radius: var(--fscp-r-sm);
	background: #EEF5FF; border: 1px solid #D6E6FF;
	font-size: .86rem; font-weight: 600; color: var(--fscp-dark);
}
.fscp-pagar__estado--ok { background: #E9F9EF; border-color: #B7EBC9; color: #14713A; }
.fscp-pagar__estado--erro { background: #FEF2F2; border-color: #FBD5D5; color: #B91C1C; }
.fscp-girando {
	flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid #C7DBFF; border-top-color: var(--fscp-primary);
	animation: fscp-gira .8s linear infinite;
}
@keyframes fscp-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fscp-girando { animation-duration: 3s; } }

.fscp-pago {
	text-align: center; padding: 26px 20px;
	background: linear-gradient(180deg, #E9F9EF, #FFFFFF);
	border: 1.5px solid #B7EBC9; border-radius: var(--fscp-r-lg);
}
.fscp-pago__selo {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin-bottom: 10px;
	border-radius: 50%; color: #FFFFFF; background: var(--fscp-ok);
	box-shadow: 0 8px 20px -10px rgba(22, 163, 74, .8);
}
.fscp-pago__selo .fscp-i { width: 30px; height: 30px; stroke-width: 2.5; vertical-align: 0; }
.fscp-pago h2 { color: #14713A; font-size: 1.25rem; margin: 0 0 6px; }
.fscp-pago p { margin: 0 auto 4px; max-width: 46ch; font-size: .9rem; color: var(--fscp-ink); line-height: 1.55; }
.fscp-btn[disabled], .fscp-btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

/* Escolha de quantos pets (tela de planos e cadastro) ---------------------- */
.fscp-qtd { display: flex; flex-wrap: wrap; gap: 8px; }
.fscp-qtd__op { position: relative; margin: 0; }
.fscp-qtd__op input { position: absolute; opacity: 0; width: 0; height: 0; }
.fscp-qtd__op span {
	display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px;
	border: 1.5px solid var(--fscp-line); border-radius: var(--fscp-r-sm);
	background: #FBFDFF; font-weight: 800; color: var(--fscp-ink); cursor: pointer; transition: .15s;
}
.fscp-qtd__op:hover span { border-color: var(--fscp-accent); }
.fscp-qtd__op input:checked + span {
	border-color: var(--fscp-primary); background: linear-gradient(135deg, var(--fscp-primary), var(--fscp-accent));
	color: #fff; box-shadow: 0 10px 20px -12px var(--fscp-primary);
}
.fscp-qtd__op input:focus-visible + span { outline: 2px solid var(--fscp-primary); outline-offset: 2px; }
.fscp-resumo-plano {
	margin-top: 14px; padding: 14px 16px; border-radius: var(--fscp-r-sm);
	background: #EEF5FF; border: 1px solid #D6E6FF;
}
.fscp-resumo-plano strong { font-size: 1.45rem; color: var(--fscp-primary); display: block; line-height: 1.1; }
.fscp-resumo-plano span { display: block; margin-top: 4px; font-size: .82rem; color: var(--fscp-muted); }

/* Idade calculada ao vivo -------------------------------------------------- */
.fscp-idade {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin-top: 10px; padding: 10px 13px;
	border-radius: var(--fscp-r-sm); border: 1px solid #D6E6FF; background: #EEF5FF;
}
.fscp-idade__num {
	font-weight: 800; font-size: .95rem; color: var(--fscp-dark);
	font-variant-numeric: tabular-nums;
}
.fscp-idade__fase {
	font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
	background: #fff; border: 1px solid var(--fscp-line); color: var(--fscp-primary);
}
.fscp-idade__aniv { font-size: .78rem; color: var(--fscp-muted); font-weight: 600; }
.fscp-idade__aniv .fscp-i { color: var(--fscp-accent); margin-right: 3px; }
.fscp-idade--erro .fscp-i { color: #B91C1C; }
.fscp-idade__aniv:empty { display: none; }
.fscp-idade--filhote { background: #FFF7E8; border-color: #FBE3B3; }
.fscp-idade--filhote .fscp-idade__fase { color: #B45309; }
.fscp-idade--idoso { background: #F4F0FF; border-color: #DCD2FB; }
.fscp-idade--idoso .fscp-idade__fase { color: #6D28D9; }
.fscp-idade--erro { background: #FEF2F2; border-color: #FBD5D5; }
.fscp-idade--erro .fscp-idade__num { color: #B91C1C; }

/* Métrica de peso ideal por raça ------------------------------------------ */
.fscp-metrica {
	display: flex; gap: 14px; align-items: flex-start;
	padding: 16px 18px; margin-bottom: 18px;
	border-radius: var(--fscp-r-lg); border: 1.5px solid var(--fscp-line);
	background: var(--fscp-surface); box-shadow: var(--fscp-shadow);
}
.fscp-metrica__icone {
	flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center; background: #EEF5FF; color: var(--fscp-primary);
}
.fscp-metrica__corpo { flex: 1 1 auto; min-width: 0; }
.fscp-metrica__corpo > strong { display: block; font-size: 1rem; color: var(--fscp-dark); margin-bottom: 3px; }
.fscp-metrica__corpo > p { margin: 0 0 10px; font-size: .88rem; line-height: 1.55; color: var(--fscp-ink); }
.fscp-metrica__nota { display: block; margin-top: 8px; font-size: .76rem; color: var(--fscp-muted); line-height: 1.45; }

.fscp-metrica--ok { border-color: #B7EBC9; background: linear-gradient(180deg, #F2FCF6, #fff); }
.fscp-metrica--ok .fscp-metrica__icone { background: #E9F9EF; color: #14713A; }
.fscp-metrica--ok .fscp-metrica__corpo > strong { color: #14713A; }
.fscp-metrica--aviso { border-color: #FBE3B3; background: linear-gradient(180deg, #FFFAF0, #fff); }
.fscp-metrica--aviso .fscp-metrica__icone { background: #FEF3DC; color: #B45309; }
.fscp-metrica--aviso .fscp-metrica__corpo > strong { color: #B45309; }
.fscp-metrica--perigo { border-color: #FBD5D5; background: linear-gradient(180deg, #FFF6F6, #fff); }
.fscp-metrica--perigo .fscp-metrica__icone { background: #FEE2E2; color: #B91C1C; }
.fscp-metrica--perigo .fscp-metrica__corpo > strong { color: #B91C1C; }
.fscp-metrica--info { border-color: #D6E6FF; }
.fscp-metrica--neutro .fscp-metrica__icone { background: #F1F5FB; color: var(--fscp-muted); }
.fscp-metrica__icone .fscp-i,
.fscp-pendencia__icone .fscp-i { width: 20px; height: 20px; vertical-align: 0; }

/* Régua da faixa saudável */
.fscp-regua { margin: 4px 0 2px; }
.fscp-regua__faixa {
	position: relative; display: block; height: 10px; border-radius: 999px;
	background: linear-gradient(90deg, #FBBF24 0%, #34D399 18%, #34D399 82%, #FBBF24 100%);
}
.fscp-regua__faixa i {
	position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
	background: #fff; border: 3px solid var(--fscp-dark);
	transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(14, 42, 92, .3);
}
.fscp-regua__faixa i.fora { border-color: var(--fscp-danger); }
.fscp-regua__legenda {
	display: flex; justify-content: space-between; margin-top: 6px;
	font-size: .73rem; color: var(--fscp-muted); font-variant-numeric: tabular-nums;
}
.fscp-regua__legenda span:nth-child(2) { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
@media (max-width: 520px) {
	.fscp-metrica { flex-direction: column; gap: 10px; }
}

/* Link da cobrança, ao lado do copia e cola ------------------------------- */
.fscp-pagar__links {
	display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.fscp-pagar__links .fscp-btn { flex: 1 1 auto; text-align: center; }
.fscp-pix__codigo + .fscp-pagar__links { margin-top: 10px; }
.fscp-pix__codigo input#fscp-pix-link {
	font-family: inherit; font-size: .8rem;
}
@media (max-width: 520px) {
	.fscp-pagar__links { flex-direction: column; }
	.fscp-pix__codigo { flex-wrap: wrap; }
	.fscp-pix__codigo .fscp-btn { width: 100%; }
}

/* ==========================================================================
   Janela do Pix e migração de plano
   ========================================================================== */
.fscp-modal--pix {
	max-width: 780px; position: relative;
	background: var(--fscp-surface); padding: 26px 24px 24px;
}
.fscp-modal--pix .fscp-modal__fechar-form { position: absolute; top: 10px; right: 12px; margin: 0; }
.fscp-modal--pix .fscp-modal__fechar { font-size: 1.7rem; }

.fscp-janela__titulo { font-size: 1.2rem; margin: 0 0 16px; padding-right: 32px; }
.fscp-janela__titulo .fscp-i { color: var(--fscp-primary); margin-right: 4px; }

.fscp-janela__carregando {
	display: flex; align-items: center; gap: 10px; justify-content: center;
	padding: 40px 20px; color: var(--fscp-muted); font-weight: 600;
}

/* Cabeçalho: quanto e do quê */
.fscp-janela__resumo {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
	padding: 14px 16px; margin-bottom: 14px;
	border-radius: var(--fscp-r); background: #EEF5FF; border: 1px solid #D6E6FF;
}
.fscp-janela__valor {
	font-size: 2rem; font-weight: 900; line-height: 1; color: var(--fscp-primary);
	font-variant-numeric: tabular-nums;
}
.fscp-janela__detalhe { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fscp-janela__detalhe strong { font-size: .95rem; color: var(--fscp-dark); }
.fscp-janela__detalhe span { font-size: .8rem; color: var(--fscp-muted); line-height: 1.45; }

/* Lista dos pets cobertos */
.fscp-janela__pets { margin-bottom: 16px; }
.fscp-janela__pets ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.fscp-janela__pets li {
	display: flex; align-items: center; gap: 8px; font-size: .88rem;
	padding: 8px 12px; border-radius: var(--fscp-r-sm);
	background: #FBFDFF; border: 1px solid var(--fscp-line);
}
.fscp-janela__vaga { color: var(--fscp-muted); font-style: italic; border-style: dashed !important; }
@media (min-width: 620px) { .fscp-janela__pets ul { grid-template-columns: 1fr 1fr; } }

.fscp-pagar__qrlegenda {
	display: block; margin-top: 8px; font-size: .74rem; color: var(--fscp-muted);
}

/* Opções de plano maior */
.fscp-planos__grade { display: grid; gap: 12px; margin-top: 6px; }
@media (min-width: 620px) { .fscp-planos__grade { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.fscp-plano-op {
	display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
	padding: 16px; border-radius: var(--fscp-r); border: 1.5px solid var(--fscp-line);
	background: #FBFDFF; transition: .15s;
}
.fscp-plano-op:hover { border-color: var(--fscp-primary); box-shadow: var(--fscp-shadow); }
.fscp-plano-op__pets {
	font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	color: var(--fscp-accent);
}
.fscp-plano-op__mes {
	font-size: 1.5rem; font-weight: 900; color: var(--fscp-dark); line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.fscp-plano-op__mes small { font-size: .72rem; font-weight: 600; color: var(--fscp-muted); }
.fscp-plano-op__unit { font-size: .78rem; color: var(--fscp-muted); }
.fscp-plano-op__agora {
	font-size: .8rem; font-weight: 700; color: var(--fscp-primary);
	margin: 6px 0 10px;
}
.fscp-plano-op .fscp-btn { width: 100%; text-align: center; margin-top: auto; }

@media (max-width: 620px) {
	.fscp-modal--pix { padding: 22px 16px 18px; }
	.fscp-janela__valor { font-size: 1.7rem; }
}

/* Ajustes finos da janela do Pix */
.fscp-pix__codigo .fscp-btn { white-space: nowrap; flex: 0 0 auto; }
.fscp-pagar__qr img { max-width: 210px; aspect-ratio: 1 / 1; object-fit: contain; }
.fscp-janela__pets .fscp-janela__vaga { grid-column: 1 / -1; }
.fscp-modal--pix .fscp-pagar__estado { margin-top: 16px; }

/* Conta aberta do upgrade e opções bloqueadas ----------------------------- */
.fscp-plano-op__conta {
	list-style: none; margin: 10px 0 0; padding: 10px 0 0; width: 100%;
	border-top: 1px dashed var(--fscp-line); display: grid; gap: 4px;
}
.fscp-plano-op__conta li {
	display: flex; justify-content: space-between; gap: 10px;
	font-size: .78rem; color: var(--fscp-muted);
}
.fscp-plano-op__conta strong { color: var(--fscp-dark); font-variant-numeric: tabular-nums; }
.fscp-plano-op__conta li:last-child strong { color: var(--fscp-primary); }
.fscp-plano-op__agora small { font-weight: 500; color: var(--fscp-muted); }
.fscp-plano-op__motivo {
	font-size: .76rem; color: var(--fscp-muted); line-height: 1.45;
	margin-top: auto; padding-top: 6px;
}
.fscp-plano-op--bloqueado { opacity: .58; background: #F7F9FC; }
.fscp-plano-op--bloqueado:hover { border-color: var(--fscp-line); box-shadow: none; }

/* Aviso de cobrança simulada (modo de teste) ------------------------------ */
.fscp-simulado {
	margin-top: 14px; padding: 14px 16px; border-radius: var(--fscp-r-sm);
	background: #FFF7E8; border: 1.5px dashed #FBE3B3;
}
.fscp-simulado strong { display: flex; align-items: center; gap: 6px; color: #B45309; font-size: .92rem; margin-bottom: 4px; }
.fscp-simulado p { margin: 0 0 10px; font-size: .82rem; color: var(--fscp-ink); line-height: 1.5; }

/* ==========================================================================
   Menu do avatar (painel do tutor)
   ========================================================================== */
.fscp-painel__perfil { position: relative; display: flex; align-items: center; }

button.fscp-painel__avatar {
	/* As regras antigas do avatar fixavam 36px e cortavam o que passasse
	   disso — o botão precisa crescer para caber a setinha. */
	width: auto; height: auto; overflow: visible;
	display: flex; align-items: center; gap: 6px;
	padding: 3px 8px 3px 3px; border: 0; cursor: pointer;
	background: rgba(255, 255, 255, .14); border-radius: 999px;
	color: #fff; font: inherit; font-weight: 800; line-height: 1;
	transition: background .15s;
}
button.fscp-painel__avatar:hover,
button.fscp-painel__avatar[aria-expanded="true"] { background: rgba(255, 255, 255, .26); }
button.fscp-painel__avatar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
button.fscp-painel__avatar img,
button.fscp-painel__avatar > span {
	width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
	object-fit: cover; display: grid; place-items: center;
	background: rgba(255, 255, 255, .25); font-size: .9rem;
}
.fscp-painel__seta {
	width: 0; height: 0; flex: 0 0 auto;
	border-left: 4px solid transparent; border-right: 4px solid transparent;
	border-top: 5px solid currentColor; opacity: .9;
	transition: transform .15s;
}
button.fscp-painel__avatar[aria-expanded="true"] .fscp-painel__seta { transform: rotate(180deg); }

.fscp-menuperfil {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
	min-width: 232px; padding: 6px;
	background: var(--fscp-surface); border: 1px solid var(--fscp-line);
	border-radius: var(--fscp-r); box-shadow: var(--fscp-shadow-lg);
}
.fscp-menuperfil[hidden] { display: none; }
.fscp-menuperfil__cab {
	padding: 10px 12px 12px; margin-bottom: 4px;
	border-bottom: 1px solid var(--fscp-line);
}
.fscp-menuperfil__cab strong {
	display: block; font-size: .92rem; color: var(--fscp-dark);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fscp-menuperfil__cab span {
	display: block; margin-top: 2px; font-size: .78rem; color: var(--fscp-muted);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fscp-menuperfil a {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border-radius: var(--fscp-r-sm);
	font-size: .88rem; font-weight: 600; color: var(--fscp-ink) !important;
	text-decoration: none; transition: background .12s;
}
.fscp-menuperfil a:hover { background: #EEF5FF; color: var(--fscp-primary) !important; }
.fscp-menuperfil a i { font-style: normal; font-size: 1rem; }
.fscp-menuperfil__sair {
	margin-top: 4px; border-top: 1px solid var(--fscp-line);
	border-radius: 0 0 var(--fscp-r-sm) var(--fscp-r-sm);
	color: #B91C1C !important;
}
.fscp-menuperfil__sair:hover { background: #FEF2F2; color: #B91C1C !important; }

@media (max-width: 480px) {
	button.fscp-painel__avatar { padding: 2px 6px 2px 2px; }
	button.fscp-painel__avatar img,
	button.fscp-painel__avatar > span { width: 30px; height: 30px; flex-basis: 30px; }
	.fscp-menuperfil { min-width: 208px; }
}

/* Página 404 com a marca ---------------------------------------------------- */
.fscp-404 {
	max-width: 620px; margin: 0 auto; text-align: center;
	padding: 40px 20px;
}
.fscp-404__emoji { font-size: 3.4rem; line-height: 1; display: block; margin-bottom: 14px; }
.fscp-404 h1 { font-size: 1.9rem; margin: 0 0 10px; }
.fscp-404 p { color: var(--fscp-muted); font-size: .95rem; line-height: 1.6; margin: 0 auto; max-width: 46ch; }
.fscp-404__acoes {
	display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px;
}
@media (max-width: 480px) {
	.fscp-404 h1 { font-size: 1.5rem; }
	.fscp-404__acoes { flex-direction: column; }
	.fscp-404__acoes .fscp-btn { width: 100%; }
}

/* Peças comuns das tabelas do prontuário e da assinatura ------------------- */
.fscp-tabela__principal {
	display: block; color: var(--fscp-dark); font-weight: 700; line-height: 1.35;
}
.fscp-tabela__sub {
	display: block; margin-top: 2px; font-size: .76rem; color: var(--fscp-muted);
}
.fscp-tabela__valor {
	font-weight: 800; color: var(--fscp-dark); white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Etiqueta de situação/gravidade/tipo */
.fscp-etiqueta {
	display: inline-block; padding: 4px 10px; border-radius: 6px; white-space: nowrap;
	font-size: .73rem; font-weight: 800; letter-spacing: .02em;
	background: #F1F5FB; color: #475569; border: 1px solid #E2E8F0;
}
.fscp-etiqueta--ok     { background: #E9F9EF; color: #14713A; border-color: #B7EBC9; }
.fscp-etiqueta--aviso  { background: #FEF3DC; color: #B45309; border-color: #FBE3B3; }
.fscp-etiqueta--perigo { background: #FEE2E2; color: #B91C1C; border-color: #FBD5D5; }

/* Ações da linha: discretas, ganham cor só quando você chega perto */
.fscp-acoes { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.fscp-acoes form { margin: 0; display: inline-flex; }
.fscp-acao {
	display: inline-grid; place-items: center; width: 32px; height: 32px;
	border: 1px solid transparent; border-radius: 6px; background: transparent;
	cursor: pointer; font-size: .88rem; line-height: 1; text-decoration: none !important;
	opacity: .45; transition: .15s;
}
.fscp-tabela tbody tr:hover .fscp-acao { opacity: .85; }
.fscp-acao:hover { opacity: 1; background: #EEF5FF; border-color: #D6E6FF; }
.fscp-acao:focus-visible { opacity: 1; outline: 2px solid var(--fscp-primary); outline-offset: 1px; }
.fscp-acao--perigo:hover { background: #FEF2F2; border-color: #FBD5D5; }
.fscp-acao--perigo:focus-visible { outline-color: var(--fscp-danger); }

/* Ícones da interface ------------------------------------------------------ */
.fscp-i {
	width: 1.15em; height: 1.15em; flex: 0 0 auto;
	display: inline-block; vertical-align: -0.18em;
}
.fscp-i--sm { width: 1em; height: 1em; }
.fscp-i--lg { width: 1.5em; height: 1.5em; }
.fscp-i--xl { width: 2rem; height: 2rem; stroke-width: 1.5; }

/* Ícones dentro da navegação e das abas ------------------------------------ */
.fscp-nav a .fscp-i { width: 1.35rem; height: 1.35rem; margin-bottom: 2px; }
.fscp-abas__icone { width: 1.05em; height: 1.05em; }
.fscp-menuperfil a .fscp-i { width: 1.05rem; height: 1.05rem; opacity: .75; }
.fscp-menuperfil a:hover .fscp-i { opacity: 1; }
.fscp-pendencia__icone .fscp-i { width: 1.25rem; height: 1.25rem; }
.fscp-tag .fscp-i { width: .95em; height: .95em; margin-right: 3px; }
.fscp-celula-icone { display: inline-flex; align-items: center; gap: 11px; }

/* O icone da categoria ganha um bloco proprio: sem ele o traco fino some no
   meio do texto e a coluna vira uma lista sem ancora visual. */
.fscp-celula-icone__marca {
	flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px;
	display: grid; place-items: center;
	background: #EEF3FA; color: var(--fscp-primary);
}
.fscp-celula-icone__marca .fscp-i { width: 17px; height: 17px; vertical-align: 0; }
.fscp-assinatura-faixa strong .fscp-i { vertical-align: -0.2em; margin-right: 2px; }

/* ---------------------------------------------------------
   Avisos de conta (/painel/ aberto por admin, ou sem tutor)
   Antes era uma frase solta numa pagina branca: cara de site quebrado.
   --------------------------------------------------------- */
.fscp-aviso-conta {
	max-width: 620px;
	margin: 48px auto;
	padding: 40px 32px;
	text-align: center;
	background: var(--fscp-surface);
	border: 1px solid var(--fscp-line);
	border-radius: var(--fscp-r);
	box-shadow: var(--fscp-shadow);
}
.fscp-aviso-conta__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 18px;
	border-radius: var(--fscp-r-sm);
	color: var(--fscp-primary);
	background: rgba(21, 101, 240, .1);
}
.fscp-aviso-conta h1 {
	margin: 0 0 10px;
	font-size: 1.5rem;
	line-height: 1.25;
	text-wrap: balance;
}
.fscp-aviso-conta > p {
	margin: 0 auto;
	max-width: 46ch;
	color: var(--fscp-muted);
	line-height: 1.6;
}
.fscp-aviso-conta strong { color: var(--fscp-ink); }
.fscp-aviso-conta__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 24px;
}
.fscp-aviso-conta__nota {
	margin: 22px auto 0;
	max-width: 46ch;
	font-size: .85rem;
	line-height: 1.55;
}

@media (max-width: 560px) {
	.fscp-aviso-conta { margin: 24px auto; padding: 28px 20px; }
	.fscp-aviso-conta__acoes .fscp-btn { width: 100%; }
}


/* ---------------------------------------------------------
   Agenda dos proximos 90 dias
   A tabela antiga era so texto em quatro colunas: nada distinguia
   um atraso de 13 dias de um cuidado daqui a dois meses.
   --------------------------------------------------------- */
.fscp-tabela--agenda { min-width: 620px; }

/* Larguras: a data e o prazo sao previsiveis, o cuidado fica com a sobra. */
.fscp-tabela--agenda th:nth-child(1), .fscp-tabela--agenda td:nth-child(1) { width: 1%; white-space: nowrap; }
.fscp-tabela--agenda th:nth-child(2), .fscp-tabela--agenda td:nth-child(2) { width: 1%; white-space: nowrap; }
.fscp-tabela--agenda th:nth-child(4), .fscp-tabela--agenda td:nth-child(4) { width: 1%; white-space: nowrap; }

/* Data: numero alinhado por coluna e o dia da semana embaixo. */
.fscp-celula-data { font-variant-numeric: tabular-nums; }
.fscp-data-dia { display: block; font-weight: 700; color: var(--fscp-dark); }
.fscp-data-semana {
	display: block; margin-top: 1px; font-size: .7rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em; color: var(--fscp-muted);
}

/* Faixa de urgencia na borda esquerda da linha. */
.fscp-app .fscp-tabela--agenda > tbody > tr > td:first-child {
	position: relative; padding-left: 22px;
}
.fscp-app .fscp-tabela--agenda > tbody > tr > td:first-child::before {
	content: ''; position: absolute; left: 0; top: 0; bottom: -1px; width: 3px;
	background: transparent;
}
.fscp-app .fscp-tabela--agenda > tbody > tr.fscp-linha--perigo > td:first-child::before { background: var(--fscp-danger); }
.fscp-app .fscp-tabela--agenda > tbody > tr.fscp-linha--aviso  > td:first-child::before { background: var(--fscp-amber); }

/* Etiqueta do prazo: a cor conta a historia antes da leitura. */
.fscp-prazo {
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
	padding: 5px 11px; border-radius: 999px;
	font-size: .76rem; font-weight: 800; letter-spacing: .01em;
	border: 1px solid transparent;
}
.fscp-prazo::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%;
	background: currentColor; flex: 0 0 auto;
}
.fscp-prazo--perigo { background: #FEE2E2; color: #B91C1C; border-color: #FBD5D5; }
.fscp-prazo--aviso  { background: #FEF3DC; color: #B45309; border-color: #FBE3B3; }
.fscp-prazo--perto  { background: #EEF5FF; color: #1D4ED8; border-color: #D6E6FF; }
.fscp-prazo--calmo  { background: #F1F5FB; color: var(--fscp-muted); border-color: #E2E8F0; }
.fscp-prazo--calmo::before { opacity: .55; }

/* No celular a agenda vira lista: quatro colunas nao cabem em 360px. */
@media (max-width: 640px) {
	.fscp-tabela-wrap:has(.fscp-tabela--agenda) { overflow-x: visible; }
	.fscp-tabela--agenda { min-width: 0; }
	.fscp-tabela--agenda thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.fscp-app .fscp-tabela--agenda > tbody > tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 14px 16px 14px 22px; position: relative; border-bottom: 1px solid var(--fscp-line); }
	.fscp-app .fscp-tabela--agenda > tbody > tr:last-child { border-bottom: 0; }
	.fscp-app .fscp-tabela--agenda > tbody > tr > td { display: block; padding: 0; border: 0; }
	.fscp-app .fscp-tabela--agenda > tbody > tr > td:first-child { grid-row: 1 / 3; align-self: start; padding-left: 0; }
	.fscp-app .fscp-tabela--agenda > tbody > tr > td:first-child::before { left: -22px; bottom: 0; }
	.fscp-app .fscp-tabela--agenda > tbody > tr.fscp-linha--mesmo-dia > td:first-child { min-height: 1px; }
	.fscp-tabela--agenda td:nth-child(2) { order: 3; }
	.fscp-tabela--agenda td:nth-child(4) { grid-column: 2; margin-top: 6px; }
	.fscp-celula-icone__marca { flex-basis: 26px; width: 26px; height: 26px; }
}


/* ---------------------------------------------------------
   Carteirinha publica: o prontuario inteiro, secao por secao
   Secao sem registro nao e impressa pelo template.
   --------------------------------------------------------- */
.fscp-publica__baixar {
	display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px;
}
.fscp-publica__baixar .fscp-btn { flex: 1 1 220px; justify-content: center; }

.fscp-publica__secao { margin-top: 16px; }
.fscp-publica__secao .fscp-card__titulo h2 {
	display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem;
}
.fscp-publica__secao .fscp-card__titulo .fscp-i { color: var(--fscp-primary); }

/* Quantos registros a secao tem: responde antes de o olho contar. */
.fscp-publica__conta {
	display: inline-grid; place-items: center; min-width: 22px; height: 22px;
	padding: 0 6px; border-radius: 99px;
	background: #EEF3FA; color: var(--fscp-muted);
	font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
}

.fscp-publica__destaque {
	display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
	margin: 0 0 14px;
}
.fscp-publica__destaque strong {
	font-size: 1.5rem; color: var(--fscp-dark); font-variant-numeric: tabular-nums;
}
.fscp-publica__destaque span { font-size: .82rem; color: var(--fscp-muted); }

@media (max-width: 560px) {
	.fscp-publica__baixar .fscp-btn { flex-basis: 100%; }
}

/* Faixa ambar: 3 dias antes de vencer, antes de virar vermelha */
.fscp-assinatura-faixa--aviso { background: #FFF7E8; border-color: #FBE3B3; color: #8A5200; }

/* ---------------------------------------------------------
   Conta suspensa: o painel inteiro fecha nesta tela
   --------------------------------------------------------- */
.fscp-bloqueio { padding: 8px 0 8px; }

.fscp-bloqueio__aviso {
	display: flex; gap: 14px; align-items: flex-start;
	padding: 18px 20px; margin-bottom: 18px;
	background: #FDECEC; border: 1.5px solid #F3C0C0; border-radius: var(--fscp-r);
	color: #7F1D1D;
}
.fscp-bloqueio__cadeado {
	display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
	border-radius: 12px; background: #F8D4D4; color: #B91C1C;
}
.fscp-bloqueio__cadeado .fscp-i { width: 22px; height: 22px; vertical-align: 0; }
.fscp-bloqueio__aviso h1 { margin: 0 0 4px; font-size: 1.2rem; color: #7F1D1D; }
.fscp-bloqueio__aviso p { margin: 0; font-size: .9rem; line-height: 1.5; }

.fscp-bloqueio__grade { display: grid; gap: 16px; grid-template-columns: 1fr; }

.fscp-bloqueio__pagar { text-align: center; }
.fscp-bloqueio__valor { margin-bottom: 14px; }
.fscp-bloqueio__valor strong {
	display: block; font-size: 2.3rem; line-height: 1.1; color: var(--fscp-dark);
	font-variant-numeric: tabular-nums;
}
.fscp-bloqueio__valor span { font-size: .85rem; color: var(--fscp-muted); }

/* O QR grande e o ponto da tela: tem de dar para ler de longe. */
.fscp-bloqueio__qr {
	display: inline-block; padding: 14px; margin-bottom: 10px;
	background: #fff; border: 1.5px solid var(--fscp-line); border-radius: var(--fscp-r);
}
.fscp-bloqueio__qr img { display: block; width: 240px; height: 240px; image-rendering: pixelated; }
.fscp-bloqueio__dica { margin: 0 0 14px; font-size: .8rem; color: var(--fscp-muted); }

.fscp-bloqueio__auto {
	display: flex; gap: 8px; align-items: flex-start; text-align: left;
	margin: 14px 0 0; padding: 11px 13px; border-radius: var(--fscp-r-sm);
	background: #E9F8EF; color: #14532D; font-size: .82rem; line-height: 1.5;
}
.fscp-bloqueio__auto .fscp-i { flex: 0 0 auto; margin-top: 1px; }

.fscp-bloqueio__seguro h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 6px; }
.fscp-bloqueio__seguro h2 .fscp-i { color: var(--fscp-ok); }
.fscp-bloqueio__lista { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fscp-bloqueio__lista li {
	display: flex; align-items: center; gap: 8px;
	padding: 9px 12px; border-radius: var(--fscp-r-sm);
	background: #F5F8FD; border: 1px solid var(--fscp-line); font-size: .88rem;
}
.fscp-bloqueio__lista .fscp-i { color: var(--fscp-primary); }

.fscp-bloqueio__ajuda { margin-top: 18px; text-align: center; font-size: .85rem; color: var(--fscp-muted); }

@media (min-width: 860px) {
	.fscp-bloqueio__grade { grid-template-columns: 1.05fr .95fr; align-items: start; }
}

/* Excluir a conta, oferecido so a quem cancelou */
.fscp-bloqueio__apagar { margin: 14px 0 0; font-size: .84rem; color: var(--fscp-muted); }
.fscp-bloqueio__apagar a { color: var(--fscp-danger); text-decoration: underline; }