/* ============================================================
   DANGOFE OS · SERVICIOS · «CHECKLIST» DEL SERVICIO (servicios-checklist-elegir.js · prefijo cks-) · v1.2.0 · 2026-10-23 · chat de Diseño
   Va después de servicios-c1.css (usa sus tokens --sv-*) y dentro de un contenedor .sv: en «Más datos» al crear o editar un servicio y en su ficha.
   Tres formas (data-v en .cks): A · La IA arriba y la lista debajo · B · Una lista con la recomendada marcada · C · Chips por tipo de trabajo.
   Sin sombras. Claro y «Noche azul» (los tokens --sv-* ya cambian). Nada se anima sin parar: el «pensando» da 6 vueltas y para.
   ============================================================ */
.cks { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--sv-r2, 16px); background: var(--sv-vidrio3, rgba(255, 255, 255, .9)); border: 1px solid var(--sv-borde, rgba(255, 255, 255, .9)); color: var(--sv-tinta, #0b1540); font-family: var(--sv-f, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); }
.cks *, .cks *::before, .cks *::after { box-sizing: border-box; }
.cks svg { flex: none; }
.cks button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cks button:disabled { cursor: default; }
.cks-cab { display: flex; align-items: center; gap: 10px; }
.cks-cab > div { flex: 1 1 auto; min-width: 0; }
.cks-cab__i { flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--sv-celrgb, 53, 146, 207), .14); color: var(--sv-az, #03269b); }
[data-theme='dark'] .cks-cab__i { color: #9db9ff; }
.cks-cab b { display: block; font-size: 15px; font-weight: 800; line-height: 1.2; }
.cks-cab small { display: block; margin-top: 1px; font-size: 12px; color: var(--sv-tenue, #4a5680); }
.cks-est { font-size: 12px; font-weight: 700; color: var(--sv-az, #03269b); }
[data-theme='dark'] .cks-est { color: #9db9ff; }
.cks-est--mal { color: var(--sv-mal, #b42318); }
.cks-vacio { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px; border-radius: 14px; border: 1px dashed var(--sv-linea2, rgba(3, 38, 155, .18)); font-size: 13px; font-weight: 600; color: var(--sv-tenue, #4a5680); }
.cks-vacio--mal { color: var(--sv-mal, #b42318); }
.cks-enlace { border: 0; background: none; padding: 0; font-size: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; color: var(--sv-az, #03269b); }
[data-theme='dark'] .cks-enlace { color: #9db9ff; }
.cks-sub { margin: 4px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-tenue, #4a5680); }

/* lo que sugiere la IA */
.cks-ia { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid rgba(var(--sv-morrgb, 139, 92, 246), .38); background: linear-gradient(135deg, rgba(var(--sv-morrgb, 139, 92, 246), .13), rgba(var(--sv-celrgb, 53, 146, 207), .13)); }
.cks-ia.is-igual { border-color: rgba(var(--sv-okrgb, 34, 197, 94), .45); background: rgba(var(--sv-okrgb, 34, 197, 94), .1); }
.cks-ia--mal { border-color: rgba(var(--sv-malrgb, 239, 68, 68), .4); background: rgba(var(--sv-malrgb, 239, 68, 68), .08); }
.cks-ia--linea { padding: 9px 12px; }
.cks-ia__i { flex: none; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sv-mor, #5b3fd6), var(--sv-az, #03269b)); }
.cks-ia.is-igual .cks-ia__i { background: rgb(var(--sv-okrgb, 34, 197, 94)); }
.cks-ia--mal .cks-ia__i { background: rgb(var(--sv-malrgb, 239, 68, 68)); }
.cks-ia--linea .cks-ia__i { width: 30px; height: 30px; border-radius: 10px; }
.cks-ia__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cks-ia__t small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sv-mor, #5b3fd6); }
[data-theme='dark'] .cks-ia__t small { color: #c4b5fd; }
.cks-ia__t b { font-size: 14.5px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.cks-ia__t span { font-size: 12.5px; line-height: 1.4; color: var(--sv-tenue, #4a5680); }
.cks-ia__ok { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--sv-ok, #15724a); }
.cks-bt { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--sv-linea2, rgba(3, 38, 155, .18)); background: var(--sv-vidrio3, rgba(255, 255, 255, .9)); font-size: 13px; font-weight: 800; }
.cks-bt--pri { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--sv-az, #03269b), var(--sv-cel, #3592cf)); }
.cks-barra { position: relative; display: block; height: 5px; margin-top: 6px; border-radius: 999px; background: rgba(var(--sv-morrgb, 139, 92, 246), .2); overflow: hidden; }
.cks-barra i { position: absolute; top: 0; bottom: 0; width: 38%; border-radius: inherit; background: var(--sv-mor, #5b3fd6); animation: cks-desliza 1.1s ease-in-out 6 both; }
[data-theme='dark'] .cks-barra i { background: #c4b5fd; }

/* la lista */
.cks-lista { display: flex; flex-direction: column; gap: 8px; }
.cks-op { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 11px; align-items: center; width: 100%; min-height: 54px; padding: 8px 12px; text-align: left; border-radius: 14px; border: 1px solid var(--sv-linea, rgba(3, 38, 155, .1)); background: var(--sv-campo, rgba(3, 38, 155, .045)); transition: border-color .2s, background .2s; }
.cks-op.is-on { border-color: rgba(var(--sv-azrgb, 3, 38, 155), .55); background: rgba(var(--sv-celrgb, 53, 146, 207), .14); }
.cks-op.is-apagado b { color: var(--sv-tenue, #4a5680); }
.cks-op__r { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--sv-suave, #7a85a8); background: transparent; display: grid; place-items: center; }
.cks-op.is-on .cks-op__r { border-color: var(--sv-az, #03269b); }
.cks-op.is-on .cks-op__r::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--sv-az, #03269b); }
[data-theme='dark'] .cks-op.is-on .cks-op__r { border-color: #9db9ff; }
[data-theme='dark'] .cks-op.is-on .cks-op__r::after { background: #9db9ff; }
.cks-op__t b { display: block; font-size: 14px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.cks-op__t small { display: block; margin-top: 2px; font-size: 12px; color: var(--sv-tenue, #4a5680); }
.cks-op__ico { color: var(--sv-tenue, #4a5680); }
.cks-rec { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--sv-mor, #5b3fd6), var(--sv-az, #03269b)); white-space: nowrap; }
.cks-porque { display: flex; align-items: flex-start; gap: 6px; margin: -2px 4px 2px 12px; font-size: 12.5px; line-height: 1.4; color: var(--sv-mor, #5b3fd6); font-weight: 600; }
[data-theme='dark'] .cks-porque { color: #c4b5fd; }
.cks-porque--mal { color: var(--sv-mal, #b42318); }

/* C · chips */
.cks-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cks-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--sv-linea2, rgba(3, 38, 155, .18)); background: var(--sv-campo, rgba(3, 38, 155, .045)); font-size: 13.5px; font-weight: 700; transition: background .2s, color .2s; }
.cks-chip.is-on { background: linear-gradient(135deg, var(--sv-az, #03269b), var(--sv-cel, #3592cf)); border-color: transparent; color: #fff; }
.cks-chip.is-apagado:not(.is-on) { opacity: .6; }
.cks-det { padding: 10px 12px; border-radius: 14px; background: var(--sv-campo, rgba(3, 38, 155, .045)); }
.cks-det b { display: block; font-size: 14.5px; font-weight: 800; }
.cks-det small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--sv-tenue, #4a5680); }
@media (max-width: 520px) { .cks-ia { flex-wrap: wrap; } .cks-ia .cks-bt { width: 100%; justify-content: center; } }
@keyframes cks-desliza { 0% { left: -40%; } 100% { left: 102%; } }
@media (prefers-reduced-motion: reduce) { .cks *, .cks *::before, .cks *::after { animation: none !important; transition: none !important; } }
/* el degradado de los botones llenos cubre también el borde (sin la rayita del lado izquierdo) */
.cks-bt--pri, .cks-chip.is-on, .cks .sv-btn--pri { background-origin: border-box; }
.cks .cks-bt--pri { color: #fff; }

/* v1.1 (22-oct) · la etiqueta de otra categoría y «Crear uno nuevo» */
.cks-op__x { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.cks-otra { display: inline-flex; align-items: center; gap: 4px; max-width: 160px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(53, 146, 207, .5); background: rgba(53, 146, 207, .13); color: var(--sv-az, #03269b); font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.cks-otra svg { width: 11px; height: 11px; }
.cks-otra span { overflow: hidden; text-overflow: ellipsis; }
.cks-ia__t .cks-otra { margin: 3px 0 2px; max-width: 100%; }
[data-theme='dark'] .cks-otra { border-color: rgba(125, 196, 255, .55); background: rgba(125, 196, 255, .14); color: #c6e6ff; }
.cks-nuevo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--sv-linea2, rgba(3, 38, 155, .18)); font-size: 12.5px; font-weight: 600; color: var(--sv-tenue, #4a5680); }
.cks-nuevo > span { flex: 1 1 200px; min-width: 0; }
.cks-nuevo .cks-bt { height: 34px; }
.cks-nuevo--solo { margin-top: 2px; }
.cks-chip { max-width: 100%; text-align: left; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .cks-op--x { grid-template-columns: 22px minmax(0, 1fr); row-gap: 6px; }
  .cks-op--x .cks-op__r { grid-row: span 2; align-self: center; }
  .cks-op--x .cks-op__x { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  .cks-otra { max-width: 100%; }
}

/* v1.2 (23-oct) · VARIOS CHECKLISTS EN UN SERVICIO: casillas con el número de orden, el panel «Se llenan en este orden» (▲ ▼ y quitar) y la combinación que sugiere la IA */
.cks .cks-op--m .cks-op__r { border-radius: 7px; }
.cks .cks-op--m .cks-op__r b { font-size: 12px; font-weight: 800; line-height: 1; color: #fff; }
.cks .cks-op--m .cks-op__r svg { color: #fff; }
.cks .cks-op--m.is-on .cks-op__r { border-color: transparent; background: linear-gradient(135deg, var(--sv-az, #03269b), var(--sv-cel, #3592cf)); background-origin: border-box; }
.cks .cks-op--m.is-on .cks-op__r::after { content: none; }
[data-theme='dark'] .cks .cks-op--m.is-on .cks-op__r { border-color: transparent; }
.cks-chip__n { font-style: normal; flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 7px; font-size: 12px; font-weight: 800; line-height: 1; color: #03269b; background: #fff; }
.cks-orden { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; border: 1px solid rgba(var(--sv-azrgb, 3, 38, 155), .22); background: rgba(var(--sv-celrgb, 53, 146, 207), .08); }
.cks-orden .cks-sub { margin: 0; }
.cks-orden__l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cks-ord { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 7px 7px 9px; border-radius: 13px; border: 1px solid var(--sv-linea, rgba(3, 38, 155, .1)); background: var(--sv-vidrio3, rgba(255, 255, 255, .9)); }
.cks-ord__n { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--sv-az, #03269b), var(--sv-cel, #3592cf)); background-origin: border-box; }
.cks-ord__t { min-width: 0; }
.cks-ord__t b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.cks-ord__t small { display: block; margin-top: 1px; font-size: 12px; color: var(--sv-tenue, #4a5680); }
.cks-ord__bs { display: inline-flex; gap: 4px; }
.cks .cks-ord__b { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 13px; border: 1px solid var(--sv-linea2, rgba(3, 38, 155, .18)); background: var(--sv-campo, rgba(3, 38, 155, .045)); }
.cks .cks-ord__b:disabled { opacity: .35; }
.cks-orden__nota { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--sv-tenue, #4a5680); }
.cks-ia__t .cks-ia__seq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 0; font-size: 12.5px; }
.cks-ia__seq i { font-style: normal; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--sv-mor, #5b3fd6), var(--sv-az, #03269b)); }
.cks-ia__seq em { font-style: normal; font-weight: 700; min-width: 0; overflow-wrap: anywhere; color: var(--sv-tinta, #0b1540); }
.cks-ia__seq em + i { margin-left: 6px; }
@media (max-width: 460px) { .cks-ord { grid-template-columns: 28px minmax(0, 1fr); row-gap: 6px; } .cks-ord__bs { grid-column: 2; } }