/* Snackbar de instalacion / notificaciones de la PWA. Estilos propios y con nombres
   prefijados: esto sale en las cuatro plantillas base de los tres sitios y ninguna
   comparte framework de CSS, asi que no puede depender del de la pagina. */
.pwaSnack {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translate(-50%, 24px);
    z-index: 2147483000;
    width: calc(100% - 24px);
    max-width: 460px;
    box-sizing: border-box;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 14px 12px;
    border-radius: 14px;
    background: #ffffff;
    color: #17222e;
    box-shadow: 0 10px 34px rgba(8, 20, 34, .26), 0 1px 0 rgba(8, 20, 34, .06);
    border-top: 3px solid var(--pwa-tema, #0c2747);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}

.pwaSnack--visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* En movil el snackbar se pega al borde inferior, que es donde el pulgar llega. */
@media (max-width: 480px) {
    .pwaSnack { bottom: 10px; border-radius: 12px; padding: 12px; }
}

.pwaSnack__icono {
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 10px; object-fit: contain;
    background: var(--pwa-tema, #0c2747);
}

.pwaSnack__cuerpo { flex: 1 1 auto; min-width: 0; }
.pwaSnack__titulo { font-weight: 700; font-size: 14px; margin: 0 0 2px; }
.pwaSnack__texto { margin: 0; font-size: 13px; color: #4b5563; }

.pwaSnack__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }

.pwaSnack__btn {
    appearance: none; border: 0; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600;
    padding: 8px 15px; border-radius: 9px;
    background: var(--pwa-tema, #0c2747); color: #fff;
}
.pwaSnack__btn:hover { filter: brightness(1.12); }
.pwaSnack__btn--plano { background: transparent; color: #5b6673; padding-left: 8px; padding-right: 8px; }
.pwaSnack__btn--plano:hover { background: #f1f3f6; filter: none; }
.pwaSnack__btn[disabled] { opacity: .6; cursor: default; }

.pwaSnack__cerrar {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    color: #9aa3ad; font-size: 20px; line-height: 1;
    padding: 0 2px; margin: -2px -2px 0 0; flex: 0 0 auto;
}
.pwaSnack__cerrar:hover { color: #4b5563; }

.pwaSnack__pasos { margin: 9px 0 0; padding-left: 18px; font-size: 13px; color: #4b5563; }
.pwaSnack__pasos li { margin-bottom: 3px; }
.pwaSnack__aviso { margin: 9px 0 0; font-size: 12px; color: #b23b3b; }
.pwaSnack__ok { margin: 9px 0 0; font-size: 12px; color: #1c7a4f; }

/* Los tres paneles comparten sitio; el visor de InfraOpera usa modo oscuro. */
@media (prefers-color-scheme: dark) {
    .pwaSnack { background: #17212c; color: #eaeef3; box-shadow: 0 10px 34px rgba(0, 0, 0, .5); }
    .pwaSnack__texto, .pwaSnack__pasos { color: #a8b3c0; }
    .pwaSnack__btn--plano { color: #a8b3c0; }
    .pwaSnack__btn--plano:hover { background: #22303d; }
}