/*
 * HCPI · PWA: página «Instalar la app» ([hcpi_pwa]), barra de instalación, «Actualizar»,
 * franja de copia guardada y botones «Guardar sin conexión» de las alarmas.
 * Usa los tokens de assets/hcpi-componentes.css (--hc-*); «html body» gana al kit de Elementor.
 */

/* Dentro de la app no se ofrece instalarla (los enlaces «Instalar la app» pasan a «Sin conexión»
   en hcpi-pwa.js). */
@media (display-mode: standalone), (display-mode: minimal-ui) {
	html body .hcpi-pwa-barra { display: none !important; }
}

/* ---------- Página ---------- */
html body .hcpi-pwa { max-width: 1200px; margin: 0 auto; padding: 0 20px 96px; font: 400 16px/26px var(--hc-cuerpo); color: var(--hc-texto); }
html body .hcpi-pwa [hidden] { display: none !important; }
html body .hcpi-pwa-hero { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; padding: 56px 0 64px; }
html body .hcpi-pwa-h1 { margin: 0 0 16px; font: 600 44px/52px var(--hc-titular); color: var(--hc-titulo); letter-spacing: -0.01em; }
html body .hcpi-pwa-lead { margin: 0 0 28px; max-width: 40em; font-size: 19px; line-height: 30px; color: var(--hc-texto); }
html body .hcpi-pwa-accion { margin: 0 0 28px; min-height: 56px; }
html body .hcpi-pwa-accion .hcpi-c-aviso p { margin: 0; }
html body .hcpi-pwa-accion .hcpi-c-aviso .hcpi-c-aviso__titulo { margin: 0 0 4px; }
html body .hcpi-pwa-instalar { min-height: 56px; padding: 0 32px; font-size: 17px; }

/* Solo se ve el bloque del estado actual (lo pone hcpi-pwa.js en data-hcpi-pwa-estado). */
html body .hcpi-pwa .hcpi-pwa-si { display: none; }
html body .hcpi-pwa[data-hcpi-pwa-estado="disponible"] .hcpi-pwa-si[data-si~="disponible"],
html body .hcpi-pwa[data-hcpi-pwa-estado="instalada"] .hcpi-pwa-si[data-si~="instalada"],
html body .hcpi-pwa[data-hcpi-pwa-estado="en-app"] .hcpi-pwa-si[data-si~="en-app"],
html body .hcpi-pwa[data-hcpi-pwa-estado="ios"] .hcpi-pwa-si[data-si~="ios"],
html body .hcpi-pwa[data-hcpi-pwa-estado="otra-app"] .hcpi-pwa-si[data-si~="otra-app"],
html body .hcpi-pwa[data-hcpi-pwa-estado="manual"] .hcpi-pwa-si[data-si~="manual"] { display: block; }
html body .hcpi-pwa[data-hcpi-pwa-estado] .hcpi-c-aviso.hcpi-pwa-si[data-si] { display: none; }
html body .hcpi-pwa[data-hcpi-pwa-estado="instalada"] .hcpi-c-aviso.hcpi-pwa-si[data-si~="instalada"],
html body .hcpi-pwa[data-hcpi-pwa-estado="en-app"] .hcpi-c-aviso.hcpi-pwa-si[data-si~="en-app"],
html body .hcpi-pwa[data-hcpi-pwa-estado="otra-app"] .hcpi-c-aviso.hcpi-pwa-si[data-si~="otra-app"],
html body .hcpi-pwa[data-hcpi-pwa-estado="manual"] .hcpi-c-aviso.hcpi-pwa-si[data-si~="manual"] { display: grid; }

html body .hcpi-pwa-ios { padding: 20px 24px; border: 1px solid var(--hc-borde); border-radius: var(--hc-r-m); background: var(--hc-blanco); box-shadow: var(--hc-sombra); }
html body .hcpi-pwa-ios__titulo { margin: 0 0 12px; font: 600 17px/24px var(--hc-titular); color: var(--hc-titulo); }
html body .hcpi-pwa-pasos { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
html body .hcpi-pwa-pasos li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; margin: 0; }
html body .hcpi-pwa-pasos__n { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--hc-titulo); color: #FFFFFF; font: 600 15px/1 var(--hc-titular); }
html body .hcpi-pwa-tecla { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 2px; border: 1px solid var(--hc-borde-fuerte); border-radius: 8px; background: var(--hc-fondo-suave); color: var(--hc-accion); vertical-align: middle; }

