/* ===== Contenedor general ===== */
.kspl-wrap{
  max-width:1200px;                 /* + espacio en el canvas y el form */
  margin:16px auto;
  padding:16px;
  border:1px solid #e7e8ea;
  border-radius:12px;
  background:#fff;
}

/* ===== Header ===== */
.kspl-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px
}
.kspl-head h2{margin:0;font-size:20px}

/* ===== Grid form / preview ===== */
.kspl-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;                         /* + respiración entre columnas */
}
@media (max-width:980px){
  .kspl-grid{grid-template-columns:1fr}
}

/* Evita overflow del panel izquierdo si se estira una fila */
.kspl-wrap .kspl-grid > :first-child{
  overflow:hidden;
}

/* ===== Tarjetas ===== */
.kspl-card{
  border:1px solid #edf0f3;
  border-radius:10px;
  padding:14px;
  background:#fafbfc
}
.kspl-card h3{margin:0 0 10px;font-size:16px}

/* ===== Inputs ===== */
.ks-input, .ks-select{
  appearance:none;
  width:100%;
  padding:8px 12px;
  border:2px solid #2b47ff;
  color:#2b47ff;
  border-radius:16px;
  background:#fff;
  font-weight:600;
  outline:none;
}

.ks-arte-wrap{
  display:flex;
  flex-direction:column;
  width:100%;
}

.ks-arte-input-wrap{
  position:relative;
  width:100%;
  min-width:220px;
}

.ks-arte-input{
  padding-right:36px;
}

.btn-clear-arte{
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border:none;
  border-radius:50%;
  background:transparent;
  color:#d5d5d5;
  font-size:56px;
  font-weight:300;
  line-height:0.55;
  cursor:pointer;
  padding:0;
}

.btn-clear-arte:hover{
  color:#c8c8c8;
}

.btn-clear-arte:active{
  color:#b8b8b8;
}

.btn-clear-arte:focus-visible{
  outline:2px solid #dcdcdc;
  outline-offset:1px;
}

/* ===== Grupo por modelo ===== */
.ks-group{
  border:2px solid #ff6b6b;
  border-radius:8px;
  padding:12px;
  background:#fff
}
.ks-label{display:block;font-weight:700;margin:6px 2px 4px 2px;color:#2b47ff}

/* ===== Fila de controles (color/cantidad/tinta/arte/opacidad/x) ===== */
/* Pasamos de grid fijo a flex con wrap para que no desborde */
.ks-row{
  display:flex;
  flex-wrap:wrap;                   /* si no entra, baja a 2 líneas */
  align-items:center;
  gap:12px;
  margin-top:8px;
}

/* Orden actual de los hijos en la fila:
   1) select Color
   2) input Cantidad
   3) select Tinta
   4) select Arte
   5) input Opacidad
   6) botón X
*/
.ks-row > :nth-child(1){ flex:1 1 180px; }     /* Color */
.ks-row > :nth-child(2){ flex:0 0 120px; }     /* Cantidad */
.ks-row > :nth-child(3){ flex:0 0 140px; }     /* Tinta */
.ks-row > :nth-child(4){ flex:1 1 180px; min-width:160px; } /* Arte */
.ks-row > :nth-child(5){ flex:0 0 80px; }      /* Opacidad */
.ks-row > :nth-child(6){ flex:0 0 44px; }      /* X */

.ks-row .btn-del{
  border:none;
  background:#ffe8e8;
  color:#c41212;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  height:40px
}

/* Controles de desplazamiento del arte (izquierda/derecha) */
.ks-move-arte{display:flex;gap:6px;align-items:center;justify-content:center}
.ks-move-arte .btn-move{border:none;background:#eef1f3;color:#0b7c8d;border-radius:10px;cursor:pointer;width:36px;height:40px;font-weight:700}
.ks-move-arte .btn-move:active{transform:translateY(1px)}

/* Override: acciones al final de la fila (mover + borrar juntos) */
.ks-row{
  align-items:flex-start;
  gap:14px;
}
.ks-row > :nth-child(1){ flex:1 1 180px; }
.ks-row > :nth-child(2){ flex:0 0 120px; }
.ks-row > :nth-child(3){ flex:0 0 140px; }
.ks-row > :nth-child(4){ flex:1 1 200px; min-width:160px; }
.ks-row > :nth-child(5){ flex:0 0 auto; margin-left:auto; }
.ks-row-actions{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  align-items:center;
  justify-content:flex-end;
}
.ks-row-actions .ks-move-arte .btn-move,
.ks-row-actions .btn-del{
  height:40px;
}

/* ===== Acciones (botonera) ===== */
.ks-actions{display:flex;gap:10px;align-items:center;margin-top:10px}
/* Si agregas el control de Arte en la barra superior, luce bien en línea */
.ks-arte-ctl{display:flex;gap:8px;align-items:center}

/* ===== Botones ===== */
.ks-btn{border:none;background:#0b7c8d;color:#fff;border-radius:10px;padding:10px 14px;cursor:pointer}
.ks-btn.secondary{background:#eef1f3;color:#0b7c8d}

/* ===== Preview ===== */
.kspl-preview{
  background:#fff;
  border:1px dashed #d8dde3;
  border-radius:10px;
  padding:10px
}
.kspl-canvas{width:100%;height:auto;border-radius:8px;display:block;background:#fff}
.ks-note{font-size:12px;color:#66707a;margin-top:6px}

/* ===== Responsive ajustes finos ===== */
@media (max-width:1300px){
  .ks-row{ gap:10px; }
  .ks-row > :nth-child(4){ flex:1 1 160px; min-width:140px; } /* Arte un poco más compacto */
}
@media (max-width:1024px){
  .ks-row{
    gap:10px;
  }
  .ks-row > :nth-child(1){ flex:1 1 100%; }   /* Color a toda línea si hace falta */
  .ks-row > :nth-child(2){ flex:0 0 120px; }  /* Cantidad */
  .ks-row > :nth-child(3){ flex:0 0 140px; }  /* Tinta */
  .ks-row > :nth-child(4){ flex:1 1 100%; min-width:0; } /* Arte puede ocupar la línea completa */
}