/* ===================================================================== * app-global.css — Capa GLOBAL "app-like" + responsive de MyTSG. * Se enlaza en el de todas las páginas de la intranet. * Objetivo: que la intranet se comporte como una app nativa — * · sin rebote/rubber-band que descoloca el contenido (overscroll), * · sin arrastre horizontal a zonas vacías, * · imágenes/tablas/medios que nunca desbordan el ancho del móvil, * · respeto del notch/safe-area en iOS/Android. * No pisa el diseño de cada página; solo blinda el comportamiento base. * ===================================================================== */ /* 1) BLOQUEO DE OVERSCROLL / RUBBER-BAND ------------------------------ La página no "tira" del contenido hacia zonas vacías ni activa el pull-to-refresh: se comporta como una app, no como una web suelta. */ html { overscroll-behavior: none; overflow-x: hidden; /* nada se desplaza en horizontal */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overscroll-behavior: none; } /* 2) NADA DESBORDA EL ANCHO DEL VIEWPORT ------------------------------ */ *, *::before, *::after { box-sizing: border-box; } img, svg, video, canvas, iframe, embed, object, picture > img { max-width: 100%; } img, video, canvas { height: auto; } /* Sin flash azul del tap en móvil */ * { -webkit-tap-highlight-color: transparent; } /* 3) TABLAS ANCHAS -> scroll dentro de su zona en móvil/tablet -------- (fallback por si alguna tabla no está envuelta en un contenedor con overflow). Se puede desactivar poniendo class="no-resp" a la tabla. */ @media (max-width: 820px) { table:not(.no-resp) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* 4) SAFE-AREA (notch / barra inferior del móvil) --------------------- */ @supports (padding: max(0px)) { body { padding-bottom: max(0px, env(safe-area-inset-bottom)); } } /* 5) Scroll suave y sin barras horizontales fantasma ------------------ */ @media (max-width: 1024px) { html, body { max-width: 100%; } } /* ===================================================================== * 6) CAPA "APP-LIKE" EXPRESIVA — PWA MyTSG (2026-07) * Transiciones de página + morph tarjeta->detalle + micro-animaciones. * Nivel expresivo, pero snappy (<400ms) y con guard de accesibilidad. * ===================================================================== */ /* --- keyframes (nivel superior; se aplican bajo prefers-reduced-motion) --- */ @keyframes mytsgCardIn { from { opacity:0; transform: translateY(16px) scale(.985); } to { opacity:1; transform:none; } } @keyframes mytsgVtOut { to { opacity:0; transform: translateY(-8px); } } @keyframes mytsgVtIn { from { opacity:0; transform: translateY(16px); } } @keyframes mytsgShimmer { to { transform: translateX(100%); } } @keyframes mytsgDlgIn { from { opacity:0; transform: translateY(14px) scale(.965); } to { opacity:1; transform:none; } } @keyframes mytsgFade { from { opacity:0; } to { opacity:1; } } /* 6.1 TRANSICIONES DE PÁGINA (cross-document, MPA) — sin JS. Chrome/Edge 126+ y Safari 18.2+; Firefox degrada a navegación instantánea. */ @view-transition { navigation: auto; } /* El "chrome" persistente no parpadea: se mantiene fijo entre páginas */ @media (min-width:761px){ #mytsg-rail { view-transition-name: mytsg-rail; } } .topbar { view-transition-name: mytsg-topbar; } /* La región de contenido (snapshot root) entra con un fade-up expresivo */ ::view-transition-old(root) { animation: mytsgVtOut 150ms cubic-bezier(.4,0,1,1) both; } ::view-transition-new(root) { animation: mytsgVtIn 340ms cubic-bezier(.16,.84,.44,1) both; } /* El rail/topbar solo cruzan un fundido brevísimo */ ::view-transition-group(mytsg-rail), ::view-transition-group(mytsg-topbar) { animation-duration: 170ms; } /* 6.2 MORPH DE ELEMENTO COMPARTIDO: la tarjeta pulsada "se convierte" en su ficha. El JS del shell pone .vt-morph a UN solo elemento por snapshot (tarjeta en el estado viejo -> diálogo en el nuevo). */ .vt-morph { view-transition-name: mytsg-morph; } ::view-transition-group(mytsg-morph) { animation-duration: 400ms; animation-timing-function: cubic-bezier(.34,1.28,.64,1); /* leve rebote (spring) */ } @media (prefers-reduced-motion: no-preference) { /* 6.3 Entrada escalonada de tarjetas/paneles al cargar */ .content .card, .content .modulo-card, .content .app-card, .main .panel, [data-anim="up"] { animation: mytsgCardIn .42s cubic-bezier(.16,.84,.44,1) both; } .content .card:nth-child(1), .content .modulo-card:nth-child(1), .content .app-card:nth-child(1) { animation-delay: 20ms; } .content .card:nth-child(2), .content .modulo-card:nth-child(2), .content .app-card:nth-child(2) { animation-delay: 70ms; } .content .card:nth-child(3), .content .modulo-card:nth-child(3), .content .app-card:nth-child(3) { animation-delay: 115ms; } .content .card:nth-child(4), .content .modulo-card:nth-child(4), .content .app-card:nth-child(4) { animation-delay: 160ms; } .content .card:nth-child(5), .content .modulo-card:nth-child(5), .content .app-card:nth-child(5) { animation-delay: 200ms; } .content .card:nth-child(6), .content .modulo-card:nth-child(6), .content .app-card:nth-child(6) { animation-delay: 235ms; } .content .card:nth-child(n+7), .content .modulo-card:nth-child(n+7), .content .app-card:nth-child(n+7) { animation-delay: 270ms; } /* tope */ /* 6.4 Feedback al pulsar con leve rebote (complementa el :active existente) */ .modulo-card, .app-card, .content .card { transition: transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .22s ease, border-color .2s ease; } .modulo-card:active, .app-card:active, .content .card:active { transform: scale(.975); } /* 6.5 Transición suave del cambio de tema en superficies grandes */ #mytsg-root, #mytsg-rail, .topbar, .content .card, .modulo-card, .app-card, .foot { transition: background-color .28s ease, color .24s ease, border-color .24s ease; } /* 6.6 Aparición del