html body .hcpi-pwa-ventajas { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
html body .hcpi-pwa-ventajas li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; margin: 0; color: var(--hc-texto); }
html body .hcpi-pwa-ventajas svg { color: var(--hc-ok); margin-top: 2px; }
html body .hcpi-pwa-ventajas strong { color: var(--hc-titulo); }

/* Teléfono ilustrativo */
html body .hcpi-pwa-telefono { justify-self: center; width: 280px; height: 520px; padding: 14px; border-radius: 44px; background: var(--hc-titulo); box-shadow: 0 24px 48px rgba(38, 96, 147, 0.28); }
html body .hcpi-pwa-telefono__pantalla { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; border-radius: 32px; background: linear-gradient(180deg, #FFFFFF 0%, var(--hc-fondo) 100%); }
html body .hcpi-pwa-telefono__pantalla img { width: 132px; height: 132px; border-radius: 30px; box-shadow: var(--hc-sombra-alta); }
html body .hcpi-pwa-telefono__pantalla span { font: 600 20px/1 var(--hc-titular); color: var(--hc-titulo); }

/* Secciones */
html body .hcpi-pwa-seccion { padding: 48px 0 0; scroll-margin-top: 96px; }
html body .hcpi-pwa-modulos { margin: 0 0 40px; }
html body .hcpi-pwa-sc-estado { margin: 0; font-size: 17px; }
html body .hcpi-pwa-sc-estado strong { color: var(--hc-titulo); }
html body .hcpi-pwa-nota { margin: 0; font-size: 14px; line-height: 22px; color: var(--hc-secundario); }
html body .hcpi-pwa-nota:empty { display: none; }
html body .hcpi-pwa-progreso__barra { height: 10px; border-radius: 999px; background: var(--hc-fondo); overflow: hidden; }
html body .hcpi-pwa-progreso__barra span { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--hc-accion); transition: width 0.3s ease; }
html body .hcpi-pwa-progreso__texto { margin: 8px 0 0; font-size: 14px; color: var(--hc-secundario); }

html body .hcpi-pwa-alarmas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
html body .hcpi-pwa-alarma { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; margin: 0; padding: 14px 16px 14px 20px; border: 1px solid var(--hc-borde); border-radius: var(--hc-r-s); background: var(--hc-blanco); }
html body .hcpi-pwa-alarma__nombre { font: 600 16px/22px var(--hc-titular); color: var(--hc-titulo); }
html body .hcpi-pwa-alarma__dato { grid-row: 2; font-size: 14px; line-height: 20px; color: var(--hc-secundario); }
html body .hcpi-pwa-alarma__boton { grid-row: 1 / 3; grid-column: 2; min-height: 40px; padding: 0 18px; font-size: 15px; }
html body .hcpi-pwa-alarma--ok { border-color: #BFE0C8; background: var(--hc-ok-fondo); }
html body .hcpi-pwa-alarma--ok .hcpi-pwa-alarma__dato { color: var(--hc-ok-texto); }

html body .hcpi-pwa-instrucciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
html body .hcpi-pwa-lista { margin: 0; padding-left: 20px; }
html body .hcpi-pwa-lista li { margin: 0 0 6px; }

@media (max-width: 1024px) {
	html body .hcpi-pwa-hero { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 40px; }
	html body .hcpi-pwa-telefono { display: none; }
	html body .hcpi-pwa-instrucciones { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	html body .hcpi-pwa { padding: 0 16px 64px; }
	html body .hcpi-pwa-h1 { font-size: 32px; line-height: 40px; }
	html body .hcpi-pwa-lead { font-size: 17px; line-height: 27px; }
	html body .hcpi-pwa-instalar { width: 100%; }
	html body .hcpi-pwa-alarmas__lista { grid-template-columns: 1fr; }
	html body .hcpi-pwa-modulos .hcpi-c-botonera .hcpi-c-boton { width: 100%; }
}

/* ---------- Avisos flotantes ---------- */
html body .hcpi-pwa-toast, html body .hcpi-pwa-barra, html body .hcpi-pwa-chip { position: fixed; z-index: 99990; font: 400 15px/22px var(--hc-cuerpo); }
html body .hcpi-pwa-toast { left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100vw - 32px); padding: 12px 12px 12px 20px; border-radius: 999px; background: var(--hc-titulo); color: #FFFFFF; box-shadow: var(--hc-sombra-alta); }
html body .hcpi-pwa-toast__boton { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: #FFFFFF; color: var(--hc-titulo); font: 700 15px/1 var(--hc-cuerpo); cursor: pointer; }
html body .hcpi-pwa-toast__boton:hover { background: var(--hc-fondo); color: var(--hc-titulo); }

html body .hcpi-pwa-barra { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--hc-borde); border-radius: var(--hc-r-m); background: #FFFFFF; box-shadow: var(--hc-sombra-alta); transform: translateY(140%); transition: transform 0.25s ease; }
html body .hcpi-pwa-barra--visible { transform: none; }
html body .hcpi-pwa-barra img { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; }
html body .hcpi-pwa-barra__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
html body .hcpi-pwa-barra__texto strong { font: 600 15px/20px var(--hc-titular); color: var(--hc-titulo); }
html body .hcpi-pwa-barra__texto span { font-size: 14px; line-height: 20px; color: var(--hc-secundario); }
html body .hcpi-pwa-barra__boton { flex-shrink: 0; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--hc-accion); color: #FFFFFF; font: 700 15px/1 var(--hc-cuerpo); cursor: pointer; }
html body .hcpi-pwa-barra__boton:hover { background: var(--hc-accion-hover); color: #FFFFFF; }
html body .hcpi-pwa-barra__cerrar { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--hc-secundario); cursor: pointer; }
html body .hcpi-pwa-barra__cerrar:hover { background: var(--hc-fondo); color: var(--hc-titulo); }

html body .hcpi-pwa-chip { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px; background: #FFFFFF; color: var(--hc-titulo); border: 1px solid var(--hc-borde); box-shadow: var(--hc-sombra); }

/* Franja de copia guardada, encima de la cabecera */
html body .hcpi-pwa-franja { position: sticky; top: 0; z-index: 99991; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 10px 16px; background: var(--hc-alerta-fondo); border-bottom: 1px solid #EEE59A; color: var(--hc-alerta-texto); font: 400 15px/22px var(--hc-cuerpo); text-align: center; }
html body .hcpi-pwa-franja strong { font-weight: 700; }
html body .hcpi-pwa-franja__boton { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--hc-accion); color: #FFFFFF; font: 700 14px/1 var(--hc-cuerpo); cursor: pointer; }

/* Botón «Guardar sin conexión» debajo de cada alarma */
html body .hcpi-pwa-guardar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 4px; }
html body .hcpi-pwa-guardar__boton { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--hc-accion); border-radius: 999px; background: #FFFFFF; color: var(--hc-accion); font: 700 14px/1 var(--hc-cuerpo); cursor: pointer; }
html body .hcpi-pwa-guardar__boton:hover { background: var(--hc-info-fondo); color: var(--hc-accion-hover); }
html body .hcpi-pwa-guardar__boton:disabled { opacity: 0.6; cursor: progress; }
html body .hcpi-pwa-guardar__texto { font: 400 14px/20px var(--hc-cuerpo); color: var(--hc-secundario); }
html body .hcpi-pwa-guardar--ok .hcpi-pwa-guardar__boton { border-color: var(--hc-borde-fuerte); color: var(--hc-secundario); }
html body .hcpi-pwa-guardar--ok .hcpi-pwa-guardar__texto { color: var(--hc-ok-texto); }
html body .hcpi-pwa-toast button:focus-visible, html body .hcpi-pwa-barra button:focus-visible, html body .hcpi-pwa-guardar__boton:focus-visible, html body .hcpi-pwa-franja__boton:focus-visible { outline: 3px solid var(--hc-titulo); outline-offset: 2px; }

/* En el celular, por encima de la barra inferior fija del tema (.hcpi-barra, 84 px). */
@media (max-width: 767px) {
	html body:has(.hcpi-barra) .hcpi-pwa-toast,
	html body:has(.hcpi-barra) .hcpi-pwa-chip { bottom: calc(var(--hcpi-barra-alto, 84px) + 12px + env(safe-area-inset-bottom)); }
	html body:has(.hcpi-barra) .hcpi-pwa-barra { bottom: calc(var(--hcpi-barra-alto, 84px) + 8px + env(safe-area-inset-bottom)); }
}