/* ============================================================
   INFOYEC — docs.css
   Solo para el kit de perfiles sociales y la vista previa de la firma.
   ============================================================ */

/* Índice de redes */
.kit-idx{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);}
@media(min-width:720px){ .kit-idx{grid-template-columns:repeat(4,1fr);} }
.kit-idx__i{
  background:var(--bg);padding:1.4rem 1.5rem;display:grid;gap:.25rem;
  transition:background var(--d-1);
}
.kit-idx__i:hover{background:var(--papel);}
.kit-idx__i i{font-style:normal;display:block;width:26px;height:3px;border-radius:2px;margin-bottom:.7rem;}
.kit-idx__i b{font-family:var(--f-brand);font-weight:800;font-size:1.02rem;}
.kit-idx__i span{font-size:var(--t-xs);color:var(--ink-3);}

/* Bloque de nombre de usuario */
.kit-user{
  display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:2.2rem;
}
@media(min-width:820px){ .kit-user{grid-template-columns:1fr 1fr 1.3fr;} }
.kit-user > div{background:var(--bg);padding:1.4rem 1.5rem;}
.kit-lbl{
  font-size:var(--t-micro);letter-spacing:.19em;text-transform:uppercase;
  font-weight:600;color:var(--ink-3);margin-bottom:.6rem;
}
.kit-user__p{
  font-family:var(--f-mono);font-size:1rem;color:var(--accent-ink);
  font-weight:600;word-break:break-all;
}
.kit-alt{display:grid;gap:.35rem;}
.kit-alt li{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-2);word-break:break-all;}
.kit-nota{font-size:var(--t-xs);color:var(--ink-3);line-height:1.55;}

/* Campo de texto con su recuento */
.kit-campo{border-top:1px solid var(--rule);padding-block:1.7rem;}
.kit-campo__cab{
  display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:baseline;
  justify-content:space-between;margin-bottom:.9rem;
}
.kit-campo h3{font-size:var(--t-md);}
.kit-cnt{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.04em;
}
.kit-cnt--ok{color:var(--accent-ink);}
.kit-cnt--ap{color:#8A6100;}
.kit-cnt--mal{color:#C6301C;font-weight:700;}
.kit-barra{
  display:block;width:100%;height:3px;background:var(--rule);border-radius:2px;overflow:hidden;
}
.kit-barra i{display:block;height:100%;background:var(--accent);border-radius:2px;}
.kit-cnt--mal + .kit-barra i{background:#C6301C;}

.kit-texto{position:relative;}
.kit-texto pre{
  margin:0;background:var(--niebla);border:1px solid var(--rule);
  border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:1.2rem 6.5rem 1.2rem 1.2rem;
  font-family:var(--f-body);font-size:var(--t-sm);line-height:1.62;color:var(--ink);
  white-space:pre-wrap;word-break:break-word;
}
.kit-copiar{
  position:absolute;top:.85rem;right:.85rem;
  font-size:var(--t-xs);font-weight:600;padding:.42em .9em;border-radius:var(--r-pill);
  border:1px solid var(--rule);background:var(--papel);color:var(--ink-2);
  transition:border-color var(--d-1),color var(--d-1),background var(--d-1);
}
.kit-copiar:hover{border-color:var(--accent);color:var(--accent-ink);}
.kit-copiar[data-ok]{background:var(--jade);border-color:var(--jade);color:var(--azul);}

/* Portada */
.kit-portada{
  margin-top:2.2rem;padding:1.8rem;background:var(--niebla);
  border-left:3px solid var(--accent);
}
.kit-portada p{max-width:78ch;}

/* Galería de imágenes */
.kit-imgs{
  display:grid;gap:var(--gut);margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}
.kit-img{margin:0;}
.kit-img__m{
  background:var(--niebla);border:1px solid var(--rule);padding:.9rem;
  display:grid;place-items:center;min-height:150px;
}
.kit-img__m img{max-height:230px;width:auto;max-width:100%;box-shadow:var(--sh-1);}
.kit-img figcaption{padding-top:.9rem;display:grid;gap:.3rem;}
.kit-img figcaption b{font-family:var(--f-brand);font-weight:800;font-size:.98rem;}
.kit-img figcaption .mono{color:var(--accent-ink);}
.kit-img figcaption p{font-size:var(--t-xs);color:var(--ink-2);line-height:1.55;}
.kit-img figcaption .link-t{margin-top:.4rem;justify-self:start;}

/* Vista previa de la firma */
.kit-firma-prev{
  background:#fff;border:1px solid var(--rule);padding:1.4rem;border-radius:var(--r-sm);
}
.kit-firma-prev img{width:100%;height:auto;}