/* ================================================================= AVISO DE «AÑADIDO A LA LISTA DE COTIZACIÓN» Confirma **qué** se acaba de añadir —foto, nombre, la talla o el color elegidos y la cantidad— y ofrece la salida a la lista. Es la misma pieza para las dos vías: la tarjeta de la rejilla y el formulario de la ficha. Antes lo único que cambiaba al añadir era el número del icono de la cabecera, y desde la ficha ni eso se veía: la página se recargaba entera y el usuario volvía al mismo sitio. ── Se estila solo, sin apoyarse en el reset de `base.css` ── Ese reset está acotado a `.jri-section`, la cabecera, el pie, la ruta y el menú lateral; este aviso cuelga del `` y no es ninguno de ellos. Son ocho nodos y los pinta todos `cotizar.js`, así que declara lo que necesita en vez de ampliar cinco listas `:where()` de un fichero compartido. ================================================================= */ .jri-aviso { position: fixed; /* Bajo la cabecera pegajosa, del lado del icono de carrito: el aviso y el número que acaba de cambiar quedan en la misma esquina. `--header-h` baja a 64 px en móvil, así que se recoloca solo. */ top: calc(var(--header-h) + var(--space-3)); right: var(--space-4); width: 340px; max-width: calc(100vw - var(--space-4) * 2); /* Por debajo de `#brx-header` (998). El menú lateral y su capa oscura viven DENTRO de la cabecera, así que con el panel abierto tienen que tapar este aviso; con un z-index mayor asomaría por encima. */ z-index: 990; font-family: var(--font); line-height: 1.4; color: var(--text); box-sizing: border-box; /* `visibility` además de `opacity`, y no es cosmético: un elemento solo transparente **sigue capturando el clic y sigue siendo tabulable**, así que «Ver mi lista» robaría el tabulador estando invisible. Misma lección que las diapositivas del hero. */ opacity: 0; visibility: hidden; transform: translateX(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s; } .jri-aviso.is-visible { opacity: 1; visibility: visible; transform: none; } .jri-aviso * { box-sizing: border-box; } .jri-aviso-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--white); border-top: 4px solid var(--brand-yellow); border-radius: var(--radius-2xl); /* Más marcada que `--shadow-card`: esto flota sobre la página, no es una tarjeta dentro del flujo. */ box-shadow: 0 6px 24px rgba(0, 0, 0, .18); } .jri-aviso-top { display: flex; align-items: flex-start; gap: var(--space-3); } .jri-aviso-img { flex: none; width: 56px; height: 56px; object-fit: contain; border-radius: var(--radius-md); background: var(--gray-100); } /* Sin imagen que enseñar no se deja el hueco gris. */ .jri-aviso-img:not([src]) { display: none; } .jri-aviso-txt { min-width: 0; /* Sin esto un nombre largo no deja encoger al flex. */ } .jri-aviso-titulo, .jri-aviso-nombre, .jri-aviso-meta { margin: 0; } .jri-aviso-titulo { font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted-2); /* Deja sitio al aspa, que va absoluta en esa esquina. */ padding-right: var(--space-5); } .jri-aviso-nombre { font-size: 14px; font-weight: 600; /* Los nombres de EPP son largos («LENTE DE SEGURIDAD TAALVI TIPO GOGGLE CON VENTILACIÓN INDIRECTA»): dos líneas y a otra cosa. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .jri-aviso-meta { margin-top: 2px; font-size: 12px; color: var(--text-muted); } .jri-aviso-meta:empty { display: none; } .jri-aviso-ver { display: block; padding: 11px var(--space-4); background: var(--near-black); color: var(--brand-yellow); border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; letter-spacing: .3px; text-align: center; text-decoration: none; /* El tema mete un interlineado de 60 px en enlaces con aspecto de botón. Es el cuarto sitio donde aparece el mismo tropiezo. */ line-height: 1; transition: background .2s; } .jri-aviso-ver:hover, .jri-aviso-ver:focus { background: var(--dark-2); } .jri-aviso-cerrar { position: absolute; top: var(--space-2); right: var(--space-2); width: 26px; height: 26px; display: grid; place-items: center; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--text-muted); font-family: inherit; cursor: pointer; transition: background .2s, color .2s; } .jri-aviso-cerrar:hover { background: var(--gray-100); color: var(--text); } /* ----------------------------------------------------------------- El latido del contador de la cabecera. Va en el **enlace**, no en el `` del número: el fragmento de WooCommerce sustituye ese span entero con `outerHTML`, así que cualquier clase puesta ahí se la lleva la sustitución. El enlace sobrevive. Vive en esta hoja y no en `header.css` porque solo tiene sentido donde se puede añadir, que es donde se carga `cotizar.js`. ----------------------------------------------------------------- */ @keyframes jriPulsoCarrito { 0% { transform: none; } 30% { transform: scale(1.18); } 60% { transform: scale(.94); } 100% { transform: none; } } .jri-cart-link--pulso { animation: jriPulsoCarrito .45s ease; } @media (max-width: 767px) { .jri-aviso { top: calc(var(--header-h) + var(--space-2)); right: var(--space-3); left: var(--space-3); width: auto; max-width: none; } } /* Quien pide menos movimiento no debería recibir un aviso que se desliza ni un icono que da un salto. Aparecer sí: es la información. */ @media (prefers-reduced-motion: reduce) { .jri-aviso { transform: none; transition: opacity .01s, visibility .01s; } .jri-cart-link--pulso { animation: none; } }