/* ============================================================================ OPCION B (Astra, 15 sep 2026) - v2 Simplificar contenido de las nueve maquetas moviles + homologar caja exterior a 16px simetricos. No cambia textos comerciales de la pagina ni inventa metricas: solo oculta filas secundarias repetidas del MOCK. No toca vidrio, paleta, iconos ni animacion/revelado. ============================================================================ */ /* --- B-0 - caja exterior: 16px simetricos dentro de la ventana de arte ------- Geometria medida: tarjeta .st-i-ec3a19e5 con padding 16px lados / 20px abajo; ventana de arte .st-i-1eaf4e91 absoluta con inset 20px lados y 20px abajo; el mock vive en un .w-embed con margen 0 10px 32px. lado: tarjeta 16 + margen 10 = 26 -> ventana 20 -> inset 6 (defecto) abajo: tarjeta 20 + margen 32 = 52 -> ventana 20 -> inset 32 (defecto) Con margen 20px lados y 16px abajo: lado: 16 + 20 = 36 -> 20 = 16 exacto abajo: 20 + 16 = 36 -> 20 = 16 exacto */ @media (max-width:991px){ /* el mock se estrecha 10px por lado (la pagina fija margin-inline:0!important sobre .cxm con especificidad alta, de ahi el prefijo largo) */ html:root[data-wf-page][data-wf-page][data-wf-page] body .st-mb [data-cy-mockup]>.cxm.cxm.cxm{ margin-inline:10px!important;width:calc(100% - 20px)!important;max-width:none!important} /* y baja 16px: margen inferior 32 -> 16 */ html:root[data-wf-page][data-wf-page][data-wf-page] body .st-mb .w-embed:has(> .cxm){ margin-bottom:16px!important} /* altura comun por breakpoint = ventana de arte - 32 (16px arriba y abajo). Se replica la MISMA formula que usa la ventana (cqw del contenedor tarjeta), sin tocar --cy-amb-alto: la ventana y el arte quedan intactos. */ html:root[data-wf-page][data-wf-page][data-wf-page] body .st-mb [data-cy-mockup]>.cxm.cxm.cxm{ min-height:calc(max(440px, 807px - 117.5cqw) - 32px)!important} html:root[data-wf-page][data-wf-page][data-wf-page] body .st-mb [data-cy-mockup]>.cxm.cxm.cxm>.pp-panel{ min-height:100%!important} } /* --- B-1 - regimen de FLUJO tambien cuando el contenedor cae en 341-360 ------ cy-mockups-v18 solo relaja la altura en @container (width <= 340px). Con la caja homologada el contenedor baja de 340 en 375/390/414/440, pero entre ~445 y ~480 vuelve a caer en la franja 341-360: ahi se quedaba con altura fija y las filas se solapaban. Se replica solo la relajacion estructural. */ @container (340px < width <= 360px){ .cxm:not(.cxm-mod) .pp-panel, .cxm:not(.cxm-mod) .cxm-content, .cxm:not(.cxm-mod) .ai-feature{height:auto!important;min-height:0!important;max-height:none!important} .cxm:not(.cxm-mod) .pp-panel{overflow:visible!important} .cxm:not(.cxm-mod) .cxm-content{overflow:visible!important} .cxm:not(.cxm-mod) .ai-feature>.ai-a-evidence, .cxm:not(.cxm-mod) .ai-feature>.ai-b-evidence{flex:none!important;height:auto!important;min-height:0!important} } /* --- B-2 - filas secundarias fuera (solo por debajo de 992: es movil) ------- */ @media (max-width:991px){ /* gasto: presupuesto/gasto principal + distribucion resumida + estado. Fuera el historial con eje y leyenda, que es lo que se solapaba. */ .st-mb .cxm:not(.cxm-mod) .ai-b-usage-history{display:none!important} /* auditoria: un hallazgo principal (linea de origen) y dos evidencias. Fuera la tercera y cuarta fila de campos extraidos. */ .st-mb .cxm:not(.cxm-mod) .ai-b-extracted-fields>div:nth-child(n+3){display:none!important} /* explorador: un hallazgo principal y dos evidencias. Fuera el marcador enmascarado y la coletilla de origen del bloque izq... */ .st-mb .cxm:not(.cxm-mod) .ai-a-leak>code, .st-mb .cxm:not(.cxm-mod) .ai-a-leak>small{display:none!important} /* ...y el rotulo "Cuenta corporativa", que repite el insight de la propia card ("Posible credencial corporativa"); el correo completo ya identifica la cuenta y el icono se conserva. */ .st-mb .cxm:not(.cxm-mod) .ai-a-account>small{display:none!important} /* superficie: fuera la lista secundaria de puertos del bloque de API. */ .st-mb .cxm:not(.cxm-mod) .ai-a-api>.ai-sources{display:none!important} /* redteam: fuera la fila de chips de origen; la ruta de ataque es la evidencia principal y ya lleva su propio rotulo. */ .st-mb .cxm:not(.cxm-mod) .ai-b-redteam-evidence>.ai-sources{display:none!important} } /* --- B-3 - compensacion de ancho util -------------------------------------- B-0 estrecha el mock 20px (10 por lado) para lograr los 16px simetricos. Sin compensar, la columna de texto pierde esos 20px y las filas envuelven: medido, mdr EN a 375 pasaba de 402,1 a 493,4 px de alto. Se devuelven los mismos 20px reduciendo el acolchado interior del panel (13 -> 8) y del bloque de contenido (10 -> 5): el ancho de columna queda igual que antes, no se toca ninguna tipografia ni ningun texto. */ @media (max-width:991px){ html:root[data-wf-page][data-wf-page][data-wf-page] body .st-mb [data-cy-mockup]>.cxm.cxm.cxm>.pp-panel{ padding-inline:8px!important} html:root[data-wf-page][data-wf-page][data-wf-page] body .st-mb [data-cy-mockup]>.cxm.cxm.cxm .ai-feature{ padding-inline:5px!important} } /* --- B-4 - redteam: compactar los conectores de la ruta --------------------- Es la unica card que no cabia en el presupuesto de 390/414/440 (418,5 frente a 408). La rejilla de la ruta llevaba gap 3px entre los cinco elementos (3 nodos + 2 flechas); a 0 se recuperan 12px. Las flechas siguen midiendo 32px y solapan visualmente los nodos igual que antes, no se quita contenido ni se toca el icono. */ @media (max-width:991px){ html:root[data-wf-page][data-wf-page][data-wf-page] body .st-mb .cxm:not(.cxm-mod) .ai-b-attack-path{ gap:0!important} } /* ============================================================================ DELTA gap24 - se aplica DESPUES de parche-cards-B.css (no lo sustituye) Cierra el residuo 1 del informe opcion B: gap texto->arte 39-80px -> 24px. Metodo pedido por Astra: flujo, ventana y mock en un contenedor comun por breakpoint, residuo al fondo, sin absoluto-bottom como responsable del gap. No toca tipografias, vidrio, paleta, iconos ni la altura del arte. ============================================================================ */ @media (max-width:991px){ /* --- D-1 - la card pasa de columna flex a rejilla de 3 filas -------------- Hoy: flex column con gap 13; la ventana de arte es absoluta anclada abajo (top calculado, bottom 20) y el .w-embed lleva margin-top automatico, que es quien se come TODO el espacio libre entre el texto y el arte: por eso el gap variaba 39-80 segun cuanto ocupaban cabecera y parrafo. Con rejilla, arte y mock comparten LA MISMA celda (fila 3): la altura de esa celda es comun por breakpoint sin duplicar ninguna formula, el mock se estira dentro con 16px de margen -> insets 16 exactos, y el espacio libre sobrante cae al fondo de la card (align-content:start), no entre texto y arte. */ html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb [data-st-ag][data-st-ag]{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto auto auto!important; align-content:start!important; row-gap:0!important;column-gap:0!important; } /* fila 1: cabecera (unico hijo div que no lleva el arte ni es el embed) */ html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb [data-st-ag][data-st-ag]>div:not(:has(>img)):not(.w-embed){ grid-row:1!important;grid-column:1!important;} /* fila 2: parrafo. El gap real 24 se fija aqui, en flujo. */ html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb [data-st-ag][data-st-ag]>p{ grid-row:2!important;grid-column:1!important; margin-top:13px!important;margin-bottom:24px!important;} /* fila 3, celda compartida: ventana de arte, ya en flujo (no absoluta). margin-inline:4px reproduce exactamente su geometria actual: hoy es absoluta con inset lateral 20px sobre la caja de relleno y la card lleva 16px de padding lateral -> 4px por dentro de la caja de contenido. */ html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb [data-st-ag][data-st-ag]>div:has(>img){ grid-row:3!important;grid-column:1!important; position:relative!important;top:auto!important;right:auto!important; bottom:auto!important;left:auto!important; margin:0 4px!important;align-self:start!important;} /* fila 3, misma celda: el mock encima del arte con 16px por los cuatro lados */ html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb [data-st-ag][data-st-ag]>.w-embed{ grid-row:3!important;grid-column:1!important; margin:16px 20px!important;align-self:stretch!important;justify-self:stretch!important;} /* el mock ya no necesita la formula duplicada de altura: la celda manda */ html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb [data-cy-mockup]>.cxm.cxm.cxm{ margin:0!important;width:auto!important;min-height:0!important;height:100%!important;} } /* --- D-2 - cortes de palabra: columnas que no dan el ancho minimo ------------ Astra: «evitar cortes como operaciones en 3 lineas / Proveedor partido: revisar ancho de columnas ... no fontshrink». Causa medida: las etiquetas de nodo heredan overflow-wrap:anywhere, asi que una palabra mas ancha que su columna se parte por la mitad. 375 ES «Proveedor» 54,8px > columna 53,3px -> partida 375 EN «payments» 53,7px > columna 53,3px -> partida 375 ES «operaciones» 64,0px > hueco util 55,4px (nodo 71,4 - 16 pad) Se corrige por ANCHO, no por tipografia: las columnas de nodo pasan a minmax(min-content,1fr), asi que ninguna baja de su palabra mas larga y el sobrante se reparte solo; y se devuelve overflow-wrap:normal a esas etiquetas para que no se pueda partir una palabra dentro del nodo. */ @media (max-width:991px){ /* vendor: tres nodos + dos flechas. El gap de 2px se recupera para ancho. */ html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb .cxm:not(.cxm-mod) .ai-a-business-path{ grid-template-columns:minmax(min-content,1fr) 17px minmax(min-content,1fr) 17px minmax(min-content,1fr)!important; column-gap:0!important;} html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb .cxm:not(.cxm-mod) .ai-a-business-node, html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb .cxm:not(.cxm-mod) .ai-a-business-node *{ overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;} /* explorador: el nodo de origen toma el ancho que pide su palabra mas larga toma exactamente el ancho de su palabra mas larga (min-content), ni uno mas: el sobrante de los 8px de hueco se devuelve a la columna de la cuenta, que asi solo pierde 2,9px y no gana lineas. El correo conserva su corte porque es un identificador, no una palabra de copy. */ html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb .cxm:not(.cxm-mod) .ai-a-evidence.ai-a-identity-match{ grid-template-columns:min-content 20px minmax(0,1fr)!important;column-gap:2px!important;} html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb .cxm:not(.cxm-mod) .ai-a-leak, html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb .cxm:not(.cxm-mod) .ai-a-leak>b, html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb .cxm:not(.cxm-mod) .ai-a-leak>b *, html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb .cxm:not(.cxm-mod) .ai-a-leak>span, html:root[data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page][data-wf-page] body .st-mb.st-mb .cxm:not(.cxm-mod) .ai-a-leak>span *{ overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;} }