/* ==========================================================================
   Ficha — las piezas que el cliente pidió agregar al pie y al encabezado de una nota
   (Proyecto Wiki.pdf): visitas, compartir, franja de Help Center y relacionadas.

   Se apoya en los tokens del sitio (tokens.css) y NO trae paleta propia. Las maquetas que
   mandó el cliente (docs/wiki/ficha de novedad.png, docs/wiki/ficha_wiki.png) están dibujadas
   en morado, que no es la marca de este sitio —hoy es el naranja de --color-primary—; lo que
   se toma de ellas es la ESTRUCTURA (qué bloques hay y en qué orden), no el color. Cambiar la
   marca del sitio público es una decisión aparte y mucho más grande que agregar estos bloques.

   La única excepción son los tres botones de compartir, que llevan el color de su red: un
   ícono de WhatsApp en naranja no se reconoce, y ahí el color ES la identificación.
   ========================================================================== */

/* Texto solo para lectores de pantalla. El sitio público no tenía esta utilidad —WikiControl
   sí, con su propio nombre—, y la barra de compartir la necesita para que cada botón tenga
   nombre accesible sin dibujar la etiqueta. */
.u-visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Encabezado de la ficha ----------------------------------------------------------- */

.ficha__categoria {
  display: inline-block;
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
}

.ficha__categoria:hover {
  background: var(--color-accent);
  color: var(--color-ink);
}

.ficha__bajada {
  margin: var(--space-5) 0 0;
  max-width: 62ch;
  color: var(--color-text);
  font-size: var(--text-hero-sub);
  line-height: 26px;
}

/* --- Barra de visitas y compartir ------------------------------------------------------
   Una sola caja con las visitas a la izquierda y los botones a la derecha, como la maqueta.
   `flex-wrap` para que en angosto los botones bajen enteros en vez de encogerse: un blanco de
   toque de 44px no se negocia. */
.barra-nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-7);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.barra-nota__visitas {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: var(--space-4);
  margin: 0;
  padding-right: var(--space-7);
  border-right: var(--border-card);
}

.barra-nota__ojo {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.barra-nota__cifra {
  font-size: var(--text-card-title);
  line-height: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.barra-nota__rotulo {
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* `flex-wrap` y no solo en el media query: a 320px el rótulo «Compartir» empuja los cuatro
   botones fuera de la caja —medido, 326 contra 320 de documento, que es como se cayó
   VisualBaselineTests—. Envolviendo, los botones bajan enteros a una segunda línea y el blanco
   de toque de 44px queda intacto, que es lo que no se puede negociar. */
.barra-nota__compartir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
}

.barra-nota__compartir-rotulo {
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* 44px de lado: el mínimo de blanco de toque. Los cuatro son del mismo tamaño aunque el
   último sea <button> y los otros tres <a>. */
.barra-nota__boton {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-button);
}

.barra-nota__boton svg {
  width: 22px;
  height: 22px;
}

.barra-nota__boton--whatsapp:hover { background: #25d366; color: #ffffff; }
.barra-nota__boton--linkedin:hover { background: #0a66c2; color: #ffffff; }
.barra-nota__boton--facebook:hover { background: #1877f2; color: #ffffff; }

.barra-nota__boton--enlace:hover {
  background: var(--color-primary);
  color: var(--color-surface);
}

/* Copiar-enlace nace deshabilitado y lo habilita copiar-enlace.js: sin JS no hay portapapeles,
   y un botón habilitado que no hace nada es peor que uno que se ve apagado. Ver el comentario
   de cabecera de ese archivo. */
.barra-nota__boton[disabled] {
  opacity: 0.45;
  cursor: default;
}

.barra-nota__boton[disabled]:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.barra-nota__aviso {
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--color-text);
  min-width: 0;
}

/* --- Franja de Help Center -------------------------------------------------------------- */

.franja-hc {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-10) 0 var(--space-9);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.franja-hc__ilustracion {
  width: 88px;
  height: 88px;
  flex: none;
  color: var(--color-primary);
}

.franja-hc__ilustracion svg {
  width: 100%;
  height: 100%;
}

.franja-hc__texto {
  flex: 1;
  min-width: 0;
}

/* 18px y no los 24 de --text-section, que es lo que usa la maqueta: ahí la franja corre a lo
   ancho de un tablero de 1080px, y acá vive dentro de la medida de lectura de 834px. Con la
   ilustración y el botón a los costados al título le quedan ~310px, y a 24px eso son CUATRO
   renglones para una sola pregunta. */
.franja-hc__titulo {
  margin: 0 0 var(--space-3);
  font-size: var(--text-hero-sub);
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  text-wrap: pretty;
}

/* El nombre del producto va dentro del <p> del título, no en una línea aparte: la maqueta lo
   muestra a continuación de la pregunta, como parte de la misma frase. */
.franja-hc__producto {
  display: inline-block;
  margin-left: var(--space-3);
  padding: 2px var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-bold);
  vertical-align: middle;
}

.franja-hc__bajada {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

/* El filete separador de la maqueta se hace con `border-left` del propio botón y no con un
   <span> vacío: un elemento sin contenido solo para dibujar una línea es marcado de más. */
.franja-hc__accion {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  flex: none;
  align-self: stretch;
  padding-left: var(--space-8);
  border-left: var(--border-card);
  text-decoration: none;
}

.franja-hc__icono {
  width: 44px;
  height: 44px;
  flex: none;
  padding: 10px;
  border-radius: var(--radius-pill);
  background: #25d366;
  color: #ffffff;
}

.franja-hc__accion-titulo {
  display: block;
  font-size: var(--text-btn);
  line-height: 18px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.franja-hc__accion-pie {
  display: block;
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--color-text);
}

.franja-hc__accion:hover .franja-hc__accion-titulo {
  color: var(--color-primary);
}

/* --- Relacionadas (novedades de la misma categoría) ------------------------------------- */

.relacionadas {
  margin: var(--space-9) 0;
}

.relacionadas__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.relacionadas__title {
  margin: 0;
  font-size: var(--text-section);
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

.relacionadas__todas {
  margin-left: auto;
  font-size: var(--text-meta);
  line-height: var(--lh-meta);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.relacionadas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tarjeta-rel {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
}

.tarjeta-rel:hover {
  box-shadow: var(--shadow-card-hover);
}

.tarjeta-rel__imagen {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: var(--color-bg);
}

/* La variante sin foto ocupa el MISMO alto que la foto: si colapsara, una fila con dos notas
   con imagen y una sin ella quedaría con las tres tarjetas desalineadas. */
.tarjeta-rel__imagen--vacia {
  background: linear-gradient(135deg, var(--color-bg), var(--color-border));
}

.tarjeta-rel__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7);
}

.tarjeta-rel__chip {
  align-self: flex-start;
  padding: 2px var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: 11px;
  line-height: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.tarjeta-rel__titulo {
  font-size: var(--text-card-title);
  line-height: 24px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  text-wrap: pretty;
}

.tarjeta-rel:hover .tarjeta-rel__titulo {
  color: var(--color-primary);
}

.tarjeta-rel__meta {
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--color-text);
}

/* --- Ficha de artículo de la base: cuerpo + riel ------------------------------------------
   Dos columnas en escritorio, como la maqueta (docs/wiki/ficha_wiki.png). El riel va DESPUÉS
   del cuerpo en el marcado —quien navega con teclado llega al artículo antes que al botón de
   descarga— y se recoloca acá con `grid-column`: es exactamente para lo que sirve el grid, y
   no cambia el orden de lectura de un lector de pantalla como sí lo haría `order` en flex.

   El cuerpo se acota a 834px, la misma medida de lectura que da `container--prose` en el resto
   del sitio; la clase no se usa en el contenedor porque acotaría también al riel. */
.ficha-kb {
  display: grid;
  grid-template-columns: minmax(0, 834px) 320px;
  justify-content: center;
  gap: var(--space-10);
  align-items: start;
}

.ficha-kb__cuerpo {
  grid-column: 1;
  min-width: 0;
}

.ficha-kb__riel {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  /* Acompaña el scroll del cuerpo, que es mucho más largo. El `top` deja aire debajo del
     encabezado fijo del sitio. */
  position: sticky;
  top: calc(var(--header-h-desktop) + var(--space-7));
}

.riel-dato {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-7);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.riel-dato__icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-primary);
}

.riel-dato__icono svg {
  width: 20px;
  height: 20px;
}

.riel-dato__texto {
  min-width: 0;
}

.riel-dato__rotulo {
  display: block;
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.riel-dato__valor {
  display: block;
  font-size: var(--text-card-title);
  line-height: 22px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  overflow-wrap: break-word;
}

/* El botón de descarga es la acción principal del riel y la única superficie llena de marca
   de toda la ficha. `width: 100%` porque es <button>, que no se estira solo dentro de un flex
   en columna con `align-items` por defecto. */
.riel-pdf {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-7);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-surface);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-button);
}

