/* KlipTok v26 · estilos de Biolink, Acortador y Comunidades (usa las variables --k18-* del hub, así sigue el tema claro/oscuro) */
.k26-bl { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.k26-pre { display: flex; align-items: stretch; border: 1px solid var(--k18-line); border-radius: .6rem; background: var(--k18-card); overflow: hidden; }
.k26-pre small { display: flex; align-items: center; padding: 0 .6rem; background: var(--k18-soft); color: var(--k18-mute); font-weight: 600; white-space: nowrap; border-right: 1px solid var(--k18-line); }
.k26-pre .k18-in { border: 0; border-radius: 0; flex: 1 1 auto; }
.k26-colors { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-top: .4rem; }
.k26-sw { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid var(--k18-card); box-shadow: 0 0 0 1px var(--k18-line); cursor: pointer; padding: 0; }
.k26-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--k18-a); }
.k26-colors input[type=color] { width: 2rem; height: 1.8rem; padding: 0; border: 1px solid var(--k18-line); border-radius: .4rem; background: none; }
.k26-links { display: grid; gap: .5rem; margin: .5rem 0; }
.k26-lrow { display: grid; grid-template-columns: 3.2rem minmax(0, .9fr) minmax(0, 1.4fr) auto; gap: .4rem; align-items: center; }
.k26-lrow .k18-in { min-width: 0; } .k26-em { text-align: center; padding-inline: .2rem; }
.k26-ctl { display: inline-flex; gap: .25rem; } .k26-ctl .k18-btn { padding: .35rem .55rem; }
.k26-ok { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--k18-free-ink); border-radius: .8rem; background: var(--k18-free-bg); display: grid; gap: .5rem; }
.k26-url { overflow-x: auto; } .k26-url code, .k26-sinfo code { font-size: .86rem; word-break: break-all; }
.k26-srow { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--k18-line); }
.k26-sinfo { display: grid; gap: .15rem; min-width: 0; } .k26-sinfo small { color: var(--k18-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* vista previa del Biolink (igual que la página pública /b/usuario) */
.k26-pvc { border: 1px solid var(--k18-line); border-radius: 1.2rem; overflow: hidden; background: var(--k18-card); max-width: 22rem; margin: 0 auto; }
.k26-pvb { height: 5rem; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 45%, #db2777)); }
.k26-pvi { padding: 0 1.2rem 1.1rem; margin-top: -2.1rem; }
.k26-pva { width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--k18-soft); border: 3px solid var(--k18-card); display: grid; place-items: center; font-size: 2rem; overflow: hidden; margin-bottom: .5rem; } .k26-pva img { width: 100%; height: 100%; object-fit: cover; }
.k26-pvi h4 { margin: 0 0 .2rem; font-size: 1.1rem; } .k26-pvi p { margin: 0 0 .8rem; font-size: .85rem; color: var(--k18-mute); white-space: pre-line; }
.k26-pvl { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; margin-bottom: .45rem; border-radius: .7rem; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); font-size: .88rem; }
.k26-pvf { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--k18-line); text-align: center; font: 800 .8rem Georgia, serif; color: var(--k18-mute); }
/* Comunidades */
.k26-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; } .k26-bar .k18-in { flex: 1 1 14rem; min-width: 0; } .k26-bar .k18-sel { width: auto; }
.k26-cgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.k26-cc { display: flex; flex-direction: column; gap: .5rem; } .k26-cc p { margin: 0; font-size: .86rem; color: var(--k18-mute); flex: 1 1 auto; }
.k26-ch { display: flex; gap: .7rem; align-items: center; } .k26-ch h3 { margin: 0; font-size: 1rem; } .k26-meta { display: flex; flex-wrap: wrap; gap: .25rem; } .k26-meta .k18-pill { margin-top: .15rem; }
.k26-when { color: var(--k18-mute); font-size: .72rem; } .k26-pubf { max-width: 30rem; max-height: 92vh; overflow-y: auto; }
@media (max-width: 760px) { .k26-bl { grid-template-columns: 1fr; } .k26-lrow { grid-template-columns: 3rem minmax(0, 1fr) auto; } .k26-lrow .k26-url { grid-column: 1 / -1; order: 5; } }