/**
 * Fase 96 (96_IMPLEMENTACION_PWA_BASICA_LOCAL_2026-09-08.md): estilos
 * mínimos de infraestructura PWA. NO es el rediseño visual tipo app
 * (Fase 97) — solo safe-area base y el banner de actualización del
 * Service Worker.
 *
 * env(safe-area-inset-*) devuelve 0px mientras el <meta viewport> de
 * Jobster Core no incluya viewport-fit=cover (ver class-pwa-head.php);
 * estas variables quedan listas para cuando esa decisión se resuelva en
 * Fase 97, sin efecto visual alguno mientras tanto.
 */

:root {
	--ckt-pwa-safe-top: env( safe-area-inset-top, 0px );
	--ckt-pwa-safe-bottom: env( safe-area-inset-bottom, 0px );
}

.ckt-pwa-update-banner {
	display: none;
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc( var( --ckt-pwa-safe-bottom ) + 12px );
	z-index: 9999;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var( --ckt-secondary, #102447 );
	color: #fff;
	border-radius: 10px;
	padding: 12px 16px;
	box-shadow: 0 4px 16px rgba( 16, 36, 71, 0.25 );
	font-family: var( --ckt-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif );
	font-size: 0.875rem;
}

.ckt-pwa-update-banner.ckt-pwa-update-visible {
	display: flex;
}

.ckt-pwa-update-boton {
	flex-shrink: 0;
	background: var( --ckt-primary, #0875ED );
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px 14px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.ckt-pwa-update-boton:hover,
.ckt-pwa-update-boton:focus {
	filter: brightness( 1.1 );
}