/* ===================================================================== zv-icons.css -- Kit UI PaskayMind, iconografia propia Migracion a Dinamica, fase F1. Guia: 04-guia-design-system-zolvia §7.5 (K6). --------------------------------------------------------------------- POR QUE EXISTE ESTE ARCHIVO. Font Awesome queda FUERA de PaskayMind en cualquiera de sus formas (decision K6 / ADR-0004). Retirar la hoja sin sustituir los usos deja el boton PRESENTE PERO VACIO, y eso no lo detecta ningun test funcional: el elemento existe y el clic sigue funcionando. Los mismos 10 Glyphicons heredados del canonico ya estaban en ese estado -- ningun @font-face los declaraba desde que se excluyo bootstrap.min_30.css. LOS 3 FRENTES DE K6 Y DONDE SE RESUELVE CADA UNO: Frente 1 markup de plantillas ..... inline, en el propio .htm Frente 2 pseudo-elementos CSS ..... ESTE ARCHIVO, data: URI Frente 3 inyeccion en runtime ..... NO EXISTE en este webapp. V13 leyo dinamica.js completo (2642 lineas): no inyecta ninguna clase fa-; su unica referencia a iconografia es un querySelectorAll que LEE iconos ya presentes en el markup. REGLA DE ENCODING DEL DATA-URI (K5): el SVG del data: URI se escribe SOLO EN ASCII y con `#` escapado como `%23`. Un `#` crudo dentro de un url() corta el data-URI en Firefox -- lo interpreta como fragmento -- y el icono desaparece sin error de consola. ===================================================================== */ /* --------------------------------------------------------------------- Utilidades de tamanio para los inline del frente 1. Sustituyen a los modificadores de tamanio de la libreria retirada, que no eran glifos sino escalas. --------------------------------------------------------------------- */ .zv-ico { width: 16px; height: 16px; flex: 0 0 auto; display: inline-block; vertical-align: -.14em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .zv-ico--sm { width: 13px; height: 13px; } .zv-ico--lg { width: 20px; height: 20px; } .zv-ico--xl { width: 26px; height: 26px; } /* Variante rellena para los iconos que se dibujan con `fill` (caret, etc). */ .zv-ico--fill { fill: currentColor; stroke: none; } /* --------------------------------------------------------------------- El SPRITE. Cada documento lo lleva inline justo despues del (fase B3): un oculto con un por dibujo, y en el markup queda . POR QUE HAY QUE ESCONDERLO A MANO. Los no se pintan solos, pero el que los contiene SI es un elemento en linea: sin sacarlo del flujo crea una caja de linea al principio del y corre la pagina entera unos pixeles hacia abajo. Va absoluto y a cero -- y no `display:none` -- porque asi ninguna pantalla cambia de layout por llevar el sprite, y el propio markup repite width="0" height="0" como atributo por si esta hoja no cargo. Esta regla compite contra el reset de elemento, asi que tiene que vivir FUERA de @layer (puente §7.1). zv-icons.css entera lo esta. --------------------------------------------------------------------- */ .zv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* --------------------------------------------------------------------- FRENTE 2 -- pseudo-elementos. Bootstrap 5 ya dibuja .btn-close con un data-URI propio, en negro puro. Se re-colorea a tinta ciruela para que no desentone con la paleta. --------------------------------------------------------------------- */ .zv-app .btn-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23241F35'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E"); opacity: .65; transition: opacity var(--t); } .zv-app .btn-close:hover { opacity: 1; } .zv-app .btn-close:focus-visible { box-shadow: var(--ring); opacity: 1; } /* --------------------------------------------------------------------- Spinner de espera. Reemplaza a las dos animaciones locales del canonico que llevaban nombre prestado de librerias que ya no estan. Las dos estaban definidas dentro de bootstrap.helper.css, o sea que eran CSS propio: lo prestado era solo el nombre. Se renombran por dos motivos -- el candado assets-inventario audita TEXTO y una clase propia con prefijo ajeno lo pone rojo igual, y nombrar algo por una libreria ausente desorienta al siguiente lector. --------------------------------------------------------------------- */ .zv-spin-custom { display: inline-block; animation: zv-icon-rotate 1.1s linear infinite; } @keyframes zv-icon-rotate { to { transform: rotate(360deg) } } @media (prefers-reduced-motion: reduce) { .zv-spin-custom { animation-duration: 3s; } } /* --------------------------------------------------------------------- Controles de paginacion e iconografia de grid. El markup lleva el inline (frente 1); aca solo el encuadre para que el boton no colapse cuando el svg es el unico hijo. --------------------------------------------------------------------- */ .zv-app .btn .zv-ico { pointer-events: none; } .zv-app .btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; } /* Envoltorio de un icono que ES el control (lleva el onclick y el title). Sustituye al del canonico, que era a la vez caja del glifo y boton. Se conserva la forma para no tocar el JS que los busca por id. */ .zv-ico-btn { display: inline-flex; align-items: center; justify-content: center; color: inherit; line-height: 1; } .zv-ico-btn[onclick] { cursor: pointer; } .zv-ico-btn[onclick]:hover { color: var(--primary, #3A4199); } /* Cuando el control ES un boton de verdad (