/* * : el botón de instalar la PWA y el diálogo de "cómo se * hace en iPhone". * * Se carga sin condición en , como sagit-logotipo.css: el componente * vive tanto en el panel como en las pantallas públicas. * * Aquí había DOS definiciones de `.sagit-instalar-ios` — una en sagit.css * para el panel, otra inline en pantalla-publica.blade.php para el acceso— * que habían divergido en relleno, borde y hasta en si el botón cambiaba de * color al pasar el cursor. El mismo diálogo se veía distinto según de * dónde se abriera. Se unifican en la versión más completa. */ .sagit-instalar--texto { width: 100%; max-width: 24rem; margin: 1rem auto 0; padding: .625rem 1rem; border: 1px solid color-mix(in srgb, var(--sagit-tenue) 28%, transparent); border-radius: .375rem; background: transparent; color: var(--sagit-tenue); font: inherit; font-size: .8125rem; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s; } .sagit-instalar--texto:hover { border-color: var(--sagit-azul); color: var(--sagit-azul); } .sagit-instalar--texto:focus-visible { outline: 2px solid var(--sagit-azul); outline-offset: 2px; } .sagit-instalar-ios { max-width: 21rem; padding: 1.5rem; border: 1px solid color-mix(in srgb, var(--sagit-tenue) 28%, transparent); border-radius: .5rem; background: var(--sagit-marina-alta); color: var(--sagit-blanco); } .sagit-instalar-ios::backdrop { background: color-mix(in srgb, var(--sagit-marina) 78%, transparent); } .sagit-instalar-ios h2 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; } /* `--sagit-tenue-base` y no `--sagit-tenue`: el fondo de este diálogo es FIJO —`--sagit-marina-alta` no se sustituye por empresa— y el token sustituible sí cambia: para un cromo claro devuelve #4B5563, que sobre este azul casi negro da 2.37:1. El gris de marca da 6.79:1. Mismo reparto que ya resolvió el lienzo con marina/marina-base. */ .sagit-instalar-ios p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--sagit-tenue-base); } .sagit-instalar-ios strong { color: var(--sagit-blanco); font-weight: 600; } .sagit-instalar-ios button { width: 100%; margin-block-start: 1.5rem; padding: .6875rem 1rem; border: 0; border-radius: .375rem; background: var(--sagit-azul); /* El valor CALCULADO contra el acento, no el cromo: son dos columnas distintas de `companies` y nada garantiza que contrasten entre sí. Una empresa con acento oscuro y cromo oscuro tenía el botón invisible. Es el tercer caso del mismo defecto; los dos anteriores —«volver arriba» y el propio `texto-sobre-acento`— ya se habían corregido así. */ color: var(--sagit-texto-sobre-acento); font: inherit; font-weight: 600; cursor: pointer; } /* * El objetivo mínimo del dedo, en los dos botones de este archivo. * * El diálogo de iOS existe SÓLO para el iPhone y su botón medía 38px; el de * «Instalar SAGIT en este dispositivo» vive en la pantalla de acceso, que es * por donde se entra desde el teléfono, y medía 40px. La regla del proyecto * pide 44 hasta 991px, y este archivo no tenía ni un bloque `@media`. * * `pointer: coarse` y no un ancho: lo que decide es que se toque con el dedo, * no el tamaño de la pantalla — una tableta grande también se toca. */ @media (pointer: coarse) { .sagit-instalar--texto, .sagit-instalar-ios button { min-height: 2.75rem; } }