/* IAFACT – Transparencia IA: estilos públicos del aviso. Nota: la insignia y el tooltip se inyectan dentro del HTML de temas arbitrarios, cuyos selectores genéricos (p. ej. ".post-featured-img span") pueden estirarlos o recolocarlos. Por eso las propiedades de caja y posición van con !important. */ /* Modo wrap: contenedor de imagen de contenido. */ .iafact-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; } .iafact-wrap > img { max-width: 100%; } /* Modo overlay: el contenedor del tema no se toca, solo se posiciona si era static. */ .iafact-host-rel { position: relative; } /* Reset defensivo frente a los estilos del tema. */ .iafact-badge, .iafact-tooltip { position: absolute !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; transform: none !important; box-sizing: border-box !important; visibility: visible; opacity: 1; } /* Insignia (botón) siempre visible sobre la imagen. */ .iafact-badge { z-index: 9990 !important; display: inline-flex !important; align-items: center; gap: 0.25em; padding: 0.35em 0.55em; border: 0; border-radius: var(--iafact-radius, 4px); background: var(--iafact-bg, #111); color: var(--iafact-color, #fff); font-family: var(--iafact-font, inherit); font-size: 12px; font-weight: 600; line-height: 1 !important; cursor: pointer; opacity: 0.92; transition: opacity 0.15s ease; } .iafact-badge:hover, .iafact-badge:focus-visible { opacity: 1; } .iafact-badge:focus-visible { outline: 2px solid var(--iafact-color, #fff); outline-offset: 2px; } .iafact-badge--small { font-size: 10px; } .iafact-badge--medium { font-size: 12px; } .iafact-badge--large { font-size: 15px; } .iafact-badge svg { width: 1em !important; height: 1em !important; flex: 0 0 auto; } /* Etiqueta corta visible junto al icono ("Modificada con IA"). */ .iafact-badge-label { display: inline !important; position: static !important; width: auto !important; height: auto !important; white-space: nowrap; font-size: inherit; line-height: 1; color: inherit; } /* Posiciones de la insignia. */ .iafact-pos-top-left .iafact-badge { top: var(--iafact-margin, 8px) !important; left: var(--iafact-margin, 8px) !important; } .iafact-pos-top-right .iafact-badge { top: var(--iafact-margin, 8px) !important; right: var(--iafact-margin, 8px) !important; } .iafact-pos-bottom-left .iafact-badge { bottom: var(--iafact-margin, 8px) !important; left: var(--iafact-margin, 8px) !important; } .iafact-pos-bottom-right .iafact-badge { bottom: var(--iafact-margin, 8px) !important; right: var(--iafact-margin, 8px) !important; } /* Tooltip: vive en y lo posiciona el JS en coordenadas de viewport (position:fixed) para que no lo deformen contenedores estrechos ni lo recorte ningún overflow:hidden del tema. Las coordenadas llegan como variables CSS inline, que ganan a las reglas !important. */ .iafact-tooltip { position: fixed !important; top: var(--iafact-tip-y, 0) !important; left: var(--iafact-tip-x, 0) !important; right: auto !important; bottom: auto !important; z-index: 9991 !important; display: inline-block !important; width: max-content !important; max-width: min(85vw, 340px) !important; padding: 0.6em 0.8em; border-radius: var(--iafact-radius, 4px); background: var(--iafact-bg, #111); color: var(--iafact-color, #fff); font-family: var(--iafact-font, inherit); font-size: 13px; line-height: 1.4 !important; text-align: left; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } .iafact-tooltip[hidden] { display: none !important; } /* Móvil: área táctil suficiente. */ @media (max-width: 600px) { .iafact-badge { min-width: 32px !important; min-height: 28px !important; } .iafact-tooltip { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .iafact-badge { transition: none; } }