/* Avisos de la app: tarjeta en la ficha, hoja inferior (móvil) y tarjeta con QR (escritorio).
   Mismo archivo en super, perfumon y comidanimal; el color sale del tema (--fc-primary). */
:root {
	--app-acento: var(--fc-primary, #2563eb);
	--app-texto: #1f2937;
	--app-gris: #6b7280;
	--app-borde: #e5e7eb;
	--app-suave: #f3f6fb;
	--app-verde: #15803d;
	--app-fondo: #fff;
}

/* Algunos temas (el CSS purgado de perfumon/comidanimal) no ponen border-box a todo */
.app-ficha, .app-ficha *, .app-hoja, .app-hoja *, .app-qr, .app-qr * { box-sizing: border-box; }

/* Qué enlace ve cada plataforma (data-app-plataforma lo pone app-promo.js) */
.app-solo-ios { display: none !important; }
[data-app-plataforma="ios"] .app-solo-ios { display: inline !important; }
[data-app-plataforma="ios"] .app-promo-btn.app-solo-ios { display: block !important; }
[data-app-plataforma="ios"] .app-solo-android,
[data-app-plataforma="ios"] .app-solo-no-ios { display: none !important; }
[data-app-plataforma="ios"]:not([data-app-ios]) .app-ficha { display: none; }

.app-promo-icono { width: 44px; height: 44px; border-radius: 11px; flex: none; background: #fde3d4; }
.app-promo-btn {
	display: block; width: 100%; padding: .7rem 1rem; border: 0; border-radius: .6rem;
	background: var(--app-acento); color: #fff; font-weight: 600; text-align: center; text-decoration: none; line-height: 1.2;
	cursor: pointer;
}
.app-promo-btn:hover, .app-promo-btn:focus { color: #fff; filter: brightness(.92); }
.app-promo-btn:focus-visible { outline: 3px solid var(--app-acento); outline-offset: 2px; }
.app-promo-btn--texto { background: transparent; color: var(--app-gris); font-weight: 500; padding: .5rem; }
.app-promo-btn--texto:hover, .app-promo-btn--texto:focus { color: var(--app-texto); filter: none; }

/* ---------- Tarjeta en la ficha ---------- */
.app-ficha {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center;
	margin: 1rem 0; padding: 1rem; border: 1.5px dashed var(--app-acento); border-radius: .9rem; background: var(--app-suave);
	color: var(--app-texto);
}
.app-ficha__icono {
	width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
	background: var(--app-acento); color: #fff;
}
.app-ficha__titulo { margin: 0; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.app-ficha__desc { margin: .2rem 0 0; color: var(--app-gris); font-size: .875rem; }
.app-ficha__accion { display: flex; align-items: center; gap: .6rem; }
.app-ficha__accion .app-promo-btn { width: auto; white-space: nowrap; }
.app-ficha__accion .app-promo-icono { width: 40px; height: 40px; border-radius: 10px; }
@media (max-width: 575.98px) {
	.app-ficha { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
	.app-ficha__accion { grid-column: 1 / -1; }
	.app-ficha__accion .app-promo-btn { flex: 1; }
}

/* ---------- Hoja inferior ---------- */
.app-hoja { position: fixed; inset: 0; z-index: 1060; }
.app-hoja__fondo { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); opacity: 0; transition: opacity .3s ease; }
.app-hoja__panel {
	position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto;
	display: flex; flex-direction: column; gap: .8rem;
	padding: .5rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px));
	background: var(--app-fondo); color: var(--app-texto); border-radius: 1.25rem 1.25rem 0 0;
	box-shadow: 0 -10px 30px rgba(0, 0, 0, .15);
	max-height: calc(100% - 2rem); overflow-y: auto;
	transform: translateY(105%); transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.app-hoja.is-open .app-hoja__fondo { opacity: 1; }
.app-hoja.is-open .app-hoja__panel { transform: none; }
.app-hoja__asa { width: 40px; height: 4px; border-radius: 4px; background: var(--app-borde); align-self: center; }
.app-promo-app { display: flex; align-items: center; gap: .7rem; }
.app-promo-app b { display: block; }
.app-promo-app span { color: var(--app-gris); font-size: .8rem; }
.app-hoja__titulo { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.app-hoja__precios { display: flex; flex-direction: column; gap: .25rem; padding: .6rem .75rem; border-radius: .6rem; background: var(--app-suave); font-variant-numeric: tabular-nums; }
.app-hoja__precios > div { display: flex; justify-content: space-between; gap: 1rem; }
.app-hoja__precios > div:first-child { color: var(--app-verde); font-weight: 700; }
.app-promo-ventajas { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: 0; padding: 0; list-style: none; color: var(--app-gris); font-size: .8rem; }
.app-promo-ventajas li::before { content: "✓ "; color: var(--app-verde); font-weight: 700; }

/* ---------- Tarjeta con QR (escritorio) ---------- */
.app-qr {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1050; width: 360px; max-width: calc(100vw - 2.5rem);
	display: grid; grid-template-columns: 104px 1fr; gap: 1rem; padding: 1rem 1.1rem;
	background: var(--app-fondo); color: var(--app-texto); border: 1px solid var(--app-borde); border-radius: 1rem;
	box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
	opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .35s ease;
}
.app-qr.is-open { opacity: 1; transform: none; }
.app-qr__codigo { width: 104px; height: 104px; display: block; }
.app-qr__titulo { margin: 0 1.2rem .25rem 0; font-weight: 700; line-height: 1.25; }
.app-qr__texto { margin: 0; color: var(--app-gris); font-size: .82rem; line-height: 1.4; }
.app-qr__link { display: inline-block; margin: .45rem .8rem 0 0; color: var(--app-acento); font-weight: 600; font-size: .82rem; text-decoration: none; }
.app-qr__link:hover { text-decoration: underline; }
.app-qr__cerrar {
	position: absolute; top: .35rem; right: .5rem; width: 2rem; height: 2rem; border: 0; background: none;
	color: var(--app-gris); font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: .4rem;
}
.app-qr__cerrar:hover { color: var(--app-texto); background: var(--app-suave); }

@media (prefers-reduced-motion: reduce) {
	.app-hoja__fondo, .app-hoja__panel, .app-qr { transition: none; }
}