/* =========================
   Kubysoft - TodoList (Modern)
   ========================= */

/* 1) Más pequeño y fino */
:root {
  --ck-content-todo-list-checkmark-size: 14px; /* antes 16px */ 
}

/* 2) Quitar el “layout antiguo” (offset -25px y márgenes raros) */
.ck-content .todo-list .todo-list__label,
.ck-editor__editable.ck-content .todo-list .todo-list__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* CKEditor por defecto desplaza el checkbox a la izquierda (-25px) :contentReference[oaicite:2]{index=2} */
.ck-content .todo-list .todo-list__label > input,
.ck-editor__editable.ck-content .todo-list .todo-list__label > input,
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input {
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
}

/* 3) Quitar el hover “gordo” tipo gris (box-shadow 5px) :contentReference[oaicite:3]{index=3} */
.ck-editor__editable.ck-content .todo-list .todo-list__label > input:hover::before,
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input:hover::before {
  box-shadow: none !important;
}

/* 4) Checkbox moderno: borde suave + redondeo */
.ck-content .todo-list .todo-list__label > input::before,
.ck-editor__editable.ck-content .todo-list .todo-list__label > input::before,
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::before {
  border-radius: 6px !important;
  border: 1px solid hsl(0, 0%, 78%) !important;
  background: hsl(0, 0%, 100%) !important;
}

/* 5) Checked con el verde de Kuby (#1AD866) y check blanco */
.ck-content .todo-list .todo-list__label > input[checked]::before,
.ck-editor__editable.ck-content .todo-list .todo-list__label > input[checked]::before,
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::before {
  background: #1AD866 !important;
  border-color: #1AD866 !important;
}

.ck-content .todo-list .todo-list__label > input[checked]::after,
.ck-editor__editable.ck-content .todo-list .todo-list__label > input[checked]::after,
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::after {
  border-color: #fff !important;
}

/* 6) Quitar cualquier “fondo gris” que venga de estilos externos del ERP */
.ck-content .todo-list li,
.ck-editor__editable.ck-content .todo-list li {
  background: transparent !important;
  padding: 2px 0 !important;
  margin-bottom: 4px !important; /* antes 5px :contentReference[oaicite:4]{index=4} */
}

/* 7) Texto un poco más moderno: alineación + tachado suave cuando está checked */
.ck-content .todo-list .todo-list__label__description,
.ck-editor__editable.ck-content .todo-list .todo-list__label__description {
  line-height: 1.35;
}

.ck-content .todo-list .todo-list__label > input[checked] ~ .todo-list__label__description {
  text-decoration: line-through;
  opacity: 0.65;
}


 /* =========================
   Kubysoft - TodoList FIX “linea delante del checkbox”
   (wrapper contenteditable=false)
   ========================= */

.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false],
.ck-content .todo-list .todo-list__label > span[contenteditable=false]{
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Por si la “línea” viene de pseudo-elementos del wrapper */
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false]::before,
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false]::after,
.ck-content .todo-list .todo-list__label > span[contenteditable=false]::before,
.ck-content .todo-list .todo-list__label > span[contenteditable=false]::after{
  content: none !important;
  display: none !important;
}

/* Y ya que estamos: asegura que el checkbox no queda “metido” en el margen izquierdo */
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input,
.ck-content .todo-list .todo-list__label > input{
  left: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


.ck > .todo-list > li {
	border-left: 0px solid #e6e7e8 !important ;
	
}


/* =========================
   oculta etiqeta 
   ========================= */


[class*="ck-powered"] {
  display: none !important;
}


 /* =========================
   Kubysoft – CKEditor Primary Color Mapping
   ========================= */

:root {
  /* Botones activos (bold, italic, etc.) */
  --ck-color-button-on-background: var(--primary);
  --ck-color-button-on-color: #fff;

  /* Hover sobre botón activo */
  --ck-color-button-on-hover-background: color-mix(in srgb, var(--primary) 85%, black);

  /* Focus (cursor, selección tabla, celdas) */
  --ck-color-focus-border: var(--primary);
  --ck-color-focus-outer-shadow: 0 0 0 2px rgba(26, 216, 102, 0.25);

  /* Selecciones internas (tablas, widgets) */
  --ck-color-widget-blurred-border: var(--primary);
  --ck-color-widget-hover-border: var(--primary);
  --ck-color-widget-editable-focus-background: rgba(26, 216, 102, 0.08);
  
  
  
}



/* =========================
   Kubysoft – Mentions keyboard selection (focus)
   ========================= */
/* =========================
   Kubysoft – Mentions dropdown styling
   ========================= */

.ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button) {
		background: var(--primary) !important ;
			
		}


.ck-content .mention {
    background: #fff !important;
    color: #000 !important;
}