@crtobiasdelsud/portal-ui 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crtobiasdelsud/portal-ui",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Componentes compartidos entre el portal (Next) y el CMS (Vite) — widgets, views, providers para adapters y article pool.",
   "type": "module",
   "main": "./src/index.js",

package/src/components/Blocks/BlockColumns/BlockColumns.jsx

@@ -14,6 +14,11 @@ export default function BlockColumns({ widgets, registry, settings = {} }) {
     ? style.gridCategoriaDos
     : hasImportant ? style.gridFeatured : style.gridNormal
 
+  // Hero "fantasma": cuando hay un hero importante se agrega un Hero extra,
+  // sin articleId (artículo random), solo para ocupar el espacio del centro
+  // de la fila de abajo.
+  const HeroWidget = registry["HERO_BLOCK"]
+
   return (
     <section className={style.container}>
       <div className={`${style.grid} ${gridClass}`}>
@@ -31,6 +36,13 @@ export default function BlockColumns({ widgets, registry, settings = {} }) {
             </div>
           )
         })}
+        {hasImportant && HeroWidget && (
+          <div className={style.item} style={{ gridArea: "fantasma" }}>
+            <WidgetErrorBoundary>
+              <HeroWidget settings={{}} />
+            </WidgetErrorBoundary>
+          </div>
+        )}
       </div>
     </section>
   )

package/src/components/Blocks/BlockColumns/BlockColumns.module.scss

@@ -26,15 +26,20 @@
   }
 }
 
+/* Hero "importante": hero grande arriba a todo el ancho; abajo
+   widget1 + hero fantasma (automático) + widget2. */
 .gridFeatured {
   grid-template-areas:
     "hero"
     "recommended"
+    "fantasma"
     "feed";
 
   @media (min-width: 1000px) {
     grid-template-columns: repeat(4, 1fr);
-    grid-template-areas: "recommended hero hero feed";
+    grid-template-areas:
+      "hero        hero      hero      hero"
+      "recommended fantasma  fantasma  feed";
   }
 }
 

package/src/components/Cabezal/CabezalView.jsx

@@ -14,6 +14,7 @@ import Carrusel      from './variants/Carrusel/Carrusel.jsx'
 import LeeAdemas     from './variants/LeeAdemas/LeeAdemas.jsx'
 import LoQueSeLee    from './variants/LoQueSeLee/LoQueSeLee.jsx'
 import SeguiLeyendo  from './variants/SeguiLeyendo/SeguiLeyendo.jsx'
