/*
 * La ficha de una mascota y su cara de «¿la encontraste?» (A-98, A-101).
 *
 * El marco y los módulos son de `card-shell.css`, el mismo lenguaje que la
 * VIN Card y la tarjeta de contacto. Aquí va la paleta de Mascota y poco más.
 *
 * Paleta (A-101). El encargo proponía verde bosque #24584A, marfil #F6F2E9 y
 * arena #D9B98C; el verde coincide con el token canónico de identidad
 * (`--poc-id-pet-support`, tokens.css). El detalle cálido usa el albaricoque
 * canónico `--poc-id-pet-accent` #e9ae76 en lugar de la arena: es el que ya
 * pinta Mascota en el home y en su portada, y una segunda tierra rompería la
 * familia. El marfil va como superficie suave. El fondo exterior es el gris
 * neutro de BIZ y VIN.
 *
 * Contrastes (WCAG 2.2):
 *   blanco sobre verde #24584a ........ 8,2:1  (botón principal)
 *   verde #24584a sobre blanco ........ 8,2:1  (botón secundario, rótulos)
 *   tinta #16283f sobre marfil ........ 13,3:1 (avisos)
 *   gris #55627a sobre blanco ......... 6,2:1  (etiquetas)
 *   El albaricoque solo rellena rayas y detalles: nunca texto (1,95:1).
 */

.poc-cp--pet {
	--cp-bg: #f2f4f7;
	--cp-ink: #16283f;
	--cp-muted: #55627a;
	--cp-line: #e4e8ee;
	--cp-card-line: #d9dfe6;
	--cp-brand: #24584a;
	--cp-brand-ink: #ffffff;
	--cp-soft: #f6f2e9;
	--cp-rule: #e9ae76;
	--cp-focus: #24584a;
	--cp-notice-bg: #f6f2e9;
	--cp-notice-line: #e9ae76;
}

/* El compartir, fuera del contacto: una acción secundaria, sola y centrada. */
.poc-pet-share {
	display: flex;
	justify-content: center;
	margin: 0 0 8px;
}

/* ── «¿La encontraste?» ──────────────────────────────────────────────────── */

.poc-pet-lost__reward {
	display: flex;
	align-items: center;
	gap: 8px;
}

.poc-pet-lost__reward svg { flex: none; color: var(--cp-brand); }

/* Llamar, con el número a la vista: se pulsa con prisa. */
.poc-pet-lost__call {
	justify-content: flex-start;
	min-height: 64px;
	border-radius: 16px;
	text-align: left;
}

.poc-pet-lost__call > span { display: flex; flex-direction: column; }
.poc-pet-lost__label { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.poc-pet-lost__num { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.poc-pet-lost__call svg { width: 24px; height: 24px; }

/* ── Se ha perdido (propuesta del 10-14, §6 E) ───────────────────────────
   Arriba y en rojo de aviso: es lo primero que tiene que ver quien abre la
   ficha ese día. Desaparece cuando el dueño lo apaga. */
.poc-pet-missing {
	border: 2px solid #b00020;
}

.poc-pet-missing__title {
	margin: 0 0 6px;
	color: #b00020;
	font-size: 22px;
	font-weight: 800;
}

.poc-pet-missing p { margin: 4px 0; }

/* Sin variante oscura: la ficha tiene una sola paleta clara (`--cp-*`), y el
   rosa pensado para fondo oscuro quedaba a 2,2:1 sobre la tarjeta blanca
   cuando el teléfono estaba en modo oscuro (prueba con perfiles, 2026-10-25). */

/* La prueba del dueño: se dice claro que no cuenta. */
.poc-pet-lost__test {
	text-align: center;
	font-weight: 700;
}

/* La ubicación: secundaria, debajo de llamar y escribir. */
.poc-pet-lost__loc {
	margin-top: 14px;
	text-align: center;
}

.poc-pet-lost__loc-hint,
.poc-pet-lost__loc-msg {
	margin: 6px 0 0;
	font-size: 13px;
	opacity: .8;
}

/* ── La demo (A-97): el recorrido por las cuatro caras de la placa ─────────
   Solo en la ficha de ejemplo. Sin colores propios: las variables del
   marco, así el bloque oscuro de `card-shell.css` vale también aquí. */
.poc-pet-demo-note a {
	color: inherit;
	font-weight: 700;
	white-space: nowrap;
}

.poc-pet-demo {
	scroll-margin-top: 16px;
}

.poc-pet-demo__steps {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: poc-pet-demo;
}

.poc-pet-demo__steps > li {
	position: relative;
	padding: 14px 0 14px 40px;
	border-top: 1px solid var(--cp-line);
	counter-increment: poc-pet-demo;
}

.poc-pet-demo__steps > li::before {
	content: counter(poc-pet-demo);
	position: absolute;
	top: 14px;
	left: 0;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--cp-brand);
	color: var(--cp-brand-ink);
	font-size: 14px;
	font-weight: 800;
}

.poc-pet-demo__steps h3 {
	margin: 2px 0 4px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
}

.poc-pet-demo__steps p {
	margin: 0 0 10px;
	color: var(--cp-muted);
	font-size: 15px;
	text-wrap: pretty;
}

.poc-pet-demo__steps .poc-cp-acts { margin: 0; }

/* El QR, para quien mira desde el ordenador y quiere probarlo en su teléfono. */
.poc-pet-demo__qr {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-top: 12px;
}

.poc-pet-demo__qr img {
	flex: none;
	width: 112px;
	height: 112px;
	padding: 6px;
	border-radius: 10px;
	background: #fff;
	image-rendering: pixelated;
}

.poc-pet-demo__qr p { margin: 0; font-size: 14px; }

/* ── Su forma de ser, galería y redes (A-102) ───────────────────────────── */

/* Gustos y miedos son frases, no datos: etiqueta encima y texto a la izquierda. */
.poc-pet-about .poc-cp-row {
	display: grid;
	gap: 4px;
}

.poc-pet-about .poc-cp-row dt { max-width: none; }

.poc-pet-about .poc-cp-row dd {
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
}

.poc-pet-about__lead {
	margin: 0 0 12px;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--cp-ink);
}

/* Tres por fila desde el móvil: con seis fotos, dos filas iguales. */
.poc-pet-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.poc-pet-gallery__grid a {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--cp-soft);
}

.poc-pet-gallery__grid a:focus-visible {
	outline: 3px solid var(--cp-focus);
	outline-offset: 2px;
}

.poc-pet-gallery__grid img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.poc-pet-social__icon {
	flex: none;
	width: 18px;
	height: 18px;
}

/* Perdida: la foto, más baja, para que «Llamar» suba a la primera pantalla
   de un teléfono pequeño (a 375 px quedaba a ~970 px del tope). */
.poc-pet-id--lost .poc-cp-media {
	height: 128px;
}