/* PIEZA: compartir
 * ---------------------------------------------------------------------------
 * El boton se cambia por la fila de redes, como en la referencia
 * (bonviveur.com). Sin scripts de terceros: los iconos van en el HTML y los
 * enlaces son enlaces.
 *
 * La lista se pinta ABIERTA y el JavaScript la cierra, no al reves: si el JS
 * no llega, se ven los enlaces igual. Estas reglas solo entran cuando el JS ha
 * marcado `data-listo`, para que no se vea abrirse y cerrarse.
 * --------------------------------------------------------------------------- */

/* La fila de la ficha: autoria y fecha a la izquierda, compartir a la derecha.
   El envoltorio lo crea la propia pieza capturando lo que pinta `ficha`, que
   escribe con `echo` y no deja donde engancharse. */
.dl-meta-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dl-esp-md);
  margin-bottom: var(--dl-esp-xl);
  padding-bottom: var(--dl-esp-md);
  border-bottom: 1px solid var(--dl-linea);
}
.dl-meta-fila .dl-ficha {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* El hueco esta RESERVADO desde el principio.
   La fila abierta mide 7 botones de 38px mas 6 huecos de 8px = 314px. Si el
   bloque solo ocupara lo que ocupa el boton (unos 140px), al abrirlo se
   ensancharia, la ficha de al lado se estrecharia y el texto se recolocaria
   entero: pulsar «Comparte» movia media cabecera. Reservando el ancho final
   desde el principio, al abrir no se mueve nada. */
/* `flex-end`, no `flex-start`: con el ancho reservado a 314px y el boton
   ocupando solo unos 140, `flex-start` lo dejaba pegado al borde IZQUIERDO de
   ese hueco reservado, o sea colgando a mitad del bloque en vez de tocar el
   borde derecho de verdad. Con `flex-end` toca el borde en los dos estados: el
   boton cerrado y la fila abierta (que si ocupa el ancho entero). */
.dl-compartir {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--dl-esp-sm);
  flex: 0 0 auto;
  margin: 0;
  min-width: 314px;
  min-height: 38px;
}

/* --- El botón -------------------------------------------------------------- */

.dl-compartir__boton {
  display: none;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--dl-linea);
  border-radius: 999px;
  background: var(--dl-superficie);
  color: var(--dl-tinta);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  /* Sin `color` en la transicion: no hay ningun estado que cambie el color
     del texto, y dejarla puesta sin uso es la clase de resto que confunde al
     leer el fichero dentro de seis meses. */
  transition: background var(--dl-dur) var(--dl-ease), border-color var(--dl-dur) var(--dl-ease);
}
.dl-compartir[data-listo] .dl-compartir__boton { display: inline-flex; }
.dl-compartir[data-abierta] .dl-compartir__boton { display: none; }

/* El icono lleva el azul de marca SIEMPRE, no solo al pasar por encima: es el
   color que hace destacar al boton (el usuario lo pidio explicitamente
   despues de ver que, sin el, «Comparte» se perdia entre el resto de texto
   gris de la ficha). La etiqueta se queda en la tinta del sitio: lo que
   cambia con el raton es solo el fondo y el borde, nunca una letra. */
.dl-compartir__boton svg { color: var(--dl-azul-700); flex: none; }
.dl-compartir__boton:hover { background: #F4F7FA; border-color: #C9CFD6; }
.dl-compartir__boton:active { transform: translateY(1px); }
.dl-compartir__boton:focus-visible { outline: 2px solid var(--dl-foco); outline-offset: 2px; }

/* --- La fila --------------------------------------------------------------- */

.dl-compartir__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dl-esp-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dl-compartir[data-listo] .dl-compartir__lista { display: none; }
.dl-compartir[data-listo][data-abierta] .dl-compartir__lista {
  display: flex;
  /* El deslizamiento: entran desde la izquierda, que es de donde venia el
     boton que acaban de sustituir. */
  animation: dl-compartir-entra 220ms var(--dl-ease) both;
}

@keyframes dl-compartir-entra {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

.dl-compartir__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dl-azul-700);
  color: #fff;
  cursor: pointer;
  transition: filter var(--dl-dur) var(--dl-ease), transform var(--dl-dur) var(--dl-ease);
}
.dl-compartir__enlace:hover { filter: brightness(1.12); }
.dl-compartir__enlace:active { transform: translateY(1px); }
.dl-compartir__enlace:focus-visible { outline: 2px solid var(--dl-foco); outline-offset: 3px; }

/* Cada red, con su color. Es el unico sitio del sitio donde entran colores de
   fuera de la paleta, y entran porque una red se reconoce por su color tanto
   como por su forma. Son siete circulos de 38px: muy lejos del 5% de area que
   el sistema reserva al azul de marca. */
.dl-compartir__enlace--whatsapp { background: #25D366; }
.dl-compartir__enlace--telegram { background: #26A5E4; }
.dl-compartir__enlace--facebook { background: #0866FF; }
.dl-compartir__enlace--x        { background: #000000; }
.dl-compartir__enlace--linkedin { background: #0A66C2; }
.dl-compartir__enlace--email    { background: #6B7076; }
.dl-compartir__enlace--enlace   { background: var(--dl-azul-900); }

/* --- El aviso de «copiado» ------------------------------------------------- */

.dl-compartir__aviso {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  padding: 0.3rem 0.6rem;
  border-radius: var(--dl-radio);
  background: var(--dl-azul-900);
  color: #fff;
  font-size: 0.78rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dl-dur) var(--dl-ease);
}
.dl-compartir[data-copiado] .dl-compartir__aviso { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dl-compartir[data-listo][data-abierta] .dl-compartir__lista { animation: none; }
  .dl-compartir__enlace,
  .dl-compartir__boton { transition: none; }
}

/* --- Móvil -----------------------------------------------------------------
   En 375px no caben la ficha y los siete botones en la misma linea, pero
   apilarlos sin mas dejaba el boton solo en una linea entera, debajo de cuatro
   lineas de letra pequena: cinco lineas de metadatos antes del primer parrafo.
   Asi que rejilla: la ficha a la izquierda y el boton arriba a la derecha, en
   el hueco que dejan las dos lineas de datos. Y cuando se abre, la fila de
   redes se pasa al ancho completo, en su propia linea: es la unica forma de
   que quepan siete botones sin estrujar el texto de al lado. */
@media (max-width: 700px) {
  .dl-meta-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--dl-esp-md);
  }
  .dl-meta-fila .dl-ficha { grid-column: 1; }
  .dl-compartir { min-width: 0; }
  .dl-compartir[data-abierta] { grid-column: 1 / -1; }
  .dl-compartir__lista { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .dl-compartir__enlace { width: 36px; height: 36px; }
}

/* En Modelos, fuera tambien la fila entera (autoria ya oculta en
   ficha.css, y con ella se va el compartir y la linea gris de abajo:
   no queda nada por encima del bloque de descarga). */
article.category-modelos .dl-meta-fila {
  display: none;
}