+import Etiquetas     from './variants/Etiquetas/Etiquetas.jsx'
 
 const VARIANTS = {
   default:       Default,
@@ -41,6 +42,7 @@ const VARIANTS = {
   loqueselee:    LoQueSeLee,
   seguiLeyendo:  SeguiLeyendo,
   seguileyendo:  SeguiLeyendo,
+  etiquetas:     Etiquetas,
 }
 
 /**
@@ -53,8 +55,9 @@ const VARIANTS = {
  * @param {string} [props.titulo]
  * @param {string} [props.tipo='default']
  * @param {string} [props.verMasUrl]
- * @param {Array<object>} [props.articles=[]]  — todos los tipos excepto loQueSeLee
+ * @param {Array<object>} [props.articles=[]]  — todos los tipos excepto loQueSeLee/etiquetas
  * @param {object} [props.article]              — solo para loQueSeLee
+ * @param {Array<object>} [props.tags]          — solo para etiquetas (tags del artículo actual)
  * @param {boolean} [props.isAmp=false]
  */
 export default function CabezalView({
@@ -63,6 +66,7 @@ export default function CabezalView({
   verMasUrl,
   articles = [],
   article,
+  tags,
   isAmp = false,
 }) {
   const isLoQueSeLee = tipo === 'loQueSeLee' || tipo === 'loqueselee'
@@ -72,6 +76,11 @@ export default function CabezalView({
     return <LoQueSeLee article={article} />
   }
 
+  // `etiquetas` recibe los tags del artículo en curso, no un array de artículos.
+  if (tipo === 'etiquetas') {
+    return <Etiquetas tags={tags} />
+  }
+
   if (!titulo && !articles.length) return null
 
   const Component = VARIANTS[tipo] ?? Default

package/src/components/Cabezal/CardCabezal/CardCabezal.module.scss

@@ -47,6 +47,9 @@
   font-weight: 500;
   line-height: 150%;
   letter-spacing: -2%;
+  min-width: 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .volanta {

package/src/components/Cabezal/variants/Etiquetas/Etiquetas.jsx

@@ -0,0 +1,52 @@
+import { useAdapters } from '../../../../adapters/AdaptersContext.jsx'
+import styles from './Etiquetas.module.scss'
+
+// View pura: muestra las etiquetas/tags del artículo en curso.
+// A diferencia de LoQueSeLee, no hay fetch: la data layer le pasa los `tags`
+// que ya vienen resueltos en el artículo (`/api/portal/articles/:id` los incluye).
+// Cada tag enlaza a la pantalla de etiqueta ya existente: /etiqueta/{slug}.
+export default function Etiquetas({ tags = [] }) {
+  const { Link } = useAdapters()
+
+  // Acepta los dos shapes del backend:
+  //   - article.tags      → { id, name, slug }
+  //   - article.etiquetas → { slug, nombre }
+  const items = (Array.isArray(tags) ? tags : [])
+    .map((t) => ({ slug: t?.slug, name: t?.name ?? t?.nombre }))
+    .filter((t) => t.slug && t.name)
+  if (items.length === 0) return null
+
+  return (
+    <section className={styles.container} aria-label="Temas del artículo">
+      <span className={styles.label}>
+        <svg
+          className={styles.icon}
+          xmlns="http://www.w3.org/2000/svg"
+          width="19"
+          height="19"
+          viewBox="0 0 19 19"
+          aria-hidden="true"
+        >
+          <path
+            fill="currentColor"
+            d="M17.1 0H1.9A1.906 1.906 0 0 0 0 1.9V19l3.8-3.8h13.3a1.906 1.906 0 0 0 1.9-1.9V1.9A1.906 1.906 0 0 0 17.1 0Zm0 13.3H3.8l-1.9 1.9V1.9h15.2Z"
+          />
+          <path
+            fill="currentColor"
+            d="m11.87 6.826-.194 1.64H13.1v1.469h-1.606l-.216 1.7H9.729l.216-1.7h-1.4l-.216 1.7H6.78l.216-1.7H5.561V8.466h1.617l.194-1.64H5.937V5.36h1.617l.216-1.7h1.549l-.216 1.7h1.4l.216-1.7h1.55l-.217 1.7h1.437v1.469Zm-1.549 0h-1.4l-.194 1.64h1.4Z"
+          />
+        </svg>
+        Temas
+      </span>
+      <ul className={styles.list}>
+        {items.map((tag) => (
+          <li key={tag.id ?? tag.slug} className={styles.item}>
+            <Link href={`/etiqueta/${tag.slug}`} className={styles.tag}>
+              {tag.name}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}

package/src/components/Cabezal/variants/Etiquetas/Etiquetas.module.scss

@@ -0,0 +1,70 @@
+@use "../../../../styles/index" as *;
+
+.container {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 12px 16px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 16px 0;
+}
+
+// ── Badge "# TEMAS" ─────────────────────────────────────────────────────────
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  padding: 6px 10px;
+  border: 1px solid var(--primary-color, #af0437);
+  color: var(--primary-color, #af0437);
+  font-family: var(--font-inter, Inter, sans-serif);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.icon {
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+  color: var(--primary-color, #af0437);
+}
+
+// ── Lista de tags ───────────────────────────────────────────────────────────
+
+.list {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 8px 20px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.item {
+  display: inline-flex;
+}
+
+.tag {
+  font-family: var(--font-inter, Inter, sans-serif);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: var(--text-color, #252523);
+  text-decoration: none;
+  transition: color 0.15s ease;
+
+  &:hover {
+    color: var(--primary-color, #af0437);
+    text-decoration: underline;
+  }
+}

package/src/components/Cabezal/variants/Tres/Tres.module.scss

@@ -60,8 +60,15 @@
   flex-direction: column;
   gap: 16px;
 
-  @include respond(tablet) {
+  // Intermedio (~480–768px): 2 columnas
+  @include respond(mobile) {
     display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+  }
+
+  // Ancho (≥768px): 3 columnas
+  @include respond(tablet) {
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
   }

package/src/components/Hero/Hero.module.scss

@@ -121,6 +121,13 @@
     aspect-ratio: 16 / 7;
   }
 
+  /* La imagen del hero importante (AspectImage) a todo el ancho queda
+     altísima (~774px). La topamos para que sea un banner ancho y entre
+     en pantalla. En mobile la imagen es chica y este tope nunca se activa. */
+  .media {
+    max-height: 500px;
+  }
+
   .headline {
     font-size: 1.6rem;
 

package/src/components/Hero/HeroView.jsx

@@ -30,6 +30,7 @@ export default function HeroView({ article, important = false }) {
             alt={article.imagen.alt ?? ''}
             aspect="16:9"
             focalPoint={article.focalPoint}
+            className={styles.media}
           />
         )}
         <div className={styles.body}>

package/src/components/ShareBlock/ShareBlock.jsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import { useTheme } from '../../context/SiteConfigContext.jsx'
 import V1 from './variants/V1/V1'
 import V2 from './variants/V2/V2'
+import { NETWORK_ICONS } from './icons/index.js'
 
 const VARIANTS = { '1': V1, '2': V2 }
 
@@ -12,42 +13,42 @@ function buildNetworks(url) {
   return [
     {
       key: 'x',
-      src: '/icons/x.svg',
+      Glyph: NETWORK_ICONS.x,
       label: 'X',
       tooltip: 'Compartir en X',
       href: `https://twitter.com/intent/tweet?url=${encoded}`,
     },
     {
       key: 'facebook',
-      src: '/icons/facebook.svg',
+      Glyph: NETWORK_ICONS.facebook,
       label: 'Facebook',
       tooltip: 'Compartir en Facebook',
       href: `https://www.facebook.com/sharer/sharer.php?u=${encoded}`,
     },
     {
       key: 'linkedin',
-      src: '/icons/linkedin.svg',
+      Glyph: NETWORK_ICONS.linkedin,
       label: 'LinkedIn',
       tooltip: 'Compartir en LinkedIn',
       href: `https://www.linkedin.com/shareArticle?mini=true&url=${encoded}`,
     },
     {
       key: 'telegram',
-      src: '/icons/telegram.svg',
+      Glyph: NETWORK_ICONS.telegram,
       label: 'Telegram',
       tooltip: 'Compartir en Telegram',
       href: `https://t.me/share/url?url=${encoded}`,
     },
     {
       key: 'whatsapp',
-      src: '/icons/whatsapp.svg',
+      Glyph: NETWORK_ICONS.whatsapp,
       label: 'WhatsApp',
       tooltip: 'Compartir en WhatsApp',
       href: `https://wa.me/?text=${encoded}`,
     },
     {
       key: 'email',
-      src: '/icons/email.svg',
+      Glyph: NETWORK_ICONS.email,
       label: 'Email',
       tooltip: 'Compartir por Email',
       href: `mailto:?body=${encoded}`,
@@ -55,7 +56,7 @@ function buildNetworks(url) {
   ]
 }
 
-export default function ShareBlock({ isAmp = false }) {
+export default function ShareBlock({ isAmp = false, settings = {} }) {
   const theme = useTheme()
   const [networks, setNetworks] = useState(() => buildNetworks(''))
 
@@ -66,10 +67,22 @@ export default function ShareBlock({ isAmp = false }) {
   const v = String(theme.shareBlock ?? 1)
   const Variant = VARIANTS[v] ?? V1
 
+  // `borderLeft`: barra lateral con el color primario. Se usa cuando el
+  // ShareBlock va dentro del cuerpo del artículo (lo setea el widget del CMS).
+  const borderLeft = settings?.borderLeft ?? false
+
   const inlineStyle = isAmp ? {} : {
     '--primary-color': theme.primary,
     '--surface-color': theme.surface,
   }
 
-  return <Variant isAmp={isAmp} inlineStyle={inlineStyle} networks={networks} v={v} />
+  return (
+    <Variant
+      isAmp={isAmp}
+      inlineStyle={inlineStyle}
+      networks={networks}
+      v={v}
+      borderLeft={borderLeft}
+    />
+  )
 }

package/src/components/ShareBlock/ShareBlock.module.scss

@@ -18,6 +18,17 @@
   }
 }
 
+// Barra lateral con el color primario. Se activa con la prop `borderLeft`
+// (la setea el widget del CMS cuando el ShareBlock va en el cuerpo del artículo).
+.borderLeft {
+  border-left: 4px solid var(--primary-color, #B1043F);
+  padding-left: 12px;
+
+  @include respond(desktop) {
+    padding-left: 16px;
+  }
+}
+
 .label {
   font-size: 14px;
   line-height: 14px;
@@ -35,11 +46,35 @@
 .icons {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
 
   @include respond(desktop) {
     gap: 12px;
   }
+
+  // Non-AMP: el componente Icon renderiza <a><span aria-hidden/></a>.
+  // Achicamos en mobile y restauramos el tamaño completo en desktop.
+  a {
+    width: 26px;
+    height: 26px;
+  }
+
+  span[aria-hidden] {
+    width: 22px;
+    height: 22px;
+  }
+
+  @include respond(desktop) {
+    a {
+      width: 33px;
+      height: 33px;
+    }
+
+    span[aria-hidden] {
+      width: 32px;
+      height: 32px;
+    }
+  }
 }
 
 .iconLink {

package/src/components/ShareBlock/icons/Email.jsx

@@ -0,0 +1,21 @@
+// Ícono Email — vector monocromo. Recolorea vía `currentColor`.
+export default function Email(props) {
+  return (
+    <svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <rect
+        x="0.448591"
+        y="0.448591"
+        width="31.2056"
+        height="31.2056"
+        rx="15.6028"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="0.897182"
+      />
+      <path
+        fill="currentColor"
+        d="M25.0227 10.6694C25.0227 9.68246 24.2153 8.875 23.2284 8.875H8.87347C7.88657 8.875 7.0791 9.68246 7.0791 10.6694V21.4356C7.0791 22.4225 7.88657 23.2299 8.87347 23.2299H23.2284C24.2153 23.2299 25.0227 22.4225 25.0227 21.4356V10.6694ZM23.2284 10.6694L16.0509 15.1553L8.87347 10.6694H23.2284ZM23.2284 21.4356H8.87347V12.4637L16.0509 16.9496L23.2284 12.4637V21.4356Z"
+      />
+    </svg>
+  )
+}

package/src/components/ShareBlock/icons/Facebook.jsx

@@ -0,0 +1,15 @@
+// Ícono Facebook — vector monocromo. Recolorea vía `fill="currentColor"`.
+export default function Facebook(props) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill="currentColor"
+        d="M11.7645 23.3479H11.7132C5.29228 23.3479 0.0683594 18.1224 0.0683594 11.6996V11.6482C0.0683594 5.22548 5.29228 0 11.7132 0H11.7645C18.1854 0 23.4093 5.22548 23.4093 11.6482V11.6996C23.4093 18.1224 18.1854 23.3479 11.7645 23.3479ZM11.7132 0.790298C5.72761 0.790298 0.858423 5.66093 0.858423 11.6482V11.6996C0.858423 17.6869 5.72761 22.5575 11.7132 22.5575H11.7645C17.7501 22.5575 22.6193 17.6869 22.6193 11.6996V11.6482C22.6193 5.66093 17.7501 0.790298 11.7645 0.790298H11.7132Z"
+      />
+      <path
+        fill="currentColor"
+        d="M13.3092 9.0559V11.5129H16.3478L15.8667 14.8227H13.3092V22.4483C12.7964 22.5195 12.2718 22.5566 11.7393 22.5566C11.1246 22.5566 10.5211 22.5076 9.93321 22.4128V14.8227H7.13086V11.5129H9.93321V8.50666C9.93321 6.64154 11.4446 5.12891 13.31 5.12891V5.13049C13.3155 5.13049 13.3203 5.12891 13.3258 5.12891H16.3486V7.99139H14.3734C13.7864 7.99139 13.31 8.4679 13.31 9.0551L13.3092 9.0559Z"
+      />
+    </svg>
+  )
+}

package/src/components/ShareBlock/icons/Linkedin.jsx

@@ -0,0 +1,12 @@
+// Ícono LinkedIn — vector monocromo. Recolorea vía `currentColor`.
+export default function Linkedin(props) {
+  return (
+    <svg viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <rect x="0.5" y="0.5" width="22" height="22" rx="11" fill="none" stroke="currentColor" />
+      <path
+        fill="currentColor"
+        d="M8.33525 6.17784C8.33508 6.54495 8.19718 6.89695 7.9519 7.15641C7.70662 7.41586 7.37404 7.56152 7.02733 7.56133C6.68061 7.56115 6.34817 7.41514 6.10313 7.15543C5.85809 6.89571 5.72053 6.54357 5.7207 6.17646C5.72088 5.80935 5.85877 5.45735 6.10406 5.1979C6.34934 4.93844 6.68192 4.79279 7.02863 4.79297C7.37534 4.79315 7.70779 4.93916 7.95282 5.19888C8.19786 5.45859 8.33543 5.81074 8.33525 6.17784ZM8.37447 8.58632H5.75992V17.2513H8.37447V8.58632ZM12.5055 8.58632H9.90398V17.2513H12.4793V12.7043C12.4793 10.1712 15.5972 9.9359 15.5972 12.7043V17.2513H18.179V11.763C18.179 7.49282 13.5644 7.652 12.4793 9.74903L12.5055 8.58632Z"
+      />
+    </svg>
+  )
+}

package/src/components/ShareBlock/icons/Telegram.jsx

@@ -0,0 +1,21 @@
+// Ícono Telegram — vector monocromo. Recolorea vía `currentColor`.
+export default function Telegram(props) {
+  return (
+    <svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <rect
+        x="0.448591"
+        y="0.448591"
+        width="31.2056"
+        height="31.2056"
+        rx="15.6028"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="0.897182"
+      />
+      <path
+        fill="currentColor"
+        d="M24.0141 8.23267L7.16884 14.7622C6.49096 15.0662 6.26168 15.6751 7.005 16.0056L11.3265 17.3861L21.7754 10.8951C22.3459 10.4876 22.93 10.5962 22.4274 11.0445L13.4532 19.212L13.1713 22.6685C13.4324 23.2022 13.9105 23.2047 14.2155 22.9394L16.6983 20.578L20.9506 23.7786C21.9382 24.3663 22.4756 23.9871 22.6881 22.9098L25.4772 9.63482C25.7668 8.30888 25.273 7.72465 24.0141 8.23267Z"
+      />
+    </svg>
+  )
+}

package/src/components/ShareBlock/icons/Whatsapp.jsx

@@ -0,0 +1,12 @@
+// Ícono WhatsApp — vector monocromo. Recolorea vía `currentColor`.
+export default function Whatsapp(props) {
+  return (
+    <svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <rect x="0.5" y="0.5" width="32" height="32" rx="16" fill="none" stroke="currentColor" />
+      <path
+        fill="currentColor"
+        d="M23.3769 9.61904C22.5475 8.78574 21.5597 8.12502 20.4711 7.67537C19.3825 7.22573 18.2148 6.99616 17.0362 7.00005C12.0975 7.00005 8.07236 11.005 8.07236 15.919C8.07236 17.494 8.48844 19.024 9.26633 20.374L8 25L12.7487 23.758C14.0603 24.469 15.5347 24.847 17.0362 24.847C21.9749 24.847 26 20.842 26 15.928C26 13.543 25.0683 11.302 23.3769 9.61904ZM17.0362 23.335C15.6975 23.335 14.3859 22.975 13.2372 22.3L12.9658 22.138L10.1437 22.876L10.8945 20.14L10.7136 19.861C9.96964 18.6794 9.57471 17.3134 9.57387 15.919C9.57387 11.833 12.9206 8.50304 17.0271 8.50304C19.0171 8.50304 20.8894 9.27704 22.2915 10.681C22.9858 11.3685 23.536 12.1863 23.9102 13.087C24.2844 13.9877 24.4752 14.9534 24.4714 15.928C24.4894 20.014 21.1427 23.335 17.0362 23.335ZM21.1246 17.791C20.8985 17.683 19.795 17.143 19.596 17.062C19.3879 16.99 19.2432 16.954 19.0894 17.17C18.9357 17.395 18.5106 17.899 18.3839 18.043C18.2573 18.196 18.1216 18.214 17.8955 18.097C17.6693 17.989 16.9457 17.746 16.0955 16.99C15.4261 16.396 14.9829 15.667 14.8472 15.442C14.7206 15.217 14.8291 15.1 14.9467 14.983C15.0462 14.884 15.1729 14.722 15.2814 14.596C15.3899 14.47 15.4352 14.371 15.5075 14.227C15.5799 14.074 15.5437 13.948 15.4894 13.84C15.4352 13.732 14.9829 12.634 14.802 12.184C14.6211 11.752 14.4312 11.806 14.2955 11.797H13.8613C13.7075 11.797 13.4724 11.851 13.2643 12.076C13.0653 12.301 12.4864 12.841 12.4864 13.939C12.4864 15.037 13.2915 16.099 13.4 16.243C13.5085 16.396 14.9829 18.646 17.2261 19.609C17.7598 19.843 18.1759 19.978 18.5015 20.077C19.0352 20.248 19.5236 20.221 19.9126 20.167C20.3467 20.104 21.2422 19.627 21.4231 19.105C21.6131 18.583 21.6131 18.142 21.5497 18.043C21.4864 17.944 21.3508 17.899 21.1246 17.791Z"
+      />
+    </svg>
+  )
+}

package/src/components/ShareBlock/icons/X.jsx

@@ -0,0 +1,15 @@
+// Ícono X (Twitter) — vector monocromo. Recolorea vía `fill="currentColor"`.
+export default function X(props) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill="currentColor"
+        d="M11.6961 23.3479H11.6448C5.22393 23.3479 0 18.1224 0 11.6996V11.6482C0 5.22545 5.22393 0 11.6448 0H11.6961C18.117 0 23.3409 5.22545 23.3409 11.6482V11.6996C23.3409 18.1224 18.117 23.3479 11.6961 23.3479ZM11.6448 0.790298C5.65925 0.790298 0.790065 5.66091 0.790065 11.6482V11.6996C0.790065 17.6869 5.65925 22.5575 11.6448 22.5575H11.6961C17.6817 22.5575 22.5509 17.6869 22.5509 11.6996V11.6482C22.5509 5.66091 17.6817 0.790298 11.6961 0.790298H11.6448Z"
+      />
+      <path
+        fill="currentColor"
+        d="M4.96892 5.50391L10.1691 12.4586L4.93652 18.1131H6.11452L10.6961 13.1627L14.3976 18.1131H18.4056L12.913 10.7673L17.7838 5.50391H16.6058L12.3869 10.0632L8.9777 5.50391H4.96969H4.96892ZM6.70073 6.37167H8.54163L16.6722 17.2454H14.8313L6.70073 6.37167Z"
+      />
+    </svg>
+  )
+}

package/src/components/ShareBlock/icons/index.js

@@ -0,0 +1,18 @@
+// Íconos de redes del ShareBlock — componentes SVG inline, monocromos.
+// Cada uno usa `fill="currentColor"`, así el color (y el hover) lo controla
+// el CSS del componente `Icon` (ver Icon.module.scss).
+import X        from './X.jsx'
+import Facebook from './Facebook.jsx'
+import Linkedin from './Linkedin.jsx'
+import Telegram from './Telegram.jsx'
+import Whatsapp from './Whatsapp.jsx'
+import Email    from './Email.jsx'
+
+export const NETWORK_ICONS = {
+  x:        X,
+  facebook: Facebook,
+  linkedin: Linkedin,
+  telegram: Telegram,
+  whatsapp: Whatsapp,
+  email:    Email,
+}

package/src/components/ShareBlock/variants/V1/V1.jsx

@@ -2,8 +2,10 @@ import Icon from '../../../UI/Icon/Icon.jsx'
 import shared from '../../ShareBlock.module.scss'
 import s from './V1.module.scss'
 
-export default function V1({ isAmp, inlineStyle, networks, v }) {
-  const containerCls = isAmp ? `share-block share-block--${v}` : `${shared.container} ${s.root}`
+export default function V1({ isAmp, inlineStyle, networks, v, borderLeft = false }) {
+  const containerCls = isAmp
+    ? `share-block share-block--${v}${borderLeft ? ' share-block--bordered' : ''}`
+    : `${shared.container} ${s.root}${borderLeft ? ` ${shared.borderLeft}` : ''}`
 
   return (
     <div className={containerCls} style={inlineStyle}>
@@ -11,16 +13,24 @@ export default function V1({ isAmp, inlineStyle, networks, v }) {
         Compartí esta nota:
       </span>
       <div className={isAmp ? 'share-block__icons' : shared.icons}>
-        {networks.map(({ key, src, label, href, tooltip }) => (
-          isAmp
+        {networks.map(({ key, Glyph, label, href, tooltip }) => {
+          // Links externos (http) → pestaña nueva. `mailto:` queda en la misma.
+          const external = (href ?? '').startsWith('http')
+          return isAmp
             ? (
-              <a key={key} href={href ?? '#'} className="share-block__icon-link" aria-label={label}>
-                <img src={src} alt={label} className="share-block__icon" />
+              <a
+                key={key}
+                href={href ?? '#'}
+                className="share-block__icon-link"
+                aria-label={label}
+                {...(external && { target: '_blank', rel: 'noopener noreferrer' })}
+              >
+                <Glyph className="share-block__icon" />
               </a>
             ) : (
-              <Icon key={key} src={src} label={label} href={href ?? '#'} tooltipText={tooltip} />
+              <Icon key={key} glyph={<Glyph />} label={label} href={href ?? '#'} tooltipText={tooltip} newTab={external} />
             )
-        ))}
+        })}
       </div>
     </div>
   )

package/src/components/ShareBlock/variants/V2/V2.jsx

@@ -2,8 +2,10 @@ import Icon from '../../../UI/Icon/Icon.jsx'
 import shared from '../../ShareBlock.module.scss'
 import s from './V2.module.scss'
 
-export default function V2({ isAmp, inlineStyle, networks, v }) {
-  const containerCls = isAmp ? `share-block share-block--${v}` : `${shared.container} ${s.root}`
+export default function V2({ isAmp, inlineStyle, networks, v, borderLeft = false }) {
+  const containerCls = isAmp
+    ? `share-block share-block--${v}${borderLeft ? ' share-block--bordered' : ''}`
+    : `${shared.container} ${s.root}${borderLeft ? ` ${shared.borderLeft}` : ''}`
 
   return (
     <div className={containerCls} style={inlineStyle}>
@@ -11,16 +13,24 @@ export default function V2({ isAmp, inlineStyle, networks, v }) {
         Compartí esta nota:
       </span>
       <div className={isAmp ? 'share-block__icons' : shared.icons}>
-        {networks.map(({ key, src, label, href, tooltip }) => (
-          isAmp
+        {networks.map(({ key, Glyph, label, href, tooltip }) => {
+          // Links externos (http) → pestaña nueva. `mailto:` queda en la misma.
+          const external = (href ?? '').startsWith('http')
+          return isAmp
             ? (
-              <a key={key} href={href ?? '#'} className="share-block__icon-link" aria-label={label}>
-                <img src={src} alt={label} className="share-block__icon" />
+              <a
+                key={key}
+                href={href ?? '#'}
+                className="share-block__icon-link"
+                aria-label={label}
+                {...(external && { target: '_blank', rel: 'noopener noreferrer' })}
+              >
+                <Glyph className="share-block__icon" />
               </a>
             ) : (
-              <Icon key={key} src={src} label={label} href={href ?? '#'} tooltipText={tooltip} />
+              <Icon key={key} glyph={<Glyph />} label={label} href={href ?? '#'} tooltipText={tooltip} newTab={external} />
             )
-        ))}
+        })}
       </div>
     </div>
   )

package/src/components/SpeechPlayerBar/SpeechPlayerBar.jsx

@@ -7,7 +7,7 @@ import styles from './SpeechPlayerBar.module.scss'
 
 export default function SpeechPlayerBar() {
   const [mounted, setMounted] = useState(false)
-  const { playing, paused, progress, meta, pause, resume, stop, skip, seekTo } = useSpeech()
+  const { playing, paused, progress, meta, pause, resume, stop, seekTo } = useSpeech()
 
   useEffect(() => { setMounted(true) }, [])
 
@@ -22,36 +22,8 @@ export default function SpeechPlayerBar() {
   return createPortal(
     <div className={styles.bar} role="region" aria-label="Reproductor de nota">
 
-      <button className={styles.closeBtn} onClick={stop} aria-label="Detener lectura">✕</button>
-
-      {/* Thumbnail */}
-      <div className={styles.thumb}>
-        {meta.imagen
-          ? <img src={meta.imagen} alt="" className={styles.thumbImg} />
-          : <span className={styles.thumbIcon}>🔊</span>
-        }
-      </div>
-
-      {/* Info */}
-      <div className={styles.info}>
-        <span className={styles.titulo}>{meta.titulo}</span>
-        <span className={styles.subtitle}>{playing ? 'Escuchando nota...' : 'En pausa'}</span>
-      </div>
-
-      {/* Equalizer */}
-      <div className={`${styles.eq} ${!playing ? styles.eqPaused : ''}`} aria-hidden="true">
-        <span className={styles.eqBar} />
-        <span className={styles.eqBar} />
-        <span className={styles.eqBar} />
-        <span className={styles.eqBar} />
-      </div>
-
-      {/* Skip back */}
-      <button className={styles.skipBtn} onClick={() => skip(-1)} aria-label="Retroceder">
-        <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
-          <path d="M6 6h2v12H6zm3.5 6 8.5 6V6z"/>
-        </svg>
-      </button>
+      {/* Título */}
+      <span className={styles.titulo}>{meta.titulo}</span>
 
       {/* Play / Pause */}
       <button
@@ -60,16 +32,15 @@ export default function SpeechPlayerBar() {
         aria-label={playing ? 'Pausar' : 'Continuar'}
       >
         {playing
-          ? <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
-          : <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M8 5v14l11-7z"/></svg>
+          ? <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+          : <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M8 5v14l11-7z"/></svg>
         }
       </button>
 
-      {/* Skip forward */}
-      <button className={styles.skipBtn} onClick={() => skip(1)} aria-label="Adelantar">
-        <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
-          <path d="M6 18l8.5-6L6 6v12zm2.5-6L15 6v12z" style={{display:'none'}}/>
-          <path d="M16 6h-2v12h2zm-3.5 6L4 6v12z"/>
+      {/* Cerrar */}
+      <button className={styles.closeBtn} onClick={stop} aria-label="Detener lectura">
+        <svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14">
+          <path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>
         </svg>
       </button>
 

package/src/components/SpeechPlayerBar/SpeechPlayerBar.module.scss

@@ -1,174 +1,85 @@
 @use "../../styles/index.scss" as *;
 
-// ── Mini player bar ───────────────────────────────────────────────────────────
+// ── Mini player bar (minimalista) ─────────────────────────────────────────────
 
 .bar {
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
-  width: calc(100% - 32px);
-  max-width: 500px;
+  width: max-content;
+  max-width: calc(100% - 32px);
   background: var(--secondary-color, #0D1333);
-  border-radius: 16px;
-  padding: 10px 12px 18px;   // extra bottom padding para la barra de progreso
+  border-radius: 14px;
+  padding: 7px 10px 7px 16px;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
   z-index: 9999;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
-
-    @include respond(desktop) {
-    padding: 0px;
-    margin: 0px;
-  }
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
 }
 
-// ── Botón cerrar ──────────────────────────────────────────────────────────────
-
-.closeBtn {
-  position: absolute;
-  top: 6px;
-  right: 8px;
-  background: none;
-  border: none;
-  color: rgba(255, 255, 255, 0.4);
-  font-size: 0.7rem;
-  cursor: pointer;
-  padding: 2px 4px;
-  line-height: 1;
-
-  &:hover { color: rgba(255, 255, 255, 0.9); }
-}
-
-// ── Thumbnail ─────────────────────────────────────────────────────────────────
-
-.thumb {
-  width: 44px;
-  height: 44px;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.08);
-  flex-shrink: 0;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.thumbImg {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.thumbIcon {
-  font-size: 1.3rem;
-}
-
-// ── Info ──────────────────────────────────────────────────────────────────────
-
-.info {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
+// ── Título ────────────────────────────────────────────────────────────────────
 
 .titulo {
   color: #fff;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 220px;
+  margin-right: 4px;
 }
 
-.subtitle {
-  color: rgba(255, 255, 255, 0.5);
-  font-size: 0.72rem;
-}
-
-// ── Equalizer animation ───────────────────────────────────────────────────────
-
-.eq {
-  display: flex;
-  gap: 2px;
-  align-items: flex-end;
-  height: 18px;
-  flex-shrink: 0;
-}
-
-.eqBar {
-  width: 3px;
-  background: var(--primary-color, #B1043F);
-  border-radius: 2px;
-  transform-origin: bottom;
-  animation: eq 0.7s ease-in-out infinite alternate;
-
-  &:nth-child(1) { height: 35%; animation-delay: 0s;    }
-  &:nth-child(2) { height: 75%; animation-delay: 0.15s; }
-  &:nth-child(3) { height: 55%; animation-delay: 0.3s;  }
-  &:nth-child(4) { height: 90%; animation-delay: 0.1s;  }
-}
-
-.eqPaused .eqBar {
-  animation-play-state: paused;
-  opacity: 0.4;
-}
-
-@keyframes eq {
-  from { transform: scaleY(0.25); }
-  to   { transform: scaleY(1); }
-}
-
-// ── Skip buttons ──────────────────────────────────────────────────────────────
+// ── Play / Pause button ───────────────────────────────────────────────────────
 
-.skipBtn {
-  background: none;
+.playBtn {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: #fff;
   border: none;
-  color: rgba(255, 255, 255, 0.65);
+  color: var(--secondary-color, #0D1333);
   cursor: pointer;
-  padding: 4px;
   display: flex;
   align-items: center;
+  justify-content: center;
   flex-shrink: 0;
+  transition: transform 0.12s;
 
-  &:hover { color: #fff; }
+  &:hover { transform: scale(1.05); }
 }
 
-// ── Play / Pause button ───────────────────────────────────────────────────────
+// ── Botón cerrar ──────────────────────────────────────────────────────────────
 
-.playBtn {
-  width: 38px;
-  height: 38px;
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.92);
+.closeBtn {
+  background: none;
   border: none;
-  color: var(--secondary-color, #0D1333);
+  color: rgba(255, 255, 255, 0.45);
   cursor: pointer;
+  padding: 4px;
   display: flex;
   align-items: center;
-  justify-content: center;
   flex-shrink: 0;
-  transition: background 0.15s;
+  transition: color 0.15s;
 
-  &:hover { background: #fff; }
+  &:hover { color: rgba(255, 255, 255, 0.95); }
 }
 
 // ── Progress bar ──────────────────────────────────────────────────────────────
 
 .progressTrack {
   position: absolute;
-  bottom: 8px;
-  left: 14px;
-  right: 14px;
-  height: 3px;
+  bottom: 0;
+  left: 16px;
+  right: 16px;
+  height: 2px;
   background: rgba(255, 255, 255, 0.15);
   border-radius: 2px;
   cursor: pointer;
 
-  &:hover { height: 5px; bottom: 7px; }
+  &:hover { height: 4px; }
 }
 
 .progressFill {

package/src/components/UI/Icon/Icon.jsx

@@ -10,13 +10,17 @@ function buildTooltip(label, href) {
   }
 }
 
-export default function Icon({ src, label, href, tooltipText }) {
-  const maskStyle = {
-    maskImage: `url(${src})`,
-    WebkitMaskImage: `url(${src})`,
-  }
-
-  const icon = <span style={maskStyle} aria-hidden="true" className={style.icon} />
+export default function Icon({ src, glyph, label, href, tooltipText, newTab = false }) {
+  // Dos modos de render del ícono:
+  //   - `glyph`: SVG inline (React node). Recolorea vía `fill="currentColor"`.
+  //   - `src`:   ruta a un .svg, usado como `mask-image` (modo legacy).
+  const icon = glyph
+    ? <span aria-hidden="true" className={style.glyph}>{glyph}</span>
+    : <span
+        aria-hidden="true"
+        className={style.icon}
+        style={{ maskImage: `url(${src})`, WebkitMaskImage: `url(${src})` }}
+      />
 
   if (href) {
     return (
@@ -25,6 +29,7 @@ export default function Icon({ src, label, href, tooltipText }) {
           className={style.container}
           href={href}
           aria-label={label}
+          {...(newTab && { target: '_blank', rel: 'noopener noreferrer' })}
         >
           {icon}
 

package/src/components/UI/Icon/Icon.module.scss

@@ -27,6 +27,26 @@
     background-color: var(--primary-color, #4bac48);
 }
 
+/* Modo glifo: SVG inline. El color (y su hover) se aplica vía `currentColor`
+   — el <svg> del ícono usa fill="currentColor". */
+.glyph{
+    display: block;
+    height: 32px;
+    width: 32px;
+    color: currentColor;
+    transition: color 0.3s;
+}
+
+.glyph svg{
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.container:hover .glyph{
+    color: var(--primary-color, #4bac48);
+}
+
 .container[data-tooltip] {
     position: relative;
 }

package/src/context/SpeechContext.jsx

@@ -4,6 +4,27 @@ import { createContext, useCallback, useContext, useEffect, useRef, useState } f
 
 const SpeechCtx = createContext(null)
 
+const STORAGE_KEY = 'portal-ui:speech'
+
+// ── Persistencia en sessionStorage ────────────────────────────────────────────
+// Permite que la barra sobreviva a un remount del provider (navegación SPA).
+
+const readSession = () => {
+  try { return JSON.parse(sessionStorage.getItem(STORAGE_KEY) || 'null') }
+  catch { return null }
+}
+
+const updateSession = (patch) => {
+  try {
+    const cur = readSession() || {}
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ ...cur, ...patch }))
+  } catch { /* sessionStorage no disponible */ }
+}
+
+const clearSession = () => {
+  try { sessionStorage.removeItem(STORAGE_KEY) } catch { /* noop */ }
+}
+
 const strip = (html) => (html ?? '').replace(/<[^>]+>/g, '').trim()
 
 function extractText(titulo, copete, cuerpo) {
@@ -51,11 +72,40 @@ export function SpeechProvider({ children }) {
   const [progress, setProgress] = useState(0)
   const [meta, setMeta]         = useState({ titulo: '', imagen: null })
 
-  const utterRef  = useRef(null)
-  const textRef   = useRef('')
-  const charRef   = useRef(0)
+  const utterRef    = useRef(null)
+  const textRef     = useRef('')
+  const charRef     = useRef(0)
+  const lastSaveRef = useRef(0)     // throttle de escritura a sessionStorage
+  const mountedRef  = useRef(true)  // false tras desmontar este provider
+
+  // ── Restaura el estado tras un remount del provider ─────────────────────────
+  // Antes este efecto cancelaba el audio en CADA desmontaje, lo que rompía la
+  // navegación SPA. Ahora solo cancela al cerrar/recargar la pestaña de verdad.
+  useEffect(() => {
+    const saved = readSession()
+    if (saved?.text) {
+      textRef.current = saved.text
+      charRef.current = saved.charIndex || 0
+      setMeta({ titulo: saved.titulo || '', imagen: saved.imagen || null })
+      setProgress(saved.progress || 0)
+      // El audio del navegador no sobrevive a un remount de React: cancelamos
+      // la utterance huérfana y dejamos la barra en pausa para que el usuario
+      // retome desde la posición guardada (resume() re-arranca solo).
+      window.speechSynthesis?.cancel()
+      setPlaying(false)
+      setPaused(true)
+    }
 
-  useEffect(() => () => window.speechSynthesis?.cancel(), [])
+    const onUnload = () => {
+      window.speechSynthesis?.cancel()
+      clearSession()
+    }
+    window.addEventListener('beforeunload', onUnload)
+    return () => {
+      mountedRef.current = false
+      window.removeEventListener('beforeunload', onUnload)
+    }
+  }, [])
 
   const startFrom = useCallback((charIndex) => {
     window.speechSynthesis.cancel()
@@ -68,13 +118,34 @@ export function SpeechProvider({ children }) {
     if (esVoice) utter.voice = esVoice
     utter.rate = 1
 
+    // Ignora eventos de utterances viejas (tras un skip/seek) o de un provider
+    // ya desmontado. Sin esto, un cancel() deliberado disparaba onend → y onend
+    // borraba la sesión, cerrando la barra en la siguiente navegación.
+    const isStale = () => !mountedRef.current || utterRef.current !== utter
+
     utter.onboundary = (e) => {
+      if (isStale()) return
       const abs = charIndex + (e.charIndex ?? 0)
       charRef.current = abs
-      setProgress(abs / textRef.current.length)
+      const p = abs / textRef.current.length
+      setProgress(p)
+      // Persiste el avance, pero como máximo cada 1.5s para no saturar.
+      const now = Date.now()
+      if (now - lastSaveRef.current > 1500) {
+        lastSaveRef.current = now
+        updateSession({ charIndex: abs, progress: p })
+      }
+    }
+    utter.onend = () => {
+      if (isStale()) return   // fue un cancel() deliberado, NO un fin de lectura
+      setPlaying(false); setPaused(false); setProgress(0)
+      charRef.current = 0
+      clearSession()
+    }
+    utter.onerror = () => {
+      if (isStale()) return
+      setPlaying(false); setPaused(false)
     }
-    utter.onend  = () => { setPlaying(false); setPaused(false); setProgress(0); charRef.current = 0 }
-    utter.onerror = () => { setPlaying(false); setPaused(false) }
 
     utterRef.current = utter
     setTimeout(() => window.speechSynthesis.speak(utter), 100)
@@ -84,12 +155,14 @@ export function SpeechProvider({ children }) {
 
   const play = useCallback(({ titulo, copete, cuerpo, imagen }) => {
     const text = extractText(titulo, copete, cuerpo)
-    console.log('[Speech] voz cargada:', window.speechSynthesis.getVoices().find(v => v.lang.startsWith('es'))?.name ?? 'default')
-    console.log('[Speech] texto completo:', text)
     textRef.current = text
     charRef.current = 0
     setMeta({ titulo, imagen: imagen ?? null })
     setProgress(0)
+    updateSession({
+      titulo, imagen: imagen ?? null,
+      text, charIndex: 0, progress: 0, status: 'playing',
+    })
     startFrom(0)
   }, [startFrom])
 
@@ -97,20 +170,30 @@ export function SpeechProvider({ children }) {
     window.speechSynthesis.pause()
     setPlaying(false)
     setPaused(true)
+    updateSession({ status: 'paused', charIndex: charRef.current })
   }, [])
 
   const resume = useCallback(() => {
-    window.speechSynthesis.resume()
-    setPlaying(true)
-    setPaused(false)
-  }, [])
+    // Si la utterance sigue viva en el navegador, simplemente la reanudamos.
+    // Si no (p. ej. tras un remount), re-arrancamos desde la posición guardada.
+    if (window.speechSynthesis.speaking && window.speechSynthesis.paused) {
+      window.speechSynthesis.resume()
+      setPlaying(true)
+      setPaused(false)
+    } else {
+      startFrom(charRef.current)
+    }
+    updateSession({ status: 'playing' })
+  }, [startFrom])
 
   const stop = useCallback(() => {
+    utterRef.current = null   // su onend quedará marcado como "stale" → no re-procesa
     window.speechSynthesis.cancel()
     setPlaying(false)
     setPaused(false)
     setProgress(0)
     charRef.current = 0
+    clearSession()
   }, [])
 
   // Salta ±10% del texto total
@@ -118,6 +201,7 @@ export function SpeechProvider({ children }) {
     const delta = Math.floor(textRef.current.length * 0.10) * direction
     const newPos = Math.max(0, Math.min(charRef.current + delta, textRef.current.length - 1))
     charRef.current = newPos
+    updateSession({ charIndex: newPos, status: 'playing' })
     startFrom(newPos)
   }, [startFrom])
 
@@ -125,6 +209,7 @@ export function SpeechProvider({ children }) {
   const seekTo = useCallback((ratio) => {
     const pos = Math.floor(ratio * textRef.current.length)
     charRef.current = pos
+    updateSession({ charIndex: pos, status: 'playing' })
     startFrom(pos)
   }, [startFrom])
 

package/src/styles/mixins/_media.scss

@@ -1,6 +1,15 @@
 @use "../variables/breakpoint" as *;
 
 @mixin respond($breakpoint) {
+  @if $breakpoint == mobile {
+    @supports (container-type: inline-size) {
+      @container (min-width: #{$mobile}) { @content; }
+    }
+    @supports not (container-type: inline-size) {
+      @media (min-width: $mobile) { @content; }
+    }
+  }
+
   @if $breakpoint == tablet {
     @supports (container-type: inline-size) {
       @container (min-width: #{$tablet}) { @content; }