/* =========================
           kSeguiment - Modern UI 2026
           ========================= */
        
        :root{
          --ks-bg: #fff;
          --ks-text: #111827;
          --ks-muted: #6b7280;
          --ks-border: #e5e7eb;
          --ks-soft: #f3f4f6;
        
          --ks-accent: #3b82f6;   /* normal */
          --ks-system: #9ca3af;   /* system */
          --ks-good: #10b981;     /* relevant/pin */
          --ks-warn: #f59e0b;     /* attention */
          --ks-danger: #ef4444;
        
          --ks-radius: 10px;
          --ks-shadow: 0 1px 2px rgba(0,0,0,.06);
          --ks-shadow-hover: 0 6px 18px rgba(0,0,0,.10);
        }
        
        /* Contenedor */
        .kseguiment{
          background: var(--ks-bg);
          color: var(--ks-text);
          border: 1px solid var(--ks-border);
          /* border-radius: var(--ks-radius);*/ 
          padding: 10px 10px;
        }
        
        /* Lista */
        .kseguiment .ks-list{
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
        
        /* Item base */
        .kseguiment .ks-item{
          position: relative;
          border: 1px solid var(--ks-border);
          border-radius: var(--ks-radius);
          background: #fff;
          box-shadow: var(--ks-shadow);
          padding: 10px 12px 10px 12px;
          transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
          overflow: hidden;
          margin-bottom: 10px;
          margin-top: 10px;
          margin-left: 8px;
          margin-right: 8px;
        }
        
        /* Barra izquierda para tipo */
        .kseguiment .ks-item::before{
          content:"";
          position:absolute;
          left:0; top:0; bottom:0;
          width: 3px;
          background: var(--primary);
          opacity: .95;
        }
        

        
        /* Hover */
        .kseguiment .ks-item:hover{
          box-shadow: var(--ks-shadow-hover);
          border-color: #d1d5db;
          transform: translateY(-1px);
        }
        
        /* Header: autor + fecha + badges */
        .kseguiment .ks-head{
          display:flex;
          align-items:flex-start;
          gap: 10px;
        }
        
        .kseguiment .ks-meta{
          flex: 1;
        }
        
        .kseguiment .ks-author{
          font-weight: 600;
          font-size: 13px;
          color: var(--ks-text);
          display:flex;
          align-items:center;
          gap: 8px;
        }
        
        .kseguiment .ks-time{
          font-size: 12px;
          color: var(--ks-muted);
        }
        

        .kseguiment .ks-badge{
          font-size: 11px;
          padding: 2px 8px;
          border-radius: 999px;
          border: 1px solid var(--ks-border);
          color: var(--ks-muted);
          background: #fff;
        }
        
        .kseguiment .ks-badge.is-public{
          border-color: rgba(59,130,246,.25);
          color: #1d4ed8;
          background: rgba(59,130,246,.06);
        }
        .kseguiment .ks-badge.is-internal{
          border-color: rgba(156,163,175,.35);
          color: #374151;
          background: rgba(156,163,175,.12);
        }
        
        /* Body (contenido editor) */
        .kseguiment .ks-body{
          font-size: 13px;
          color: #111827;
        }
        
        .kseguiment .ks-body p{ margin: 0 0 6px 0; }
        .kseguiment .ks-body p:last-child{ margin-bottom: 0; }
        
        .kseguiment .ks-body blockquote{
          border-left: 3px solid var(--ks-border);
          margin: 6px 0;
          padding: 6px 10px;
          background: #fafafa;
          color: #374151;
        }
        
        .kseguiment .ks-body pre{
          border-radius: 8px;
          border: 1px solid var(--ks-border);
          padding: 10px;
          background: #0b1220;
          color: #e5e7eb;
          overflow:auto;
        }
        
        /* Acciones flotantes (solo hover) */
        .kseguiment .ks-actions{
          position:absolute;
          right: 8px;
          top: 8px;
          display:flex;
          gap: 6px;
          opacity: 0;
          transform: translateY(-2px);
          transition: opacity .12s ease, transform .12s ease;
          
        }
        
        .kseguiment .ks-item:hover .ks-actions{
          opacity: 1;
          display:flex; 
          transform: translateY(0);
          pointer-events: auto;
        }
        

        /* Reacciones */
        .kseguiment .ks-reactions{
          display:flex;
          gap: 6px;
          margin-top: 8px;
        }
        
        .kseguiment .ks-react{
          font-size: 12px;
          padding: 3px 8px;
          border-radius: 999px;
          border: 1px solid var(--ks-border);
          color: #374151;
          background: #fff;
          cursor:pointer;
          user-select:none;
        }
        .kseguiment .ks-react:hover{
          background: var(--ks-soft);
        }
        
        /* =========================
           TIPOS DE ITEM
           ========================= */
        
        /* Sistema (logs) */
        .kseguiment .ks-item.is-system{
          background: #fbfbfb;
          border-style: dashed;
        }
        .kseguiment .ks-item.is-system::before{
          background: var(--ks-system);
        }
        .kseguiment .ks-item.is-system .ks-body{
          color: #4b5563;
          font-size: 12px;
        }
        .kseguiment .ks-item.is-system .ks-author{
          color: #4b5563;
          font-weight: 600;
        }
        
        /* Relevante / Pin */
        .kseguiment .ks-item.is-pinned{
          border-color: rgba(16,185,129,.35);
          background: rgba(16,185,129,.04);
        }
        .kseguiment .ks-item.is-pinned::before{
          background: var(--ks-good);
        }
        
        /* No relevante (colapsado / bajo ruido) */
        .kseguiment .ks-item.is-muted{
          opacity: .65;
        }
        .kseguiment .ks-item.is-muted:hover{
          opacity: 1;
        }
        
        /* Separador “día” (si lo tienes) */
        .kseguiment .ks-day{
          font-size: 12px;
          color: var(--ks-muted);
          margin: 8px 2px 2px;
          text-transform: uppercase;
          letter-spacing: .04em;
        }
        
        /* =========================
           Editor footer / composer
           ========================= */
        .kseguiment .ks-composer{
          margin-top: 10px;
          border-top: 1px solid var(--ks-border);
          padding-top: 10px;
        }
        
        .kseguiment .ks-composer-toolbar{
          display:flex;
          align-items:center;
          justify-content: space-between;
          gap: 10px;
          margin-bottom: 8px;
        }
        
        .kseguiment .ks-composer-tools{
          display:flex;
          gap: 8px;
          flex-wrap: wrap;
        }
        
        .kseguiment .ks-pill{
          font-size: 12px;
          padding: 6px 10px;
          border-radius: 999px;
          border: 1px solid var(--ks-border);
          background: #fff;
          cursor:pointer;
        }
        .kseguiment .ks-pill:hover{
          background: var(--ks-soft);
        }

        /* =========================
           Avatar usuario
           ========================= */
        
        .kseguiment .ks-avatar{
          width: 40px;
          height: 40px;
          min-width: 40px;
          border-radius: 999px;
          background: var(--ks-soft);
          border: 1px solid var(--ks-border);
          display:flex;
          align-items:center;
          justify-content:center;
          overflow:hidden;
          font-size: 13px;
          font-weight: 600;
          color: #374151;
        }
        
        .kseguiment .ks-avatar img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          display:block;
        }
        
        /* avatar sistema */
        .kseguiment .ks-avatar.is-system{
          background: #e5e7eb;
          color: #374151;
          font-size: 16px;
        }


        /* =========================
           Layout 2 columnas (left fixed / right fluid)
           ========================= */
        
        .kseguiment .ks-row{
          display: flex;
          gap: 12px;
          align-items: stretch !important;
        }
        
        /* Columna izquierda fija */
        .kseguiment .ks-left{
          width: 190px;             /* <-- ajusta aquí (170-220 suele ir bien) */
          flex: 0 0 190px;
          display: flex !important;
          gap: 6px;
          align-items: flex-start;
          border-right: 1px solid #e9e8e8;
          flex-direction: column !important;
      
        }

        /* bloque superior (avatar + meta) en fila */
        .kseguiment .ks-left-main{
          display: flex;
          gap: 10px;
          align-items: flex-start;
        }
        
        /* Avatar */
        .kseguiment .ks-left .ks-avatar{
          width: 40px;
          flex: 0 0 40px;
          border-radius: 999px;
          overflow: hidden;
          border: 1px solid var(--ks-border);
          background: var(--ks-soft);
          display:flex;
          align-items:center;
          justify-content:center;
        }
        .kseguiment .ks-left .ks-avatar img{
          width: 100%;
          height: auto;
          object-fit: cover;
          display:block;
        }
        
        /* Meta en columna (compacta) */
        .kseguiment .ks-left .ks-meta{
          display: flex;
          flex-direction: column;
          gap: 2px;
          line-height: 1.1;
          min-width: 0;
        }
        
        .kseguiment .ks-left .ks-author{
          font-size: 13px;
          font-weight: 700;
          color: var(--ks-text);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 130px;
        }
        
        .kseguiment .ks-left .ks-time{
          font-size: 11.5px;
          color: var(--ks-muted);
          white-space: nowrap;
        }
        
        /* Badges bajo meta (si quieres) */
                .kseguiment .ks-left .ks-badges{
                  margin-top: 4px;
                  display: flex;
                  gap: 6px;
                  flex-wrap: wrap;
                }        
        
        
        /* Columna derecha fluida */
        .kseguiment .ks-right{
          position: relative;
          flex: 1 1 auto;
          min-width: 0;
          padding-right: 8px; /* deja sitio para acciones */
        }
        
        /* Acciones flotantes en la esquina derecha de la columna derecha */
        .kseguiment .ks-right .ks-actions{
          position: absolute;
          border: 1px solid var(--ks-border);
          border-radius: 8px;             /* estilo grupo */
          overflow: hidden;               /* recorta esquinas */  
          box-shadow: 0 1px 2px rgba(0,0,0,.06); /* sutil, opcional */
          right: 0;
          top: 0;
          display:flex;
          gap: 0 !important;
          opacity: 0;
          transform: translateY(-2px);
          transition: opacity .12s ease, transform .12s ease;
          z-index: 50;
        }
        
        /* Botón acción con icono FA */
        .kseguiment .ks-right .ks-actions .ks-btn{
          width: 30px;
          height: 30px;
          min-width: 30px;
          max-width: 30px;  
          border: 0 !important;           /* el borde lo pone el contenedor */
          border-radius: 0 !important;    /* esquinas solo en extremos del grupo */
          background: #fff;
          color: #374151;
          cursor: pointer !important;
          padding: 0;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;  
        }
        
        /* Separadores verticales entre botones */
        .kseguiment .ks-right .ks-actions .ks-btn + .ks-btn{
          border-left: 1px solid var(--ks-border) !important;
        }
        
         
        
        /* Icono centrado */
        .kseguiment .ks-right .ks-actions .ks-btn i,
        .kseguiment .ks-right .ks-actions .ks-btn .fa
        {
          width: 16px; text-align:center;
          font-size: 14px;
          line-height: 1;
          pointer-events: none !important;
          margin: 0 !important;
          padding: 0 !important;   
        
          display: block;          /* evita baseline/inline spacing */
          text-align: center;
        
        }
        
         
        
        
        /* Hover normal */        
        .kseguiment .ks-right .ks-actions .ks-btn:hover{
          background: var(--ks-soft);
          transform: translateY(-1px);
        }
        
        /* Hover danger */
        .kseguiment .ks-right .ks-actions .ks-btn.is-danger:hover{
          background: rgba(239,68,68,.12);
          border-color: rgba(239,68,68,.35);
          color: #b91c1c;
        }
        
        
        
        .kseguiment .ks-right .ks-actions .ks-btn.is-danger:hover{
          background: rgba(239,68,68,.10);
          border-color: rgba(239,68,68,.35);
          color: #b91c1c;
        }
        
        
        .kseguiment .ks-item:hover .ks-right .ks-actions{
          opacity: 1 !important;
          display:flex; 
          transform: translateY(0);
        
        }
        
        /* Body: ocupa ancho y solo crece en altura */
        .kseguiment .ks-right .ks-body{
          font-size: 13px;
          color: var(--ks-text);
        }
        
        /* Reacciones debajo del body */
        .kseguiment .ks-right .ks-reactions{
          margin-top: 8px;
        }



 

        /* =========================
           Colapsar seguimientos largos
           ========================= */
        
        .kseguiment .ks-body{
          position: relative;
        }
        
        /* Estado colapsado */
        .kseguiment .ks-item.is-collapsed .ks-body{
          max-height: 200px;
          overflow: hidden;
        }

        /* Degradado inferior para indicar que hay más */
        .kseguiment .ks-item.is-collapsed .ks-body::after{
          content:"";
          position:absolute;
          left:0; right:0; bottom:0;
          height: 64px;
          background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
          pointer-events: none;
        }

        /* Botón ver más/menos */
        .kseguiment .ks-toggle{
          margin-top: 8px;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 12px;
          padding: 4px 10px;
          border-radius: 999px;
          border: 1px solid var(--ks-border);
          background: #fff;
          cursor: pointer;
          user-select: none;
        }
        
        .kseguiment .ks-toggle:hover{
          background: var(--ks-soft);
        }

        /* *CSS en revision */  
        
        
        /* MARKERS  */
        
        :root{
          /* MARKERS */
          --ks-mark-green:  #2dff42;
          --ks-mark-yellow: #f9ff2d;
          --ks-mark-red:    #ff0000;
          --ks-mark-purple: #5205ff;
          --ks-mark-noise:  #dedede; /* irrelevante */
        
          /* Default / sistema */
          --ks-mark-default: var(--primary);
          --ks-mark-system:  var(--ks-system);
        }
        
        
        /* Sistema */
        .kseguiment .ks-item.is-system::before{
          background: var(--ks-mark-system);
        }
        
        
        
        /* Default */
        .kseguiment .ks-item::before{
          background: var(--primary);
        }
        
        /* Markers */
        .kseguiment .ks-item.is-mark-green::before{ background:var(--ks-mark-green); }
        .kseguiment .ks-item.is-mark-yellow::before{ background:var(--ks-mark-yellow); }
        .kseguiment .ks-item.is-mark-red::before{ background:var(--ks-mark-red); }
        .kseguiment .ks-item.is-mark-purple::before{ background:var(--ks-mark-purple); }
        .kseguiment .ks-item.is-mark-muted::before{ background:var(--ks-mark-noise); }
        
        /* Sistema (siempre gana) */
        .kseguiment .ks-item.is-system::before{
          background: var(--ks-system);
        }
        .kseguiment .ks-markers{
          opacity: 0;
          transform: translateY(-2px);
          transition: opacity .12s ease, transform .12s ease;
          pointer-events: none;
          display: flex;
          margin-top: auto;
          min-height: 14px; /* reserva espacio aunque esté oculto */
        }
        /* Mostrar al hover del item */
        .kseguiment .ks-item:hover .ks-markers{
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto;
        }
        .kseguiment .ks-marker{
          width: 12px;
          height: 12px;
          border-radius: 999px;
          border: 1px solid rgba(0,0,0,.15);
          background: #fff;
          cursor: pointer;
          padding: 0;
          margin-right: 2px;
        }
        
        /* Colores */
        .kseguiment .ks-marker.is-green{  background:var(--ks-mark-green); }
        .kseguiment .ks-marker.is-yellow{ background:var(--ks-mark-yellow); }
        .kseguiment .ks-marker.is-red{    background:var(--ks-mark-red); }
        .kseguiment .ks-marker.is-purple{ background:var(--ks-mark-purple); }
        /* Punto gris */
        .kseguiment .ks-marker.is-muted{
          background: var(--ks-mark-noise);
          border-color: rgba(0,0,0,.10);
        }
        
        /* Quitar */
        .kseguiment .ks-marker.is-clear{
          background: #fff;
          border-style: dashed;
        }
        
        /* Hover */
        .kseguiment .ks-marker:hover{
          transform: scale(1.15);
        }
        .kseguiment .ks-item.is-mark-green  .ks-marker.is-green,
        .kseguiment .ks-item.is-mark-yellow .ks-marker.is-yellow,
        .kseguiment .ks-item.is-mark-red    .ks-marker.is-red,
        .kseguiment .ks-item.is-mark-purple .ks-marker.is-purple{
        box-shadow:
            inset 0 0 0 2px rgba(255,255,255,.9),
            0 0 0 2px rgba(0,0,0,.08);
          transform: scale(1.15);
        }
        /* micro transición */
        .kseguiment .ks-marker{
          transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
        }
        

        
        .kseguiment .ks-bundle{
          display:flex;
          align-items:center;
          justify-content: space-between;
          gap: 10px;
          padding: 8px 10px;
          margin: 6px 8px;
          border: 1px dashed var(--ks-border);
          border-radius: 10px;
          background: #fafafa;
          color: var(--ks-muted);
          cursor: pointer;
        }
        
        .kseguiment .ks-bundle:hover{
          background: #f3f4f6;
        }
        .kseguiment .ks-bundle-left{
          display:flex;
          align-items:center;
          gap: 8px;
          min-width:0;
        }
        
        .kseguiment .ks-bundle-pill{
          display:inline-flex;
          align-items:center;
          justify-content:center;
          width: 22px;
          height: 22px;
          border-radius: 999px;
          background: #e5e7eb;
          color: #111827;
          font-size: 12px;
          font-weight: 700;
        }
        
        .kseguiment .ks-bundle-text{
          font-size: 12px;
          font-weight: 600;
          color: #374151;
        }
        
        .kseguiment .ks-bundle-sub{
          font-size: 12px;
          color: var(--ks-muted);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
         
        
        .kseguiment .ks-bundle-body{
          margin: 0 8px 8px 8px;
        }


/* =========================
   kSeguiment - Mobile layout
   ========================= */
@media (max-width: 768px){

  /* Apila columnas */
  .kseguiment .ks-row{
    flex-direction: column;
    gap: 8px;
  }

  /* La columna izquierda deja de ser fija */
  .kseguiment .ks-left{
    width: 100% !important;
    flex: 0 0 auto !important;
    border-right: 0 !important;
    padding-right: 0 !important;
  }

  /* Compacta el bloque superior (avatar + meta) en una fila */
  .kseguiment .ks-left-main{
    align-items: center;
  }

  /* Badges y markers en línea y con algo de aire */
  .kseguiment .ks-badges{
    margin-top: 6px;
  }

  .kseguiment .ks-markers{
    margin-top: 6px;     /* ya no hace falta "al fondo" */
  }

  /* Columna derecha ocupa todo el ancho */
  .kseguiment .ks-right{
    width: 100%;
    padding-right: 0;
  }

  /* Acciones: que no sean flotantes, para no tapar texto en móvil */
  .kseguiment .ks-right .ks-actions{
    position: static !important;
    opacity: 0 !important;
    transform: none !important;
    margin-bottom: 6px;
    display:none; 
  }
  
 
  

  /* Bundle: que sea cómodo de pulsar */
  .kseguiment .ks-bundle{
    padding: 10px 12px;
  }
}/* =========================
   end  - Mobile layout
   ========================= */