.riel-pdf:hover {
  background: var(--color-accent);
  color: var(--color-ink);
}

.riel-pdf__icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-pill);
  /* Sobre el naranja de la marca, el disco se hace aclarando el propio fondo y no con un hex
     fijo: así sigue funcionando cuando el botón pasa al ámbar del hover. */
  background: rgba(255, 255, 255, 0.22);
}

.riel-pdf__icono svg {
  width: 20px;
  height: 20px;
}

.riel-pdf__texto {
  flex: 1;
  min-width: 0;
}

.riel-pdf__titulo {
  display: block;
  font-size: var(--text-btn);
  line-height: 20px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.riel-pdf__pie {
  display: block;
  font-size: var(--text-small);
  line-height: var(--lh-small);
  opacity: 0.85;
}

.riel-pdf__flecha {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Debajo de los 1024 el riel no entra al lado del cuerpo sin dejar la prosa en una tira: pasa
   a una fila arriba del artículo, que es donde la maqueta angosta lo pondría igual. */
@media (max-width: 1024px) {
  .ficha-kb {
    grid-template-columns: minmax(0, 834px);
  }

  .ficha-kb__cuerpo,
  .ficha-kb__riel {
    grid-column: 1;
  }

  .ficha-kb__riel {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .riel-dato,
  .riel-pdf {
    flex: 1 1 260px;
  }
}


/* --- Angosto -----------------------------------------------------------------------------
   Los dos bloques que son una fila en escritorio —la barra y la franja— se apilan. El corte
   es 640 y no 768: medido contra el marcado real, la franja aguanta la fila hasta ahí. */
@media (max-width: 640px) {
  .barra-nota__visitas {
    padding-right: 0;
    border-right: 0;
  }

  .barra-nota__compartir {
    margin-left: 0;
    width: 100%;
  }

  .franja-hc {
    flex-direction: column;
    align-items: flex-start;
  }

  .franja-hc__ilustracion {
    width: 64px;
    height: 64px;
  }

  .franja-hc__accion {
    align-self: stretch;
    padding-left: 0;
    padding-top: var(--space-7);
    border-left: 0;
    border-top: var(--border-card);
  }
}

/* Nada de esto se imprime: el PDF de una ficha es su contenido, no sus botones de compartir
   ni la invitación a escribir por WhatsApp. Mismo criterio que ya aplica print.js al resto. */
@media print {
  .barra-nota,
  .franja-hc,
  .relacionadas {
    display: none;
  }
}