/* ============================================================ kol-shell.css — the one header, from Carolain's redesign. Ported verbatim from her styles/shared/shell.css. Every class is k- prefixed on purpose: no page stylesheet can reach in and alter the header. Do not add page-specific rules to this file, and do not style .k-* from anywhere else. The markup lives in partials/nav.html and is injected by nav.js, which is our equivalent of her shell.js. ============================================================ */ /* ============================================================ Kolmena · barra superior única Todo va con prefijo k- : ningún CSS de página puede tocarlo. El header lo genera shell.js; aquí solo vive su apariencia. ============================================================ */ /* El contenedor que inyecta nav.js no puede crear un bloque propio: si lo hace, position:sticky se limita a su altura y la barra se despega al primer scroll. Vivía en kol-app.css, que 31 páginas no cargan. */ #nav-root{display:contents} /* La altura de la barra la leen tres paneles (el buscador, el menú del teléfono y su velo). Vivía copiada en cada uno, y al bajar el header a 72px en el teléfono los tres quedaron anclados 12px más abajo: se veía una franja de página entre la barra y el menú, y el menú "cortado". */ :root{--k-head:84px;--k-side:250px} @media(max-width:720px){:root{--k-head:72px}} /* El hueco de la lateral lo paga el body, no cada página: los 37
de la app tienen cada uno su propio contenedor centrado (width:min(...); margin:0 auto), y todos siguen centrándose solos dentro del ancho que queda. Así la lateral entró sin tocar ni una hoja de página. La condición es :has(#nav-root) y no una clase que ponga nav.js: el contenedor está en el HTML desde el primer byte, así que el hueco existe ya en el primer pintado y no hay salto cuando llega el menú. Las ocho pantallas sin sesión (login, registro, alta, enlace mágico…) no tienen #nav-root y por tanto no reservan nada. */ body:has(#nav-root){padding-left:var(--k-side)} .k-header{position:sticky;top:0;z-index:180;height:var(--k-head);display:flex;align-items:center;gap:22px;padding:0 clamp(22px,2.2vw,44px);border-bottom:1px solid #ebe8e2;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);font-family:"Poppins",Arial,sans-serif} /* El propio .k-header tambien, no solo sus hijos. Lo llevaban los hijos y el no, asi que en las paginas cuya hoja NO pone border-box global —las que lo acotan a sus propias clases a proposito, como surveys— la barra sumaba sus 20px de padding al ancho y el documento media 410 en una ventana de 390: barra horizontal en el telefono. Lo mismo .k-side. */ .k-header,.k-header *{box-sizing:border-box} /* La barra cruza entera de lado a lado, por encima de la lateral: la marca tiene que quedar sobre la columna del menú, como en cualquier shell con lateral. Se sale del padding del body con un margen negativo en vez de irse a position:fixed, porque fixed obligaría a compensar la altura en las 37 páginas y sticky ya hace lo que hace falta. */ .k-header{margin-left:calc(var(--k-side) * -1);width:calc(100% + var(--k-side));padding-left:0} /* La marca ocupa exactamente la columna de la lateral y se alinea con sus enlaces, de modo que lo que sigue en la barra (comunidad, buscador) arranca justo donde arranca el contenido de la página. */ /* marca */ .k-brand{flex:0 0 var(--k-side);width:var(--k-side);padding-left:22px;display:flex;align-items:center;gap:11px;color:#171916;text-decoration:none} .k-logo{width:30px;height:34px;display:block} .k-logo svg{width:100%;height:100%;display:block;overflow:visible} /* Ámbar literal, nunca var(--miel): nav.js repinta esa variable con el color de la comunidad activa, y la marca Kolmena no es del inquilino. */ .k-logo .kolmena-logo path{fill:none;stroke:var(--brand-76);stroke-width:2.3;stroke-linejoin:round} .k-brand strong{font-size:23px;font-weight:700;letter-spacing:-.03em} /* selector de comunidad */ .k-community{flex:0 0 auto;height:54px;min-width:248px;max-width:290px;display:flex;align-items:center;gap:11px;padding:0 13px;border:1px solid #e8e4dc;border-radius:14px;background:#fff;text-align:left;font:inherit;cursor:pointer;transition:.16s} .k-community:hover{border-color:#d8d1c3;background:color-mix(in oklab, var(--brand-98), #f8f8f8 67%)} .k-community[aria-expanded="true"]{border-color:var(--brand-76);box-shadow:0 0 0 3px rgba(var(--brand-rgb), .13)} .k-cs-icon{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;overflow:hidden;color:#fff} .k-cs-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .k-cs-icon img{width:100%;height:100%;object-fit:cover} .k-cs-icon.amber{background:linear-gradient(145deg,var(--brand-74),var(--brand-83))} .k-cs-icon.blue{background:linear-gradient(145deg,#3663b4,#6a95dd)} .k-cs-icon.plum{background:linear-gradient(145deg,#7c4d99,#a97cc4)} .k-cs-icon.green{background:linear-gradient(145deg,#268a51,#4bbd7d)} .k-cs-icon.photo{background:#efece6} .k-cs-name{flex:1;min-width:0;color:#171916;font-size:13.5px;font-weight:700;line-height:1.28;letter-spacing:-.01em} .k-cs-caret{flex:0 0 auto;color:#9a9e97;font-size:13px;font-weight:400;font-style:normal} /* ============================================================ menú principal — la columna de la izquierda ============================================================ */ /* Fija, no sticky: la lista tiene que seguir ahí cuando el muro lleva cuatrocientas publicaciones de scroll. Se desplaza sola sólo si el menú no cabe en alto (un portátil de 13" con rol de admin). */ .k-side{position:fixed;left:0;top:var(--k-head);bottom:0;z-index:170;width:var(--k-side);display:flex;flex-direction:column;gap:18px;padding:16px 14px 20px;overflow-y:auto;overscroll-behavior:contain;border-right:1px solid #ebe8e2;background:#fff;font-family:"Poppins",Arial,sans-serif} .k-side,.k-side *{box-sizing:border-box} /* La barra de scroll, sólo cuando hace falta y sin robar ancho. */ .k-side{scrollbar-width:thin;scrollbar-color:#e2ded6 transparent} .k-side::-webkit-scrollbar{width:6px} .k-side::-webkit-scrollbar-thumb{border-radius:3px;background:#e2ded6} .k-nav{display:flex;flex-direction:column;gap:2px} .k-nav>a,.k-nav-trigger{position:relative;width:100%;display:flex;align-items:center;gap:13px;padding:11px 14px;border:0;border-radius:12px;background:none;color:#5b605a;font:inherit;font-size:14.5px;font-weight:500;text-align:left;text-decoration:none;letter-spacing:-.005em;cursor:pointer;transition:background .15s,color .15s} .k-nav>a svg,.k-nav-trigger svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .k-nav>a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .k-nav>a:hover,.k-nav-trigger:hover{background:#f7f5f1;color:#171916} /* nav.js marca la pestaña activa con .active; el CSS portado esperaba .on, así que la marca ámbar nunca aparecía. Se aceptan ambas. En columna la señal ya no es un subrayado sino la fila entera teñida: con diez secciones apiladas, un filete de 3px se pierde. */ .k-nav>a.on,.k-nav>a.active,.k-nav-trigger.on,.k-nav-trigger.active, .nav-drop.active .k-nav-trigger,.k-nav-trigger[aria-expanded="true"]{ background:var(--brand-96);color:var(--brand-43);font-weight:600} .k-nav>a.on svg,.k-nav>a.active svg{stroke:var(--brand-62)} /* ---------- el pie de la lateral ---------- */ /* Empuja al fondo de la columna cuando sobra alto, y se queda pegado debajo del menú cuando no. */ .k-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:0 4px} .k-side-label{margin:0 0 2px;padding:0 10px;color:#9a9e97;font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase} /* El progreso del perfil. Vivía dentro del menú del avatar, o sea en ningún sitio: un miembro a medio configurar no vuelve a abrir ese menú. Aquí está a la vista en todas las pantallas. */ .k-side-progress{display:flex;flex-direction:column;gap:9px;padding:13px 14px;border:1px solid #efece6;border-radius:15px;background:#fff;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s} .k-side-progress:hover{border-color:var(--brand-91);box-shadow:0 6px 18px rgba(23,25,22,.05)} .k-side-progress[hidden]{display:none} .k-sp-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .k-sp-top b{color:#171916;font-size:13px;font-weight:600;letter-spacing:-.01em} .k-sp-top em{color:var(--brand-51);font-size:13px;font-weight:700;font-style:normal} .k-sp-bar{display:block;height:6px;border-radius:99px;background:#f0ede7;overflow:hidden} .k-sp-bar i{display:block;height:100%;border-radius:99px;background:var(--brand-grad);transition:width .4s ease} .k-sp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px} .k-sp-foot small{color:#747873;font-size:11.5px;font-weight:400;line-height:1.4} .k-sp-foot svg{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:#9a9e97;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .k-side-progress:hover .k-sp-foot svg{stroke:var(--brand-58)} /* La nota de comunidad. Es decoración con un mensaje, no un control: sin enlace, para que no compita con el progreso que sí lleva a algo. */ .k-side-promo{position:relative;display:flex;flex-direction:column;gap:5px;padding:15px 15px 16px;border-radius:15px;background:linear-gradient(160deg,var(--brand-97),var(--brand-93));overflow:hidden} .k-sp-crown{width:20px;height:20px;margin-bottom:3px;fill:none;stroke:var(--brand-58);stroke-width:1.8;stroke-linejoin:round} .k-side-promo b{color:var(--brand-32);font-size:14px;font-weight:700;line-height:1.25;letter-spacing:-.02em} .k-side-promo small{color:var(--brand-43);font-size:11.5px;line-height:1.45} /* desplegable del menú principal: se abre solo con clic */ .k-nav-item{position:relative;height:100%;display:flex;align-items:center} .k-nav-caret{font-size:13px;font-weight:400;font-style:normal;line-height:1;transition:transform .16s} .k-nav-trigger[aria-expanded="true"] .k-nav-caret{transform:rotate(180deg)} .k-nav-menu{position:absolute;top:calc(100% + 1px);left:-16px;z-index:5;min-width:236px;padding:8px;border:1px solid #ebe8e2;border-radius:14px;background:#fff;box-shadow:0 18px 44px rgba(23,25,22,.14);animation:k-nav-drop .14s ease-out} .k-nav-menu.align-right{left:auto;right:-16px} .k-nav-menu a{display:block;padding:11px 14px;border-radius:10px;color:#3c413b;font-size:14.5px;font-weight:500;text-decoration:none;letter-spacing:-.005em} .k-nav-menu a:hover,.k-nav-menu a:focus-visible{background:#faf8f4;color:#171916;outline:0} @keyframes k-nav-drop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} /* buscador */ /* Con el menú en la lateral, el centro de la barra queda libre y el buscador deja de ser una rendija de 190px: crece hasta 560px, que es donde una consulta como "proveedor de empaques en Medellín" se lee entera mientras se escribe. Sigue pudiendo encoger hasta 120px antes de ceder el turno a la lupa. */ .k-search{flex:1 1 auto;min-width:120px;max-width:560px;height:46px;display:flex;align-items:center;gap:11px;padding:0 18px;border-radius:999px;background:#f4f2ee;transition:background .15s,box-shadow .15s} .k-search:focus-within{background:#fff;box-shadow:0 0 0 1px #e4e0d8,0 6px 18px rgba(23,25,22,.07)} .k-search svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:#8a8e87;stroke-width:1.9;stroke-linecap:round} .k-search input{width:100%;border:0;outline:0;background:none;font:inherit;font-size:14px;color:#171916} /* acciones */ .k-actions{flex:0 0 auto;display:flex;align-items:center;gap:5px} .k-icon{position:relative;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:#4d524c;cursor:pointer} .k-icon:hover{background:#f3f1ed} .k-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .k-icon i{position:absolute;right:5px;top:5px;min-width:17px;height:17px;display:grid;place-items:center;border:2px solid #fff;border-radius:9px;background:#e5484d;color:#fff;font:700 11px/1 Arial;font-style:normal} /* menú de la cuenta */ .k-user{position:relative;display:flex;align-items:center} .k-me{width:42px;height:42px;margin-left:3px;padding:0;border:0;border-radius:50%;background:none;overflow:hidden;display:block;cursor:pointer;transition:box-shadow .15s} .k-me:hover,.k-me[aria-expanded="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--k-amber,var(--brand-76))} .k-me img{width:100%;height:100%;object-fit:cover;display:block} .k-user-menu{position:absolute;right:0;top:calc(100% + 12px);z-index:6;width:264px;padding:6px;max-height:calc(100vh - var(--k-head) - 24px);overflow-y:auto;border:1px solid #ebe8e2;border-radius:16px;background:#fff;box-shadow:0 18px 44px rgba(23,25,22,.16);animation:k-nav-drop .14s ease-out} .k-user-head{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;color:inherit;text-decoration:none} .k-user-head:hover{background:#faf8f4} /* ---------- S30: selector de estado ---------- */ .k-presence{display:grid;gap:1px;margin:6px 0;padding:5px 0; border-top:1px solid #f0ede7;border-bottom:1px solid #f0ede7} .k-presence button{display:flex;align-items:center;gap:10px;padding:9px 12px; border:0;border-radius:10px;background:none;color:#3c413b; font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer} .k-presence button:hover{background:#faf8f4} .k-presence button.on{background:var(--brand-98);color:var(--brand-51)} /* La marca del estado activo va al final y no delante: si no, el punto de color se desplaza y las tres filas dejan de alinearse. */ .k-presence button.on::after{content:"✓";margin-left:auto;font-weight:800} .k-pres-dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#c3c6c1} .k-pres-dot.is-online{background:var(--green)} .k-pres-dot.is-busy{background:var(--brand-76)} .k-pres-dot.is-off{background:#c3c6c1} /* El punto de presencia, alla donde se pinte. Cada pantalla ya le daba tamano y sitio a su (.member-row i, .online-avatar i, .active-person>i), y esas reglas siguen mandando en la forma: aqui solo se corrige el COLOR, que estaba clavado en verde pasara lo que pasara. `i.kol-presence.is-busy` gana en especificidad a `.member-row i` sin necesidad de !important. */ i.kol-presence.is-online{background:var(--green)} i.kol-presence.is-busy{background:var(--brand-76)} /* Tu propio punto, al lado de tu avatar de la barra. En la esquina inferior NO funciona aqui: el chip son unas iniciales sueltas, sin circulo de fondo, asi que un punto pegado a su esquina flotaba en el vacio y parecia un fallo de pintado. Como .k-user es una fila flex, el punto va como hermano del boton y se alinea solo al lado del texto. Sin borde blanco: no hay foto de la que despegarlo. */ .k-me-dot{flex:0 0 auto;margin-left:5px; width:9px;height:9px;border-radius:50%; background:#c3c6c1;pointer-events:none} .k-me-dot[hidden]{display:none} .k-me-dot.is-online{background:var(--green)} .k-me-dot.is-busy{background:var(--brand-76)} .k-user-head img{width:40px;height:40px;flex:0 0 40px;border-radius:50%;object-fit:cover} .k-user-face{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:var(--av,linear-gradient(145deg,var(--brand-91),var(--brand-76)));color:var(--av-fg,var(--brand-on));font-size:14px;font-weight:700;letter-spacing:-.02em} .k-user-id{display:grid;min-width:0} .k-user-head b{font-size:14px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .k-user-head small{margin-top:2px;color:#797d76;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .k-user-list{display:grid;padding:5px 0;margin-top:4px;border-top:1px solid #f2efe9} .k-user-list a,.k-user-list button{display:block;width:100%;padding:10px 12px;border:0;border-radius:11px;background:none;color:#3c413b;font:inherit;font-size:13.5px;font-weight:500;text-align:left;text-decoration:none;cursor:pointer} .k-user-list a:hover,.k-user-list button:hover,.k-user-list a:focus-visible,.k-user-list button:focus-visible{background:#faf8f4;color:#171916;outline:0} .k-lang{display:flex;gap:5px;padding:8px 12px;border-top:1px solid #f2efe9} .k-lang a,.k-lang button{display:grid;place-items:center;min-width:38px;height:28px;border:0;border-radius:9px;background:none;color:#797d76;font:inherit;font-size:11.5px;font-weight:700;text-decoration:none;cursor:pointer} .k-lang a:hover,.k-lang button:hover{background:#f4f2ee;color:#171916} .k-lang a.active,.k-lang button.on{background:color-mix(in oklab, var(--brand-98), #f8f8f8 11%);color:var(--brand-51)} .k-user-out{padding:5px 0 1px;border-top:1px solid #f2efe9} .k-signout{display:block;width:100%;padding:10px 12px;border:0;border-radius:11px;background:none;color:#c0392b;font:inherit;font-size:13.5px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer} .k-signout:hover{background:#fdeceb} /* aviso del header */ .k-toast{position:fixed;left:50%;bottom:26px;z-index:400;padding:12px 18px;border-radius:13px;background:#171916;color:#fff;font-family:"Poppins",Arial,sans-serif;font-size:13.5px;transform:translate(-50%,14px);opacity:0;pointer-events:none;transition:.22s} .k-toast.on{transform:translate(-50%,0);opacity:1} /* menú de comunidades */ .k-scrim-soft{position:fixed;inset:0;z-index:210;background:transparent} .k-cs-menu{position:fixed;z-index:220;width:min(340px,calc(100vw - 24px));padding:8px;border:1px solid #e8e4dc;border-radius:18px;background:#fff;box-shadow:0 24px 60px rgba(30,26,18,.18);font-family:"Poppins",Arial,sans-serif;animation:kIn .16s ease} @keyframes kIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}} .k-cs-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 11px 12px} .k-cs-head b{font-size:13.5px} .k-cs-head small{color:#9a9e97;font-size:11.5px} .k-cs-list{display:grid;gap:2px;max-height:min(46vh,330px);overflow:auto} .k-cs-item{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;padding:10px;border:0;border-radius:12px;background:none;text-align:left;font:inherit;cursor:pointer} .k-cs-item:hover{background:#faf8f4} .k-cs-item.on{background:color-mix(in oklab, var(--brand-98), #f8f8f8 11%)} .k-cs-item b{display:block;font-size:13.5px;line-height:1.3} .k-cs-item small{display:block;margin-top:3px;color:#8a8e87;font-size:11.5px} .k-cs-item em{color:var(--brand-51);font-size:14px;font-style:normal;font-weight:700} .k-cs-foot{display:flex;justify-content:space-between;gap:12px;margin-top:6px;padding:11px 11px 6px;border-top:1px solid #efece6} .k-cs-foot a{color:var(--brand-54);font-size:12.5px;font-weight:700;text-decoration:none} .k-cs-foot a:hover{text-decoration:underline} /* panel de mensajes y notificaciones */ body.k-locked{overflow:hidden} .k-scrim{position:fixed;inset:0;z-index:230;background:rgba(24,22,18,.4);backdrop-filter:blur(3px)} .k-drawer{position:fixed;z-index:240;right:0;top:0;bottom:0;width:min(420px,100%);display:flex;flex-direction:column;background:#fff;box-shadow:-28px 0 70px rgba(20,20,17,.2);font-family:"Poppins",Arial,sans-serif;animation:kSlide .26s cubic-bezier(.2,.8,.25,1)} .k-drawer[hidden],.k-scrim[hidden],.k-cs-menu[hidden],.k-scrim-soft[hidden]{display:none!important} @keyframes kSlide{from{transform:translateX(34px);opacity:.4}to{transform:none;opacity:1}} .k-dhead{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid #efece6} .k-dhead>div{flex:1;min-width:0} .k-dhead b{display:block;font-size:16px;letter-spacing:-.01em} .k-dhead small{display:block;margin-top:2px;color:#8a8e87;font-size:12.5px} .k-dclose,.k-dback,.k-expand{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:#f4f2ee;color:#4d524c;font-size:15px;line-height:1;flex:0 0 auto;text-decoration:none;cursor:pointer} .k-dclose:hover,.k-dback:hover{background:#eae6df} .k-expand:hover{background:color-mix(in oklab, var(--brand-98), #f8f8f8 11%);color:var(--brand-51)} .k-dback{font-size:24px;padding-bottom:3px} .k-dtools{display:grid;gap:10px;padding:13px 18px;border-bottom:1px solid #efece6} .k-dsearch{display:flex;align-items:center;gap:9px;height:40px;padding:0 13px;border-radius:12px;background:#f5f3ef} .k-dsearch svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:#8a8e87;stroke-width:1.9;stroke-linecap:round} .k-dsearch input{width:100%;border:0;outline:0;background:none;font:inherit;font-size:13.5px} .k-dfilters{display:flex;gap:6px} .k-dfilters button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border:1px solid #e8e4dc;border-radius:18px;background:#fff;color:#5c615b;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer} .k-dfilters button:hover{border-color:#d8d1c3} .k-dfilters button.on{border-color:var(--brand-76);background:color-mix(in oklab, var(--brand-98), #f8f8f8 11%);color:var(--brand-51)} .k-dfilters span{min-width:18px;height:18px;display:grid;place-items:center;border-radius:9px;background:#e5484d;color:#fff;font-size:11px;font-weight:700} .k-dread{padding:0;border:0;background:none;color:var(--brand-54);font:inherit;font-size:12.5px;font-weight:700;text-align:left;cursor:pointer} .k-dlist{flex:1;overflow:auto;padding:7px} .k-dempty{margin:26px 16px;color:#8a8e87;font-size:13.5px;line-height:1.55;text-align:center} .k-dgroup{margin:12px 12px 6px;color:#9a9e97;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .k-convo{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px;border:0;border-radius:13px;background:none;text-align:left;font:inherit;cursor:pointer} .k-convo:hover{background:#faf8f4} .k-convo.unread{background:color-mix(in oklab, var(--brand-98), #f8f8f8 40%)} .k-av{position:relative;width:44px;height:44px;flex:0 0 auto} .k-av img{width:100%;height:100%;border-radius:50%;object-fit:cover} .k-av i{position:absolute;right:1px;bottom:1px;width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#2f9459} .k-av.sm{width:38px;height:38px} .k-convo-copy{min-width:0} .k-convo-copy b{display:block;font-size:14px} .k-convo-copy small{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7a7f78;font-size:12.5px} .k-convo.unread .k-convo-copy small{color:#3d423c;font-weight:600} .k-convo-side{display:grid;justify-items:end;gap:5px} .k-convo-side time{color:#9a9e97;font-size:11.5px} .k-convo-side em{min-width:19px;height:19px;display:grid;place-items:center;border-radius:10px;background:var(--brand-76);color:#fff;font-size:11px;font-style:normal;font-weight:700} .k-go{color:var(--brand-54);font-size:12.5px;font-weight:700;white-space:nowrap} .k-note{position:relative;width:100%;display:grid;grid-template-columns:40px minmax(0,1fr);gap:11px;padding:11px;border:0;border-radius:13px;background:none;text-align:left;font:inherit;cursor:pointer} .k-note:hover{background:#faf8f4} .k-note.unread{background:color-mix(in oklab, var(--brand-98), #f8f8f8 40%)} .k-note-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#f4f2ee;font-size:17px;font-style:normal} .k-note-icon.evento{background:color-mix(in oklab, var(--brand-97), #f5f5f5 15%)}.k-note-icon.conexion{background:#eef3fd}.k-note-icon.vacante{background:#f3eefa} .k-note-icon.academia{background:#eaf7ef}.k-note-icon.tienda{background:#fdf0e8}.k-note-icon.grupo{background:#eef4ff}.k-note-icon.comunidad{background:color-mix(in oklab, var(--brand-98), #f8f8f8 11%);color:var(--brand-67)} .k-note b{display:block;font-size:13.5px;line-height:1.35} .k-note small{display:block;margin-top:3px;color:#6a6f68;font-size:12.5px;line-height:1.45} .k-note time{display:block;margin-top:6px;color:#9a9e97;font-size:11.5px} .k-note em{position:absolute;right:12px;top:14px;width:7px;height:7px;border-radius:50%;background:#e5484d} .k-dfoot{display:grid;gap:9px;padding:11px 16px;border-top:1px solid #efece6;background:#fbfaf7;text-align:center} .k-dnew{width:100%;height:40px;border:1px dashed #d8d1c3;border-radius:12px;background:#fff;color:#5c615b;font:inherit;font-size:13px;font-weight:700;cursor:pointer} .k-dnew:hover{border-color:var(--brand-76);color:var(--brand-51)} .k-dall{color:var(--brand-54);font-size:13px;font-weight:700;text-decoration:none} .k-dmsgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:9px;padding:18px 16px;background:#fdfcfa} .k-bubble{max-width:80%;padding:10px 13px;border-radius:15px;font-size:14px;line-height:1.5} .k-bubble.them{align-self:flex-start;border-bottom-left-radius:5px;background:#f2f0ec;color:#2f342e} .k-bubble.me{align-self:flex-end;border-bottom-right-radius:5px;background:linear-gradient(140deg,var(--brand-76),var(--brand-83));color:var(--brand-on)} .k-bubble time{display:block;margin-top:5px;font-size:11px;opacity:.62} .k-typing{align-self:flex-start;display:flex;gap:4px;padding:13px 15px;border-radius:15px;border-bottom-left-radius:5px;background:#f2f0ec} .k-typing i{width:6px;height:6px;border-radius:50%;background:#a9ada6;animation:kBlink 1.2s infinite} .k-typing i:nth-child(2){animation-delay:.2s} .k-typing i:nth-child(3){animation-delay:.4s} @keyframes kBlink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .k-dcomposer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:9px;padding:12px 14px;border-top:1px solid #efece6;background:#fff} .k-dcomposer textarea{width:100%;max-height:110px;padding:11px 13px;border:1px solid #e8e4dc;border-radius:13px;outline:0;font:inherit;font-size:14px;line-height:1.45;resize:none} .k-dcomposer textarea:focus{border-color:var(--brand-76);box-shadow:0 0 0 3px rgba(var(--brand-rgb), .13)} .k-dcomposer button{width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:12px;background:linear-gradient(140deg,var(--brand-76),var(--brand-83));color:var(--brand-on);font-size:15px;cursor:pointer} /* ---------- panel compacto: buscador y menú en pantallas angostas ---------- */ /* de 1080 px para abajo desaparecía el menú y de 720 el buscador, sin reemplazo */ .k-find,.k-burger{display:none} .k-burger{flex-direction:column;justify-content:center;gap:4px;padding:0 11px} .k-burger span{width:18px;height:2px;border-radius:2px;background:currentColor;transition:.2s} .k-burger[aria-expanded="true"] span:first-child{transform:translateY(6px) rotate(45deg)} .k-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .k-burger[aria-expanded="true"] span:last-child{transform:translateY(-6px) rotate(-45deg)} .k-find[aria-expanded="true"],.k-burger[aria-expanded="true"]{background:color-mix(in oklab, var(--brand-98), #f8f8f8 11%);color:var(--brand-51)} .k-sheet{position:fixed;left:0;right:0;top:var(--k-head);z-index:170;max-height:calc(100vh - var(--k-head));padding:14px 15px 18px;border-bottom:1px solid #ebe8e2;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);box-shadow:0 18px 40px rgba(23,25,22,.12);overflow-y:auto;font-family:"Poppins",Arial,sans-serif;animation:kSheet .18s ease-out} @keyframes kSheet{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .k-sheet-search{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:1px solid #e8e4dc;border-radius:13px;background:#f7f5f1} .k-sheet-search svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:#8a8e87;stroke-width:1.9;stroke-linecap:round} .k-sheet-search input{width:100%;border:0;outline:0;background:none;font:inherit;font-size:15px;color:#171916} .k-sheet-nav{display:grid;margin-top:12px} /* Abierta desde la lupa: por encima de 1340px el menu sigue en la barra, asi que la hoja repetiria una navegacion que ya se ve. Solo el buscador. */ .k-sheet.is-find .k-sheet-nav{display:none} /* ---------- S30: sugerencias del buscador ---------- Cuelga del contenedor del input (.k-search en la barra, .k-sheet-search en la hoja), que por eso pasa a position:relative. Asi el mismo codigo pinta el desplegable en los dos sitios sin medir nada. */ .k-search{position:relative} /* Dentro de la hoja el panel es contenido, no capa flotante: la hoja ya recorta y hace scroll por su cuenta. */ .k-suggest.is-inline{position:static;margin-top:11px;max-height:none;padding:0; border:0;border-radius:0;box-shadow:none;overflow:visible} .k-suggest{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:180; max-height:min(460px,70vh);overflow-y:auto;padding:7px; border:1px solid #ebe8e2;border-radius:14px;background:#fff; box-shadow:0 18px 44px rgba(23,25,22,.16); font-family:"Poppins",Arial,sans-serif} /* Una sugerencia no cabe en el ancho del input, asi que el panel es mas ancho que su caja. Cuelga hacia la DERECHA: alineado a la derecha venia de cuando la caja vivia en la esquina, y desde su sitio nuevo eso lo desplegaba hacia atras, lejos de donde se esta escribiendo. */ .k-search .k-suggest{left:0;right:auto;width:380px} .k-suggest-head{display:flex;align-items:center;gap:7px;padding:9px 10px 5px; color:#8a8e87;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em} .k-suggest-head span{margin-left:auto;padding:1px 7px;border-radius:999px; background:#f4f2ee;color:#727670;font-size:11px;text-transform:none;letter-spacing:0} .k-suggest-hit{display:block;padding:8px 10px;border-radius:10px; color:#171916;text-decoration:none} .k-suggest-hit:hover,.k-suggest-hit.on{background:var(--brand-98)} /* El trozo que casa, en negrita: se ve de un vistazo por que esa fila esta en la lista. */ .k-suggest-t b{font-weight:800;color:var(--brand-43)} .k-suggest-t{display:block;font-size:14px;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .k-suggest-s{display:block;margin-top:1px;color:#8a8e87;font-size:12px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .k-suggest-none{margin:0;padding:16px 10px;color:#8a8e87;font-size:13px;text-align:center} .k-suggest-all{display:block;margin-top:5px;padding:11px 10px;border-top:1px solid #f0ede7; color:var(--brand-51);font-size:13px;font-weight:700;text-align:center;text-decoration:none} .k-suggest-all:hover{background:var(--brand-98)} .k-sheet-nav a{padding:13px 12px;border-radius:11px;color:#3c413b;font-size:15px;font-weight:600;text-decoration:none} .k-sheet-nav a:hover{background:#faf8f4} .k-sheet-nav a.on{background:color-mix(in oklab, var(--brand-98), #f8f8f8 11%);color:var(--brand-51)} .k-sheet-nav a.sub{padding:10px 12px 10px 26px;color:#747873;font-size:13.5px;font-weight:500} .k-sheet-nav a.sub:before{content:"";display:inline-block;width:5px;height:5px;margin:0 10px 2px -12px;border-radius:50%;background:#dcd7cc} /* si la lateral ya se ve, el panel del móvil es sólo el buscador */ @media(min-width:1061px){.k-sheet-nav{display:none}.k-sheet{padding:14px clamp(22px,2.2vw,44px)}} /* ---------- responsive ---------- */ /* Con la navegación en columna ya no hay nada que medir: las diez secciones caben siempre, y la única decisión es si la columna cabe. Por eso esto vuelve a ser un breakpoint y no el fitNav() que medía la fila — ese código se fue con la barra horizontal. El umbral son 1060px: por debajo, quitarle 250px al contenido deja el muro en menos de 700px y las tarjetas empiezan a partirse. La lateral se repliega entera y su lista pasa a la hoja de la hamburguesa, que ya la clona desde #mainnav. */ @media(max-width:1060px){ body:has(#nav-root){padding-left:0} .k-side{display:none} .k-header{margin-left:0;width:100%;padding-left:clamp(22px,2.2vw,44px)} .k-brand{flex:0 0 auto;width:auto;padding-left:0} .k-burger{display:flex} /* El selector de grupos pasa a la hoja (nav.js lo mueve al abrirla), así que aquí sobra. En la barra de un teléfono le quedaban 68px y se leía "Todo⌄"; a 320px, nada. El umbral es el mismo de la hamburguesa a propósito: a partir de aquí la hoja es la que manda la navegación, y el selector tiene que estar en un solo sitio, no en dos. */ #appbar .k-groupwrap{display:none} } @media(max-width:1400px){.k-community{min-width:0;max-width:210px}} /* Por debajo de aqui la barra ya solo lleva marca, comunidad y acciones: ni un buscador de 120px entra, y la lupa recupera su turno. */ @media(max-width:1024px){.k-search{display:none}.k-find{display:grid}} @media(max-width:820px){.k-community{max-width:62px;padding:0;justify-content:center}.k-cs-name,.k-cs-caret{display:none}} @media(max-width:720px){.k-header{gap:12px;padding:0 15px}.k-brand strong{display:none}} @media(max-width:520px){.k-drawer{width:100%}} /* teléfonos muy angostos (320 px): el header se apretaba y desbordaba */ @media(max-width:400px){.k-header{gap:7px;padding:0 10px}.k-actions{gap:1px}.k-icon,.k-me{width:38px;height:38px}.k-community{max-width:52px}} /* ============================================================ ADDITIONS — ours, not Carolain's. Three hooks her mockups did not need because their header was static: the community switcher is a real menu, there is a group picker under it, and the notification dot is driven by live counts. Kept here rather than in a page stylesheet so the header stays in one file. ============================================================ */ .k-picker { position: relative; flex: 0 0 auto; } /* The switcher menu reuses her community-menu treatment. */ .k-cs-menu { position: absolute; left: 0; top: 62px; z-index: 90; width: 350px; padding: 9px; border: 1px solid #e8e5df; border-radius: 14px; background: rgba(255,255,255,.98); box-shadow: 0 20px 55px rgba(25,22,16,.16); backdrop-filter: blur(16px); animation: k-nav-drop .16s ease-out both; } /* S22: the group picker, a second level of context under the community. Only rendered when the member is in a group. */ .k-groupwrap { flex: 0 0 auto; display: flex; align-items: center; } .k-groupwrap:empty { display: none; } .k-groupwrap select { height: 42px; border: 1px solid #e8e5df; border-radius: 11px; background: #fff; font-size: 12px; font-weight: 600; } /* Unread mark on the bell. A dot, not a number: the count lives on the notifications page and a badge here only adds noise. */ .k-icon { position: relative; } .k-dot { position: absolute; right: 7px; top: 7px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #df3f36; } .k-dot[hidden] { display: none; } /* El menú del teléfono. Estuvo escrito como `.k-nav.open`: la propia barra de navegación, fija y desplegada bajo el header. Nunca pudo funcionar. `.k-header` lleva backdrop-filter, y un elemento con filtro de fondo se convierte en el bloque contenedor de sus descendientes `position:fixed` — así que el panel quedaba anclado y RECORTADO dentro de la caja del header (de ahí la tira de tres enlaces cortada), y su z-index no podía salir del contexto de apilamiento del header, así que el velo le caía encima. La hoja de abajo (.k-sheet) ya estaba escrita para esto y sin usar. Es hermana del body, no hija del header: ni recorte ni contexto ajeno. Y sus filas son las mismas del menú de cuenta — 52px, esquina redonda, activa en ámbar — que es lo que hace que se lea como parte de la app. nav.js la construye clonando los enlaces de .k-nav, para que el permiso siga decidiéndose en un solo sitio. */ /* Alto por min-height, no por padding: sumados daban filas de 78px y la lista pedía tres pantallas de scroll para nueve enlaces. */ .k-sheet-nav a{display:flex;align-items:center;min-height:52px;padding:0 14px} .k-sheet-nav a.sub{min-height:44px;padding:0 14px 0 26px} .k-sheet-nav a.on{position:relative} .k-sheet-nav a.on:after{content:"";position:absolute;right:14px;top:50%; width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--brand-76)} .k-sheet{padding-bottom:calc(18px + env(safe-area-inset-bottom)); overscroll-behavior:contain} .k-sheet[hidden]{display:none} /* El velo: sin él, la hoja flota sobre una página que se sigue viendo viva y no queda claro que un toque fuera la cierra. */ .k-navscrim{position:fixed;inset:var(--k-head) 0 0;z-index:169; background:rgba(24,22,18,.34);animation:k-nav-fade .16s ease-out both} .k-navscrim[hidden]{display:none} body.k-nav-open{overflow:hidden} @keyframes k-nav-fade{from{opacity:0}to{opacity:1}} /* Her header carries five things; ours carries six. The group picker is the extra one, and at ~190px it is more than the row can absorb: .k-nav is nowrap so it cannot shrink, .k-search is a fixed 250px, and the burger only takes over below 1341px. The result was a header 2027px wide inside a 1905px window — every page scrolled sideways and the avatar sat off-screen. Only members who belong to a group ever saw it, which is why it survived the port. The two controls that are ours give way first, in that order: the picker shrinks, then the search hides, then the community name narrows. Nothing of hers is overridden. */ .k-groupwrap { flex: 0 1 auto; min-width: 190px; max-width: 250px; } .k-groupwrap select { max-width: 100%; } /* S31: este umbral estaba en 1500px porque la barra llevaba tambien las diez pestanas del menu, y a 1440 la fila pedia mas de lo que habia. Con el menu en la lateral la barra solo lleva marca, comunidad, grupo, buscador y acciones: ~1075px en su minimo. Dejarlo en 1500 escondia el nombre de la comunidad en un portatil de 14" sin ninguna necesidad — justo el dato que dice en que comunidad estas parado. Baja a 1200, que es donde de verdad deja de caber. */ /* Below this the community switcher drops to its mark alone. Its name is also the page it is on, so it is the one label the header can lose; the group picker keeps a floor because a select narrower than its own "All groups" label cannot be read at all. */ @media (max-width: 1200px) { .k-header:has(.k-groupwrap) .k-cs-name, .k-header:has(.k-groupwrap) .k-cs-caret { display: none; } .k-header:has(.k-groupwrap) .k-community { min-width: 0; max-width: 62px; padding: 0; justify-content: center; } } /* On a phone the row is already brand + marks + burger, and 112px of floor is the last thing standing between it and the edge. */ @media (max-width: 520px) { .k-groupwrap { min-width: 0; } } /* ============================================================ SHARED COMPONENTS — also global, also ours. These load on every page like the header does, so they live with it rather than in a page stylesheet that would have to be repeated 44 times. ============================================================ */ /* The confirm dialog. Her system bans browser confirm() for destructive actions; this is the replacement. The destructive choice is red and on the right, the safe one holds focus. */ .k-confirm { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(23,25,22,.44); backdrop-filter: blur(3px); animation: k-nav-drop .16s ease-out both; } .k-confirm-box { width: min(420px, 100%); padding: 24px; border-radius: 20px; background: #fff; box-shadow: 0 30px 80px rgba(25,22,16,.22); } .k-confirm-box h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.02em; } .k-confirm-box p { margin: 0 0 20px; color: #727670; font-size: 14px; line-height: 1.5; } .k-confirm-box footer { display: flex; justify-content: flex-end; gap: 10px; } .k-confirm-box button { height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid #e8e5df; background: #fff; font-size: 13px; font-weight: 600; } .k-confirm-box button:hover { background: #f8f6f1; } .k-confirm-box .k-c-ok.danger { border-color: transparent; background: #c0392b; color: #fff; } .k-confirm-box .k-c-ok.danger:hover { background: #a93226; } /* La afirmativa cuando NO es destructiva (confirmAction con safe). Sin esto los dos botones salían blancos e idénticos: el diálogo preguntaba, pero no decía cuál de las dos era la acción. Mismo ámbar que .primary en el resto de la app, para que se reconozca sin leerla. */ .k-confirm-box .k-c-ok:not(.danger) { border-color: transparent; background: linear-gradient(140deg,var(--brand-76),var(--brand-83)); color: var(--brand-on); font-weight: 700; } .k-confirm-box .k-c-ok:not(.danger):hover { filter: brightness(1.04); } /* El aviso de utils.js (showNotification). Vivia en kol-app.css, que solo carga feed.html: en las otras 33 pantallas un error salia como texto desnudo sobre la pagina. Se apilan hacia arriba, el ultimo abajo — antes cada uno traia su propio position:fixed en la misma esquina y el segundo tapaba al primero. */ .kol-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 400; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; } .kol-toast { max-width: min(420px, calc(100vw - 40px)); padding: 12px 18px; border-radius: 12px; background: #171916; color: #fff; font-family: "Poppins", Arial, sans-serif; font-size: 13.5px; line-height: 1.45; box-shadow: 0 14px 40px rgba(23,25,22,.24); pointer-events: auto; animation: k-nav-drop .16s ease-out both; } .kol-toast.success { background: #1f7a4d; } .kol-toast.error { background: #c0392b; } /* Initials stand in for a missing photo. Never an empty circle: that reads as a loading state that never finished. */ .post-initials { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--av, linear-gradient(145deg,var(--brand-74),var(--brand-83))); color: #fff; font-size: 13px; font-weight: 700; font-style: normal; } /* The post overflow menu, for anything irreversible or leader-only. Nothing destructive sits one tap from "like". */ .post-header { position: relative; } .post-more-menu { position: absolute; right: 0; top: 38px; z-index: 20; min-width: 168px; padding: 6px; border: 1px solid #ebe8e2; border-radius: 12px; background: #fff; box-shadow: 0 18px 44px rgba(23,25,22,.14); } .post-more-menu[hidden] { display: none; } .post-more-menu button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 13px; } .post-more-menu button:hover { background: #f7f6f3; } .post-more-menu button.danger { color: #c0392b; } /* The chat dock is fixed bottom-right, which puts it on top of the footer of any drawer or modal that opens over the page. While one is open (body.locked), the dock steps out of the way. */ body.locked #kolChatRoot { display: none; } /* Selector de grupo: mismo alto que el de comunidad, para que la pareja de controles de contexto se lea como una sola fila y no como dos tamaños. */ /* Solo el BOTÓN: dropdown.js copia la clase al botón pero el